@media (max-width: 768px) {
    .banner-section-nine .swiper-slide .bg-layer {
        background-size: cover; /* Ensures the image covers the slide area */
        background-position: center center; /* Centers the image for balanced display */
        background-repeat: no-repeat;
        height: 100vh; /* Uses full viewport height for the slide */
    }

    .banner-section-nine .auto-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px; /* Adds some padding for mobile */
        height: 100%; /* Ensures the container takes up full height */
    }

    .banner-section-nine .content-box {
        text-align: center; /* Centers the text for a balanced mobile view */
        padding: 10px; /* Adds padding around the text for better readability */
    }

    .banner-section-nine .content-box h3,
    .banner-section-nine .content-box h2 {
        font-size: 1.5rem; /* Adjusts heading size for mobile */
    }

    .banner-section-nine .content-box p {
        font-size: 1rem; /* Adjusts paragraph size for readability on mobile */
    }
}