@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap');

:root{
    --primary-color:#03045e;
    --secondary-color:#0077b6;
    --tertiary-color:#00b4d8;
    --alt-color:#90e0ef;
    --dark-color:#2e2e37;
    --light-color:#E1F6FA;
    --zeta-theme-link:var(--dark-color);
    --zeta-theme-color-text:#4d4d5c;
    --zeta-font:"Open Sans",sans-serif;
    --zeta-font-title:"Play",consolas;
}

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

body{
    &.no-scroll{
        overflow-y:hidden;
    }
}

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

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

        & .modules{
            margin-right:var(--zeta-density-1);

            & ul{
                & li{
                    & a{
                        margin:0 0.75rem;
                        padding:0;
                        font-family:var(--zeta-font-title);
                        font-weight:400;
                        font-size:1.1rem;
                        color:#fff;
                        position:relative;
                        overflow:hidden;

                        & span{
                            margin-right:.5rem;
                            transition:0.3s ease;
                        }

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

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

                    &.current{
                        & a{
                            & span{
                                color:var(--alt-color);
                            }
                        }
                    }
                }
            }
        }

        & .bridge{
            a.launch-navi{
                &.hyperspace{
                    &::before,
                    &::after,
                    & span{
                        width:85%;
                        height:2px;
                        background-color:#fff;
                    }
                }
            }
        }
    }

    &.active{
        background-color:var(--dark-color);

        & .nav-wrapper{
            & .bridge{
                a.launch-navi{
                    &.hyperspace{
                        &::before,
                        &::after,
                        & span{
                            background-color:#fff;
                        }
                    }
                }
            }
        }
    }
}

figure{
    margin:0;
    padding:0;

    &.background{
        width:100%;
        height:100%;
        overflow:hidden;

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

h1,h2{
    font-family:var(--zeta-font-title);
    font-size:calc(2.375rem + 1.8vw);
    font-weight:700;
    text-transform:capitalize;
    line-height:1;
    color:#151515;
}

h3,h4,h5{
    font-family:var(--zeta-font-title);
    font-weight:600;
}

h1{
    font-size:calc(2.5rem + 3vw);
    line-height:0.8;
}

h6{
    margin-bottom:1rem;
    font-size:1.25rem;
    font-weight:400;
    text-transform:uppercase;
    color:#aaa;
    letter-spacing:.75rem;
}

p,a{
    font-size:1rem;

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

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

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

form{
    & fieldset{
        padding:0;

        & input,
        & select,
        & textarea{
            padding:0 1rem;
            height:80px;
            font-size:1rem;
            font-weight:600;
            background-color:#fff;

            &::placeholder{
                font-weight:300;
            }
        }

        & textarea{
            padding:1rem;
            height:200px;
            resize:none;
        }
    }
}

footer{
    & .social{
        & a{
            margin:0 0.15rem;
            width:50px;
            height:50px;
            border-radius:50%;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            text-decoration:none;
            font-size:1.25rem;;
            color:#fff;
            transition:0.6s ease-out 0s;

            &:first-child{
                margin-left:0;
                background-color:var(--secondary-color);
            }

            &:nth-child(2){
                background-color:var(--tertiary-color);
            }

            &:nth-child(3){
                background-color:#0077b5;
            }

            &:last-child{
                margin-right:0;
                background-color:#405de6;
            }

            &:hover,
            &:focus,
            &:active{
                transform:rotateY(360deg);
            }
        }
    }
}

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

.button{
    padding:0 2rem;
    width:auto;
    height:70px;
    display:inline-flex;
    align-items:center;
    border:0;
    border-radius:5px;
    font-family:var(--zeta-font-title);
    font-weight:600;
    font-size:1.1rem;
    text-decoration:none;
    text-transform:capitalize;
    color:#fff;
    position:relative;
    overflow:hidden;
    z-index:1;

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

    &::after{
        content:"";
        width:50px;
        height:155px;
        background-color:#fff;
        opacity:.2;
        transform:rotate(35deg);
        transition:550ms cubic-bezier(0.19, 1, 0.22, 1);
        position:absolute;
        top:-50px;
        left:-75px;
        z-index:0;
    }

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

        &::after{
            left:120%;
        }
    }

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

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

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

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

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

.bg-color{
    &.dark{
        background-color:var(--dark-color);

        & h2{
            color:#fff;
        }

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

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

        & h6{
            color:var(--dark-color);
        }
    }
}

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

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

.filter{
    &.gray-scale{
        filter:grayscale(1);
    }
}

.parallax{
    height:600px;

    & .solar{
        display:flex;
        align-items:center;
    }
}

.table-cell{
    border-bottom:1px solid #ddd;

    & h6{
        margin-bottom:0;
        font-size:.9rem;
        color:var(--zeta-theme-color-text)!important;
        letter-spacing:.5rem;
    }

    & .background{
        margin:0 auto;
        width:75%;
        height:180px;
        border-radius:10px;
        position:relative;
        z-index:1;
        transition:.5s ease-in-out;
        opacity:0;
    }

    & button{
        width:80px;
        height:80px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        border:1px solid #ddd;
        background-color:transparent;
        transition:.3s ease;

        & span{
            margin-top:.25rem;
            font-size:1.5rem;
            color:var(--dark-color);
            transition:.3s ease;
        }

        &:hover,
        &:focus,
        &:active{
            background-color:var(--dark-color);
            border-color:var(--dark-color);

            & span{
                color:#fff;
            }
        }
    }

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

    &:hover,
    &:focus,
    &:active{
        & .background{
            opacity:1;
            transform:rotateZ(-12deg);
            scale:1.1;
        }
    }
}

.owl-theme{
    & .owl-dots{
        text-align:left;

        & button.owl-dot{
            width:auto;

            & span{
                transition:.5s ease;
            }

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

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

#preloader{
    width:100vw;
    height:100vh;
    background-color:var(--dark-color);
    display:flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    top:0;
    left:0;
    z-index:var(--zeta-index-2);
    opacity:1;
    visibility:visible;
    transition:.5s ease-in-out;

    &.hidden{
        opacity:0;
        visibility:hidden;
    }
}

#menu{
    padding:1rem;
    width:300px;
    height:100vh;
    background-color:var(--dark-color);
    position:fixed;
    top:0;
    right:-300px;
    z-index:var(--zeta-index-1);
    overflow-y:auto;
    transition:right 0.5s ease-in-out;

     & .button{
        padding:0;
        width:50px;
        height:50px;
        justify-content:center;
        position:absolute;
        top:.5rem;
        right:.5rem;

        & > span{
            margin-left:0;
            font-size:1rem;
        }
    }

    & figure{
        margin:3rem 0 2rem 0;
        text-align:center;
    }

    & p{
        font-size:.8rem;
        text-align:justify;
        color:var(--light-color);

        &:last-child{
            text-align:center;
        }
    }

    & menu{
        margin:2rem 0;
        padding:0;
        list-style-type:none;

        & li{
            & a{
                height:100px;
                display:flex;
                flex-flow:column nowrap;
                justify-content:center;
                align-items:center;
                border:1px solid rgba(255,255,255,.15);
                border-radius:5px;
                color:#fff;
                text-decoration:none;

                & span{
                    font-size:1.25rem;
                    transition:color .3s ease;
                }

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

    & .social{
        margin-bottom:2rem;
        text-align:center;

        & a{
            margin:0 0.2rem;
            width:40px;
            height:40px;
            border-radius:50%;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            text-decoration:none;
            font-size:1rem;;
            color:#fff;
            transition:0.6s ease-out 0s;

            &:first-child{
                margin-left:0;
                background-color:var(--secondary-color);
            }

            &:nth-child(2){
                background-color:var(--tertiary-color);
            }

            &:nth-child(3){
                background-color:#0077b5;
            }

            &:last-child{
                margin-right:0;
                background-color:#405de6;
            }

            &:hover,
            &:focus,
            &:active{
                transform:rotateY(360deg);
            }
        }
    }

    &.active{
        right:0;
    }
}

#owlBrands{
    & .item{
        & figure{
            height:120px;
            display:flex;
            align-items:center;
            justify-content:center;

            & img{
                width:65%;
                height:auto;
                object-fit:contain;
                filter:grayscale();
                transition:0.5s ease;
            }
        }

        &:hover{
            & figure{
                & img{
                    filter:grayscale(0);
                }
            }
        }
    }
}

#owlTestimonials{
    & h4{
        margin-top:1.5rem;

        & span{
            display:block;
            font-family:var(--zeta-font);
            font-weight:400;
            font-size:.9rem;
            color:var(--zeta-theme-color-text);
            text-transform:capitalize;
        }
    }
}

#map{
    height:500px;
    background-color:#efefef;
}

@media(max-width:1199px){
    footer{
        & .text-align{
            &.right{
                text-align:center;
            }

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

@media(max-width:991px){
    footer{
        & figure{
            text-align:center;
        }

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

@media(max-width:767px){
    nav{
        & .nav-wrapper{
            & .bridge{
                a.launch-navi{
                    &.hyperspace{
                        &::before,
                        &::after,
                        & span{
                            background-color:var(--dark-color);
                        }
                    }
                }
            }
        }
    }

    .table-cell{
        & h6{
            margin-bottom:.5rem;
        }

        & p{
            margin-bottom:1.5rem;
        }

        & .background{
            margin:0;
            width:100%;
            opacity:1;
        }

        &:hover,
        &:focus,
        &:active{
            & .background{
                transform:rotateZ(0);
                scale:1;
            }
        }
    }
}