@font-face {
  font-family: "Ethnocentric";
  src: url("../fonts/ethnocentric/ethnocentric rg.ttf") format("ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Ethnocentric";
  src: url("../fonts/ethnocentric/ethnocentric rg it.ttf") format("ttf");
  font-weight: 400;
}

@font-face {
  font-family: "poppins";
  src: url("../fonts/ethnocentric/Poppins-Regular.ttf") format("ttf");
  font-weight: 400;
}

@font-face {
  font-family: "poppins";
  src: url("../fonts/ethnocentric/Poppins-Bold.ttf") format("ttf");
  font-weight: bold;
}

/*TIPOGRAFIA DE H1 / H2 / H3 */
h1{
  font-family: Montserrat, sans-serif;
  font-weight: 1000; /* Grado de grosor */
}
h2,
h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 500; /* Grado de grosor */
}
/*SOMBRAS A LETRAS INDEX */
.text-shadow {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}
/*COLOR Y tTIPOGRAFIA DE FONDO WEB*/
body {
  font-family: "poppins", sans-serif;
  color: #101010;/*Color de letra*/
  background-color: #ffffff;/*Color del fondo web*/
}

.layout_padding {
  padding: 75px 0;
}
.layout_padding_taller {
  padding: 50px 0;
}

.layout_padding2 {
  padding: 45px 0;
}

.layout_padding2-top {
  padding-top: 45px;
}

.layout_padding2-bottom {
  padding-bottom: 45px;
}

.layout_padding-top {
  padding-top: 75px;
}

.layout_padding-bottom {
  padding-bottom: 75px;
}

.custom_heading {
  position: relative;
}

.custom_heading::before {
  position: absolute;
  content: "";
  left: -45px;
  width: 37px;
  height: 32px;
  background-image: url(../images/herbal.png);
  background-size: cover;
}

/*header section*/
@keyframes wipe-in-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

[transition-style="in:wipe:right"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

.hero_area {
  height: 100vh;
  background-image: url(../images/FONDO.png);
  background-size: cover;
  background-attachment: fixed;
}

.sub_page .hero_area {
  height: auto;
}

.hero_area.sub_pages {
  height: auto;
}

.header_section .container-fluid {
  padding-right: 25px;
  padding-left: 25px;
}

.header_section .nav_container {
  margin: 0 auto;
}


/*BOTONES INICIO - NOSOTROS - PRODUCTO - CONTACTO*/
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {
  padding: 20px 35px;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 1000; /* Aumenta el grosor de las letras */
  font-weight: bold;
  letter-spacing: 2.5px;/*Sepracion de las letras*/
  transition: all 0.3s ease-in-out;
  position: relative;
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;/*Posicion de la linea*/
  width: 0;
  height: 5px;/*Grosor de la Linea*/
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link:hover::before {
  width: 100%;
}

.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link:hover {
  color: #FFD700; /* Cambia el color del texto a dorado al pasar el cursor */
  transform: scale(1.05); /* Aumenta ligeramente el tamaño del texto */
}
/*END BOTONES INICIO - NOSOTROS - PRODUCTO - CONTACTO*/

a,
a:hover,
a:focus {
  text-decoration: none;
}

a:hover,
a:focus {
  color: initial;
}

.btn,
.btn:focus {
  outline: none !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.navbar-brand,
.navbar-brand:hover {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 24px;
  color: #fafcfd;
}

.custom_nav-container .nav_search-btn {
  background-image: url(../images/search-icon.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position-y: 7px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
}

.navbar-brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  align-items: center;
  margin-right: 0;
}

/*TAMAÑO DE LOGO BLANCO "LOVATO"*/
/* Barra de navegación */
.custom_nav-container {
  z-index: 9999; /* Asegura que esté sobre la mayoría de los elementos, pero no exageradamente alto */
  position: relative; /* Hace que el contenedor nave se mantenga en su lugar sin superposiciones */
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*background-color: rgba(148, 145, 145, 0); /* Fondo oscuro semitransparente para mayor claridad */
}

/* Imagen de la marca */
.navbar-brand img {
  width: 300px;
  position: relative; /* La imagen también puede tener un position relative */
  z-index: 1; /* Se asegura que la imagen esté bien ubicada sobre el fondo */
}

/* Texto de la marca */
.navbar-brand span {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  font-family: "Ethnocentric";
  position: relative; /* Añadir también position relative */
  z-index: 1; /* El texto debe estar bien posicionado */
}

/* Botón de menú en dispositivos móviles */
.custom_nav-container .navbar-toggler {
  outline: none;
  z-index: 2; /* Aseguramos que esté encima de todo lo demás */
}

/* Ícono del botón de menú */
.custom_nav-container .navbar-toggler .navbar-toggler-icon {
  background-image: url(../images/menu.png);
  background-size: 35px;
}

/* Ajustar el contenido principal para que no se superponga */
.main-content {
  margin-top: 100px; /* Ajustar según la altura de la barra de navegación para evitar superposición */
}


/*end header section*/
.hero_section {
  text-align: center;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 75%;
}

.hero_section h1 {
  font-size: 85px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 85%;
  margin: 0 auto;
}

/*BOTON CONTACTO EN INDEX*/
.hero_section .hero_btn-box a {
  display: inline-block;
  padding: 12px 55px;
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  margin-top: 55px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  transition: all 0.5s ease; /* Añade una transición suave para los cambios */
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.hero_section .hero_btn-box a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  transition: all 0.5s ease;
  z-index: -1;
}
.hero_section .hero_btn-box a:hover::before {
  left: -50%;
}
.hero_section .hero_btn-box a:hover {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: scale(1.15); /* Aumenta el tamaño del botón ligeramente al pasar el cursor */
}

.hero_section .hero_btn-box a:hover {
  background-color: #ffffff;
  color: #1f52b4;
}/*END BOTON INDEX*/


/* NOSOTROS */
.about_section {
  background-color: #f4f4f4; /* Color de fondo más suave */
  padding: 50px 0; /* Espaciado superior e inferior */
}

.about-title {
  font-size: 3rem;
  color: #1c3d72; /* Color más atractivo */
  margin-bottom: 40px;
  font-weight: bold;
  text-transform: uppercase; /* Mayúsculas para un efecto más fuerte */
}

.about-text {
  font-size: 1.1rem; /* Aumenta un poco el tamaño de fuente */
  color: #333; /* Color más oscuro para mejor legibilidad */
  line-height: 1.8; /* Mejora la legibilidad */
  margin-bottom: 30px; /* Espacio entre párrafos */
  text-align: justify; /* Justificar texto para un aspecto más limpio */
}

.about_text strong {
  color: #1c3d72; /* Color para el texto en negrita */
}

.about-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Permite que los íconos se ajusten en varias líneas si es necesario */
  margin: 40px 0; /* Espacio superior e inferior */
}

.icon-item {
  position: relative; /* Posicionamiento relativo para el efecto de sombra */
  margin: 20px; /* Espaciado entre los íconos */
  text-align: center; /* Centra el texto bajo los íconos */
  padding: 20px; /* Espacio interno para mejor presentación */
  border-radius: 15px; /* Bordes redondeados */
  background-color: #ffffff; /* Fondo blanco */
  transition: transform 0.3s, box-shadow 0.3s; /* Transiciones suaves */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.icon-item:hover {
  transform: translateY(-10px); /* Efecto de elevación al pasar el mouse */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada en hover */
}

.icon-container {
  font-size: 2.5rem; /* Tamaño del ícono aumentado */
  color: #1c3d72; /* Color del ícono */
  margin-bottom: 15px; /* Espacio entre el ícono y el texto */
  transition: color 0.3s; /* Transición suave para el color */
}

.icon-item:hover .icon-container {
  color: #ff9800; /* Cambia el color del ícono al pasar el mouse */
}

.icon-item p {
  font-size: 1.1rem; /* Tamaño del texto aumentado */
  color: #333; /* Color del texto */
  margin: 0; /* Elimina el margen */
  font-weight: bold; /* Texto en negrita */
}

.about_container_mision, 
.about_container_vision {
  width: 90%;
  margin: 40px auto; /* Aumenta el espacio entre secciones */
  padding: 30px; /* Aumenta el padding */
  background-color: #fff; /* Fondo blanco para contraste */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada */
}

.detail {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.mission-title, 
.vision-title {
  font-size: 2rem; /* Aumenta el tamaño del título */
  color: #1c3d72;
  margin-bottom: 20px;
  font-weight: bold;
  text-transform: uppercase; /* Títulos en mayúsculas */
}

.mission-text, 
.vision-text {
  font-size: 1rem;
  color: #555;
  text-align: justify; /* Justificar texto para un aspecto más limpio */
  line-height: 1.6;
}

.mission-image, 
.vision-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px; /* Bordes más suaves */
  transition: transform 0.4s ease, filter 0.4s ease;
}

.mission-image:hover, 
.vision-image:hover {
  transform: scale(1.05); /* Efecto de zoom */
  filter: brightness(1.1); /* Efecto de brillo al pasar el mouse */
}

@keyframes circle-in-top-right {
  from {
      clip-path: circle(0%);
  }
  to {
      clip-path: circle(150% at top right);
  }
}

[transition-style="in:circle:top-right"] {
  animation: 10s cubic-bezier(.25, 1, .30, 1) circle-in-top-right both;
}


/*END NOSOTROS*/

/*PRODUCTOS */
.product_section {
  padding: 40px 20px;
  background-color: #f7f9fc;
}

/* Contenedor de la cuadrícula de productos */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 3 columnas */
  gap: 30px; /* Espacio entre las imágenes */
}

/* Estilo para las cajas de imagen */
.img-box {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer; /* Indica que es clickeable */
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  transition: transform 0.3s ease;
}

/* Efecto hover para las cajas de imagen */
.img-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.img-box:hover img {
  transform: scale(1.05); /* Zoom ligero al pasar el cursor */
}

/* PRODUCTOS */
.product-link {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}

.img-box:hover .product-link {
  opacity: 1; /* Muestra el enlace al pasar el cursor */
  transform: translate(-50%, 0);
}

/*END PRODUCTOS*/

/*CONTACTANOS*/
.contact_section {
  color: #fff;
  background: url(../images/Fondo_Contacto.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 60px 0; /* Añadir un poco de espacio alrededor */
}

.contact_section .container {
  display: flex;
  justify-content: space-between;
}

.contact_section .row {
  width: 100%;
}

.contact_section input {
  width: 100%;
  border: 0;
  height: 50px;
  border-radius: 30px;
  margin: 20px 0;
  padding-left: 25px;
  background-color: #fdfdfd7a;
  outline: none;
  color: #000000;
}

.contact_section input::placeholder {
  color: #131313;
}

.contact_section input.message-box {
  height: 150px;
}

.contact_section button {
  background-color: #4fca63;
  padding: 15px 55px;
  outline: none;
  border: none;
  border-radius: 30px;
  border: 1px solid #ffffffb7;
  color: #fff;
  font-weight: bold;
}

.contact_section button:hover {
  color: #000000;
  background-color: white;
}

.time-large {
  font-size: 1.5rem; /* Ajusta el tamaño según sea necesario */
  font-weight: bold; /* Puedes hacerla más negrita si lo deseas */
  color: #ffffff; /* Asegúrate de que el color sea visible sobre el fondo */
}


/* Estilos para las secciones de horarios y contacto */
.schedule-title, .form-title {
  margin-bottom: 20px;
}

.schedule {
  margin-top: 20px;
}

.day {
  margin-bottom: 15px;
}

.time-slot {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.time-slot i {
  margin-right: 10px;
  color: #4fca63; /* Color para el ícono del reloj */
}



/*BANNER FINAL*/
.info_section {
  background-image: url(../images/Fondo_End.png);
  background-size: cover;
  background-attachment: fixed;
  padding: 40px 0;
  color: #fff;
}

.info_items {
  display: flex;
  justify-content: flex-start; /* Alinea los elementos al inicio */
  align-items: flex-start;
  text-align: center;
  margin: 0 auto;
}

.item {
  flex: 1;
  max-width: 300px;
}

.logo-section {
  margin-right: 300px; /* Ajusta la cantidad de espacio a la derecha */
  text-align: left;
  flex-basis: 30%; /* Controla el ancho de la sección logo */
}

.location-section {
  flex-basis: 40%; /* Controla el ancho de la sección de ubicación */
  margin: 0 30px; /* Ajusta el espacio alrededor de la sección de ubicación */
  text-align: center;
}

.contact-section {
  margin-left: 300px; /* Ajusta la cantidad de espacio a la izquierda */
  text-align: right;
  flex-basis: 30%; /* Controla el ancho de la sección de contactos */
}

.logo-image {
  max-width: 100%;
  height: auto;
}

.social-media {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.btn-outline-light {
  border-color: #fff;
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px; /* Espacio entre los iconos */
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  background-color: #fff;
  color: #333;
}

.contact-info p {
  font-size: 15px;
  margin-bottom: 10px;
}

/* footer section*/
.footer_section {
  background-color: #ffffff;
  padding: 20px;
  font-weight: 500;
}

.footer_section p {
  color: #292929;
  margin: 0;
  text-align: center;
}

.footer_section a {
  color: #292929;
}

/* end footer section*/
/*# sourceMappingURL=style.css.map */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.banner {
  background-image: url(../images/Fondo_End.png); /* Imagen de fondo */
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 400px; /* Altura del contenedor */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  color: white;
}

.banner-content {
  max-width: 50%;
}

.banner-content h2 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

/* Botones  Vehiculo de inyeccion */
.banner-buttons .btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 1em;
  color: white;
  text-decoration: none;
  margin-right: 10px;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background-color: #4fca63; /* Verde */
}

.btn-secondary {
  background-color: #4fca63; /* Azul */
}

.banner-buttons .btn:hover {
  background-color: #ffffff;
  color: #000;
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.banner-buttons .btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.logo-container {
  max-width: 50%;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px; /* Espacio entre los cuadros */
}

.logo-box {
  background-color: white;
  padding: 8px; /* Espacio interno más pequeño */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px; /* Bordes redondeados */
}

.logo-box img {
  width: 70%; /* Tamaño reducido de la imagen */
  height: auto;
}
/*TITLE POR QUE ELEGIR LOVATO*/
.impact-title {
  color: #000000; /* Color negro */
  font-family: 'Montserrat', sans-serif; /* Tipografía Montserrat */
  font-weight: bold; /* Grosor de la letra */
  font-size: 2.5em; /* Tamaño grande para mayor impacto */
  letter-spacing: 2px; /* Espaciado entre letras */
  text-transform: uppercase; /* Convierte el texto a mayúsculas */
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); /* Sombra sutil para resaltar */
  margin: 20px 0; /* Espacio alrededor del título */
}

/*Porque elegir lovato*/
.product_section {
  padding: 20px;
  background-color: #fafbff;
}

.impact-title {
  font-size: 2.5em;
  color: #333;
  margin-bottom: 20px;
}

.container {
  padding: 20px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.grid-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
  font-size: 1em;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.icon-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.icon {
  font-size: 1.5em;
  color: #007bff;
  margin-right: 10px;
}

.grid-item strong {
  font-size: 1.2em;
  font-weight: bold;
}

.grid-item p {
  text-align: justify;
  margin: 0;
}

.see-more {
  font-size: 1.2em;
  color: #007bff;
  text-decoration: none;
  margin-top: 20px;
  transition: color 0.3s;
}

.see-more:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Estilos para el contenedor de redes sociales */
.social-icons {
  position: fixed; /* Fija el contenedor en la pantalla */
  right: 0; /* Coloca el contenedor en el lado derecho */
  top: 50%; /* Centra verticalmente el contenedor */
  transform: translateY(-50%); /* Ajusta para centrar perfectamente */
  display: flex;
  flex-direction: column; /* Coloca los iconos en una columna */
  align-items: flex-end; /* Alinea los iconos a la derecha */
  padding: 10px 0;
}

/* Estilos para cada icono */
.social-icons a {
  position: relative;
  margin: 10px 0;
  font-size: 2em;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
  padding: 10px;
  border-radius: 8px 0 0 8px; /* Bordes redondeados en el lado izquierdo */
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1); /* Sombra en el lado derecho */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Transiciones suaves */
  width: 50px; /* Ancho inicial del icono */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Efecto de hover en el icono */
.social-icons a:hover {
  color: #007bff; /* Cambia el color del icono al pasar el cursor */
  background-color: rgba(255, 255, 255, 1); /* Aumenta la opacidad del fondo */
  transform: translateX(-30px); /* Desplaza todo el contenedor hacia la izquierda */
  width: 80px; /* Expande el ancho del icono */
}

/* Estilos para el texto que aparece al lado del icono */
.social-icons a::before {
  content: attr(title); /* Muestra el atributo 'title' del enlace */
  position: absolute;
  right: 100%; /* Coloca el texto fuera del icono, hacia la izquierda */
  top: 50%; /* Centra verticalmente el texto */
  transform: translateY(-50%) translateX(10px); /* Inicialmente, coloca el texto a la derecha del icono */
  white-space: nowrap;
  padding: 5px 10px;
  background-color: #007bff; /* Fondo azul para el texto */
  color: #fff; /* Texto blanco */
  border-radius: 4px; /* Bordes redondeados */
  opacity: 0; /* Oculta el texto inicialmente */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para el texto */
  font-size: 0.9em;
  pointer-events: none; /* El texto no interferirá con los eventos del ratón */
}

/* Efecto de hover en el texto */
.social-icons a:hover::before {
  opacity: 1; /* Hace visible el texto al pasar el cursor */
  transform: translateY(-50%) translateX(-10px); /* Desplaza el texto hacia la izquierda, sin modificar la posición inicial del icono */
}

/*Taller*/
/* Sección de conversión */
.conversion_section {
  padding: 40px 20px;
  background-color: #f4f4f4;
}

/* Título principal */
.conversion_section h1 {
  font-size: 3rem;
  color: #333;
  margin-bottom: 40px;
}

/* Grid de conversión */
.conversion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  justify-content: center;
  align-items: center;
}

/* Estilo para cada imagen y título */
.img-box {
  text-align: center;
  transition: transform 0.3s ease;
  overflow: hidden; /* Asegura que la imagen no se desborde del contenedor */
}

.img-box img {
  width: 100%;
  height: 100%; /* Asegura que la imagen ocupe todo el contenedor */
  object-fit: cover; /* Mantiene el aspecto de la imagen mientras llena el contenedor */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-box:hover img {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Estilo para los títulos de las conversiones */
.conversion-title {
  margin-top: 20px;
  font-size: 1.5em;
  color: #007bff;
  font-weight: bold;
  text-transform: uppercase;
}

/* Botón Ver Más */
.see-more-btn {
  padding: 15px 30px;
  background-color: #007bff;
  color: #ffffff;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.see-more-btn:hover {
  background-color: #0056b3;
  transform: translateY(-3px);
}

/*End Taller*/

/*BANER TALLER - NUESTROS CLIENTES AVALAN TU CONVERSIÓN*/
/* Importa una fuente moderna desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.banner_taller {
  background-image: url(../images/Fondo_End.png); /* Imagen de fondo */
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 850px; /* Altura del contenedor */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  color: white;
  font-family: 'Roboto', sans-serif; /* Fuente moderna */
}

.banner-content-taller {
  max-width: 50%;
}

.banner-content-taller h2 {
  font-size: 2.8em; /* Tamaño de fuente ajustado */
  font-weight: 700; /* Peso de fuente más destacado */
  margin-bottom: 15px;
}

.banner-content-taller .highlight-client {
  font-size: 2.6em; /* Tamaño de fuente grande para "CLIENTES" */
  font-weight: 850; /* Fuente más gruesa para destacar */
  color: #FFD700; /* Color dorado para resaltar */
  text-transform: uppercase; /* Convertir a mayúsculas para mayor impacto */
}

.banner-content-taller p {
  font-size: 1.4em; /* Tamaño de fuente ajustado */
  margin-bottom: 40px;
}

.taller-banner-buttons {
  margin-top: 20px;
}

.taller-btn {
  background-color: #00a4ef;
  border: none;
  padding: 15px 25px;
  color: white;
  cursor: pointer;
  border-radius: 25px;
  font-size: 18px;
  text-decoration: none;
  font-family: 'Roboto', sans-serif; /* Consistencia en la fuente */
}

.taller-video-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.video-cell {
  padding: 10px;
  text-align: center;
}

.video-cell iframe {
  width: 100%;
  height: 400px; /* Ajustar según el diseño */
  border-radius: 20px;
}
/*END NUESTROS CLIENTES AVALAN TU CONVERSIÓN*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap'); /* Fuente cursiva */

.visit-taller-section {
  text-align: center; /* Centrar el contenido */
  padding: 50px; /* Espaciado interno */
  background-color: #ffffff; /* Color de fondo suave */
}

.text-center h2 {
  font-size: 2.5em; /* Tamaño grande del texto */
  font-weight: 600; /* Peso de fuente más destacado */
  color: #000000; /* Color del texto */
  margin-bottom: 20px; /* Espacio debajo del título */
}

.visit-details {
  font-size: 1.5em; /* Tamaño del texto para "¿Cómo llegas?" */
  font-family: 'Sacramento', cursive; /* Fuente cursiva elegante */
  color: #555; /* Color gris claro */
  margin-bottom: 20px; /* Espacio debajo del texto */
}

.maps-button {
  display: inline-block;
  background-color: #00a4ef; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  padding: 15px 30px; /* Espaciado interno del botón */
  font-size: 1em; /* Tamaño del texto en el botón */
  border-radius: 25px; /* Bordes redondeados del botón */
  text-decoration: none; /* Sin subrayado */
  font-family: 'Poppins', sans-serif; /* Fuente moderna */
  font-weight: 600; /* Peso de fuente más destacado */
  transition: background-color 0.3s, transform 0.3s; /* Efecto de transición */
}

.maps-button:hover {
  background-color: #008cba; /* Color de fondo del botón al pasar el ratón */
  transform: scale(1.05); /* Efecto de escala al pasar el ratón */
}

.map-container {
  margin-top: 30px; /* Espacio arriba del contenedor del mapa */
  display: flex;
  justify-content: center; /* Centrar el mapa horizontalmente */
}

.map-container iframe {
  border: 20px; /* Sin borde alrededor del mapa */
  border-radius: 20px; /* Bordes redondeados del mapa */
  width: 100%; /* Ancho del mapa */
  max-width: 800px; /* Ancho máximo del mapa */
  height: 450px; /* Altura del mapa */
}

/*CARRUSEL DE VIDEOS - YOUTUBE*/
.nosotros-about_section {
  padding: 5px 0;
}

.nosotros-banner-buttons {
  margin-top: 20px;
}

.nosotros-btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: white;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 5px;
  text-decoration: none;
}

.nosotros-btn-primary:hover {
  background-color: #0056b3;
  border-color: #004085;
}

/*END CARRUSEL DE VIDEOS - YOUTUBE*/

/*CONVIERTE TU VEHICULO CON LOVATO - INDEX*/
.impact-title-lovato {
  font-size: 50px;
  font-weight: bold;
  color: #013d79;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 0; /* Elimina el espacio superior */
  padding-top: 10px; /* Reduce la distancia del borde superior */
}

.lovato-highlight {
  color: #28a745; /* Color verde llamativo */
  font-size: 60px; /* Tamaño más grande para resaltar */
  font-weight: bolder;
  background: linear-gradient(90deg, rgba(40,167,69,1) 0%, rgba(0,123,255,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0 30px; /* Reduce el padding lateral */
}

.subtitle {
  font-size: 24px;
  color: #555;
  margin-top: 30px; /* Reduce el margen superior para acercarlo al título */
}


/*SECCION PRODUCTOS*/
/* Estilos existentes */
.hero_section_productos,
.hero_section_productos_gnv {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 20%;
}

.hero_section_productos h1,
.hero_section_productos_gnv h1 {
  font-size: 85px;
  margin: 0;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra con baja opacidad */
  color: #33aaea; /* Color original del texto */
}

/* TITULO GNV */
.hero_section_productos_gnv h1 {
  color: #33ea42; /* Color original del texto para GNV */
}

/* Contenedor de productos */
.product-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  padding: 50px;
  max-width: 1200px;
  margin: auto;
  background-color: #f9f9f9; /* Fondo de contenedor para mejorar el contraste */
  border-radius: 12px;
}

/* Estilo del producto */
.product {
  background-color: white;
  border: 1px solid #e0e0e0e3;
  border-radius: 16px;
  text-align: center;
  padding: 20px;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Sombra inicial más suave */
}

/* Efectos al pasar el ratón sobre el producto */
.product:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
  transform: translateY(-8px); /* Elevación más notoria */
}

/* Imagen del producto */
.product img {
  width: 100%;
  max-width: 300px; /* Ajusta el tamaño de la imagen */
  height: auto;
  border-radius: 12px;
  margin-bottom: 15px;
  transition: transform 0.4s ease, filter 0.4s ease;
  object-fit: cover; /* Asegura que la imagen se ajuste bien */
  cursor: pointer; /* Cambia el cursor al pasar sobre la imagen */
}

/* Efectos al pasar el ratón sobre la imagen */
.product img:hover {
  transform: scale(1.1);
  filter: brightness(1.1); /* Aumenta el brillo */
}

/* Título del producto */
.product .title {
  font-size: 20px; /* Tamaño de fuente más grande */
  font-weight: 600; /* Peso de fuente más audaz */
  color: #333; /* Color más oscuro para mejor legibilidad */
  margin: 15px 0; /* Margen más amplio */
  line-height: 1.4; /* Espaciado entre líneas */
}

/* Estilos para el overlay */
.overlay {
  position: fixed; /* Fija el overlay en la ventana */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro con opacidad */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Asegúrate de que el overlay esté encima de todo */
  opacity: 0; /* Inicialmente invisible */
  visibility: hidden; /* Inicialmente oculto */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición de opacidad y visibilidad */
}

/* Imagen dentro del overlay */
.overlay-img {
  max-width: 100%; /* Limitar el tamaño máximo de la imagen */
  max-height: 100%; /* Asegura que la imagen no sobrepase la altura de la ventana */
  object-fit: contain; /* Mantiene la relación de aspecto */
  transition: transform 0.5s ease; /* Transición de escalado */
}

/* Clase para mostrar el overlay */
.overlay.show {
  opacity: 1; /* Hacer visible cuando la clase "show" está activa */
  visibility: visible; /* Hacer visible cuando la clase "show" está activa */
  z-index: 9999; /* Asegúrate de que esté por encima de todos los demás elementos */
}

/* Botón de cerrar */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 48px; /* Aumentar el tamaño de la fuente */
  color: white; /* Color del texto */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-translúcido para mayor contraste */
  border-radius: 50%; /* Hacer el botón redondeado */
  width: 60px; /* Ancho fijo del botón */
  height: 60px; /* Altura fija del botón */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Transiciones para color, fondo y sombra */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
  border: 2px solid rgba(255, 255, 255, 0.5); /* Borde para mayor visibilidad */
}

.close-btn:hover {
  color: #f00; /* Cambiar color al pasar el cursor */
  background-color: rgba(0, 0, 0, 0.7); /* Fondo más oscuro al pasar el cursor */
}

/* Ocultar los elementos del banner principal cuando el overlay está activo */
.overlay.show ~ .hero_section_productos,
.overlay.show ~ .hero_section_productos_gnv {
  display: none;
}
  /* SUB TITULO DE PRODUCTOS*/
  :root {
    --color-gasificadores: #006ac5; /* Azul para Gasificadores */
    --color-diafragmas: #61ff69; /* Coral para Diafragmas */
    --color-multivalvulas: #ffeb3b; /* Amarillo para Multivalvulas */
    --color-electronica: #00c0fb; /* Verde para Electronica */    
    --background-color: #ffffff; /* Color de fondo del contenedor */
    --border-radius: 8px; /* Radio de las esquinas */
    --padding: 15px; /* Relleno del contenedor */
    --gap: 10px; /* Espacio entre los botones */
    --font-size: 15px; /* Tamaño de fuente de los botones */
    --font-weight: bold; /* Grosor de la fuente de los botones */
    --transition-duration: 0.3s; /* Duración de la transición */
    --box-shadow-color: rgb(251, 255, 5); /* Color de la sombra */
    --button-padding: 10px 20px; /* Relleno de los botones */
    --button-border-radius: 25px; /* Radio de las esquinas de los botones */
    --color-oro: #ffd700; /* Color oro */
  }
  
  .button-container {
    position: relative; /* Cambiar a posición relativa */
    display: flex; /* Usar flexbox para alinear horizontalmente */
    justify-content: center; /* Centrar los botones horizontalmente */
    gap: 15px; /* Espaciado entre los botones */
    margin: 20px 0; /* Margen superior e inferior */
  }
  
  .button {
    width: 220px; /* Aumentar el ancho de los botones */
    height: 60px; /* Aumentar la altura de los botones */
    display: flex; /* Usar flexbox para centrar el texto */
    align-items: center; /* Centrar verticalmente el texto */
    justify-content: center; /* Centrar horizontalmente el texto */
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-gasificadores), var(--color-electronica));
    border-radius: var(--button-border-radius);
    font-size: 18px; /* Aumentar el tamaño de la fuente */
    font-weight: var(--font-weight);
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease, color var(--transition-duration) ease; /* Añadir transición para el color */
  }
  
  .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(218, 235, 68, 0.2);
    color: var(--color-oro); /* Cambiar color de texto a oro */
  }

  /*GNV*/
  .button_gnv {
    width: 220px; /* Aumentar el ancho de los botones */
    height: 60px; /* Aumentar la altura de los botones */
    display: flex; /* Usar flexbox para centrar el texto */
    align-items: center; /* Centrar verticalmente el texto */
    justify-content: center; /* Centrar horizontalmente el texto */
    text-align: center;
    text-decoration: none;
    background: linear-gradient(45deg, #5bdd60, #0cc915); /* Degradado verde */
    color: white; /* Color del texto inicial */
    border: none; /* Sin borde */
    padding: var(--button-padding);
    border-radius: var(--button-border-radius);
    font-size: 18px; /* Tamaño de fuente aumentado */
    font-weight: var(--font-weight);
    transition: background var(--transition-duration), color var(--transition-duration);
}

.button_gnv:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(218, 235, 68, 0.2);
  color: #ffd700; /* Color amarillo oro al pasar el ratón */
}

  /*ICONO FLOTANTE WSP*/
.whatsapp-icon {
  position: fixed; /* Fija el icono en la parte inferior */
  bottom: 20px; /* Espaciado desde el fondo */
  right: 20px; /* Espaciado desde la derecha */
  background-color: #25D366; /* Color de fondo de WhatsApp */
  color: white; /* Color del ícono */
  border-radius: 50%; /* Bordes redondeados */
  width: 60px; /* Ancho del contenedor */
  height: 60px; /* Altura del contenedor */
  display: flex; /* Usar flexbox para centrar el ícono */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
  z-index: 1000; /* Asegurar que esté encima de otros elementos */
}

.whatsapp-icon:hover {
  transform: scale(1.1); /* Aumentar ligeramente al pasar el ratón */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada al pasar el ratón */
}

.whatsapp-icon i {
  font-size: 28px; /* Tamaño del ícono */
}

/*MAPA - CONTACTANOS*/
.branch-section {
  padding: 40px 20px;
  text-align: center;
}

.branch-section h2 {
  color: #333;
  margin-bottom: 30px;
}

.map-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.branch {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  width: 800px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.branch:hover {
  transform: translateY(-5px);
}

.branch-info {
  padding: 15px;
}

.branch-info h3 {
  color: #007bff;
  margin: 0 0 10px;
}

.branch-info p {
  margin: 5px 0;
}

.branch-info a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.branch-info a:hover {
  text-decoration: underline;
}

iframe {
  width: 100%;
  height: 200px;
  border: 0;
}

/*INDEX ENVIOS*/
/* Contenedor principal para envíos */
.container.envios {
  text-align: center;
  margin: auto;
  max-width: 800px;
}

/* Estilo del título */
.title {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #333; /* Color del texto */
}

/* Tabla de imágenes */
.image-table {
  width: 100%;
  border-collapse: collapse; /* Eliminar espacio entre celdas */
  margin: 20px 0; /* Espaciado vertical */
}

/* Estilo de las celdas de la tabla */
.image-table td {
  padding: 10px; /* Espaciado interno */
}

/* Estilo de las imágenes en la tabla */
.image-table img {
  width: 150px; /* Tamaño fijo para las imágenes */
  height: auto; /* Mantener proporciones */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
  transition: transform 0.3s; /* Transición suave para efectos */
}

/* Efecto de zoom al pasar el mouse sobre la imagen */
.image-table img:hover {
  transform: scale(1.1); /* Aumentar tamaño al hover */
}

/* Estilo adicional para tablas pequeñas */
.image-table.small {
  margin-top: 40px; /* Espaciado extra para la tabla pequeña */
}


/*CARD EFFECTS - INDEX - BLOC*/
.card-section {
  padding: 40px 20px;
  background-color: #f7f9fc;
}

.card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.card {
  position: relative;
  width: 400px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, z-index 0.3s ease; /* Transición para el z-index */
}

.card-image {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s ease; /* Transición para el filtro */
}
.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent; /* Sin superposición de fondo */
  color: #fff;
  opacity: 0; /* Mantener invisible inicialmente */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.3s ease;
}

.card:hover .card-overlay {
  opacity: 0; /* Mantener invisible al hacer hover */
}

.card:hover {
  transform: scale(1.1); /* Efecto de zoom al pasar el cursor */
  z-index: 10; /* Coloca la tarjeta en el frente */
}

.card:hover .card-image {
  filter: none; /* La imagen se muestra clara al hacer hover */
}

.card-container:hover .card:not(:hover) .card-image {
  filter: blur(5px) brightness(0.5); /* Desenfoque y brillo reducido en las tarjetas que no están en hover */
}
.card-container:hover .card:not(:hover) {
  transform: scale(0.9); /* Reducción del tamaño de las otras tarjetas */
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card-description {
  font-size: 1rem;
}

/**/