style.css

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');
/*font-family: 'Sora', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*font-family: 'Inter', sans-serif;*/

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body{
    overflow-x: hidden;
}

nav{
    height: 7vh;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 1px 10px rgba(0, 102, 255, 0.1);
}

header{
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 100%;
}

ul{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    display: flex;
}

li{
    padding: 0 40px;
}

span a{
    border: none;
}

span a img:hover{
    filter: drop-shadow(0px 1px 10px rgba(125, 174, 248, 0.5));
}

a{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.2em;
    text-decoration: none;
    color: #6E7275;
}

a:hover{
    text-decoration: underline 2px;
}

.mobile-menu{
    display: none;
    cursor: pointer;
}

.mobile-menu div{
    width: 32px;
    height: 3px;
    background-color: #293145;
    margin: 8px;
    transition: 0.3s;
}

#inicio{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 93vh;
    background-color: #EFF8FF;
}

#inicio div{
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 100%;
}

#inicio div div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

#inicio div div span{
    display: flex;
    flex-direction: column;
}

#inicio div div h1{
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 4em;
    color: #293145;
}

#inicio div div button{
    width: 200px;
    height: 56px;
    margin-top: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 1.2em;
    border-radius: 50px;
    background: #0F9AFE;
    color: #fff;
    box-shadow: 1px 3px 4px rgba(19, 125, 224, 0.5);
}

#inicio div div button:hover{
    cursor: pointer;
    background: #0d7ecf;
}

#inicio div article{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#inicio div article img{
    width: 80%;
}

#funcionalidades{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#funcionalidades h2{
    text-align: center;
    padding: 40px 0;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 3em;
    color: #293145;
}

.funcionalidade{
    display: inline-flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: center;
    width: 300px;
    height: 300px;
    margin: 0 20px 40px 20px;
}

#funcionalidades article{
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    justify-content:space-around;
    align-items: center;
    margin: 0 0 5% 0;
}

.funcionalidade img{
    width: 25%;
}

.funcionalidade h3{
    font-family: 'Sora', sans-serif;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
    color: #293145;
}

.funcionalidade p{
    font-family: 'Inter', sans-serif;
    text-align: center;
    font-size: 1.4em;
    font-weight: 400;
    color:#6E7275;
}

#app{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #EFF8FF;
}

#app div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 38px 0 38px 0;
}

#app div div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 780px;
}

#app div div span{
    display: flex;
    flex-direction: column;
    width: 100%;
}

#app div div h2{
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 2.5em;
    color: #293145;
}

#app div div p{
    width: 70%;
    margin-top: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    line-height: 180%;
    font-size: 1.2em;
    color: #6E7275;
}

#app div article{
    display: flex;
    justify-content: center;
    align-items: center;
}

#app div div span span{
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#app div div span span img{
    margin-right: 30px;
}

#app div article img{
    height: 100%;
}

/*Estilização dos planos*/
#planos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#planos div{
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    width: 80%;
    margin: 0 0 5% 0;
}

#planos div span{
    text-align: center;
    width: 35%;
    margin: 50px 0 0 0;
}

#planos div span h2{
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 2.5em;
    color: #293145;
    text-align: center;
}

#planos div span p{
    font-family: 'Inter', sans-serif;
    margin: 16px 0 0 0;
    color: #6E7275;
}

#planos div article{
    display: flex;
    margin: 95px 0 0 0;
    width: 100%;
    justify-content: space-between;
}

#planos div article div{
    display: flex;
    justify-content: center;
    width: 370px;
    height: 470px;
    background: #EFF8FF;
    border-radius: 8px;
}

#planos div article div h3{
    font-family: 'Sora', sans-serif;
    font-size: 1.7em;
    font-weight: 600;
    color: #293145;
    margin: 0 0 59px 0;
}

#planos div article div p{
    width: 80%;
    text-align: center;
    font-family: 'Inter', sans-serif;
    margin: 47px 0 59px 0;
    color: #6E7275;
}

#planos div article div button{
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.2em;
    width: 230px;
    height: 43px;
    border-radius: 50px;
    box-shadow: 1px 3px 4px rgba(19, 125, 224, 0.5);
    color:#fff;
    background: #0F9AFE;
}

#planos div article div button:hover{
    cursor: pointer;
    background: #0d7ecf;
}

/*CARD PREFERIDO*/
#planos div article #preferido{
    background: #293145;
}

#planos div article #preferido h3{
    font-family: 'Sora', sans-serif;
    font-size: 1.7em;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 13px 0;
}

#planos div article #preferido p{
    color: #DBDBDB;
}

#planos div article #preferido div{
    width: 164px;
    height: 27px;
    border-radius: 15px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.8em;
    letter-spacing: 3px;
    margin: 0px 0 32px 0;
    color: #ffffff;
    background:#0F9AFE;
}

/*Contato*/
#contato{
    width: 100%;
    height: 50vh;
    background: url(imagens/Contato/notebook.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#contato div{
    width: 100%;
    height: 100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(41, 49, 69, 0.7);
}

#contato div h2{
    font-family: 'Sora', sans-serif;
    color: #FFFFFF;
    font-size: 2.5em;
}

#contato div p{
    width: 30%;
    margin: 1% 0 7% 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    color: #DBDBDB;
    font-size: 1em;
}

#contato div span{
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
}

input{
    width: 15%;
    border-bottom: 1px solid #FFFFFF;
    background: none;
    padding: 10px 10px 10px 10px ;
    margin: 0 2% 0 0;
    font-size: 1em;
    color: #fff;
    outline: none;
}

input::placeholder{
    font-family: 'Inter', sans-serif;
    color: #fff;
}

#contato div span button{
    font-family: 'Inter', sans-serif;
    width: 118px;
    height: 38px;
    background: #0F9AFE;
    color: #fff;
    font-size: 1em;
    border-radius: 50px;
}

#contato div span button:hover{
    background: #0d7ecf;
    cursor: pointer;
}

footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 10vh;
    font-family: 'Sora', sans-serif;
    color:#293145 ;
}

@media (max-width:1400px){

    .funcionalidade{
        height: 200px;
    }

    #funcionalidades article{
        height: 50%;
    }

    .funcionalidade img{
        width: 20%;
    }
    
    .funcionalidade h3{
        font-size: 1.3em;
    }
    
    .funcionalidade p{
        font-size: 1.2em;
    }

    #app div div p{
        margin-top: 18px;
        width: 100%;
    }

    #app div div span span{
        margin-top: 18px;
    }

    #app div article img{
        width: 50%;
    }

    #planos div article div{
        width: 270px;
        height: 350px;
    }

    #planos div article div h3{
        margin: 0 0 59px 0;
    }
    
    #planos div article div p{

        margin: 30px 0 20px 0;
    }

    #planos div article{
        margin: 50px 0 0 0;
    }
}

@media (max-width:1000px){

    body{
        overflow-x: hidden;
    }

    .mobile-menu{
        display:block;
        cursor: pointer;
    }

    .nav-list{
        display: flex;
        position: absolute;
        top: 7vh;
        right: 0;
        width: 100vw;
        height: 93vh;
        background:#293145 ;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.3s ease-in;
    }

    .nav-list li a{
        color: #fff;
    }

    .nav-list.active{
        transform: translateX(0);
    }

    @keyframes navLinkFade {
        from{
            opacity: 0;
            transform: translateX(50px);
        }
        to{
            opacity: 1;
            transform: translateX(0);
        }
    }

    #inicio div div span h1{
        font-size: 3em;
    }

    #inicio div article{
        display: none;
    }

    #planos div article{
        justify-content: center;
        flex-wrap: wrap;
    }

    #planos div article div{
        margin: 0 20px 40px 20px;
    }

    ul{
        display: none;
    }

    #planos div span{
        width: 100%;
    }

    #contato div span{
        flex-direction: column;
        align-items: center;
    }

    #contato div p{
        width: 80%;
    }

    input{
        width: 60%;
        margin: 0 0 5% 0;
    }
}

.mobile-menu.active .line1{
    transform: rotate(-45deg) translate(-8px, 10px);
}

.mobile-menu.active .line2{
    opacity: 0;
}

.mobile-menu.active .line3{
    transform: rotate(45deg) translate(-5px, -8px);
}