@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html, body{ overflow-x: hidden !important; }

body{font-family: "Raleway", sans-serif; background-color: #FAFAFA;}
#topo{padding: 56px;}
.navbar-expand-lg .navbar-nav{gap: 22px;}
.nav-link{color: #777E90; font-size: 16px; font-weight: 600;}
.btn-outline-success{display: flex; align-items: center; gap: 5px; padding: 5px; width: 115px; height: 36px; border-radius: 8px; background-color: #009231; color: #fff; font-weight: 600; box-shadow: 0px 4px 10px 0px #0000001A;}

#hero h1{font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 78px;line-height: 85px;letter-spacing: 0;color: #ec7f57; padding: 10px 0;}
.text-sub{font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 32px;line-height: 36px;letter-spacing: 0;color: #777E90; padding: 10px 0;}
.btn-1{width: 315px; height: 55px; border-radius: 25px; background-color: #EA8860; font-size: 32px; font-weight: 600; line-height: 36px; color: #fff;}
.btn-1:hover{background-color: #d37a57; color: #fff;}
.btn-2{width: 356px; height: 55px; border-radius: 25px; background-color: #009231; font-size: 32px; font-weight: 600; line-height: 36px; color: #fff; white-space: nowrap;}
.btn-2:hover{background-color: #03832e; color: #fff;}
.text-menor{padding: 10px 0; font-size: 20px; line-height: 25px; font-weight: 600; color: #777E909C;}
.navbar-brand img{width: 200px;}

.section-card{display: flex; align-items: center; justify-content: center;}
.card{height: 280px; background: #ffffff;border-radius: 20px;box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);padding: 20px;display: flex;flex-direction: column;align-items: center;text-align: center; border: none;}
.card img{max-height: 120px;}
.card h5{font-size: 20px; font-weight: 600; color: #EA8860; margin-bottom: 2px;}
.card h5::after { content: ""; display: block; width: 174px; height: 1px; border-radius: 20px; background-color: #EA8860; margin-top:7px; margin-left: auto; margin-right: auto;}
.card p{width: 180px; font-size: 12px; font-weight: 500; color: #777E90C9;}

#sobre .row{align-items: center;}
.texto-sobre-dr{text-align: right; color: #777E90CC; padding-right: 80px;}
.texto-sobre-dr p{font-size: 20px; font-weight: 500; line-height: 35px;}
.texto-sobre-dr p span{font-weight: 700;}

#depoimentos{background-color: #EA8860; padding: 55px 0;}
.caixa-dr{display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 8px; width: 282px; height: 55px; margin-bottom: 30px; }
.caixa-dr h5{color: #fff; margin: 0;}
.sobre-texto-dr p{font-size: 16px; font-weight: 500; color: #fff;}
.sobre-texto-dr p span{font-weight: 700;}

.galeria {padding: 0 40px;display: flex;justify-content: center;}
.grid {display: grid;grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;gap: 20px;max-width: 800px;width: 100%;}
.foto-principal {width: 100%;max-width: 321px; height: 277px;grid-column: 1 / 2;grid-row: 1 / 2;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 12px;}
.foto-principal img {width: 100%;height: 100%;object-fit: cover;border-radius: 12px;}
.card-01 {width: 100%;max-width: 241px;height: 277px;grid-column: 2 / 3;grid-row: 1 / 2;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 12px;background: #ffecec;}
.card-01  img {width: 100%;height: 100%;object-fit: cover;border-radius: 12px;}
.card-galeria-1 {width: 100%;max-width: 282px;height: 147px;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 12px;background: #fff;}
.card-galeria-1 img{width: 100%; width: 100%;object-fit: cover;aspect-ratio: 16 / 9;}
.card-galeria-2 {width: 100%;max-width: 241px;height: 147px;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 12px;background: #fff;}
.card-galeria:nth-of-type(1) {grid-column: 1 / 2;grid-row: 2 / 3;}
.card-galeria:nth-of-type(2) {grid-column: 2 / 3;grid-row: 2 / 3;}
.card-galeria-1, .card-galeria-2 img {width: 100%;object-fit: cover;border-radius: 12px;}
.modal {display: none; position: fixed;z-index: 9999;inset: 0; background-color: rgba(0,0,0,0.85);align-items: center;justify-content: center;padding: 20px; box-sizing: border-box;}
.modal-content {display: block;max-width: 95vw; max-height: 95vh;   width: auto; height: auto;
 border-radius: 8px;box-shadow: 0 8px 24px rgba(0,0,0,0.6);object-fit: contain;}
.close {position: absolute;top: 18px;right: 22px;color: #fff;font-size: 36px;cursor: pointer;}
.prev, .next {cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);
font-size: 40px;color: #fff;padding: 12px;user-select: none;}
.prev {text-decoration: none; left: 8px; }
.next {text-decoration: none; right: 8px; }
.caption {margin-top: 10px;color: #ddd;text-align: center;font-size: 16px;}

#consultas{padding: 50px 0;}
.consulta-texto-dr h1{font-size: 36px; font-weight: 700; color: #EA8860; width: 531px; padding-bottom: 10px;}
.consulta-texto-dr ul{color: #EA8860; font-weight: 800;}
.foto-consultorio {position: relative;width: 100%;height: 50vh;border-radius: 20px;overflow: hidden; box-shadow: -3px 1px 20px #ccc;}
.foto-consultorio img {position: absolute;top: 0;left: 0;
width: 100%;height: 100%;object-fit: cover;animation: crossfade 8s infinite;opacity: 0;}
.foto-consultorio img:nth-child(1) {animation-delay: 0s;}
.foto-consultorio img:nth-child(2) {animation-delay: 4s;}
@keyframes crossfade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }   
    40%  { opacity: 1; }   
    60%  { opacity: 0; }   
    100% { opacity: 0; }
}

.img-clinica {position: relative;width: 90%;height: 50vh;border-radius: 20px;overflow: hidden; box-shadow: -3px 1px 20px #ccc;}
.img-clinica img {position: absolute;top: 0;left: 0;
width: 100%;height: 100%;object-fit: cover;animation: crossfade 8s infinite;opacity: 0;}
.img-clinica img:nth-child(1) {animation-delay: 0s;}
.img-clinica img:nth-child(2) {animation-delay: 4s;}
@keyframes crossfade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }   
    40%  { opacity: 1; }   
    60%  { opacity: 0; }   
    100% { opacity: 0; }
}

#programa_meta{background-color: #EA8860; padding: 50px 0;}
#programa_meta .row{align-items: center;}
.texto-meta360{color: #fff;}
.texto-meta360 p{font-size: 20px; font-weight: 500;}
.texto-meta360 p span{font-weight: 700;}
.texto-meta360 ul{font-size: 20px;}
.btn-3{display: flex;width: 408px;height: 65px;justify-content: center;align-items: center;gap: 10px;flex-shrink: 0; border-radius: 25px;background: rgba(255, 255, 255, 0.80); color: #EA8860;text-align: center;font-size: 32px;font-style: normal;font-weight: 600;
line-height: 36px;}
.btn-3:hover{background: #eea081; color: #fff;}

#conteudo{padding: 50px 0;}
#conteudo .row{align-items: center;}
.texto-conteudo{color: #777E90; padding-left: 80px;}
.texto-conteudo h2{font-size: 36px; width: 383px; font-weight: 600; }

#meta-familia{background-color: #FFC7C275; padding: 50px 0;}
#meta-familia .row{align-items: center;}
.texto-familia{color: #777E90CC; width: 453px;}
.texto-familia h2{font-size: 20px; font-weight: 700; line-height: 35px;}
.imagem-familia{text-align: center;}

#contato{padding: 50px 0;}
.titulo{width: 562px; margin: 0 auto; padding-bottom: 30px;}
.titulo h2{color: #777E90;text-align: center;font-size: 32px;font-style: normal;font-weight: 600;line-height: 36px; }
.titulo h2 span{font-style: italic; font-weight: 700;}
.btn-q{display: flex;width: 423px;height: 65px;justify-content: center;align-items: center;gap: 10px;flex-shrink: 0;border-radius: 25px;background: rgba(0, 0, 0, 0.80);color: #FFC7C2;text-align: center;font-size: 32px;font-style: normal;font-weight: 600;line-height: 36px; margin: 30px auto;}
.btn-q:hover{background-color: #03832e; color: #fff;}
.contato-form .tag{display: flex;width: 197px;height: 45px;padding: 10px;justify-content: center;align-items: center;gap: 10px;flex-shrink: 0;border-radius: 8px;border: 2px solid #EA8860; color: #EA8860;font-size: 20px;font-style: normal;font-weight: 800;line-height: 35px; background-color: transparent;}
.texto-contato {width: 408px;flex-shrink: 0; margin: 19px 0;}
.texto-contato h3{color: #777E90;font-size: 16px;font-style: normal;font-weight: 700;line-height: normal;text-transform: uppercase; margin: 0;}
.texto-contato p{color: #777E90;font-size: 14px;font-style: normal;font-weight: 500;line-height: normal;}
.form-control-name{display: flex;width: 450px;height: 45px;padding: 10px;align-items: center;gap: 10px;flex-shrink: 0; margin-bottom: 14px;}
.form-control::placeholder{color: rgba(119, 126, 144, 0.80);font-size: 20px;font-style: normal;font-weight: 800;line-height: 35px; }
.linha{display: flex; gap: 30px;}
.form-linha{display: flex;width: 210px;height: 45px;padding: 10px;align-items: center;gap: 10px;flex-shrink: 0; margin-bottom: 14px;}
.form-textarea{display: flex;width: 446px;height: 105px;padding: 10px;align-items: flex-start;gap: 10px;
flex-shrink: 0; margin-bottom: 19px;}
.btn-enviar{display: flex;width: 210px;height: 45px;padding: 10px;align-items: center;gap: 10px;flex-shrink: 0; border-radius: 8px;border: 2px solid #EA8860;background: #EA8860; color: #FFF;font-size: 20px;font-style: normal;font-weight: 800;line-height: 35px; }
.maps a{text-decoration: none; color: #777E90;}
.maps a:hover{color: #4d4f53;}


/* Responsivo */

@media screen and (max-width: 1366px){
    .img-clinica img{width: 100%;}
}

@media screen and (max-width: 1200px){
    .grid {grid-template-columns: 1fr; max-width: 500px;}
  .foto-principal,
  .card-01,
  .card-galeria {max-width: 100%; justify-content: center;}
}

@media screen and (max-width: 990px){
    #topo{padding: 30px 0;}
    .navbar-collapse {position: absolute;top: 85px;right: 10px;width: 250px;background: #ea8860;}
    .navbar-expand-lg .navbar-nav{gap: 0px;}
    .navbar-nav{text-align: right;}
    .nav-link{color: #fff !important; font-size: 20px; padding: 10px ;}
    .nav-link:hover{color: #acacac;}
    .navbar-brand img{width: 95px;}
    #sobre{text-align: center;}
    .texto-sobre-dr{text-align: center; padding: 0;}
    #depoimentos{text-align: center;}
    .caixa-dr{margin:30px auto;}
    .galeria{padding: 30px 0;}
    .grid {grid-template-columns: auto; max-width: 100%; margin-top: 30px;}
    .card-galeria-1, .card-galeria-2{max-width: 100%; align-items: normal;}
    #consultas{text-align: center; padding-top: 30px;}
    .consulta-texto-dr h1{margin: 0 auto;}
    #programa_meta{text-align: center;}
    #conteudo{text-align: center;}
    .texto-conteudo{padding: 20px 0;}
    .texto-conteudo h2{margin: 0 auto; width: 100%;}
    #meta-familia{text-align: center;}
    .texto-familia{margin: 0 auto; width: 100%;}
    .contato-form .tag{margin: 0 auto;}
    .texto-contato{margin: 20px auto;}
    #contato form{width: 100%; margin: 0 auto;}
    .linha{flex-direction: column; gap: 10px;}
    .form-linha{width: 100%;}
    .form-textarea{width: 100%;}
    .btn-enviar{margin: 0 auto;}
    #sobre, #depoimentos, #consultas, #conteudo, #meta-familia,  #contato ul{list-style-position: inside; padding: 0; margin: 0 auto; text-align: center; max-width: 600px; }
    .foto-consultorio{margin-bottom: 30px;}
    .img-clinica{margin-bottom: 30px; width: 100%;}
    .texto-conteudo ul{margin: 0; padding: 0;}
    .btn-1, .btn-2, .btn-3, .btn-q{margin: 0 auto; width: 100%; font-size: 25px;}
    .logo-meta img{width: 100%; }
    .imagem-dr img{width: 100%; }
    .form-control-name{width: 100%;}

}

@media screen and (max-width: 625px){
    #hero{text-align: center;}
    #hero h1{font-size: 36px; line-height: normal;}
    .text-sub{font-size: 22px;}
    .btn-1, .btn-2{margin: auto;}
    .titulo{width: 100%;}
    .foto-consultorio img{width: 100%;}
    .consulta-texto-dr h1{width: 100%;}
    .plataforma-conteudo img{width: 100%;}
    .texto-contato{width: 100%; text-align: center;}
    
    
}