@media (max-width: 577px) {
    h1, .h1 {
        font-size: calc(0.675rem + 0.5vw);
    }

    .fs-18 {
        font-size: 8px !important;
    }

    .fs-12 {
        font-size: 10.12px !important;
    }

    .header {
        min-height: 1100px !important;
    }

    .section1 .d-md-flex.my-lg-4.my-md-3.height-button.justify-content-between.col-md-10.row.px-3 {
        width: max-content !important;
    }

    .section1 a.main-btns.col-4.col-md-4.btn.btn-outline-light.py-1.fs-8.text-decoration-none.border.border-white.border-1.rounded-0.text-center.d-flex.justify-content-center.align-items-center.aos-init.aos-animate {
        padding: 0px !important;
        margin: -8px !important;
    }

    .section1 .details {
        width: 200px !important;
    }

    .section2 img.img-fluid.custom-img.w-100 {
        position: absolute !important;
        top: -312px !important;
        width: 153px !important;
        z-index: 999 !important;
        left: 22px !important;
    }

    .layer-container {
        height: 800px !important;
    }

    .section3 h5.fw-light.lh-sm.text-22-pt.text-22.lh-30-pt.mt-3.text-sm-res.aos-init.aos-animate {
        padding: 26px !important;
        padding-top: 0px !important;
    }

    .section3 h2.py-4.fs-24.fw-bold.mb-0.text-40-pt {
        padding-left: 24px !important;
    }

    .text-12-pt {
        font-size: 4pt !important;
    }

    .fs-8 {
        font-size: 0.45rem !important;
    }

    .section4 p.text-white.fw-normal.mb-0.aos-init.aos-animate {
        text-align: justify !important;
        position: absolute;
        bottom: -68px;
        font-size: 12px !important;
        line-height: 25px !important;
        left: -10px !important;
        max-width: 222px !important;
    }

    .section6 .fs-14.text-white.position-absolute.d-flex.d-block.start-0 {
        margin: 10px !important;
    }

    .section7 .switches-containerو, .section7 .bg-success, .section8, .section9 .btn, .section7 .switches-container {
        display: none !important;
    }

    .image-layer {
        height: 300px !important;
        width: 125px !important;
    }

    .section7 .image-container {
        height: 300px !important;
    }

    footer a.fs-7 {
        font-size: 10px !important;
    }

    footer h6 {
        font-size: 0.6rem !important;
    }

    .up-footer p.lh-sm.text-white.fs-8, #the-feature .lh-sm.text-white.fs-8 {
        max-width: 61%;
    }

    
    .text-67-pt {
        font-size: 16px !important;
    }

    .text-25-pt {
        font-size: 10px !important;
    }

    .para-resp {
        margin-right: 0rem !important;
        margin-left: 0rem !important;
    }

    .layer-car {
        height: 108px;
    }

    .layer-woman {
        height: 60vh !important;
    }

    .text-heading-resp {
        font-size: 10px !important;
    }

    .layer-container {
        max-height: 200px !important;
    }

    .bottom-30 {
        bottom: 8px !important;
    }

    .fs-resp-18 {
        font-size: 17px !important;
    }
}

@media (min-width: 578px) and (max-width: 767px) {
    .background-img {
        /* height: 80vh !important; */
    }
}

.bottom-30 {
    bottom: 30px;
}

.switch-two {
    display: flex;
    border: 2px solid white;
    border-radius: 0px;
    overflow: hidden;
}

.switch-two button {
    background-color: black;
    color: white;
    padding: 10px 20px;
    border: none;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.switch-two button.active {
    background-color: white;
    color: black;
}

.btn-style {
    border: 2px solid white;
    color: white;
    background: none;
    padding: 10px 20px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-style:hover {
    background-color: white;
    color: black;
}