/*


---------------------------------------------
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: #27445C !important;
}

.titleH1{
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
  color: #27445C !important;
  font-weight: bold; /* Texto en negrita */
}

.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300 !important;
}

.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
}

.inputRow{
  font-family: 'Roboto', sans-serif;
  color: #27445C !important;
}

/* General */
.logo {
  font-weight: 500 !important;
}

.text-warning {
  color: #ede861 !important;
}

.text-muted {
  color: #bcbcbc !important;
}

.text-principal {
  color: #27445C !important;
}

.text-success {
  color: #59ab6e !important;
}

.text-light {
  color: #cfd6e1 !important;
}

.text-dark {
  color: #000000 !important
}

.bg-dark {
  background-color: #212934 !important;
}

.bg-panel {
  background-color: #bcbcbc !important;
}

.bg-light {
  background-color: #e9eef5 !important;
}

.bg-black {
  background-color: #1d242d !important;
}

.bg-success {
  background-color: #27445C !important;
}

.btn-form {
  background-color: #27445C !important;
  color: white !important; /* Cambia el color del texto a blanco */
}

.btn-success {
  background-color: #bcbcbc !important;
  border-color: #bcbcbc !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: #212934;
}

#templatemo_main_nav a:hover {
  color: #bcbcbc;
}

#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;
}

/* Shop */
.shop-top-menu a:hover {
  color: #bcbcbc !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: #0bff7e;
}

.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;
  */
  max-width: 100%; /* Asegura que las imágenes sean responsivas */
  max-height: 120px; /* Ajusta este valor según el tamaño deseado */
  object-fit: contain; /* Mantiene las proporciones originales */
}

.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #27445C;
}

#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #27445C !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: #bcbcbc;
}

/* Contact map */
.leaflet-control a,
.leaflet-control {
  font-size: 10px !important;
}

.form-control {
  border: 1px solid #e8e8e8;
  border-color: #27445C; /* Cambia el color del borde */
}

/* Footer */
#tempaltemo_footer a {
  color: #dcdde1;
}

#tempaltemo_footer a:hover {
  color: #bcbcbc;
}

#tempaltemo_footer ul.footer-link-list li {
  padding-top: 10px;
}

#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}

#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #212934;
  /*#cfd6e1;*/
  transition: .5s;
}

#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}

#tempaltemo_footer .border-light {
  border-color: #2d343f !important;
}

/*
// 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;
}

.responsive-image {
  width: 100%; /* Asegura que la imagen sea responsiva */
  height: auto; /* Mantiene las proporciones */
  object-fit: cover; /* Ajusta cómo se recorta la imagen */
}

.imagen-opaca {
  opacity: 0; /* Cambia el valor entre 0 (totalmente transparente) y 1 (totalmente opaca) */
}

.imagen-opaca {
  opacity: 1; /* Aplica opacidad inicial */
  transition: scale(1.05); /* Suaviza los cambios */
}

.imagen-opaca:hover {
  opacity: 1; /* Totalmente visible al pasar el mouse */
  transform: scale(1.05); /* Le da un efecto de zoom ligero */
}

#whatsapp-float-button {
  position: fixed;
  bottom: 20px;
  /* Ajusta la distancia desde el borde inferior */
  right: 20px;
  /* Ajusta la distancia desde el borde derecho */
  background-color: #25D366;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.font-bold {
  font-weight: bold;
}

.bold-black {
  font-weight: bold;
  color: black;
}

.bold-price {
  font-weight: bold;
  color: #212934;
}

#whatsapp-float-button img {
  width: 40px;
  height: 40px;
}

#whatsapp-float-button:hover {
  background-color: #128C7E;
}

@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;
  }

  .products {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columnas en pantallas medianas */
  }
}

/* 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;
  }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.3);
  /* Fondo semi-transparente */
  border-radius: 50%;
  /* Hacerlo circular */
  border: none;
  /* Eliminar bordes */
  box-shadow: none;
  /* Eliminar sombras */
}

.carousel-control-prev,
.carousel-control-next {
  background: none;
  /* Eliminar fondo del contenedor */
  border: none;
  /* Asegurarse de que no haya bordes en el contenedor */
  outline: none;
  /* Evitar bordes en caso de foco */
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: rgba(0, 0, 0, 0.5);
  /* Fondo más oscuro al pasar el cursor */
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  /* Ajusta la distancia desde la parte inferior */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: rgba(0, 0, 0, 0.5);
  /* Color por defecto */
  border-radius: 50%;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.carousel-indicators li.active {
  background-color: #ffffff;
  /* Color cuando está activo */
}

.carousel-indicators li:hover {
  background-color: rgba(255, 255, 255, 0.7);
  /* Efecto hover */
}

.carousel img {
  user-select: none;
  /* Evita seleccionar imágenes */
  pointer-events: none;
  /* Mejora el manejo del puntero */
}

#templatemo_nav_top {
  background-color: #212934;
}

.products {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten en varias filas */
  gap: 1rem; /* Espaciado entre los elementos */
  list-style: none; /* Quita los estilos de lista */
  padding: 0; /* Elimina los márgenes internos */
  margin: 0; /* Elimina los márgenes externos */
}

.product-item {
  flex: 1 1 calc(25% - 1rem); /* Cada elemento ocupa el 25% del ancho del contenedor menos el espaciado */
  box-sizing: border-box; /* Incluye el padding y border en el cálculo del tamaño */
  background: #f8f8f8; /* Fondo claro para destacar */
  border: 1px solid #ddd; /* Bordes suaves */
  border-radius: 5px; /* Bordes redondeados */
  overflow: hidden; /* Evita desbordamientos */
}

.product-item:hover {
  transform: scale(1.05); /* Agranda ligeramente el recuadro al hacer hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada en hover */
}

.image img {
  width: 100%; /* La imagen ocupa todo el espacio del recuadro */
  height: auto; /* Mantiene la proporción de la imagen */
}



.title p {
  font-size: 16px; /* Tamaño de la fuente */
  color: white; /* Color oscuro para el texto */
  margin: 0; /* Elimina el margen del párrafo */
  background-color: #27445C;
  width: 100%; /* Ocupa todo el ancho disponible */
  text-align: center; /* Centra el texto */
  padding: 10px 0; /* Ajusta el espacio arriba y abajo */
  box-sizing: border-box; /* Incluye el padding en el cálculo del ancho */
}

.product-item {
  display: flex;
  text-align: center;
  flex-direction: column; /* Asegura que los elementos dentro estén en columna */
  align-items: stretch; /* Ocupa el ancho completo del contenedor */
  margin: 0; /* Elimina márgenes alrededor del item */
  padding: 0; /* Elimina cualquier relleno */
  width: 100%; /* Asegura que ocupe todo el ancho disponible */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 elementos por fila */
  gap: 16px; /* Espaciado entre los elementos */
  padding: 0;
  list-style: none;
}

.product-item .content {
  flex-grow: 1; /* Hace que el contenido ocupe el espacio necesario */
  display: flex;
  align-items: center; /* Centra verticalmente el texto */
  justify-content: center; /* Centra horizontalmente el texto */
  margin: 0; /* Elimina márgenes */
  padding: 0; /* Elimina paddings */
  background-color: #27445C; /* Fondo verde ocupa todo el espacio */
  width: 100%; /* Asegura que abarque todo el ancho */
  box-sizing: border-box; /* Evita desbordes por padding o border */
  text-align: center;
}

.product-item .title {
  background-color: #27445C;
  margin-top: 8px;
  padding: 8px;
  color: white;
  font-weight: bold;
  border-radius: 4px;
  text-transform: uppercase;
}

.product-item .image img {
  width: 100%; /* Asegura que las imágenes sean responsivas */
  height: auto; /* Mantiene la proporción */
  display: block;
}

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

@media (max-width: 1024px) {
  .product-item {
      flex: 1 1 calc(33.33% - 1rem); /* 3 elementos por fila */
  }
}

/* Para pantallas medianas (tablet) */
@media (max-width: 768px) {
  .products {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 2 columnas */
  }
  .product-item {
    flex: 1 1 calc(50% - 1rem); /* 2 elementos por fila */
  }
}

/* Para pantallas pequeñas (móvil) */
@media (max-width: 480px) {
  .products {
    grid-template-columns: 1fr !important;
    /* 1 columna */
  }
  .product-item {
    flex: 1 1 100%; /* 1 elemento por fila */
  }
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

.nav-padding {
  padding-top: 12px; /* Ajusta el valor según sea necesario */
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* Estilo del carrusel */
.custom-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: auto;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ancho del contenedor dinámico */
}

.carousel-slide {
  min-width: 200px; /* Ajusta según tus necesidades */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Añade espacio alrededor de las imágenes */
}

.imagen-limitada {
  max-width: 100%; /* Asegura que no se desborden del contenedor */
  max-height: 150px; /* Define una altura máxima */
  object-fit: contain; /* Ajusta la imagen para que mantenga sus proporciones */
  margin: auto; /* Centra las imágenes dentro de los contenedores */
}

.carousel-btn {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 24px;
  padding: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

.carousel-btn:focus {
  outline: none;
}

/* Cada imagen del carrusel */
.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none; /* Evita restricciones heredadas */
  max-height: none;
}

/* Botones de navegación */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  font-size: 18px;
}

/* Posición de los botones */
.carousel-btn.prev {
  left: 10px;
}
.carousel-btn.next {
  right: 10px;
}

/* Efecto hover en los botones */
.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

section-about{
  display: flex;
  width: 100%;
  height: 930px;
  margin-bottom: 40px; /* Ajusta el espacio entre las secciones */
}
section-about img{
  width: 0px;
  flex-grow: 1;
  object-fit: cover;
  opacity: .8;
  transition: .5s ease;
}
section-about img:hover{
  cursor: crosshair;
  width: 300px;
  opacity: 1;
  filter: contrast(120%);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  padding: 20px;
  background: #fff;
  
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo-grid div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

.logo-grid img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

/* */ 
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  color: #0f1923;
  cursor: pointer;
  position: relative;
  padding: 8px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  transition: all .15s ease;
}

.button::before,
.button::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  height: calc(50% - 5px);
  border: 1px solid #7D8082;
  transition: all .15s ease;
}

.button::before {
  top: 0;
  border-bottom-width: 0;
}

.button::after {
  bottom: 0;
  border-top-width: 0;
}

.button:active,
.button:focus {
  outline: none;
}

.button:active::before,
.button:active::after {
  right: 3px;
  left: 3px;
}

.button:active::before {
  top: 3px;
}

.button:active::after {
  bottom: 3px;
}

.button_lg {
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #fff;
  background-color: #0f1923;
  overflow: hidden;
  box-shadow: inset 0px 0px 0px 1px transparent;
}

.button_lg::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: #0f1923;
}

.button_lg::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 4px;
  background-color: #0f1923;
  transition: all .2s ease;
}

.button_sl {
  display: block;
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -8px;
  width: 0;
  background-color: #59ab6e;
  transform: skew(-15deg);
  transition: all .2s ease;
}

.button_text {
  position: relative;
}

.button:hover {
  color: #0f1923;
}

.button:hover .button_sl {
  width: calc(100% + 15px);
}

.button:hover .button_lg::after {
  background-color: #fff;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 1;
  transform: translateY(0);
}

.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Loading */
.enlarge {
  transition: transform 0.3s ease; /* Suaviza la animación */
  width: 200px; /* Tamaño inicial */
  height: auto;
}

.enlarge:hover {
  transform: scale(1.1); /* Agranda la imagen un 10% */
}

#subscribeEmail::placeholder {
  color: white; /* Cambia el color del placeholder a blanco */
  opacity: 1; /* Asegúrate de que el texto sea completamente visible */
}