/* Mobile Carousel Fix - Force visibility */
@media (max-width: 768px) {
    .hero-carousel {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        height: 100vh !important;
        min-height: 600px !important;
        z-index: 1 !important;
        background: transparent !important;
    }
    
    .carousel-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    .carousel-slide {
        display: block !important;
        visibility: visible !important;
        opacity: 0 !important;
        position: absolute !important;
        height: 100% !important;
        width: 100% !important;
        transform: translateX(100%) !important;
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        background: linear-gradient(75deg, rgba(0, 0, 0, 0.7), rgba(0, 58, 167, 0.6)), url('../assets/images/index/hero-1.jpg') center/cover no-repeat !important;
    }
    
    .carousel-slide.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        background: linear-gradient(75deg, rgba(0, 0, 0, 0.7), rgba(0, 58, 167, 0.6)), url('../assets/images/index/hero-1.jpg') center/cover no-repeat !important;
    }
    
    .carousel-slide.prev {
        transform: translateX(-100%) !important;
    }
    
    .slide-content {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        padding: 40px 15px !important;
        text-align: center !important;
    }
    
    .hero-carousel .slide-text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        width: 100% !important;
        z-index: 10 !important;
    }
    
    .hero-carousel .slide-text * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
    }
    
    .hero-carousel .slide-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        font-size: 2.2rem !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-carousel .slide-subtitle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        font-size: 1.1rem !important;
        text-align: center !important;
        margin-bottom: 0.8rem !important;
    }
    
    .hero-carousel .slide-description {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        font-size: 1rem !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-carousel .slide-badge {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        text-align: center !important;
        margin: 0 auto 1rem auto !important;
    }
    
    .hero-carousel .cta-button {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        margin: 1rem auto !important;
    }
    
    .hero-carousel .slide-features {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-carousel .feature-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-carousel .slide-offer {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
    }
    
    .hero-carousel .offer-price {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #ff6b6b !important;
        font-size: 2.8rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-carousel .offer-text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        text-align: center !important;
    }
    
    .hero-carousel .offer-text p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
    }
    
    /* Hide images on mobile */
    .slide-image,
    .image-wrapper,
    .floating-elements,
    .floating-icon {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Make text column full width */
    .slide-content .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 576px) {
    .hero-carousel {
        min-height: 500px !important;
    }
    
    .hero-carousel .slide-title {
        font-size: 1.8rem !important;
    }
    
    .hero-carousel .slide-subtitle {
        font-size: 1rem !important;
    }
    
    .hero-carousel .slide-description {
        font-size: 0.9rem !important;
    }
    
    .hero-carousel .offer-price {
        font-size: 2.2rem !important;
    }
}

@media (max-width: 320px) {
    .hero-carousel {
        min-height: 450px !important;
    }
    
    .hero-carousel .slide-title {
        font-size: 1.5rem !important;
    }
    
    .hero-carousel .slide-subtitle {
        font-size: 0.9rem !important;
    }
    
    .hero-carousel .slide-description {
        font-size: 0.8rem !important;
    }
    
    .hero-carousel .offer-price {
        font-size: 2rem !important;
    }
}