/* Responsive styles for header and mobile menu */

/* Responsive container styles */
.site-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Large screens (1200px and up) */
@media (min-width: 1200px) {
    .site-container {
        max-width: 1440px;
        padding: 0 40px;
    }
}

/* Medium screens (768px to 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .site-container {
        max-width: 960px;
        padding: 0 30px;
    }
}

/* Small screens (480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .site-container {
        max-width: 100%;
        padding: 0 20px;
    }

    .banner::after {
        height: 37px;
    }

    .know-more-section::before {
        height: 28px;
        top: -27px;
    }

    .why-it-works-section::after {
        height: 66px;
        bottom: -18px;
    }
}

/* Extra small screens (below 480px) */
@media (max-width: 479px) {
    .site-container {
        max-width: 100%;
        padding: 0 15px;
    }

    .why-it-works-section::after {
        height: 66px;
        bottom: -18px;
    }

    .know-more-section::before {
        height: 28px;
        top: -27px;
    }

    .banner::after {
        height: 37px;
    }
}

/* Mobile menu button styles */
#mobile-menu-btn {
    display: none;
}

@media (max-width: 767px) {
    .why-it-works-section::after {
        height: 60px;
    }

    #mobile-menu-btn {
        display: flex;
    }
}



/* Responsive styles for testimonial section */