@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {

    /* Standard Sizing */
    --section-padding-standard-w: 48px;
    --section-padding-standard-h: 60px;
    --section-gap-standard: 24px;

    /* Colors */
    /* Synova Neutral */
    --synova-neutral-100: 253, 253, 253;
    --synova-neutral-200: 250, 250, 250;
    --synova-neutral-300: 246, 246, 247;
    --synova-neutral-400: 237, 237, 238;
    --synova-neutral-500: 219, 219, 222;
    --synova-neutral-600: 187, 187, 197;
    --synova-neutral-700: 137, 137, 163;
    --synova-neutral-800: 100, 100, 137;
    --synova-neutral-900: 52, 52, 75;
    --synova-neutral-1000: 32, 32, 47;
    --synova-neutral-1100: 20, 20, 30;
    --synova-neutral-1200: 14, 14, 21;
    --synova-neutral-1300: 12, 12, 17;
    --synova-neutral-1400: 2, 2, 3;

    /* Synova Green */
    --synova-green-100: 253, 254, 251;
    --synova-green-200: 235, 247, 214;
    --synova-green-300: 217, 243, 176;
    --synova-green-400: 198, 242, 136;
    --synova-green-500: 176, 244, 93;
    --synova-green-600: 153, 248, 47;
    --synova-green-700: 88, 234, 3;
    --synova-green-800: 53, 212, 6;
    --synova-green-900: 11, 172, 16;
    --synova-green-1000: 13, 134, 48;
    --synova-green-1100: 13, 99, 60;
    --synova-green-1200: 11, 65, 55;
    --synova-green-1300: 7, 32, 34;
    --synova-green-1400: 1, 3, 4;

    /* Synova Blue */
    --synova-blue-100: 251, 254, 251;
    --synova-blue-200: 214, 247, 223;
    --synova-blue-300: 176, 243, 213;
    --synova-blue-400: 136, 242, 222;
    --synova-blue-500: 93, 233, 244;
    --synova-blue-600: 47, 181, 248;
    --synova-blue-700: 3, 97, 234;
    --synova-blue-800: 6, 89, 212;
    --synova-blue-900: 11, 73, 172;
    --synova-blue-1000: 13, 59, 134;
    --synova-blue-1100: 13, 44, 99;
    --synova-blue-1200: 11, 30, 65;
    --synova-blue-1300: 7, 16, 34;
    --synova-blue-1400: 1, 2, 4;
}

html {
    scroll-behavior: smooth;
}

@media (max-width: 820px) {
    html:has(nav.opened) {
        overflow: hidden;
    }
}

@media (max-width: 720px) {
    :root {
        /* Standard Sizing */
        --section-padding-standard-w: 24px;
        --section-padding-standard-h: 48px;
    }
}

@media (max-width: 360px) {
    :root {
        /* Standard Sizing */
        --section-padding-standard-w: 12px;
        --section-padding-standard-h: 24px;
    }
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: all 1s;
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;

}


h2 {
    font-size: 48px;
    font-weight: 400;
    text-transform: capitalize;
}

@media (max-width:720px) {
    h2 {
        font-size: 40px;
    }
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
}

button {
    all: unset;
    transition: all 1s;
}

nav {
    display: flex;
    flex-direction: row;
    position: sticky;
    top: 0;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: rgba(var(--synova-blue-800), 1);
    z-index: 9999;
    opacity: .8;

    &:hover {
        opacity: 1;
    }

    .main {
        display: flex;
        flex-direction: row;
        gap: 48px;
        align-items: center;

        img {
            width: 180px;
        }

        ul {
            padding-left: 0;
            display: flex;
            flex-direction: row;
            gap: 32px;

            li {
                list-style: none;

                a {
                    text-decoration: none;
                    color: rgb(var(--synova-neutral-200));

                    &:hover {
                        scale: 1.05;
                        color: rgb(var(--synova-neutral-100))
                    }
                }
            }
        }
    }

    .contact {
        background-color: rgb(var(--synova-neutral-100));
        color: rgb(var(--synova-green-1000));
        text-decoration: unset;
        padding: 6px 12px;
        font-size: 14px;

        &:hover,
        &:focus {
            scale: 1.01;
            color: rgb(var(--synova-green-900))
        }
    }

    #mini-nav,
    #nav-exit {
        display: none;
    }
}

@media (max-width: 920px) {
    nav .main img {
        width: 120px;
    }
}

@media (max-width: 820px) {
    nav {

        padding: 18px 24px;

        .main {
            ul {
                display: none;
            }

            img {
                width: 120px;
            }
        }

        .contact {
            display: none;
        }

        #mini-nav {
            display: unset;
        }

        &.opened {
            background-color: rgb(var(--synova-blue-1000));
            position: fixed;
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
            opacity: 1;
            justify-content: center;
            gap: 36px;

            .main,
            .main ul {
                display: flex;
                flex-direction: column;
                gap: 36px;
                text-align: center;
                font-size: 24px;


                img {
                    width: 100%;
                    padding: 0px 12px 24px;
                    border-bottom: 3px solid rgb(var(--synova-green-300));
                }

            }

            #mini-nav {
                display: none;
            }

            .contact {
                display: flex;
                font-size: 24px;
                padding: 12px 24px;
            }

            #nav-exit {
                width: fit-content;
                padding: 24px;
                display: flex;
                position: fixed;
                top: 24px;
                right: 24px;


                svg {
                    width: 24px;
                    height: 24px;
                    fill: rgb(var(--synova-neutral-100));
                }
            }
        }
    }
}

.layout-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    gap: 12px;

    * {
        text-align: center
    }

    .content-grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-rows: repeat(12, 112px); */

        .card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 36px 12px;
            background-color: var(--l1-card-background);
            gap: 12px;
            border-radius: 12px;

            img {
                width: 100px;
                aspect-ratio: 1;
            }
        }
    }

    &[color-theme="1"] {
        --l1-card-background: rgba(var(--synova-neutral-400), 1);
    }
}

@media (max-width: 920px) {
    .layout-1 .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .layout-1 .content-grid {
        display: flex;
        flex-direction: column;
    }
}

.layout-2 {
    display: flex;
    justify-content: center;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    background-color: var(--layout-2-background-color);

    .content {
        display: flex;
        flex-direction: row;
        gap: 48px;
        max-width: 1080px;

        .header-content {
            width: 100%;
            max-width: 320px;

            h2,
            h3 {
                font-size: 36px;
                font-weight: 400;
                color: var(--layout-2-h-color);
            }

            .subhead {
                color: var(--layout-2-subhead-color);
            }
        }

        .detail-content {
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: 100%;

            color: var(--layout-2-p-color);

            .main {
                font-weight: bold;
                color: var(--layout-2-main-color);
            }
        }
    }

    &[color-theme="1"] {
        --layout-2-background-color: rgb(var(--synova-neutral-300));
        --layout-2-h-color: rgb(var(--synova-blue-800));
        --layout-2-subhead-color: rgb(var(--synova-neutral-800));
        --layout-2-main-color: rgb(var(--synova-blue-1000));
        --layout-2-p-color: rgb(var(--synova-neutral-1000));
    }
}

@media (max-width: 520px) {
    .layout-2 .content {
        flex-direction: column;

        .header-content,
        .detail-content {
            width: 100%;
        }
    }
}

.layout-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    background-color: var(--layout-3-background-color);
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);

    &>h2,
    &>p {
        text-align: center;
        max-width: 720px;
    }

    .content-array {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;

        .card {
            display: flex;
            align-items: flex-end;
            width: 320px;
            height: 400px;
            border-radius: 12px;
            box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.25);
            overflow: hidden;

            &.collapse{
                height: auto;
                align-self: stretch;

                 .label{
                    height: 100%;
                 }
            }

            &:hover {
                scale: 1.05;
            }

            .label {
                display: flex;
                flex-direction: column;
                gap: 0px;
                padding: 24px 12px;
                width: 100%;
                background-color: var(--layout-3-cardLabel-color);
                color: var(--layout-3-cardLabeltxt-color);

                .name {
                    font-weight: bold;
                }
            }
        }
    }

    &[color-theme="1"] {
        --layout-3-cardLabel-color: rgba(var(--synova-neutral-900), .8);
        --layout-3-cardLabeltxt-color: rgb(var(--synova-neutral-100));
        --layout-3-background-color: rgb(var(--synova-neutral-100));

        .card:hover {
            --layout-3-cardLabel-color: rgba(var(--synova-neutral-1000), .9);
        }
    }
    &[color-theme="2"] {
        --layout-3-cardLabel-color: rgba(var(--synova-neutral-900), .8);
        --layout-3-cardLabeltxt-color: rgb(var(--synova-neutral-100));
        --layout-3-background-color: rgb(var(--synova-neutral-300));

        .card:hover {
            --layout-3-cardLabel-color: rgba(var(--synova-neutral-1000), .9);
        }
    }
}

.layout-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--layout-4-background-color);
    color: var(--layout-4-text-color);

    .card {
        width: 100%;
        display: flex;
        flex-direction: row;

        &>* {
            width: 50%;
            aspect-ratio: 1;
            flex-shrink: 0;
        }

        .stat {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 0px;
            padding: 36px;
            font-size: 24px;

            .main {
                font-size: 64px;
            }
        }

        .img-container {
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;

                &:hover {
                    scale: 1.05;
                }
            }
        }

        &:nth-child(4n+3),
        &:nth-child(4n+4) {
            flex-direction: row-reverse;
            background-color: var(--layout-4-secondary-color);
        }

    }

    &[color-theme="1"] {
        --layout-4-background-color: rgb(var(--synova-blue-700));
        --layout-4-secondary-color: rgb(var(--synova-blue-600));
        --layout-4-text-color: rgb(var(--synova-neutral-200));
    }
}

@media (max-width: 720px) {
    .layout-4 {
        display: flex;
        flex-direction: column;

        .card {
            &:nth-child(n) {
                flex-direction: row;
            }

            &:nth-child(4n+3),
            &:nth-child(4n+4) {
                background-color: unset;
            }

            &:nth-child(2n) {
                flex-direction: row-reverse;
                background-color: var(--layout-4-secondary-color);
            }
        }
    }
}

@media (max-width: 400px) {
    .layout-4 .card:nth-child(n) {
        flex-direction: column;

        &>* {
            width: 100%;
            aspect-ratio: 4/2;
        }
    }
}

.layout-5 {
    display: flex;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    justify-content: center;
    align-items: center;
    background-color: var(--layout-5-background-color);

    .content {
        display: flex;
        flex-direction: row;
        max-width: 1080px;
        gap: 48px;

        .txt-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;

            h2 {
                color: var(--layout-5-h2-color);
            }

            p {
                color: var(--layout-5-p-color)
            }

            .subhead {
                color: var(--layout-5-sub-color);
            }

            a {
                color: var(--layout-5-cta-color);

                &::after {
                    content: " >";
                }
            }
        }

        .grid-content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            width: 100%;

            .card {
                padding: 24px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                text-align: center;
                justify-content: center;
                background-color: var(--layout-5-card-color);
                color: var(--layout-5-cardContent-color);

                &:nth-child(3) {
                    grid-column: span 2;
                }
            }
        }
    }

    &[color-theme="1"] {
        --layout-5-background-color: rgb(var(--synova-neutral-100));
        --layout-5-h2-color: rgb(var(--synova-blue-1000));
        --layout-5-sub-color: rgb(var(--synova-blue-1000));
        --layout-5-p-color: rgb(var(--synova-neutral-900));
        --layout-5-cta-color: rgb(var(--synova-blue-800));
        --layout-5-card-color: rgb(var(--synova-blue-700));
        --layout-5-cardContent-color: rgb(var(--synova-neutral-200));
    }
}

@media (max-width: 720px) {
    .layout-5 .content {
        flex-direction: column;
    }
}

.layout-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    gap: 24px;
    align-items: center;
    background-color: var(--layout-6-background-color);

    h2 {
        text-align: center;
        color: var(--layout-6-h2-color);
    }

    p {
        color: var(--layout-6-p-color);
    }

    &>p {
        text-align: center;
        max-width: 800px;
    }

    .content-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, 1fr);
        max-width: 1920px;

        .card {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 48px 24px;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            background-color: var(--layout-6-card-background-color);

            h3 {
                color: var(--layout-6-h3-color);
            }

            a {
                color: var(--layout-6-cta-color);
            }
        }
    }

    &[color-theme="1"] {
        --layout-6-background-color: rgb(var(--synova-neutral-100));
        --layout-6-card-background-color: rgb(var(--synova-neutral-300));
        --layout-6-h2-color: rgb(var(--synova-blue-800));
        --layout-6-h3-color: rgb(var(--synova-blue-1000));
        --layout-6-p-color: rgb(var(--synova-neutral-800));
        --layout-6-cta-color: rgb(var(--synova-blue-800));

        .card:hover {
            --layout-6-h3-color: rgb(var(--synova-blue-800));
            --layout-6-card-background-color: rgb(var(--synova-neutral-400));
        }
    }
}

@media (max-width: 920px) {
    .layout-6 .content-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 620px) {
    .layout-6 .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .layout-6 .content-grid {
        display: flex;
        flex-direction: column;
    }
}

.layout-7 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    background-color: var(--layout-7-background-color);

    h2 {
        color: var(--layout-7-h2-color);
        text-align: center;
    }

    .subhead {
        font-size: 32px;
        font-weight: 500;
        color: var(--layout-7-sub-color);
    }

    .content-array {
        display: flex;
        flex-direction: row;
        gap: 24px;
        justify-content: center;
        align-items: center;

        .card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-width: 600px;
            padding: 60px 36px;
            gap: 12px;
            text-align: center;
            border-radius: 12px;
            background-color: var(--layout-7-card-color);
            align-self: stretch;

            img {
                width: 100px;
                aspect-ratio: 1;
            }

            h3 {
                color: var(--layout-7-h3-color);
            }

            p {
                color: var(--layout-7-cardTxt-color);
            }

            a {
                color: var(--layout-7-cardCTA-color);
            }
        }
    }

    .cta {
        font-size: 24px;
        padding: 24px 48px;
        width: fit-content;
        background-color: var(--layout-7-CTAbackground-color);
        color: var(--layout-7-CTATxt-color);
        text-decoration: none;

        &:hover {
            scale: 1.01;
            background-color: var(--layout-7-CTAbackground_hover-color);
        }
    }

    &[color-theme="1"] {
        --layout-7-background-color: rgb(var(--synova-neutral-100));
        --layout-7-h2-color: rgb(var(--synova-blue-800));
        --layout-7-sub-color: rgb(var(--synova-neutral-900));
        --layout-7-card-color: rgb(var(--synova-neutral-300));
        --layout-7-h3-color: rgb(var(--synova-neutral-900));
        --layout-7-cardTxt-color: rgb(var(--synova-neutral-800));
        --layout-7-cardCTA-color: rgb(var(--synova-blue-800));
        --layout-7-CTAbackground-color: rgb(var(--synova-blue-800));
        --layout-7-CTAbackground_hover-color: rgb(var(--synova-blue-700));
        --layout-7-CTATxt-color: rgb(var(--synova-neutral-200));
    }


    &[color-theme="2"] {
        --layout-7-background-color: rgb(var(--synova-neutral-300));
        --layout-7-h2-color: rgb(var(--synova-blue-800));
        --layout-7-sub-color: rgb(var(--synova-neutral-900));
        --layout-7-card-color: rgb(var(--synova-neutral-100));
        --layout-7-h3-color: rgb(var(--synova-neutral-900));
        --layout-7-cardTxt-color: rgb(var(--synova-neutral-800));
        --layout-7-cardCTA-color: rgb(var(--synova-blue-800));
        --layout-7-CTAbackground-color: rgb(var(--synova-blue-800));
        --layout-7-CTAbackground_hover-color: rgb(var(--synova-blue-700));
        --layout-7-CTATxt-color: rgb(var(--synova-neutral-200));
    }
}

@media (max-width: 720px) {
    .layout-7 .content-array {
        flex-direction: column;
    }
}

.layout-8 {
    display: flex;
    justify-content: center;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    background-color: var(--layout-8-background-color);

    .content {
        display: flex;
        flex-direction: column;

        max-width: 720px;
        gap: var(--section-gap-standard);

        text-align: center;

        h1,
        h2 {
            color: var(--layout-8-h-color);
        }

        p {
            color: var(--layout-8-p-color);
        }
    }

    &[color-theme="1"] {
        --layout-8-background-color: rgb(var(--synova-neutral-100));
        --layout-8-h-color: rgb(var(--synova-blue-800));
        --layout-8-p-color: rgb(var(--synova-neutral-1000));
    }
}

.layout-9 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    background-color: var(--layout-9-background-color);

    .content {
        display: flex;
        flex-direction: row;
        gap: 48px;
        max-width: 1080px;

        .header,
        .details {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .header {
            gap: 24px;
            color: var(--layout-9-header-color);
        }

        .details {
            gap: 12px;
            padding-left: 12px;
            border-left: 2px solid var(--layout-9-border-color);
            color: var(--layout-9-details-color);

            .main {
                color: var(--layout-9-details_main-color);
                font-weight: 700;
            }
        }

        a {
            color: var(--layout-9-cta-color);

            &::after {
                content: " >";
            }
        }
    }

    &[color-theme="1"] {
        --layout-9-background-color: rgb(var(--synova-neutral-100));
        --layout-9-header-color: rgb(var(--synova-blue-1000));
        --layout-9-details-color: rgb(var(--synova-neutral-900));
        --layout-9-cta-color: rgb(var(--synova-blue-800));
        --layout-9-border-color: rgb(var(--synova-green-400));
        --layout-9-details_main-color: rgb(var(--synova-neutral-900));
    }
}

@media (max-width: 720px) {
    .layout-9 .content {
        gap: 24px;
        flex-direction: column;

        .details {
            padding: unset;
            border: unset;
        }
    }
}

footer {
    display: flex;
    flex-direction: column;

    .contact {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
        align-content: center;
        background-color: var(--footer-contact-background-color);
        background: url(./assets/background-pattern-light.png);
        background-size: contain;
        padding: var(--section-padding-standard-h) var(--section-padding-standard-w);


        .content {
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-width: 600px;
            text-align: center;

            h2 {
                color: rgb(var(--synova-blue-900));
            }

            .subhead {
                color: rgb(var(--synova-neutral-900));
            }
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
            max-width: 1080px;

            .field-array {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;

                .input-field {
                    display: flex;
                    flex-direction: column;
                    gap: 3px;

                    label {
                        font-weight: 700;
                        color: var(--footer-contact-label-color)
                    }

                    p {
                        font-weight: 700;
                        color: var(--footer-contact-label-color)
                    }
                }

                .input-field-checkbox {
                    display: flex;
                    flex-direction: row;
                    gap: 24px;

                    div {
                        display: flex;
                        flex-direction: row;
                        gap: 12px;

                        input[type="checkbox"] {
                            accent-color: var(--footer-contact-button-background-color);
                        }

                    }
                }
            }

            button {
                display: flex;
                padding: 12px 24px;
                background-color: var(--footer-contact-button-background-color);
                color: var(--footer-contact-button-txt-color);
                width: fit-content;
            }
        }

        .nav {
            padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
        }
    }

    .nav {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
        background-color: var(--footer-nav-background-color);

        .content-array {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 24px;

            .content {
                min-width: 220px;
                display: flex;
                flex-direction: column;
                gap: 12px;

                h3 {
                    color: var(--footer-nav-cat-color)
                }

                ul {
                    padding: 0;
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 6px;

                    a {
                        text-decoration: none;
                        color: var(--footer-nav-link-color)
                    }
                }
            }
        }

    }

    &[color-theme="1"] {
        --footer-contact-background-color: rgb(var(--synova-neutral-300));
        --footer-contact-label-color: rgb(var(--synova-blue-1000));
        --footer-contact-inputField-background-color: rgb(var(--synova-neutral-500));
        --footer-contact-button-background-color: rgb(var(--synova-blue-800));
        --footer-contact-button-txt-color: rgb(var(--synova-neutral-100));
        --footer-nav-background-color: rgb(var(--synova-blue-1300));
        --footer-nav-cat-color: rgb(var(--synova-neutral-100));
        --footer-nav-link-color: rgb(var(--synova-neutral-300));
    }
}

@media (max-width: 520px) {
    footer .contact form {
        .field-array {
            display: flex;
            flex-direction: column;

            .input-field-checkbox {
                flex-direction: column;
                gap: 12px;

            }
        }
    }
}