* { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Global font */
}

body {
    color: #666; /* Text color */
    margin: 0; /* Reset margin */
    width: 90%; /* Body width */
    max-width: 67.5rem; /* Max width */
    margin: 0 auto; /* Center body */
}

/* Header styles */
header {
    display: flex; /* Flexbox layout */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    padding: 20px 0px 10px 0px; /* Padding */
    border-bottom: 1px solid #dedede;
}

/* Main title styles */
h1 {
    font-weight: bold; /* Bold title */
    font-size: clamp(16px, 2.5vw + 1rem, 18px); /* Responsive font size */
    margin: 0; /* No margin */
}        

/* Menu toggle button styles */
.menu-toggle {
    display: block; /* Show toggle */
    font-size: 28px; /* Font size */
    min-height: 40px; /* Minimum height */
    cursor: pointer; /* Pointer cursor */
    margin-left: auto; /* Push to right */
}

/* Close icon styles */
.close-icon {
    display: none; /* Hide close icon */
}

/* Navigation styles */
nav {
    display: flex; /* Flexbox layout */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    height: 100%; /* Full height */
    transition: max-height 0.5s ease-in-out; /* Smooth transition */
}

/* Active navigation styles */
nav.active {
    display: flex; /* Show nav when active */
    animation: reveal 0.5s ease-in-out forwards; /* Reveal animation */
}

/* Reveal animation keyframes */
@keyframes reveal {
    from {
        max-height: 0; /* Start from height 0 */
        opacity: 0; /* Start invisible */
    }
    to {
        max-height: 500px; /* Max height */
        opacity: 1; /* Fully visible */
    }
}

/* Navigation title styles */
.nav-title {
    font-weight: bold; /* Bold title */
    margin-right: auto; /* Push to left */
    padding-right: 20px; /* Space to right */
}

/* Navigation list styles */
nav ul {
    list-style-type: none; /* No list style */
    margin: 0; /* No margin */
    padding: 0; /* No padding */
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center items */
}

/* Mobile Styles */
@media (max-width: 768px) {
    nav {
        display: none; /* Hide nav by default */
        flex-direction: column; /* Stack items */
        position: absolute; /* Absolute positioning */
        top: 60px; /* Position below header */
        right: 0; /* Align to right */
        background-color: #f8f8f8; /* Background color */
        width: 100%; /* Full width */
        z-index: 1; /* Layering */
        transition: max-height 0.3s ease-in-out; /* Smooth transition */
        overflow: hidden; /* Hide overflow */
        max-height: 0; /* Start with height 0 */
    }

    nav.active {
        display: flex; /* Show nav when active */
        max-height: 200px; /* Max height for expanded menu */
    }

    nav ul {
        flex-direction: column; /* Stack links */
        width: 100%; /* Full width */
    }

    nav ul li {
        margin: 10px 0; /* Space between links */
        text-align: center; /* Center links */
    }

    .nav-title {
        display: block; /* Ensure title is visible */
        text-align: center; /* Center title */
        padding: 10px 0; /* Padding */
    }
}

/* Tablet and Desktop Styles */
@media (min-width: 769px) {
    h1 {
        font-size: clamp(16px, 2.5vw + 1rem, 18px); /* Larger font size */
    }

    h2 {
        font-size: clamp(28px, 3vw + 1rem, 36px); /* Larger font size */
    }

    h3 {
        font-size: clamp(24px, 2.5vw + 1rem, 28px); /* Larger font size */
    }

    p {
        font-size: clamp(16px, 0.875rem + ((1vw - 3.2px) * 0.455), 20px); /* Larger font size */
    }

    .menu-toggle {
        display: none; /* Hide toggle on larger screens */
    }
}

/* Button styles */
.btn {
    display: inline-block; /* Inline block */
    padding: 10px 15px; /* Padding */
    margin: 5px; /* Margin */
    font-size: 14px; /* Font size */
    color: white; /* Text color */
    text-decoration: none; /* No underline */
    border-radius: 5px; /* Rounded corners */
}

.btn-linkedin {
    background-color: #0077B5; /* LinkedIn color */
}

.btn-twitter {
    background-color: #1DA1F2; /* Twitter color */
}

.btn-subscribe {
    background-color: #2ac176; /* Twitter color */
}

.text-center {
    text-align: center; /* Center text */
}

.btn i {
    font-style: normal; /* Normal icon style */
}

a {
    text-decoration: none; /* No underline */
    color: #2ac176; /* Link color */
    cursor: pointer; /* Pointer cursor */
}

#banner-text {
    font-family: "Quattrocento Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Font family */
    font-size: 28px; /* Font size */
    letter-spacing: -1px; /* Letter spacing */
}

/* Loading Spinner Styles */
.loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px; /* Size of the spinner */
    height: 50px; /* Size of the spinner */
    border: 5px solid #f3f3f3; /* Light grey background */
    border-top: 5px solid #3498db; /* Blue color for the spinner */
    border-radius: 50%; /* Make it circular */
    animation: spin 1s linear infinite; /* Animation properties */
    transform: translate(-50%, -50%); /* Center the spinner */
    display: block; /* Initially hidden */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Container styling */
.iframe-container {
    overflow: hidden; /* Hides iframe before animation */
    opacity: 0;
    transition: all 1.2s ease-in; /* Smooth transition for both height and opacity */
  }

/* Class to trigger reveal */
.reveal {
    opacity: 1;
}