/* Banner Full Size CSS - Ensures banner images cover the full div size */

/* Hero Section - Increased Height Banner Images */
.hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 70vh !important;
    height: 70vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove any white space from hero carousel section */
#heroCarousel {
    margin: 0 !important;
    padding: 0 !important;
}

/* Carousel Items - Increased Height */
.carousel-item {
    width: 100% !important;
    height: 70vh !important;
    min-height: 70vh !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Carousel Inner Container */
.carousel-inner {
    width: 100% !important;
    height: 70vh !important;
    min-height: 70vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Main Carousel Container */
#heroCarousel,
#heroCarousel .carousel {
    width: 100% !important;
    height: 70vh !important;
    min-height: 70vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure banner images fill the entire container */
.carousel-item .hero-section {
    width: 100% !important;
    height: 100% !important;
    min-height: 70vh !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hero Content Positioning */
.hero-content {
    position: relative !important;
    z-index: 5 !important;
    text-align: left !important;
    max-width: 800px !important;
    margin: 0 0 0 2rem !important;
    padding: 2rem !important;
    color: white !important;
}

/* Responsive Design for Mobile Devices */
@media (max-width: 991px) {
    .hero-section,
    .carousel-item,
    .carousel-inner,
    #heroCarousel,
    #heroCarousel .carousel {
        height: 56vh !important;
        min-height: 56vh !important;
    }
    
    .carousel-item .hero-section {
        height: 100% !important;
        min-height: 56vh !important;
    }
}

@media (max-width: 768px) {
    .hero-section,
    .carousel-item,
    .carousel-inner,
    #heroCarousel,
    #heroCarousel .carousel {
        height: 49vh !important;
        min-height: 49vh !important;
    }
    
    .carousel-item .hero-section {
        height: 100% !important;
        min-height: 49vh !important;
    }
    
    .hero-content {
        padding: 1.5rem !important;
        max-width: 90% !important;
    }
}

@media (max-width: 576px) {
    .hero-section,
    .carousel-item,
    .carousel-inner,
    #heroCarousel,
    #heroCarousel .carousel {
        height: 42vh !important;
        min-height: 42vh !important;
    }
    
    .carousel-item .hero-section {
        height: 100% !important;
        min-height: 42vh !important;
    }
    
    .hero-content {
        padding: 1rem !important;
        max-width: 95% !important;
    }
}

/* Ensure overlay gradient covers full area */
.hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 1 !important;
}

/* Ensure content is above overlay */
.hero-section .container,
.hero-section .hero-content {
    position: relative !important;
    z-index: 5 !important;
}

/* Fix for video banners */
.hero-section.video-banner {
    background: #000 !important;
}

.hero-section.video-banner video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

/* Fix for YouTube banners */
.hero-section.youtube-banner iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    z-index: 0 !important;
}