@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100..900&display=swap');

:root{
    --primary-color:#e01c08;
    --secondary-color:#b11101;
    --dark-color:#00061a;
    --dark-color-rgb:0,6,26;
    --light-color:#f8f8f8;
    --zeta-theme-color-text:#707070;
    --zeta-font:"Roboto",sans-serif;
    --zeta-font-title:"Barlow",var(--zeta-font);
}

::selection{
    background-color:var(--secondary-color);
    color:#fff;
}

body{
    overflow-x:clip;

    &::-webkit-scrollbar-track{
        background-color:#fff;
        border-left: 1px solid#fff;
    }
    &::-webkit-scrollbar{
        width:5px;
        background-color:#fff;
    }
    &::-webkit-scrollbar-thumb{
        background: linear-gradient(90deg, var(--primary-color) 0.18%, var(--secondary-color) 100.18%);
    }
}

nav{
    background-color:transparent;
    box-shadow:none;
    transition:0.5s ease;

    & > .nav-wrapper{
        & .badge{
            & img{
                height:85%;
            }

            & figcaption{
                margin-left:1rem;
                font-family:var(--zeta-font-title);
                font-weight:700;
                font-size:calc(1rem + .5vw);
                color:#fff;
                line-height:1;
                text-transform:uppercase;
            }
        }

        & .modules{
            & ul{
                & li{
                    & a{
                        font-family:var(--zeta-font-title);
                        font-size:1rem;
                        font-weight:600;
                        color:rgba(255,255,255,.75);

                        & > span{
                            margin-right:.5rem;
                            font-size:1.1rem;
                            line-height:0;
                            color:var(--primary-color);
                        }

                        &:hover,
                        &:focus,
                        &:active{
                            color:#fff;
                            background-color:transparent;
                        }
                    }
                }
            }
        }

        & .bridge{
            & a{
                padding:0;
                align-items:center;

                & img{
                    transition:.3s ease;
                }
            }
        }
    }

    &.active{
        background-color:#fff;
        box-shadow:0 0 25px rgba(var(--dark-color-rgb),0.15);

        & .badge{
            & figcaption{
                color:var(--dark-color);
            }
        }

        & .modules{
            & ul{
                & li{
                    & a{
                        color:var(--dark-color);

                        &:hover,
                        &:focus,
                        &:active{
                            color:var(--secondary-color);
                        }
                    }
                }
            }
        }

        & .bridge{
            & a{
                & img{
                    filter:invert();
                }
            }
        }
    }
}

header{
    & h1,
    & h6{
        color:#fff;
    }

    & h6{
        margin-top:var(--navigation-h-2);
    }

    & p{
        margin-top:1rem;
        color:rgba(255,255,255,.8);
    }
}

figure{
    margin:0;
}

h1{
    font-family:var(--zeta-font-title);
    font-weight:800;
    text-transform:uppercase; 
}

h2{
    font-family:var(--zeta-font-title);
    font-weight:700;
    font-size:calc(1.5rem + 1.5vw);
    color:var(--dark-color);
    text-transform:capitalize;

    & > span{
        color:var(--secondary-color);
    }
}

h6{
    font-family:var(--zeta-font-title);
    font-weight:600;
    text-transform:uppercase;

    & > span{
        margin-right:.25rem;
        color:var(--primary-color);
        line-height:0;
    }
}

p{
    font-size:1rem;

    &:last-child{
        margin-bottom:0;
    }

    & > a{
        font-family:var(--zeta-font-title);
        font-weight:500;
        display:inline-block;
        text-decoration:none;
        position:relative;

        &::before{
            content:"";
            width:100%;
            height:2px;
            background-color:var(--primary-color);
            position:absolute;
            left:0;
            bottom:0;
        }
    }
}

map{
    display:block;
    width:100%;
    height:600px;
    background-color:var(--light-color);
}

form{
    & fieldset{
        & label{
            font-size:.8rem;
            font-family:var(--zeta-font-title);
            font-weight:700;
            text-transform: uppercase;

            & > span{
                color:var(--primary-color);
            }
        }
    }

    & input,
    & textarea{
        transition:border-color .3s ease-in-out;

        &:focus{
            border-color:var(--dark-color);
        }

        &.error{
            border-color:var(--primary-color);
        }
    }

    & input{
        padding:0 1rem;
        height:80px;
        border-width:2px;
    }

    & textarea{
        padding:1rem;
        height:200px;
        border-width:2px;
        resize:none;
    }
}

img{
    &.mirror{
        -webkit-transform:scaleX(-1);
                transform:scaleX(-1);
    }
}

.fab{
    font:var(--fa-font-brands);
}

.row,
.nav-wrapper{
    margin-left:auto;
    margin-right:auto;
    max-width:1400px;
}

.solar{
    align-content:center;
}

.background{
    &.color{
        --alpha:1;

        &.dark{
            background-color:rgba(
                var(--dark-color-rgb),
                var(--alpha)
            );

            & h6{
                color:#fff;
            }

            & h2{
                color:#fff;

                & > span{
                    color:var(--primary-color);
                }
            }

            & p{
                color:rgba(255,255,255,.75);
            }
        }

        &.light{
            background-color:var(--light-color);
        }
    }

    &.image,
    &.video{
        width:100%;
        height:100%;
        min-height:inherit;
        position:relative;
        overflow:hidden;
        
        & > .solar,
        & > video,
        & > figure{
            width:100%;
            height:100%;
            position:absolute;
        }

        & > .solar{ z-index:1; }

        & > video{
            pointer-events:none;
            object-fit:cover;
            object-position:center;
            z-index:0;
        }

        & > figure{
            pointer-events:none;
            z-index:-1;
        }

        & > img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
        }

        &.image{
            &.top{
                & > img{
                    object-position:center 10%;
                }
            }
        }
    }
}

.parallax{
    height:600px;
}

.button{
    --button-height:60px;

    padding:0 1.5rem;
    width:fit-content;
    height:var(--button-height);
    display:inline-flex;
    align-items:center;
    background-color:transparent;
    border:0;
    border-radius:calc(var(--button-height)/2);
    border:2px solid transparent;
    font-family:var(--zeta-font-title);
    font-weight:600;
    font-size:1.1rem;
    text-decoration:none;
    transition:.3s ease;

    &.primary{
        background-color:var(--primary-color);
        border-color:var(--primary-color);
        color:#fff;
    }

    & > span{
        margin-left:.75rem;
        line-height:0;
    }

    &:has(.icon){
        padding:0;
        background-color:transparent;
        border-color:transparent;
        color:#fff;

        & > .icon{
            margin-top:.15rem;
            margin-right:.75rem;
            width:var(--button-height);
            height:var(--button-height);
            border-radius:50%;
            background-color:rgba(255,255,255,.25);
            display:inline-flex;
            align-items:center;
            justify-content:center;

            & > span{
                margin-left:0;
                font-size:1.5rem;
                line-height:0;
            }
        }
    }

    &:hover,
    &:focus,
    &:active{
        background-color:transparent;

        &.color{
            &.primary{ color:var(--secondary-color); }
        }
    }
}

.social{
    margin-top:1rem;

    & a{
        margin:0 .25rem;
        width:50px;
        height:50px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        border:2px solid var(--primary-color);
        background-color:transparent;
        font-size:1.25rem;
        text-decoration:none;
        color:#fff;
        transition:.3s ease;
        position:relative;
        z-index:0;

        &::before{
            content:"";
            width:100%;
            height:100%;
            border-radius:inherit;
            background-color:var(--primary-color);
            position:absolute;
            top:0;
            left:0;
            z-index:-1;
            scale:0;
            transition:scale .3s ease;
        }

        &:first-child{
            margin-left:0;
        }

        &:last-child{
            margin-right:0;
        }

        &:hover,
        &:focus,
        &:active{
            &::before{
                scale:1;
            }
        }
    }
}

.align{
    &.right{
        text-align:right;
        align-items:end;
    }

    &.center{
        text-align:center;
    }
}

.box{
    &.service{
        height:100%;
        border-radius:15px;

        & figure{
            border-top-left-radius:inherit;
            border-top-right-radius:inherit;
            height:300px;
            overflow:hidden;

            & img{
                transition:scale .3s ease;
            }
        }

        & .content{
            height:calc(100% - 300px);
            padding:2rem;
            background-color:#fff;
            border-bottom-left-radius:inherit;
            border-bottom-right-radius:inherit;
            border:1px solid #eee;
            border-top:0;
            position:relative;
            text-align:center;

            & h4{
                margin:1.5rem 0;
                font-family:var(--zeta-font-title);
                font-weight:700;
                color:var(--dark-color);
            }

            & .icon{
                width:80px;
                height:80px;
                border-radius:50%;
                background:var(--primary-color);
                background:linear-gradient(
                    -45deg,rgba(224, 28, 8, 1) 0%,
                    rgba(177, 17, 1, 1) 100%
                );
                display:flex;
                align-items:center;
                justify-content:center;
                position:absolute;
                top:-40px;
                left:50%;
                transform:translateX(-50%);
                
                & > span{
                    line-height:0;
                    font-size:2rem;
                    color:#fff;
                }
            }
        }

        &:hover,
        &:active,
        &:focus{
            & figure{
                & img{
                    scale:1.1;
                }
            }
        }
    }
}

#sidenav{
    padding:1.5rem;
    width:320px;
    height:100vh;
    background-color:rgba(var(--dark-color-rgb),0.9);
    background-image:url(../img/carbon-fibre-big.png);
    background-size:10px;
    position:fixed;
    top:0;
    right:-100%;
    z-index:var(--zeta-index-1);
    backdrop-filter:blur(5px);
    box-shadow:0 0 25px rgba(var(--dark-color-rgb),0.15);
    overflow-y:auto;
    overflow-x:hidden;
    transition:right .5s ease-in-out;

    & > button{
        width:60px;
        height:60px;
        border-radius:0;
        background:var(--primary-color);
        background:linear-gradient(
            -45deg,rgba(224, 28, 8, 1) 0%,
            rgba(177, 17, 1, 1) 100%
        );
        display:flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:0;
        right:0;

        & > span{
            font-size:1.5rem;
            line-height:0;
            color:#fff;
        }
    }

    & figure{
        margin-top:2rem;
        margin-bottom:1rem;
        display:flex;
        justify-content:center;
        align-items:center;

        & figcaption{
            width:fit-content;
            margin-left:1rem;
            font-family:var(--zeta-font-title);
            font-weight:700;
            font-size:1.15rem;
            color:#fff;
            line-height:1.1;
            text-transform:uppercase;
        }
    }

    & a{
        height:125px;
        display:flex;
        flex-flow:column nowrap;
        align-items:center;
        justify-content:center;
        color:rgba(255,255,255,0.75);
        border:1px solid rgba(255,255,255,.05);
        border-radius:5px;
        font-family:var(--zeta-font-title);
        font-weight:700;
        font-size:1rem;
        text-transform:uppercase;
        text-decoration:none;
        transition:.3s ease;

        & span{
            font-size:2.25rem;
            transition:inherit;
        }

        &:hover,
        &:focus,
        &:active{
            color:#fff;
            border-color:rgba(255,255,255,.2);

            & span{
                color:var(--primary-color);
            }
        }
    }

    & p{
        color:rgba(255,255,255,.75);
    }

    &.active{
        right:0;
    }
}

footer{
    background-image:url(../img/footer-bg.png);
    background-repeat:no-repeat;
    background-size:100%;
    background-position-x:center;
    background-position-y:1rem;

    & h3{
        margin-bottom:2rem;
        font-family:var(--zeta-font-title);
        font-weight:700;
        color:#fff;
    }

    & p{
        & a{
            color:#fff;
        }
    }

    & ul{
        margin:0;
        padding:0;
        list-style-type:none;
        font-size:1rem;
        
        & li{
            & a{
                margin-bottom:.75rem;
                height:fit-content;
                display:flex;
                align-items:center;
                color:rgba(255,255,255,.75);
                text-decoration:none;
                transition:.3s ease;

                & span{
                    margin-right:.5rem;
                    line-height:0;
                    transition:.3s ease;
                }

                &:hover,
                &:focus,
                &:active{
                    color:#fff;

                    & span{
                        color:var(--primary-color);
                    }
                }
            }
        }
    }

    & #barFoo{
        & > :first-child{
            background-color:var(--secondary-color);
            border-top-left-radius:15px;
            border-bottom-left-radius:15px;

            & figure{
                padding:1rem 2rem;
                display:flex;
                justify-content:center;
                align-items:center;

                & figcaption{
                    width:fit-content;
                    margin-left:1rem;
                    font-family:var(--zeta-font-title);
                    font-weight:700;
                    font-size:calc(1.25rem + .25vw);
                    color:#fff;
                    line-height:1.1;
                    text-transform:uppercase;
                }
            }
        }

        & > :last-child{
            border-top-right-radius:15px;
            border-bottom-right-radius:15px;
            border:1px solid rgba(255,255,255,.05);
            border-left:0;
            display:flex;
            align-items:center;

            & .box{
                padding:1.5rem;

                & h6{
                    font-size:.85rem;
                    color:var(--zeta-theme-color-text);
                }

                & a{
                    font-family:var(--zeta-font-title);
                    font-size:1.25rem;
                    font-weight:600;
                    color:#fff;
                    text-decoration:none;
                    overflow-wrap:break-word;
                    line-height:1;
                }

                & .icon{
                    width:50px;
                    height:50px;
                    border-radius:50%;
                    background-color:rgba(255,255,255,.25);
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size:1.5rem;
                    color:#fff;

                    & > span[class^=fi-rr]{
                        margin-top:.15rem;
                        display:block;
                        line-height:0;
                    }
                }
            }
        }
    }

    & #copyright{
        border-top:1px solid rgba(255,255,255,.02);

        & .alt-links{
            display:flex;
            align-items:center;
            justify-content:end;

            & a{
                color:rgba(255,255,255,.75);
                text-decoration:none;
                transition:.3s ease;

                &:hover,
                &:focus,
                &:active{
                    color:#fff;
                }
            }

            & span{
                margin:0 .5rem;
                color:var(--primary-color);
                line-height:0;
            }
        }
    }
}

@media(max-width:1199px){
    footer{
        & #barFoo{
            & > :first-child{
                border-top-right-radius:15px;
                border-bottom-left-radius:0;
            }

            & > :last-child{
                border-top:0;
                border-left:1px solid rgba(255,255,255,.05);
                border-bottom-left-radius:15px;
                border-top-right-radius:0;
            }
        }
    }
}

@media(max-width:991px){
    footer{
        & #copyright{
            & p{
                margin-bottom:1rem;
                text-align:center;
            }

            & .alt-links{
                justify-content:center;
            }
        }
    }
}

@media(max-width:575px){
    footer{
        & #barFoo{
            & > :last-child{
                & .box{
                    & h6{
                        margin-top:1rem;
                    }
                }
            }
        }
    }
}