@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
:root{
    --blue:#4788ff;
    --purple:#5100ffad;
    --orange:#f5af19;
    --gradient:linear-gradient(120deg, var(--orange), var(--purple));
    --gradient2 : linear-gradient(to left top, #002c6f, #832f81, #d7396e, #ff7144, #ffbc00);
    --gradient3: linear-gradient(to left, #f12711, #f5af19); 
}

*{
    font-family: 'Poppins', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none; border:none;
    
}

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

html{
    font-size: 62.5%;
    overflow-x: hidden;
}

body{
    background:#f9f9f9;
}

section{
    /* min-height: 100vh; */
    padding:0 9%;
    padding-top: 7.5rem;
    padding-bottom: 2rem;
}

.btn{
    display: inline-block;
    margin-top: 1rem;
    padding:.8rem 3rem;
    border-radius: 5rem;
    background:var(--gradient3);
    font-size: 2rem;
    color:#fff;
    cursor: pointer;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    transition: all .3s linear;
}

.btn:hover{
    transform: scale(1.1);
}

.heading{
    text-align: center;
    background:var(--blue);
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 3.5rem;
    text-transform: uppercase;
    padding:4rem;
}

header{
    position: fixed;
    top:0; left:0;
    width:100%;
    background:#fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    padding:2rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

header .logo{
    font-size: 4rem;
    
    font-weight: semibold;
    text-shadow: 0 0.5rem 0.5rem rgb(0 0 0 / 25%);
    color:var(--blue);
}

header .logo span{
    font-size: 3.5rem;
    color:coral
}

header .navbar a{
    font-size: 1.7rem;
    margin-left: 2rem;
    color:var(--blue);
}

header .navbar a:hover{
    color:var(--orange);
}

header input{
    display: none;
}

header label{
    font-size: 3rem;
    color:var(--blue);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}


/* ----------------------------------------------------------------- */
/* ------------------------ HOME SECTION ------------------------ */

.home
{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    
}
.home .home-img
{
    width: 100%;
    height: 100%;
    padding: 10%;
    animation: movecel 3s ease-in-out infinite alternate;
    
}
@keyframes movecel {
    0%,100%{transform: translateY(10px);}
    50%{transform: translateY(-10px);}
}

.content
{   
    width: 50%;
    height: 100%;
    font-size: 1.8rem;
    margin-left: 0%;
}
.home .content
{   
    width: 50%;
    height: 100%;
    font-size: 1.8rem;
    margin-left: 7%;
}
.home h1{
    color: #333;
    text-transform: uppercase;
}
.home span{
    font-weight: bold;
}
.home p{color: #666;}
/* ----------------------------------------------------------------- */
.wave
{
    min-height: 44vh;
    width: 100%;
    position: absolute;
    
}
.wave1{
    min-height: 200px;
    position: absolute;
    max-width: 83%;
    width: 100%;
    
    left: 0;
    margin-left: 9%;
    overflow: hidden;
}
.wave2{
    min-height: 283px;
    position: absolute;
    max-width: 83%;
    width: 100%;
    left: 0;
    margin-top: -8%;
    margin-left: 9%;
    overflow: hidden;
}
.wave3{
    min-height: 262px;
    position: absolute;
    max-width: 83%;
    width: 100%;
    left: 0;
    margin-top: -5%;
    margin-left: 9%;
    overflow: hidden;
}
.onda{
    background: url(../image/vetorimg.svg) repeat-x;
    position: absolute;
    bottom: 0;
    width: 6400px;
    height: 198px;
    animation: wave 80s linear infinite;
    transform: translate3d(0, 0, 0);
}

.onda2{
    background: url(../image/wave2.svg) repeat-x;
    position: absolute;
    bottom: 0;
    width: 700px;
    height: 247px;
    animation: wave2 10s ease-in infinite alternate;
}
.onda3{
    background: url(../image/wave3.svg) repeat-x;
    position: absolute;
    bottom: 0;
    width: 2484px;
    height: 247px;
    animation: wave3 30s infinite linear;
    transform: translate3d(0, 0, 0);
}
  @keyframes wave {
    0% {
     transform: translateX(0);
    }
    100% {
        transform: translateX(-1600px);
    }
  }
  @keyframes wave2 {
    0% {
     transform: translateX(-550px);
    }
    100% {
        transform: translateX(1500px);
    }
  }
  @keyframes wave3 {
    0% {
     transform: translateX(0px);
    }
    100% {
        transform: translateX(-1810px);
    }
  }
  /* ----------------------------------------------------------------- */
/*------------------------------- FEATURES -------------------------------*/
.features
{
    padding: 0 10%;
    padding-top: 16.5rem;
}  
.features .linha
{   
    width: 100%;
    margin-top: -7%;
    /* position: absolute; */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 0.5px rgb(0 0 0 / 25%);
}
.features .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.features .box-container .box{
    flex:1 1 30rem;
    position: relative;
    background:#fff;
    border-radius: .5rem;
    border:.1rem solid rgba(0,0,0,.2);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    margin:1.5rem;
    padding:3rem 2rem;
    border-radius: .5rem;
    text-align: center;
    transition: .2s linear;
}
.box-container:hover .box{
    filter: blur(20px);
    transform: scale(0.9);
    opacity: 0.5;

}
.box-container .box:hover{
    filter: blur(0px);
    transform: scale(1.1);
    opacity: 1;

}
.features .box-container .box img{
    height: 15rem;
}

.features .box-container .box h3{
    font-size: 2em;
    color:#333;
    padding-top: 1rem;
}

.features .box-container .box p{
    font-size: 1.4em;
    color:#666;
    padding: 1rem 0;
}
/* ----------------------------------------------------------------- */
/*------------------------------- ABOUT -------------------------------*/

.about{
    background:url(../images/about-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 3rem;
    padding-top: 10%;
}
.about .linha
{   
    width: 100%;
    /* position: absolute; */
    margin-top: -7%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 0.5px rgb(0 0 0 / 25%);
}
.about .column{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.about .column .image{
    flex:1 1 40rem;
}

.about .column .image img{
    width:100%;
}

.about .column .content{
    flex:1 1 40rem;
}

.about .column .content h3{
    font-size: 3rem;
    color:#666;
}

.about .column .content p{
    font-size: 1.5rem;
    color:#666;
    padding:1rem 0;
    text-align: justify;
}

.about .column .content .buttons a:last-child{
    margin-left: 0rem;
}

.subirBox{
    position: fixed;
    
    right: 2%;
    bottom: 5%;
}

.btn-subir{
    
    width: 50px;
    height: 50px;
    background: hsl(189, 60%, 60%);
    /* border-color: #f5af19; */
    border: 5px outset #5cc4d6;
    box-shadow: 1px 1px 1px #333;
    border-radius: 5px;
    text-align: -webkit-center;
    transform: rotate(45deg);
}
.sbtn{
    font-size: 4.4em;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: -webkit-center;
    top: -10%;
    color: #ff7144;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.24);
    animation: moversubir 1s ease-in-out alternate infinite;

}
@keyframes moversubir {
    0%{transform: translateY(6px);}
    100%{transform: translateY(-6px);}
}



/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */

/* media queries  */

@media (max-width:1200px){
    
    html{
        font-size: 55%;
    }

}

@media (max-width:991px){
    
    section{
        padding:0 3%;
        padding-top: 7.5rem;
        padding-bottom: 2rem;
    }
    .wave2{
        min-height: 240px;
    }

}

@media (max-width:768px){

    header label{
        visibility: visible;
        opacity: 1;
    }

    header .navbar{
        position: absolute;
        top:100%; left: 0;
        width:100%;
        background:#fff;
        padding:1rem 2rem;
        border-top: .1rem solid rgba(0,0,0,.2);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        transition: .2s linear;
    }

    header .navbar a{
        display: block;
        margin:2rem 0;
        font-size: 2rem;
    }

    header input:checked ~ .navbar{
        transform: scaleY(1);
        opacity: 1;
    }

    header input:checked ~ label::before{
        content:'\f00d';
    }

    .home{
        flex-flow: column-reverse;
    }

    .home .image img{
        width:100%;
    }

    .home .content {
        width: 80%;
        margin-left: 0%;
    }

    .home .content p{
        text-align: justify;
        font-size: 2rem;
    }

    .about{
        padding: 19% 13%;
        /* padding-bottom: 0; */
        background-position: right;
    }
    .about .buttons
    {
        font-size: 8pt;
    }
    .about .btn {
        margin-top: 3rem;
        margin: 15% 0;
        padding: 17px;
        font-size: 1.5em;
    }
    .newsletter p{
        width:auto;
    }
    .wave2 {
        min-height: 204px;
    }
    .home .home-img {padding: 0px 7%;}
    .btn {
        display: block;
        margin-top: 5rem;
        text-align: center;
        font-size: 2em;
        padding: .8rem 9rem;
    }
    
}

@media (max-width:450px){
    
    html{
        font-size: 50%;
    }

    .home .content {
        width: 80%;
        margin-left: 0%;
    }

    .home .content p{
        text-align: justify;
        font-size: 2rem;
    }
    .btn {
        margin-top: 3rem;
        padding: 0;
        font-size: 1.5em;
    }
    .features {
        padding-top: 10rem;
    }
    .about .column .content .buttons a{
        width:100%;
        text-align: center;
    }

    .about .column .content .buttons a:last-child{
        margin: 1rem 0;
    }

}