@media (max-width: 768px) {

    .main-header {
        height: auto; /* 🔥 important */
        min-height: 180px;
        background-size: contain; /* 🔥 shows full image */
        background-position: center;
        background-repeat: no-repeat;
        background-color: #fff7d8; /* fills empty space */
        margin-top:-35px;
    }

    .welcome-title {
        font-size: 24px;
        padding: 6px 15px;
    }

    .container > .d-flex {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

        .container > .d-flex a,
        .container > .d-flex button {
            width: 100%;
        }

    .image-card img {
        height: 130px;
    }

    .floating-call.active {
        top: auto;
        bottom: 90px;
        transform: none;
    }
}

/* 📱 TABLET RESPONSIVE (768px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

    .main-header {
        height: 220px; /* slightly larger than mobile */
        background-size: contain; /* show full image */
        background-position: center;
        background-repeat: no-repeat;
        background-color: #fff7d8;
        margin-top: -20px;
        margin-bottom: -20px;
    }

    /* 🔹 Welcome title */
    .welcome-title {
        font-size: 30px;
        padding: 8px 18px;
    }

    /* 🔹 Navigation buttons spacing */
    .container > .d-flex {
        gap: 10px;
    }

    /* 🔹 Cards spacing */
    .cardbg {
        padding: 12px;
    }

    /* 🔹 Image cards slightly bigger */
    .image-card img {
        height: 150px;
    }

    /* 🔹 Floating widget position */
    .floating-call.active {
        top: 65%;
        transform: translateY(-50%);
    }
}