/*

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */




/* Typography */
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
  color: #1e197c
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #bcbcbc !important;}
.text-success { color: #1e197c !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #22294d  !important;}
.bg-light { background-color: #22294d  !important;}
.bg-black { background-color: #22294d!important;}
.bg-success { background-color: #22294d  !important;}
.btn-success {
  background-color: #1e197c !important;
  border-color: #1e197c !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 10px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: black !important;}
#templatemo_main_nav a:hover { color: black;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}



/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;
}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;
}
.custom-img-container {
  width: 100%; /* La imagen ocupará todo el ancho del contenedor */
  height: 396px; /* Altura fija del contenedor */
  overflow: hidden; /* Esconde cualquier parte de la imagen que sobresalga del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-img {
  width: 100%; /* La imagen ocupará todo el ancho del contenedor */
  height: 100%; /* La imagen ocupará todo el alto del contenedor */
  object-fit: cover; /* Ajusta la imagen para cubrir el contenedor */
}
/* Shop */
.shop-top-menu a:hover { color: #1e197c !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#1e197c;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #04422e31 !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1; }
#tempaltemo_footer a:hover { color: #1e197c; }
#tempaltemo_footer ul.footer-link-list li { padding-top: 50px; }
#tempaltemo_footer ul.footer-icons li {
  line-height: 3.0em;
  border-radius: 100%; /* Hace que los elementos li sean círculos */
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: transparent; /* Cambiado a transparent para no mostrar el círculo */
  transition: none; /* Eliminada la transición */
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important; }

#tempaltemo_footer ul.footer-icons li:last-child {
  border-radius: 50%; /* Ajusta el tamaño del círculo que rodea el último ícono */
}
.list-inline.text-left.footer-icons li:last-child {
  border-radius: 50%; /* Ajusta el tamaño del círculo que rodea el último ícono */
}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}

 }


/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}

  }
 

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 550px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }

}
/* Pantallas pequeñas (móviles) */
@media (max-width: 480px) {
 

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    position: relative;
    align-items: center;
    top: -11rem;
   
    
   
    
    
  }
  .carousel-control-prev-icon::after {
    content: '‹'; /* Carácter de flecha estilizado */
    color:  #1e197c;
    position: relative;
    left: -2rem;
    
  }
  .carousel-control-next-icon::after {
    content: '›'; /* Carácter de flecha estilizado */
    font-size: 100px;
    color:  #1e197c;
    position: relative;
    left: 2rem;
  }
  
}

/* Pantallas medianas (tabletas) */
@media (min-width: 481px) and (max-width: 768px) {
  .carousel-control-prev,
  .carousel-control-next {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 5%; /* Ajusta el ancho para una mejor posición */
    
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    position: relative;
    align-items: center;
    top: -8rem;
    
    
  }
}

/* Pantallas grandes (laptops) */
@media (min-width: 769px) and (max-width: 991px) {
  .carousel-control-prev,
  .carousel-control-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5%; /* Ajusta el ancho para una mejor posición */
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    position: relative;
    align-items: center;
    top: -4rem;
    
  }
  }


/* Pantallas extragrandes (desktops) */
@media (min-width: 992px) {
  /* Centrado de las flechas en el carrusel */
  .carousel-control-prev,
  .carousel-control-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5%; /* Ajusta el ancho para una mejor posición */
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    position: relative;
    align-items: center;
    top: -2rem;
    
  }
}

.container py-5 {
  background-color: #1e197c; 
  padding: 80px;
  margin-bottom: 50px;
}


/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}







.toggle-checkbox {
  display: none;
}

.toggle-checkbox:checked ~ .sub-menu {
  display: block;
}

.toggle-label {
  color: inherit; /* Mantener el color heredado del texto */
  text-decoration: none; /* Quitar subrayado */
  cursor: pointer; /* Cambiar el cursor al estilo de enlace */
}

.toggle-label:hover {
  color: inherit; /* Cambiar el color al pasar el mouse */
}

.carousel-control-prev,
.carousel-control-next {
  width: 100px; /* Permite que el ancho se ajuste al contenido */
  height: 500px; /* Permite que la altura se ajuste al contenido */
  background-color: transparent; /* Elimina el fondo circular */
  border: none;
  outline: none;
  box-shadow: none; /* Elimina la sombra */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}



/* Iconos de flecha dentro de los botones de control */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none; /* Quita la imagen de fondo predeterminada */
  font-size: 70px; /* Aumenta el tamaño de la flecha */
  color: black; /* Color de las flechas */
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
 
}

.carousel-control-prev-icon::after {
  content: '‹'; /* Carácter de flecha estilizado */
  font-size: 100px; /* Tamaño de la flecha */
  color: black;
  
}

.carousel-control-next-icon::after {
  content: '›'; /* Carácter de flecha estilizado */
  font-size: 100px;
  color: black;
  

 
}

.participa img {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 250px; /* Ajusta esta altura según lo que necesites */
}

/* Limita la altura máxima de las imágenes */
.participa {
  width: auto; /* Permite que la anchura se ajuste automáticamente */
  height: 100%; /* Fuerza la altura de la imagen a ocupar todo el contenedor */
  object-fit: cover; /* Hace que la imagen se recorte para llenar el contenedor */
}
.container {
  display: flex; /* Usar flexbox para alinear los elementos */
  align-items: center; /* Centrar verticalmente los elementos */
}

.image {
  max-width: 30%; /* Hacer que la imagen sea responsive */
  height: auto; /* Mantener la proporción de la imagen */
  margin-right: 20px; /* Espacio entre la imagen y el texto */
}

.text {
  flex: 1; /* Permitir que el texto ocupe el espacio restante */
}
.grid-row {
  display: flex; /* Usar flexbox para el contenedor principal */
  justify-content: center; /* Centrar las imágenes horizontalmente */
}

.image-grid {
  display: grid; /* Usar grid para alinear las imágenes */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual tamaño */
  gap: 100px; /* Espacio entre las imágenes */
  max-width: 1000px; /* Ancho máximo del contenedor */
  margin: 0 auto; /* Centrar el contenedor */
}

.grid-image {
  width: 100%; /* Hacer que las imágenes ocupen todo el espacio del contenedor */
  height: auto; /* Mantener la proporción de las imágenes */
  aspect-ratio: 1 / 1; /* Forzar las imágenes a ser cuadradas */
  object-fit: cover; /* Asegurarse de que la imagen cubra el área sin deformarse */
}
.container {
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
}

.text-center {
  text-align: center; /* Asegura que el texto esté centrado */
}

.py-6 {
  padding-top: 3rem; /* Ajustar el espacio superior */
  padding-bottom: 3rem; /* Ajustar el espacio inferior */
}

.py-3 {
  padding-top: 1rem; /* Ajustar el espacio superior en esta fila */
  padding-bottom: 1rem; /* Ajustar el espacio inferior en esta fila */
}