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

:root{
    --primary-color:#395382;
    --primary-color-rgb:57,83,130;
    --primary-alt-color:#002a5c;
    --primary-alt-color-rgb:0,42,92;
    --secondary-color:#62b5e5;
    --secondary-color-rgb:98,181,229;
    --secondary-alt-color:#25cdc7;
    --secondary-alt-color-rgb:37,205,199;
    --dark-color:#2f323c;
    --dark-color-rgb:47,50,60;
    --dark-alt-color:#272c49;
    --dark-alt-color-rgb:39,44,73;
    --light-color:#f8f9fa;
    --zeta-font:"Plus Jakarta Sans",sans-serif;
    --zeta-title-font:"Comfortaa",var(--zeta-font);
    --zeta-font-size:1rem;
    --zeta-theme-color-text:#575a7b;
}

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

nav{
    bottom:-100%;
    transition:bottom .5s ease-in-out;
    background-color:var(--dark-alt-color);

    & ul{
        margin:0;
        padding:0;
        height:inherit;
        list-style-type:none;
        display:grid;
        grid-template-columns:repeat(5,1fr);

        & li{
            height:inherit;

            & a{
                height:inherit;
                display:block;
                align-content:center;
                text-align:center;
                font-size:1.75rem;
                color:#fff;
                transition:0.3s ease-in-out;

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

h1,h2,h3{
    font-family:var(--zeta-title-font);
    font-weight:700;

    & span{
        display:inline-block;
        position:relative;
        z-index:1;

        &::before{
            content:"";
            width:100%;
            height:25%;
            background-color:rgba(var(--secondary-alt-color-rgb),.5);
            position:absolute;
            left:0;
            bottom:8px;
            z-index:-1;
        }
    }
}

h2{
    font-size:clamp(2rem,calc(1.5rem + 1.5vw),3rem);
    line-height:1;
}

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

    & a{
        width:fit-content;
        display:inline-block;
        font-weight:500;
        color:inherit;
        text-decoration:none;
        position:relative;

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

figure{
    margin:0;
    padding:0;
}

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

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

input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button{
    display: none;
    -webkit-appearance: none;
}

input[type="date"]{
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

form{
    & fieldset{
        padding:0;

        & label{
            margin-bottom:2px;
            padding-left:.1rem;
            font-size:.9rem;
        }

        & input,
        & select,
        & textarea{
            padding:0 1rem;
            height:75px;
            background-color:#fff;
            border-width:2px;
            border-color:var(--light-color);
            transition:border-color .4s;

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

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

aside{
    position:sticky;
    top:1rem;
}

header{
    position:relative;

    & h1{
        margin-bottom:0;
        color:#fff;
        text-transform:capitalize;
        font-size:clamp(2.5rem,calc(1.5rem + 2.5vw),5rem);
    }

    & h6{
        margin-top:var(--navigation-h-2);
        margin-bottom:1rem;
        font-size:1.15rem;
        color:#fff;

        & > i{
            margin-right:.25rem;
            color:var(--secondary-alt-color);
        }
    }

    & p{
        margin:1rem 0 2rem 0;
        font-size:1.1rem;
        color:#fff;
    }

    & > img.img-float{
        &:nth-of-type(1){
            bottom:5%;
            left:45%;
        }

        &:nth-of-type(2){
            top:30%;
            right:5%;
        }

        &:nth-of-type(3){
            bottom:-30px;
            left:-30px;
        }

        &:nth-of-type(4){
            top:15%;
            left:10%;
        }
    }
}

footer{
    position:relative;
    overflow:hidden;

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

        & > a{
            color:#fff;
        }
    }

    & #fooTop{
        border-bottom:1px solid rgba(255,255,255,.1);
        position:relative;

        & > .row{
            position:relative;
            z-index:1;

            & figure{
                & img{
                    width:100%;
                    max-width:260px;
                    height:auto;
                }
            }

            & .box-contact{
                & i{
                    font-size:2rem;
                    color:#fff;
                }

                & h4{
                    color:#fff;
                }
            }
        }

        &::before{
            content:"";
            width:45%;
            height:100%;
            background-color:var(--dark-alt-color);
            clip-path:polygon(0 0, 100% 0%, 84% 100%, 0% 100%);
            position:absolute;
            top:0;
            left:0;
            opacity:.75;
        }
    }

    & #fooBot{
        border-bottom:1px solid rgba(255,255,255,.1);

        & h5{
            margin-bottom:2rem;
            color:#fff;
        }

        & .social{
            margin-top:2rem;
        }

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

            & li{
                display:block;

                & a{
                    padding:.25rem 0 .25rem 1.5rem;
                    display:block;
                    color:rgba(255,255,255,.75);
                    text-decoration:none;
                    position:relative;
                    transition:color .3s ease;

                    &::before{
                        content:"\f061";
                        font-family:"Font Awesome 5 Pro";
                        font-weight:400;
                        color:var(--secondary-alt-color);
                        position:absolute;
                        left:0;
                    }

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

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

    & > .img-float{
        &:nth-of-type(1){
            filter:brightness(400%);
            bottom:-30px;
            left:-30px;
        }
    }
}

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

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

.solar{
    align-content:center;

    &.dark-degrade{
        --deg:-90deg;
        --per:70%;

        background:rgba(var(--dark-color-rgb),.95);
        background:linear-gradient(var(--deg),
            transparent, rgba(var(--primary-alt-color-rgb),.95) var(--per)
        );

        & h6{
            color:#fff;

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

        & h2{ color:#fff; }
    }
}

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

            & h2,h3,h4,h5,h6{
                color:#fff;
            }

            & h6{
                & > i{ color:var(--secondary-alt-color); }
            }

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

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

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

        &.light{
            background-color:var(--light-color);
            background-image:url(../img/shape-06.png);
            background-position:top right;
            background-size:auto;
            background-repeat:no-repeat;

            & h6{
                font-weight:800;

                & i{
                    color:var(--secondary-alt-color);
                }
            }
        }

        &.white{
            background-color:#fff;

            & h2,h3,h4,h5,h6{
                color:var(--dark-alt-color);
            }

            & h6{
                font-weight:800;

                & i{
                    color:var(--secondary-alt-color);
                }
            }

            & p{
                color:var(--zeta-theme-color-text);

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

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

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

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

    & > span{
        margin-left:.5rem;
        font-size:1.25rem;
    }

    &::before{
        content:"";
        width:100%;
        height:100%;
        border-radius:inherit;
        transform:skewX(-25deg);
        transition:.4s;
        opacity:1;
        position:absolute;
        top:0;
        left:90%;
        z-index:-1;
    }

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

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

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

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

    &:hover,
    &:focus,
    &:active{
        &::before{
            left:0;
            transform:scale(1,1);
        }
    }
}

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

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

.title-corner{
    width:fit-content;
    display:block;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    position:relative;
    
    & > span{
        position:relative;
        z-index:1;
    }

    &::after{
        content:"";
        width:26px;
        height:30px;
        clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 60% 0%);
        background-color:var(--secondary-alt-color);
        opacity:.3;
        position:absolute;
        top:50%;
        right:-5px;
        transform:translateY(-50%);
    }
}

.box{
    &.header{
        & > span{
            display:block;
            font-weight:800;
            text-transform:uppercase;
            line-height:1;
            
            &:first-of-type{
                margin-bottom:1.5rem;
                font-size:5rem;
            }

            &:last-of-type{
                font-size:clamp(2rem,calc(1.5rem + 2vw), 2.9rem);
                color:transparent;
                -webkit-text-stroke-width:1px;
                -webkit-text-stroke-color:inherit;
            }
        }
    }

    &.insure{
        padding:3rem 2rem;
        height:100%;
        background-color:#fff;
        border-radius:5px;
        transition:background-color .5s ease-in-out;

        & figure{
            margin-top:1rem;
            margin-bottom:1.5rem;
            position:relative;

            & img{
                transition:.5s ease;
            }

            &::before{
                content:"";
                width:60px;
                height:60px;
                border-radius:50%;
                background-color:rgba(var(--secondary-alt-color-rgb),.25);
                position:absolute;
                top:-15px;
                left:-15px;
            }
        }

        & h4,
        & p{ transition:color .5s ease; }

        & h4{ text-transform: capitalize; }

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

            & figure{
                & img{
                    filter:invert() brightness(10);
                }
            }

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

    &.info{
        padding:2rem 1rem;
        height:auto;
        background-color:#fff;
        border-radius:5px;
        border:2px solid var(--light-color);
        transition:.4s ease-in-out;
        
        & figure{
            width:fit-content;
            position:relative;

            &::before{
                content:"";
                width:60px;
                height:60px;
                border-radius:50%;
                background-color:rgba(var(--secondary-alt-color-rgb),.25);
                position:absolute;
                top:-15px;
                right:-15px;
            }
        }

        & h5{
            font-weight:700;
            text-transform: capitalize;
        }

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

.icon{
    --size:75px;
    --alpha:1;

    width:var(--size);
    height:var(--size);
    display:inline-block;
    align-content:center;
    border-radius:50%;
    border:2px solid transparent;
    font-size:2rem;
    color:#fff;
    text-align:center;

    & > i{
        margin-top:.5rem;
        display:block;
    }

    &.secondary{
        &.alt{
            background-color:rgba(
                var(--secondary-alt-color-rgb),
                var(--alpha)
            );
            border-color:var(--secondary-alt-color);
        }
    }

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

.social{
    --size:45px;

    & a{
        margin:0 .25rem;
        width:var(--size);
        height:var(--size);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        border:2px solid var(--secondary-alt-color);
        background-color:transparent;
        font-size:1.1rem;
        color:#fff;
        text-decoration:none;
        transition:background-color .5s ease-in-out;

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

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

        &:hover,
        &:focus,
        &:active{
            background-color:rgba(var(--secondary-alt-color-rgb),.5);
        }
    }
}

.img-float{
    animation:imgMove 4s infinite linear;
    animation-duration:5s;
    position:absolute;
    z-index:2;
}

#menuBar{
    box-shadow:none;
    background-color:transparent;
    border-bottom:1px solid rgba(255,255,255,.1);
    position:absolute;
    top:0;
    left:0;
    z-index:var(--zeta-index-1);

    & picture{
        & img{
            width:100%;
            max-width:250px;
            height:auto;
        }
    }

    & .menu{
        height:65px;
        display:flex;
        align-items:center;
        justify-content:end;

        & .buttons{
            margin:0;
            margin-right:.5rem;
            padding-left:0;
            height:inherit;
            list-style-type:none;
            display:flex;

            & li{
                display:block;
                height:100%;

                & a{
                    width:40px;
                    height:100%;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size:1.5rem;
                    color:#fff;
                    text-decoration:none;
                }
            }
        }

        & button.trigger-sidenav{
            margin-left:.5rem;
            padding:0;
            width:65px;
            height:inherit;
            background-color:transparent;
            border:0;
            outline:0;

            & > img{
                filter:invert();
            }
        }
    }
}

#testimonials{
    height:auto;
    position:relative;

    & > .solar{
        position:relative;
        top:0;
        left:0;
        z-index:1;

        & #swiperTestimonials{
            --swiper-theme-color:var(--secondary-alt-color);
            
            margin-top:2rem;

            & .swiper-wrapper{
                & .swiper-slide{
                    & p{
                        font-size:clamp(.9rem,calc(.75rem + .5vw), 1.5rem);
                        color:#fff;

                        & i{
                            margin-top:1rem;
                            display:block;
                            font-size:1.5rem;
                            font-style:normal;
                            color:rgba(255,255,255,.75);
                        }
                    }
                }
            }

            & .swiper-pagination{
                bottom:0;
                text-align:center;
            }
        }
    }

    & > .background{
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
    }
}

#about{
    & h4{ color:var(--secondary-alt-color); }
    & h5{ font-weight:700; }

    & .collage{
        height:100%;
        position:relative;

        & figure{
            &:first-child{
                margin-bottom:8rem;
                width:80%;
                height:80%;
                border-radius:5px;
            }

            &:nth-child(2){
                width:60%;
                height:60%;
                border-radius:5px;
                border:5px solid #fff;
                position:absolute;
                right:0;
                bottom:0;
            }

            &:last-of-type{
                width:20%;
                height:20%;
                border-radius:3px;
                border:3px solid #fff;
                position:absolute;
                right:5%;
                top:5%;
            }
        }

        & .img-float{
            left:5%;
            bottom:5%;
        }
    }

    & .rank{
        margin-bottom:.5rem;

        & i{
            margin:0 .15rem;
            font-size:1.15rem;
            color:var(--secondary-alt-color);

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

    & hr{
        margin:2rem 0;
        display:block;
        background-color:var(--light-color);
        opacity:1;
    }
}

@media(max-width:991px){
    footer{
        & #fooTop{
            & figure{
                margin-bottom:3rem;
                text-align:center;
            }
        }
    }
}

@media(max-width:767px){
    #menuBar{
        & .menu{
            & .buttons{
                display:none;
            }
        }
    }
}

@media(max-width:575px){
    nav{
        bottom:0;
    }

    footer{
        padding-bottom:var(--navigation-h-2);

        & #fooTop{
            &::before{
                width:100%;
            }

            & .box-contact{
                text-align:center;

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

    #menuBar{
        & .menu{
            & .buttons{
                margin-right:0.15rem;
                display:flex;
            }

            & .button{
                display:none;
            }

            & button.trigger-sidenav{
                margin-left:0;
                width:50px;
                height:50px;
            }
        }
    }
}

@keyframes imgMove{
    0% { transform:translate(0,0); }
    25% { transform:translate(10px,20px); }
    50% { transform: translate(30px 30px); }
    75% { transform:translate(20px,10px); }
    100% { transform:translate(0,0); }
}