/*
 * Theme Name: Clínica de Ojos Maldonado Vazquez
 * Description: COMV
 * Author: Arroba PR
 * Author URI: https://www.arrobapr.com
 */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Outfit:wght@100..900&display=swap');
body {color: #171717!important; overflow-x: hidden; font-family: 'Lato', sans-serif!important;}
html {overflow-x: hidden}
a {cursor: pointer;text-decoration: none!important;color:#323031}
h1 {font-size: 42px;font-family: 'Outfit', sans-serif!important;font-weight:600 !important;color: #272757}
h2 {font-size:30px!important; font-family: 'Outfit', sans-serif!important;;color: #272757;font-weight:600!important}
h3 { font-family: 'Outfit', sans-serif!important;font-weight:500;color: #272757; font-weight:600!important}
p {line-height: 150%; font-size: 18px; }

img {max-width: 100%; height: auto;}
section {padding: 20px 0;position: relative}
.navbar .btn-green {padding: 5px 10px;}
.navbar-nav {float: none!important;width:100%!important; text-align:center!important; display: inline-block!important;transition: 0.6s;margin-left:25%; }
.navbar-nav > li {float: none; display: inline-block;margin:0 8px}
.navbar { box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);;margin-bottom: 0;
    border-radius: 0 !important;
    padding: 30px 0!important;
    position: relative!important;
    width: 100%!important;height: auto;
  z-index: 1;text-align: right!important;transition: 0.6s!important; background: transparent;}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {border-color: transparent}
.navbar-nav > li > a {text-align: center;font-family: 'Outfit', sans-serif!important;;font-size: 21px;;margin:0 12px; transition: 0.4s all ease-in-out;
  text-decoration: none; position: relative; z-index: 1; color: #171717}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus {background: none; color:#069494!important;transition: 0.4s all ease-in-out ; text-decoration: none}
.navbar .active{
 background:none;
 color:#069494;
 transition:0.3s all ease-in-out}
.navbar-brand {
  transition: 0.5s all ease-in-out;
  background: transparent;
  position: absolute;left: 36%
  ;top:8px}
.hm-banner {background-image: linear-gradient(to bottom, #d4f0ff, #fff);height: 580px; position: relative}
.hm-banner h1 {margin-top: 200px; width: 80%}
.slide {top: 49.5%;width: 480px; /*! text-align:center */;; margin: auto}
.wrapper {
  position: absolute;

}

.circle-diagonal {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: repeating-linear-gradient(
    -45deg,           /* ángulo de las líneas */
    #4aace1 0px,
    #4aace1 3px,        /* grosor de la línea */
    transparent 3px,
    transparent 11px /* separación entre líneas */
  );
  background-color: transparent; /* fondo del círculo */;position: absolute;z-index: -0; right: -10%; bottom: 15%
}
.circle {
  width: 480px;
  height: 480px;
  border: 58px solid #272757;
  border-radius: 50%;
  position: relative;
  background-color: transparent;
  z-index: 1; margin-top: 10%
}



.cruz {
  position: absolute;
  top: 50%;
  left: -30px; /* Posición a la izquierda del borde */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}

.cruz::before,
.cruz::after {
  content: '';
  position: absolute;
  left: -50px;
  top: -50px;
  width: 60px;
  height:20px;
  background-color: #4aace1;
}

.cruz::before {
  transform: rotate(90deg);
}

.cruz::after {
  transform: rotate(-0deg);
}

.hm-ser {text-align: center;}
.hm-ser .c { background-color: #fff;margin: 20px auto; text-align:center; display:block; position: relative}
.hm-ser strong {display: block;margin: 5px 0;font-size: 20px;color: #fff; position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px}
.cta-hm {;background: url(img/comv-cta-cita-4k.webp)center no-repeat; background-size:cover;padding: 120px 0}
.txt-right {width: 40%; margin-left: auto}

.hm-us { background: #f5f5f5;}
.hm-us h1 {margin-top: 30px;margin-bottom:30px}
.hm-us li {
  display: flex;
  align-items: center; /* Alinea verticalmente al centro */
  gap: 20px; /* Espacio entre imagen y texto */
  margin: 25px 0;
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 10px 20px;
  background-color: #fff;
  position: relative;
  width: 80%;
  margin-left: 20px;
  min-height: 90px;
  line-height: 1.4; /* Mejora legibilidad */
}

.hm-us li img {
  height: 60px;
  width: auto;
  flex-shrink: 0; /* Evita que la imagen se encoja */; margin-left: -50px
}

.hm-us p {
  margin: 0;
  padding: 0;
  width: auto;
}


.btn-green {padding:5px 25px;display: inline-block;
  background-color:#069494;text-decoration:none ;border-radius: 40px;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: #fff!important;; transition: 0.3s all ease-in-out; font-size:20px; border:3px solid transparent;}
.btn-green:hover{background: #fff;color: #069494 !important;border:3px solid #069494 ;transition: 0.3s all ease-in-out;text-decoration: none}
.btn-white {padding:5px 25px;display: inline-block;
  background-color:#fff;text-decoration:none ;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: #292929!important;; transition: 0.3s all ease-in-out; font-size:20px; border:3px solid transparent;text-transform: uppercase}
.btn-white:hover{background: #fff;color: #d1212f!important;border:3px solid #d1212f;transition: 0.3s all ease-in-out;text-decoration: none}
/* BANNERS */
.banner {height: 250px; text-align: center; background: url(img/comv-header-bg-4k.webp)center no-repeat; background-size: cover; position: relative}
.banner h2 {border-radius: 41px;
  border: solid 1px #707070;
  background-color: #272757;;color: #fff;display: block; width: 300px; margin:0 auto; position:absolute;  left: 50%; transform: translateX(-50%); top:40% ; padding: 5px 0}

.diagonal-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-image: repeating-linear-gradient(
    -45deg,           /* ángulo de las líneas */
    #4aace1 0px,
    #4aace1 3px,        /* grosor de la línea */
    transparent 3px,
    transparent 11px /* separación entre líneas */
  );
  background-color: transparent; /* fondo del círculo */;position: absolute;z-index: 0; left: 50%; transform: translateX(-50%); top:25% 
}
.cruz2 {
  position: absolute;
  top: 45%;
  right: 0; /* Posición a la izquierda del borde */
  transform: translateY(-50%);
  width:20px;
  height: 20px;
}

.cruz2::before,
.cruz2::after {
  content: '';
  position: absolute;
  left: -20px;
  top: 0px;
  width: 35px;
  height:13px;
  background-color: #4aace1;
}

.cruz2::before {
  transform: rotate(90deg);
}

.cruz2::after {
  transform: rotate(-0deg);
}
.wrapp2 {position: relative;width: 350px; height: 250px; margin: auto}
.servicios {text-align: center;}
.servicios strong{color: #272757; font-size: 20px;font-family: 'Outfit', sans-serif!important;}
.ser-left {border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #f5f5f5;padding:20px 50px; text-align: left; margin-left:-100px;}
.ser-right {border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #f5f5f5;padding:20px 50px; text-align: left; margin-right:-100px;position: relative}
.servicios .row {margin: 40px 0}
.ser-ben {text-align: center; background-color: #069494;padding: 50px 0}
.ser-ben .btn-green {border: 3px solid #fff}
.us {text-align: center}
.us p, .us h2 {text-align: left}
.us .row {margin: 30px 0}
.doc {  background-color: #f5f5f5;text-align: center}
.docs {  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;padding:50px; margin:40px 0}
.docs h3 {text-align: left;font-weight:400!important; margin: 0; margin-top: 50px}
.docs span {  color: #069494;text-align:left; display: block;margin-bottom: 20px}
.docs p {text-align: left; }
/* Contacto */
.contact {text-align: center;}
.contact .row {margin-top: 20px}
.contact h2, .contact h5 {text-align: left}
.contact span {display: inline-block;vertical-align:middle; padding-left: 10px}
.contact li {text-align: left;display: block;font-size: 20px;margin: 20px 0}
.contact ul {padding: 0}
.contact strong {color: #272757}
.contact p {display: inline-block; width: 80%; vertical-align: top; text-align: left; margin-bottom: 10px}
.contact a {color: #171717; }



.cita {text-align: center}
/*Footer*/
footer{max-width: 100%;text-align:center;padding:  15px 0; background-color: #272757; position: relative; }
.arroba {vertical-align: middle; }
footer .col-sm-10 {padding-left: 12%}
footer a {color: #fff!important;; display: block ; text-align: left}
.fsocial {font-size: 28px}
.not-found {text-align: center; margin-top: 100px; font-size: 24px;}
/*Responsive */

@media screen and (max-width:2001px){
  .banner {height: 250px; text-align: center; background: url(img/comv-header-bg-2k.webp)center no-repeat; background-size: cover; position: relative}
  .servicios {text-align: center; }

.cta-hm {
  background: url(img/comv-cta-cita-2k.webp)center no-repeat;
    background-size: auto;
  background-size: cover;
  padding: 120px 0;
}
 .navbar-brand {
  transition: 0.5s all ease-in-out;
  background: transparent;
  position: absolute;left: 18%
  ;}

}

@media screen and (max-width:1400px){
 .navbar-brand {
  transition: 0.5s all ease-in-out;
  background: transparent;
  position: absolute;left: 7%
  ;}
  .slide {
 top: 53%;
  width: 480px;
text-align: center;

  margin: auto
}
}
@media screen and (max-width:1366px){
.cta-hm {
  background: url(img/comv-cta-cita-l.webp)center no-repeat;
    background-size: auto;
  background-size: cover;
  padding: 120px 0;
}
    .banner {height: 250px; text-align: center; background: url(img/comv-header-bg-l.webp)center no-repeat; background-size: cover; position: relative}

}
@media screen and (max-width:1199px){
  
   
  .navbar-brand img {
    max-width: 200px;
  }
  h1 {font-size: 30px!important;}

  .navbar-nav > li > a {

  font-size: 20px;}

  p {font-size: 17px}
.navbar-brand {
  transition: 0.5s all ease-in-out;
  background: transparent;
  position: absolute;
  left: 5%;top: 10px
  }
  .navbar {padding: 20px 0!important;}

}

@media screen and (max-width:991px){
  .docs h3 {
  text-align: left;
  font-weight: 400 !important;
  margin: 0;
    margin-top: 0px;
  margin-top: 0px;
}
  .ser-left {
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #f5f5f5;
  padding: 20px 20px;
  text-align: left;
  margin-left: -40px;
}
  .ser-right {
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #f5f5f5;
  padding: 20px 20px;
  text-align: left;
  margin-right: -50px;
  position: relative;
}
 .circle {
  width: 350px;
  height: 350px;
  border:55px solid #272757;
  border-radius: 50%;

  background-color: transparent;
  z-index: 1;
  bottom: 10%;
}
  .hm-banner h1 {
  margin-top: 90px;
  width: 80%;
}
  .hm-banner {height: 420px}
  .slide {width: 220px;top: 44.5%}
  .cruz::before,
.cruz::after {
  content: '';
  position: absolute;
  left: -45px;
  top: -50px;
  width: 60px;
  height:15px;
  background-color: #4aace1;
}
 .hm-us li {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 25px 0;
    margin-left: 0px;
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 10px 20px;
  background-color: #fff;
  position: relative;
  width: 100%;
  margin-left: 10px;
  min-height: 90px;
  line-height: 1.4;
}

}

@media screen and (max-width:840px){
  .circle-diagonal {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-image: repeating-linear-gradient( -45deg, #4aace1 0px, #4aace1 3px, transparent 3px, transparent 11px );
  background-color: transparent;
  position: absolute;
  z-index: -0;
  right: -0%;
  bottom: 15%;
}
  .navbar-nav > li a{
  float: none;
  display: inline-block;
  margin:0 3px;font-size: 18px
}
  .navbar-brand img {max-width: 180px}
/*   .navbar {padding: 15px 0!important;} */

}

@media screen and (max-width:768px){
.cta-hm {
  background: url(img/comv-cta-cita-t.webp)center no-repeat;
    background-size: auto;
  background-size: cover;
  padding: 120px 0;
}
}

@media screen and (max-width:767px){
  .contact h2, .contact h5 {
  text-align: center;
}
  section {padding-top: 0}
  .doc {padding-top: 20px}
  .docs {
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
  padding: 50px 30px;
  margin: 40px 0;
}
  .contact {text-align: center}
  .contact li {
  text-align: center;
  font-size: 17px;
}
  .contact a, .contact p {font-size: 16px}
  .contact strong {
  color: #272757;display: block
}
  .contact span {
  display: block;
  vertical-align: middle;
  padding-left: 0px; 
}
  .contact li img {max-width: 40px; vertical-align: middle}
      .banner {height: 200px; text-align: center; background: url(img/comv-header-bg-m.webp)center no-repeat; background-size: cover; position: relative}
.banner h2 {
  border-radius: 41px;
  border: solid 1px #707070;
  background-color: #272757;
  color: #fff;
  display: block;
  width: 220px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 30%;
  padding: 5px 0;font-size: 24px!important;
}
  .wrapp2 {
  position: relative;
  width: auto;
  height: 250px;
  margin: auto;
}
  .cruz2::before, .cruz2::after {
  content: '';
  position: absolute;
  left: -60px;
  top: -20px;
  width: 30px;
  height: 11px;
  background-color: #4aace1;
}
  .diagonal-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: repeating-linear-gradient( -45deg, #4aace1 0px, #4aace1 3px, transparent 3px, transparent 11px );
  background-color: transparent;
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
}
 .cta-hm {
  background: url(img/comv-cta-cita-m.webp)center no-repeat;
    background-size: auto;
  background-size: cover;
  padding: 120px 0;
}
  .cruz::before, .cruz::after {
    content: '';
    position: absolute;
    left: -45px;
    top: -40px;
    width: 50px;
    height: 12px;
    background-color: #4aace1;
  }
.cruz {
  position: absolute;
  top: 50%;
  left: -10px; /* Posición a la izquierda del borde */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
  .hm-us ul {padding: 0}
  .cta-hm {text-align: center}
  .hm-us h1 {text-align: center;margin-top: 10px}
.txt-right {
  width: auto;
  margin-left: auto;
}
  .navbar {text-align: right!important; justify-content: right!important;z-index: 20; position:relative!important;background: #fff;padding: 10px 0!important;height: auto}
  .navbar-collapse {background: #fff;padding-top: 20px}
  .navbar-nav {
    margin-left: 0%;text-align: center
  }
  .navbar-brand {top: 5px}

  .hm-banner {text-align: center; height: 500px}
  .wrapper {text-align: center; margin: auto; max-width: 100%; display: block;position: relative }
   .circle {
  width: 300px;
  height: 300px;
  border:45px solid #272757;
  border-radius: 50%;
  background-color: transparent;
  bottom: 0%; display: block; margin: 20px auto
}
   .circle-diagonal {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: repeating-linear-gradient( -45deg, #4aace1 0px, #4aace1 3px, transparent 3px, transparent 11px );
    background-color: transparent;
    position: absolute;
    z-index: -0;
    right: 0%;
    bottom: 15%;
  }
  .slide {width: 200px;top:44%; left: 50%;transform: translateX(-50%); position: absolute!important;}
  .sliide img {width: 200px; }
 .hm-banner h1 {
    margin-top: 20px;
    width: auto;
  }

  .navbar-brand  img {max-width: 150px}
  h3 {font-size: 22px!important;}
  .navbar-toggler {z-index: 20}
  .navbar-toggler-icon {height: auto; font-size: 28px;color: #272757;height: auto!important; }
  .navbar-nav li { margin:15px auto; display: table; text-align:center; justify-content:center}
 .navbar-toggler { line-height: 0!important;padding: 5px!important;}

  .navbar-toggler:focus {border: 0!important;box-shadow: none!important;; background: none!important;}
  .navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none!important;}

  .ser-left {
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #f5f5f5;
  padding: 20px 20px;
  text-align: left;
  margin-left: -0px;margin-top: -40px
}
  .ser-right {
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #f5f5f5;
  padding: 20px 20px;
  text-align: left;
  margin-right: 0px;
  position: relative;margin-top: -40px
}
.docs h3 {
  text-align: left;
  font-weight: 400 !important;
  margin: 0;
    margin-top: 0px;
  margin-top: 20px;
}
    h1 {font-size: 28px!important;}

.container {padding-left: 25px!important;padding-right: 25px!important;}
  .fsocial{text-align: center}
  footer .col-sm-10 {padding-left: 0}
  .us h2 {
  text-align: center; margin-top: 15px}
  .docs {
  margin: 25px 0;}
  .navbar li .btn-green {
  padding: 5px 15px;
 
}
  .hm-us li {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 25px 0;
    margin-left: 0px;
  border-radius: 20px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 10px 20px;
  background-color: #fff;
  position: relative;
  width: auto;
  margin-left: 30px;
  min-height: 90px;
  line-height: 1.4;
}
 
/*   .servicios {text-align: center; background: url(img/comv-header-bg-m.webp)bottom center no-repeat;} */
}
@media screen and (max-width:376px){
  .slide {width: 200px;top:50%; left: 50%;transform: translateX(-50%); position: absolute!important;}
    .circle {
    width: 290px;
    height: 290px;
    border: 45px solid #272757;
    border-radius: 50%;
    background-color: transparent;
    bottom: 0%;
    display: block;
    margin: 20px auto;
  }
}