:root {
    --green: #5EBBA0;
    --blue: #1B2847;
    --dark-grey: #706F6F;
    --mid-grey: #D8D8D8;
    --light-grey: #F6F6F6;
    --white: #FFFFFF;
}

* {
    font-family: 'Karla', sans-serif;
    scroll-behavior: smooth;
}

p {
    font-size: 18px;
}

body {
    overflow-x: hidden;
}

.section-number {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-title-large {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.4;
}

/* Navbar */
#mainNav {
    background-color: transparent;
    z-index: 1000;
    transition: background-color 0.3s;
}

.navbar-brand img {
    max-height: 50px;
}

.navbar-toggler {
    font-size: 2rem;
    color: var(--green);
    position: relative;
    z-index: 1001;
}

.navbar-toggler-icon {
    display: inline-block;
    width: auto;
    background: none;
}

.navbar-toggler.collapsed .navbar-toggler-icon::before {
    content: "+";
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
    content: "×";
}

.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Buttons */
.btn-green {
    background-color: var(--green);
    color: var(--white);
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: 600;
}

.btn-green:hover {
    background-color: #4da890;
    color: var(--white);
}

.text-green {
    color: var(--green);
}

.text-blue {
    color: var(--blue);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(27, 40, 71, 0.5), rgba(27, 40, 71, 0.5)), url('../images/Hero-Image.png');      
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
    min-height: 100vh;
    padding: 150px 0 100px;
    display: flex;
    align-items: center;
}

.hero-title {
    font-size: 160px;
    line-height: 1.1;
    margin-bottom: 60px;
    color: var(--white);
}

.hero-text {
    font-size: 1.12rem;
    color: var(--green);
    line-height: 1.8;
}

/* About Section */
.about-section {
    background-color: var(--blue);
    padding: 100px 0;
}

.about-image {
    width: 100%;
    height: 400px;
    background-color: var(--green);
}

.green-link {
    color: var(--green);
    text-decoration: underline;
    font-weight: 600;
}

.green-link:hover {
    color: var(--white);
}

.infographic-full {
    width: 100%;
    padding-top: 56.25%;
    background-image: url('../images/ASPACE_desktop_explainer.gif');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 60px 0;
}

/* Team Section */
.team-section {
    background-color: var(--white);
    padding: 100px 0;
}

.team-member-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 20px;
}

.team-member-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 5px;
}

.team-title {
    font-size: 0.95rem;
    color: var(--dark-grey);
}

/* Testimonial Section */
.testimonial-section {
    min-height: 100vh;
    background: linear-gradient(rgba(27, 40, 71, 0.6), rgba(27, 40, 71, 0.6)), url('../images/turbine.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-text {
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 300;
}

.testimonial-author {
    font-size: 18px;
    font-weight: 600;
}

/* Publications Section */
.publications-section {
    background-color: var(--white);
    padding: 100px 0;
}

.publication-img {
    width: 100%;
    height: 400px;
    background-color: var(--mid-grey);
    margin-bottom: 20px;
}

.publication-text {
    font-size: 1rem;
    color: var(--blue);
    line-height: 1.6;
}

/* FAQ Section */
.faq-section {
    background-color: var(--green);
    padding: 100px 0;
}

.faq-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid white;
    background: transparent;
}

.faq-accordion .accordion-button {
    background: transparent;
    color: var(--blue);
    font-size: 18px;
    padding-left: 0;
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.faq-accordion .accordion-body p {
    margin: 0;
    color: var(--blue);
    font-size: 18px;
}

/* Partners Section */
.partners-section {
    background-color: var(--white);
    padding: 100px 0;
}

.partner-item {
    position: relative;
}

.partner-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(246, 246, 246, 0.97);
    mix-blend-mode: color;
    pointer-events: none;
}

.partner-logo {
    width: 90%;
    height: 70px;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 10px;
    background: white;
    filter: grayscale(100%);
}

/* Footer */
.footer {
    background-color: var(--white);
    color: var(--blue);
    padding: 60px 0 30px;
}

.footer-link {
    color: var(--blue);
    text-decoration: none;
    opacity: 0.8;
}

.footer-link:hover {
    color: var(--green);
    opacity: 1;
}

/* Sign-Up Section */
.sign-up-section {
    background: linear-gradient(rgba(27, 40, 71, 0.5), rgba(27, 40, 71, 0.5)), url('../images/signin-background.png');      
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
    min-height: 100vh;
    padding: 150px 0 100px;
    display: flex;
    align-items: center;
}

/* Policy Section */
.policy-section {
    padding-top: 100px;
    background-color: var(--blue);
    color: white;
}

.policy-section .policy-title {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 30px;
}

.policy-section .policy-content p {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 20px;
}

/* Typography */
h1 {
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 160px;
    line-height: 148px;
    letter-spacing: -5%;
}

h2 {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -2%;
}

h3 {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -2%;
}

h4 {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 72px;
    letter-spacing: -2%;
}

p {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -2%;
}

/* =========================
   MEDIA QUERIES
========================= */

/* 1400px */
@media (max-width: 1400px) {
    .hero-title {
        font-size: 120px;
    }
    .section-title-large {
        font-size: 36px;
    }
}

/* 1200px */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 90px;
    }
    .section-title-large {
        font-size: 32px;
    }
}

/* 992px and below */
@media (max-width: 991.98px) {

        /* Navbar collapse container */
    #mainNav .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;          /* full screen */
        background-color: var(--blue);
        padding-left:30px;
        flex-direction: column; /* stack items vertically */
        justify-content: flex-end; /* push nav links to bottom */
        overflow-y: auto;       /* allow scrolling if content too tall */
        transform: translateX(-100%); /* hide offscreen initially */
        /*transition: transform 0.3s ease;/*
        z-index: 999;           /* above page content */
    }

    /* When toggled open */
    #mainNav .navbar-collapse.show {
        transform: translateX(0); /* slide in */
        display: flex;            /* required for flex layout */
    }

    /* Navbar nav links */
    #mainNav .navbar-nav {
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 0;
    }

    #mainNav .navbar-nav .nav-item {
        margin-bottom: 1.5rem;
    }

    #mainNav .navbar-nav .btn {
        margin-top: 1rem;
    }

    /* Navbar brand smaller on mobile */
    #mainNav .navbar-brand img {
        max-height: 30px !important;
        padding-left: 25px;
        z-index: 9999;
    }

    /* Navbar toggler on top */
    .navbar-toggler {
        z-index: 1001; /* above collapse */
    }

    .nav-desktop {
        color: var(--white) !important;
        font-size: 1.5rem;
        padding: 15px 0 !important;
    }

    .nav-desktop:hover {
        color: var(--green) !important;
    }



    /* Hero & Info */

 .hero-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* push content to bottom */
        min-height: 100vh; /* ensure full-screen height */
    }

    .hero-section .container-fluid {
        width: 100%;
    }

    .hero-section .col-10,
    .hero-section .col-12.col-md-8 {
        width: 100%;
    }

    /* Optional: center text horizontally if desired */
    .hero-section .hero-title,
    .hero-section .hero-text {
        text-align: left;
    }

    .infographic-full {
        background-image: url('../images/web_animation_mobile.gif');
        height: 100vh;
    }

    .number-title {
        text-align: left;
        margin-right: 0;
        margin-bottom: 5px;
    }

    .info-column {
        padding: 10px 15px;
        color: var(--white);
        border-bottom: 1px solid var(--green);
        margin-bottom: 15px;
    }

    .info-column h2 {
        text-align: right;
    }

    /* Team Section */
    .team-title {
        margin-bottom: 35px;
    }

    .team-member-img {
        max-width: 70%;
    }

    /* Testimonial */
    .testimonial-quote {
        margin-bottom: 30px;
    }
    /* Align all columns left */
    .footer .row.align-items-center {
        text-align: left !important;
    }

    .footer .col-lg-3,
    .footer .col-lg-4 {
        text-align: left !important;
        margin-bottom: 1.5rem; /* spacing between rows */
    }

    /* Make footer links stack vertically */
    .footer .footer-link {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Stack all columns vertically */
    .footer .row.align-items-center {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* align all left */
    }

    .footer .row.align-items-center > .col-lg-4 {
        width: 100%;
        text-align: left !important;
        margin-bottom: 1rem; /* spacing between sections */
    }

    /* Footer links stacked vertically */
    .footer .row.align-items-center a.footer-link {
        display: block;
        margin-bottom: 0.5rem;
    }

    /* Remove horizontal spacing for stacked links */
    .footer .row.align-items-center a.footer-link.mx-2,
    .footer .row.align-items-center a.footer-link.ms-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Optional: put copyright last */
    .footer .row.align-items-center > .col-lg-4:first-child {
        order: 3; /* moves copyright to bottom */
    }
    .footer .row.align-items-center > .col-lg-4:nth-child(2) {
        order: 1; /* left links first */
    }
    .footer .row.align-items-center > .col-lg-4:nth-child(3) {
        order: 2; /* right links second */
    }
}

/* Desktop nav */
@media (min-width: 992px) {
    #mainNav .navbar-nav .nav-link {
        font-family: 'Karla', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -2%;
        color: var(--green);
        padding: 0.5rem 1rem;
    }

    #mainNav .collapse.navbar-collapse {
        justify-content: center;
    }
}

/* 768px */
@media (max-width: 768px) {
    .hero-title {
        font-size: 48px;
    }
    .section-title-large {
        font-size: 28px;
    }
    .testimonial-text {
        font-size: 24px;
    }
}

/* 576px and below */
@media (max-width: 575.98px) {
    h1 {
        font-size: 51px;
        line-height: 52px;
        letter-spacing: -5%;
    }
    h2 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -2%;
    }
    h3 {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -2%;
    }
    h4 {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -2%;
    }
    p {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -2%;
    }

    /* Mobile nav links */
    #mainNav .nav-link {
        font-family: 'Karla', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -2%;
        text-align: left;
        color: var(--white);
    }
}

/* Tablet nav links */
@media (min-width: 576px) and (max-width: 991.98px) {
    #mainNav .nav-link {
        font-family: 'Karla', sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: 66px;
        line-height: 66px;
        letter-spacing: -5%;
        text-align: left;
        color: var(--white);
    }
}

/* Tablet Typography already included above in merged blocks */
@media (max-width: 991.98px) {
    h1 {
        font-size: 96px;
        line-height: 96px;
        letter-spacing: -5%;
    }

    h2 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -2%;
    }

    h3 {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -2%;
    }

    h4 {
        font-size: 24px;
        line-height: 72px;
        letter-spacing: -2%;
    }

    p {
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -2%;
    }
}