/* Custom properties for easy customization */
:root {
    --hero-height: 70vh; /* Adjust the height here, e.g., 50vh, 400px, etc. */
}

/*
 * Animation for the Hero Caption and Cards
 */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Two-Part Hero Section Styles
 *
 * This section styles the hero section divided into a caption and a carousel.
 */

.hero-container {
    height: var(--hero-height);
    position: relative;
    overflow: hidden;
}

    /* This is a separate pseudo-element to hold the blurred background image */
    .hero-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/hero/main.jpg');
        background-size: cover;
        background-position: center;
        filter: brightness(0.8) blur(5px);
        z-index: 1; /* Puts the blurred background in the back */
    }

/* A container to hold the content (caption and slider) on top of the blurred background */
.hero-content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2; /* Puts the content in the front */
}

    /* Align the content of the entire row vertically */
    .hero-content .row {
        height: 100%;
        align-items: center; /* This is the key change to vertically center the content */
    }

/* Left Side: Hero Caption Styles */
.hero-caption-container {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    color: rgb(255, 255, 255);
    text-align: center; /* Centers all text inside this container */
}

    .hero-logo {
        max-width: 150px;
        margin-bottom: 2rem;
        filter: brightness(0.70);
    }

    .hero-caption-container h1 {
        font-size: 2.5rem; /* Reduces the size of the h1 heading */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow to the text for readability */
        opacity: 0; /* Ensures it starts hidden */
        animation: slideInUp 1s ease-out forwards; /* Applies animation to h1 */
    }

    .hero-caption-container p {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds a subtle shadow to the text for readability */
        opacity: 0; /* Ensures it starts hidden */
        animation: slideInUp 1s ease-out forwards; /* Applies animation to p */
        animation-delay: 0.5s; /* Delays the p animation by half a second */
    }

/* Right Side: Swiper Coverflow Styles */
.mySwiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    height: 100%;
}

    .mySwiper .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 500px;
        height: 300px;
        position: relative; /* Make the slide a positioning context for the pseudo-element */
    }

        /* Bottom shading effect */
        .mySwiper .swiper-slide::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%; /* Adjust the height to control how much of the image is shaded */
            background: linear-gradient(to top, rgba(0, 0, 0, 0.67) 0%, transparent 100%);
            border-radius: 5px; /* Match the image border radius */
            pointer-events: none; /* Allows clicks to pass through to the slide itself */
        }

        .mySwiper .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px; /* Adds a slight rounded corner to the images */
        }

/*
 * Styles for the Cards Section
 */
.cards-section {
    padding-top: 0;
    padding-bottom: 0;
    
}

    .cards-section a {
        display: block; /* Makes the entire card clickable */
    }

    /* Change the hover effect to target the link, so the entire card moves */
    .cards-section a:hover .card {
        transform: translateY(-110px);
        box-shadow: 0 160px 160px rgba(46, 5, 5, 0.61);
    }

    .cards-section .card {
        border: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        transition: transform 1s ease, box-shadow 0.3s ease;
        z-index: 4;
    }

    .cards-section .col-md-4 {
        padding: 0% !important;
        height: 200px;
    }

    /* Staggered animation for the cards */
    .cards-section .col-md-4:nth-child(1) h5,
    .cards-section .col-md-4:nth-child(1) p {
        animation-delay: 0.1s;
    }

    .cards-section .col-md-4:nth-child(2) h5,
    .cards-section .col-md-4:nth-child(2) p {
        animation-delay: 0.3s;
    }

    .cards-section .col-md-4:nth-child(3) h5,
    .cards-section .col-md-4:nth-child(3) p {
        animation-delay: 0.5s;
    }

    .cards-section .col-md-4 h5 {
        opacity: 0;
        animation: slideInUp 1s ease-out forwards;
    }

    .cards-section .col-md-4 p {
        opacity: 0;
        animation: slideInUp 1s ease-out forwards;
        animation-delay: 0.2s; /* Initial delay for all paragraphs */
    }

/*
 * Styles for the new Welcome Banner
 */
.welcome-banner {
    padding-top: 2rem;
    padding-bottom: 1rem;
    background-color: #f2f1f1e9;
    text-align: center;
    position: relative;
    z-index: 70;
    /* This line creates the perfect overlap without leaving a gap below */
    margin-top: -100px;
    box-shadow: 0 -5px 10px rgba(0,0,0,0.2);
}

.welcome-banner h1 {
    opacity: 0; /* Ensures it starts hidden */
    animation: slideInUp 1s ease-out forwards; /* Applies animation to h1 */
}