/* Fix for making slider and content same height in hero section */

.hero-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* This ensures equal height */
    gap: 30px; /* Consistent spacing between columns */
}

.hero-slider-column,
.hero-content-column {
    display: flex;
    flex-direction: column;
    min-height: 550px; /* Set minimum height for both columns */
}

.hero-slider,
.hero-content {
    flex: 1;
    height: 100%; /* Fill the parent height */
    display: flex;
    flex-direction: column;
}

/* Set the carousel and slider to fill available height */
#heroCarousel,
.carousel-inner,
.carousel-item {
    height: 100%;
}

/* Ensure the content column has proper padding */
.hero-content-column {
    padding: 20px;
}

.hero-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

/* Specific height for the hero section on larger screens */
@media (min-width: 992px) {
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-slider-column,
    .hero-content-column {
        min-height: 550px;
    }
}

/* Adjust for tablets */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-section {
        padding: 50px 0;
    }
    
    .hero-container {
        flex-direction: column;
    }
    
    .hero-slider-column,
    .hero-content-column {
        width: 100%;
        max-width: 100%;
    }
    
    .hero-slider-column {
        min-height: 450px;
    }
    
    .hero-content-column {
        min-height: auto;
        padding: 0;
    }
}

/* Adjust for mobile */
@media (max-width: 767px) {
    .hero-section {
        padding: 40px 0;
    }
    
    .hero-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .hero-slider-column,
    .hero-content-column {
        width: 100%;
        max-width: 100%;
    }
    
    .hero-slider-column {
        min-height: 400px;
    }
    
    .hero-content-column {
        min-height: auto;
        padding: 0;
    }
    
    .hero-content {
        padding: 20px;
    }
}

/* Very small screens */
@media (max-width: 575px) {
    .hero-slider-column {
        min-height: 350px;
    }
}