body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}
p {
  font-size: 18px;
  line-height: 1.6;
  color: #393939;
}
.fonte-600 {
  font-weight: 600;
}
/* #banner {
    background-image: url('../image/banner01-mobile.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
} */
.fonte-22 {
  font-size: 20px;
}
#banner h1 {
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}
#banner h1 span {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}
#menu {
  height: 120px;
  transition: all 0.3s ease;
  background: rgba(73, 73, 75, 0.7);
}
/* .conteudo-menu {height: 100px;} */
.menu ul {
  list-style: none;
  font-size: 14px;
}
.menu a {
  color: #333;
}
.redes-sociais {
  margin-top: 20px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}
#menu .logo {
  width: 230px;
  transition: all 0.3s ease;
}

#menu.scrolled {
  height: 80px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background-color: #7d7d7d;
}
#menu.scrolled .redes-sociais {
  margin-top: 5px;
  margin-bottom: 10px;
}
#menu.scrolled .logo {
  width: 160px;
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 130px 0;
}
.parallax1 {
  background-image: url("../image/parallax1-mobile.jpg");
}
.parallax2 {
  background-image: url("../image/parallax2-mobile.jpg");
}

.bg-primary,
.offcanvas {
  background-color: #0064A5 !important;
  height: fit-content !important;
}
.text-primary {color: #00639C !important;}
.text-secondary {color: #842323 !important;}
.border-secondary {border-color: #991B1C !important;}
.btn-primary {background-color: #0064A5 !important; border-color: #fff;}
.btn-primary:hover {background-color: rgba(0, 100, 165, 0.7);}
.btn-secondary {background-color: #991B1C !important;}
.btn-secondary:hover {background-color: rgba(153, 27, 28, 0.7);}
.btn-verde {background-color: #00782D; color: #fff;}
.btn-verde:hover {background-color: rgba(0, 120, 45, 0.7); color: #fff;}
.text-verde {color: #00762F;}
.text-azul {color: #00B0FC;}
.btn-outline-white {color: #fff; border: 2px solid #fff;}
.btn-white {background-color: #fff; color: #515151;}
.bg-success {background-color: #fff !important;}
#atendimento {background-color: #DCF6FF;}
#localizacao {background-color: #DDF5ED;}
#ortopedia-infantil {background-color: #f6e3e1; overflow: hidden;}
#contato {background-color: #E5E5E5;}
#faq h2 {color: #007FBD;}
#shantal {background-color: #5C5C5C;}

.image {
  margin-bottom: 8px;
}

form input,
form textarea {
  padding: 4px 16px;
  border-radius: 25px;
  border: 2px solid black;
}

.accordion-button {
  border-radius: 30px !important;
  border: none !important;
  box-shadow: none !important;
  color: #4a4a4a !important;
}
.accordion-button:not(.collapsed) {
  border-radius: 30px 30px 0 0 !important;
}
.accordion-collapse {
  border-radius: 0 0 30px 30px !important;
}
.accordion-button.collapsed {
  border-radius: 30px !important;
}
.accordion-body {
  border-radius: 0 0 30px 30px !important;
}
.accordion-item {
  border: 1px solid #11456d !important;
  border-radius: 30px !important;
  overflow: hidden;
}
.accordion-header,
.accordion-collapse {
  background-color: #ebebeb;
}

.accordion-button::after {
  background-image: none !important;
  content: "+";
  font-weight: bold;
  font-size: 1.5rem;
  color: #0064A5;
  transform: none !important;
  transition: transform 0.2s ease-in-out;
  background-color: #fff;
  text-align: center;
  border-radius: 50%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quando o accordion está aberto */
.accordion-button:not(.collapsed)::after {
  content: "–";
}

.anchor-link {
  scroll-margin-top: 180px; /* ajuste conforme a altura do seu header fixo */
}
#sobre {scroll-margin-top: 60px;}
#localizacao {scroll-margin-top: 180px;}
#contato {scroll-margin-top: 270px;}
#faq {scroll-margin-top: 166px;}
#ortopedia {scroll-margin-top: 65px;}
#atendimento {scroll-margin-top: 20px;}
#ortopedia-infantil {scroll-margin-top: 60px;}

.arrow svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#ortopedia .arrow svg {top: 58%;}
.arrow .prev {
  left: 0;
  cursor: pointer;
}
.arrow .next {
  right: 0;
  cursor: pointer;
}

footer {background-color: #00782B;}
footer p {font-size: 14px;}

#estrutura .card {border-radius: 30px;}
.card-1 {background-color: #EABF4E;}
.card-2 {background-color: #B9D5ED}
.card-3 {background-color: #F5B3AE}
.card-4 {background-color: #D3C0BF}
.card-5 {background-color: #9CC9A6}
.card-6 {background-color: #D0E4A6}
.card-7 {background-color: #D0E4A6}
.card-8 {background-color: #F5B3AE}
.card-9 {background-color: #B9D5ED}

.galeria {
  display: flex;
  gap: 20px;
  height: 400px; /* ajuste conforme precisar */
}

.col-esquerda {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.linha-baixo {
  display: flex;
  gap: 20px;
  flex: 1;
}

.img {
  background-size: cover;
  background-position: center;
  border-radius: 25px;
}

/* tamanhos */
.img-top {
  flex: 1;
}

.linha-baixo .img {
  flex: 1;
}

.img-direita {
  flex: 1;
}

.btn:hover,
.link-osso:hover {
  cursor: url('../image/osso.png') 16 16, pointer;
}

#ortopedia-infantil .marca-dagua-right { width: 250px !important; right: -35px !important; top: calc(50% - 300px) !important;}

@media screen and (max-width: 767px) {
  .arrow .next,
  .arrow .prev {
    width: 25px;
    margin-top: 90px;
  }
  .arrow .next {
    float: right;
  }

  footer {
    text-align: center;
  }

  #banner {
    align-items: end !important;
    background-size: contain;
    margin-top: 0;
    padding-top: 60px;
  }

  #banner img {
    height: 270px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    margin-bottom: 16px;
  }

  #banner video {width: 100%; margin-bottom: 16px;}

  #banner h1,
  #banner h1 span,
  #banner p,
  #ortopedia-tradicional p,
  #acolhimento p,
  #estrutura p,
  #ortopedia p,
  #relacao-bairro p,
  #corpo-clinico p {
    text-align: center;
  }

  h2 {
    text-align: center;
  }

  .btn-secondary {
    margin: 0 auto;
    display: table;
  }

  footer {overflow: hidden;}
  footer img {
    width: 80% !important;
    margin: 0 auto 20px;
  }

  footer p {
    justify-content: center;
  }

  ul {
    text-align: left;
  }

  #ortopedia-tradicional img,
  #acolhimento img,
  #ortopedia img,
  #relacao-bairro img,
  #estrutura img.clinica,
  #banner-clinica img {
    width: 80%;
    margin: 0 auto 16px;
    text-align: center;
    display: block;
    float: none !important;
  }

  #atendimento h3,
  #atendimento p,
  #sobre p,
  #localizacao p {
    text-align: center;
  }

  #consultorios {margin-top: 16px;}

  .galeria {
    flex-direction: column;
  }

  #faq h2.text-azul {text-transform: uppercase;}
  #faq .marca-dagua {width: 32px!important; top: -38px!important;}
  #ortopedia .marca-dagua {width: 32px!important; right: 0!important; top: 55px!important;}
  #estrutura .marca-dagua-right {width: 42px!important; right: 0!important; top: -20px!important;}
  #estrutura .marca-dagua-left {width: 42px!important; left: 0!important; bottom: -28px!important;}
  #ortopedia-infantil .marca-dagua-right { display: none;}
  #sobre .marca-dagua-right {width: 42px!important; right: 0!important; top: -20px!important;}
  
  .onda {margin-top: -8px;}
}

.slick-track {
  display: flex !important;
  align-items: stretch !important;
}

.slick-slide {
  height: auto !important;
  display: flex !important;
}

.slick-slide > div {
  display: flex !important;
  width: 100%;
}

#sobre .image {
  width: 80%;
}

@media screen and (min-width: 1024px) {
  #banner {
    /* background-image: url("../image/onda-banner.png"); */
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.7);
    /* padding: 200px 0 120px; */
    height: 100vh;
  }
  #banner h1,
  #banner h1 span,
  #banner p {
    color: #fff;
  }
  #onda-banner {
    bottom: -2px;
  }

  #banner .video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

  .parallax1 {
    background-image: url("../image/parallax1.jpg");
  }
  .parallax2 {
    background-image: url("../image/parallax2.jpg");
  }

  .slick-slide {
    margin: 0 10px;
  }

  .anchor-link {
    scroll-margin-top: 60px; /* ajuste conforme a altura do seu header fixo */
  }

  #sobre {scroll-margin-top: 60px;}
  #localizacao {scroll-margin-top: 60px;}
  #contato {scroll-margin-top: 60px;}
  #faq {scroll-margin-top: 60px;}
  #ortopedia {scroll-margin-top: 100px;}
  #atendimento {scroll-margin-top: -10px;}
  #ortopedia-infantil {scroll-margin-top: 60px;}

  .arrow .prev {
    left: -50px;
    fill: #0064A5;
  }
  .arrow .next {
    right: -50px;
    fill: #0064A5;
  }

  #ortopedia .arrow .prev,
  #ortopedia .arrow .next {
    fill: #007730;
  }

  footer img {
    width: 100%;
  }

  #banner .container {
    padding-right: 50px;
  }

  .slide-clientes {
    height: 200px;
  }
  .slide-clientes .slick-slide {
    height: 200px !important;
  }

  .slick-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .slick-4 .cards {margin-bottom: 48px;}

  #relacao-bairro {
    background-image: url('../image/fundo-bairro.jpg');
    background-position: left;
    background-size: 100% 100%;
  }

  .padding-70 {padding: 70px 0;}
  #acolhimento img {margin-bottom: -70px;}
  #banner-clinica img {max-width: 100%;}
  .parallax1 h2 {padding: 0 130px;}

  #consultorios {margin-top: 90px;}
  #consultorios .conteudo {padding: 0 80px;}

  #localizacao {
    background-image: url(../image/ipiranga.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 50%;
  }

  #sobre .image {
    width: 420px;
  }

  #ortopedia .image,
  #ortopedia-infantil .image {
    width: 380px;
  }

  #ortopedia-infantil {
    padding-bottom: 200px !important;
  }

 /*  #ortopedia,
  #faq,
  #localizacao {
    overflow: visible;
  } */
   #faq,
   #sobre {
    overflow: visible;
   }
  #ortopedia .marca-dagua {right: 0; top: 50%; transform: translateY(-50%);}
  #faq .marca-dagua {left: 0;}
  #sobre .marca-dagua {left: 0; bottom: 120px;}
  #estrutura .marca-dagua-left {left: 0; top: 50%; transform: translateY(-50%);}
  #estrutura .marca-dagua-right {right: 0;}
  #sobre .marca-dagua-right {right: 0;}

  .img-direita1 {background-size: 100% 100%;}

  .menu {padding-right: 0;}
}

@media screen and (min-width: 1200px) {
  .arrow .prev {left: -100px;}
  .arrow .next {right: -100px;}
}

@media screen and (min-width: 1400px) {
  #faq .marca-dagua {top: -90px;}
  .menu {padding-right: 0;}
}

@media screen and (min-width: 1800px) {
  #faq .marca-dagua {top: -145px;}
}

@media screen and (min-width: 1920px) {
  #banner {
    /* background-image: url("../image/banner-1920.jpg"); */
    height: 800px;
  }
}