:focus {
outline: 0;
}
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
color: whitesmoke;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Montserrat", sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
.background1 {
background: #f2ad2b;
}
.logoEnsino {
width: 20%;
margin: 1rem;
}
.subtitulo {
font-size: 1.5rem;
font-weight: 800;
margin-top: 2rem;
}
.containerTituloGeral {
display: flex;
margin-bottom: 7rem;
}
.divTitulo1, .divTitulo3, .divTitulo2 {
height: 103px;
width: 225px;
}
.divTitulo1 {
border-bottom-left-radius: 35px;
border-top-left-radius: 35px;
width: 300px;
padding-right: 2rem;
}
.divTitulo2 {
border-bottom-left-radius: 45px;
border-top-left-radius: 30px;
margin-left: -2.1rem;
padding-right: 20rem;
}
.divTitulo3 {
border-bottom-right-radius: 235px;
border-top-right-radius: 235px;
border-top-left-radius: 300px;
width: 266px;
margin-left: -6.5rem;
border-bottom-left-radius: 308px;
}
.titulo {
font-size: 10.9rem;
margin-top: -4.4rem;
font-weight: 800;
font-family: "heyComic";
letter-spacing: 6px;
}
.background3 {
background: #425df4;
}
.imgPrincipal {
position: relative;
width: 54%;
top: -85%;
left: 75%;
}
.divBox1 {
border: 2px solid #212121;
border-style: dashed;
background: whitesmoke;
padding: 4rem 2rem 2rem;
border-radius: 30px;
position: relative;
overflow: hidden;
margin-top: -4rem;
}
.divBox1::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-color: #6b7ff2; 
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.divBox1 p, strong {
font-size: 1.2rem;
}
.divBox1 p {
color: black;
}
.divBox1 strong {
color: #425df4;
}
.divButton {
display: flex;
justify-content: center;
margin-top: 2rem;
margin-bottom: 2rem
}
.button1 {
background: #f2c335;
color: #695415;
font-weight: 800;
padding: 1rem 1rem;
border-radius: 30px;
font-size: 1.7rem;
text-decoration: none;
transition: 0.3s ease-in-out;
position: absolute;
}
.button1:hover {
color: #f2c335;
background: #695415;
}
.containerGeral2 {
margin: 4rem 0;
display: flex;
padding: 4rem 8rem;
background: #2d3d94;
border-radius: 50px;
align-items: flex-start;
justify-content: center;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); 
}
.divGeral {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.5rem;
width: 50%;
}
.divImg {
border-radius: 100px;
}
.img2 {
padding: 2rem;
width: 130px;
height: 130px;
}
.titulo4 {
font-weight: 800;
font-size: 1.4rem;
text-align: center;
}
.subtitulo2 {
text-align: center;
}
.divTitulo4 {
background: #2d3d94;
padding: 1rem;
text-align: center;
}
.titulo5 {
font-size: 4rem;
font-weight: 800;
letter-spacing: 10px;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
.containerGeral3 {
display: flex;
align-items: center;
}
.containerCarrossel {
margin: 4rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.divCarrosselWrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
overflow: hidden;
position: relative;
}
.divCarrossel {
display: flex;
text-align: center;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
flex-direction: column;
padding: 2rem;
align-items: center;
background: #6a7ff2;
border-radius: 30px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
gap: 2rem;
width: 25%;
height: 380px;
border: 5px solid #6b7ff2;
opacity: 0.6;
transform: scale(0.8);
cursor: pointer;
}
.divCarrossel.active {
flex: 0 0 35%;
opacity: 1;
transform: scale(1);
}
.textoCarrossel {
text-align: center;
font-size: 1.1rem;
}
.buttonSeta {
background: none;
border: none;
font-size: 3rem;
font-weight: 800;
cursor: pointer;
}
.buttonSeta:hover {
opacity: 0.7;
}
.divSelectCircle {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: -1rem;
margin-bottom: 3rem;
}
.buttonCircle {
background: #2d3d94;
border: 1px solid whitesmoke;
border-radius: 1000px;
padding: 0rem;
width: 2%;
color: #2d3d94;
}
.buttonCircleActive {
background: #6b7ff2;
color: #6b7ff2;
}
.background4 {
background: #2d3d94;
}
.titulo6 {
text-align: center;
font-weight: 800;
margin-top: 2rem;
font-size: 2rem;
width: 50%;
}
.containerDrawer {
display: flex;
justify-content: center;
align-items: center;
margin: 3rem 0;
flex-direction: column;
gap: 1rem;
}
.buttonDrawer {
display: flex;
align-items: center;
flex-direction: column;
padding: 0rem 3rem;
background: #27B6E2;
border-radius: 30px;
border: none;
width: 45%;
transition: 0.3s ease-in-out;
}
.buttonDrawer:hover {
background: #F2C335;
color: #ff3334;
}
.buttonDrawer:hover .textDrawer {
background: none; 
color: #ff3334;
}
.textDrawer:hover {
background: none !important;
}
.textDrawer:hover {
background: none;
}
.div1 {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.textDrawer {
margin: 0;
font-weight: 800;
font-size: 1.6rem;
transition: 0.3s ease-in-out;
}
.plusDrawer {
font-size: 3rem;
color: #2d3d94;
display: inline-block;
transition: transform 0.6s ease-in-out;
}
.buttonDrawer.active .plusDrawer {
transform: rotate(90deg);
}
.seta.rotate {
transform: rotate(90deg);
transition: transform 0.3s ease-in-out;
}
.divInvi {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
padding: 0 1rem;
}
.divInvi2 {
position: absolute;
top: 100%; 
left: 0;
width: 100%; 
background: #1E122D;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
z-index: 10;
}
.divInvi.active {
max-height: 600px; 
padding: 1rem;
}
.divInvi2.active {
transform: scaleY(1);
opacity: 1;
max-height: 600px; 
}
.divInvi p {
text-align: left;
font-weight: 500;
color: #2D3D94;
}
.divInvi span {
font-weight: 900;
color: #ff3334;
}
.subDivButton {
position: relative;
}
.imgFinal {
width: 70%;
display: flex;
margin-top: 3rem;
position: relative;
top: 1%;
}
.containerPreco {
margin-top: 4rem;
}
.textoFinal1, .textoFinal1 strong {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 2rem;
}
.textoFinal2 {
font-size: 2rem;
margin: 2rem 0;
}
.textoFinal3, .textoFinal3 span {
font-family: 1.8rem;
font-weight: 700;
margin-bottom: 0rem;
}
.TextoAmarelo {
color: #f2ad2b;
}
.dashed {
text-decoration: line-through #ff3334;
}
.underline {
text-decoration: underline;
color: #F2AD2B;
font-size: 6rem;
font-weight: 900;
}
.textoFinal4 {
font-weight: 700;
margin-top: 1rem;
}
.containerSocialMedia {
margin: 2rem 1rem 0;
display: flex;
flex-direction: column;
padding: 1rem 0;
align-items: center; 
text-align: center;
}
.divSocialMedia {
display: flex;
margin-bottom: 2rem;
}
.divSaibaMais {
}
.imgSocialMedia {
width: 45px;
margin-left: 3rem;
object-fit: contain;
transition: transform 0.3s ease, filter 0.3s ease;
}
.imgSocialMedia:hover, .saibaMais:hover {
transform: scale(1.1);
filter: brightness(0.5); 
}
.facebook {
margin-left: -3rem;
}
.saibaMais {
text-align: center;
text-decoration: none;
color: whitesmoke;
transition: 0.3s ease-in-out;
} .video-background {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bg-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
padding: 20px;
}
.containerGeral5 {
display: flex;
flex-direction: column;
padding: 4rem;
}
.containerContadorLikes {
display: flex;
align-items: center;
height: 50vh;
gap: 1rem;
}
.contador {
background: transparent;
width: 100%;
margin-bottom: 6rem;
border: 2px solid #06040B;
border-radius: 40px;
padding: 2rem;
font-size: 5rem;
position: relative;
overflow: hidden;
font-family: "Doto", sans-serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
font-variation-settings:
"ROND" 0;
}
#contador {
font-family: "Emblema One", system-ui;
}
.contador::before {
content: "";
position: absolute;
top: -300%;
left: -150%;
width: 400%;
height: 400%;
background: radial-gradient(circle, rgba(107, 127, 242, 0.6) 10%, transparent 70%);
border-radius: inherit;
transition: 0.8s ease-in-out;
z-index: -1;
}
.contador:hover::before {
top: 100%;
left: 100%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(107, 127, 242, 0.3) 10%, transparent 70%);
}
.contador:hover {
border-color: #6b7ff2;
box-shadow: 0 0 15px rgba(107, 127, 242, 0.2);
}
.instagram-media {
border: none !important;
}
.divButton2 {
display: flex;
gap: 2rem;
margin-top: 6rem;
}
.button2 {
background: linear-gradient(to left, #4C4778, #261637, #1E122D);
color: #6b7ff2;
border: none;
font-weight: 800;
padding: 0.5rem 1rem;
border-radius: 30px;
font-size: 1.2rem;
text-decoration: none;
position: relative;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.button2::before {
content: "";
position: absolute;
top: -100%;
left: -150%;
width: 400%;
height: 400%;
background: radial-gradient(circle, rgba(107, 127, 242, 0.5) 10%, transparent 70%);
transition: all 0.5s ease-out;
}
.button2:hover::before {
top: 100%;
left: 100%;
transform: translate(-100%, -100%);
background: radial-gradient(circle, rgba(107, 127, 242, 0.8) 10%, transparent 70%);
}
.button2:hover {
background: linear-gradient(to right, #1E122D, #261637, #4C4778);
color: #9eaaff;
box-shadow: 0 0 15px rgba(107, 127, 242, 0.5);
}
.containerGeralLibras {
display: flex;
margin: 3rem 0;
align-items: center;
flex-direction: column;
gap: 3rem;
}
.divItems2 {
display: flex;
flex-direction: column;
}
.item {
display: flex;
align-items: center;
gap: 3rem;
}
.buttonItem {
display: flex;
align-items: flex-start;
padding-bottom: 0rem;
padding-top: 1.2rem;
gap: 18rem;
}
.seta {
width: 25px;
transition: transform 0.3s ease-in-out;
}
.custom-table {
width: 400px;
border-collapse: collapse;
background: radial-gradient(circle, rgba(107, 127, 242, 0.5) 10%, transparent 70%);
color: white;
text-align: left;
}
tbody {
border-radius: 30px;
}
.custom-table td {
padding: 10px;
border: 1px solid #8000FF; 
border-top: none;
word-wrap: break-word;
}
.tituloTabela {
font-weight: 800;
color: #8000FF;
font-size: 0.9rem;
}
.itemTabela {
font-size: 0.9rem;
} @media (max-width: 1366px) {
.divButton {
margin-bottom: 6rem;
}
.underline {
font-size: 5rem;
}
}
@media (max-width: 1114px) {
.logoEnsino {
width: 20%;
margin: auto;
}
.mobileDiv {
margin-left: 0rem !important;
}
.borderMobile {
margin-top: 0rem !important;
}
.imgPrincipal {
width: 100%;
top: auto;
left: auto;
}
.containerGeral2 {
padding: 4rem 1rem;
}
.titulo4 {
font-size: 1.1rem;
}
.divCarrossel {
width: 100%;
height: 370px;
}
.imgCarrossel {
width: 50%;
}
.textoCarrossel {
font-size: 1rem;
margin-top: -1.3rem;
}
.buttonCircle {
width: 4%;
}
.titulo6 {
width: auto;
}
.buttonDrawer {
width: auto;
}
.imgFinal {
width: 100%;
}
.textoFinal1, .textoFinal1 strong {
font-size: 3rem;
text-align: center;
font-family: 'Emblema One';
}
.underline {
font-size: 4rem;
}
.textoFinal2 {
font-family: 'Doto';
text-align: center;
}
.divButton {
margin-bottom: 6rem;
}
.containerSocialMedia {
display: flex;
}
.instagram-media {
display: none !important;
}
.contador {	
margin-bottom: auto;
}
}
@media (width: 1024px) {
.textoCarrossel {
font-size: 1.2rem;
}
}
@media (max-width: 767px) {
.logoEnsino {
width: 50%;
margin: auto;
}
.mobileDiv {
margin-left: auto !important;
}
.containerTituloGeral {
flex-direction: column;
margin-bottom: 2rem;
gap: 1.5rem;
}
.divTitulo1 {
width: 75%;
text-align: center;
padding-right: 0rem;
border-bottom-right-radius: 35px;
border-top-right-radius: 35px;
}
.divTitulo2 {
margin-left: auto;
padding-right: 0rem;
text-align: center;
width: 75%;
border-bottom-right-radius: 35px;
border-top-right-radius: 35px;
}
.divTitulo3 {
margin-left: auto;
text-align: center;
width: 75%;
}
.imgPrincipal {
display: none;
}
.divBox1 {
margin-top: 2rem;
}
.borderMobile {
margin-top: auto !important;
}
.divButton {
margin-top: 2rem;
margin-bottom: 6rem;
}
.containerGeral2 {
padding: 4rem;
flex-direction: column;
gap: 2rem;
}
.divGeral {
flex-direction: column;
gap: 0.5rem;
width: auto;
}
.titulo5 {
font-size: 3rem;
letter-spacing: 0px;
}
.divCarrosselWrapper {
flex-direction: column;
}
.divSelectCircle {
display: none;
}
.buttonSeta {
display: none;
}
.divCarrossel {
width: auto;
}
.buttonCircle {
width: 7%;
}
.titulo6 {
width: auto;
}
.buttonDrawer {
width: auto;
padding: 0rem 1rem;
}
.textDrawer {
font-size: 1.1rem;
}
.divInvi.active {
max-height: 850px;
}
.divInvi2.active {
max-height: 850px;
}
.containerPreco {
margin-top: 2rem;
}
.textoFinal1, .textoFinal1 strong {
font-size: 3rem;
text-align: center;
font-family: 'Emblema One';
}
.textoFinal2 {
font-family: 'Doto';
text-align: center;
}
.instagram-media {
display: none !important;
}
.containerGeral5 {
padding: 0rem;
}
.contador {
background: transparent;
width: auto;
margin-bottom: 2rem;
border: 2px solid #06040B;
border-radius: 40px;
padding: 1rem;
font-size: 3rem;
}
.facebook {
margin-left: -3rem;
}
}
@media (width: 360px) {
.facebook {
margin-left: -3.5rem;
}
}