/* Header */
.navbar {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  background: #ffff;
}

.nav-item {
  text-align: center;
}

.nome {
  font-size: 1.5rem; 
  font-weight: 400; 
  color: #4FB6D9;
}

.cardio {
  font-size: .9rem; 
  color: #1B3886;
}

.agendar {
  background-color: #48A6CE;
  color: #ffff;
  font-size: 1rem;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 400;
  transition: 0.3s backgroud-color;
  justify-content: center;
}

.agendar:hover {
  background-color: #51b9e6;
}

.navbar-toggler {
  border: none;
  outline: 1.2rem;
}

.navbar-toggler:focus, .btn-close:focus {
  box-shadow: none;
  outline: none;
}

.nav-link {
  color: #4FB6D9;
  font-weight: 400;
  position: relative;
  font-size: 1rem;
}

.nav-link:hover, .navbar-nav .nav-link.active, .navbar-brand:hover {
  color: #0094C6;
}

@media (min-width: 991px) {
    .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 2px;
    background-color: rgb(79, 182, 217, 0.6);
    transition: 0.3s ease-in-out;
  }

  .nav-link:hover::before, .nav-link.active::before {
    background-color: #0094C6;
  }
}

/* Banner */
.hero-section {
  background: url(/imagens/banner.jpg) no-repeat right;
  width: 100%;
  height: 115vh;
  min-height: 400px;
  display: flex;
  margin-top: 5vh;
}

.container-fluid {
  text-align: left;
}

.hero-text {
  font-size: 5vw;
  color: #4FB6D9;
  margin: 18vw 0vw 3vw 3vw;
}

.agenda2 {
  background-color: #1B3886;
  color: #fff;
  font-size: 2.47rem;
  padding: 1vw 1.5vw;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 400;
  transition: background-color 0.3s;
  margin-left: 2.26vw;
}

.agenda2:hover {
  background-color: #254bb1;
}

/* Video */
.video-section {
  display: flex;
  height: 92vh; 
  width: 100%; 
  background-image: url("/imagens/tela-sobre.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 8vh;
  align-items: center;
}

.video-section h1 {
  color: white; 
  font-size: 4.3rem;
}

.video-container {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}

iframe {
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video h2 {
  font-size: 4.5rem;
}

.card {
  background-color: #1B3886;
  border-radius: 20px; 
}

.saiba-mais {
  text-decoration: none;
  color: white;
  font-size: 2rem;
  font-weight: 300;
}

.saiba-mais:hover {
  color: #48A6CE;
}

/* Carrossel de vídeos */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
 background: rgba(79, 182, 217, 1);
}

.owl-theme .owl-dots .owl-dot span {
 border: 0.58px solid rgb(79, 182, 217);
 background: 0 0;
}

.carousel-title {
 font-size: 3.5rem; 
 color: #1B3886; 
 margin: 5vh 0 2vh 0;
}

.item p {
 font-size: 1.3rem; 
 color: #1B3886; 
 margin-left: 2.5vw;
 text-align: left;
}

.item img {
  border-radius: 50px;
}

.owl-nav {
  height: 0px;
}

/* FAQ */
.faq {
  background-color: #1B3886;
}

.faq-incon {
  display: inline-block;
  border: 0.6px solid rgb(79, 182, 217);
  color: #fff;
  font-size: 2rem;
  padding: 0 1vw;
  border-radius: 50px;
  margin: 2vh 0 1vh 10vw;
}

.titulo {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-left: 10vw;
  text-align: left;
}

.titulo span {
  font-size: .8rem;
}

.faq-list {
  color: white;
  margin-left: 3vw;
}

li::marker {
  color: rgba(79, 182, 217);
}

.question {
  cursor: pointer;
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: .5vw;
}

.question:hover, .question.clicked {
  color: #4FB6D9;
}

.answer {
  display: none;
  list-style-type: none;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.5vw;
  margin-left: .5vw;
}

.answer.show {
  display: block;
}

/* Localização */ 
.location {
  background-color: white;
}

.loc-titulo {
  display: flex;
  justify-content: center;
  color: rgb(79, 182, 217); 
}

.location h1 {
  font-size: 2.6rem;
}

.loc-details {
  display: flex;
  justify-content: center;
  align-items: center;
}

.location p {
  font-size: 2rem;
  color: #1B3886;
  font-weight: 600;
}

.location img {
  width: 10vh;
}

.agenda3 {
  background-color: #1B3886;
  color: #fff;
  font-size: 1rem;
  padding: 1vw 1.5vw;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 400;
}

.agenda3:hover {
  background-color: #254bb1;
}

.mapa-container {
  position: relative;
  padding-top: 70.25%;
}

/* Footer */
.footer{
  background-color: #1B3886;
}

.footer .doutor {
  font-size: 2rem; 
  font-weight: 400; 
  color: #4FB6D9;
}

.footer h1 {
  font-size: 1.5rem; 
  color: rgba(79, 182, 217, 0.59);
}

.footer p {
  font-size: 1rem; 
  color: white;
}

.footer p img {
  width: 3vh;
  height: 3vh;
}

.footer a img {
  width: 5vh;
  height: 5vh;
  margin-right: 10px;
  opacity: 75%;
}

.footer a img:hover {
  opacity: 100%;
}

/* Celular */
@media screen and (max-width: 768px) {
  
  /* Banner */
  .hero-section {
    background: url(/imagens/banner-celular.jpg) no-repeat center;
    background-size: 100%;
    height: 50vh;
  }

  .hero-text {
    display: none;
  }

  .hero-text br {
      display: none;
  }

  .agenda2 {
    display: none;
  }

  /* Video */
  .saiba-mais {
    font-size: .75rem;
  }

  .video h2 {
    font-size: 1.5rem;
  }
  
  .video-container {
    width: 100%; /* Full width on mobile */
    padding-top: 56.25%; /* Maintain aspect ratio */
    height: 30vh;
  }
  
  /* Carrossel */
  .carousel-title {
   font-size: 1rem;
  }
  
  .item p {
   font-size: .7rem;
  }

  .item img {
    border-radius: 20px;
  }

    /* FAQ */
  
  .faq-incon {
    font-size: 2rem;
  }
  
  .titulo {
    font-size: 2rem;
  }
  
  .titulo span {
    display: block;
    font-size: .6rem;
  }
  
  .question {
    font-size: 1rem;
  }
  
  .answer {
    font-size: .7rem;
  }

  /* Localização */
  .location {
    margin-top: 1vh;
  }
  
  .location h1 {
    font-size: 2.5rem;
  }

  .location p {
    font-size: 1rem;
  }

  .location img {
    display: none;
  }

  .agenda3 {
    font-size: 1rem;
    padding: 2vw 2.5vw;
  }

  .agenda3:hover {
    background-color: #254bb1;
  }

  .centralized {
    display: flex;
    justify-content: center;
    align-items: center; 
  }
  
  /* Footer */
  .footer .doutor {
  font-size: 1rem;
  }
  
  .footer h1 {
    font-size: 1rem;
  }
  
  .footer p {
    font-size: .7rem;
  }
  
  .footer p img {
    width: 2vh;
    height: 2vh;
  }
  
  .footer a img {
  width: 5vh;
  height: 5vh;
  margin-right: 0px;
  margin-bottom: 1vh;
  }
}