* {
    box-sizing: border-box; 
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;

}
body{
    /* background-color: #4cbcb42a; */
    margin: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;    


}

.container-modal-menu{
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: rgb(233, 233, 233);
    margin-top: 10vh;
}

.menu-modal{
    width: 100%;
}


.menu-modal ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.menu-modal ul li{
    list-style: none;
    display: flex;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 3rem;
}


.menu-modal ul li:nth-child(-n+5){
    margin: 1rem 0 1rem 0;
}

.menu-modal ul li:hover{
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
}

.menu-modal ul li a {
   text-decoration: none;
   color: black;

}


.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.container-menu{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    margin-bottom: 1rem;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
}

.logo{
    width: 30%;
    margin: 2rem 0 2rem 2rem;
}

.logo img {
    width: 50%;
    height: auto;
}

.menu{
    display: flex;
    width: 70%;
    font-size: 2rem;
    justify-content: right;
    margin-right: 2rem;

}
.menu ul {
    display: flex;
    padding: 0;

}

.menu ul li{
    list-style: none;
    display: flex;
    cursor: pointer;
}

.menu ul li a{
    text-decoration: none;
    color: black;
}

.menu ul li:nth-child(-n+4){
    margin-right: 3rem;
}

.menu-mobile img{
    display: none;
    width: 4rem;
    height: 4rem;
}

.container-button-login{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 10%;
    cursor: pointer;
}

.container-button-login img{
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
}

.container-button-login p{
    font-size: 1.7rem;
}

.container-button-cadastro{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-right: 2rem;
    width: 15%;
}

.container-button-cadastro button{
    font-size: 2rem;
    background-color: #4EBBB5;
    color: white;
    box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 
    padding: 1.5rem;
    border-radius: 2rem;
    border: none;
    cursor: pointer;
}
.container-button-cadastro button:hover{
     box-shadow: 0px 0px 10px 1px #4ebbb5; 


}








.section-about{
    display: flex;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(135deg, white 50%, #4EBBB5 50%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    border-radius: 2rem;

}
.about{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
}
.title-about{
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    width: 45%;
    justify-content: center;

}
.title-about img {
    width: 30%;
    height: auto;
    margin: 0 0 2rem 5rem;
    cursor: pointer;    
}

.title-about h1{
   margin: 1rem 0 0 0;
    
}

.img-about{
    display: flex;
    justify-content: center;
    width: 45%;
    font-size: 1.5rem;

}

.img-about img{
    width: 55%;
    height: auto;
    border-radius: 2rem;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);

}

.btnAction{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 50%;
}

.btnAction button{
    font-size: 2rem;
    border-radius: 2rem;
    box-shadow: 0px 0px 10px 1px #4ebbb5; 
    padding: 1.5rem;
    color: black;
    /* background-color: #4cbcb4; */
    background-color: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
}
.btnAction button:hover{
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 

}

.section-apresentation{
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #4ebbb500;
    /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164); */


}

.apresentation{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;

}

.video-apresentation{
    display: flex;
    justify-content: center;
    width: 45%;
    height: auto;
}


.title-apresentation{
    display: flex;
    font-size: 2rem;
    width: 50%;
    justify-content: left;
    flex-direction: column;

}

.title-apresentation h1{
   margin: 1rem 0 0 0;

    
}

.title-apresentation .btnAction{
    width: 100%;
    justify-content: left;

}

.title-apresentation .btnAction button{
    font-size: 2rem;
    background-color: #4EBBB5;
    color: white;
    box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 


}

.title-apresentation .btnAction button:hover{
    box-shadow: 0px 0px 10px 1px #4ebbb5; 

}

.section-features{
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(-135deg, white 50%, #4EBBB5 50%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    width: 100%;
    border-radius: 2rem;


}

.features{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;

}

.content-features{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}

.text-features {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title-features{
    width: 100%;
    justify-content: center;
    display: flex;
}

.title-features h1{
    font-size: 2.5rem;

}

.content-features{
    width: 100%;
}

.content-features ul  {

    list-style: circle;

}

.content-features ul li {

    font-size: 2rem;
    margin: 1rem 0 0 0;
    text-align: left;
}

.img-features{
    width: 45%;
}

.img-features img{
    width: 100%;
    height: auto;
    border-radius: 2rem;
}


.section-reason{
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: white;
    /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164); */
    width: 100%;

}

.reason{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;

}


.title-reason{
    width: 100%;
    justify-content: center;
    display: flex;
}

.title-reason h1{
    font-size: 2.5rem;
    margin: 0;

}

.text-reason {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.text-reason p{
   font-size: 2rem;
}

.reason .btnAction{
    width: 100%;
    justify-content: center;

}


.reason .btnAction button{
    font-size: 2rem;
    background-color: #4EBBB5;
    color: white;
    box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 


}

.reason .btnAction button:hover{
    box-shadow: 0px 0px 10px 1px #4ebbb5; 

}


.section-patners{
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(135deg, white 50%, #4EBBB5 50%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    width: 100%;
    border-radius: 2rem;

}

.patners{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;

}


.title-patners{
    width: 100%;
    justify-content: center;
    display: flex;
}

.title-patners h1{
    font-size: 3rem;
    margin: 0 0 2rem 0;
}

.img-patners{
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.img-patners1{
    display: flex;
    width: 50%;
}

.img-patners1 img {
    width: 100%;
    height: auto;
    border-radius: 2rem;
}

.img-patners2{
    display: flex;
    width: 30%;
    justify-content: center;
}

.img-patners2 img {
    width: 75%;
    height: auto;
}


.section-plan{
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: white;
    /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164); */
    width: 100%;
    justify-content: center;

}

.plan{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.title-plan{
    display: flex;
    width: 100%;
    justify-content: center;
}

.title-plan h1{
    font-size: 2.5rem;
    margin: 2rem 0 1rem 0;
}

.container-content-plan{
    width: 80%;
    display: flex;
    flex-direction: row;
    margin-bottom: 2rem;
    justify-content: space-around;
    background-color: white;
    border-radius: 2rem;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    padding: 2rem;

}

.content-plan{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 45%;
    height: 35rem;
    background-color: #4EBBB5;
    border-radius: 2rem;
    box-shadow: 0px 0px 10px 0px rgb(255, 255, 255);
    color: white;
    text-align: center;
    cursor: pointer;

}

.content-plan:hover{
    box-shadow: 0px 0px 10px 1px #4ebbb5; 

}

.container-content-plan .price{
    font-size: 5rem;
    margin: 3rem 3rem 1rem 3rem;

   
}

.container-content-plan .period{
    font-size: 3rem;
    margin: 0 0 2rem 0;
   
}

.container-content-plan .cloud{
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
   
}

.info-plan{
    display: flex;
    width: 55%;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.info-plan ul{
    font-size: 2rem;
    margin: 0;
    list-style: circle;
}

.info-plan ul li{
    margin: 1rem 0 0 0;

}



.section-contract{
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    width: 100%;
    border-radius: 2rem;
    background: linear-gradient(-135deg, white 50%, #4EBBB5 50%);



}

.contract{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    /* background-color: #4EBBB5; */
    border-radius: 2rem;

}

.contract .btnAction button{
    font-size: 2rem;
    border-radius: 2rem;
    box-shadow: 0px 0px 10px 1px #4ebbb5; 
    padding: 1.5rem;
    color: black;
    /* background-color: #4cbcb4; */
    background-color: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
}

.contract .btnAction button:hover{
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 

}

.content-contract{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin: 3rem;
}


.title-contract{
    width: 100%;
    justify-content: center;
    display: flex;
}

.title-contract h1{
    font-size: 3rem;
    margin: 0;

}



.footer{
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);

}

.information{
    color: black;
    font-size: 2rem;
    margin-top: 3rem;
    width: 100%;
    
}

.information img{
    max-width: 20%;
    height: auto;
    margin-bottom: 1rem;
}

.information h1{
    padding: 0;
    margin: 0;

}

.information p{
    padding: 0;
    margin: 0;

}
.social-media{

    margin-top: 2rem;
    margin-bottom: 1rem;

}
.social-media img{
    width: 6rem;
    height: 6em;
    padding: 1rem;
}

.play-store{

   margin: 0 0 2rem 0;

}
.play-store img{
    width: 100%;
    height: 6rem;
    padding: 1rem;
}

@media screen and (max-width: 1080px) {
    .menu-mobile img{
        display: flex;
        width: 3rem;
        height: 3rem;
        cursor: pointer;
        margin-right: 2rem;
    }

    .menu{
        display: none;
    }

    .container-button-login{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
        width: 10%;
        cursor: pointer;
    }
    
    .container-button-login img{
        width: 2.3rem;
        height: 2.3rem;
        margin-right: 0.5rem;
    }
    
    .container-button-login p{
        font-size: 1.8rem;
    }


    .container-button-cadastro{
        display: none;
    
    }


    .container-modal-menu{
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        background-color: white;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);

        margin-top: 10vh;
    }
    
    .menu-modal{
        width: 100%;
    }
    
    
    .menu-modal ul{
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }
    
    .menu-modal ul li{
        list-style: none;
        display: flex;
        cursor: pointer;
        width: 100%;
        justify-content: center;
        align-items: center;
        color: black;
        font-size: 3rem;
    }
    
    
    .menu-modal ul li:nth-child(-n+5){
        margin: 1rem 0 1rem 0;
    }
    
    .menu-modal ul li:hover{
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    }
    
    .menu-modal ul li a {
       text-decoration: none;
       color: black;
    
    }


    .liActionCadastro a{
        background-color: #4EBBB5;
        color: white !important;
        border-radius: 1.5rem;
        padding: 1.2rem;
        margin-bottom: 1rem;
        margin-top: 3rem;

    }

    .container{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    .container-menu{
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        margin-bottom: 1rem;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    }
    
    .logo{
        width: 30%;
        margin: 2rem 0 2rem 2rem;
    }
    
    .logo img {
        width: 100%;
        height: auto;
    }
    
    .section-about{
        width: 97%;
        display: flex;
        align-items: center;
        flex-direction: column;
        background: linear-gradient(135deg, white 50%, #4EBBB5 50%);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        border-radius: 2rem;
    
    }
    .about{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
    }

    .title-about{
        display: flex;
        font-size: 1.8rem;
        width: 90%;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-bottom: 2rem;
    
    }

    .title-about img {
        width: 70%;
        height: auto;
        margin: 0 0 1rem 0;
        cursor: pointer;    
    }
    
    .title-about h1{
       margin: 1rem 0 0 0;
        
    }
    
    .img-about{
        display: flex;
        justify-content: center;
        width: 100%;
        font-size: 1.5rem;
    
    }
    
    .img-about img{
        width: 55%;
        height: auto;
        border-radius: 2rem;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    
    }
    
    .btnAction{
        display: flex;
        justify-content: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
        width: 50%;
    }
    
    .btnAction button{
        font-size: 2rem;
        border-radius: 2rem;
        box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 
        padding: 1.5rem;
        color: black;
        /* background-color: #4cbcb4; */
        box-shadow: 0px 0px 10px 1px #4ebbb5; 

        border: none;
        cursor: pointer;
    }
    .btnAction button:hover{
        background-color: white;
        box-shadow: 0px 0px 10px 1px rgba(7, 7, 7, 0.308);
        box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 
 
    }
    
    .section-apresentation{
        margin-top: 2rem;
        width: 97%;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: #4ebbb500;
        /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164); */
    
    
    }
    
    .apresentation{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
        text-align: center;
    
    }
    
    .video-apresentation{
        display: flex;
        justify-content: center;
        width: 90%;
        height: auto;
    }
    
    
    .title-apresentation{
        display: flex;
        font-size: 2rem;
        width: 90%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    
    }
    
    .title-apresentation h1{
       margin: 1rem 0 0 0;
    
        
    }
    
    .title-apresentation .btnAction{
        width: 100%;
        justify-content: center;
    
    }
    
    .title-apresentation .btnAction button{
        font-size: 2rem;
        background-color: #4EBBB5;
        color: white;
    
    }
    
    .section-features{
        margin-top: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: linear-gradient(-135deg, white 50%, #4EBBB5 50%);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        width: 97%;
        border-radius: 2rem;
    
    
    }
    
    .features{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
    
    }
    
    .content-features{
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: space-around;
        align-items: center;
    }
    
    .text-features {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 2rem;
    }
    
    .title-features{
        width: 100%;
        justify-content: center;
        display: flex;
    }
    
    .title-features h1{
        font-size: 2.5rem;
    
    }
    
    .content-features{
        width: 100%;
    }
    
    .content-features ul  {
    
        list-style: circle;
    
    }
    
    .content-features ul li {
    
        font-size: 2rem;
        margin: 1rem 0 0 0;
        text-align: left;
    }
    
    .img-features{
        width: 100%;
    }
    
    .img-features img{
        width: 100%;
        height: auto;
        border-radius: 2rem;
    }
    
    
    .section-reason{
        margin-top: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: white;
        /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164); */
        width: 97%;
    
    }
    
    .reason{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-top: 2rem;
    
    }
    
    
    .title-reason{
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
    }
    
    .title-reason h1{
        font-size: 2.5rem;
        margin: 0;
    
    }
    
    .text-reason {
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    
    .text-reason p{
       font-size: 2rem;
    }
    
    .reason .btnAction{
        width: 100%;
        justify-content: center;
    
    }
    
    .reason .btnAction button{
        font-size: 2rem;
        background-color: #4EBBB5;
        color: white;
    
    }
    
    
    .section-patners{
        margin-top: 2rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        background: linear-gradient(135deg, white 50%, #4EBBB5 50%);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        width: 97%;
        border-radius: 2rem;
    
    }
    
    .patners{
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    
    }
    
    
    .title-patners{
        width: 100%;
        justify-content: center;
        display: flex;
    }
    
    .title-patners h1{
        font-size: 3rem;
        margin: 0 0 2rem 0;
    }
    
    .img-patners{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .img-patners1{
        display: flex;
        width: 90%;
        margin-bottom: 2rem;
    }
    
    .img-patners1 img {
        width: 100%;
        height: auto;
        border-radius: 2rem;
    }
    
    .img-patners2{
        display: flex;
        width: 90%;
        justify-content: center;
    }
    
    .img-patners2 img {
        width: 60%;
        height: auto;
    }
    
    
    .section-plan{
        margin-top: 2rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: white;
        /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164); */
        width: 97%;
        justify-content: center;
    
    }
    
    .plan{
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    
    }
    
    .title-plan{
        display: flex;
        width: 100%;
        justify-content: center;
    }
    
    .title-plan h1{
        font-size: 2.5rem;
        margin: 2rem 0 1rem 0;
    }
    
    .container-content-plan{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
        justify-content: space-around;
    }
    
    .content-plan{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 30rem;
        background-color: #4EBBB5;
        border-radius: 2rem;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        color: white;
    
    }
    
    .container-content-plan .price{
        font-size: 5rem;
        margin: 3rem 3rem 1rem 3rem;
    
       
    }
    
    .container-content-plan .period{
        font-size: 3rem;
        margin: 0 0 2rem 0;
       
    }
    
    .container-content-plan .cloud{
        font-size: 1.5rem;
        margin: 0 0 1rem 0;
       
    }
    
    .info-plan{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .info-plan ul{
        font-size: 2rem;
        margin: 0;
        list-style: circle;
    }
    
    .info-plan ul li{
        margin: 1rem 0 0 0;
    
    }
    
    
    .section-contract{
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: white;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        width: 97%;
        border-radius: 2rem;
        background: linear-gradient(-135deg, white 50%, #4EBBB5 50%);
    
    }
    
    .contract{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 2rem;
        /* background-color: #4EBBB5; */
        border-radius: 2rem;
    
    }
    
    .content-contract{
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
        margin: 3rem;
    }
    
    
    .title-contract{
        width: 100%;
        justify-content: center;
        display: flex;
    }
    
    .title-contract h1{
        font-size: 3rem;
        margin: 0;
    
    }
    
    
    .footer{
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    
    }
    
    .information{
        color: black;
        font-size: 2rem;
        margin-top: 3rem;
        width: 90%;
        
    }
    
    .information img{
        max-width: 70%;
        height: auto;
        margin-bottom: 1rem;
    }
    
    .information p{

        padding: 0;
        margin: 0;
    
    }
    .social-media{
    
        margin-top: 2rem;
        margin-bottom: 1rem;
    
    }
    .social-media img{
        width: 6rem;
        height: 6em;
        padding: 1rem;
    }

    .play-store{

        margin: 0 0 2rem 0;

    }
    .play-store img{
        width: 100%;
        height: 6rem;
        padding: 1rem;
    }

}















/* Inicio da estilização da página Duvidas */

.doubts{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: white;
    
}

.title-doubts h1 {
    font-size: 3rem;
}

.container-doubts{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    border-radius: 2rem;
    background-color: #4EBBB5;
    color: white;

}

.content-doubts{
    border-top: 0.1rem solid rgb(228, 228, 228);
    border-bottom: 0.1rem solid rgb(228, 228, 228);
    display: flex;
    flex-direction: column;
    width: 90%; 
    margin: 1rem 3rem 2rem 3rem; 
}

.subTitle-doubts {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1rem 1rem 1rem 1rem;
}

.subTitle-doubts h1{
    margin: 0;
    font-size: 2.5rem;
    font-weight: bolder;
}

.subTitle-doubts img{
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    margin-right: 2rem;
}

.response-doubts {
    width: 100%;
    overflow: hidden; /* Garante que o conteúdo oculto não seja visível */
    max-height: 0; /* Inicia oculto */
    transition: max-height 0.2s ease; /* Animação suave ao expandir */
}

.response-doubts.expanded {
    max-height: 500px; /* Altura suficiente para o texto. Ajuste conforme necessário */
}

.text-response {
    width: 100%;
    display: flex;
}

.text-response p {
    font-size: 1.8rem;
}

.text-response a {
    color: white;
    font-size: 1.8rem;
}

/* Página dos termos e condições */

.termsandconditions{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: white;
    
}

.title-termsandconditions h1 {
    font-size: 3rem;
}

.container-termsandconditions{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    border-radius: 2rem;
    color: black;

}

.content-termsandconditions{
    border-top: 0.1rem solid rgb(228, 228, 228);
    border-bottom: 0.1rem solid rgb(228, 228, 228);
    display: flex;
    flex-direction: column;
    width: 90%; 
    margin: 1rem 3rem 2rem 3rem; 
    justify-content: center;
    align-items: center;
}

.terms{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.terms h1{
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
}

.terms h2{
    font-size: 2rem;
    margin-top: 2rem;
}

.terms p{
    font-size: 1.8rem;
}

.terms a{
    color: black;
}


.privacidade{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.privacidade h1{
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
}

.privacidade h2{
    font-size: 2rem;
    margin-top: 2rem;
}

.privacidade p{
    font-size: 1.8rem;
}

.privacidade a{
    color: black;
}

@media screen and (max-width: 1080px) {

    
    .container-doubts{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 97%;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        border-radius: 2rem;
        background-color: #4EBBB5;
        color: white;
    
    }
    
    
    .subTitle-doubts h1{
        margin: 0;
        font-size: 2rem;
        font-weight: bolder;
    }
    
    
    .text-response p {
        font-size: 1.7rem;
    }

    /* Página dos termos e condições */

    .termsandconditions{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 2rem;
        background-color: white;
        
    }

    .title-termsandconditions{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;

    }

    .title-termsandconditions h1 {
        font-size: 2rem;
        text-align: center;
    }

    .container-termsandconditions{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 99%;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        border-radius: 2rem;
        color: black;

    }

    .content-termsandconditions{

        display: flex;
        flex-direction: column;
        width: 99%; 
        margin: 1rem 3rem 2rem 3rem; 
        justify-content: center;
        align-items: center;
    }

    .terms{
        display: flex;
        flex-direction: column;
        width: 80%;
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }

    .terms h1{
        font-size: 3rem;
        font-weight: bold;
        margin: 0;
    }

    .terms h2{
        font-size: 2rem;
        margin-top: 2rem;
    }

    .terms p{
        font-size: 1.8rem;
    }


    .privacidade{
        display: flex;
        flex-direction: column;
        width: 80%;
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }

    .privacidade h1{
        font-size: 3rem;
        font-weight: bold;
        margin: 0;
    }

    .privacidade h2{
        font-size: 2rem;
        margin-top: 2rem;
    }

    .privacidade p{
        font-size: 1.8rem;
    }
}












/* Inicio da estilização da página Tutorial */

.container-tutorial{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tutorial{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 80vh;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: #4EBBB5;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
    border-radius: 2rem;
    color: white;
}

.title-tutorial{
    display: flex;
    width: 100%;
    justify-content: center;
}

.title-tutorial h1{
    font-size: 4rem;
    margin: 0 0 2rem 0;
}

.content-tutorial{
    display: flex;
    width: 80%;
    justify-content: center;
    text-align: center;
}

.content-tutorial h3{
    font-size: 2.5rem;
}

.tutorial .btnTutorial{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
   

}

.tutorial .btnTutorial button{
    font-size: 2rem;
    background-color: white;
    color: black;
    padding: 1.5rem;
    border-radius: 2rem;
    border: none;
    box-shadow: 0px 0px 10px 1px #4ebbb5; 

    cursor: pointer;

}

.tutorial .btnTutorial button:hover{
    background-color: white;
    box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 
}


@media screen and (max-width: 1080px) {
    .container-tutorial{
        display: flex;
        width: 97%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .tutorial{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80vh;
        margin-top: 2rem;
        margin-bottom: 2rem;
        background-color: #4EBBB5;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.164);
        border-radius: 2rem;
        color: white;
    }
    
    .title-tutorial{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .title-tutorial h1{
        font-size: 4rem;
        margin: 0 0 2rem 0;
    }
    
    .content-tutorial{
        display: flex;
        width: 80%;
        justify-content: center;
        text-align: center;
    }
    
    .content-tutorial h3{
        font-size: 2.5rem;
    }
    
    .tutorial .btnTutorial{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
       
    
    }
    
    .tutorial .btnTutorial button{
        font-size: 2rem;
        background-color: white;
        color: black;
        padding: 1.5rem;
        border-radius: 2rem;
        border: none;
        box-shadow: 0px 0px 10px 1px #4ebbb5; 
    
        cursor: pointer;
    
    }
    
    .tutorial .btnTutorial button:hover{
        background-color: white;
        box-shadow: 0px 0px 10px 0px rgb(255, 255, 255); 
    }
    
   
}