@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto+Condensed:wght@100..900&display=swap');

@font-face{
    font-family:'Atmospheric';
    src:url('../fonts/atmospheric/atmospheric.woff') format('woff'),
        url('../fonts/atmospheric/atmospheric.svg#Atmospheric') format('svg'),
        url('../fonts/atmospheric/atmospheric.eot'),
        url('../fonts/atmospheric/atmospheric.eot?#iefix') format('embedded-opentype'); 
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/100.otf') format('opentype');
    font-weight:100;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/200.otf') format('opentype');
    font-weight:200;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/300.otf') format('opentype');
    font-weight:300;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/400.otf') format('opentype');
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/500.otf') format('opentype');
    font-weight:500;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/600.otf') format('opentype');
    font-weight:600;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/700.otf') format('opentype');
    font-weight:700;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/800.otf') format('opentype');
    font-weight:800;
    font-style:normal;
}

@font-face {
    font-family:'Dovens';
    src:url('../fonts/dovens/900.otf') format('opentype');
    font-weight:900;
    font-style:normal;
}

:root{
    --primary-color:#ec4c0c;
    --primary-color-rgb:236,76,12;
    --secondary-color:#f48c06;
    --secondary-color-rgb:244,140,6;
    --tertiary-color:#ffba08;
    --tertiary-color-rgb:255,186,8;
    --dark-color:#040404;
    --dark-color-rgb:4,4,4;
    --zeta-font:"Roboto Condensed",serif;
    --zeta-font-size:1rem;
    --zeta-title-font:"Dovens","Atmospheric",sans-serif;
}

/*#FF641A*/

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

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

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

        & .modules{
            & ul{
                & li{
                    & a{
                        margin:0 .75rem;
                        padding:0;
                        font-family:"Oswald";
                        font-size:1.1rem;
                        font-weight:500;
                        text-transform:uppercase;
                        color:#fff;
                        position:relative;
                        transition:none;

                        &::before{
                            content:"";
                            width:3px;
                            height:40%;
                            background-color:var(--secondary-color);
                            position:absolute;
                            top:calc(50% - 1px);
                            left:-1px;
                            transform:translateY(-50%) rotate(20deg);
                            opacity:0;
                            transition:.5s ease;
                        }

                        &:hover,
                        &:focus,
                        &:active{
                            transition:.4s ease;
                            background-color:transparent;
                            color:var(--secondary-color);
                        }
                    }

                    &.current{
                        & a{
                            &::before{
                                opacity:1;
                            }
                        }
                    }
                }
            }
        }

        & .button{
            height:60px;
        }

        & .bridge{
            & a.launch-navi{
                margin-left:1.5rem;

                &.hyperspace{
                    &::before,
                    &::after,
                    & span{
                        width:80%;
                        height:3px;
                        background-color:#fff;
                        border-radius:0;
                    }
                }
            }
        }
    }

    &.active{
        background-color:#fff;
        box-shadow:0 0 1rem rgba(0,0,0,0.1);

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

                            &:hover,
                            &:focus,
                            &:active{
                                transition:.4s ease;
                                color:var(--secondary-color);
                            }
                        }
                    }
                }
            }

            & .bridge{
                & a.launch-navi{
                    margin-left:1.5rem;

                    &.hyperspace{
                        &::before,
                        &::after,
                        & span{
                            background-color:var(--dark-color);
                        }
                    }
                }
            }
        }
    }
}

figure{
    margin:0;
}

h1{
    font-family:var(--zeta-title-font);
    font-size:calc(2rem + 3vw);
    line-height:1;
    text-transform:uppercase;
}

h2{
    margin-bottom:1rem;
    font-family:var(--zeta-title-font);
    font-size:calc(1.345rem + 2vw);
    font-weight:500;
    color:var(--dark-color);
    line-height:1;
    text-transform:uppercase;
}

h4,h5{
    font-family:"Oswald";
    font-weight:500;
    color:var(--dark-color);
    text-transform:uppercase;   
}

h6{
    margin-bottom:1rem;
    padding-left:5px;
    width:auto;
    display:inline-block;
    font-family:"Oswald";
    font-weight:500;
    font-size:1.1rem;
    text-transform:uppercase;
    color:var(--dark-color);
    position:relative;

    &::before{
        content:"";
        width:3px;
        height:150%;
        background-color:var(--primary-color);
        position:absolute;
        top:50%;
        left:4.5px;
        transform:translateY(-50%) rotate(20deg);
    }
}

p{
    font-weight:350;

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

    & a{
        display:inline-block;
        font-weight:500;
        text-decoration:none;
        color:var(--dark-color);
        position:relative;

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

select,
::picker(select){
    appearance: base-select;
}

form{
    --input-height:80px;

    & fieldset{
        padding:0;

        & input,
        & select,
        & textarea{
            padding:0 1rem;
            height:var(--input-height);
            border-radius:0;
            border-width:2px;
            background-color:transparent;
            font-weight:350;
            transition:.3s ease;

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

        & select{
            display:flex;
            align-items:center;
        }

        & textarea{
            padding:1rem;
            resize:none;
        }
    }

    & .button{
        height:var(--input-height);
    }

    &.dark{
        & fieldset{
            & input,
            & select,
            & textarea{
                border-color:rgba(255,255,255,0.1);
                color:#fff;

                &::placeholder{
                    color:#666;
                }

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

        & option{
            height:45px;
            background-color:#111;
            border:0;
            color:#fff;

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

        &::picker(select){
            border:0;
        }
    }
}

table{
    width:100%;

    & tr{

        & th,
        & td{
            height:inherit;
            font-weight:350;
        }

        & th{
            padding:1.75rem 2rem;
            font-weight:500;
            text-transform:uppercase;
        }

        & td{
            padding:1rem 2rem;
        }
    }

    &.dark{
        border:1px solid rgba(255,255,255,0.1);

        & tr{
            border:0;

            &:nth-child(even){
                background-color:#111;
            }

            & th{
                background-color:#000;
                color:#fff;
            }

            & td{
                color:#ccc;
            }

            &.active{
               border-top:2px solid var(--primary-color);
               border-bottom:2px solid var(--primary-color);

                & td{
                    font-weight:400;
                    color:#fff;

                    &:first-child{
                        border-left:2px solid var(--primary-color);
                    }

                    &:last-child{
                        border-right:2px solid var(--primary-color);
                    }
                }
            }
        }
    }
}

map{
    width:100%;
    height:600px;
    display:block;
    background-color:#efefef;
}

footer{
    & menu{
        margin:2rem 0 1rem 0;
        padding:0;
        display:block;
        list-style-type:none;

        & li{
            margin:0 .5rem;
            width:auto;
            display:inline-block;

            & a{
                width:auto;
                height:35px;
                display:inline-flex;
                align-items:center;
                font-family:"Oswald";
                font-weight:500;
                font-size:1.1rem;
                color:#fff;
                text-transform:uppercase;
                text-decoration:none;
                transition:.3s ease;
                position:relative;

                &::before{
                    content:"";
                    width:3px;
                    height:100%;
                    background-color:var(--secondary-color);
                    position:absolute;
                    top:calc(50% - 1px);
                    left:-1px;
                    transform:translateY(-50%) rotate(20deg);
                    opacity:0;
                    transition:.5s ease;
                }

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

            &.current{
                & a{
                    &::before{
                        opacity:1;
                    }
                }
            }
        }
    }

    & .social{
        & a{
            margin:0 .25rem;
        }
    }
}

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

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

.parallax{
    height:600px;

    & .solar{
        & h2{
            color:#fff;
        }

        & p{
            color:#fff;
            font-size:1.1rem;
        }
    }
}

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

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

            & h2{
                color:#fff;
            }

            & p{
                color:#ccc;

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

    &.image{
        width:100%;
        height:100%;
        overflow:hidden;
        position:relative;

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

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

.button{
    --opacity:.25;
    
    padding:0 2rem;
    width:fit-content;
    height:70px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color:transparent;
    border:2px solid #fff;
    border-radius:0;
    font-family:"Oswald","Roboto Condensed",sans-serif;
    font-weight:500;
    font-size:1.1rem;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    transition:.4s ease;
    overflow:hidden;
    position:relative;
    z-index:1;

    &::before{
        content:"";
        width:0;
        height:500%;
        background-color:rgba(255,255,255,var(--opacity));
        position:absolute;
        top:50%;
        left:50%;
        z-index:-1;
        transform:translateX(-50%) translateY(-50%) rotate(45deg);
        transition:.3s linear;
    }

    & span{
        margin-top:.2rem;
        margin-left:.6rem;
    }

    &.full-width{
        width:100%;
    }

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

        &::before{
            background-color:rgba(
                var(--primary-color-rgb),
                var(--opacity)
            );
        }

        &.dark-text{
            color:var(--dark-color);

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

    &:hover,
    &:focus,
    &:active{
        &::before{
            width:100%;
        }

        &.dark-text{
            color:#fff;
        }
    }
}

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

.box{
    padding:2rem 1rem;
    position:relative;
    z-index:1;

    &::before{
        content:"";
        width:100%;
        height:100%;
        border:2px solid #eee;
        transform:skewY(-4deg);
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
    }

    & h4{
        color:#fff;
    }

    & h5{
        color:#fff;
    }

    &.dark{
        &::before{
            border-color:rgba(255,255,255,0.1);
        }
    }
}

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

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

        & span{
            position:relative;
            z-index:1;
        }

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

.preloader{
    width:50px;
    aspect-ratio:1;
    border-radius:50%;
    background: 
        radial-gradient(farthest-side,var(--secondary-color) 94%,#0000) top/8px 8px no-repeat,
        conic-gradient(#0000 30%,var(--secondary-color));
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
            mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation:spinner 1s infinite linear;
}

#swiperTestimonials{
    & .swiper-slide{
        & p{
            margin-bottom:1.5rem;
        }

        & h4{
            margin-bottom:0.25rem;
        }

        & .ranking{
            & span{
                margin:0 .15rem;
                font-size:1.5rem;
                color:var(--secondary-color);

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

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

#swiperMemberships{
    & .swiper-slide{
        padding:1.75rem 0;

        & .box{
            padding:4rem 1.5rem;
            text-align:center;

            & h2{
                margin:1.5rem 0;
                font-family:"Atmospheric";
                font-size:2.5rem;
                color:var(--primary-color);
            }

            & h4,
            & h5{
                margin:0;
            }

            & ul{
                margin:1rem 0;
                padding:0;

                & ol{
                    padding:0;
                    color:var(--zeta-theme-color-text);

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

            & p{
                margin:1rem 0;
                font-size:1.1rem;
            }
        }
    }
}

@media(max-width:1199px){
    nav{
        & .nav-wrapper{
            & .button{
                margin-left:auto;
            }
        }
    }
}

@media(max-width:575px){
    nav{
        & .nav-wrapper{
            & .button{
                display:none;
            }
        }
    }

    #swiperTestimonials{
        & .swiper-slide{
            text-align:center;

            & figure{
                margin-bottom:1rem;
            }
        }
    }
}

@keyframes spinner{ 
  100%{
        transform:rotate(1turn);
    }
}