body {
    background-color: white;
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Set the font to Helvetica Neue */
}

.header {
    margin-top: 0px; /* Adjust this value to move the header closer to the top */
    margin-bottom: 50px;
}

.header-small {
    font-size: 1.4em; /* Small font size */
    margin: 0 0 10px 0; /* Add bottom margin for spacing */
    color: #444; /* Dark gray color */
}
.header-large {
    font-size: 3em; /* Very large font size */
    letter-spacing: 0.1em; /* Add letter spacing */
    margin: 0 0 10px 0; /* Add bottom margin for spacing */
    color: #444; /* Dark gray color */
}
.header-subtitle {
    font-size: 1em; /* Small font size for subtitle */
    margin: 0 0 20px 0; /* Add bottom margin for spacing */
    color: #444; /* Dark gray color */
}
.navbar {
    background-color: white; /* Set the background color of the navbar to white */
}

.navbar-brand {
margin-bottom: 60px;
}


.custom-container {
    max-width: 1300px; /* Set a custom maximum width for the container */
    margin: 0 auto; /* Center the container */
}

.paragraph-text {
    font-size: 0.9em; /* Normal font size */
    color: #666; /* Grey color */
    margin: 0px 0 10px 0; /* Set top margin to 50px */
    font-weight: 100; /* Make text lighter */
    line-height: 1.8; /* Increase line height slightly */
}

.paragraph-text-title {
    letter-spacing: 2px; /* Added letter spacing */
    font-size: 0.9em; /* Normal font size */
    color: #666; /* Grey color */
    margin: 0px 0 0px 0; /* Set top margin to 50px */
    font-weight: 900; /* Make text super bold */
}

.paragraph-tagline {
    color: red; /* Bright red color */
    padding: 20px 0; /* Add some padding */
    font-size: 0.9em; /* Slightly smaller font size */
    font-weight: 400; /* Make text lighter */
    line-height: 1.5; /* Increase line height slightly */
    letter-spacing: 1px; /* Added letter spacing */

}

.navbar-nav .nav-link.active {
    font-weight: bold; /* Make the active link bold */
}

.navbar-nav .nav-link {
    font-size: 0.85em; /* Set a smaller font size for navbar links */
}

.img-max-width {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
    width: 240px; /* Set a maximum width for the images */
}

@media (max-width: 768px) {
    /* Basic resets for mobile */
    body {
        -webkit-text-size-adjust: 100%;
        padding-top: 0 !important;
    }
    
    /* Restructure the navbar */
    .navbar {
        display: none !important; /* Hide original navbar */
    }
    
    /* ---- 1. CREATE SEPARATE NAVBAR CONTAINER ---- */
    /* Add this after your existing navbar */
    body::before {
        content: "";
        display: block;
        width: 100%;
        height: 50px; /* Height of navbar container */
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        z-index: 1030;
    }
    
    /* Create custom mobile navigation */
    body::after {
        content: "";
        display: block;
        position: fixed;
        top: 15px; /* Position within navbar container */
        left: 0;
        width: 100%;
        z-index: 1031;
        text-align: center;
    }
    
    /* Container for mobile links that should be in your HTML */
    .mobile-nav-container {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 15px;
        background-color: white;
        z-index: 1031;
        text-align: center;
    }
    
    /* Style for mobile links */
    .mobile-nav-container a {
        display: inline-block;
        margin: 0 20px;
        font-size: 0.8em;
        color: #333;
        text-decoration: none;
        font-weight: normal;
    }
    
    .mobile-nav-container a.active {
        font-weight: bold;
    }
    
    /* ---- 2. SEPARATE LOGO CONTAINER ---- */
    /* Logo container independent from navbar */
    .logo-container {
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-top: 50px !important; /* Reduced from 200px - just enough to clear fixed navbar */
        padding-bottom: 40px;
        text-align: center !important;
        position: relative;
    }
    
    /* Style the logo image */
    .logo-container img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }
    
    /* Hide original navbar brand */
    .navbar-brand {
        display: none !important;
    }
    
    /* ---- 3. CONTENT CONTAINER ---- */
    /* Adjust content container to come after logo */
    .custom-container {
        margin-top: 30px !important;
    }
    
    /* Better text readability on mobile */
    .paragraph-text {
        font-weight: 400 !important;
        -webkit-font-smoothing: subpixel-antialiased;
    }
    
    .header-small, .header-subtitle {
        font-weight: 600 !important;
        -webkit-font-smoothing: antialiased;
    }
}