/* Universal Mobile Slider Fixes for All Pages */

/* Smooth Slider Transitions for All Devices */
.carousel-item {
    transition: transform 1.5s ease-in-out !important;
}

.swiper-wrapper {
    transition-timing-function: ease-in-out !important;
}

.swiper-slide {
    transition: all 0.8s ease-in-out !important;
}

@media (max-width: 768px) {
    /* Main Carousel Slider Mobile */
    .carousel-item img,
    .slider-item img {
        height: 50vh !important;
        width: 100% !important;
        object-fit: cover !important;
        min-height: 300px !important;
    }
    
    .slider-content-area {
        padding: 15px 0 !important;
        position: absolute !important;
        bottom: 20px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        border-radius: 10px !important;
        margin: 0 15px !important;
    }
    
    .slider-content {
        text-align: center !important;
        padding: 15px !important;
        color: white !important;
    }
    
    .slider-content h2 {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        color: white !important;
    }
    
    .slider-content h3 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        color: #53a92c !important;
    }
    
    .slider-content p {
        font-size: 12px !important;
        margin-bottom: 10px !important;
        color: #f0f0f0 !important;
    }
    
    /* Testimonial Slider Mobile */
    .testimonial-container {
        padding: 0 15px !important;
        overflow: hidden !important;
    }
    
    .swiper-slide {
        padding: 15px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .testimonial-content {
        background: white !important;
        padding: 20px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        margin-bottom: 15px !important;
    }
    
    .testimonial-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: justify !important;
        color: #333 !important;
        margin-bottom: 15px !important;
    }
    
    .author-details {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        padding: 10px 0 !important;
    }
    
    .author-img {
        flex-shrink: 0 !important;
    }
    
    .author-img img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }
    
    .author-name {
        text-align: left !important;
    }
    
    .author-name h4 {
        font-size: 16px !important;
        margin-bottom: 3px !important;
        color: #333 !important;
    }
    
    .author-name h6 {
        font-size: 12px !important;
        color: #666 !important;
        margin: 0 !important;
    }
    
    /* Carousel Controls Mobile */
    .carousel-control-prev,
    .carousel-control-next {
        width: 45px !important;
        height: 45px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(0,0,0,0.6) !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        opacity: 0.8 !important;
        transition: all 0.3s ease !important;
    }
    
    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        background: rgba(83, 169, 44, 0.8) !important;
        opacity: 1 !important;
        transform: translateY(-50%) scale(1.1) !important;
    }
    
    .carousel-control-prev {
        left: 15px !important;
    }
    
    .carousel-control-next {
        right: 15px !important;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 22px !important;
        height: 22px !important;
        filter: brightness(0) invert(1) !important;
    }
    
    /* Carousel Indicators Mobile */
    .carousel-indicators {
        bottom: 10px !important;
        margin-bottom: 0 !important;
    }
    
    .carousel-indicators [data-bs-target] {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
        margin: 0 3px !important;
        background-color: rgba(255,255,255,0.5) !important;
        border: none !important;
    }
    
    .carousel-indicators .active {
        background-color: #53a92c !important;
        transform: scale(1.2) !important;
    }
    
    /* Product Page Sliders Mobile */
    .flexslider {
        margin: 0 !important;
        border: none !important;
    }
    
    .flexslider .slides > li {
        display: block !important;
        margin: 0 !important;
    }
    
    .flexslider .slides img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: cover !important;
    }
    
    .flex-direction-nav {
        display: block !important;
    }
    
    .flex-direction-nav a {
        width: 40px !important;
        height: 40px !important;
        margin: -20px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0,0,0,0.6) !important;
        position: absolute !important;
        top: 50% !important;
        z-index: 10 !important;
        overflow: hidden !important;
        opacity: 0.8 !important;
        cursor: pointer !important;
        color: white !important;
        border-radius: 50% !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }
    
    .flex-direction-nav a:hover {
        background: rgba(83, 169, 44, 0.8) !important;
        opacity: 1 !important;
        transform: scale(1.1) !important;
    }
    
    .flex-direction-nav a:before {
        font-family: 'FontAwesome' !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
    
    .flex-direction-nav .flex-prev:before {
        content: '\f104' !important;
    }
    
    .flex-direction-nav .flex-next:before {
        content: '\f105' !important;
    }
    
    .flex-direction-nav .flex-prev {
        left: 15px !important;
    }
    
    .flex-direction-nav .flex-next {
        right: 15px !important;
    }
    
    /* FlexSlider pagination */
    .flex-control-paging {
        bottom: 15px !important;
        text-align: center !important;
    }
    
    .flex-control-paging li a {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255,255,255,0.5) !important;
        border-radius: 50% !important;
        margin: 0 4px !important;
    }
    
    .flex-control-paging li a.flex-active {
        background: #53a92c !important;
        transform: scale(1.2) !important;
    }
    
    /* Swiper Slider Mobile */
    .swiper-container {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 15px !important;
        overflow: hidden !important;
    }
    
    .swiper-wrapper {
        height: auto !important;
        display: flex !important;
        transition-timing-function: linear !important;
    }
    
    .swiper-slide {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
        margin-top: -20px !important;
        background: rgba(0,0,0,0.6) !important;
        border-radius: 50% !important;
        color: white !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: rgba(83, 169, 44, 0.8) !important;
        transform: scale(1.1) !important;
    }
    
    .swiper-button-prev {
        left: 15px !important;
    }
    
    .swiper-button-next {
        right: 15px !important;
    }
    
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 16px !important;
        font-weight: bold !important;
    }
    
    .swiper-pagination {
        bottom: 15px !important;
        text-align: center !important;
    }
    
    .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255,255,255,0.5) !important;
        opacity: 1 !important;
        margin: 0 4px !important;
    }
    
    .swiper-pagination-bullet-active {
        background: #53a92c !important;
        transform: scale(1.2) !important;
    }
    
    /* General Slider Container Mobile */
    .slider-container,
    .slider-wrapper,
    .slider-item {
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Image Slider Mobile */
    .image-slider img,
    .product-slider img,
    .gallery-slider img {
        width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Gallery and Product Sliders */
    .gallery-slider,
    .product-slider {
        margin: 0 !important;
        padding: 0 15px !important;
    }
    
    .gallery-slider .swiper-slide,
    .product-slider .swiper-slide {
        padding: 5px !important;
    }
    
    /* Image hover effects on mobile */
    .image-slider img:active,
    .product-slider img:active,
    .gallery-slider img:active {
        transform: scale(0.98) !important;
    }
    
    /* Ensure proper spacing between slider items */
    .slider-item + .slider-item {
        margin-top: 0 !important;
    }
    
    /* Fix for any custom slider implementations */
    [class*="slider"] {
        overflow: hidden !important;
    }
    
    [class*="slider"] img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Responsive slider buttons positioning */
    .slider-controls {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    
    .slider-controls.prev {
        left: 15px !important;
    }
    
    .slider-controls.next {
        right: 15px !important;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 576px) {
    .carousel-item img,
    .slider-item img {
        height: 45vh !important;
        min-height: 250px !important;
    }
    
    .slider-content-area {
        margin: 0 10px !important;
        bottom: 15px !important;
    }
    
    .slider-content {
        padding: 12px !important;
    }
    
    .slider-content h2 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    .slider-content h3 {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    .slider-content p {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    .slider-btn .btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 35px !important;
        height: 35px !important;
    }
    
    .carousel-control-prev {
        left: 10px !important;
    }
    
    .carousel-control-next {
        right: 10px !important;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Testimonial adjustments for very small screens */
    .testimonial-content {
        padding: 15px !important;
    }
    
    .testimonial-content p {
        font-size: 13px !important;
    }
    
    .author-img img {
        width: 45px !important;
        height: 45px !important;
    }
    
    .author-name h4 {
        font-size: 14px !important;
    }
    
    .author-name h6 {
        font-size: 11px !important;
    }
    
    .swiper-container {
        padding: 0 10px !important;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
        margin-top: -17px !important;
    }
    
    .swiper-button-prev {
        left: 10px !important;
    }
    
    .swiper-button-next {
        right: 10px !important;
    }
}

/* Landscape orientation for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .carousel-item img,
    .slider-item img {
        height: 70vh !important;
        min-height: 350px !important;
    }
    
    .slider-content-area {
        bottom: 10px !important;
    }
    
    .slider-content {
        padding: 10px !important;
    }
    
    .slider-content h2 {
        font-size: 16px !important;
    }
    
    .slider-content h3 {
        font-size: 12px !important;
    }
    
    .slider-content p {
        font-size: 11px !important;
    }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
    /* Ensure all slider controls are touch-friendly */
    .carousel-control-prev,
    .carousel-control-next,
    .swiper-button-next,
    .swiper-button-prev {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    
    /* Prevent text selection on slider controls */
    .carousel-control-prev,
    .carousel-control-next,
    .swiper-button-next,
    .swiper-button-prev,
    .carousel-indicators,
    .swiper-pagination {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Smooth scrolling for sliders */
    .swiper-wrapper {
        -webkit-transform: translate3d(0,0,0) !important;
        transform: translate3d(0,0,0) !important;
    }
    
    /* Auto-hide controls after interaction */
    .carousel:hover .carousel-control-prev,
    .carousel:hover .carousel-control-next {
        opacity: 1 !important;
    }
}