/* =========================================
   MOBILE RESPONSIVE CSS (FIXED VERSION)
   No image repetition issue
   ========================================= */

/* Tablets & Mobile */
@media only screen and (max-width: 991px) {

    /* DO NOT change slider display type */
    .banner-slider,
    .slider,
    .home-banner {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    /* Ensure single image fills slide properly */
    .banner-slider img,
    .slider img,
    .carousel-item img,
    .swiper-slide img,
    .slick-slide img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Prevent background image repeating */
    .banner-slider,
    .slider,
    .carousel-item,
    .swiper-slide,
    .slick-slide {
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Remove fixed height from slides */
    .slick-slide,
    .swiper-slide,
    .carousel-item {
        height: auto !important;
    }

    /* Banner Text Container */
    .banner-content,
    .slider-content,
    .banner-text {
        position: relative !important;
        width: 100% !important;
        padding: 20px 15px !important;
        text-align: center !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    /* Heading */
    .banner-content h1,
    .slider-content h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    /* Paragraph */
    .banner-content p,
    .slider-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* CTA Button */
    .banner-content .btn,
    .slider-content .btn,
    .banner-content a,
    .slider-content a {
        display: inline-block !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
        width: auto !important;
        max-width: 100% !important;
    }

}


/* Small Devices */
@media only screen and (max-width: 576px) {

    .banner-content h1 {
        font-size: 20px !important;
    }

    .banner-content p {
        font-size: 13px !important;
    }

    .banner-content .btn {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }

}


/* Extra Small Devices */
@media only screen and (max-width: 400px) {

    .banner-content h1 {
        font-size: 18px !important;
    }

    .banner-content p {
        font-size: 12px !important;
    }

    .banner-content .btn {
        font-size: 12px !important;
        padding: 7px 14px !important;
    }

}