/* custom-styles.css */
/* Ensure the body has some padding to clear the fixed navbar */
body {
    padding-top: 40px; /* Adjust this to match your navbar height */
}

/* Custom Styles for a Larger Navbar with a Big Logo */
.custom-navbar {
    height: 100px; /* Sets the height of the entire navbar */
    padding-top: 5px; /* Adjust padding if needed */
    padding-bottom: 5px;
}

.custom-logo {
    width: 100px; /* Sets the width of the logo */
    height: 100px; /* Sets the height of the logo */
    object-fit: cover;
    margin-top: 5px;
}

.navbar-brand-text {
    position: absolute;
    bottom: 2px;
    left: 120px; /* Adjust this value to position the text to the right of the image */
    font-size: 2.5rem; /* Makes the text bigger */
    font-weight: bold; /* Makes the text bolder */
    white-space: nowrap; /* Prevents text from wrapping */
    margin-top: 1px;
}

/* Adjust the position of the other nav items to align with the new height */
.navbar-collapse {
    position: absolute;
    bottom: 5px;
    right: 15px;
}

.dropdown-item:hover {
    background-color: #f0f0f0 !important; /* A light gray background */
    font-weight: bold; /* Makes the text bold on hover */
}

/* Media query to handle smaller screens and prevent overlap */
@media (max-width: 991px) {
    .custom-navbar {
        height: auto; /* Reverts to auto height on mobile */
    }

    .navbar-brand-text {
        position: static;
        left: auto;
        bottom: auto;
        margin-left: 10px;
        font-size: 1rem; /* Makes the text bigger */
        font-weight: bold; /* Makes the text bolder */
        white-space: nowrap; /* Prevents text from wrapping */
        margin-top: 1px;
    }

    .navbar-collapse {
        position: static;
        margin-top: 10px;
        text-align: right; /* Aligns text in the mobile menu */
    }
}




/* Hero section/Animation section styling */
#animation-section {
    padding: 50px 0;
    text-align: center;
}

.animated-element {
    background-color: #e9ecef;
    border-radius: 10px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    /* Example animation: simple pulsating effect */
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.1);
    }
    25% {
        transform: scale(0.25);
    }
    50% {
        transform: scale(0.5);
    }
    75% {
        transform: scale(0.85);
    }

    100% {
        transform: scale(1);
    }
}

/* Card styling */
.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-title {
    font-weight: bold;
}

/* Specific styling for principal officer images */
.rounded-circle {
    object-fit: cover;
}

/* Adjust card height to be consistent */
.card.h-100 {
    height: 100% !important;
}

/* Initial state for all cards to be animated on scroll */
.card-animation {
    opacity: 0;
    transform: translateY(-200px);
    /*transform: rotate(-90deg);*/
    /*transition: opacity 1s ease-out, transform 1s ease-out;*/
    /*transition: opacity 20s ease-out, transform 0.5s ease-out;*/
    transition: transform opacity 5s ease-in-out, box-shadow 15s ease-in-out;
}

    /* Final state when the element is in view */
    .card-animation.is-visible {
        opacity: 0.3;
        transform: translateY(0);
    }

/* General section styling */
section {
    padding: 30px 0;
}

    section h2 {
        font-weight: 700;
        text-align: center;
        margin-bottom: 40px;
    }



/* Animation Section Styles */
#animation-section {
    position: relative;
    width: 100%;
    margin-top: 10px; /* Adjust for fixed navbar height */
}

#highlightsCarousel {
    width: 100%;
    height: 600px; /* Set a fixed height for the carousel */
}

    #highlightsCarousel .carousel-item {
        height: 600px;
    }

        #highlightsCarousel .carousel-item img {
            height: 100%;
            object-fit: cover;
            filter: brightness(0.6); /* Darken the image slightly for better text readability */
        }

    #highlightsCarousel .carousel-caption {
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
        text-align: center;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

        #highlightsCarousel .carousel-caption h3 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        #highlightsCarousel .carousel-caption p {
            font-size: 1.25rem;
        }

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

@media (max-width: 768px) {
    #highlightsCarousel, #highlightsCarousel .carousel-item {
        height: 400px; /* Smaller height on mobile */
    }

        #highlightsCarousel .carousel-caption h3 {
            font-size: 2rem;
        }
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    transition: transform 5s ease-in-out, opacity 5s ease-in-out !important;
}

/* Optional: To make the fade effect slower */
.carousel-fade .carousel-item {
    transition-duration: 20s; /* Adjust this value to control fade speed */
}
/* Define the keyframes for the animation */
@keyframes slideInFromBottom {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    10% {
        transform: translateY(18px);
        opacity: 0.1;
    }
    20% {
        transform: translateY(16px);
        opacity: 0.2;
    }
    30% {
        transform: translateY(12px);
        opacity: 0.3;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.5;
    }
    70% {
        transform: translateY(8px);
        opacity: 0.7;
    }
    80% {
        transform: translateY(4px);
        opacity: 0.8;
    }
    90% {
        transform: translateY(2px);
        opacity: 0.9;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply the animation to the heading inside the active carousel item */
.carousel-item.active .carousel-caption h3 {
    animation-name: slideInFromBottom;
    animation-duration: 5s;
    animation-delay: 0.5s; /* Delay the animation slightly after the image transition */
    animation-fill-mode: forwards; /* Keep the final state of the animation */
    opacity: 0; /* Start with the element hidden */
}

.animated-caption {
    transition: all 1s ease-out;
    transform: translateY(20px);
    opacity: 0;
}

    .animated-caption.show {
        transform: translateY(0);
        opacity: 1;
    }

/* Add a transition for smooth animations on all cards */
.card {
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

    /* Apply a hover effect to lift the card and add a stronger shadow */
    .card:hover {
        transform: translateY(-50px); /* Moves the card up by 5 pixels */
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); /* Creates a larger, more prominent shadow */
        opacity: 1;
    }