@font-face {
    font-family: "Arial Rounded";
    src: url("arial-rounded-mt-bold.ttf");
}

a{
    text-decoration: none;
    
}

#whatsapp :hover{
    opacity: 0.5;
}



.a-links :hover{
    background-color: black;
}


body{
    margin: 0;
    padding: 0;
    color: rgb(0, 0, 0);
    font-family: "Arial Rounded";
    font-size: 3.5vh;
    overflow-x: hidden;
}.

h1{
    font-size: 7vh;
}

h2{
    font-size: 5vh;
}

ul{
    list-style-type: square;
    color: #00e7a1;
}

.main{
    display: flex;
    flex-direction: column;
}

.whatsapp{
    width: 12vh;
    height: 12vh;
    position: fixed;
    z-index: 2;
    margin-left: 92%;
    top: 85%;
}
.whatsapp > img{
    width: 100%;
    height: 100%;
}

.box{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto; 
    position: relative;
    padding-top: 2%;
    padding-bottom: 2%;
    animation: padrao 1.5s;
}

.minibox{
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
}

.text{
    gap: 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#produto{
    flex-direction: row;
    background-image: url("./img/produtoBackground.jpg");
    background-repeat: no-repeat;
    background-size: 200%;
    background-attachment: fixed;
}

#produto > .img > img{
    width: 500px;
    height: auto;
    position: relative;
    animation: padrao 1.5s;
    
}

#produto > .text > img{
    width: 200px;
    height: auto;
}

#produto > .text > h1 {
    color: white;
    display: flex;
    margin: 0;
}

#produto > .text > h2{
    justify-content: center;
    margin: 0;
    display: flex;
    width: 100%;
    color: white;
    margin-bottom: 20px;
}
#produto > .text > h2 > span{
    color: #00e7a1;
}

#funcionalidades{
    display: flex;
    flex-direction: column;
}

#funcionalidades > .minibox > .text > ul > li > span{
    color: black;
}
#funcionalidades > .minibox > .text > ul > h2{
    color: black;
}

#funcionalidades > .minibox > img{
    width: 500px;
    height: auto;
}

#diferenciais{
    background-image: url("./img/diferenciaisBackground.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
}

#diferenciais > h1{
    color: white;
}

#diferenciais > .minibox > img{
    width: 300px;
    height: 300px;
}

#diferenciais > .minibox > .text > ul{
    line-height: 20px;
    list-style-image: url("img/check.png");
}

#diferenciais > .minibox > .text > ul> li{
    margin-bottom: 10px;
    line-height: 30px;
}

#diferenciais > .minibox > .text > ul > li > span{
    color: white;
}

#clientes{
    display: flex;
    flex-direction: column;
}

#clientes > .minibox{
    display: flex;
    flex-direction: row;
    gap: 0px 30px;
    justify-content: center;
    align-items: center;
}

.cliente{
    display: flex;
    align-items: center;
    background-color: white;
    width: 13%;
    height: 250px;
    /*box-shadow: 0px 4px 10px black;
    border-radius: 10px;*/
    padding: 20px;
    position: relative;
}

.cliente > img{
    width: 100%;
    height: auto;
}

#sobrenos{
    background-image: url("img/sobrenosBackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    flex-direction: column;
    gap: 0px 20px; 
    color: white;
}

#sobrenos > .minibox{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0px 50px; 
}

#sobrenos > .minibox > .img > img{
    width: 600px;
    height: auto;
    position: relative;
    animation: padrao 1.5s;
    
}

#sobrenos > .minibox > .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
    gap: 20px 0px;
}

#sobrenos > .minibox > .text > p{
    font-size: 18pt;
}

#sobrenos > .minibox > .text > h1 {
    width: 100%;
    display: flex;
    margin: 0;
}

#sobrenos > a{
    display: flex;
    justify-content: center;
    width: 100%;
}

#botaoSobrenos{
    width: 70%;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}

footer{
    display: flex;
    height: 100px;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}

#site{
    font-size: 4vh;
}

.botao{
    display: flex;
    background-color: #00e7a1;
    color: white;
    width: 400px;
    height: 100px;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    text-align: center;
}

@media(max-width: 1350px){
    h1{
        font-size: 5vw;
        margin: 0;
        padding: 10px;
        text-align: center;
        justify-content: center;
    }

    h2{
        font-size: 4vw;
    }

    .whatsapp{
        width: 20vw;
        height: 20vw;
        margin-left: 75%;
    }

    .box{
        flex-direction: column;
        height: auto;
        width: 100%;
        padding-top: 10%;
        padding-bottom: 10%;
    }
    .minibox{
        flex-direction: column;
        height: auto;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .botao{
        width: 70vw;
    }
    
    #produto{
        flex-direction: column;
        background-size: cover;
        background-attachment: initial;
        height: auto;
    }
    #produto > .img > img{
        width: 70vw;
        height: auto;
    }

    #funcionalidades{
        height: auto;
    }

    #funcionalidades > .minibox > img{
        width: 400px;
        height: auto;
    }
    
    #diferenciais{
        background-size: cover;
        background-attachment: initial;
        height: auto;
    }

    #clientes{
        height: auto;
    }

    #clientes > .minibox{
        flex-direction: column;
        gap: 20px 0px;
    }

    .cliente{
        width: 70%;
        height: auto;
    }


    #sobrenos{
        flex-direction: column;
        height: auto;
        gap: 20px 0px;

    }

    #sobrenos > .minibox{
        flex-direction: column;
        height: auto;
        gap: 20px 0px;
    }

    #sobrenos > .minibox > .text{
        order: 1;
        width: 90%;
        text-align: center;
    }

    #sobrenos > .minibox > .text > p{
        text-align: center;
    }

    #sobrenos > .minibox > .text > h1{
        justify-content: center;
    }

    #sobrenos > .minibox > .img{
        order: 2;
    }

    #sobrenos > .minibox > .img > img{
        width: 50vw;
        height: auto;
    }

    #botaoSobrenos{
        font-size: 100%;
        height: 13vh;
        width: 70vw;
    }

    footer{
        text-align: center;
    }
}

@keyframes padrao{
    0%{
        top: 100px;
        opacity: 0;
    }
    100%{
        top: 0;
        opacity: 100%;
    }
}