/* --- Mobile first --- */
:root {
    --color-header-text: #000000;
    --color-header-background: #FFFFFF;
    --color-hero-text: #FFFFFF;
    --color-hero-background: #015965;
    --color-hero-triangle: #015965;
    --color-mission-text: #000000;
    --color-mission-background: #FFFFFF;
    --color-mission-triangle: #FFFFFF;
    --color-testimonial-text: #FFFFFF;
    --color-testimonial-background: #000000;
    --color-testimonial-triangle: #000000;
    --color-secretsauce-text: #000000;
    --color-secretsauce-background: #D3E1ED;
    --color-secretsauce-triangle: #D3E1ED;
    --color-team-text: #FFFFFF;
    --color-team-background: #015965;
    --color-team-triangle: #015965;
    --color-governance-text: #000000;
    --color-governance-background: #FFFFFF;
    --color-governance-triangle: #FFFFFF;
    --color-insights-text: #FFFFFF;
    --color-insights-background: #000000;
    --color-insights-triangle: #000000;
    --color-footer-text: #FFFFFF;
    --color-footer-background: #015965;
    --color-contact-text: #000000;
    --color-contact-background: #EFEFEF;
    --color-contact-label-text: #8A8A8A;
    --color-contact-required-asterisk: #FF0000;
    --color-button-background: #15F182;
    --color-button-hover-background: #2DE689;
    --color-button-active-background: #2CD580;
    --color-button-active-border: #15F182;
    --color-button-text: #000000;
    --polygon-width-top: 34px;
    --polygon-width-bottom: 53px;
    --polygon-height: 38px;
    --polygon-offset: -37px;
    --triangle-width: 70px;
    --triangle-height: 16px;
    --triangle-offset: -15px;
}

.h-60px {
    height: 60px !important;
}

.h-215px {
    height: 215px !important;
}

.mw-150px {
    max-width: 150px !important;
    width: 100% !important;
}

.mw-162px {
    max-width: 162px !important;
    width: 100% !important;
}

.mw-252px {
    max-width: 252px !important;
    width: 100% !important;
}

.mw-288px {
    max-width: 288px !important;
    width: 100% !important;
}

.gx-16px {
    --bs-gutter-x: 16px !important;
}

.gy-40px {
    --bs-gutter-y: 40px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-8px {
    margin-bottom: 8px !important;
}

.mb-10px {
    margin-bottom: 10px !important;
}

.mb-20px {
    margin-bottom: 20px !important;
}

.mb-30px {
    margin-bottom: 30px !important;
}

.mb-40px {
    margin-bottom: 40px !important;
}

.pt-40px {
    padding-top: 40px !important;
}

.pt-60px {
    padding-top: 60px !important;
}

.pb-40px {
    padding-bottom: 40px !important;
}

.pb-60px {
    padding-bottom: 60px !important;
}

.pb-80px {
    padding-bottom: 80px !important;
}

.px-16px {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.px-20px {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.py-40px {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

.py-60px {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.u-typo-h321 {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 44px;
}

.u-typo-h322 {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 44px;
}

.u-typo-h555m {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.u-typo-h533 {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}

.u-typo-m144 {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.u-typo-m155m {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.u-typo-t211 {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.u-typo-t222 {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.u-typo-t2m1m1m {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.u-typo-t2m2m2m {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.u-typo-t443 {
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.btn-custom {
    color: var(--color-button-text);
    background-color: var(--color-button-background);
    border-color: var(--color-button-background);
}

    .btn-custom:hover {
        color: var(--color-button-text);
        background-color: var(--color-button-hover-background);
        border-color: var(--color-button-hover-background);
    }

    .btn-custom:active,
    .btn-custom:focus,
    .btn-custom:focus:active {
        color: var(--color-button-text);
        background-color: var(--color-button-active-background);
        border-color: var(--color-button-active-border);
    }

    .btn-custom:disabled {
        color: var(--color-button-text);
        background-color: var(--color-button-background);
        border-color: var(--color-button-background);
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

.custom-link-color {
    color: #FFFFFF !important;
}

    .custom-link-color:hover,
    .custom-link-color:focus {
        color: #FFFFFF !important;
    }

@media (min-width: 576px) {
    /* Small Size (sm) - starts at 576px */
    :root {
        --polygon-width-top: 34px;
        --polygon-width-bottom: 53px;
        --polygon-height: 38px;
        --polygon-offset: -37px;
    }

    .h-sm-220px {
        height: 220px !important;
    }

    .w-sm-auto {
        width: auto !important;
    }

    .mw-sm-218px {
        max-width: 218px !important;
        width: 100% !important;
    }

    .mw-sm-393px {
        max-width: 393px !important;
        width: 100% !important;
    }

    .mw-sm-394px {
        max-width: 394px !important;
        width: 100% !important;
    }

    .gx-sm-24px {
        --bs-gutter-x: 24px !important;
    }

    .gy-sm-60px {
        --bs-gutter-y: 60px !important;
    }

    .mb-sm-0 {
        margin-bottom: 0px !important;
    }

    .mb-sm-16px {
        margin-bottom: 16px !important;
    }

    .mb-sm-40px {
        margin-bottom: 40px !important;
    }

    .mb-sm-60px {
        margin-bottom: 60px !important;
    }

    .pt-sm-60px {
        padding-top: 60px !important;
    }

    .pt-sm-80px {
        padding-top: 80px !important;
    }

    .pb-sm-0px {
        padding-bottom: 0px !important;
    }

    .pb-sm-60px {
        padding-bottom: 60px !important;
    }

    .pb-sm-80px {
        padding-bottom: 80px !important;
    }

    .px-sm-22px {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .py-sm-60px {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .py-sm-80px {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .u-typo-h321 {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-size: 40px;
        font-weight: 400;
        line-height: 54px;
    }

    .u-typo-h322 {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-size: 40px;
        font-weight: 400;
        line-height: 54px;
    }

    .u-typo-h533 {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-size: 32px;
        font-weight: 400;
        line-height: 44px;
    }

    .u-typo-m144 {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
    }

    .u-typo-m155m {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
    }

    .u-typo-t211 {
        font-family: "neue-haas-grotesk-text", sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 28px;
    }

    .u-typo-t2m1m1m {
        font-family: "neue-haas-grotesk-text", sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
    }
}

@media (min-width: 768px) {
    /* Medium Size (md) - starts at 768px */
    :root {
        --polygon-width-top: 67px;
        --polygon-width-bottom: 105px;
        --polygon-height: 75px;
        --polygon-offset: -74px;
    }

    .h-md-80px {
        height: 80px !important;
    }

    .mw-md-184px {
        max-width: 184px !important;
        width: 100% !important;
    }

    .mw-md-222px {
        max-width: 222px !important;
        width: 100% !important;
    }

    .mw-md-218px {
        max-width: 228px !important;
        width: 100% !important;
    }

    .gx-md-24px {
        --bs-gutter-x: 24px !important;
    }

    .gy-md-60px {
        --bs-gutter-y: 60px !important;
    }

    .me-md-60px {
        margin-right: 60px !important;
    }

    .mb-md-0 {
        margin-bottom: 0px !important;
    }

    .mb-md-16px {
        margin-bottom: 16px !important;
    }

    .mb-md-20px {
        margin-bottom: 20px !important;
    }

    .mb-md-60px {
        margin-bottom: 60px !important;
    }

    .pt-md-80px {
        padding-top: 80px !important;
    }

    .pt-md-100px {
        padding-top: 100px !important;
    }

    .pb-md-80px {
        padding-bottom: 80px !important;
    }

    .pb-md-100px {
        padding-bottom: 100px !important;
    }

    .ps-md-12px {
        padding-left: 12px;
    }

    .pe-md-12px {
        padding-right: 12px;
    }

    .px-md-21px {
        padding-left: 21px !important;
        padding-right: 21px !important;
    }

    .py-md-80px {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .py-md-100px {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .u-typo-h321 {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-size: 48px;
        font-weight: 400;
        line-height: 60px;
    }

    .u-typo-t443 {
        font-family: "neue-haas-grotesk-text", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }
}

@media (min-width: 1024px) {
    /* Custom Size (cus) - starts at 1024px */
    .h-cus-160px {
        height: 160px !important;
    }

    .mw-cus-288px {
        max-width: 288px !important;
        width: 100% !important;
    }

    .mw-cus-335px {
        max-width: 335px !important;
        width: 100% !important;
    }

    .mb-cus-20px {
        margin-bottom: 20px !important;
    }

    .mb-cus-60px {
        margin-bottom: 60px !important;
    }

    .px-cus-20px {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .py-cus-50px {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .py-cus-100px {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .text-cus-start {
        text-align: left !important;
    }

    .row-cols-cus-3 > * {
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }

    .col-cus-auto {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .col-cus-4 {
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }

    .col-cus-5 {
        flex: 0 0 auto !important;
        width: 41.66666667% !important;
    }

    .col-cus-6 {
        flex: 0 0 auto !important;
        width: 50% !important;
    }

    .col-cus-8 {
        flex: 0 0 auto !important;
        width: 66.66666667% !important;
    }

    .col-cus-10 {
        flex: 0 0 auto !important;
        width: 83.33333333% !important;
    }

    .offset-cus-1 {
        margin-left: 8.33333333% !important;
    }

    .offset-cus-2 {
        margin-left: 16.66666667% !important;
    }

    .order-cus-1 {
        order: 1 !important;
    }

    .order-cus-2 {
        order: 2 !important;
    }
}

@media (min-width: 1280px) {
    /* Custom Size (cap) - starts at 1280px */
    .px-cap-28px {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .py-cap-100px {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .row-cols-cap-4 > * {
        flex: 0 0 auto !important;
        width: 25% !important;
    }

    .col-cap-8 {
        flex: 0 0 auto !important;
        width: 66.66666667% !important;
    }

    .offset-cap-2 {
        margin-left: 16.66666667% !important;
    }
}

/* Targets any paragraph that is the last child inside *any* Bootstrap row/column */
[class*='row'] p:last-child,
[class*='col-'] p:last-child {
    margin-bottom: 0 !important;
}

html {
    overflow: auto;
    margin: auto;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

.parallax-wrapper {
    /* In order to achieve parallax, we will need an inner wrapper as oppose to using the body. */
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 20px;
    scroll-behavior: smooth;
}

.page-layout-wrapper {
    /* The element that controls max-width and centering */
    display: block;
    position: relative;
    max-width: 1280px;
    margin: auto;
}

/* --- Base header styling --- */
.main-header {
    background-color: var(--color-header-background);
    color: var(--color-header-text);
    box-shadow: 0px 2px 4px 0px #8484840A;
    position: relative;
    z-index: 1000;
}

.hover-underline {
    text-decoration: none;
}

    .hover-underline:hover,
    .hover-underline:focus {
        text-decoration: underline !important;
    }

/* --- Base main styling --- */
.main-main {
    position: relative;
    transform-style: preserve-3d;
}

/* --- Hero Section styling --- */
#hero-section {
    color: var(--color-hero-text);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    transform-style: preserve-3d;
    z-index: 900;
}

    #hero-section::after {
        /* Create Downward-Pointing Triangle */
        content: "";
        position: absolute;
        bottom: var(--triangle-offset);
        left: 50%;
        transform: translateX(-50%);
        width: var(--triangle-width);
        height: var(--triangle-height);
        background-color: var(--color-hero-triangle);
        clip-path: polygon( 
            0% 0%,
            100% 0%, 
            50% 100% 
        );
        z-index: 950;
    }

.hero-parallax-layers-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    z-index: 910;
}

    .hero-parallax-layers-container .parallax-layer {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .hero-parallax-layers-container .hero-parallax-layer-color {
        /* Base with 0.25 rate on 20px perspective */
        transform: translateZ(-50px) scale(5);
        transform-origin: center center;
        background-image: url('/img/radial-background-black-to-blue-600-image.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        top: -50%;
    }

    .hero-parallax-layers-container .hero-parallax-layer-base {
        /* Base with 0.5 rate on 20px perspective */
        transform: translateZ(-15px) scale(2);
        transform-origin: center center;
        background-image: url('/img/earth-11-hero-700px-high.avif');
        background-size: auto;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .hero-parallax-layers-container .hero-parallax-layer-back {
        /* Moves slowest with 1 rate on 20px perspective */
        transform: translateZ(-1px) scale(1);
        transform-origin: center center;
        background-image: url('/img/hexagons-back-464-image.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: transparent;
    }

    .hero-parallax-layers-container .hero-parallax-layer-middle {
        /* Moves faster with 1.35 rate on 20px perspective */
        transform: translateZ(5px) scale(0.75);
        transform-origin: center center;
        background-image: url('/img/hex-middle-solvynt.avif');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: transparent;
        pointer-events: none;
    }

    .hero-parallax-layers-container .hero-parallax-layer-front {
        /* Moves faster with 1.8 rate on 20px perspective */
        transform: translateZ(10px) scale(0.5);
        transform-origin: center center;
        background-image: url('/img/hex-front-1500-solvynt.avif');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: transparent;
        pointer-events: none;
    }

.hero-content-wrapper {
    position: relative;
    z-index: 920;
}

/* --- Mission Section styling --- */
#mission-section {
    background-color: var(--color-mission-background);
    color: var(--color-mission-text);
    position: relative;
    z-index: 800;
}

    #mission-section::before {
        /* Create polygon */
        content: "";
        position: absolute;
        top: var(--polygon-offset);
        left: 0;
        width: 100%;
        height: var(--polygon-height);
        background-color: var(--color-mission-background);
        clip-path: polygon( 
            0% 0%, 
            calc(0% + var(--polygon-width-top)) 0%, 
            calc(0% + var(--polygon-width-bottom)) calc(100% - 1px), 
            calc(0% + var(--polygon-width-bottom)) 100%, 
            calc(100% - var(--polygon-width-bottom)) 100%, 
            calc(100% - var(--polygon-width-bottom)) calc(100% - 1px), 
            calc(100% - var(--polygon-width-top)) 0%, 
            100% 0%, 
            100% 100%, 
            0% 100% 
        );
        z-index: 940; /* Ensure it sits on top of the Hero section */
    }

    #mission-section::after {
        /* Create Downward-Pointing Triangle */
        content: "";
        position: absolute;
        bottom: var(--triangle-offset);
        left: 50%;
        transform: translateX(-50%);
        width: var(--triangle-width);
        height: var(--triangle-height);
        background-color: var(--color-mission-triangle);
        clip-path: polygon( 
            0% 0%, 
            100% 0%, 
            50% 100% 
        );
        z-index: 850;
    }

/* --- Testimonial Section Styling --- */
#testimonial-section {
    background-color: var(--color-testimonial-background);
    color: var(--color-testimonial-text);
    position: relative;
    z-index: 700;
}

    #testimonial-section::after {
        /* Create Downward-Pointing Triangle */
        content: "";
        position: absolute;
        bottom: var(--triangle-offset);
        left: 50%;
        transform: translateX(-50%);
        width: var(--triangle-width);
        height: var(--triangle-height);
        background-color: var(--color-testimonial-triangle);
        clip-path: polygon( 
            0% 0%, 
            100% 0%, 
            50% 100% 
        );
        z-index: 750;
    }

/* --- Secret Sauce Section Styling --- */
#secretsauce-section {
    background-color: var(--color-secretsauce-background);
    color: var(--color-secretsauce-text);
    position: relative;
    z-index: 600;
}

    #secretsauce-section::after {
        /* Create Downward-Pointing Triangle */
        content: "";
        position: absolute;
        bottom: var(--triangle-offset);
        left: 50%;
        transform: translateX(-50%);
        width: var(--triangle-width);
        height: var(--triangle-height);
        background-color: var(--color-secretsauce-triangle);
        clip-path: polygon( 
            0% 0%, 
            100% 0%, 
            50% 100% 
        );
        z-index: 650;
    }

/* --- Team Section styling --- */
#team-section {
    color: var(--color-team-text);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transform-style: preserve-3d;
    z-index: 500;
}

    #team-section::after {
        /* Create Downward-Pointing Triangle */
        content: "";
        position: absolute;
        bottom: var(--triangle-offset);
        left: 50%;
        transform: translateX(-50%);
        width: var(--triangle-width);
        height: var(--triangle-height);
        background-color: var(--color-team-triangle);
        clip-path: polygon( 
            0% 0%, 
            100% 0%, 
            50% 100% 
        );
        z-index: 550;
    }

.team-parallax-layers-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    z-index: 510;
}

    .team-parallax-layers-container .parallax-layer {
        position: absolute;
        height: 100%;
        width: 100%;
    }

    .team-parallax-layers-container .team-parallax-layer-base {
        /* 0.67 rate at perspective of 20px */
        transform: translateZ(-10px) scale(1.5);
        transform-origin: center center;
        background-image: url('/img/earth-7-background.jpg');
        background-size: auto;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: var(--color-team-background);
    }

.team-content-wrapper {
    position: relative;
    z-index: 520;
}

/* --- Mission Section styling --- */
#governance-section {
    background-color: var(--color-governance-background);
    color: var(--color-governance-text);
    position: relative;
    z-index: 400;
}

    #governance-section::after {
        /* Create Downward-Pointing Triangle */
        content: "";
        position: absolute;
        bottom: var(--triangle-offset);
        left: 50%;
        transform: translateX(-50%);
        width: var(--triangle-width);
        height: var(--triangle-height);
        background-color: var(--color-governance-triangle);
        clip-path: polygon( 
            0% 0%, 
            100% 0%,
            50% 100% 
        );
        z-index: 450;
    }

/* --- Insights Section styling --- */
#insights-section {
    background-color: var(--color-insights-background);
    color: var(--color-insights-text);
    position: relative;
    z-index: 300;
}

    #insights-section::after {
        /* Create Downward-Pointing Triangle */
        content: "";
        position: absolute;
        bottom: var(--triangle-offset);
        left: 50%;
        transform: translateX(-50%);
        width: var(--triangle-width);
        height: var(--triangle-height);
        background-color: var(--color-insights-triangle);
        clip-path: polygon( 
            0% 0%, 
            100% 0%, 
            50% 100% 
        );
        z-index: 350;
    }

/* --- Contact Us Section styling --- */
#contactus-section {
    background-color: var(--color-contact-background);
    color: var(--color-contact-text);
    /* Standard Padding */
    position: relative;
    z-index: 200;
}

.contactus-form-mandatory-label {
    color: var(--color-contact-label-text);
}

.required-asterisk {
    color: var(--color-contact-required-asterisk);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    /* This removes the green checkmark SVG background image */
    background-image: none;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    /* This removes the red '!' SVG background image */
    background-image: none;
}

.was-validated :invalid ~ .invalid-feedback {
    display: flex !important;
    align-items: center !important;
}

/* --- Base footer styling --- */

.main-footer {
    background-color: var(--color-footer-background);
    color: var(--color-footer-text);
    position: relative;
    z-index: 100;
}

    .main-footer::before {
        /* Create polygon */
        content: "";
        position: absolute;
        top: var(--polygon-offset);
        left: 0;
        width: 100%;
        height: var(--polygon-height);
        background-color: var(--color-footer-background);
        clip-path: polygon( 
            0% 0%, 
            calc(0% + var(--polygon-width-top)) 0%, 
            calc(0% + var(--polygon-width-bottom)) calc(100% - 1px), 
            calc(0% + var(--polygon-width-bottom)) 100%, 
            calc(100% - var(--polygon-width-bottom)) 100%, 
            calc(100% - var(--polygon-width-bottom)) calc(100% - 1px), 
            calc(100% - var(--polygon-width-top)) 0%, 
            100% 0%, 
            100% 100%, 
            0% 100% 
        );
        z-index: 240; /* Ensure it sits on top of the Contact section */
    }