html,body{
    height: 10%; /*Deixa o footer no final da página*/
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0; /*Espaço entre o texto e a borda*/
    box-sizing: border-box;
    
    color:white;                                                                                  

body{
    font-family: 'Roboto',sans-serif;
    background-color:#00AEEF;
}

}
/*Config Header*/

.hdr{

    align-items: center;
    margin:0px;
    display: flex;
    justify-content: space-between;
    padding: 0px;
    width: 20%
}
.hdr h2{
  font-family: 'Boska', serif;
    font-size: 50px;
}

.hdr img{
    padding: 30px;
    height: 60px;

}


main{ /*Ajuda na config do footer*/
    flex:1;
}

a{ /*config de links*/
    color:white;
    text-decoration: underline ;
}

/*Config da curva de outra cor no fundo */

.fundo-estilizado{
    background-color: #008CCF; 
    width: 100%;
    height: 100px;
    border-top-left-radius:  70% 100px ;
    border-bottom-right-radius: 50% 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    clip-path: ellipse(100% 100% at 50% 0%);
}

/* Configuração da div inicio e seus elementos(h1,p e a imagem do ventilador) */ 
.inicio{
    position: relative;
    z-index: 1;
    padding-top: 150px;


    top: -50px;
    margin:0px;
    padding: 20px;
    display:flex;
    justify-content: space-between; /*Acho que é isso que deixa a imagem do lado do texto*/
}   

.inicio img{
    loat:right;
    height: 550px;
}

.inicio .texto{
    padding: 90px;
}

.texto h1{
    font-family: 'Roboto';
    color:white;
    font-size: 45px;

}
.texto p{
    font-family: 'Roboto',sans-serif;
    color: white;
    font-size: 20px;
}

.texto .botao-inicio{ /*Tentar configurar o botão deste inicio*/
    background-color: #CCEFFC;
    color: #008CCF;
    font-size: 25px;
    border-radius: 20px; /*Arredonda as bordas do botão*/
    width: 20%;
    border:2px solid #00AEEF;
}


/*Config para a categoria dos Planos(Cards com texto e imagens)*/


.planos h2{
    font-size: 40px;
    text-align: center;
}

.card-container{
    position: relative;
    top: -50px; /*Trouxe os cards um pouco pra cima*/

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    margin-top: 80px;
    text-align: center;
}

.card{

    width: 320px;
    background-color: #f0f0f0;
    border-radius: 20px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    margin: 20px;
}

.card img{
    width: 100%;
    height: auto;
}

.card-content{
    padding: 15px;
}

.card-content h3{
    font-size: 28px;
    margin-bottom: 8px;
    color: black;

}

.card-content .botao{
    display: inline-block;
    padding:8px 16px ;
    background-color: #CCEFFC;
    text-decoration: none;
    border-radius: 20px;
    margin-top: 16px;
    color: #008CCF;
    font-size: 20px;
    font-family: 'Roboto',sans-serif;
    width: 40%;
    border:2px solid #00AEEF;
}

/* Config TwoFans */

.twofans{
    align-items: center;
   background-color:#CCEFFC;  /*Da pra alterar a cor de fundo dessas divs de categorias*/
   padding: 90px;
   display: flex;
   justify-content: space-between;
}

.twofans h2{
    font-family: 'Boska',sans-serif;
    text-align: left;
    font-size: 70px;
}

.twofans img{
    text-align: center;
    float: rigth;
    height: 400px;
}

/* Config ThreeFans */
.threefans{
    align-items: center;
    background-color:#CCEFFC;
    padding: 90px;
    display: flex;
    justify-content: space-between;
}

.threefans h2{
    font-family: 'Boska',sans-serif;
    color: white;
    text-align: left;
    font-size: 70px;
}

.threefans img{
    text-align: center;
    float: right;
    height: 400px;
}

/*Config FourFans*/
.fourfans{
    align-items: center;
    background-color: #CCEFFC;
    padding: 90px;
    display: flex;
    justify-content: space-between;
}

.fourfans h2{
    font-family: 'Boska',sans-serif;
    text-align: left;
    font-size: 70px;
}

.fourfans img{
    text-align: center;
    float: right;
    height: 400px;
}


 /*Config para a categoria agradecimento*/
.agradecimento{
    margin: 0;
    padding: 170px;
    display: flex;
    justify-content: space-between;
}

.agradecimento img{
    loat:rigth;
    height: 270px;
}

.agradecimento texto{
    float: left;
}
.agradecimento h2{
    font-family: 'Boska',sans-serif;
    color: #CCEFFC;
    font-size: 35px;
}

.agradecimento p{
    font-size: 20px;
}


/*Config Contatos*/



.contato{
    background-color:#CCEFFC;
    margin:0px;
    padding: 200px;
    display:flex;
    justify-content: space-between;
}

.contato img{
    height: 300px;
}

.texto-esquerda h2{
    font-family: 'Boska',sans-serif;
    text-align: center;
    font-size: 65px;
}

.texto-direita{
    font-size: 25px;
}
.texto-direita h3{
    font-size: 25px;
    color: #008CCF;
}

.fim{

    padding: 160px;
}

.caixa{
    position: relative;
    top: -70px; /*Trouxe os cards um pouco pra cima*/

    align-items: center;
    margin: 70px auto;
    display: flex;
    justify-content: space-between;
    padding: 0px;
    width: 20%;
}

.caixa h2{
    font-family: 'Boska', serif;
    font-size: 75px;
}

.caixa img{
    height: 100px;
}

/*Config Rodapé/Footer*/

footer{

    padding: 0px;
    background-color: white;
    color: black;
    text-align: center;
    font-size: 20px;
}

/*  Config da Página TwoFans*/

.page-twofans{
    display: flex;
    justify-content: space-between;
    margin: 50px;
    align-items: center;
}

.texto-TwoFans h2{
    text-align: center;
    font-size: 60px;
    font-family: 'Boska',serif;
}

.texto-TwoFans button{
    display: inline-block;
    padding:8px 16px ;
    background-color: #CCEFFC;
    text-decoration: none;
    border-radius: 20px;
    margin-top: 16px;
    color: #008CCF;
    font-size: 20px;
    font-family: 'Roboto',sans-serif;
    width: 50%;
    border:2px solid #00AEEF;
}






/*Config pagina threefans*/

.page-threefans{
    display: flex;
    justify-content: space-between;
    margin: 50px;
    align-items: center;
}

.texto-ThreeFans h2{
    text-align: center;
    font-size: 60px;
    font-family: 'Boska',serif;
}

.texto-ThreeFans button{
    display: inline-block;
    padding:8px 16px ;
    background-color: #CCEFFC;
    text-decoration: none;
    border-radius: 20px;
    margin-top: 16px;
    color: #008CCF;
    font-size: 20px;
    font-family: 'Roboto',sans-serif;
    width: 45%;
    border:2px solid #00AEEF;
}



/*Config pagina fourfans*/

.page-fourfans{
    display: flex;
    justify-content: space-between;
    margin: 50px;
    align-items: center;
}

.texto-FourFans h2{
    text-align: center;
    font-size: 60px;
    font-family: 'Boska',serif;
}

.texto-FourFans button{
    display: inline-block;
    padding:8px 16px ;
    background-color: #CCEFFC;
    text-decoration: none;
    border-radius: 20px;
    margin-top: 16px;
    color: #008CCF;
    font-size: 20px;
    font-family: 'Roboto',sans-serif;
    width: 45%;
    border:2px solid #00AEEF;
}