/* ===============================
   Default (Desktop)
================================*/
.skin-hero-section {
    background-image: url("https://www.theestheticclinics.com/assets/image/Banner/skincare-banner.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.skin-hero-section-1 {
    background-image: url("https://www.theestheticclinics.com/assets/image/Banner/haircare-banner.png") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.hair-hero-section {
    background-image: url("https://www.theestheticclinics.com/assets/image/Banner/haircare-banner.png") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* ===============================
   For Tablets (below 992px)
================================*/
@media (max-width: 992px) {
    .skin-hero-section {
        background-image: url("https://www.theestheticclinics.com/assets/image/Banner/banner bg.jpeg") !important;
        padding: 0;
        text-align: center;
    }
}

/* ===============================
   For Mobiles (below 576px)
================================*/
@media (max-width: 576px) {
    .skin-hero-section {
        padding: 30px;        /* mobile spacing */
    }
}

/* ===============================
   Very Small Mobiles (below 400px)
================================*/
@media (max-width: 400px) {
    .skin-hero-section {
        padding: 0;           /* remove padding for tiny screens */
    }
}