/*=========== TABLE OF CONTENTS ===========
1.  CSS General
2.  Header
A.  Home
  3.  Home Hero
  4.  Te ofrezco
  5.  Mi carrera
  6.  Viaje del paciente
  7.  Cita
  8.  Testimonios
  9.  FAQ
B.  Sobre mí
  10. Sobre Hero
  11. Formación
  12. Mi carrera
C.  Procedimientos
  13. Procedi hero
  14. Contenido procedminetos
D.  Info pacientes
  15. Info pacientes hero
  16. Contenido info pacientes
E.  Condiciones quirurgicas
  17. Condiciones hero
  18. Contenido Condiciones
===========================================*/
/*=====================================
  1.  CSS General
=======================================*/
:root {
  --fucsia: #e52780;
  --azul-med: #1776ba;
  --azul-mari: #0d3a5c;
  --azul-mari-cla: #3c80c2;
  --blanco: #fff;
  --negro: #000;
}

.material-extra {}

/*=====================================
  A.  Home
=======================================*/
/*-------------------------------------
    4.  Te ofrezco
--------------------------------------*/
.carrus-procedi .owl-stage-outer {
  height: 584px;
}

.cont-servis-home {
  height: 192px;
}

.txt-servis-home {
  height: 94px;
}

.carrus-procedi .owl-dots .owl-dot span {
  background: rgba(23, 118, 186, 0.6);
}

.carrus-procedi .owl-dots .owl-dot.active span {
  background: var(--azul-med);
}

/*-------------------------------------
    6.  Viaje del paciente
--------------------------------------*/
.viaje-pacien h6 span {
  display: block;
  height: 48px;
}

/*-------------------------------------
    8.  Testimonios
--------------------------------------*/
.carrus-testimo .owl-stage-outer {
  height: 280px;
}

.carrus-testimo .owl-dots .owl-dot span {
  background: rgba(23, 118, 186, 0.6);
}

.carrus-testimo .owl-dots .owl-dot.active span {
  background: var(--azul-med);
}

.nomb-testimo .elementor-image-box-description {
  height: 39px;
}

/*-------------------------------------
    9.  FAQ
--------------------------------------*/
.btn-contac {
  color: #fff;
  border: 2px solid #0d3a5c;
  border-radius: 100%;
  background-color: #0d3a5c;
  transition: all 0.3s ease-in-out;
}
.btn-contac:hover {
  color: #0d3a5c;
  border: 2px solid #0d3a5c;
  background-color: #fff;
}
.card-rrss {
  background-color: #0d3a5c !important;
}
.btn-rrss-1 {
  margin-bottom: 14px;
}
.btn-rrss {
  padding: 22px;
  color: #0d3a5c;
  border: 2px solid #fff;
  border-radius: 100%;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.btn-rrss:hover {
  color: #fff;
  border: 2px solid #fff;
  background-color: #0d3a5c;
}
.card-rrss {
  border: 1px solid #0d3a5c;
}

/*=====================================
  B.  Sobre mí
=======================================*/
/*-------------------------------------
    10. Sobre Hero
--------------------------------------*/
.cuadro-somos .elementor-icon-box-title {
  display: block;
  margin-bottom: 14px !important;
}

/*=====================================
  C.  Procedimientos
=======================================*/
/*-------------------------------------
    13. Procedi hero
--------------------------------------*/
.titu-procedi {
  display: flex;
  align-items: center;
  width: 560px !important;
}

.titu-procedi img {
  width: 88px;
}

.titu-procedi p {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/*=====================================
  D.  Info pacientes
=======================================*/
/*-------------------------------------
    16. Contenido info pacientes
--------------------------------------*/
.titu-pacien {
  display: flex;
  align-items: center;
  width: 560px !important;
}

.titu-pacien img {
  width: 88px;
}

.titu-pacien p {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/*=====================================
  E.  Condiciones quirurgicas
=======================================*/
/*-------------------------------------
    18. Contenido Condiciones
--------------------------------------*/
.titu-condicio {
  display: flex;
  align-items: center;
  width: 560px !important;
}

.titu-condicio img {
  width: 88px;
}

.titu-condicio p {
  font-size: 20px !important;
  font-weight: 700 !important;
}

/*========== responsive ==========*/
@media (max-width: 786px) {
  /*=====================================
    A.  Home
  =======================================*/
  /*-------------------------------------
      4.  Te ofrezco
  --------------------------------------*/
  .owl-carousel.owl-theme.carrus-procedi {
    display: none !important;
  }

  .procedi-tlf {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 547px;
    padding: 10px;
  }

  .procedi-tlf::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .procedi-tlf::-webkit-scrollbar-track {
    background: transparent; /* Color de fondo del track del scrollbar */
  }

  .procedi-tlf::-webkit-scrollbar-thumb {
    background: rgba(13, 58, 92, 0.45); /* Color del thumb del scrollbar */
    border-radius: 10px;
  }

  .procedi-tlf::-webkit-scrollbar-thumb:hover {
    background: #0d3a5c; /* Color del thumb del scrollbar al pasar el cursor sobre él */
  }

  /*-------------------------------------
      8.  Testimonios
  --------------------------------------*/
  .owl-carousel.owl-theme.carrus-testimo {
    display: none !important;
  }

  .testimo-tlf {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 547px;
    padding: 10px;
  }
  .testimo-tlf::-webkit-scrollbar-track {
    background: transparent; /* Color de fondo del track del scrollbar */
  }

  .testimo-tlf::-webkit-scrollbar-thumb {
    background: rgba(13, 58, 92, 0.45); /* Color del thumb del scrollbar */
    border-radius: 10px;
  }

  .testimo-tlf::-webkit-scrollbar-thumb:hover {
    background: #0d3a5c; /* Color del thumb del scrollbar al pasar el cursor sobre él */
  }

  /*=====================================
    C.  Procedimientos
  =======================================*/
  /*-------------------------------------
      13. Contenido procedminetos
  --------------------------------------*/
  .titu-procedi {
    width: 270px !important;
  }

  .titu-procedi img {
    width: 77px;
  }

  .titu-procedi p {
    font-size: 15px !important;
    line-height: 17px !important;
  }

  /*=====================================
    D.  Info pacientes
  =======================================*/
  /*-------------------------------------
      15. Contenido info pacientes
  --------------------------------------*/
  .titu-pacien {
    width: 270px !important;
  }

  .titu-pacien img {
    width: 77px;
  }

  .titu-pacien p {
    font-size: 15px !important;
    line-height: 17px !important;
  }

  /*=====================================
    E.  Condiciones quirurgicas
  =======================================*/
  /*-------------------------------------
      17. Contenido Condiciones
  --------------------------------------*/
  .titu-condicio {
    width: 270px !important;
  }

  .titu-condicio img {
    width: 77px;
  }

  .titu-condicio p {
    font-size: 15px !important;
    line-height: 17px !important;
  }
}