@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,125,100..900;1,125,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root{
    --white: #ffffff;
    --offwhite: #F9F3E4;
    --yellow: #FFC107;
    --green-main: #8AA431;
    --green-secondary: #50702B;
    --green-dark-1: #163D24;
    --green-dark-2: #173020;
    --cont-outer: 1400px
}

*{
    box-sizing: border-box;
}
section{
    scroll-margin: 8rem;

    @media (max-width: 860px) {
        scroll-margin: 7rem;
    }
}
html{
    scroll-behavior: smooth;

    font-size: 16px;
    @media (max-width: 420px){
        font-size: 14px;
    }
}

body{
    padding: 0;
    margin: 0;
    background-color: var(--offwhite);
}

nav{
    position: fixed;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2rem;
    z-index: 10;


    @media(max-width: 1080px) {
        padding: 1rem;
    }

    .nav-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--white);
        width: 100%;
        max-width: var(--cont-outer);
        border-radius: 1rem;
        padding: 1rem 1.5rem;
        box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);

        @media(max-width: 1080px) {
                padding: 1rem;
            }

        .logo img{
            display: block;
            width: 9.375rem;

            @media(max-width: 1080px) {
                width: 8rem;
            }
        }

        ul{
            list-style-type: none;
            display: flex;
            gap: 0.25rem;
            margin: 0;
            padding: 0;

            li {
                a{
                    text-decoration: none;
                    font-family: 'Roboto Condensed', sans-serif;
                    font-size: 1.25rem;
                    padding: 0.625rem 0.75rem;
                    border-radius: .5rem;
                    color: var(--green-dark-1);
                    text-transform: uppercase;
                    font-weight: 700;
                    display: block;
                    transition: .2s;
                }
            &.active a, &:hover a, a:focus{
                background-color: var(--yellow);
            };
            }
            @media (max-width: 1080px) {
                display: none;

                &.open{
                    display: flex;
                    flex-direction: column;
                    position: fixed;
                    top: 6.5rem;
                    width: calc(100% - 2rem);
                    left: 1rem;
                    border-radius: 1rem;
                    background-color: var(--white);
                    padding: 1rem;
                    align-items: end;
                    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
                }
            }

        }

       
        #menu-toggle{
            
            background: var(--yellow);
            border-radius: 0.5rem;
            border: none;
            cursor: pointer;
            color: var(--green-dark-1);
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-items: center;
            width: 3rem;
            height: 3rem;
            padding: 0;
            display: none;

            @media (max-width: 1080px) {
                display: block;
            }

            &.closed{
                i#menu-close{
                    display: none;
                }
            }
            &.open{
                i#menu-open{
                    display: none;
                }
            }
            
        }
}
}
span.bold{
    font-weight: 700;
}

#hero{
    background-image: url(assets/hero-bg.jpg);
    background-position: 50% 85%;
    background-size: cover;
    margin-top: 0;
    height: 860px;

    display: grid;
    grid-template-columns: clamp(2rem, 100vw, calc((100vw - 1400px) / 2)) auto clamp(2rem, 100vw, calc((100vw - 1400px) / 2));
    grid-template-rows: 9rem 1fr 4rem;
    overflow-x: hidden;
    overflow-y: hidden;

    @media (max-width: 1120px) {
        height: 920px;
    }

    @media (max-width: 860px) {
        grid-template-rows: 7.5rem 1fr 4rem;
        height: auto;
    }
    @media (max-width: 410px) {
        grid-template-columns: 1.5rem auto 1.5rem;
    }
    &::after{
        content: '';
        display: block;
        background: linear-gradient(90deg,  var(--green-dark-1 )10%, transparent 100%);
        grid-area: 1 / 2 / 4 / 4;
        @media (max-width: 860px) {
            grid-area: 1 / 1 / 4 / 4;
            background: linear-gradient(180deg,  var(--green-dark-1 )10%, transparent 120%);
        };
    }
    .dec-left{
        grid-area: 1 / 1 / 4 / 2;
        background-color: var(--green-dark-1);
        display: grid;
        @media (max-width: 860px) {
            background-color: transparent;
        }
    }
    .dec-right{
        grid-area: 1 / 3 / 4 / 4;
        background-color: transparent;
        display: grid;
    }
    .splash-left{
        grid-area: 1 / 1 / 4 / 3;
        z-index: 2;
        transform: translateX(min(calc((1600px - 100vw)*-0.5), -50px));
        display: grid;
        overflow: hidden;
        img{
            display: block;
            height: fit-content;
            transform: rotate(180deg);
            object-fit: cover;
        }
    }
    .splash-right{
        grid-area: 1 / 2 / 4 / 4;
        z-index: 2;
        display: grid;
        overflow: hidden;
        transform: translateX(max(calc((100vw - 1600px)*-0.5), 0px));
        right: 0;
        img{
            display: block;
            height: fit-content;
            justify-self: end;
            object-fit: cover;
        }
    }
    .hero-container{
        grid-area: 2 / 2 / 4 / 3;
        z-index: 3;
        max-width: var(--cont-outer);
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;

        @media (max-width: 860px) {
            grid-template-columns: 1fr;
        };

        .hero-text{
            display: grid;
            align-content: center;
            padding-left: 4rem;
            @media (max-width: 1120px) {
                padding-left: 2rem;
            };
            @media (max-width: 960px) {
                padding-left: 0;
            };
            padding-bottom: 2rem;;
            h1{
                color: var(--yellow);
                font-family: Archivo, -apple-system, Roboto, Helvetica, sans-serif;
                font-weight: 900;
                font-size: 3rem;
                max-width: 600px;
                font-variation-settings: "wdth" 125;
                span{
                    font-weight: 300;
                }
                @media (max-width: 480px) {
                    font-size: 2.5rem;
                }
            }
            p{
                font-size: 1.25rem;
                color: var(--white);
                line-height: 1.75rem;
                font-family: "Roboto Condensed", sans-serif;
                font-weight: 300;
                margin-top: 1.25rem;
                max-width: 460px;

                
            }
            .hero-checkmarks{
                display: grid;
                background-color: var(--green-main);
                width: fit-content;
                padding: 1.5rem;
                border-radius: 16px;
                margin-top: 1.25rem;
                ul{
                    list-style: none;
                    display: grid;
                    padding: 0;
                    margin: 0;
                    gap: 1.5rem;
                    
                    li{
                          display: flex;
                          font-family: "Roboto Condensed", sans-serif;
                          font-size: 1.25rem;
                          font-weight: 700;
                          color: var(--green-dark-2);  
                          align-items: center;
                          gap: 0.5rem;

                          i{
                            font-size: 1.5rem;
                          }
                    }
                    }
                }
            }

        }
        .hero-img{
            height: 100%;
            display: grid;
            img{
                display: block;
                max-height: 700px;
                justify-self: center;
                align-self: end;

            }
            @media (max-width: 860px) {
                height: auto;
                img{
                    max-height: none;
                    width: 100%;
                    max-width: 500px;
                    object-fit: cover;
                }
            }
        }
    }


h1, h2, h3, h4, h5, h6, p, li{
    margin: 0;
}

.container{
    margin: auto;
    max-width: var(--cont-outer);
    margin-top: 6rem;
    

    .row{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;

        &.col-2-1{
            grid-template-columns: 2fr 1fr;
            gap: 4rem;

            @media(max-width: 1120px) {
                grid-template-columns: 1fr 1fr;
            }
            @media(max-width: 860px) {
                gap: 1rem;
                grid-template-columns: 1fr;
            }
        }

        @media(max-width: 860px) {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 1464px){
        margin-inline: 2rem;
    }
    @media (max-width: 600px){
        margin-inline: 1rem;
    }
    
}

/* Legal / privacy policy (inner page) */
main.privacy-main{
    padding-top: 12rem;
}
main.privacy-main > .container{
    margin-top: 0;
}
.privacy-content h1{
    font-family: Archivo, -apple-system, Roboto, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1.15;
    color: var(--green-dark-2);
    font-variation-settings: "wdth" 125;
    padding-top: 0;
    @media (max-width: 600px) {
        font-size: 2rem;
    }
}
.privacy-content h4{
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--green-secondary);
    letter-spacing: 0.02em;
    padding-top: 0.5rem;
}
.privacy-content ul{
    margin: 0;
    padding-left: 1.5rem;
    padding-top: 0.75rem;
}
.privacy-content li{
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--green-dark-2);
    padding-top: 0.35rem;
}
.privacy-content a{
    color: var(--green-secondary);
    font-weight: 600;
}
.privacy-content table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--green-dark-2);
}
.privacy-content th,
.privacy-content td{
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--green-dark-2);
    padding: 0.75rem 1rem;
    vertical-align: top;
    text-align: left;
    border: 1px solid rgba(23, 48, 32, 0.2);
}
.privacy-content th{
    font-weight: 700;
}
.privacy-content{
    margin: auto;
    padding-bottom: 3rem;
}

.text-block{
    color: var(--green-dark-2);
    h2{
        font-size: 1.25rem;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
    }
    h3{
        font-size: 2.5rem;
        font-family: Archivo, -apple-system, Roboto, Helvetica, sans-serif;
        font-weight: 600;
        line-height: 2.5rem;
        padding-top: 0.25rem;
    }
    p{
        font-family: "Roboto Condensed", sans-serif;
        font-size: 1.25rem;
        line-height: 1.75rem;
        padding-top: 1rem;
    }
    &.limited-width{
        max-width: 980px;
    }

}
article.privacy-content h2{
    margin-top: 3rem;
    padding-top: 0;
}
article.privacy-content h3{
    margin-top: 2.5rem;
    padding-top: 0;
}
.left-pad{
    padding-left: 4rem;
    @media (max-width: 1464px){
        padding-left: 2rem;
    }
    @media (max-width: 960px){
        padding-left: 1rem;
    }
    @media (max-width: 860px){
        padding-left: 0;
    }
}

.y-card{
    background-color: var(--yellow);
    border-radius: 1rem;
    padding: 2.5rem 2.75rem;
    display: grid;
    gap: 2rem;
    @media (max-width: 1120px){
        padding: 2rem;
    }
    @media (max-width: 860px){
        margin-top: 1.25rem;
    }
    @media (max-width: 480px){
        padding: 1.5rem;
    }

    .y-card-row{
        display: flex;
        align-items: center;
        gap: 2rem;

        img{
            display: block;
            width: 4rem;
            height: 4rem;
            object-fit: contain;
            @media (max-width: 480px){
                width: 3rem;
                height: 3rem;
            }
        }
        @media (max-width: 1120px){
            gap: 1.5rem;
        }
        @media (max-width: 480px){
            gap: 1rem;
            align-items: start;
        }
    }
    h4{
        font-family: "Roboto Condensed", sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--green-dark-2);
    }
    p{
        font-family: "Roboto Condensed", sans-serif;
        font-size: 1.25rem;
        color: var(--green-dark-2);
        line-height: 1.75rem;
        padding-top: 0.25rem;
    }
}
.span2{
    grid-column: span 2;
    @media (max-width: 860px){
        grid-column: span 1;
    }
}

.use-cases-card{
    background-color: var(--white);
    border-radius: 1rem;
    padding: 3rem 4rem 3rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 3rem;
    column-gap: 4rem;
    @media (max-width: 860px){
        padding: 2rem;
        row-gap: 2rem;
        column-gap: 3rem;
        grid-template-columns: 1fr;
    }
     @media (max-width: 480px){
        padding: 1.5rem;
    }

    .use-cases-row{
        display: flex;
        align-items: start;
        gap: 2rem;
         @media (max-width: 1120px){
            gap: 1.5rem;
        }
        @media (max-width: 480px){
            gap: 1rem;
        }

        img{
            display: block;
            width: 4rem;
            height: 4rem;
            object-fit: contain;
            @media (max-width: 480px){
                width: 3rem;
                height: 3rem;
            }
        }
        h4{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--green-dark-2);
        }
        p{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 1.25rem;
            color: var(--green-dark-2);
            line-height: 1.75rem;
            padding-top: 0.25rem;
        }
    }

}

.vision-traction-card{
    background-color: var(--yellow);
    padding: 2rem;
    border-radius: 1rem;
    display: grid;
    gap: 1rem;

     @media (max-width: 480px){
        padding: 1.5rem;
    }
        h4{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--green-dark-2);
        }
        .vision-row{
            display: flex;
            align-items: center;
            gap: 1rem;
            i{
                font-size: 1.5rem;
                color: var(--green-secondary);
                display: block;
                height: 1.5rem;
            }
            span{
                font-family: "Roboto Condensed", sans-serif;
                font-size: 1.25rem;
                color: var(--green-dark-2);
                line-height: 1.75rem;
            }
        }
}

.final-welcome{
    background-color: var(--green-dark-1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    border-radius: 1rem;
    align-items: center;
    overflow: hidden;

    @media (max-width: 860px){
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .text-block{
        padding-right: 4rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
        p, h2, h3{
            color: var(--yellow) !important;
        }
        @media (max-width: 860px){
            padding: 2rem;
        }
    }
    img{
        width: 80%;
        display: block;
        transform: scale(1.5);

        @media (max-width: 860px){
            grid-row-start: 2;
            transform: scale(1.5) translateY(5%);
        }
    }
    
}

#for-investors{
    .use-cases-card{
        row-gap: 1rem;
        .text-block, .use-cases-row{
            grid-column-start: 1;
        }
    }
}

footer{
    background-color: var(--green-dark-2);
    padding: 2rem;
    margin-top: 6rem;
    
    .container{
        margin-top: 0;

        .social-links{
            display: flex;
            justify-content: center;
            gap: .5rem;
            margin-bottom: .75rem;
            a{  
                font-size: 1.25rem;
                display: block;
                color: var(--yellow)
            }
        }
    }
        span{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 1rem;
            color: var(--white);
            line-height: 1.75rem;
            font-weight: 300;
            text-align: center;
            width: 100%;
            display: block;   
            
        }
    .links{
        display: flex;
        justify-content: center;
        gap: .5rem;
        color: var(--white);

        a{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 1rem;
            color: var(--white);
            line-height: 1.75rem;
            font-weight: 300;
            text-align: center;

        }
    }
}
h3{
    @media (max-width: 600px) {
        font-size: 1.75rem;
    }
}

#countdown{
    background-color: var(--green-dark-2);
    padding-block: 1.5rem;
    .container{
        margin-top: 0;
    }
}   
.countdown-card{
    color: var(--yellow);
    display: flex;
    justify-content: space-between;
    align-items: center;


    h2{
        font-size: 2.5rem;
        font-family: Archivo, -apple-system, Roboto, Helvetica, sans-serif;
        font-weight: 600;
        line-height: 2.5rem;
        display: block;
    }
    .timer-container{
        display: flex;
        justify-content: end;
        flex-grow: 1;
    }

    @media(max-width: 1024px){
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        padding-left: 0 !important;
    }
    @media(max-width: 680px){
        h2{
            font-size: 1.5rem !important;
        }
    }

    #countdown-timer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: fit-content;
    gap: 4rem;
    border-radius: 1rem;

    .time-segment{
        display: grid;
        align-items: center;
        justify-items: center;
        justify-self: end;
        width: 5rem;

        span:nth-child(1){
            font-size: 3rem;
            font-family: Archivo, -apple-system, Roboto, Helvetica, sans-serif;
            font-weight: 700;
            line-height: 2.5rem;
            padding-top: 0.25rem;
        }
        span.label{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 1.25rem;
            color: var(--yellow);
            line-height: 1.75rem;
            padding-top: 0.25rem;
        }
    }
     @media(max-width: 1024px){
        .time-segment{
            width: auto;
        }
        gap: 4rem;
    }
    @media (max-width: 680px) {

        .time-segment span:nth-child(1){
            font-size: 2.5rem;
        }
        span{
            padding: 0 !important;
        }
        gap: 2rem;
        
    }
    @media (max-width: 480px) {
        padding-inline: .5rem;
        .time-segment span:nth-child(1){
            font-size: 2rem;
        }
    }
}
}
    





#for-investors {
    i{
        font-size: 4rem;
        color: var(--green-secondary);
        opacity: .5;
        margin-top: .5rem;

        @media (max-width: 480px){
            font-size: 3rem;
        }
    }
    .use-cases-card{
        padding: 0;
        background-color: transparent;

        @media (max-width: 860px){
            row-gap: 2rem;
        }

    }
    .left-col{
        display: grid;
        gap: 1.5rem;
        
        height: fit-content;
        align-self: center;

    }
    .contact-form{
        grid-area: 1/2/2/3;
        background: var(--yellow);
        border-radius: 1rem;
        padding: .5rem 1.5rem .5rem 1.5rem;
        display: grid;
        align-items: start;
        height: fit-content;
        align-self: center;

        @media (max-width: 960px){
            grid-area: unset
        }

    #contactForm{
        margin-top: 1rem;
        display: grid;
        gap: 1rem;;
    }
    .form-group{
        display: grid;

        &:has(input[type='checkbox']){
            display: flex;
            align-items: center;

            input{
                accent-color: var(--green-secondary);
                width: 1rem;
                height: 1rem;
                display: block;
            }
        }

        input[name='email'],
        input[name='subject'],
        textarea{
            background: transparent;
            font-family: "Roboto Condensed", sans-serif;
            border: 1px solid var(--green-dark-1);
            font-size: 1.25rem;
            color: var(--green-dark-1);
            line-height: 1.75rem;
            padding-top: 0.25rem;
            width: 100% !important;
            padding: .5rem;
            border-radius: .5rem;
            &:focus, &:focus-within{
                border: 1px solid var(--green-main);
                outline: 2px solid var(--green-main);
            }
        }

        label{
            font-family: "Roboto Condensed", sans-serif;
            font-size: 1.25rem;
            color: var(--green-dark-2);
            line-height: 1.75rem;
            padding-top: 0.25rem;

            a{
                color: var(--green-secondary);
            }
        }

    }
    button{
        text-decoration: none;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 1.25rem;
        padding: 0.625rem 0.75rem;
        border-radius: .5rem;
        color: var(--white);
        background-color: var(--green-dark-1);
        transition: .2s;
        text-transform: uppercase;
        font-weight: 700;
        display: block;
        transition: .2s;
        width: fit-content;
        outline: 0;
        border: 0;
        cursor: pointer;

        &:hover{
            background-color: var(--green-secondary);
        }
    }
}
#contactFeedback{
    font-family: 'Roboto Condensed';
}
}
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider{
    transition: .2s;
    opacity: .5 !important;
}
#CybotCookiebotDialog input:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    opacity: 1 !important;
}

            .stores{
                display: flex;
                width: fit-content;
                gap: 1rem;
                flex-wrap: wrap;
                margin-block: .875rem;
                a{
                    display: block;
                    img{
                        display: block;
                        height: 3.5rem;

                        @media (max-width: 640px){
                            height: 3rem;
                        }
                    }
                }
            }

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
    visibility: hidden;
}