/* General Styling */
    body {
        font-family: 'Montserrat', sans-serif;
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
        color: var(--text-color);
        overflow-x: hidden;
        transition: background-color 0.5s ease, color 0.5s ease;
    }

/* Scroll Progress Bar */
    #scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 5px;
        width: 0%;
        background: linear-gradient(90deg, var(--primary-color), var(--highlight-dark));
        z-index: 9999;
        transition: background-color 0.5s ease;
    }

/* Hero Section */
#about-hero {
    height: 85vh;
    background: linear-gradient(135deg, var(--primary-color), var(--highlight-dark)),
        url("../assets/about-2.3.jpg") center/cover no-repeat;
    position: relative;
    color: #fff; /* Keep text color white in both light & dark mode */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: background 0.5s ease-in-out;
}

/* Faded Background Image */
    #about-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../assets/about-2.3.jpg") center/cover no-repeat;
        opacity: 0.15; /* Barely visible */
    }

/* Hero Content */
    .hero-content {
        position: relative;
        z-index: 2;
    }

/* Hero Title */
.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 10px;
    color: #fff; /* Keep text color white in both light & dark mode */
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
    transition: text-shadow 0.5s ease-in-out;
}

/* Hero Subtitle */
.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #fff; /* Keep text color white in both light & dark mode */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    transition: text-shadow 0.5s ease-in-out;
}

/* Scroll Indicator */
#scroll-indicator {
    display: inline-flex;
    align-items: center;
    background: var(--button-bg);
    color: var(--button-text);
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: default;
    transition: transform 0.3s ease, background-color 0.5s ease, color 0.5s ease;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.5s ease-out 1.2s forwards, pulse 1.5s infinite 2.5s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}

/* Scroll Indicator Hover */
#scroll-indicator:hover {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
}

/* Arrow inside button */
    .scroll-arrow {
        font-size: 1.5rem;
        margin-left: 10px;
    }

    /* Fade-In Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

            /* Continuous Pulse Animation */
                @keyframes pulse {
                    0% {
                        transform: scale(1);
                    }

                    50% {
                        transform: scale(1.1);
                    }

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

/* Dark Mode Styles */
    .dark-mode #about-hero {
        background: linear-gradient(135deg, var(--highlight-dark), var(--teritary-color)),
            url("../assets/about-2.3.jpg") center/cover no-repeat;
    }

    .dark-mode #about-hero::before {
        background: url("../assets/about-2.3.jpg") center/cover no-repeat;
        opacity: 0.1;
    }
    
    /* Dark Mode Scroll Indicator Hover */
        .dark-mode #scroll-indicator:hover {
            background: var(--teritary-color); /* Change this to any color you prefer */
            color: var(--primary-color); /* Ensures text remains readable */
        }

/* Storytelling Sections */
    .story-section {
        height: auto;
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-color);
        text-align: center;
        padding: 50px;
        position: relative;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out, background 0.5s ease-in-out;
    }

    .story-section.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Fade-in Animation */
    .fade-section {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

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

/* Section Headings */
    .story-content h2 {
        font-size: 3rem;
        color: var(--primary-color);
        position: relative;
    }

/* Section Text */
    .story-content p {
        font-size: 1.5rem;
        color: var(--secondary-text);
    }

/* ICON Container */
    .icon-container {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        gap: 30px;
        position: relative;
    }

/* Animated Floating Icons */
    .icon {
        font-size: 2.5rem;
        color: var(--primary-color);
        opacity: 0;
        transform: translateY(50px);
    }

/* Call to Action - Improved Readability */
#about-cta {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff; /* Keep text color white in both light & dark mode */
    background: linear-gradient(135deg, var(--primary-color), var(--highlight-dark));
    overflow: hidden;
    transition: background 0.5s ease-in-out;
}

/* Background Image */
    .cta-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../assets/about-2.jpg') center/cover no-repeat;
        opacity: 0.3; /* Faded Effect */
    }

/* CTA Content */
    .cta-content {
        position: relative;
        z-index: 2;
        max-width: 700px;
        animation: fadeInUp 1s ease-in-out;
    }

/* CTA Heading */
.cta-heading {
    font-size: 3rem;
    font-weight: bold;
    color: #fff; /* Keep text color white in both light & dark mode */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
    margin-bottom: 10px;
    animation: pulseText 2s infinite alternate ease-in-out;
}

/* CTA Subtext */
.cta-subtext {
    font-size: 1.5rem;
    color: #fff; /* Keep text color white in both light & dark mode */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* CTA Button */
    .cta-button {
        display: inline-block;
        margin-top: 20px;
        padding: 15px 30px;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
        color: var(--button-text);
        background: var(--button-bg);
        border-radius: 30px;
        transition: background 0.6s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

/* Smooth Hover Effect - Slowly Change to Gradient */
    .cta-button:hover {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        background-size: 200% 200%;
        color: #000;
        transform: scale(1.1);
        box-shadow: 0px 5px 20px rgba(255, 204, 0, 0.6);
    }

/* Extra Smooth Effect - Gradient Slowly Moves */
    .cta-button:hover {
        animation: gradientMove 0.3s ease-in-out forwards;
    }

    /* Keyframes for a Smooth Gradient Shift */
        @keyframes gradientMove {
            0% {
                background: var(--button-bg);
            }

            100% {
                background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            }
        }

    /* Smooth Fade-In Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

    /* Subtle Pulse Effect for Heading */
        @keyframes pulseText {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            100% {
                transform: scale(1.05);
                opacity: 0.9;
            }
        }

        /* Dark Mode Fix - Text remains the same */
        .dark-mode #about-hero,
        .dark-mode #about-cta {
            color: #fff !important; /* Force white text in Dark Mode */
            background: linear-gradient(135deg, var(--highlight-dark), var(--teritary-color));
        }
                
        .dark-mode .hero-content h1,
        .dark-mode .hero-content p,
        .dark-mode .cta-heading,
        .dark-mode .cta-subtext {
            color: #fff !important; /* Ensure text stays white */
        }

        .dark-mode #about-hero::before {
            background: url("../assets/about-2.3.jpg") center/cover no-repeat;
            opacity: 0.1;
        }
        
        /* Responsive Design */
            @media (max-width: 768px) {
                .cta-heading {
                    font-size: 2.2rem;
                }

                .cta-subtext {
                    font-size: 1.2rem;
                }

                .cta-button {
                    font-size: 1rem;
                    padding: 12px 25px;
                }
            }

            /* Keyframe Animations */
                @keyframes bounce {

                    0%,
                    100% {
                        transform: translateY(0);
                    }

                    50% {
                        transform: translateY(8px);
                    }
                }

                    @keyframes fadeInUp {
                        from {
                            opacity: 0;
                            transform: translateY(20px);
                        }

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

            /* Responsive Design */
                @media (max-width: 768px) {
                    #about-hero h1 {
                        font-size: 2.2rem;
                    }

                    #about-hero p {
                        font-size: 1.2rem;
                    }

                    .story-content h2 {
                        font-size: 2rem;
                    }

                    .hero-content h1 {
                        font-size: 3rem;
                    }

                    .hero-content p {
                        font-size: 1.2rem;
                    }

                    .story-content p {
                        font-size: 1.2rem;
                    }

                    .icon-container {
                        gap: 15px;
                        flex-wrap: wrap;
                    }

                    .icon {
                        font-size: 2rem;
                    }
                }