@media (max-width: 1120px) {
    .hero_area {
        height: 80vh; /* Ocupa toda la altura de la pantalla */
        background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
        background-repeat: no-repeat;
        background-position: center 10%; /* Centra la imagen en el contenedor */
    }

    .hero_btn-box {
        margin-bottom: 90px;
    }
}


/* Estilos específicos para pantallas hasta 390px */
@media (max-width: 390px) {
    .custom_nav-container {
        display: flex;               /* Asegura que se use flexbox */
        flex-direction: row;         /* Mantiene la dirección en fila */
        justify-content: flex-end;    /* Alinea los elementos a la derecha */
        padding: 10px;               /* Espaciado adicional */
    }


    .custom_nav-container .menu-image {
        display: block;              /* Asegura que la imagen esté visible */
        margin-left: auto;          /* Empuja la imagen a la derecha */
        width: auto;                /* Ajusta el ancho según sea necesario */
        height: auto;               /* Mantiene la proporción de la imagen */
    }
}


@media (max-width: 390px) {
    .about_section .about_container .container {
        flex-direction: column;
    }

    .about_section .about_container {
        width: 100%;
    }

    .about_section .about_container .container>div {
        width: 95%;
    }

    .about_section .detail a {
        margin: 25px auto 35px auto;
    }

    .about_section .detail a {

        background-color: #00ff00;
        color: #ffffff;

    }

    .client_section .client_container {
        width: 100%;
    }

    .client_section .carousel-indicators {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero_section h1 {
        font-size: 58px;
    }

    .product_section .container {
        flex-direction: column;
        align-items: center;
    }

    .product_section .img-box.box-1,
    .product_section .img-box.box-3,
    .product_section .img-box.box-2,
    .product_section .img-box.box-4 {
        width: auto;
        margin: 15px 25px;

    }

    .client_section .client_container {
        flex-direction: column;
    }

    .client_section .img_box {
        margin-bottom: 25px;
    }

    .client_section .detail_box {
        flex-direction: column;
        text-align: center;
    }

    .client_section .detail_box h5 {
        flex-direction: row;
    }

}

/* TITULO INDEX */
/* Estilos generales para pantallas hasta 768px */
@media (max-width: 768px) {
    .hero_section {
        height: auto; /* Ajustar automáticamente la altura */
        padding: 100px 15px; /* Ajustar el padding para pantallas más pequeñas */
        display: flex; /* Activar flexbox */
        flex-direction: column; /* Disponer los elementos en columna */
        justify-content: center; /* Centrar verticalmente */
        align-items: flex-start; /* Alinear a la izquierda horizontalmente */
    }

    .hero_section h1 {
        font-size: 50px; /* Ajustar tamaño de fuente para pantallas medianas */
        text-align: left; /* Alinear el texto a la izquierda */
        width: 100%; /* Usar todo el ancho disponible */
        margin: 0; /* Eliminar márgenes innecesarios */
        line-height: 1.2; /* Mejorar legibilidad */
    }

    .hero_section .hero_btn-box a {
        padding: 10px 20px; /* Ajustar padding para botones */
        font-size: 16px; /* Tamaño de fuente ajustado */
        margin-top: 40px; /* Mantener margen superior */
        letter-spacing: 1px; /* Mantener espaciado entre letras */
    }
}

/* Media Query para pantallas muy pequeñas */
@media (max-width: 390px) {
    .hero_section {
        padding: 60px 10px; /* Reducir el padding para pantallas muy pequeñas */
    }

    .hero_section h1 {
        font-size: 36px; /* Tamaño de fuente más pequeño para pantallas pequeñas */
    }

    .hero_section .hero_btn-box a {
        padding: 8px 15px; /* Ajustar padding para botones pequeños */
        font-size: 14px; /* Tamaño de fuente ajustado */
        margin-top: 20px; /* Reducir margen superior */
    }
}


/* Media Query para pantallas ultra pequeñas */
@media (max-width: 360px) {
    .hero_section h1 {
        font-size: 36px; /* Tamaño de fuente más pequeño pero legible */
    }

    .hero_section .hero_btn-box a {
        padding: 8px 20px; /* Reducir padding */
        font-size: 14px; /* Tamaño de fuente ajustado */
    }
}

/* Media Query para pantallas grandes */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px; /* Máximo ancho para pantallas grandes */
    }
}
  

/*RESPONSIVE BOTON MENUS INICIO - NOSOTROS - PRODUCTO */
/* Responsive para Dispositivos Móviles (767px y menores) */
@media (max-width: 767px) {
    .custom_nav-container.navbar-expand-lg .navbar-nav {
    display: flex;
      flex-direction: column; /* Organiza los enlaces en una columna */
    align-items: center;
    }
    .custom_nav-container.navbar-expand-lg .navbar-nav .nav-link {
    padding: 15px 20px;
    font-size: 1.2em;
    width: 100%; /* El enlace ocupa el ancho completo del contenedor */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Línea divisoria entre enlaces */
    text-align: left; /* Alinea el texto a la izquierda para un mejor aspecto en móviles */
    }
    .custom_nav-container.navbar-expand-lg .navbar-nav .nav-link:last-child {
    border-bottom: none; /* Quita la línea divisoria del último enlace */
    }
    .custom_nav-container.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #ffd700;
      background-color: rgba(255, 255, 255, 0.1); /* Añade un fondo ligero al pasar el cursor */
    }
}


/* Banner vehiculos GDI - INDEX */
@media (max-width: 768px) {
    .banner {
    flex-direction: column;
    justify-content: center;
    padding: 20px;
      height: auto; /* Ajusta la altura según el contenido */
    text-align: center;
    }

    .banner-content {
    max-width: 100%;
    margin-bottom: 20px;
    }

    .banner-content h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    }

    .banner-content p {
    font-size: 1em;
    margin-bottom: 25px;
    }

    .banner-buttons .btn {
      width: 100%; /* Botones ocupan todo el ancho disponible */
    max-width: 300px;
    padding: 12px 20px;
      margin: 10px 0; /* Separación entre botones */
    }

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

    .logo-grid {
    grid-template-columns: repeat(2, 1fr); /* Dos columnas en lugar de tres */
    grid-template-rows: repeat(3, 1fr);
      gap: 10px; /* Ajuste del espacio entre cuadros */
    }

    .logo-box img {
      width: 80%; /* Ajusta el tamaño de la imagen en móviles */
    }
}

/*TITLE POR QUE ELEGIRNOS*/
@media (max-width: 768px) {
    .impact-title {
        font-size: 2em; /* Ajuste de tamaño de fuente en pantallas pequeñas */
        margin: 15px 0;
        text-align: center;
    }
}

/*PORQUE ELEGIR LOVATO*/
/* Mobile Devices */
@media (max-width: 768px) {
    .impact-title {
        font-size: 2em;
        margin-bottom: 15px;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    .grid-item {
        font-size: 0.9em;
        padding: 15px;
    }

    .icon {
        font-size: 1.3em;
    }

    .see-more {
        font-size: 1em;
    }
}

/*Nosotros*/
@media (max-width: 576px) {
    .about-title {
        font-size: 2.5rem; /* Reducir tamaño del título */
        text-align: center; /* Centrar título */
    }

    .about-text {
        font-size: 0.9rem; /* Reducir tamaño del texto */
        line-height: 1.5; /* Mejorar legibilidad */
        padding: 0 15px; /* Añadir padding para evitar que se pegue a los bordes */
    }

    .about-icons {
        display: grid; /* Cambiar a grid para un layout más controlado */
        grid-template-columns: repeat(2, 1fr); /* Dos columnas */
        gap: 15px; /* Espacio entre los íconos */
        padding: 0 10px; /* Padding para evitar que se peguen a los bordes */
    }

    .icon-item {
        margin: 0; /* Eliminar margen para un diseño más limpio */
        text-align: center; /* Centrar íconos */
    }

    .mission-title, 
    .vision-title {
        font-size: 1.5rem; /* Reducir tamaño de los títulos */
        text-align: center; /* Centrar títulos */
    }
}

/* Media Query para tabletas (pantallas medianas) */
@media (min-width: 577px) and (max-width: 768px) {
    .about-title {
        font-size: 2.8rem; /* Tamaño intermedio para el título */
        text-align: center; /* Centrar título */
    }

    .about-text {
        font-size: 1rem; /* Tamaño de texto ajustado */
        line-height: 1.6; /* Mejorar legibilidad */
        padding: 0 20px; /* Padding adicional */
    }

    .about-icons {
        display: flex; /* Cambiar a flex para mayor control */
        justify-content: space-around; /* Distribuir íconos de manera uniforme */
        flex-wrap: wrap; /* Permitir que los íconos se envuelvan */
    }

    .icon-item {
        margin: 10px; /* Ajustar margen entre íconos */
        flex-basis: 45%; /* Asegurarse de que ocupen el 45% del contenedor */
        text-align: center; /* Centrar íconos */
    }

    .mission-title, 
    .vision-title {
        font-size: 1.8rem; /* Tamaño intermedio para títulos */
        text-align: center; /* Centrar títulos */
    }
}

/* Media Query para pantallas grandes (desktops) */
@media (min-width: 769px) {
    .about-title {
        font-size: 3rem; /* Tamaño original del título */
        text-align: left; /* Alinear a la izquierda */
    }

    .about-text {
        font-size: 1.1rem; /* Tamaño original del texto */
        line-height: 1.5; /* Mejorar legibilidad */
        padding: 0; /* Sin padding adicional */
    }

    .about-icons {
        display: flex; /* Flex para un mejor diseño */
        justify-content: center; /* Centrar íconos */
        flex-wrap: wrap; /* Permitir que se envuelvan si es necesario */
    }

    .icon-item {
        margin: 20px; /* Margen original entre íconos */
        flex-basis: auto; /* Tamaño automático para íconos */
        text-align: center; /* Centrar íconos */
    }

    .mission-title, 
    .vision-title {
        font-size: 2rem; /* Tamaño original para títulos */
        text-align: left; /* Alinear a la izquierda */
    }
}

  /*PRODUCTOS - BOTONES */
  @media screen and (max-width: 768px) {
    .product_section .container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en dispositivos móviles */
        grid-template-rows: auto; /* Las filas se ajustarán automáticamente */
        padding: 20px; /* Espaciado adicional para mayor confort */
    }

    .product_section a {
        padding: 10px 20px; /* Aumentar el padding para enlaces más grandes */
        font-size: 1em; /* Aumentar el tamaño de la fuente */
        text-align: center; /* Centrar el texto */
    }
}

@media screen and (max-width: 480px) {
    .product_section .container {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
        grid-template-rows: auto; /* Las filas se ajustarán automáticamente */
        padding: 15px; /* Espaciado adicional */
    }

    .product_section a {
        padding: 12px 18px; /* Aumentar el padding para enlaces más grandes */
        font-size: 0.9em; /* Tamaño de fuente ligeramente más grande */
        text-align: center; /* Centrar el texto */
    }
}


  /* Media Query Taller*/
@media (max-width: 768px) {
    /* Ajuste del título principal */
    .conversion_section h1 {
        font-size: 2em;
        margin-bottom: 30px;
    }

    /* Ajuste del grid de conversión */
    .conversion-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        gap: 20px;
    }

    /* Ajuste de las imágenes */
    .img-box img {
        max-width: 100%; /* Las imágenes ocupan el ancho completo del contenedor */
    }

    /* Ajuste del tamaño del título de conversión */
    .conversion-title {
        font-size: 1.3em;
    }

    /* Ajuste del botón Ver Más */
    .see-more-btn {
        padding: 12px 25px;
        font-size: 1em;
    }
}

/* Media Query para pantallas muy pequeñas (teléfonos más pequeños) */
@media (max-width: 480px) {
    /* Ajuste del título principal */
    .conversion_section h1 {
        font-size: 1.8em;
        margin-bottom: 25px;
    }

    /* Ajuste del título de conversión */
    .conversion-title {
        font-size: 1.2em;
    }

    /* Ajuste del botón Ver Más */
    .see-more-btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}


@media (min-width: 601px) and (max-width: 1024px) {
    .modal-content {
        max-width: 70%;
        max-height: 70%;
    }

    .close {
        font-size: 35px;
    }
}

/* NUESTRO SERVICIOS */
@media (min-width: 1025px) {
    .modal-content {
        max-width: 60%;
        max-height: 60%;
    }

    .close {
        font-size: 40px;
    }
}

/*NUESTROS CLIENTES AVALAN TU CONVERSIÓN*/
@media only screen and (max-width: 768px) {
  .banner_taller {
      flex-direction: column;
      height: auto; /* Ajustar altura para contenido flexible */
      padding: 20px; /* Reducir relleno en móviles */
      align-items: center; /* Centrar contenido */
  }

  .banner-content-taller {
      max-width: 90%; /* Aumentar el ancho en móviles */
      text-align: center; /* Centrar el texto */
      margin-bottom: 20px; /* Espacio entre el contenido y el resto */
  }

  .banner-content-taller h2 {
      font-size: 2.2em; /* Mantener un tamaño de fuente legible */
      margin-bottom: 10px; /* Espacio debajo del título */
  }

  .banner-content-taller .highlight-client {
      font-size: 1.8em; /* Reducir tamaño de fuente en móviles */
      margin-bottom: 10px; /* Espacio debajo del texto destacado */
  }

  .banner-content-taller p {
      font-size: 1.2em; /* Reducir tamaño de fuente en móviles */
      line-height: 1.4; /* Aumentar el interlineado para mejor lectura */
      margin-bottom: 20px; /* Espacio adicional al final del párrafo */
  }

  .taller-video-table {
      grid-template-columns: 1fr; /* Mostrar los videos en una sola columna */
      gap: 15px; /* Reducir espacio entre videos */
  }

  .video-cell {
      padding: 5px; /* Espacio alrededor de las celdas */
  }

  .video-cell iframe {
      height: 200px; /* Ajustar altura de videos en móviles */
      border-radius: 10px; /* Bordes redondeados para un mejor diseño */
  }

  .taller-btn {
      font-size: 16px; /* Reducir tamaño de fuente en móviles */
      padding: 12px 20px; /* Ajustar relleno en móviles */
      border-radius: 25px; /* Bordes redondeados para botones */
      transition: background-color 0.3s; /* Efecto de transición */
  }

  .taller-btn:hover {
      background-color: #007bb5; /* Color de fondo al pasar el ratón */
  }
}


  /*PRODUCTOS - BOTONES*/
 /* Media Queries para dispositivos móviles */
@media screen and (max-width: 768px) {
    .product-container {
      grid-template-columns: repeat(3, 1fr); /* 3 columnas en dispositivos medianos */
    }
  }
  
  @media screen and (max-width: 480px) {
    .hero_section_productos h1,
    .hero_section_productos_gnv h1 {
      font-size: 30px; /* Tamaño aún más pequeño para pantallas pequeñas */
    }
  
    .product-container {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas pequeñas */
      padding: 10px; /* Espaciado reducido */
    }
  
    .product {
      padding: 10px; /* Espaciado reducido */
    }
  
    .product .title {
      font-size: 14px; /* Tamaño de fuente ajustado */
    }
  
    .close-btn {
      font-size: 30px; /* Ajuste para botón de cerrar */
      width: 40px; /* Ajuste para botón de cerrar */
      height: 40px; /* Ajuste para botón de cerrar */
    }
  }
  /* SUB TITULO DE PRODUCTOS */
  @media screen and (max-width: 768px) {
    .button-container {
      gap: 10px; /* Reducir el espacio en móviles */
    }
  
    .button, .button_gnv {
      font-size: 16px; /* Ajustar el tamaño de la fuente en móviles */
      height: 50px; /* Disminuir la altura del botón en móviles */
    }
  }
  
  @media screen and (max-width: 390px) {
    .button-container {
      flex-direction: column; /* Alinear botones en columna en pantallas muy pequeñas */
      align-items: center; /* Centrar los botones */
    }
  
    .button, .button_gnv {
      width: 90%; /* Ampliar el ancho en pantallas pequeñas */
      height: 45px; /* Ajustar la altura del botón */
      font-size: 14px; /* Ajustar el tamaño de la fuente */
    }
  }

/*Contacto*/
@media screen and (max-width: 768px) {
  .contact_section .container {
    padding: 0 15px; /* Espaciado lateral reducido */
  }

  .contact_section input {
    height: 45px; /* Altura de los inputs ajustada */
    margin: 10px 0; /* Margen ajustado */
  }

  .contact_section button {
    padding: 12px 25px; /* Ajustar el padding del botón */
  }

  .time-large {
    font-size: 1.2rem; /* Ajustar tamaño de fuente para móviles */
  }
}

@media screen and (max-width: 480px) {
  .contact_section {
    padding: 20px 0; /* Espacio alrededor reducido */
  }

  .contact_section input {
    height: 38px; /* Altura de los inputs aún más ajustada */
    font-size: 14px; /* Tamaño de fuente en inputs */
  }

  .contact_section button {
    padding: 10px 15px; /* Ajustar el padding del botón para pantallas pequeñas */
    font-size: 14px; /* Tamaño de fuente del botón */
  }

  .time-large {
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
  }

  /* Opcional: ajustar el contenedor de la sección de contacto */
  .contact_section .container {
    flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    align-items: center; /* Centrar los elementos */
  }
}