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

html{
    height: 2000px;
}

section{
    width: 100%;
    height: 100vh;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
}

h1,h2, h3{
    font-weight: 700;
    text-align: center;
}
h1{
    position: absolute;
    font-size: clamp(24px, 5vw, 50px);
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    top: 15%;
}

h2{
    position: absolute;
    font-size: clamp(20px, 1.5vw, 64px);
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
    top: 25%;
}

h3{
    position: absolute;
    font-size: clamp(20px, 1.5vw, 64px);
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}

#caixaTitulo{
    position: absolute;
    top: 10%;
    background-color: #0099FF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80vw;
    height: 100px;
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
}

#caixaTitulo h1{

    top: 50%;
    transform: scaleY(-50%);


}


/* 
    Seção hero
*/

#indexFundo01{
    width: 100%;
}

#heroSection{
    padding-top: 100px;
    background-image: url(../assets/img/indexFundo01.svg);
    background-size:cover;
    background-repeat: no-repeat;
}


#heroSection h1{
    top: 15%;
}
#heroSection h2{
    top: 25%;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}

#queroResolverBtn{
    position: absolute;
     top: 60%;
    width: 30vw;
    height: auto;
    padding: 12px 45px;
    border-radius: 100px;
    outline: 3px solid #32BA96;
}

#queroResolverBtn p{
    font-size: clamp(16px, 1.5vw, 64px);
    text-align: center;
    align-items: center;
}

#heroSection h3{
    top: 70%;
}

#heroSection #btnProximo{
    position: absolute;
    top: 75%;
}

/* Seção MarIA */

#mariaSection{
    height: 800px;
    background: linear-gradient(to bottom,#0099FF, #8BB7FF);
}

#mariaSection h2, #mariaSection h1{
    text-shadow: none;
}

#mariaSection h1{
    top: 0%;
}

#mariaSection h2{
    top: 0%;
    margin-top:120px;
}

#mariaSection #caixaPrincipal{
    position: relative;
    display: flex;
    justify-content: center;
    width: 75%;
    height: 450px;
    border-radius: 12px;
    background-color: #f7f6f2;
    top: 25%;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25);
}

#mariaSection #caixaPrincipal h2{
    margin-top: 0px;
    position: absolute;
    top: 60%;
    font-size: 1.5vw;
    color: #0D0E0F;
    text-shadow: none;
    font-weight: 400;

}

#mariaSection #caixaChat{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 70%;
    width: 70%;
    height: clamp(60px, 65px, 65px);
    outline: 2px solid #82E065;
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
}

#mariaSection #caixaChat #iconMicrofone{
    width: 1.7vw;
    margin-left: 12px;
    
}

#mariaSection #caixaPrincipal #iconMariaFoto{
    width: 100px;
    position: absolute;
    height: auto;
    top: 35%;
}

#mariaSection #caixaChat p{
    font-size: 1.5vw ;
    color: #808080;
}

#mariaSection #btnConhecaMaria{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 92%;
    width: 20vw;
    height: 65px;
    background: linear-gradient(to bottom, #31C79F 20%, #ACE057 90%) ;
    border-radius: 100px;

}

#mariaSection #btnConhecaMaria p{
    font-size: 1.5vw;


}

/* 
    Seção Como funciona
*/

#comoFuncionaSection{
    height: 1800px;
    background: linear-gradient(to bottom,#F2FFC9, #2AA3A3); 
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#comoFuncionaSection h2, #comoFuncionaSection h1{
    text-shadow: none;
}

#caixaTitulo h1{
    font-weight: 400;
    position: absolute;
    top:50%;
    transform: translateY(-50%);

}

.frameComoFunc{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 80%;
    height: 500px;
    top: 5%;
}

.viewComoFunc{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    top: 20%;
    height: 300px;
    border-radius: 12px;
    transform: rotate(-1.5deg);
    color: #0099FF;
    background-color: #f7f6f2;
}

.textoComoFunc{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 250px;
    top: 25%;
    transform: rotate(+1.5deg);
    background-color: #0099FF;

}

.textoComoFunc h2{
    margin-bottom: 32px;
}

.textoComoFunc p{
    font-size: 1vw;
    text-align: center;
    margin: 64px 20px 0px 20px;

}

/* Seção Resultados */

#resultadosSection{
    height: 1000px;
    background: linear-gradient(to bottom,#F2FFC9, #2AA3A3); 
    

}

#resultadosSection h2, #resultadosSection h1{
    text-shadow: none;
}




#resultadosSection h2{
    top:25%;
}

#caixaStories{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    height: 500px;
    top: 35%;

}

.storie{
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20%;
    height: 450px;
    border-color: #0099FF;
    border-radius: 12px;
    overflow: hidden;
}

.storie .storieTitulo{
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

.storie p {
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 12px;
}

/*Seção Conecte-se*/

#conecteSection{
    position: relative;
    height: 1000px;

}

#conecteSection{
    height: 1200px;
    background: linear-gradient(to bottom,#129EFE, #81B5FF); 
}

#conecteSection h2, #conecteSection h1{
    text-shadow: none;
}


#iconeConecte{
    position: absolute;
    z-index: 1000;
    top:0%;
    transform: translateY(-50%);
}

#caixaPlanos{
    position: absolute;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    top: 40%;
    width:90%;
    height: auto;
}

#areaPlanos{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 30%;
    height: 100%;


}

.planoTitulo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    align-items: center;
    width: auto;
    height: auto;
    padding: 12px 20px;
    margin-bottom: 40px;
    background-color: #32BA96;
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
}

#planoTituloEspecial{
    background-color: #7861FD;
    position: absolute;
    top: 11%;
    box-shadow: none;
}

.planoTitulo h1{
    position: static;

    font-size: 2vw;
    text-align: center;
    font-weight: 600;
    text-shadow: none;
}

.planoText{
    color: #1B1B1B;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    width: auto;
    height: auto;
    background-color: #D0D8FF;
    border-top-left-radius: 35px;
    border-bottom-right-radius: 35px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 20px 12px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25);
}

.planoText h2{
    position: static;
    font-size: 2vw;
    margin: 24px 0px;
    text-shadow: none;
    
}

.beneficio{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.beneficio p{
    margin: 12px 12px;
    font-size: 1vw;
}


.iconeBeneficio{
    padding: 0px 12px;
    width: 50px;
}

.planoBtn{
    color: white;
    align-self: center;
    font-size: 1.2vw;
    width: auto;
    height: auto;
    padding: 16px 24px;
    border-radius: 200px;
    background-color: #E3681B;
    margin: 24px 0px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25);
}

/* Seção de relatos */

#relatosSection{
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    height: auto;
    background-color: #62AFFF;

}
#relatosSection h2, #relatosSection h1{
    text-shadow: none;
}

#relatosSection #caixaTitulo h1{
    top: auto;
    transform: none;

}


#relatosSection #caixaTitulo{
    position: static;
    top:auto;
    transform: none;


}

#relatosSection h1{
    position: static;
    top: auto;
    transform: none;
}
#relatosSection h2{
    top: auto;
    position: static;
    transform: none;
}

#caixaRelato{

    display: flex;
    align-items: center;
    width: 80%;
    height: auto;
    top: 40%;
    border: 1px solid #757474;
    border-radius: 20px;
    padding: 80px 40px;
    background: linear-gradient(135deg, rgba(53, 49, 49, 0.377));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

#caixaRelato img{
    position: relative;
    border-radius: 50%;
    width: 18vw;
    margin: 0px 20px

}
#textoRelato{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
#textoRelato p{
    color: #f7f6f2;
}

#textoRelato #relato{
    text-align: center;
    position: relative;
    font-weight: 700;
    font-size: 2vw;
    width: 80%;
}

#textoRelato #nome{
    text-align: center;
    position: relative;
    font-size: 1.5vw;
    width: 100%;
}
    
#caixaSetasRelatos{
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

#setaDireita{
    scale: -1;

    transform: translateX(-60%);
}

#setaEsquerda{
    transform: translateX(-60%);
}

#setaDireita, #setaEsquerda{
    width: 150px;
    height: 150px;
    cursor: pointer;

}