body {
     background-color: #f8f8f8;
}

.encabezado {
     font-size: 2.4rem;
     font-family: 'Lato', sans-serif;
     color: #000000;
     line-height: 2.4rem;
}
.encabezado span {
     font-size: 3.8rem;
     font-family: 'Italianno', cursive;
     color: #e082a8;
}



/** Sociales **/
.sociales ul {
     list-style: none;
     margin:0;
     padding:0;
 }
 .sociales ul li {
     position: relative;
     display: inline-block;
 }
 .sociales ul li a::before {
     font-family: 'FontAwesome';
     display: inline-block;
     vertical-align: top;
     padding: 0.4rem;
     content: '\f08e';
     -webkit-font-smoothing: antialiased;
     font-size: 2rem;
     color: #8CC42A;
 }
 .sociales ul li a[href*="facebook.com"]::before{
     content: '\f230';
 }
 .sociales ul li a[href*="twitter.com"]::before{
     content: '\f081';
 }
 .sociales ul li a[href*="instagram.com"]::before{
     content: '\f16d';
 }
 .sociales ul li a[href*="pinterest.com"]::before{
     content: '\f0d2';
 }
 .sociales ul li a[href*="youtube.com"]::before{
     content: '\f16a';
 }

 /** NAVEGACION **/
 .navegacion {
      background-color: #B5B5B5;
 }
 .navbar-light .navbar-toggler{
      background-color: #ffffff;
 }
 .navbar-light .navbar-brand,
 .navbar-light .navbar-brand:hover {
      color: #ffffff;
 }

 .nav-principal {
      background-image: url(../img/border_horizontal.png),
                         url(../img/border_horizontal.png);
     background-repeat: repeat-x;
     background-position: 0px top, 0px bottom;
 }


 .nav-link {
      color: #ffffff;
      font-size: 1.4rem;
     transition: all .5s ease-in-out;
     font-family: 'Raleway', sans-serif;
 }

 .nav-link:hover {
      background-color: #8CC42A;
      color: #ffffff;
 }

 /* CAROUSEL**/

 .carousel-caption h3 {
     font-family: 'Raleway', sans-serif;
     font-size: 2rem;
     font-weight: 900;
     color: #ffffff;

 }

 /** Nuevo sitio **/

 .nuevo-sitio p {
     font-family: 'Lato', sans-serif;
     color: #979797;
     font-size: 1.6rem;
 }

 /** Servicios **/

 .imagen-servicio img {
      border: 6px solid #ffffff;
      -webkit-transition: transform .3s ease;
      -ms-transition: transform .3s ease;
      transition: transform .3s ease;
      width: auto;
      height: auto;
 }
 .servicio-info {
      background-color: #ffffff;
      margin-top: -5rem;
 }
 .servicio-info .btn-primary {
      border-radius: 0;
      background-color: #e082a8;
      border: none;
 }

 /* HORARIOS **/

 .horario {
      background-color: #B5B5B5;
      color: #ffffff;
 }
 .horario h2 {
      font-size: 2.2rem;
      font-family: 'Lato', sans-serif;
 }
 .horario .table {
      border: 2px solid #e082a8;
 }
 .horario .table thead {
      background-color: #e082a8;
 }
 .horario .table td,
 .horario .table thead th {
      border: none;
 }
 .horario .table tbody tr td {
      padding: .35rem;
      font-family: 'Lato', sans-serif;
      font-size: 1.2rem;
 }


 /* PRODUCTOS **/
 .productos .card {
      border: none;
 }

 .productos .card a {
      color: #000000;
 }
 .productos .card a:hover {
      text-decoration: none;
 }

 .productos .card h3 {
      color: #e082a8;
      font-size: 1.2rem;
      font-family: 'Lato', sans-serif;
 }

 .productos .card p {
      font-size: .8rem;
 }
 .productos .card .precio {
      font-size: 1.6rem;
      color: #979797;
 }

 /** Citas **/
 .citas {
      background: #194F9B;
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed;
      color: #ffffff;
 }

 @media (min-width: 992px) {
      .citas {
          background-size: cover;
      }
 }
 @media (max-width: 767px) {
     .citas {
         padding: 20px;
     }
 }
 .citas h3 {
      font-size: 3.5rem;
      font-family: 'Lato', sans-serif;
 }
 .citas p {
      font-size: 1.2rem;
      line-height: 2.6rem;
 }
.btn-primary {
      background-color: #8CC42A;
      border: 0;
      padding: 1rem 5rem;
      border-radius: 0;
      font-family: 'Lato', sans-serif;
      font-size: 1.2rem;
 }
 .btn-primary:hover {
    background-color: #adee3d;
 }
 /* footer */
 .copyright {
      color:#979797;
      font-size: .8rem;
 }

 /** Hero **/
 .hero {
      position: relative;
 }
 .hero h2 {
      position: absolute;
      bottom: 2rem;
      right: 0;
      background-color: #8ed3cc;
      font-family: 'Raleway', sans-serif;
     font-weight: 900;
     color: #ffffff;
     font-size: 2.8rem;
}

.contenido-principal p {
     font-size: 1.2rem;
     line-height: 2.2rem;
     font-family: 'Lato', sans-serif;
}
/** SIDEBAR **/

aside {
     background-color: #8ed3cc;
     color: #ffffff;
}

/** Accordion / Servicios **/

#servicios .card-header {
     background-color: #e082a8;
     padding: 0 1.25rem;
}
#servicios .card-header .btn-link {
     color: #ffffff;
     font-family: 'Lato', sans-serif;
     font-size: 1.6rem;
}
#servicios .card-body {
     font-size: 1.3rem;
}

/* cupon*/
.cupon {
     border: 3px dashed #ffffff;
     font-family: 'Lato', sans-serif;
}
.cupon .display-4 {
     font-size: 2rem;
}
.cupon p {
     font-size: 1.2rem;
}

/* PRODUCTOS **/

@media (min-width: 576px) {
     .card-columns {
          -webkit-column-count: 2;
          -moz-column-count: 2;
          column-count: 2;
          -webkit-column-gap: 1.25rem;
          -moz-column-gap: 1.25rem;
          column-gap: 1.25rem;
      }
}
@media (min-width: 992px) {
     .card-columns {
          -webkit-column-count: 4;
          -moz-column-count: 4;
          column-count: 4;
      }
}

/** Contacto **/
.formulario-contacto {
    border: 2px solid #9a9a9a;
    background-color: #ffffff;
}


/** Celular **/
/* Estilos generales para dispositivos móviles */
@media (max-width: 767px) {
     body {
       padding-top: 56px; /* Ajusta el espacio encima del encabezado para evitar que se superponga con la barra de navegación */
     }
   
     .encabezado-sitio img {
       width: 100%; /* Haz que el logo ocupe el ancho completo del contenedor en dispositivos móviles */
     }
   
     .nav-principal {
       margin-bottom: 20px; /* Ajusta el espacio debajo de la barra de navegación */
     }
   
     #slider-principal {
       margin-top: 20px; /* Ajusta el espacio encima del carrusel en dispositivos móviles */
     }
   
     .nuevo-sitio {
       padding: 20px; /* Ajusta el espacio alrededor del contenido en dispositivos móviles */
     }
   
     .horario {
       padding: 20px; /* Ajusta el espacio alrededor del contenido en dispositivos móviles */
     }
   
     /* Puedes continuar ajustando otros estilos según tus necesidades */
   }