@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap");
* {
  font-family: "Saira", sans-serif;
}
.bg-grey{
  background-color: #f5f5f5;
}
.btn-warning {
  background-color: #ff8400 !important;
  color: #ffffff;
  border: 2px solid #ff8400 !important;
  border-radius: 13px !important;
  width: auto;
  height: 50px;
}
.btn-warning-online {
  background-color: #ff8400 !important;
  color: #ffffff;
  border: 2px solid #ff8400 !important;
  border-radius: 13px !important;
  width: auto;
  height: 60px;
  width: 370px;
}
.btn-warning-2 {
  background-color: #ff8400 !important;
  color: #ffffff;
  border: 2px solid #ff8400 !important;
  border-radius: 13px !important;
  width: auto;
  height: 60px;
  width: 300px;
}

.text-orange {
  color: #ff8400 !important;
}

.text-col {
  color: #0097ff;
}



/* .btn-warning:hover {
  background-color: #ffffff !important;
  color: #ff8400;
  border: 1px solid #ff8400 !important;
}

.btn-warning-two:hover {
  background-color: #ff8400 !important;
  color: #ffffff;
  border: 1px solid #ff8400 !important;
} */

.btn-warning-two {
  background-color: #ffffff !important;
  color: #ff8400;
  border: 2px solid #ff8400 !important;
  border-radius: 13px !important;
  width: 160px;
  height: 50px;
}

.text-gris {
  color: #666666 !important;
}
.text-azul {
  color: #0d2e4f;
}
.mrr-0 {
  margin-left: -10px;
}

.fs-10 {
  font-size: 4.5rem;
}
.nav-link {
  color: #666666 !important;
  font-size: 1.2rem !important;
}

.bg-img {
  background-image: url("/../../img/background.jpg");
  background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
  background-position: center; /* Centra la imagen */
  max-width: 1920px;
  max-height: 981px;
}

.cont-dif {
  max-width: 85%; /* Para que el texto se ajuste al ancho del contenedor */
}

.fw-medium {
  font-weight: 600; /* No es necesario usar !important aquí */
}

.fs-7 {
  font-size: 6.5vw; /* Tamaño de fuente relativo al ancho de la pantalla */
}

.fs-8 {
  font-size: 1.3em; /* Tamaño de fuente en em para adaptabilidad */
}

.fs-9 {
  font-size: 2.4vw; /* Tamaño de fuente relativo al ancho de la pantalla */
}

.left-box {
  /* Estilos específicos para el cuadro izquierdo */
  width: 643px;
  height: 666px;
}

.right-box {
  /* Estilos específicos para los cuadros derechos */
  width: 643px;
  height: 333px;
}

.next-1{
  bottom: 1rem;
  right: 1rem;
}

.interlinea{
  max-width: 36vh;
  margin-left: -3px;
  height: 3px; /* Grosor de la línea */
  background-color: #6a6764; /* Color de la línea */
  border: none; /* Quitar bordes por defecto */
}

.mt-10{
  margin-top: 2.6rem;
}


/* Media query para tablet y mobile */
@media (max-width: 992px) {
  .left-box,
  .right-box {
    width: 100%; /* Ocuparán todo el ancho disponible */
  }
}

@media (max-width: 768px) {
  .menu-icon {
    display: block;
  }

  .mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f8f9fa;
    width: 100%;
    z-index: 999;
  }

  #toggle-menu:checked + .menu-icon + .mobile-nav {
    display: block;
  }
}
.bg-esp{
  background-color: #11365c;
}

.square {
  width: 100%;
  height: 66.6vh; /* Ajusta la altura según sea necesario */
  background-color: #11365c; /* Color del cuadrado */
}

.rectangle1 {
  width: auto;
  height: 33.3vh; /* Ajusta la altura según sea necesario */
  background-color: #0d2e4f; /* Color del rectángulo */
}
.rectangle2 {
  width: auto;
  height: 33.3vh; /* Ajusta la altura según sea necesario */
  background-color: #11365c; /* Color del rectángulo */
}
.rectangle3 {
  width: auto;
  height: 33.3vh; /* Ajusta la altura según sea necesario */
  background-color: #11365c; /* Color del rectángulo */
}
.rectangle4 {
  width: auto;
  height: 33.3vh; /* Ajusta la altura según sea necesario */
  background-color: #0d2e4f; /* Color del rectángulo */
}

.bg-sect-2 {
  background-color: #232326;
}

.bg-sect-2 .img-rodilla {
  position: relative;
  right: 50px;
  bottom: 0px;
  width: 300px;

}

/* .bg-sect-2 .img-medico {
  position: relative;
  top: 105px;
  right: 50px;
  
} */

.pt-6{
  padding-top: 3.4rem;
}

.bg-violet {
  background-color: #480199;
}
.bg-violet-1 {
  background-color: #3e0084;
}

.cuadrado {
  width: auto;
  height: 47vh; /* Altura del cuadrado */
  margin-bottom: 20px; /* Espacio entre los cuadrados */
}

.footer-bg{
  background-color: #232326;
}

/* Estilos para el primer div */
.purple-box {
  background-color: #3e0084; /* Color morado */
  height: auto; /* Altura del viewport */
  width: 600px;
}

.mt-6{
  margin-top: 10rem;
}
/* Estilos para el segundo div */
.blue-box {
  background-color: #0d2e4f; /* Color azul */
  height: auto; /* Altura del viewport */
  width: 600px;
}

/* Estilos para la imagen dentro del primer div */
.centered-image {
  max-width: 100%; /* Ajustar al ancho del contenedor */
  max-height: 100%; /* Ajustar al alto del contenedor */
}
.position-img{
  position: relative;
  bottom: 60px;
  height: 10px;
}

.content-img{
  height: 300px;
}


@media (max-width: 767px) {
  .img-rodilla {
    display: none; /* Oculta la imagen en dispositivos con un ancho máximo de 767px (generalmente dispositivos móviles) */
  }
  .img-medico {
    display: none; /* Oculta la imagen en dispositivos con un ancho máximo de 767px (generalmente dispositivos móviles) */
  }
}

@media only screen and (max-width: 767px) {
  .text-center-mobile {
    text-align: center;
    margin-top: 10px;
  }
}

.anone{
  text-decoration: none;
}

    /* Estilos personalizados para los botones de navegación */
    .carousel-control-prev,
    .carousel-control-next {
      background-color: #999; /* Color de fondo gris */
    }

    /* Estilos personalizados para los botones de navegación cuando se deshabilitan */
    .carousel-control-prev:disabled,
    .carousel-control-next:disabled {
      opacity: 0; /* Opacidad reducida */
      cursor: not-allowed; /* Cursor no disponible */
    }

    .carousel-control-prev {
      left: -150px !important;
  }
  .carousel-control-next {
    right: -150px !important;
}

@media screen and (max-width: 768px) {
  .img-arrow, .carousel-control-prev, .carousel-control-next {
    max-width: 1rem;
    left: 340px;
  }
  .carousel-control-prev {
    left: -5px !important;
}
  
}

.box-margin{
  margin-top: 10rem;
}

@media screen and (min-width: 768px) {
  .box-margin{
    margin-top: 0rem;
  }
}


.preview-img {
  opacity: 0.5;
}
.preview-img.active {
  opacity: 1;
  border: 2px solid #000;
}
.preview-control {
  cursor: pointer;
  font-size: 2rem;
  color: grey;
  margin: 0 10px;
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list li {
  margin: 10px 0;
}

.link-list a {
  text-decoration: none;

}

.link-list img {
  width: 16px;
  height: 16px;
  margin-left: 10px;
}

/*Faq */

.faq-container{
  max-width: 1320px;
  margin: 0 auto;
}

.faq{
  background-color: transparent;
border-bottom: 1px solid #cdcdcd;
  padding: 30px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
  transition: all .4s ease;
  cursor: pointer;
}

.faq.active{
  background-color: #f3f3f3;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.faq-title{
  margin: 0 35px 0 0;
color: #666666 ;
}

.faq-text{
color: #666666 ;
  display: none;
  margin: 30px 0 0;
}

.faq.active .faq-text{
  display: block;
}

.faq-toggle {
  background-color: #ff8400 ;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
border-radius: 50%;
}

.chevron, .close{
  width: 12px;
  height:12px;
}

.faq-toggle .close{
  display: none;
} 

.faq.active .faq-toggle .close{
  display: block;
}

.faq.active .faq-toggle .chevron{
  display: none;
}

.faq.active .faq-toggle{
  background-color: #ff8400 ;
  border-radius: 50%;
  color:#ffffd9;
}

hr.custom-hr {
    border: none;
    height: 1px;
    background-color: #666666;
    margin: 20px 0; 
    opacity: 1;
}

.owl-prev,
.owl-next {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  display: block !important;
  border: 0px solid #666666;
}
.owl-prev {
  left: -80px;
}
.owl-prev img{
  max-width: 30px;
}
.owl-next {
  right: -80px;
}
.owl-next img{
max-width: 30px;
}
.owl-prev i,
.owl-next i {
  transform: scale(1, 2);
  color: #000000;
}

/* Slider galeria */
/* Hide the images by default */



.text_agencia, .email-span {
  text-decoration: none; /* Elimina el subrayado del enlace, si no es necesario */
}
.text_para, .p-text, .email-span, .text-par, .text_agencia {
  color: #666666d8;
}