/*

---------------------------------------------
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: #044c4a
}
.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: #064020 !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #044c4a  !important;}
.bg-light { background-color: #044c4a  !important;}
.bg-black { background-color: #044c4a !important;}
.bg-success { background-color: #044c4a  !important;}
.btn-success {
  background-color: #064020 !important;
  border-color: #064020 !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: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #032412 !important;}
#templatemo_main_nav a:hover { color: #032412;}
#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: #032412 !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:#032412;}
.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: #032412; }
#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;
  }
}
.container py-5 {
  background-color: #032412; 
  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: 50px; /* Ajusta el tamaño del botón */
  height: 50px; /* Ajusta el tamaño del botón */
  background-color: rgba(0, 0, 0, 0.5); /* Color oscuro con opacidad */
  border-radius: 50%; /* Hace que el fondo sea circular */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Elimina el borde del botón */
  outline: none; /* Elimina el contorno del botón */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra opcional */
}

/* Estilos para los iconos dentro de los botones */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Color de fondo oscuro con opacidad */
  border-radius: 50%; /* Forma circular para el fondo */
  width: 50px; /* Ajusta el tamaño del fondo */
  height: 50px; /* Ajusta el tamaño del fondo */
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Color negro con opacidad del 50% */
  background-image: none; /* Remove default arrow icon */
}

.carousel-control-prev-icon::after {
  content: '<'; /* Character for previous arrow */
  font-size: 30px;
  color: rgb(255, 255, 255); /* Color of the arrow */
}

.carousel-control-next-icon::after {
  content: '>'; /* Character for next arrow */
  font-size: 30px;
  color: white; /* Color of the arrow */
}
#carouselnoti .card .btn-primary {
  background-color: #74cac6; /* Color de fondo del botón (ajústalo según lo que necesites) */
  border-color: #74cac6; 
  /* Color del borde del botón */
  color: white; /* Color del texto del botón */
}

/* Cambia el color del botón "Leer más" cuando el ratón está sobre él */
#carouselnoti .card .btn-primary:hover {
  background-color: #214F4A; /* Color de fondo del botón al pasar el ratón */
  border-color: #214F4A; /* Color del borde del botón al pasar el ratón */
  color: white; /* Color del texto del botón al pasar el ratón */
}