/* Wavy Hero Effect - Assortguide Blog System */

/* Hero Carousel Container Positioning */
.hero-carousel-container {
    position: relative;
    overflow: visible;
    background: linear-gradient(135deg, rgba(52, 51, 82, 0.1) 0%, rgba(52, 51, 82, 0.05) 100%);
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 50px;
}

/* Hero Image Size and Alignment */
.hero-carousel-container .main-banner .col-lg-6 img {
    max-width: 80%;
    max-height: 400px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    transform: translateY(20px);
    position: relative;
    z-index: 99999;
}

@media (max-width: 768px) {
    .hero-carousel-container .main-banner .col-lg-6 img {
        max-width: 80%;
        max-height: 280px;
        transform: translateY(10px);
        position: relative;
        z-index: 99999;
    }
}

@media (max-width: 576px) {
    .hero-carousel-container .main-banner .col-lg-6 img {
        max-width: 75%;
        max-height: 220px;
        transform: translateY(8px);
        position: relative;
        z-index: 99999;
    }
}

@media (max-width: 480px) {
    .hero-carousel-container .main-banner .col-lg-6 img {
        max-width: 70%;
        max-height: 180px;
        transform: translateY(5px);
        position: relative;
        z-index: 99999;
    }
}

/* Wavy Effect using CSS Filter - Assortguide theme */
.hero-carousel-container::after {
    content: '';
    position: absolute;
    background: #fff;
    filter: url(#wavy);
    width: 110%;
    bottom: -50px;
    left: -15px;
    height: 60px;
    z-index: 10;
    margin-bottom: 0;
    display: block !important;
}

/* Ensure proper spacing for the next section */
.border-top {
    border-top: 1px solid #e9ecef !important;
    margin-top: 0;
    padding-top: 0;
}

/* Carousel dots positioning */
.carousel-dots {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}


/* Responsive adjustments for wavy effect */
@media (max-width: 768px) {
    .hero-carousel-container::after {
         height: 40px;
         bottom: -35px;
         display: block !important;
    }
    
    .carousel-dots {
         bottom: 40px;
         display: none !important; /* Hide indicators on mobile */
    }
}

@media (max-width: 576px) {
    .hero-carousel-container::after {
         height: 30px;
         bottom: -30px;
         display: block !important;
    }
    
    .carousel-dots {
         bottom: 30px;
         display: none !important; /* Hide indicators on mobile */
    }
}

@media (max-width: 480px) {
    .hero-carousel-container::after {
         height: 25px;
         bottom: -25px;
         display: block !important;
    }
    
    .carousel-dots {
         display: none !important; /* Hide indicators on small mobile */
    }
}

/* Ensure the hero content is properly positioned above the wavy effect */
.hero-carousel-container .swiper {
    position: relative;
    z-index: 5;
}

/* Improve text visibility on gradient background */
.hero-carousel-container .main-banner .inner-content h1,
.hero-carousel-container .main-banner .inner-content h3,
.hero-carousel-container .main-banner .inner-content h4,
.hero-carousel-container .main-banner .inner-content h4 span,
.hero-carousel-container .main-banner .inner-content h4 strong,
.hero-carousel-container .main-banner .inner-content .top-heading,
.hero-carousel-container .main-banner .banner-list li {
    color: #2c3e50 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Mobile hero text visibility */
.hero-carousel-container .mobile-hero-titles h1,
.hero-carousel-container .mobile-hero-titles h3,
.hero-carousel-container .mobile-hero-titles .top-heading,
.hero-carousel-container .mobile-hero-center h4,
.hero-carousel-container .mobile-hero-center h4 span,
.hero-carousel-container .mobile-hero-center h4 strong,
.hero-carousel-container .mobile-hero-left .banner-list li {
    color: #2c3e50 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Override main banner styling to remove white background and border */
.hero-carousel-container .main-banner {
    padding: 4px 0 4px 0 !important;
    margin-top: 0 !important;
    background: transparent !important;
    border-top: none !important;
    overflow: visible !important;
}

@media (max-width: 768px) {
    .hero-carousel-container .main-banner {
        padding: 3px 0 3px 0 !important;
        margin-top: 0 !important;
        background: transparent !important;
        border-top: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 576px) {
    .hero-carousel-container .main-banner {
        padding: 2px 0 2px 0 !important;
        margin-top: 0 !important;
        background: transparent !important;
        border-top: none !important;
        overflow: visible !important;
    }
}