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

@font-face {
    font-family: 'DM Sans';
    src: url('./fonts/DM_Sans/static/DMSans-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'DM Sans';
    src: url('./fonts/DM_Sans/static/DMSans-Bold.ttf') format('truetype');
    font-weight: 800;
}

.botao-whatsapp img{position: fixed; width: 90px; right: 0; bottom: 0; margin: 20px; z-index: 999;}
#logo-branca-topo{ filter: brightness(0) invert(1); width: 280px;}
#logo{width: 280px; }
h1, h2, p, a{ font-family: "DM Sans", sans-serif; font-weight: 400;}

/* ///// Barra de Rolagaem //// */


::-webkit-scrollbar { width: 7px;  height: 7px;}
::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 10px; /* Bordas arredondadas */}
::-webkit-scrollbar-thumb {background: #888;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #555;}


/* ///////// Div 01 ////////// */

.div-01{display: flex; background-image: url("../img/bg-div1.png");background-size: cover; background-repeat: no-repeat; background-position: center; align-items: center; justify-content: center; gap: 200px; padding-top: 20px;}
.div-01-column-01{display: flex; flex-direction: column; gap: 60px; } 
.div-01-text{display: flex; flex-direction: column; gap: 30px;}
.div-01-text h1{color: white;  font-size: 48px; letter-spacing: 1.2px; line-height: 1.2;}
.div-01-text p{width: 600px;color: #d4d4d4;  font-size: 21px; letter-spacing: 1.8px; line-height: 1.8;} 
.div-01-cta{display: flex; gap: 5px; background-color: rgba(255, 255, 255, 13%); border-radius: 100px; width: 450px; height: 60px;align-items: center; justify-content: space-between; padding-left: 20px; padding-right: 20px; margin-bottom: 70px;}
.div-01-cta div{display: flex; gap: 25px; color: white; align-items: center;justify-content: center;}
.div-01-cta div p{font-size: 12px; color: #d4d4d4; }
.div-01-cta a{ text-align: center; font-size: 13px; font-weight: 800; background-color: #348dc2; color: white; padding: 12px 20px 12px 20px; border-radius: 100px; text-decoration: none;}
.letra-i{filter: brightness(0) invert(1); width: 25px;}
.foto-pessoa{width: 330px;position: relative; top: 5px; margin-top: 60px;}

/* ///////// Div 02 ////////// */

.div-02{background-color: #222222; display: flex; align-items: center; justify-content: center; gap: 300px; padding-bottom: 50px; padding-top: 50px;}
.div-02-column-01{display: flex; flex-direction: column; gap: 40px;}
.div-02-titulo{color: white;  font-size: 40px; }
.div-02-column-02{display: flex; flex-direction: column; gap: 10px;}
.div-02-topico{display: flex; gap: 20px;}
.div-02-topico-text{ display: flex; flex-direction: column; gap: 20px;}
.titulo-azul{color: #348dc2;}
.div-02-topico-titulo{font-size: 24px; white-space: nowrap;}
.div-02-topico-description{line-height: 1.4; font-size: 19px; color: #d6d6d6; width: 330px;}
.bola-branca{ display: flex; justify-content: center; background-color: rgb(255, 255, 255); width: 35px; height: 35px; border-radius: 100px;}
.bola-verde{background-color: #00c748; width: 15px; height: 15px; margin: auto 0; border-radius: 100px;}
.topicos-desenhos{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;}
.listra-azul{background-color: #348dc2; width: 120px; height: 4px;}
.listra-branca{background-color: #343434; width: 1px; height: 120px;}
.div-02-topico-text{color: white; }

/* ///////// Div 03 e Div 05 ////////// */
.div-03{display: flex; align-items: center; justify-content: center; padding-top: 80px; gap: 35px;}
.div-03-column-01{display: flex; }
.div-03-left{display: flex; gap:30px; flex-direction: column;}
.div-03-title{color: #348dc2; font-size: 40px;}
.div-03-description{font-size: 19px; color: #012f3f; line-height: 1.5; width: 430px; }
.linha-cinza{background-color: #eff0ea; width: 1px; height: 300px;}
.div-03-column-02{display: flex; gap: 20px;}
.div-03-card-column{display: flex; flex-direction: column; gap: 20px;}
.div-03-card{width: 340px; height: 290px ;background-color: #eff0ea; border-radius: 16px; padding: 25px; display: flex; flex-direction: column; gap: 10px;}
.div-03-card-title{font-weight: 800; font-size: 17px; color: #012f3f;}
.div-03-card-text{font-size: 16px; color: #012f3f; line-height: 1.5; }
.div-03-card-icon{width: 60px; background-color: #348dc2; border-radius: 14px; padding: 10px;}
.div-03-mobile-carrosel{display: none;}

/* ///////// Div 04 ////////// */
.teste{display: flex; justify-content: center; padding-top: 60px;}
.div-04-column-01{height: 450px;border-radius: 15px; background-color: #eff0ea; display: flex; flex-direction: column; gap: 30px; width: 650px; padding: 50px;}
.div-04-column-01 h2{font-size: 38px; color: #012f3f;}
.div-04-column-01 p{font-size: 19px; color: #012f3f; width: 520px;}
.div-04-column-02{height: 450px;background-color: #338dc2; width: 450px;  border-radius: 15px; position: relative; right: 30px;} 
.div-04-cta{z-index: 999;display: block;font-size: 18px;font-weight: 800;text-decoration: none; color: white; background-color: #338dc2; text-align: center; width: 300px; border-radius: 25px; padding: 15px 25px 15px 25px;  } 
.martelo-img{position: relative; z-index: 998; width: 400px; right: 60px; top: 1rem; filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));}

/* ///////// Div 05 ////////// */
.div-05{margin-bottom: 60px;}


/* ///////// Div 06 ////////// */
.div-06{background-color: #222222; height: 70rem;}
.div-06-title{text-align: center; color: white; font-size: 40px; padding-top: 50px; padding-bottom: 50px;}
.topicos-container{display: flex;  justify-content: center;}
.topicos-content{display: flex; flex-direction: column; gap: 20px; width: 300px;}
.topico-column{display: flex; flex-direction: column; gap: 40px;}
.topico-title{font-size: 20px; color: #348dc2; font-weight: 800;}
.topico-description{color: white; font-size: 16px; line-height: 1.8;}
.linha-branca{background-color: white; width: 100%; height: 1px;} 
.div-06-img{position: relative;  width:550px; padding-right: 40px; padding-left: 40px; filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5))}
.topico-img{width: 40px;}
.topicos-container-mobile{display: none;}


/* ///////// Div 07 ////////// */
.div-07{width: 1100px; margin: 0 auto; margin-top: 90px; margin-bottom: 90px;}
.div-07-title{font-size: 40px;  margin-bottom: 40px; letter-spacing: 6px; }
.videos-container{display: flex; gap: 20px; justify-content: center; align-items: center;}
.video-item{width: 330px;  border-radius: 20px;}
.depoimento-card{display: flex;flex-direction: column; gap: 20px; width: 450px; height: 590px;}
.depoimento-card img{width: 50px; height: 50px; border-radius: 100px;}
.depoimento-perfil{display: flex; gap: 20px; justify-content: center;}
.text-nome{color: #338dc2; font-weight: 800; font-size: 20px;}
.depoimento-text{ font-size: 17px; background-color: #eff0ea; border-radius: 20px; padding: 30px;}
.videos-container-mobile{display: none;}
.triangle {margin-left: 140px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #eff0ea;}

/* ///////// Div 08 //////// */

.div-08{ background-image: url("../img/foto-rodape.png");background-size: cover; background-position: center; background-attachment: fixed;background-repeat: no-repeat;text-align: center;color: white; display: flex; flex-direction: column; justify-content: center; align-items: center;gap: 40px; padding-top: 40px; padding-bottom: 40px;}
.div-08-title{font-size: 46px; font-weight: 800; width: 800px;}
.div-08-description{font-size: 19px; width: 650px;}
.div-08-cta{text-decoration: none; background-color: white; color: #338dc2; padding: 20px 30px 20px 30px; border-radius: 60px; font-weight: 800; font-size: 18px;}
.imagem-escudo{width: 180px;}

/* /////// Footer //////// */

.footer{display: flex; justify-content: center; padding: 20px;}

/* ////////// Media Query ///////// */

@media  (max-width: 1236px){
    .div-02{gap: 180px;}
}

@media  (max-width: 1210px){
    .div-03-card{width: 300px; height: auto;}
}


@media  (max-width: 1148px){
    .topicos-content{width: 200px;}
    .video-item{width: 250px;}
}

@media  (max-width: 1129px){
    .div-02{gap: 120px;}
    .div-03-description{width: 200px;}
    .div-07{width: 900px;}
}

/* ////////// Versão Mobile ///////// */

@media (max-width: 1000px){
    
    /* Div 1 */
    .div-01{flex-direction: column;gap: 100px;}
    .div-01-text{align-items: center;}
    .div-01-cta{margin: 0 auto; margin: 20px;}
    .foto-pessoa{margin-top: 0px;}
    .div-01-text p{width: 550px;}

    /* Div 2 */
    .div-02{flex-direction: column; gap: 80px;}
    .div-02-topico-description{width: 400px;}
    .div-02-topico{margin-right: 130px;}

    /* Div 3 */
    .div-03{flex-direction: column;}
    .div-03-description{width: 430px;}
    .div-03-column-02{display: none;}
    .div-03-mobile-carrosel{display: block; margin-top: 50px; padding-bottom: 50px;}
    .slick-slide { display: flex !important; justify-content: center !important; align-items: center !important;}
    .linha-cinza{display: none;}
    .teste{padding-top: 0px;}
    

    /* Div 4 */
    .teste{flex-direction: column; align-items: center; justify-content: center;}
    .div-04-column-01{width: 500px;}
    .div-04-column-02{width: 500px; right: 0; top: -20px; }
    .martelo-img{right: 0px; left: 50px;}
    .div-04-column-01 p{width: auto;}
    .div-04-cta{margin: 0 auto;}

    /* Div 6 */
    .div-06{height: 540px;}
    .div-06-img{display: none;}
    .topicos-container{display: none;}
    .topicos-content{width: 400px;}
    .topicos-container-mobile{display: block;}
    .div-06-cta{display: block;font-size: 18px;font-weight: 800;text-decoration: none; color: white; background-color: #338dc2; text-align: center; width: 300px; border-radius: 25px; padding: 15px 25px 15px 25px; margin: 0 auto; margin-top: 60px;} 


    /* Div 7 */
    .videos-container{display: none;}
    .videos-container-mobile{display: block; margin-bottom: 100px;}
    .div-07{width: auto;}
    .div-07-title{text-align: center; width: auto;}
    .video-item{width: 280px;}

    /* Div 8 */
    .div-08-title{font-size: 40px; width: auto;}
    .div-08-description{width: auto;}
}   

@media (max-width: 587px){
    .depoimento-text{font-size: 15px;}
}

@media (max-width: 560px){
    /* Div 1 */
    .div-01-text h1{font-size: 39px;}
    .div-01-text p{font-size: 19px; width: 460px;}
    .div-08-title{font-size: 36px;}
    .topicos-content{width: 280px;}
    .depoimento-card{width: 300px;  height: 800px;}

}

@media (max-width: 500px){
    /* Div 4 */
    .div-04-column-01{width: 400px; height: 550px;}
    .div-04-column-02{width: 400px; top: -8px;}
    .martelo-img{width: 360px; left: 10px;}
    
}

@media (max-width: 460px){
    /* Div 1 */
    .div-01-cta{width: auto;}
    .div-01-text h1{font-size: 28px;}
    .div-01-text p{width: 350px;}
    .div-02-topico{margin: 0;}
    .div-02-topico-titulo{white-space: wrap;}
    .div-02-topico-description{font-size: 18px; width: auto; }
    .div-03-description{width: auto;}
    .video-item{width: 250px;}
    .div-06{height: auto; padding-bottom: 40px;}
    .div-03-card{width: 250px;}
    .div-03-card-text{width: 200px; }
    .imagem-escudo{width: 150px;}
    .div-02-column-01{width: 280px; margin: auto 0;}
    .div-03-title{font-size: 30px; margin: 0 auto;}
    .div-03-description{margin: 0 auto; width: 300px;}
}

@media (max-width: 400px){
   .div-04-column-01{width: 300px; }   
   .div-04-column-02{width: 300px; top: 0;}
   .martelo-img{width: 300px;}
   .div-04-column-01 h2{font-size: 28px;}
   .div-04-column-01 p{font-size: 18px;}
   .div-04-cta{width: 220px; white-space: nowrap; font-size: 12px; text-align: center;  margin: 0 auto;}

   .div-01-text h1{font-size: 20px; width: auto;}
   .div-01-text p{width: 250px; font-size: 14px;}
   .div-01-cta a{padding: 12px; white-space: nowrap;}
   .depoimento-perfil div p{font-size: 15px;}
   .depoimento-text{font-size: 12px;}
   .depoimento-card{width: 220px;}

 
}

@media (max-width: 375px){
    .topico-title{font-size: 16px;}
    .topico-description{font-size: 14px;}
    .topicos-content{width: 200px;}
}

@media (max-width: 362px){
    .div-01-cta{flex-direction: column; gap: 20px; height: 130px; border-radius: 25px; padding: 20px;}
    .video-item{width: 200px;}
    .div-03-card{width: 230px;}
    .div-03-card-title{ font-size: 16px;}
    .div-03-card-text{font-size: 14px;}
}

@media (max-width: 326px){
    .martelo-img{width: 280px;}
    .div-02-topico-description{font-size: 14px; width: 250px; }
    .div-06-cta{width: auto; white-space: nowrap; font-size: 15px;}
    .foto-pessoa{width: 280px;}
    
}