/*
        Styles the main heading elements.
        They are initially transparent and will grow into view.
        */
        h1 {
            color: white;
            opacity: 0;
            margin: 0.5rem 0; /* Add some space between lines */
            text-align: center;
        }

        /*
        The animation for the first line.
        It starts at 0.5rem and grows to 2.5rem.
        */
        .line-1 {
            animation: grow-line-1 2s forwards; /* 'forwards' keeps the final state */
            animation-delay: 0s;
        }

        /*
        The animation for the second line.
        It grows from 0.5rem to a larger size of 3rem.
        */
        .line-2 {
            animation: grow-line-2 2s forwards;
            animation-delay: 1.5s;
        }

        /*
        The animation for the third line.
        It grows from 0.5rem to 1.5rem, a smaller size than the others.
        */
        .line-3 {
            animation: grow-line-3 2s forwards;
            animation-delay: 3s;
        }

        /*
        The animation for the fourth line.
        It grows from 0.5rem to a larger size of 3rem.
        */
        .line-4 {
            animation: grow-line-4 2s forwards;
            animation-delay: 4.5s;
        }

        /*
        The @keyframes rule for the first line.
        The final font-size is 2.5rem.
        */
        @keyframes grow-line-1 {
            from {
                font-size: 0.5rem;
                opacity: 0;
            }
            to {
                font-size: 2.5rem;
                opacity: 1;
            }
        }

        /*
        The @keyframes rule for the second line.
        The final font-size is 3rem.
        */
        @keyframes grow-line-2 {
            from {
                font-size: 0.5rem;
                opacity: 0;
            }
            to {
                font-size: 3rem;
                opacity: 1;
            }
        }

        /*
        The @keyframes rule for the third line.
        The final font-size is 1.5rem.
        */
        @keyframes grow-line-3 {
            from {
                font-size: 0.5rem;
                opacity: 0;
            }
            to {
                font-size: 1.25rem;
                opacity: 1;
            }
        }

        /*
        The @keyframes rule for the fourth line.
        The final font-size is 3rem.
        */
        @keyframes grow-line-4 {
            from {
                font-size: 0.5rem;
                opacity: 0;
            }
            to {
                font-size: 3rem;
                opacity: 1;
            }
        }

.responsive-img {
  max-width: 100%;
  height: auto;
}

/* --- Basic Styling --- #f0f4f8 */
body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    margin-top: 80px; /* Add margin to avoid content being hidden under the fixed nav */
}

/* Sets a black background and centers the content vertically and horizontally */
.body-black {
 background-color: #000000;
 display: flex;
 flex-direction: column; /* Stack the headings vertically */
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 margin: 0;
 font-family: 'Inter', sans-serif; /* A clean, modern font */
}

.main-content {
    padding: 1.5rem;
    text-align: center;
    color: #4b5563; /* Tailwind equivalent of text-gray-700 */
}

/* --- Navigation Bar Layout --- */
.navbar {
    background-color: #000000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}

.navbar-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Logo and Links --- */
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.logo:hover {
    color: #d1d5db; /* Tailwind equivalent of hover:text-gray-300 */
}

.desktop-links {
    display: none; /* Hidden by default for mobile */
    align-items: center;
    gap: 1rem;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
    background-color: #374151; /* A subtle dark hover effect */
    color: #d1d5db;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #333; /* Dark background */
    color: white;
}

/* 1. Menu Toggle Button Styling */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 10; /* Ensure button is on top */
}

/* Create the 'Hamburger' icon using a span and pseudo-elements */
.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 10px;
}

.hamburger::before {
    transform: translateY(-8px);
}

.hamburger::after {
    transform: translateY(8px);
}

/* 2. Navigation Links Styling (Initially Hidden) */
.nav-links {
    position: absolute; /* Take full viewport on mobile */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent overlay */
    padding-top: 60px; /* Space for the header */
    
    /* Key: Hide the menu by default */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 5;
}

.nav-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-links li a {
    display: block;
    padding: 15px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #555;
}

/* 3. The 'Active' State (Shown with JS) */
.nav-links.active {
    transform: translateX(0); /* Slides into view */
}

/* Optional: 'X' icon when active */
.menu-toggle.active .hamburger {
    background: transparent;
}
.menu-toggle.active .hamburger::before {
    transform: rotate(45deg);
}
.menu-toggle.active .hamburger::after {
    transform: rotate(-45deg);
}

@media (min-width: 768px) {
    .menu-toggle {
        display: none; /* Hide the button */
    }

    .nav-links {
        /* Reset positioning and show the navigation */
        position: static;
        height: auto;
        padding: 0;
        background: none;
        transform: translateX(0); 
    }
    
    .nav-links ul {
        display: flex; /* Display links horizontally */
    }
    
    .nav-links li a {
        border-bottom: none;
        padding: 0 15px;
    }
}