/* Global Body & Font Styles */
body {
    font-family: 'Inter', sans-serif;
}
.logo {
    display: block;
    width: 252px;
}

/* Header & Navigation Styles */
#navbar-placeholder {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: transform 0.3s ease-in-out;
}

#navbar-placeholder.nav-hidden {
    transform: translateY(-100%);
}

/* Scroll & Fade-in Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Base Prose (Article Text) Styling */
.prose {
    color: #4B5563; /* text-gray-600 */
}

.prose h3 {
    color: #1F2937; /* text-gray-800 */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

/* Carousel Styles */
.carousel-slide {
    display: none;
}

.carousel-slide.active {
    display: block;
    animation: fadeIn 1.2s ease-in-out;
}

#recommendation-carousel:hover #prev-rec-slide,
#recommendation-carousel:hover #next-rec-slide {
    opacity: 1;
}

/* Tab Content Styles */
.tab-button.active {
    border-color: #93a0bb; /* border-indigo-600 */
    color: #93a0bb; 
    /*background-color: #ffffff;  bg-white */
    font-weight: 600; /* font-semibold */
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

/* Chatbot Styles */
.chat-bubble {
    animation: popIn 0.3s ease-out;
}

.quick-reply-btn {
    transition: background-color 0.2s, transform 0.2s;
}

.quick-reply-btn:hover {
    transform: translateY(-2px);
}

/* Carousel Styles */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* Slower fade transition */
    visibility: hidden;
}
.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Carousel Arrow Styles */
#prev-slide, #next-slide {
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Smooth transition for arrows */
}
#journey-carousel:hover #prev-slide,
#journey-carousel:hover #next-slide {
    opacity: 1;
}

/* Keyframe Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.animated-gradient-text {
        font-weight: bold;
        /* 1. Create the gradient background */
        background: linear-gradient(to right bottom, #ffffff 0, #E5E4E2 40%, #878681 60%, #755E81 80%, #878681 100% );

        /* 2. Set the background size to be larger than the element */
        /* This is what allows the gradient to move */
        background-size: 250% 100%;

        /* 3. Clip the background to the text */
        /* This is the magic part that makes the background only visible where there is text */
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;

        /* 4. Animate the background position */
        animation: gradient-flow 3s ease-in-out 1 forwards;
    }

    /* Keyframes for the animation */
    @keyframes gradient-flow {
        from {
            /* Start with the gradient on the left */
            background-position: 50% center;
        }
        to {
            /* Move the gradient to the right */
            background-position: 0% center;
        }
    }