/* MAIN BANNER */
.hero-banner {
    width: 100%;
    height: 600px;                /* DESKTOP FIXED HEIGHT */
    background-size: cover;       /* full cover */
    background-position: center;  /* center focus */
    background-repeat: no-repeat;
    position: relative;
}

/* TABLET */
@media (max-width: 991px) {
    .hero-banner {
        height: 320px;            /* tablet optimized size */
        background-position: center top;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .hero-banner {
        height: 200px;            /* mobile proper height */
        background-size: cover;
        background-position: center top;
    }
}

/* VERY SMALL MOBILES */
@media (max-width: 480px) {
    .hero-banner {
        height: 260px;            /* small phones like 4–5" */
    }
}




/* Banner container */
.banner-wrapper {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Perfect Responsive Banner */
.banner-fit {
    width: 100%;          /* full width on all screens */
    height: auto;         /* keeps original aspect ratio */
    display: block;       /* removes bottom whitespace */
    object-fit: contain;  /* ensures NO CROPPING */
    max-width: 100%;
}

/* Optional: Add small round corners (remove if not needed) */
.banner-wrapper img {
    border-radius: 0;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .banner-fit {
        width: 100%;
        height: auto;     /* mobile par perfect solve */
        object-fit: contain;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .banner-fit {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}



/* Banner container */
.banner-wrapper {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Image responsive */
.banner-fit {
    width: 100%;
    height: auto;
    display: block;
}

/* Desktop / default top space */
.banner-wrapper {
    margin-top: 20px;         /* header ke neeche thoda gap */
}

/* Mobile: agar header fixed hai to zyada space de do */
@media (max-width: 768px) {
    .banner-wrapper {
        margin-top: 70px;     /* yahan header ki height ke hisab se adjust karo (60–80px) */
    }
}