/* Apply transition for smooth hide/show effect */
#navbar-example2 {
    transition: transform 0.3s ease-in-out;
}

/* Animations */
/* Initial state for fade-in elements */
.fade-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* Initial state for rise-fade-in elements */
.rise-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* Active state when in view */
.fade-in.fade-in-active {
    opacity: 1;
    transform: scale(1);
}

.rise-fade-in.rise-fade-in-active {
    opacity: 1;
    transform: translateY(0);
}

/* SECOND PAGE */
/* Initial state for bubble effect */
.fade-in-bubble {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Active state when image is in view */
.fade-in-bubble.fade-in-bubble-active {
    opacity: 1;
    transform: scale(1);
}

/* Fade-in for heading and paragraphs */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Active state for fade-in-up */
.fade-in-up.fade-in-up-active {
    opacity: 1;
    transform: translateY(0);
}

/* Bounce effect for button */
.bounce {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Active state for bounce effect */
.bounce.bounce-active {
    opacity: 1;
    transform: translateY(0);
}

.card-bubble {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Active state when card is in view */
.card-bubble.fade-in-bubble-active {
    opacity: 1;
    transform: scale(1);
}

/* FIFTH PAGE */
/* Typewriter effect initial state */
.typewriter-heading {
    overflow: hidden;
    border-right: 0.1875em solid black; /* Simulates a cursor */
    white-space: nowrap;
    width: 0; /* Start with 0 width to hide the text */
    visibility: hidden; /* Hidden until animation starts */
}

/* Typewriter animation */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

/* Blinking cursor animation */
@keyframes blink-cursor {
    50% { border-right-color: transparent; }
}

/* Active class for typewriter effect */
.typewriter-active {
    visibility: visible; /* Make text visible when animation starts */
    animation: typewriter 3s steps(40, end) forwards, blink-cursor 0.75s step-end infinite; /* Text typing and cursor blink */
}

/* Class to stop the blinking cursor after typing is complete */
.typewriter-stop {
    animation: none; /* Stop all animations */
    border-right: none; /* Remove cursor */
    width: 100%; /* Ensure the width stays at 100% */
}

/* Rise and fade effect for "Read More" */
/* Rise and fade effect for "Read More" */
.rise-fade {
    opacity: 0;
    transform: translateY(20px); /* Initial position */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* Active state for rise-fade */
.rise-fade-active {
    opacity: 1;
    transform: translateY(0); /* End position */
}

/* Bubble effect for cards */
.card-bubble {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Active state for bubble effect */
.card-bubble-active {
    opacity: 1;
    transform: scale(1);
}

/* SIXTH PAGE */
        /* CSS for the fade-in effect */
.page-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.page-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* NEWS ARTICLE PAGE */
/* CSS for the fade-in effect */
.news-fade-in {
    opacity: 0; /* Start as invisible */
    transform: translateY(20px); /* Optional: add a slight upward movement */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; /* Smooth transition */
}

.news-fade-in.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move to original position */
}

/* GALLERY PAGE  */
/* Initial state for the gallery fade-in effect */
.gallery-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Final state when the element is in view */
.gallery-fade-in.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* CSS Styling */
/* General Styles */
.position-relative {
    position: relative;
}

.img-fluid {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Overlay Styling for All Screens */
.position-relative .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    border-radius: 8px; /* Adjust border radius to match image */
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Show overlay on hover */
.position-relative:hover .overlay {
    opacity: 1; /* Show on hover */
    pointer-events: auto; /* Allow interaction when visible */
}

/* Overlay title styling */
.overlay-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    background-color: rgba(0, 0, 0, 0.7); /* Background with opacity */
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    text-align: center;
}

/* Button styling */
.btn-light.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 3px;
    color: black;
    background-color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Button hover effect */
.btn-light.btn-sm:hover {
    background-color: #ddd; /* Light grey on hover */
}

.img-top-crop {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
}