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

html, body{font-family: "Roboto", sans-serif; overflow-x: hidden !important; }


#topo2{background-image: url("..//img/banner-01.jpg"); background-position: top; background-repeat: no-repeat; background-size: cover;}
#topo{background-color: #213949; padding: 10px 0;}
.navbar{padding: 1rem 1rem;}
.navbar-brand img{width: 280px;}
.navbar-light .navbar-nav .nav-link{color: #fff; text-transform: uppercase; font-size:1.0375rem}
.navbar-light .navbar-nav .nav-link:hover{color: #979797;}
.icones-redes{position: absolute; display: flex; align-items: center; right: 20px; top: 10px; gap: 5px; }
.icones-redes h4{color: #fff; font-size: 1.2rem; margin-right: 25px; margin-bottom: 0; font-weight: 300;}
.icones-redes img{width: 35px;}
.navbar-collapse{margin-top: 45px;}
.navbar-nav .nav-link {padding: 5px 10px; line-height: 1;   }
.navbar-nav .nav-item:not(:last-child) {border-right: 1px solid #284457;}
.navbar-nav .nav-item:last-child {border-right: none;margin-right: 0;padding-right: 0;}

.banner-mobile{display: none; }

.carousel-control-next, .carousel-control-prev{opacity: 1; z-index:3;}
.carousel-control-next-icon, .carousel-control-prev-icon{width: 50px; height: 50px;}
.carousel-control-prev {left: 100px;}
.carousel-control-next {right: 100px;}
.carousel-control-prev-icon{background-image: url("..//img/seta-01.svg");}
.carousel-control-next-icon{background-image: url("..//img/seta-02.svg");}

#card-especialidades{padding: 30px 0;}
#card-especialidades h1{text-transform: uppercase; font-weight: 300; color: #213e51; padding-bottom: 20px;}
.card-imagem{ overflow: hidden; border-bottom: 8px solid #213949; aspect-ratio: 16 / 9;}
.card-imagem img{width: 100%; object-fit: cover; aspect-ratio: 16 / 9;}
.btn-saiba{background-color: #213949 !important; color: #fff !important; margin-top: 30px; border-radius: 20px;}
.btn-saiba:hover{color: #fff; text-decoration: none; background-color: #476274 !important;}

#sobredra{background-image: url("..//img/fundo-dra.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
.imagem-dra img{width: 100%; margin-top: -25px;}
#sobredra h1{text-transform: uppercase; font-weight: 300; color: #ddd7c7; padding-top: 20px;}
#sobredra p{color: #fff;}
.btn{background-color: #ddd7c7; color: #213e51; font-weight: bold; border-radius: 20px;}
.btn-dra{margin-top: 20px;}



#instituto{background-color: #f6f4f0; padding: 20px 0;}
#instituto h1{text-transform: uppercase; font-weight: 300; color: #213949; font-size: 2rem; margin: 0;}
#instituto p{font-weight: bold; color: #213949;}
#instituto p:nth-of-type(1){font-size: 18px;}
.texto-sobre p{font-weight: normal !important; color: #444444 !important;}
.imagem-instituto{border-bottom: 8px solid #213949; overflow: hidden;}
.imagem-instituto img{width: 100%;}

#equipe{padding: 50px 0;}
#equipe h1{text-transform: uppercase; font-weight: 300; color: #213949; font-size: 2rem; margin: 0; padding-bottom: 30px;}
#equipe h4{font-size: .99rem; padding-top: 10px; margin: 0; color: #213949;}


#new{background-color: #f6f4f0; padding: 50px 0;}
#new h1{text-transform: uppercase; font-weight: 300; color: #213949; font-size: 2rem; margin: 0; padding-bottom: 15px;}
#new p{font-weight: bold; color: #213949;}
.texto-new h3{color: #213949; font-size: 1.8rem; margin: 0; font-weight: 300;}
.texto-new p{font-weight: normal !important; color: #444444 !important; font-size: 15px;}
.data{font-size: 1rem; color: #213949; font-weight: 700;}
.imagem-new img{width: 100%;}
.borda{height: 8px; background-color: #213949;  }
.button{display: flex; gap: 20px;}
.continuar{background-color: #213949; color: #fff; font-weight: normal;}
.continuar:hover{background-color: #476274 !important; color: #fff;}
.todas{background-color: #8c8c8c; color: #fff; font-weight: normal;}
.todas:hover{background-color: #afafaf; color: #fff;}

/* SOBRE */

.section-dra {padding: 50px 0;}
.section-dra .text {font-size: 16px;line-height: 1.6;}
.section-dra h1 {text-transform: uppercase; font-weight: 300; color: #213949; font-size: 2rem; margin: 0; padding-bottom: 15px;}
.section-dra h3 {font-size: 16px;font-weight: normal;margin-bottom: 20px;color: #666;}
.faq {margin-top: 30px;}
.faq details {margin-bottom: 10px;border-radius: 20px;overflow: hidden;background: #213949;color: #fff; border: 1px solid #213949;}
.faq summary {display: flex; justify-content: space-between; padding: 12px 16px;cursor: pointer;font-weight: bold; list-style: none; transition: transform 0.3s ease;}
.faq summary img{width: 15px; transition: transform 0.3s ease;}
.faq summary::-webkit-details-marker {display: none; }
.faq details[open] summary {background: #476274; transition: transform 0.3s ease;}
.faq details[open] summary img {transform: rotate(180deg);transition: transform 0.3s ease;}
.faq p {padding: 12px 16px;margin: 0;background: #f9f9f9;color: #333;}
.section-dra .image {text-align: center;}
.section-dra .image img {max-width: 100%; border-bottom: 7px solid #213e51;}
.galeria{background-color: #f6f4f0; padding: 20px 0;}
.galeria h1 {text-transform: uppercase; font-weight: 300; color: #213949; font-size: 2rem; margin: 0; padding-bottom: 15px;}
.galeria-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 12px;}
.foto {position: relative;overflow: hidden; cursor: pointer; border-bottom: 7px solid #213e51;}
.foto img {width: 100%;display: block;transition: transform 0.3s ease;}
.foto:hover img {transform: scale(1.05);}
/* Overlay escuro com ícone */
.overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;}
.overlay img {width: 80px !important; color: #fff;}
.foto:hover .overlay {opacity: 1;}
#video {position: relative;z-index: 999;padding: 50px 0;}
#video h1{text-transform: uppercase; font-weight: 300; color: #213949; font-size: 2rem; margin: 0; padding-bottom: 15px;}
.divisa img {width: 100%;margin-bottom: 10px;}
.box-video { box-shadow: 0px 4px 14px #000;overflow: hidden;max-width: 100%;}
.video-container {position: relative;width: 100%;padding-bottom: 56.25%; height: 0;overflow: hidden;}
.video-container iframe {position: absolute; top: 0; left: 0; width: 100%;height: 100%;border: 0; }
/* Modal */
.modal {display: none;position: fixed;z-index: 9999;padding-top: 60px;left: 0;top: 0;width: 100%;height: 100%; overflow: hidden;background-color: rgba(0,0,0,0.8);}
.modal-content {margin: auto;display: block;max-width: 90%;max-height: 90vh;object-fit: contain;background: transparent;border: none;}
.close {position: absolute;top: 20px;right: 35px;color: #fff;font-size: 40px;font-weight: bold;cursor: pointer;}
.prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto;padding: 16px;color: white;font-weight: bold;font-size: 40px;user-select: none;transition: 0.3s;}
.prev:hover, .next:hover {color: #ccc;}
.prev { left: 20px; }
.next { right: 20px; }


/* Especialidade */
#section-especialidade{padding: 50px 0;}
.texto-titulo p:nth-of-type(1){line-height: 1; color: #213949; font-size: 20px; font-weight: 300;}
.texto-titulo p:nth-of-type(2) {font-weight: 600; margin: 30px 0;}
.texto-titulo h1{text-transform: uppercase; font-weight: 300; color: #213949; font-size: 2rem; margin: 0; }
.card-especialidade{margin-bottom: 30px;}
.card-servicos p{margin: 0; color: #7d7d7d; font-size: 18px;}
.btn-especialidade{background-color: #213e51; color: #fff; margin-top: 30px;}
.btn-especialidade:hover{color: #fff; text-decoration: none; background-color: #476274 !important;}
.imagem-especialidade{position: relative;}
.imagem-especialidade img{width: 100%;}
.texto-especialidade{position: absolute; top: 120px; left: 75px;}
.card-dra{background-color: #213949; width: 175px; margin-bottom: 30px;}
.card-dra h4{color: #fff; font-size: 20px; padding: 5px; font-weight: 300;}
.texto-especialidade h2{text-transform: uppercase; font-size: 2.5rem; color: #213949; font-weight: 400;}
.texto-especialidade p{font-size: 2.4rem; color: #213949; font-weight: 300; line-height: 1;}
#especialidade{margin-bottom: 30px;}
/* Especialidade Detalhe */
.imagem-detalhe img{border-bottom: 7px solid #213e51;}
.btn-saiba img{width: 25px; margin-right: 5px;}
#outras-especialidade{background-color: #f6f4f0; padding-bottom: 30px;}
#outras-especialidade h1{margin-bottom: 30px; padding-top: 30px;}
/* Agendamento */
#agendamento{padding-top: 50px;}
.form-row{align-items: center;}
.form-control{border-radius: 0; border: none; padding: 1.380rem .75rem; border-left: 7px solid #213949; background-color: #d9d9d9;}
.btn-agendamento{border-radius: 0 !important; background-color: #213949 !important; color: #fff !important; padding: .6rem .75rem;}
.btn-agendamento:hover{background-color: #476274 !important; color: #fff !important;}
.paciente{margin-bottom: -160px;}
.agendar-whats{position: absolute;top: 215px;left: 0;right: 0;}
/* Equipe */
#pg-equipe{padding-top: 50px;}
.ms-equipe .imgTitle{border-bottom: 7px solid #213949; cursor: pointer;}
.ms-equipe .imgTitle img{width: 100%;}
.dra-modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.7);display: flex;justify-content: center;align-items: center;z-index: 9999;}
.dra-modal-content {background: #fff;padding: 20px;border-radius: 10px;max-width: 500px;width: 90%;text-align: center;position: relative;}
#dra-modal-foto {width: 150px;height: 150px;border-radius: 50%;
object-fit: cover;display: block; margin: 0 auto 20px;}
.dra-modal .dra-close {position: absolute;top: 10px;right: 15px;font-size: 25px;cursor: pointer;}
.descricao-equipe h4{font-size: .99rem; padding-top: 10px; margin: 0; color: #213949;}
/* New */
#pg-new{ padding: 50px 0;}
.new-noticias{margin-top: 30px;}
.new-noticias h1{font-weight: 300; padding: 30px 0;}
.card-servicos h3{color: #213949; font-size: 1.3rem; margin: 0;}
/* Contato */
.endereco{text-align: center;}
.endereco img{width: 35px;}
.endereco p{display: flex;flex-direction: column;align-items: center;}
.endereco p:nth-of-type(1){font-size: 1.5rem;}
.btn-contato{float: right; background-color: #213949; color: #fff; border-radius: 0;     padding: 20px 35px;font-size: 1.3rem;font-weight: 400;}
.btn-contato:hover{background-color: #476274;}

#localizacao{height: 450px;}

#rodape{background-color: #1e3747; padding: 20px 0;}
#rodape{text-align: center; color: #fff;}
#rodape .row{align-items: center;}
#rodape img{width: 30px;}
#rodape a {color: #fff; text-decoration: none;}
#rodape h3{font-size: 1.5rem;}
.telefone a h3:hover{color: #cfcfcf;}
.telefone img{margin-right: 10px;}
.endereco h3{font-size: 1rem !important; width: 250px; margin: 0 auto;}
.endereco img{margin-bottom: 10px;}
.logo-rodape img{width: 70% !important;}

footer {background-color: #152b37; padding: 20px 0;}
footer .row{align-items: center;}
#direitos p{margin: 0; color: #fff;}
#logo-as{text-align: right;}

@media (max-width: 1024px) {
    .texto-depoimento h1{font-size: 1.4rem;}
    .texto-depoimento p{font-size: 13px;}
    .imagem-ceo img{width: 100%;}
    .texto-sobre p{font-size: 13px}
    .banner-desktop{display: none;}
    .banner-mobile{display: block; }
    .carousel-control-prev {left: 0px;}
    .carousel-control-next {right: 0px;}
    .order-2{order: 2;}
    .order-1{order: 1;}
    #numeros .col-lg-3{width: 50%;}
    .texto-sobre-pg{text-align: center;}
    .section-dra{text-align: center;}
    #video, #section-especialidade, #outras-especialidade, #agendamento, #pg-equipe, #contatos {text-align: center;}
}


@media (max-width: 990px) {
    .texto-depoimento {text-align: center;}
    .texto-depoimento h1{font-size: 2rem;}
    .texto-depoimento p{font-size: 16px;}
    .btn{margin-bottom: 20px;}
    .texto-sobre{text-align: center;}
    .imagem-ceo img{width: 100%;}
    .texto-sobre p{font-size: 16px}
    #cases{text-align: center;}
    #lavoura{text-align: center;}
    .footer-contatos{text-align: center;}
    .logo-rodape{width: 60%; margin:  0 auto;}
    .social {padding-top: 20px;}
    footer {text-align: center;}
    #logo-as{text-align: center; }
    .navbar-collapse {position: absolute;top: 95px;right: 0px;width: 200px; margin: 0; background: #213949; z-index: 10;}
    .navbar-nav .nav-link{padding: 10px ;}
    .nav-item{padding: 0 10px;}
    .descricao-2{margin-bottom: 20px;}
    .btn-a{margin: 0 auto; bottom: 0; float: none;}
    #rodape .row{gap: 30px;}
    #card-especialidades, #sobredra, #instituto, #equipe, #new, #localizacao, #rodape{text-align: center;}
    .button{justify-content: center;}
    .texto-new{padding-top: 30px;}
    #sobredra{background-image: none; }
    #sobredra .col-lg-8{background-color: #213949;}
    .ms-equipe{display: flex;   flex-wrap: wrap;justify-content: center;}
    .ms-equipe .imgTitle img{width: 100%;}
    .imagem-dra img{margin: 0;}
    .faq summary {text-align: center;}
    .faq summary span { flex: 1; text-align: center;}
    .faq summary img { margin-left: auto;}
    .d-flex.especialidades-mobile { flex-direction: column;text-align: center;gap: 15px; }
    .d-flex.especialidades-mobile .btn {width: 100%; margin: 5px 0;justify-content: center;}
    .d-flex.especialidades-mobile .btn img {margin-right: 8px; }
    .imagem-detalhe{order: 1;}
    .order-desc{order: 2;}
    .new-noticias{margin: 0;}
    .mb-5, .my-5 {margin-bottom: 0 !important;}
    .paciente{margin: 0;}
    .modal-content { display: flex;margin: 0 auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 95%;max-height: 80vh;}
    .prev, .next{top: 45%; z-index: 10;}
   

}

   


@media (max-width: 768px) {
    .icones-redes{position: relative; top: 0px; right: -45px; }
    .icones-redes h4{display: none;}
    .navbar-brand img{width: 180px;}
    button:focus { outline: 0px dotted; outline: 0px auto -webkit-focus-ring-color;}
    #sementes .row .col-lg-2 {flex: 0 0 50%;max-width: 50%;}
    #contatos-direto{padding-left: 20px;}
}

@media (max-width: 500px) {
    .icones-redes { right: -10px;}
}