*/* Reset de márgenes y padding, y configuración básica */
                        * {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                            font-family: 'Poppins', sans-serif;
                        }

                        body {
                            background-color: #0B0A0A; /* Fondo sólido a toda la página */
                            color: #fff; /* Color del texto en blanco para mayor legibilidad */
                            height: 100%; /* Altura total del body */
                            width: 100%;
                        }

                        header {
                            width: 100%; /* Ajusta el ancho al 100% del contenedor padre */
                            height: 1030px; /* Fija la altura de acuerdo a la imagen */
                            background-size: 20px 1830px; /* Establece las dimensiones específicas */
                            background-repeat: no-repeat; /* Evita que la imagen se repita */
                            background-position: center; /* Centra la imagen dentro del header */
                            position:relative;
                        }  
                        /* Fondo sólido justo debajo de la imagen del header */
                        header::after {
                            content: '';
                            position: absolute;
                            top: 100%; /* Justo debajo de la imagen */
                            left: 0;
                            width: 100%;
                            height: 1000px; /* Ajusta según sea necesario */
                            background-color: #0B0A0A; /* Fondo sólido coincide con el cuerpo */
                            z-index: 0; /* Debajo del contenido */
                        }

                        .header-top {
                            position: fixed;
                            top: 0px; /* Espacio desde la parte superior */
                            left: 0; /* Alinea a la izquierda */
                            right: 0; /* Alinea a la derecha */
                            display: flex;
                            justify-content: space-between; /* Separa los elementos a izquierda y derecha */
                            align-items: center; /* Alinea verticalmente en el centro */
                            padding: 0 20px; /* Espacio horizontal en los extremos */
                            color: white;
                            z-index: 100;
                            font-size: 18px;
                            margin-bottom: 120px;
                            margin-left: 290px;
                            margin-right:210px;
                        }

                        .header-background {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            z-index: -1;
                        }

                        .contact-info a {
                            color: white;
                            text-decoration: none; /* Quita el subrayado de los enlaces */
                            margin-left: 10px; /* Espacio entre el icono y el texto */
                        }

                        .contact-info i {
                            margin-right: 10px; /* Espacio entre el icono y el texto */
                            cursor: pointer; /* Cambia el cursor al pasar sobre el icono */
                            margin-left: 15px;
                        }
                        .contact-info a:hover{
                            color: #FFD100;
                        }
                        .social-icons a {
                            color: white;
                            text-decoration: none;
                            margin-left: 15px; /* Espacio entre los iconos de redes sociales */
                            font-size: 20px; /* Ajusta el tamaño de los iconos */
                        }

                        .social-icons a:hover {
                            color: #FFD100; /* Cambia el color al pasar el cursor sobre los iconos */
                        }
                        /* Contenedor principal */
                        .container {
                            margin-top: 40px;
                            position: sticky; 
                            z-index: 10; 
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start; 
                            padding: 0; /* Sin relleno adicional */
                        }

                        /* Navbar */
                        .navbar {
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            padding: 100px 0;
                            width: 100%;
                            margin-top: -190px;
                            margin-left: -50px;
                            margin-right: -320px;
                        }

                        .nav-links {
                            list-style: none;
                            display: flex;
                            margin-left: 150px;
                            margin-right: 180px;
                            transition: max-height 0.3s ease-out;
                        }

                        .nav-links li {
                            margin-left: 20px;
                        }

                        .nav-links li a {
                            text-decoration: none;
                            color: #fff; /* Enlace blanco */
                            font-weight: bold;
                            margin-right: 20px;
                        }

                        .nav-links li a i {
                            color: #f1c40f; /* Iconos amarillos */
                        }
                        /* Logo container */
                        .logo-container {
                            margin-top: 20px; 
                            margin-left: 150px;
                            margin-right: 150px;
                        }

                        .esgryma-logo {
                            width: 265px; 
                            height: 66px; 
                            margin-bottom: 20px;
                            margin-left: 160px;

                        }

                        /* Hero text */
                        .hero-text {
                            text-align: left; 
                            color: #fff; /* Texto en blanco */
                            font-size: 20px;
                            padding: 0 150px; 
                            margin-top: 10px;
                            margin-left: 15px;
                            margin-right: 150px;
                        }

                        .hero-text h1 {
                            font-size: 56px;
                            font-weight: bold;
                            margin-right: 150px;
                            margin-left: 150px;
                            
                        }

                        .hero-text p {
                            margin-top: 10px;
                            font-size: 18px;
                            margin-right: 150px;
                            margin-left: 150px;
                        }

                        /* Botón */
                        .btn {
                            display: inline-block;
                            background-color: #f1c40f; /* Fondo del botón */
                            color: #000; /* Texto del botón */
                            padding: 10px 20px;
                            text-decoration: none;
                            font-weight: bold;
                            margin-top: 10px;
                            border-radius: 5px;
                            margin-right: 150px;
                            margin-left: 150px;
                        }

                        /* Servicios */
                        .container_services {
                            position: relative;
                            z-index: 10;
                            display: flex;
                            justify-content: center; 
                            align-items: flex-start; 
                            padding: 40px 150px; 
                            background-color: transparent; /* Transparente para que tome el fondo del body */
                            color: #fff; /* Texto en blanco para contraste */
                            flex-wrap: wrap; /* Permitir ajuste en filas */
                            margin-left: -40px;
                            margin-right: 150px;
                            margin-top: 30px;
                            width: 1800px;
                        }

                        /* Estilo individual de los servicios */
                        .service {
                            text-align: left;
                            width: 400px; /* Ajusta el ancho */
                            margin: 20px; /* Espaciado uniforme */
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            margin-top: -240px;
                            margin-left: 10px;
                            
                        }

                        .service h3{
                            margin-left: 50px;
                            width: 500px;
                        }

                        /* Párrafos justificados con cuadro */
                        .service p {
                            margin: 0; 
                            padding: 5px; 
                            color: #ccc; /* Color de texto */
                            text-align: justify; 
                            border-radius: 8px; 
                            line-height: 1.2; 
                            margin-bottom: 5px; 
                            height: 120px; 
                            box-sizing: border-box; 
                            margin-top: 20px;
                            font-size: 16px;
                            margin-left: 130px;
                            width: 340px;
                        }

                        /* Botón dentro del cuadro */
                        .button {
                            background-color: #FFD100; /* Color de fondo */
                            color: black; /* Color del texto */
                            border: none; /* Sin bordes */
                            padding: 10px 20px; /* Relleno interno */
                            font-size: 16px; /* Tamaño de fuente */
                            border-radius: 5px; /* Bordes redondeados */
                            cursor: pointer; /* Cambia el cursor a una mano */
                            transition: background-color 0.3s ease; /* Transición suave */
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
                            position: absolute; /* Posicionamiento absoluto */
                            right: 190px; /* Alineación a la derecha */
                            margin-top: 290px;
                            width:360px;
                            height: 40px;
                            margin-left: -150px;
                        }
                        .button1 {
                            background-color: #FFD100; /* Color de fondo */
                            color: black; /* Color del texto */
                            border: none; /* Sin bordes */
                            padding: 10px 20px; /* Relleno interno */
                            font-size: 16px; /* Tamaño de fuente */
                            border-radius: 5px; /* Bordes redondeados */
                            cursor: pointer; /* Cambia el cursor a una mano */
                            transition: background-color 0.3s ease; /* Transición suave */
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
                            position: absolute; /* Posicionamiento absoluto */
                            right: 620px; /* Alineación a la derecha */
                            margin-top: 290px;
                            width: 360px;
                            height: 40px;
                            margin-left: -180px;

                        }

                        .button2 {
                            background-color: #FFD100; /* Color de fondo */
                            color: black; /* Color del texto */
                            border: none; /* Sin bordes */
                            padding: 10px 20px; /* Relleno interno */
                            font-size: 16px; /* Tamaño de fuente */
                            border-radius: 5px; /* Bordes redondeados */
                            cursor: pointer; /* Cambia el cursor a una mano */
                            transition: background-color 0.3s ease; /* Transición suave */
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
                            position: absolute; /* Posicionamiento absoluto */
                            right: 1050px; /* Alineación a la derecha */
                            margin-top: 290px;
                            width: 360px;
                            height: 40px;
                            margin-left: -120px;
                        }

                        .button2::before {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) rotate(45deg);
                            width: 10px;
                            height: 10px;
                            border-right: 3px solid black;
                            border-top: 3px solid black;
                        }

                        .button::before {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) rotate(45deg);
                            width: 10px;
                            height: 10px;
                            border-right: 3px solid black;
                            border-top: 3px solid black;
                        }

                        .button1::before {
                            
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) rotate(45deg);
                            width: 10px;
                            height: 10px;
                            border-right: 3px solid black;
                            border-top: 3px solid black;
                        }

                        /* Encabezado de servicios */
                        .service h3 {
                            margin-bottom: 10px;
                            color: #fff; /* Color del encabezado */
                            text-align: center; 
                            margin-top: 120px;
                            font-size: 24px;
                        }


                        /* Nueva clase para la imagen */
                        .ernestoylili {
                            position: relative;
                            width: 100%;
                            text-align: center;
                            overflow: hidden;  /* Evita que la imagen se desborde cuando se desplace */
                            z-index: 1; /* Asegura que la imagen esté encima de los otros elementos al hacer la animación */
                            background-color: #0B0A0A;  /* Corregido el color hexadecimal */
                            margin-left: 150px;
                            margin-right: 150px;
                        }

                        .ernestoylili img {
                            position: relative;
                            left: -120%;  /* Inicialmente más a la izquierda, fuera de la pantalla */
                            transition: left 1s ease-out;  /* Animación suave al hacer scroll */
                            margin-left: -90px;
                        }

                        .ernestoylili.visible img {
                            left: -470px;  /* Cuando se hace scroll, la imagen se mueve a la posición original */
                            margin-top: 80px;
                        }

                        /* Descripción al lado de la imagen */
                        .descripcion {
                            margin-left: 950px; /* Ajusta según el diseño, reduce si es necesario */
                            margin-top: -670px;   /* Ajuste en la parte superior */
                            color: #fff;         /* Color del texto */
                            max-width: 600px;    /* Ancho máximo para mayor espacio */
                            width: 100%;         /* Permite que el contenedor ocupe todo el ancho disponible */
                            z-index: 20;          /* Asegura que la descripción esté encima de la imagen */
                            position: relative;   /* Para que el z-index tenga efecto */
                            padding: 20px;       /* Añadir padding para un mejor espaciado interno */
                        }

                        .descripcion h3 {
                            font-size: 50px;       /* Aumentar tamaño de la fuente */
                            font-weight: bold;
                            margin: 20px 0;       /* Aumentar margen vertical */
                            line-height: 1.4;      /* Aumentar espacio entre líneas */
                            letter-spacing: 1px;   /* Incrementar espacio entre letras */
                                margin-left: 120px;

                        }

                        .descripcion p {
                            line-height: 1.8;      /* Espacio entre líneas para mejorar legibilidad */
                            text-align: left;
                            word-spacing: 3px;     /* Aumentar espaciado entre palabras */
                            letter-spacing: 0.5px;  /* Aumentar espaciado entre letras */
                            max-width: none;       /* Permitir texto más largo */
                            width: 100%;           /* Permitir que el párrafo ocupe todo el ancho disponible */
                            margin: 0 0 15px 0;    /* Añadir margen inferior de 15px para separar párrafos */
                            padding: 0;            /* Asegurar que no haya padding que comprima el texto */
                            margin-left: 130px;
                        }


                        /* Estilo del botón */
                        .btndes {
                            background-color: #FFD100;
                            color: black;
                            border: none;
                            padding: 10px 20px;
                            text-align: center;
                            text-decoration: none;
                            display: inline-block;
                            font-size: 16px;
                            margin: 4px 2px;
                            cursor: pointer;
                            border-radius: 15px;
                            margin-left: 120px;

                        }



                        .imagenesmo {
                            position: relative;
                            height: 800px; /* Ajusta este valor según la altura total que necesites */
                            display: flex;
                            justify-content: center;
                            align-items: flex-start; /* Cambiado para alinear al inicio */
                            margin-left: -170px;
                            margin-top: 280px;
                            margin-left: 150px;
                            margin-right: 150px;
                        }

                        .imagenesmo h3 {
                            font-size: 50px; /* Ajusta el tamaño según sea necesario */
                            margin: 40px 0; /* Espacio arriba y abajo del encabezado, aumentado para más separación */
                            margin-left: -150px;
                        }

                        .imagenesmo p {
                            font-size: 70px; /* Ajusta el tamaño según sea necesario */
                            margin-left: -150px;
                            max-width: 2500px;
                        }

                        .image-stack {
                            position: relative;
                            width: 300px; /* Ajusta el tamaño según necesites */
                            height: 450px; /* Ajusta el tamaño según necesites */
                            margin-right: 50px; /* Espacio a la derecha para separar de otros elementos */
                            
                        }

                        .image-stack img {
                            position: absolute;
                            width: 100%;
                            height: auto;
                            border-radius: 15px;
                            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
                            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5), 0 0 10px yellow; /* Sombra en borde de amarillo neón */
                            transition: transform 0.3s ease;
                            margin-top: 190px; /* Esta propiedad no afectará a las imágenes */
                        }

                        .image-stack img:nth-child(1) {
                            top: -170px; /* Ajusta hacia arriba */
                            left: 20px; /* Ajusta hacia la izquierda */
                        }

                        .image-stack img:nth-child(2) {
                            top: 25px;
                            left: 220px;
                        }

                        .image-stack img:nth-child(3) {
                            top: 170px;
                            left: 35px;
                        }

                        .image-stack img:hover {
                            transform: scale(1.3); /* Efecto de hover */
                        }


                        /* Contenido de texto a la izquierda */
                        .text-content {
                            max-width: 45%;
                            text-align: left;
                        }

                        .text-content h2 {
                            font-size: 36px;
                            margin-bottom: 20px;
                        }

                        .text-content p {
                            font-size: 18px;
                            margin-bottom: 20px;
                            line-height: 1.6;
                        }

                        .text-content .btn {
                            background-color: #f1c40f;
                            color: #000;
                            padding: 10px 20px;
                            text-decoration: none;
                            font-weight: bold;
                            border-radius: 5px;
                            display: inline-block;
                            margin-left: -150px;

                        }

                        .unriesgo {
                            display: flex;
                            align-items: center;
                            padding: 40px 20px; /* Espaciado alrededor del div */
                            margin-top:380px; /* Margen superior para desplazar la sección más abajo */
                            background-color: transparent; /* No hay fondo */
                            margin-top: 100px;
                            margin-left: 150px;
                            margin-right: 150px;
                        }

                        .unriesgo .imagen {
                            flex: 1;
                            padding-right: 20px;
                            margin-top: -70px;
                            margin-left: 150px;
                        }

                        .unriesgo img {
                            width: 150%;
                            height: auto;
                            border-radius: 8px; /* Bordes redondeados */
                            margin-left: -80px;
                        }

                        .unriesgo .contenido {
                            flex: 2;
                        }

                        .unriesgo h2 {
                            font-size: 2.5em; /* Tamaño de fuente más grande para el título */
                            color: white; /* Color del texto */
                            margin-bottom: 10px; /* Margen inferior */
                            margin-left: 250px;
                        }

                        .unriesgo p {
                            font-size: 1.2em; /* Tamaño de fuente más grande para el párrafo */
                            color: white; /* Color del texto */
                            line-height: 1.5; /* Espaciado entre líneas */
                            margin-left: 250px;
                        }

                        .brigadas-container{
                            margin-left: 150px;
                            margin-right: 150px;
                        }
                        .brigadas {
                            display: flex; /* Flexbox para centrado */
                            justify-content: center; /* Centrar horizontalmente */
                            align-items: center; /* Centrar verticalmente */
                            text-align: center; /* Centrar el texto horizontalmente */
                            flex-direction: column; /* Asegura que los elementos se alineen en columna */
                            height: 100vh; /* Altura de la vista para centrar en toda la pantalla */
                            margin: 0; /* Elimina márgenes laterales */
                        }

                        .brigadas h2 {
                            font-size: 5em; /* Aumenta el tamaño del título */
                            margin-bottom: 20px; /* Espacio inferior */
                            text-align: center; /* Centrar el texto */
                            margin: 0; /* Elimina márgenes adicionales */
                        }

                        .brigadas p {
                            font-size: 25px;
                            max-width: 800px; /* Limita el ancho máximo del párrafo */
                            margin: 0 auto; /* Centra el párrafo horizontalmente */
                            line-height: 1.5; /* Espaciado entre líneas */
                            overflow-wrap: break-word; /* Permite que las palabras largas se dividan */
                        }


                        .videoesgryma {
                            width: 100%; /* O 90% si prefieres un poco de margen lateral */
                            max-width: 1200px; /* Ajusta el ancho máximo del contenedor */
                            margin: 20px auto; /* Centra el video horizontalmente y agrega margen vertical */
                            display: flex; /* Utiliza flexbox para centrar el video */
                            justify-content: center; /* Centra el video horizontalmente */
                            margin-right: 150px;
                            margin-left: -310px;
                        }

                        /* Asegúrate de que el video esté centrado */
                        .videoesgryma {
                            width: 100%; /* O el ancho que desees */
                            display: flex; /* Usar flexbox para centrar */
                            justify-content: center; /* Centra el video horizontalmente */
                            margin: 20px auto; /* Centra el div horizontalmente */
                        }

                        .videoesgryma iframe {
                            margin-top: -110px;
                            border: 2px solid #dcff14; /* Borde color amarillo neón */
                            box-shadow: 0 0 20px rgba(207, 233, 63, 0.6); /* Efecto de sombra para resaltar el borde */
                            margin-right: 10px;
                        }

                        .galeria {
                            display: flex;
                            justify-content: flex-start; /* Las imágenes empezarán desde el principio sin separación */
                            align-items: center;
                            padding: 20px;
                            gap: 10px;
                            margin-left: 850px;
                            margin-right: 260px;
                            margin-top: 220px;
                        }

                        .texto {
                            flex: 1; /* Ocupa el espacio disponible a la izquierda */
                            margin-right: 20px; /* Espacio entre texto y galería */
                        }

                        .texto h1 {
                            font-size: 2.5em; /* Tamaño de fuente para el título */
                            margin-bottom: 10px; /* Espacio inferior */
                            color: white; /* Color del texto */
                            margin-left: -620px;
                            font-size: 56px;
                            margin-top: -70px;
                        }

                        .texto p {
                            font-size: 1.2em; /* Tamaño de fuente del párrafo */
                            color: white; /* Color del texto */
                            margin-bottom: 20px; /* Espacio inferior */
                            max-width: 500px;
                            margin-left: -620px;
                        }

                        button {
                            padding: 10px 20px; /* Espaciado interno del botón */
                            font-size: 16px; /* Tamaño de la fuente */
                            cursor: pointer; /* Cambia el cursor al pasar por encima */
                            background-color: #FFC107; /* Color de fondo amarillo */
                            color: black; /* Color del texto del botón */
                            border: none; /* Sin borde */
                            border-radius: 5px; /* Bordes redondeados */
                            transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
                            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
                            margin-left: -620px;
                        }

                        button:hover {
                            background-color: #FFB300; /* Color más oscuro al pasar el mouse */
                            transform: scale(1.05); /* Efecto de aumentar al hacer hover */
                        }


                        .foto {
                            position: relative;
                            width: 582px;
                            height: 640px;
                            overflow: hidden;
                            transition: width 0.3s ease;
                            border-radius: 40px;
                            margin: 0; /* Asegurarse que no haya márgenes */
                            border-top-right-radius: 70px;
                            border-top-left-radius: 70px;
                            border-bottom-left-radius:70px;
                            border-bottom-right-radius:70px ;
                        }


                        .foto img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        .foto .info {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            background-color: rgba(0, 0, 0, 0.7);
                            color: white;
                            text-align: center;
                            padding: 10px;
                            opacity: 0; /* Ocultar texto inicialmente */
                            transition: opacity 0.3s ease;
                        }

                        .foto:hover .info {
                            opacity: 1; /* Mostrar texto al hacer hover */
                        }

                        .container-exp {
                            text-align: center;
                            padding: 80px 0px;
                        }

                        h1 {
                            font-size: 53px;
                            margin-bottom: 20px;
                            margin-top: 120px;
                        }

                        p {
                            font-size: 18px;
                            margin-bottom: 40px;
                        }

                        .stats {
                            display: flex;
                            justify-content: space-around;
                            flex-wrap: wrap;
                            margin-top: 140px ;
                        }

                        .stat {
                            background-color: transparent;
                            padding: 20px;
                            border-radius: 10px;
                            margin: 10px;
                            flex: 1 1 200px; /* Flexbox: grow, shrink, basis */
                            max-width: 250px;
                        }

                        .stat h2 {
                            font-size: 66px;
                            margin: 0;
                        }

                        .stat p {
                            font-size: 16px;
                            margin: 0;
                            color: #ccc;
                        }

                        .carousel-container {
                            width: 100%; /* El carrusel ocupará el 100% del ancho del contenedor padre */
                            max-width: 1200px; /* Ancho máximo del carrusel */
                            overflow: hidden; /* Ocultar las imágenes que están fuera del área visible */
                            position: relative;
                            margin: 0 auto; /* Centrar el carrusel en la página */
                            margin-top: 120px;
                        }
                        .clientes-nuestros h2{
                            margin-top: 150px;
                        }

                        .clients {
                            display: flex;
                            transition: transform 0.5s ease-in-out; /* Animación suave */
                        }

                        .client-logo {
                            min-width: 200px; /* Fijar un ancho mínimo para cada imagen */
                            height: 150px; /* Fijar la altura de las imágenes */
                            object-fit: contain; /* Mantener la proporción de las imágenes */
                            margin-right: 10px; /* Espacio entre las imágenes */
                        }

                        button.prev {
                            left: 10px;
                        }

                        button.next {
                            right: 10px;
                        }

                        /* Agrega un estilo de hover para los botones */
                        button.prev:hover, button.next:hover {
                            background-color: orange; /* Cambia a un color diferente al pasar el mouse */
                        }

                        .testimonios {
                            margin-top: 120px;
                            font-size: 36px;
                        }



                        /* Contenedor general */
                        .galeria3 {
                            text-align: center;
                            padding: 2rem;
                        }

                        /* Encabezado */
                        .galeria3 .textog2 h1 {
                            font-size: 2.5rem;
                            margin-bottom: 1rem;
                            color: white;
                            margin-left: -15px;
                        }

                        .galeria3 .textog2 p {
                            font-size: 1.2rem;
                            color: #cccccc;
                            margin-bottom: 1.5rem;
                        }

                        .galeria3 .textog2 button {
                            padding: 0.75rem 1.5rem;
                            font-size: 1rem;
                            color: #121212;
                            background-color: #FFD700; /* Amarillo */
                            border: none;
                            border-radius: 5px;
                            cursor: pointer;
                            transition: background-color 0.3s ease;
                        }

                        .galeria3 .textog2 button:hover {
                            background-color: #FFC107; /* Amarillo más oscuro */
                        }

                        /* Carrusel */
                        .carousel2 {
                            display: flex;
                            justify-content: center;
                            gap: 1rem;
                            flex-wrap: wrap;
                        }

                        /* Tarjeta */
                        .foto {
                            position: relative;
                            width: 250px;
                            height: 350px;
                            overflow: hidden;
                            border-radius: 10px;
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                            background-size: cover;
                            background-position: center;
                        }

                        .foto::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 0.5); /* Efecto oscuro */
                            z-index: 1;
                        }

                        .foto:hover::before {
                            background: rgba(0, 0, 0, 0.3); /* Menor opacidad al pasar el mouse */
                        }

                        /* Texto en la tarjeta */
                        .foto .texto {
                            position: absolute;
                            bottom: 20px;
                            left: 50%;
                            transform: translateX(-50%);
                            z-index: 2;
                            color: white;
                            text-align: center;
                            padding: 0.5rem;
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 5px;
                            backdrop-filter: blur(5px);
                        }

                        .foto .texto h4 {
                            font-size: 1rem;
                            margin: 0.5rem 0;
                        }

                        .foto .texto p {
                            font-size: 0.9rem;
                            margin: 0;
                            color: #dddddd;
                            width: 200px;
                        }

                        .galeria2{
                            display: none;
                        }

                        .image-container {
                            position: relative;
                            width: 300px; /* Ajusta el tamaño de las imágenes */
                            height: 400px; /* Ajusta la altura */
                            overflow: hidden; /* Esconde cualquier exceso de imagen */
                            border-radius: 10px; /* Bordes redondeados */
                        }

                        .image-container img {
                            width: 342px;
                            height: 480px;
                            object-fit: cover; /* Asegura que la imagen cubra todo el contenedor sin deformarse */
                            border-radius: 10px; /* Bordes redondeados */
                            margin: 20px; /* Espacio de 20 px alrededor de la imagen */
                        }

                        .text-overlay {
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            padding: 20px;
                            background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
                            color: white;
                            text-align: center;
                            font-size: 14px;
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                            backdrop-filter: blur(5px); /* Efecto de difuminado en el fondo */
                        }


                        .faq-container {
                            max-width: 800px;
                            margin: 80px auto; /* Centra el contenedor */
                            padding: 20px;
                            background-color: transparent;
                            border-radius: 8px;
                            margin-left: 400px;
                        }

                        h2 {
                            font-size: 3rem;
                        }

                        .faq-item {
                            border-top: 1px solid #3a3a3a;
                        }

                        .faq-item:first-child {
                            border-top: none;
                        }

                        .faq-question {
                            width: 100%;
                            background-color: #0B0A0A;
                            color: #fff;
                            font-size: 1rem;
                            text-align: left;
                            border: none;
                            outline: none;
                            padding: 15px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            cursor: pointer;
                            margin-left: 0px
                        }

                        .faq-question:hover {
                            background-color: #3a3a3a;
                        }

                        .arrow-icon {
                            color: #ffcc00; /* Amarillo */
                            transition: transform 0.3s ease;
                        }

                        .faq-answer {
                            max-height: 0;
                            overflow: hidden;
                            transition: max-height 0.3s ease;
                            padding-left: 15px;
                            background-color: #292929;
                        }

                        .faq-answer p {
                            font-size: 0.9rem;
                            margin: 10px 0;
                        }

                        .faq-item.active .faq-answer {
                            max-height: 100px; /* Ajustar según el contenido */
                        }

                        .faq-item.active .arrow-icon {
                            transform: rotate(-180deg);
                        }


                        /* Estilos del Footer */
                        .footer {
                            background-color: #0B0A0A; /* Cambiado a negro */
                            color: #fff;
                            padding: 40px 20px;
                            font-family: 'Poppins', sans-serif;
                            position: relative; /* Asegura que se posiciona correctamente */
                            width: 100%; /* Usa 100% del ancho del viewport */
                            margin-top: 220px; /* Mantén este margen superior si es necesario */
                            margin-left: 350px;
                            width: 1200px;
                        }

                        /* Contenedor del footer */
                        .footer-container {
                            display: flex;
                            justify-content: flex-start; /* Alinea a la izquierda */
                            max-width: 1200px; /* Limita el contenido, pero no el fondo */
                            margin: 0; /* Elimina el margen lateral */
                        }

                        /* Estilos de h2 dentro del footer */
                        .footer-info h2 {
                            font-size: 4rem;
                            margin-bottom: 10px;
                            text-align: left; /* Alinea el texto a la izquierda */
                        }

                        /* Título de la ubicación */
                        .location-title {
                            font-weight: bold;
                            font-size: 28px;
                            margin: 60px 0 5px 0; /* Ajusta el margen a solo vertical */
                            text-align: left; /* Alinea el texto a la izquierda */
                        }

                        /* Descripción de la ubicación */
                        .location-description {
                            margin: 0; /* Elimina márgenes laterales */
                            text-align: left; /* Alinea el texto a la izquierda */
                        }

                        /* Estilos para elementos de contacto */
                        .contact-item2 {
                            margin-right: 10px; /* Elimina margen negativo */
                            text-align: left; /* Alinea el texto a la izquierda */
                        }

                        .contact-item {
                            display: flex; /* Usar flexbox para alinear horizontalmente */
                            align-items: center; /* Alinea verticalmente al centro */
                        }

                        .contact-item i {
                            margin-right: 10px; /* Espacio entre el icono y el texto */
                            font-size: 20px; /* Ajusta el tamaño del icono si es necesario */
                            color: #fff; /* Cambia el color del icono según tu diseño */
                            margin-top: 20px;
                        }


                        /* Estilos para la bandera del país */
                        .country-flag {
                            margin-bottom: 10px;
                        }

                        .country-flag img {
                            width: 25px;
                            margin-right: 10px;
                        }

                        /* Sección del mapa y el boletín de noticias */
                        .footer-map-newsletter {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            margin-left: 0; /* Elimina margen */
                        }

                        /* Estilos del boletín */
                        .newsletter p {
                            margin-bottom: 10px;
                            text-align: left; /* Alinea el texto a la izquierda */
                            margin-left: 220px;
                        }

                        .newsletter form {
                            display: flex;
                            gap: 10px;
                        }

                        .newsletter input {
                            padding: 10px;
                            border: none;
                            border-radius: 4px;
                            width: 200px;
                            background-color: #333;
                            color: #fff;
                            margin-left: 220px;
                        }

                        .newsletter button {
                            padding: 10px 20px;
                            background-color: #ffcc00;
                            border: none;
                            border-radius: 4px;
                            cursor: pointer;
                            margin-left: 10px;
                        }

                        .newsletter button:hover {
                            background-color: #e6b800;
                        }

                        /* Línea divisoria */
                        hr {
                            border: none;
                            border-top: 1px solid #444;
                            margin: 50px 0;
                        }

                        /* Sección inferior del footer */
                        .footer-bottom {
                            display: flex;
                            justify-content: flex-start; /* Alinea a la izquierda */
                            align-items: center;
                            flex-wrap: wrap;
                            gap: 10px;
                            margin-top: 40px;
                        }

                        /* Estilos de los párrafos en la sección inferior */
                        .footer-bottom p1 {
                            margin-left: 0; /* Elimina margen */
                        }

                        .footer-bottom p {
                            align-items: center;
                            text-align: left; /* Alinea el texto a la izquierda */
                            margin-left: 150px;
                        }

                        .social-icons1 {
                            margin-left:95px;
                        }

                        /* Ajusta el margen de los íconos si deseas moverlos más a la derecha */
                        .social-icons a {
                            margin-left: 20px; /* Mueve los íconos hacia la derecha */
                        }


                        .map {
                            width: 580px; /* Ancho del cuadro */
                            height: 350px; /* Alto del cuadro */
                            border-radius: 10px; /* Bordes redondeados */
                            overflow: hidden; /* Asegura que el contenido no sobresalga */
                            border: 1px solid #ccc; /* Opcional: agrega un borde alrededor del mapa */
                            margin-left: 220px;
                        }


                        /* Estilos para imágenes clicables */
                        .clickable-image {
                            width: 50px; /* Ajusta el tamaño según sea necesario */
                            cursor: pointer; /* Cambia el cursor al pasar el mouse */
                            transition: transform 0.2s; /* Agrega una pequeña animación */
                        }

                        .clickable-image:hover {
                            transform: scale(1.05); /* Escala la imagen al pasar el mouse */
                        }
                        .galeria2{
                            display: none;
                        }

                        /* Responsividad */
                        @media (max-width: 1528px) {

                        */* Reset de márgenes y padding, y configuración básica */
                        * {
                            margin: 0;
                            padding: 0;
                            box-sizing: border-box;
                            font-family: 'Poppins', sans-serif;
                        }

                        body {
                            background-color: #0B0A0A; /* Fondo sólido a toda la página */
                            color: #fff; /* Color del texto en blanco para mayor legibilidad */
                            height: 100%; /* Altura total del body */
                            width: 100%;
                        }

                        header {
                            width: 100%; /* Ajusta el ancho al 100% del contenedor padre */
                            height: 1030px; /* Fija la altura de acuerdo a la imagen */
                            background-size: 20px 1830px; /* Establece las dimensiones específicas */
                            background-repeat: no-repeat; /* Evita que la imagen se repita */
                            background-position: center; /* Centra la imagen dentro del header */
                            position:relative;
                        }  
                        /* Fondo sólido justo debajo de la imagen del header */
                        header::after {
                            content: '';
                            position: absolute;
                            top: 100%; /* Justo debajo de la imagen */
                            left: 0;
                            width: 100%;
                            height: 1000px; /* Ajusta según sea necesario */
                            background-color: #0B0A0A; /* Fondo sólido coincide con el cuerpo */
                            z-index: 0; /* Debajo del contenido */
                        }

                        .header-top {
                            position: fixed;
                            top: 0px; /* Espacio desde la parte superior */
                            left: 0; /* Alinea a la izquierda */
                            right: 0; /* Alinea a la derecha */
                            display: flex;
                            justify-content: space-between; /* Separa los elementos a izquierda y derecha */
                            align-items: center; /* Alinea verticalmente en el centro */
                            padding: 0 20px; /* Espacio horizontal en los extremos */
                            color: white;
                            z-index: 100;
                            font-size: 18px;
                            margin-bottom: 120px;
                            margin-left: 0px;
                            margin-right:210px;
                            display: block;
                            width: 1360px;
                        }

                        .header-background {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            z-index: -1;
                        }

                        .contact-info a {
                            color: white;
                            text-decoration: none; /* Quita el subrayado de los enlaces */
                            margin-left: 10px; /* Espacio entre el icono y el texto */
                        }

                        .contact-info i {
                            margin-right: 10px; /* Espacio entre el icono y el texto */
                            cursor: pointer; /* Cambia el cursor al pasar sobre el icono */
                            margin-left: 155px;
                        }
                        .contact-info a:hover{
                            color: #FFD100;
                        }

                        .social-icons{
                            margin-left: 1045px;
                            margin-top: -25px;
                            width: 900px;
                        }
                        .social-icons a {
                            color: white;
                            text-decoration: none;
                            margin-left: 15px; /* Espacio entre los iconos de redes sociales */
                            font-size: 20px; /* Ajusta el tamaño de los iconos */
                        }

                        .social-icons a:hover {
                            color: #FFD100; /* Cambia el color al pasar el cursor sobre los iconos */
                        }
                        /* Contenedor principal */
                        .container {
                            margin-top: 40px;
                            position: sticky; 
                            z-index: 10; 
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start; 
                            padding: 0; /* Sin relleno adicional */
                        }

                        /* Navbar */
                        .navbar {
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            padding: 100px 0;
                            width: 1350px;
                            margin-top: -190px;
                            margin-left: 160px;
                        }

                        .menu-toggle{
                            display: none;
                        }

                        .nav-links {
                            list-style: none;
                            display: flex;
                            margin-left: 350px;
                            margin-right: 20px;
                            transition: max-height 0.3s ease-out;
                            width: 700px;
                        }

                        .nav-links li {
                            margin-left: 20px;
                        }

                        .nav-links li a {
                            text-decoration: none;
                            color: #fff; /* Enlace blanco */
                            font-weight: bold;
                            margin-right: 20px;
                        }

                        .nav-links li a i {
                            color: #f1c40f; /* Iconos amarillos */
                        }
                        /* Logo container */
                        .logo-container {
                            margin-top: 20px; 
                            margin-left: 150px;
                            margin-right: 150px;
                        }

                        .esgryma-logo {
                            width: 265px; 
                            height: 66px; 
                            margin-bottom: 20px;
                            margin-left: 10px;

                        }

                        /* Hero text */
                        .hero-text {
                            text-align: left; 
                            color: #fff; /* Texto en blanco */
                            font-size: 20px;
                            padding: 0 150px; 
                            margin-top: -60px;
                            margin-left: 0px;
                            margin-right: 150px;
                            width: 1345px;
                        }

                        .hero-text h1 {
                            font-size: 56px;
                            font-weight: bold;
                            margin-right: 150px;
                            margin-left: 80px;
                            
                        }

                        .hero-text p {
                            margin-top: 10px;
                            font-size: 18px;
                            margin-right: 150px;
                            margin-left: 80px;
                        }

                        /* Botón */
                        .btn {
                            display: inline-block;
                            background-color: #f1c40f; /* Fondo del botón */
                            color: #000; /* Texto del botón */
                            padding: 10px 20px;
                            text-decoration: none;
                            font-weight: bold;
                            margin-top: 10px;
                            border-radius: 5px;
                            margin-right: 150px;
                            margin-left:80px;
                        }

                        /* Servicios */
                        .container_services {
                            display: flex;
                            padding: 20px;
                            color: #fff;
                            margin-left: -140px;
                        }
                        
                        .service {
                            position: relative;
                            border-radius: 8px;
                            width: 340px;
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                            text-align: left;
                        }
                        
                        .service h3 {
                            font-size: 1.2rem;
                            font-weight: bold;
                            margin-bottom: 10px;
                            margin-left: -90px;
                        }
                        
                        .service p {
                            font-size: 0.9rem;
                            line-height: 1.5;
                            margin-bottom: 20px;
                            margin-left: 5px;
                        }
                        
                      /* Botón de flecha */
                        .button {
                        position: absolute; 
                        bottom: 20px;
                        right: 20px;
                        width: 40px;
                        height: 40px;
                        background-color: #ffc107;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                        cursor: pointer;
                        text-decoration: none;
                        transition: background-color 0.3s;
                        }

                        .button:hover {
                        background-color: #ffda44;
                        }               

                        /* Estilo de la flecha (apuntando a la derecha) */
                        .arrow {
                        display: block;
                        width: 50px;
                        height: 10px;
                        border-top: 2px solid transparent;
                        border-left: 2px solid #000;
                        border-bottom: 2px solid transparent;
                        border-right: 2px solid transparent;
                        transform: rotate(0deg);
                        margin-left: -30px;
                        }
                        /* Nueva clase para la imagen */
                        .ernestoylili {
                            position: relative;
                            width: 100%;
                            text-align: center;
                            overflow: hidden;  /* Evita que la imagen se desborde cuando se desplace */
                            z-index: 1; /* Asegura que la imagen esté encima de los otros elementos al hacer la animación */
                            background-color: #0B0A0A;  /* Corregido el color hexadecimal */
                            margin-left: 0px;
                            margin-right: 150px;
                            margin-top: 80px;
                        }

                        .ernestoylili img {
                            position: relative;
                            left: -120%;  /* Inicialmente más a la izquierda, fuera de la pantalla */
                            transition: left 1s ease-out;  /* Animación suave al hacer scroll */
                            margin-left: 210px;
                        }

                        .ernestoylili.visible img {
                            left: -370px;  /* Cuando se hace scroll, la imagen se mueve a la posición original */
                            margin-top: 80px;
                        }

                        /* Descripción al lado de la imagen */
                        .descripcion {
                            margin-left: 690px; /* Ajusta según el diseño, reduce si es necesario */
                            margin-top: -670px;   /* Ajuste en la parte superior */
                            color: #fff;         /* Color del texto */
                            max-width: 600px;    /* Ancho máximo para mayor espacio */
                            width: 100%;         /* Permite que el contenedor ocupe todo el ancho disponible */
                            z-index: 20;          /* Asegura que la descripción esté encima de la imagen */
                            position: relative;   /* Para que el z-index tenga efecto */
                            padding: 20px;       /* Añadir padding para un mejor espaciado interno */
                        }

                        .descripcion h3 {
                            font-size: 50px;       /* Aumentar tamaño de la fuente */
                            font-weight: bold;
                            margin: 20px 0;       /* Aumentar margen vertical */
                            line-height: 1.4;      /* Aumentar espacio entre líneas */
                            letter-spacing: 1px;   /* Incrementar espacio entre letras */
                                margin-left: 220px;

                        }

                        .descripcion p {
                            line-height: 1.8;      /* Espacio entre líneas para mejorar legibilidad */
                            text-align: left;
                            word-spacing: 3px;     /* Aumentar espaciado entre palabras */
                            letter-spacing: 0.5px;  /* Aumentar espaciado entre letras */
                            max-width: none;       /* Permitir texto más largo */
                            width: 400px;           /* Permitir que el párrafo ocupe todo el ancho disponible */
                            margin: 0 0 15px 0;    /* Añadir margen inferior de 15px para separar párrafos */
                            padding: 0;            /* Asegurar que no haya padding que comprima el texto */
                            margin-left: 220px;
                        }


                        /* Estilo del botón */
                        .btndes {
                            background-color: #FFD100;
                            color: black;
                            border: none;
                            padding: 10px 20px;
                            text-align: center;
                            text-decoration: none;
                            display: inline-block;
                            font-size: 16px;
                            margin: 4px 2px;
                            cursor: pointer;
                            border-radius: 15px;
                            margin-left: 220px;

                        }

                        .imagenesmo {
                            position: relative;
                            height: 800px; /* Ajusta este valor según la altura total que necesites */
                            display: flex;
                            justify-content: center;
                            align-items: flex-start; /* Cambiado para alinear al inicio */
                            margin-left: -170px;
                            margin-top: 280px;
                            margin-left: 150px;
                            margin-right: 150px;
                        }

                        .imagenesmo h3 {
                            font-size: 50px; /* Ajusta el tamaño según sea necesario */
                            margin: 40px 0; /* Espacio arriba y abajo del encabezado, aumentado para más separación */
                            margin-left: -150px;
                        }

                        .imagenesmo p {
                            font-size: 70px; /* Ajusta el tamaño según sea necesario */
                            margin-left: -160px;
                            max-width: 2500px;
                        }

                        .image-stack {
                            position: relative;
                            width: 300px; /* Ajusta el tamaño según necesites */
                            height: 450px; /* Ajusta el tamaño según necesites */
                            margin-right: 50px; /* Espacio a la derecha para separar de otros elementos */
                            
                        }

                        .image-stack img {
                            position: absolute;
                            width: 100%;
                            height: auto;
                            border-radius: 15px;
                            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
                            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5), 0 0 10px yellow; /* Sombra en borde de amarillo neón */
                            transition: transform 0.3s ease;
                            margin-top: 190px; /* Esta propiedad no afectará a las imágenes */
                            background-color: yellow;
                        }

                        .image-stack img:nth-child(1) {
                            top: -170px; /* Ajusta hacia arriba */
                            left: 70px; /* Ajusta hacia la izquierda */
                        }

                        .image-stack img:nth-child(2) {
                            top: 25px;
                            left: 260px;
                        }

                        .image-stack img:nth-child(3) {
                            top: 170px;
                            left: 35px;
                        }

                        .image-stack img:hover {
                            transform: scale(1.3); /* Efecto de hover */
                        }

                        /* Contenido de texto a la izquierda */
                        .text-content {
                            max-width: 45%;
                            text-align: left;
                            margin-left: -30px;
                        }

                        .text-content h2 {
                            font-size: 36px;
                            margin-bottom: 20px;
                        }

                        .text-content p {
                            font-size: 18px;
                            margin-bottom: 20px;
                            line-height: 1.6;
                            width: 500px;
                            margin-left: -150px;
                        }

                        .text-content .btn {
                            background-color: #f1c40f;
                            color: #000;
                            padding: 10px 20px;
                            text-decoration: none;
                            font-weight: bold;
                            border-radius: 5px;
                            display: inline-block;
                            margin-left: -150px;
                        }

                        .unriesgo {
                            display: flex;
                            align-items: center;
                            padding: 40px 20px; /* Espaciado alrededor del div */
                            margin-top:380px; /* Margen superior para desplazar la sección más abajo */
                            background-color: transparent; /* No hay fondo */
                            margin-top: 100px;
                            margin-left: 40px;
                            margin-right: 150px;
                            width: 1450px;
                        }

                        .unriesgo .imagen {
                            flex: 1;
                            padding-right: 20px;
                            margin-top: -70px;
                            margin-left: 150px;
                        }

                        .unriesgo img {
                            width: 150%;
                            height: auto;
                            border-radius: 8px; /* Bordes redondeados */
                            margin-left: -0px;
                        }

                        .unriesgo .contenido {
                            flex: 2;
                        }

                        .unriesgo h2 {
                            font-size: 2.5em; /* Tamaño de fuente más grande para el título */
                            color: white; /* Color del texto */
                            margin-bottom: 10px; /* Margen inferior */
                            margin-left: 250px;
                        }

                        .unriesgo p {
                            font-size: 1.2em; /* Tamaño de fuente más grande para el párrafo */
                            color: white; /* Color del texto */
                            line-height: 1.5; /* Espaciado entre líneas */
                            margin-left: 260px;
                            width: 430px;
                        }

                        .brigadas-container{
                            margin-left: 150px;
                            margin-right: 150px;
                        }
                        .brigadas {
                            display: flex; /* Flexbox para centrado */
                            justify-content: center; /* Centrar horizontalmente */
                            align-items: center; /* Centrar verticalmente */
                            text-align: center; /* Centrar el texto horizontalmente */
                            flex-direction: column; /* Asegura que los elementos se alineen en columna */
                            height: 100vh; /* Altura de la vista para centrar en toda la pantalla */
                            margin: 0; /* Elimina márgenes laterales */
                            margin-top: 70px;
                        }

                        .brigadas h2 {
                            font-size: 5em; /* Aumenta el tamaño del título */
                            margin-bottom: 20px; /* Espacio inferior */
                            text-align: center; /* Centrar el texto */
                            margin: 0; /* Elimina márgenes adicionales */
                            margin-left: 30px;
                        }

                        .brigadas p {
                            font-size: 25px;
                            max-width: 600px; /* Limita el ancho máximo del párrafo */
                            margin: 0 auto; /* Centra el párrafo horizontalmente */
                            line-height: 1.5; /* Espaciado entre líneas */
                            overflow-wrap: break-word; /* Permite que las palabras largas se dividan */
                            margin-top: 40px;
                            margin-left: 470px;
                        }


                        .videoesgryma {
                            width: 100%; /* O 90% si prefieres un poco de margen lateral */
                            max-width: 1200px; /* Ajusta el ancho máximo del contenedor */
                            margin: 20px auto; /* Centra el video horizontalmente y agrega margen vertical */
                            display: flex; /* Utiliza flexbox para centrar el video */
                            justify-content: center; /* Centra el video horizontalmente */
                            margin-right: 150px;
                            margin-left: -310px;
                            
                        }

                        /* Asegúrate de que el video esté centrado */
                        .videoesgryma {
                            width: 100%; /* O el ancho que desees */
                            display: flex; /* Usar flexbox para centrar */
                            justify-content: center; /* Centra el video horizontalmente */
                            margin: 20px auto; /* Centra el div horizontalmente */
                        }

                        .videoesgryma iframe {
                            margin-top: -85px;
                            border: 2px solid #dcff14; /* Borde color amarillo neón */
                            box-shadow: 0 0 20px rgba(207, 233, 63, 0.6); /* Efecto de sombra para resaltar el borde */
                            margin-right: 10px;
                            margin-left: 50px;
                        }

                        .galeria {
                            display: flex;
                            justify-content: flex-start; /* Las imágenes empezarán desde el principio sin separación */
                            align-items: center;
                            padding: 20px;
                            gap: 10px;
                            margin-left: 540px;
                            margin-right: 260px;
                            margin-top: 220px;
                            width: 800px;
                        }

                        .texto {
                            flex: 1; /* Ocupa el espacio disponible a la izquierda */
                            margin-right: 20px; /* Espacio entre texto y galería */
                            margin-left: -40px;
                        }

                        .texto h1 {
                            font-size: 2.5em; /* Tamaño de fuente para el título */
                            margin-bottom: 10px; /* Espacio inferior */
                            color: white; /* Color del texto */
                            margin-left: -320px;
                            font-size: 56px;
                            margin-top: -70px;
                        }

                        .texto p {
                            font-size: 1.2em; /* Tamaño de fuente del párrafo */
                            color: white; /* Color del texto */
                            margin-bottom: 20px; /* Espacio inferior */
                            max-width: 350px;
                            margin-left: -320px;
                        }

                        button {
                            padding: 10px 20px; /* Espaciado interno del botón */
                            font-size: 16px; /* Tamaño de la fuente */
                            cursor: pointer; /* Cambia el cursor al pasar por encima */
                            background-color: #FFC107; /* Color de fondo amarillo */
                            color: black; /* Color del texto del botón */
                            border: none; /* Sin borde */
                            border-radius: 5px; /* Bordes redondeados */
                            transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
                            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
                            margin-left: -320px;
                        }

                        button:hover {
                            background-color: #FFB300; /* Color más oscuro al pasar el mouse */
                            transform: scale(1.05); /* Efecto de aumentar al hacer hover */
                        }


                        .foto {
                            position: relative;
                            width: 582px;
                            height: 640px;
                            overflow: hidden;
                            transition: width 0.3s ease;
                            border-radius: 40px;
                            margin: 0; /* Asegurarse que no haya márgenes */
                            border-top-right-radius: 70px;
                            border-top-left-radius: 70px;
                            border-bottom-left-radius:70px;
                            border-bottom-right-radius:70px ;
                        }


                        .foto img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        .foto .info {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            background-color: rgba(0, 0, 0, 0.7);
                            color: white;
                            text-align: center;
                            padding: 10px;
                            opacity: 0; /* Ocultar texto inicialmente */
                            transition: opacity 0.3s ease;
                        }

                        .foto:hover .info {
                            opacity: 1; /* Mostrar texto al hacer hover */
                        }

                        .container-exp {
                            text-align: center;
                            padding: 80px 0px;
                        }

                        h1 {
                            font-size: 53px;
                            margin-bottom: 20px;
                            margin-top: 120px;
                        }

                        p {
                            font-size: 18px;
                            margin-bottom: 40px;
                        }

                        .container-exp h1 {
                            font-size: 53px;
                            margin-bottom: 20px;
                            margin-top: 120px;
                            margin-left: 40px;

                        }

                        .stats {
                            display: flex;
                            justify-content: space-around;
                            flex-wrap: wrap;
                            margin-top: 140px ;
                            margin-left: -20px;
                        }

                        .container-exp p{
                            font-size: 25px;
                            margin-bottom: 20px;
                            margin-top: 80px;
                            width: 500px;
                            text-align: center;
                            margin-left: 520px;

                        }

                        
                        .stat2 {
                            background-color: transparent;
                            padding: 20px;
                            border-radius: 10px;
                            margin: 10px;
                            flex: 1 1 200px; /* Flexbox: grow, shrink, basis */
                            max-width: 250px;
                        }

                        .stat2 h2 {
                            font-size: 66px;
                            margin: 0;
                        }

                        .stat2 p {
                            font-size: 16px;
                            margin: 0;
                            color: #ccc;
                            margin-left: -120px;
                        }
                        .stat {
                            background-color: transparent;
                            padding: 20px;
                            border-radius: 10px;
                            margin: 10px;
                            flex: 1 1 200px; /* Flexbox: grow, shrink, basis */
                            max-width: 250px;
                        }

                        .stat h2 {
                            font-size: 66px;
                            margin: 0;
                        }

                        .stat p {
                            font-size: 16px;
                            margin: 0;
                            color: #ccc;
                            margin-left: -140px;
                        }

                        .carousel-container {
                            width: 100%; /* El carrusel ocupará el 100% del ancho del contenedor padre */
                            max-width: 1200px; /* Ancho máximo del carrusel */
                            overflow: hidden; /* Ocultar las imágenes que están fuera del área visible */
                            position: relative;
                            margin: 0 auto; /* Centrar el carrusel en la página */
                            margin-top: 120px;
                        }
                        .clientes-nuestros h2{
                            margin-top: 150px;
                        }

                        .clients {
                            display: flex;
                            transition: transform 0.5s ease-in-out; /* Animación suave */
                        }

                        .client-logo {
                            min-width: 200px; /* Fijar un ancho mínimo para cada imagen */
                            height: 150px; /* Fijar la altura de las imágenes */
                            object-fit: contain; /* Mantener la proporción de las imágenes */
                            margin-right: 10px; /* Espacio entre las imágenes */
                        }

                        button.prev {
                            left: 10px;
                        }

                        button.next {
                            right: 10px;
                        }

                        /* Agrega un estilo de hover para los botones */
                        button.prev:hover, button.next:hover {
                            background-color: orange; /* Cambia a un color diferente al pasar el mouse */
                        }

                        .testimonios {
                            margin-top: 120px;
                            font-size: 36px;
                        }



                        /* Contenedor general */
                        .galeria3 {
                            text-align: center;
                            padding: 2rem;
                        }

                        /* Encabezado */
                        .galeria3 .textog2 h1 {
                            font-size: 2.5rem;
                            margin-bottom: 1rem;
                            color: white;
                            margin-left: -15px;
                        }

                        .galeria3 .textog2 p {
                            font-size: 1.2rem;
                            color: #cccccc;
                            margin-bottom: 1.5rem;
                        }

                        .galeria3 .textog2 button {
                            padding: 0.75rem 1.5rem;
                            font-size: 1rem;
                            color: #121212;
                            background-color: #FFD700; /* Amarillo */
                            border: none;
                            border-radius: 5px;
                            cursor: pointer;
                            transition: background-color 0.3s ease;
                        }

                        .galeria3 .textog2 button:hover {
                            background-color: #FFC107; /* Amarillo más oscuro */
                        }

                        /* Carrusel */
                        .carousel2 {
                            display: flex;
                            justify-content: center;
                            gap: 1rem;
                            flex-wrap: wrap;
                        }

                        /* Tarjeta */
                        .foto {
                            position: relative;
                            width: 250px;
                            height: 350px;
                            overflow: hidden;
                            border-radius: 10px;
                            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
                            background-size: cover;
                            background-position: center;
                        }

                        .foto::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: rgba(0, 0, 0, 0.5); /* Efecto oscuro */
                            z-index: 1;
                        }

                        .foto:hover::before {
                            background: rgba(0, 0, 0, 0.3); /* Menor opacidad al pasar el mouse */
                        }

                        /* Texto en la tarjeta */
                        .foto .texto {
                            position: absolute;
                            bottom: 20px;
                            left: 50%;
                            transform: translateX(-50%);
                            z-index: 2;
                            color: white;
                            text-align: center;
                            padding: 0.5rem;
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 5px;
                            backdrop-filter: blur(5px);
                            width: 200px;
                            margin-left: 10px   ;
                        }

                        .foto .texto h4 {
                            font-size: 1rem;
                            margin: 0.5rem 0;
                        }

                        .foto .texto p {
                            font-size: 0.9rem;
                            margin: 0;
                            color: #dddddd;
                            width: 200px;
                            margin-left: -10px;
                        }

                        .galeria2{
                            display: none;
                        }

                        .image-container {
                            position: relative;
                            width: 300px; /* Ajusta el tamaño de las imágenes */
                            height: 400px; /* Ajusta la altura */
                            overflow: hidden; /* Esconde cualquier exceso de imagen */
                            border-radius: 10px; /* Bordes redondeados */
                        }

                        .image-container img {
                            width: 342px;
                            height: 480px;
                            object-fit: cover; /* Asegura que la imagen cubra todo el contenedor sin deformarse */
                            border-radius: 10px; /* Bordes redondeados */
                            margin: 20px; /* Espacio de 20 px alrededor de la imagen */
                        }

                        .text-overlay {
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            padding: 20px;
                            background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
                            color: white;
                            text-align: center;
                            font-size: 14px;
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                            backdrop-filter: blur(5px); /* Efecto de difuminado en el fondo */
                        }


                        .faq-container {
                            max-width: 800px;
                            margin: 80px auto; /* Centra el contenedor */
                            padding: 20px;
                            border-radius: 8px;
                            margin-left: 210px;
                        }

                        h2 {
                            font-size: 3rem;
                        }

                        .faq-item {
                            border-top: 1px solid #3a3a3a;
                        }

                        .faq-item:first-child {
                            border-top: none;
                        }

                        .faq-question {
                            width: 100%;
                            background-color: #0B0A0A;
                            color: #fff;
                            font-size: 1rem;
                            text-align: left;
                            border: none;
                            outline: none;
                            padding: 15px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            cursor: pointer;
                            margin-left: 0px
                        }

                        .faq-question:hover {
                            background-color: #3a3a3a;
                        }

                        .arrow-icon {
                            color: #ffcc00; /* Amarillo */
                            transition: transform 0.3s ease;
                        }

                        .faq-answer {
                            max-height: 0;
                            overflow: hidden;
                            transition: max-height 0.3s ease;
                            padding-left: 15px;
                            background-color: #292929;
                        }

                        .faq-answer p {
                            font-size: 0.9rem;
                            margin: 10px 0;
                        }

                        .faq-item.active .faq-answer {
                            max-height: 100px; /* Ajustar según el contenido */
                        }

                        .faq-item.active .arrow-icon {
                            transform: rotate(-180deg);
                        }


                        /* Estilos del Footer */
                        .footer {
                            color: #fff;
                            padding: 40px 20px;
                            font-family: 'Poppins', sans-serif;
                            position: relative; /* Asegura que se posiciona correctamente */
                            width: 100%; /* Usa 100% del ancho del viewport */
                            margin-top: 220px; /* Mantén este margen superior si es necesario */
                            margin-left: 75px;
                            width: 1360px;
                        }

                        /* Contenedor del footer */
                        .footer-container {
                            display: flex;
                            justify-content: flex-start; /* Alinea a la izquierda */
                            max-width: 1200px; /* Limita el contenido, pero no el fondo */
                            margin: 0; /* Elimina el margen lateral */
                            margin-left: 70px;
                        }

                        /* Estilos de h2 dentro del footer */
                        .footer-info h2 {
                            font-size: 4rem;
                            margin-bottom: 10px;
                            text-align: left; /* Alinea el texto a la izquierda */
                            margin-left: 20px;
                        }

                        .footer-info p{
                            margin-left: 24px;
                            text-align: left;
                        }
                        
                        /* Título de la ubicación */
                        .location-title {
                            font-weight: bold;
                            font-size: 28px;
                            margin: 60px 0 5px 0; /* Ajusta el margen a solo vertical */
                            text-align: left; /* Alinea el texto a la izquierda */
                        }

                        /* Descripción de la ubicación */
                        .location-description {
                            margin: 0; /* Elimina márgenes laterales */
                            text-align: left; /* Alinea el texto a la izquierda */
                        }

                        /* Estilos para elementos de contacto */
                        .contact-item2 {
                            margin-right: 10px; /* Elimina margen negativo */
                            text-align: left; /* Alinea el texto a la izquierda */
                        }

                        .contact-item {
                            display: flex; /* Usar flexbox para alinear horizontalmente */
                            align-items: center; /* Alinea verticalmente al centro */
                            margin-top: -30px;
                        }

                        .contact-item i {
                            margin-right: 10px; /* Espacio entre el icono y el texto */
                            font-size: 20px; /* Ajusta el tamaño del icono si es necesario */
                            color: #fff; /* Cambia el color del icono según tu diseño */
                            margin-top: 20px;
                        }


                        /* Estilos para la bandera del país */
                        .country-flag {
                            margin-bottom: 10px;
                        }

                        .country-flag img {
                            width: 25px;
                            margin-right: 10px;
                        }

                        /* Sección del mapa y el boletín de noticias */
                        .footer-map-newsletter {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            margin-left: -140px; /* Elimina margen */
                            margin-top: 40px;
                        }

                        /* Estilos del boletín */
                        .newsletter p {
                            margin-bottom: 10px;
                            text-align: left; /* Alinea el texto a la izquierda */
                            margin-left: 220px;
                        }

                        .newsletter form {
                            display: flex;
                            gap: 10px;
                        }

                        .newsletter input {
                            padding: 10px;
                            border: none;
                            border-radius: 4px;
                            width: 470px;
                            height: 70px;
                            background-color: #333;
                            color: #fff;
                            margin-left: 220px;
                        }

                        .newsletter button {
                            padding: 10px 20px;
                            background-color: #ffcc00;
                            border: none;
                            border-radius: 4px;
                            cursor: pointer;
                            margin-left: 10px;
                        }

                        .newsletter button:hover {
                            background-color: #e6b800;
                        }

                        /* Línea divisoria */
                        hr {
                            border: none;
                            border-top: 1px solid #444;
                            margin: 50px 0;
                            width: 1200px;
                            margin-left: 70px;
                        }

                        /* Sección inferior del footer */
                        .footer-bottom {
                            display: flex;
                            justify-content: flex-start; /* Alinea a la izquierda */
                            align-items: center;
                            flex-wrap: wrap;
                            gap: 10px;
                            margin-top: 40px;
                            width: 500px;
                            margin-left: 450px;
                        }

                        /* Estilos de los párrafos en la sección inferior */
                        .footer-bottom p1 {
                            margin-left: 150px; /* Elimina margen */
                            margin-top: 80px;
                        }

                        .footer-bottom p {
                            text-align: center;
                            text-align: left; /* Alinea el texto a la izquierda */
                            margin-left: 90px;
                            font-size: 20px;
                            margin-top: 10px;
                        }

                        .social-icons1 {
                            margin-left:130px;
                        }

                        /* Ajusta el margen de los íconos si deseas moverlos más a la derecha */
                        .social-icons a {
                            margin-left: 50px; /* Mueve los íconos hacia la derecha */
                            margin-top: 40px;
                        }


                        .map {
                            width: 580px; /* Ancho del cuadro */
                            height: 350px; /* Alto del cuadro */
                            border-radius: 10px; /* Bordes redondeados */
                            overflow: hidden; /* Asegura que el contenido no sobresalga */
                            border: 1px solid #ccc; /* Opcional: agrega un borde alrededor del mapa */
                            margin-left: 220px;
                        }


                        /* Estilos para imágenes clicables */
                        .clickable-image {
                            width: 50px; /* Ajusta el tamaño según sea necesario */
                            cursor: pointer; /* Cambia el cursor al pasar el mouse */
                            transition: transform 0.2s; /* Agrega una pequeña animación */
                        }

                        .clickable-image:hover {
                            transform: scale(1.05); /* Escala la imagen al pasar el mouse */
                        }
                        .galeria2{
                            display: none;
                        }
                        }

                            @media (max-width: 568px) {
                                body {
                                    font-size: 14px; /* Ajuste del tamaño de fuente */
                                    width: 190px;
                                }
                                header {
                                    background-image: url('images/fondoesgryma.png');
                                    background-size: cover; /* Hace que la imagen cubra todo el espacio disponible */
                                    height: auto; /* Ajusta la altura del header según lo necesites */
                                    background-color: transparent;
                                    width: 480px;
                                    margin-top: -20px;
                                }
                                
                                .header-top {
                                display: none;
                                }
                            
                                .header-top .contact-info {
                                    margin: 10px 0; /* Añade un poco de espacio entre elementos */
                                }
                            
                                .container {
                                    margin-top: 20px; /* Reduce el espacio superior */
                                    padding: 0 10px; /* Añade un poco de padding a los lados */
                                    margin-left: 0px;
                                    background-color: transparent;
                                    width: 450px;
                                }
                            
                                .navbar {
                                    flex-direction: column;
                                    align-items: center;
                                    padding: 20px 0;
                                    margin: 0;
                                    margin-left: -85px;
                                    margin-top: 40px;
                                    background-color: transparent;
                                    width: 370px;
                                }
                            
                                .nav-links {
                                    flex-direction: column; /* Cambia el menú a disposición vertical */
                                    margin: 0;
                                    padding: 0;
                                }  
                                .nav-links li {
                                    margin: 10px 0; /* Ajusta el margen entre elementos del menú */
                                }   
                                .logo-container {
                                    margin: 0 auto; /* Centra el logo */
                                    margin-left: -5px;
                                    margin-top: -90px;
                                    margin-bottom: 120px;
                                }   
                                .esgryma-logo {
                                    width: 180px; /* Ajusta el tamaño del logo */
                                    height: auto; /* Mantiene la proporción */
                                    margin: 0 auto 10px; /* Centra y ajusta margen inferior */
                                    margin-left: 10px;
                                    margin-top: 120px;
                                    z-index: 999;
                                }          
                                .hero-text {
                                    display: flex;
                                    justify-content: flex-start;
                                    max-width: 420px;
                                    margin-top: -160px;
                                    margin-left: -50px;
                                }       
                                .hero-text h1 {
                                    font-size: 29px;
                                    margin-top: 50px;
                                    margin-left: -35px;
                                    width: 600px;
                                    text-align: left;
                                }
                                .hero-text .btn{
                                    margin-left: -325px;
                                    margin-top:280px;
                                    font-size: 14px;
                                    border-radius: 10px;
                                }
                                .hero-text p {
                                display: none;
                                }       
                                .navbar {
                                    padding: 20px 0;
                                    justify-content: space-between;
                                    margin: 0;
                                }    
                                /* Ocultar las opciones de menú por defecto en móvil */
                                .nav-links {
                                    display: none;
                                    flex-direction: column;
                                    align-items: center;
                                    margin: 0;
                                    width: 100%;
                                    background-color: #333; /* Cambia el color si lo deseas */
                                }    
                                .nav-links li {
                                    margin: 10px 0;
                                }    
                                /* Estilos para el botón de menú hamburguesa */
                                .menu-toggle {
                                    display: block;
                                    cursor: pointer;
                                    font-size: 1.5rem;
                                    color: #fff;
                                    margin-top: -200px;
                                    margin-left: 480px;
                                }       
                                /* Mostrar el menú desplegable cuando está activo */
                                .nav-links.active {
                                    display:flex;
                                    color: #0B0A0A;
                                    background-color: #0B0A0A;
                                    margin-left:420px;
                                    width: 90px;
                                    height:180px;
                                    border-radius: 20px;
                                    font-size: 10px;
                                    text-align: justify;
                                
                                } 
                                .container_services {
                                    padding: 15px; /* Reducir el padding */
                                    margin-left:-10px; /* Ajustar los márgenes */
                                    margin-right: 30px; /* Ajustar los márgenes */
                                    margin-top: 40px; /* Ajustar el margen superior */
                                    flex-direction: column; /* Cambiar a columna para que los servicios se apilen */
                                    align-items: center; /* Centrar los elementos */
                                    width: 410px;
                                }
                                /* Estilo individual de los servicios */
                                .service {
                                    width: 100%; /* Ajustar el ancho al 100% */
                                    margin: 10px 0; /* Reducir el margen */
                                    margin-top: 0; /* Eliminar margen superior innecesario */
                                    margin-left:50px;

                                }
                                /* Párrafos justificados con cuadro */
                                .service p {
                                    font-size: 14px; /* Reducir el tamaño de la fuente */
                                    height: auto; /* Ajustar la altura para que el contenido se ajuste */
                                    margin-top: 10px; /* Reducir el margen superior */
                                    margin-right: 10px;
                                    margin-left: 18px;
                                    width: 350px;
                                    height: 100px;
                                    text-align: justify;
                                }
                                /* Botón dentro del cuadro */
                                .button, .button1, .button2 {
                                    position: relative; /* Cambiar de absoluto a relativo para adaptarse mejor en pantallas pequeñas */
                                    right: 0; /* Eliminar la alineación a la derecha */
                                    margin-top: 20px; /* Ajustar el margen superior */
                                    width: 330px; /* Ajustar el tamaño */
                                    height: 40px; /* Ajustar el tamaño */
                                    margin-left: 30px;
                                }
                                .side-button::before, .side-button1::before, .side-button2::before {
                                    width: 8px; /* Reducir el tamaño del triángulo */
                                    height: 8px; /* Reducir el tamaño del triángulo */
                                    border-right: 2px solid black; /* Ajustar el tamaño de las líneas del triángulo */
                                    border-top: 2px solid black; /* Ajustar el tamaño de las líneas del triángulo */
                                }
                                /* Encabezado de servicios */
                                .service h3 {
                                    font-size: 20px; /* Reducir el tamaño del encabezado */
                                    margin-top: 0; /* Eliminar margen superior innecesario */
                                    margin-top: 30px;
                                    margin-left: 80px;
                                    max-width: 220px;
                                }
                                .ernestoylili{
                                    margin-left: 10px;
                                    background-color: transparent;
                                    width: 420px;
                                    margin-right: 10px;
                                }
                                .ernestoylili img{
                                    margin-left: 345px;
                                    width:340px;
                                    height: 100%;
                                    margin-top: -430px;
                                }
                                .descripcion{
                                    margin-left: 75px;
                                    margin-top: 20px;
                                    height: 820px; 
                                    width: 360px;
                                    text-align: center;
                                }
                                .descripcion h3{
                                    font-size: 24px;
                                    margin-left: -10px;
                                    text-align: center;
                                }
                                .descripcion p{
                                    font-size: 16px;
                                    margin-right: 20px;
                                    margin-left: -10px;
                                    max-width: 340px; 
                                    text-align: center;
                                }
                                .btndes{
                                    margin-left: -20px;
                                    margin-top: 20px;
                                    border-radius: 20px;
                                }
                                .imagenesmo{
                                    width: 365px;
                                    height: 1020px;
                                    margin-left: 70px;
                                    margin-top: -50px;
                                }
                                .imagenesmo h3{
                                font-size:25px;
                                margin-bottom: 40px;
                                margin-left: 20px;
                                text-align: center;
                                background-color: transparent;
                                width: 330px;
                                }

                                .imagenesmo .btn{
                                margin-left: 120px;
                                width: 120px;
                                }

                                .imagenesmo p{
                                font-size: 15px;
                                margin-left: 25px;
                                margin-right: 10px;
                                margin-top: 50px;
                                text-align: center;
                                background-color:transparent;
                                width: 320px; 
                                text-align: justify;
                                }
                                .image-stack img {
                                    position: absolute;
                                    width: 100%;
                                    height: auto;
                                    border-radius: 15px;
                                    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
                                    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5), 0 0 10px yellow; /* Sombra en borde de amarillo neón */
                                    margin-top: 280px; /* Esta propiedad no afectará a las imágenes */
                                    margin-left: 17px;
                                    margin-right: 10px;
                                }    
                                .image-stack img:nth-child(1) {
                                    top: 460px; /* Ajusta hacia arriba */
                                    left: -70px; /* Ajusta hacia la izquierda */
                                    margin-right: 10px;
                                }  
                                .image-stack img:nth-child(2) {
                                    top:245px;
                                    left: -160px;
                                    margin-right: 10px;
                                }      
                                .image-stack img:nth-child(3) {
                                    top:245px;
                                    left: 20px;
                                    margin-right: 10px;
                                }       
                                .unriesgo{
                                    width: 365px;
                                    margin-left: 60px;
                                    margin-top: -40px;
                                }
                                .unriesgo h2{
                                    margin-left: -350px;
                                    margin-top: -220px;
                                    background-color: transparent;
                                    width: 320px;
                                    text-align: center;
                                }
                                .unriesgo p{
                                    margin-left: -355px; 
                                    background-color: transparent;
                                    width: 330px;
                                    margin-top: 60px;
                                    text-align: justify;
                                }
                                .unriesgo img{
                                    margin-left:-165px;
                                    width: 360px;
                                    margin-top:520px;
                                }
                                .brigadas{
                                    width: 365px;
                                    margin-left:70px;
                                }
                                .brigadas h2{
                                    font-size: 36px;
                                    margin-top: -160px;
                                    margin-left:10px;
                                }
                                .brigadas p{
                                    font-size: 16px;
                                    width: 320px;
                                    text-align: justify;
                                    margin-top: 20px;
                                    margin-right: 30px;
                                    margin-left: 35px;
                                }
                                .videoesgryma iframe{
                                    width: 340px;
                                    margin-left: 325px;
                                    margin-right: 10px;
                                    margin-top: -280px;
                                    height: 300px;
                                    border-color: #FFD100;
                                }

                        .galeria {
                            display: none;
                        }

                        /* Contenedor principal del carrusel */
                        .galeria2 {
                            width: 360px;
                            height: 980px; /* Altura fija para la galería */
                            overflow: hidden; /* Oculta las imágenes fuera del contenedor */
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            position: relative;
                            margin-top: 20px;
                            margin-left: 80px;
                            margin-right: 10px;
                        }

                        .galeria2 h1{
                            font-size: 56px;
                            margin-top: -420px;
                            margin-left: 20px;
                            text-align: center;
                        }

                        .galeria2 p{
                            font-size: 14px;
                            text-align: justify;
                            max-width: 700px;
                            margin-left: 20px;
                        }

                        /* Contenedor de las imágenes, permite desplazamiento manual */
                        .carousel {
                            display: flex;
                            width: auto; /* El ancho del carrusel es ajustado automáticamente */
                            overflow-x: scroll; /* Permite desplazar las imágenes horizontalmente */
                            scroll-snap-type: x mandatory; /* Hacer que el desplazamiento se ajuste a cada imagen */
                            -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en dispositivos móviles */
                            margin-top: 280px;
                            margin-left: -350px;
                        }

                        /* Estilo para cada imagen */
                        .foto {
                            width: 200px; /* Ancho fijo para cada imagen */
                            height: 400px;
                            margin-right: 15px; /* Espacio entre las imágenes */
                            flex-shrink: 0; /* Evita que las imágenes se encojan */
                            scroll-snap-align: start; /* Asegura que las imágenes se alineen al desplazarse */
                            border-radius: 10px;
                        }

                        /* Estilo para las imágenes */
                        .foto img {
                            width: 100%;
                            height: 100%; /* Las imágenes ocupan todo el contenedor */
                            object-fit: cover; /* Asegura que las imágenes no se distorsionen */
                            border-radius: 10px;
                            margin-left: 55px;
                            background-color: transparent;
                        }

                        .container-exp{
                            margin-top: -110px;
                            margin-bottom: 140px;
                            width: 365px;
                            height: 1800px;
                            margin-left: 50px;
                            }


                        .container-exp h1{
                            margin-left: 80px;
                            margin-right: 10px;
                            margin-top: -50px;
                            font-size: 32px;
                            text-align: center;
                            max-width: 200px;
                        }

                        .container-exp p{
                            margin-left: 70px;
                            text-align: center;
                            max-width: 230px;
                            margin-right: 20px;
                            font-size: 18px;
                        }

                        .stats {
                            margin-top: 70px;
                            margin-left: 10px;
                        }

                        .stat h2{
                            margin-left: 25px;
                            text-align: center;
                        }

                        .stat2 h2{
                            margin-left: 25px;
                            text-align: center;
                            margin-top: 40px;
                        }


                        .stat p{
                            margin-left: 30px;
                            text-align: center;
                        }

                        .stat2 p{
                            margin-left: 40px;
                            margin-top: 20px;
                        }
                        .stat p



                        /* Título de la sección */
                        .clientes-nuestros {
                        text-align: center;
                        margin: 20px 0;
                }

                        .clientes-nuestros h2 {
                        font-size: 2rem;
                        font-weight: bold;
                        margin: 0;
                        color: white;
                }

                    /* Contenedor del carrusel */
                        .carousel-container {
                        width: 100%;
                        overflow: hidden; /* Oculta las imágenes fuera del área visible */
                        position: relative;
                        padding: 20px 0;
                        background-color: #fff;
                        border-radius: 15px;
                        margin-left: 30px;


                }

                /* Carrusel de clientes */
                .clients {
                    display: flex;
                    gap: 20px;
                    overflow-x: scroll; /* Permite el desplazamiento horizontal */
                    scroll-snap-type: x mandatory; /* Asegura que las imágenes se ajusten de manera ordenada al deslizar */
                    -webkit-overflow-scrolling: touch; /* Habilita el desplazamiento suave en dispositivos móviles */
                }

                .client-logo {
                    height: 80px; /* Ajusta el tamaño de las imágenes */
                    object-fit: contain; /* Mantiene la proporción de las imágenes */
                    scroll-snap-align: center; /* Alinea las imágenes al centro del contenedor */
                    transition: transform 0.3s; /* Efectos al pasar el cursor */
                }

                .client-logo:hover {
                    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el cursor */
                }

                /* Estilo Responsive */
                @media screen and (max-width: 768px) {
                    .clients {
                        gap: 15px; /* Reduce el espacio entre imágenes */
                    }

                    .client-logo {
                        height: 70px; /* Ajusta el tamaño de las imágenes en pantallas medianas */
                    }
                }

                @media screen and (max-width: 390px) {
                    .clients {
                        gap: 10px; /* Reduce aún más el espacio entre imágenes */
                    }

                    .client-logo {
                        height: 60px; /* Ajusta el tamaño de las imágenes en pantallas pequeñas */
                    }

                    .clientes-nuestros h2 {
                        font-size: 1.5rem; /* Ajusta el tamaño del texto para pantallas pequeñas */
                    }
                }

                        /* Estilos generales para la galería */
                        .galeria3 {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 10px;
                            max-width: 390px;
                            margin: 0 auto;
                            margin-left: 30px;
                        }

                        .textog2 {
                            text-align: center;
                            padding: 10px;
                            margin-left: -65px;
                        }

                        .textog2 h1 {
                            font-size: 34px;
                            margin-bottom: 10px;
                            margin-left: 55px;
                        }

                        .textog2 p {
                            font-size: 25px;
                            line-height: 1.5;
                            margin-bottom: 15px;
                            text-align: justify;
                            width: 340px;
                            margin-left: 75px;
                        }

                        .textog2 button {
                            background-color: #FFD700; /* Color amarillo */
                            color: #000;
                            border: none;
                            padding: 10px 20px;
                            font-size: 16px;
                            cursor: pointer;
                        }

                        /* Estilos para el carrusel */
                        .carousel2 {
                            display: flex;
                            overflow-x: auto;
                            scroll-snap-type: x mandatory;
                            gap: 10px;
                            padding: 10px 0;
                            scrollbar-width: none; /* Oculta el scroll en Firefox */
                            width: 330px;
                            margin-left: 25px;
                            margin-right: 10px;
                        }

                        .carousel2::-webkit-scrollbar {
                            display: none; /* Oculta el scroll en Chrome, Safari y Opera */
                        }

                        .foto {
                            flex: 0 0 90%;
                            scroll-snap-align: center;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 10px;
                            overflow: hidden;
                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                        }

                        .foto img {
                            width: 100%;
                            height: auto;
                            object-fit: cover;
                            margin-left: -20px;
                        }

                        /* Estilos para el cuadro de texto sobre las imágenes */
                        .texto-sobre-imagen {
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
                            color: #fff;
                            padding: 10px;
                            text-align: center;
                        }

                        .texto-sobre-imagen h1 {
                            font-size: 18px;
                            margin: 0;
                        }

                        .texto-sobre-imagen p {
                            font-size: 14px;
                            margin: 5px 0 0;
                        }

                        * Estilos generales */
                        .faq-container {
                        max-width: 300px;
                        margin: auto;
                        padding: 20px;
                        font-family: Arial, sans-serif;
                        color: white;
                        width: 200px;
                        margin-left: -10px;
                        }

                        .faq-container h2{
                            margin-left: -370px;
                            margin-bottom: 40px;
                            width: 280px;
                        }

                        .faq-item {
                        margin-bottom: 15px;
                        border-bottom: 1px solid transparent;
                        padding-bottom: 10px;
                        width: 320px;
                        margin-left:-385px;
                        }

                        .faq-question {
                        background: none;
                        border: none;
                        font-size: 18px;
                        cursor: pointer;
                        text-align: left;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10px;
                        margin-left: -10px;
                        }

                        .faq-answer {
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.3s ease;
                        padding: 0 10px;
                        font-size: 12px;
                        color: white;
                        text-align: justify;
                        background-color: y;

                        }

                        .faq-answer p{
                            font-size: 16px;
                            margin-top: 10px;
                            text-align: justify;
                            margin-left: 20px;
                        }

                        .faq-answer.visible {
                            max-height: 300px; /* Altura máxima para desplegar la respuesta */
                            padding: 10px;
                        }

                        hr{
                            width: 325px;
                            margin-left: -20px;
                        }

                            .footer{
                                margin-left: 20px;
                                width: 340px;
                            }

                            .footer P{
                                text-align: center;
                                align-items: center;
                                margin-left: 45px;
                            }

                            .footer-container {
                                flex-direction: column;
                                align-items: flex-start;
                                margin-left:-20px;
                                background-color: transparent;
                                width: 350px;
                            }
                            
                            .footer-map-newsletter {
                                width: 100%;
                                margin-left: 0px;
                                background-color: transparent;
                                width: 330px;
                            }

                            .footer-map-newsletter p {
                                margin-left:7px;
                            }

                            .footer-map-newsletter input{
                                margin-left: 10px;
                            }
                            
                            .footer-info{
                                width: 330px;
                                margin-left: 10px;
                            }

                            .footer-info h2{
                                margin-left: 15px;
                            }

                            .contact-item{
                                margin-left: 10px;
                                max-width: 230px;
                            }   

                            .map {
                                width: 330px;
                                height: 320px;
                                margin-left: -1px;
                            }

                            .footer-bottom{
                                margin-left: 12px;
                                width: 320px;
                            }
                            
                            .footer-bottom p{
                                font-size: 20px;
                                width: 320px;
                                margin-left: 20px;
                            }

                            .footer-bottom p1{
                                font-size: 20px;
                                width: 320px;
                                margin-left: -20px;
                            }
                            
                            .social-icons1{
                                margin-left:32px;
                            }
                        }

                        @media (max-width: 395px) {
                            body {
                                font-size: 14px; /* Ajuste del tamaño de fuente */
                                width: 190px;
                            }
                            header {
                                background-image: url('images/fondoesgryma.png');
                                background-size: cover; /* Hace que la imagen cubra todo el espacio disponible */
                                height: auto; /* Ajusta la altura del header según lo necesites */
                                background-color: transparent;
                                width: 390px;
                                margin-top: -20px;
                            }
                            
                            .header-top {
                            display: none;
                            }
                        
                            .header-top .contact-info {
                                margin: 10px 0; /* Añade un poco de espacio entre elementos */
                            }
                        
                            .container {
                                margin-top: 20px; /* Reduce el espacio superior */
                                padding: 0 10px; /* Añade un poco de padding a los lados */
                                margin-left: 0px;
                                background-color: transparent;
                                width: 320px;
                            }
                        
                            .navbar {
                                flex-direction: column;
                                align-items: center;
                                padding: 20px 0;
                                margin: 0;
                                margin-left: -85px;
                                margin-top: 40px;
                                background-color: transparent;
                                width: 370px;
                            }
                        
                            .nav-links {
                                flex-direction: column; /* Cambia el menú a disposición vertical */
                                margin: 0;
                                padding: 0;
                            }  
                            .nav-links li {
                                margin: 10px 0; /* Ajusta el margen entre elementos del menú */
                            }   
                            .logo-container {
                                margin: 0 auto; /* Centra el logo */
                                margin-left: -5px;
                                margin-top: -90px;
                                margin-bottom: 120px;
                            }   
                            .esgryma-logo {
                                width: 180px; /* Ajusta el tamaño del logo */
                                height: auto; /* Mantiene la proporción */
                                margin: 0 auto 10px; /* Centra y ajusta margen inferior */
                                margin-left: 10px;
                                margin-top: 120px;
                                z-index: 999;
                                display: no;
                            }          
                            .hero-text {
                                display: flex;
                                justify-content: flex-start;
                                max-width: 420px;
                                margin-top: -160px;
                                margin-left: -90px;
                            }       
                            .hero-text h1 {
                                font-size: 29px;
                                margin-top: 50px;
                                margin-left: -35px;
                                width: 600px;
                                text-align: left;
                            }
                            .hero-text .btn{
                                margin-left: -325px;
                                margin-top:280px;
                                font-size: 14px;
                                border-radius: 10px;
                            }
                            .hero-text p {
                            display: none;
                            }       
                            .navbar {
                                padding: 20px 0;
                                justify-content: space-between;
                                margin: 0;
                            }    
                            /* Ocultar las opciones de menú por defecto en móvil */
                            .nav-links {
                                display: none;
                                flex-direction: column;
                                align-items: center;
                                margin: 0;
                                width: 100%;
                                background-color: #333; /* Cambia el color si lo deseas */
                            }    
                            .nav-links li {
                                margin: 10px 0;
                            }    
                            /* Estilos para el botón de menú hamburguesa */
                            .menu-toggle {
                                display: block;
                                cursor: pointer;
                                font-size: 1.5rem;
                                color: #fff;
                                margin-top: -200px;
                                margin-left: 320px;
                            }       
                            /* Mostrar el menú desplegable cuando está activo */
                            .nav-links.active {
                                display:flex;
                                color: #0B0A0A;
                                background-color: #0B0A0A;
                                margin-left:280px;
                                width: 90px;
                                height:180px;
                                border-radius: 20px;
                                font-size: 10px;
                                text-align: justify;
                            
                            } 
                            .container_services {
                                padding: 15px; /* Reducir el padding */
                                margin-left:-10px; /* Ajustar los márgenes */
                                margin-right: 30px; /* Ajustar los márgenes */
                                margin-top: 40px; /* Ajustar el margen superior */
                                flex-direction: column; /* Cambiar a columna para que los servicios se apilen */
                                align-items: center; /* Centrar los elementos */
                                width: 410px;
                            }
                            /* Estilo individual de los servicios */
                            .service {
                                width: 100%; /* Ajustar el ancho al 100% */
                                margin: 10px 0; /* Reducir el margen */
                                margin-top: 0; /* Eliminar margen superior innecesario */
                                margin-left:-5px;

                            }
                            /* Párrafos justificados con cuadro */
                            .service p {
                                font-size: 14px; /* Reducir el tamaño de la fuente */
                                height: auto; /* Ajustar la altura para que el contenido se ajuste */
                                margin-top: 10px; /* Reducir el margen superior */
                                margin-right: 10px;
                                margin-left: 18px;
                                width: 350px;
                                height: 100px;
                                text-align: justify;
                            }
                            /* Botón dentro del cuadro */
                            .button, .button1, .button2 {
                                position: relative; /* Cambiar de absoluto a relativo para adaptarse mejor en pantallas pequeñas */
                                right: 0; /* Eliminar la alineación a la derecha */
                                margin-top: 20px; /* Ajustar el margen superior */
                                width: 330px; /* Ajustar el tamaño */
                                height: 40px; /* Ajustar el tamaño */
                                margin-left: 30px;
                            }
                            .side-button::before, .side-button1::before, .side-button2::before {
                                width: 8px; /* Reducir el tamaño del triángulo */
                                height: 8px; /* Reducir el tamaño del triángulo */
                                border-right: 2px solid black; /* Ajustar el tamaño de las líneas del triángulo */
                                border-top: 2px solid black; /* Ajustar el tamaño de las líneas del triángulo */
                            }
                            /* Encabezado de servicios */
                            .service h3 {
                                font-size: 20px; /* Reducir el tamaño del encabezado */
                                margin-top: 0; /* Eliminar margen superior innecesario */
                                margin-top: 30px;
                                margin-left: 80px;
                                max-width: 220px;
                            }
                            .ernestoylili{
                                margin-left: 10px;
                                width: 390px;
                                margin-right: -10px;
                            }
                            .ernestoylili img{
                                margin-left: 390px;
                                width:340px;
                                height: 100%;
                                margin-top: -430px;
                            }
                            .descripcion{
                                margin-left: 20px;
                                margin-top: 20px;
                                height: 820px; 
                                width: 340px;
                                text-align: center;
                            }
                            .descripcion h3{
                                font-size: 24px;
                                margin-left: -10px;
                                text-align: center;
                            }
                            .descripcion p{
                                font-size: 16px;
                                margin-right: 20px;
                                margin-left: -15px;
                                max-width: 340px; 
                                text-align: center;
                            }
                            .btndes{
                                margin-left: -10px;
                                margin-top: 20px;
                                border-radius: 20px;
                            }
                            .imagenesmo{
                                width: 365px;
                                height: 1020px;
                                margin-left: 40px;
                                margin-top: -50px;
                            }
                            .imagenesmo h3{
                            font-size:25px;
                            margin-bottom: 40px;
                            margin-left: 20px;
                            text-align: center;
                            background-color: transparent;
                            width: 330px;
                            }

                            .imagenesmo .btn{
                            margin-left: 120px;
                            width: 120px;
                            }

                            .imagenesmo p{
                            font-size: 15px;
                            margin-left: 25px;
                            margin-right: 10px;
                            margin-top: 50px;
                            text-align: center;
                            background-color:transparent;
                            width: 320px; 
                            text-align: justify;
                            }

                            .image-stack{
                                margin-left: -120;
                                margin-top: 520px;
                                width: 493px;
                            }                            

                            .image-stack img {
                                position: absolute;
                                width: 160px;
                                height: auto;
                                border-radius: 15px;
                                box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
                                box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5), 0 0 10px yellow; /* Sombra en borde de amarillo neón */
                                margin-top: 280px; /* Esta propiedad no afectará a las imágenes */
                                margin-left: 17px;
                                margin-right: 10px;
                                margin-top: -240px;
                            }    
                            .image-stack img:nth-child(1) {
                                top: 460px; /* Ajusta hacia arriba */
                                left: -70px; /* Ajusta hacia la izquierda */
                                margin-right: 10px;
                            }  
                            .image-stack img:nth-child(2) {
                                top:245px;
                                left: -160px;
                                margin-right: 10px;
                            }      
                            .image-stack img:nth-child(3) {
                                top:245px;
                                left: 20px;
                                margin-right: 10px;
                            }       
                            .unriesgo{
                                width: 365px;
                                margin-left: 20px;
                                margin-top: -40px;
                            }
                            .unriesgo h2{
                                margin-left: -370px;
                                margin-top: -220px;
                                background-color: transparent;
                                width: 320px;
                                text-align: center;
                            }
                            .unriesgo p{
                                margin-left: -370px; 
                                background-color: transparent;
                                width: 330px;
                                margin-top: 60px;
                                text-align: justify;
                            }
                            .unriesgo img{
                                margin-left:-165px;
                                width: 360px;
                                margin-top:520px;
                            }
                            .brigadas{
                                width: 365px;
                                margin-left:10px;
                                background-color: yellow;
                                height: 900px;
                            }
                            .brigadas h2{
                                font-size: 36px;
                                margin-top: -390px;
                                margin-left:10px;
                            }
                            .brigadas p{
                                font-size: 16px;
                                width: 320px;
                                text-align: justify;
                                margin-top: 20px;
                                margin-right: 30px;
                                margin-left: 35px;
                            }
                            .videoesgryma iframe{
                                width: 340px;
                                margin-left: 210px;
                                margin-right: 10px;
                                margin-top: -420px;
                                height: 300px;
                                border-color: #FFD100;
                            }

                    .galeria {
                        display: none;
                    }

                    /* Contenedor principal del carrusel */
                    .galeria2 {
                        width: 340px;
                        height: 980px; /* Altura fija para la galería */
                        overflow: hidden; /* Oculta las imágenes fuera del contenedor */
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        margin-top: -40px;
                        margin-left: 20px;
                        margin-right: 10px;
                    }

                    .galeria2 h1{
                        font-size: 56px;
                        margin-top: -420px;
                        margin-left: 20px;
                        text-align: center;
                    }

                    .galeria2 p{
                        font-size: 14px;
                        text-align: justify;
                        max-width: 700px;
                        margin-left: 40px;
                    }

                    /* Contenedor de las imágenes, permite desplazamiento manual */
                    .carousel {
                        display: flex;
                        width: auto; /* El ancho del carrusel es ajustado automáticamente */
                        overflow-x: scroll; /* Permite desplazar las imágenes horizontalmente */
                        scroll-snap-type: x mandatory; /* Hacer que el desplazamiento se ajuste a cada imagen */
                        -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en dispositivos móviles */
                        margin-top: 280px;
                        margin-left: -350px;
                    }

                    /* Estilo para cada imagen */
                    .foto {
                        width: 200px; /* Ancho fijo para cada imagen */
                        height: 400px;
                        margin-right: 15px; /* Espacio entre las imágenes */
                        flex-shrink: 0; /* Evita que las imágenes se encojan */
                        scroll-snap-align: start; /* Asegura que las imágenes se alineen al desplazarse */
                        border-radius: 10px;
                    }

                    /* Estilo para las imágenes */
                    .foto img {
                        width: 100%;
                        height: 100%; /* Las imágenes ocupan todo el contenedor */
                        object-fit: cover; /* Asegura que las imágenes no se distorsionen */
                        border-radius: 10px;
                        margin-left: 55px;
                        background-color: transparent;
                    }

                    .container-exp{
                        margin-top: -110px;
                        margin-bottom: 140px;
                        width: 365px;
                        height: 1800px;
                        margin-left: 20px;
                        }


                    .container-exp h1{
                        margin-left: 70px;
                        margin-right: 10px;
                        margin-top: -50px;
                        font-size: 32px;
                        text-align: center;
                        max-width: 190px;
                    }

                    .container-exp p{
                        margin-left: 60px;
                        text-align: center;
                        max-width: 230px;
                        margin-right: 20px;
                        font-size: 18px;
                    }

                    .stats {
                        margin-top: 70px;
                        margin-left: -30px;
                    }

                    .stat h2{
                        margin-left: 25px;
                        text-align: center;
                    }

                    .stat2 h2{
                        margin-left: -15px;
                        text-align: center;
                        margin-top: 40px;
                    }

                    .stat p{
                        margin-left: 10px;
                        text-align: center;
                    }

                    .stat2 p{
                        margin-left: 0px;
                        margin-top: 20px;
                    }
                    /* Título de la sección */
                    .clientes-nuestros {
                    text-align: center;
                    margin: 20px 0;
                    margin-top: 120px;
            }

                    .clientes-nuestros h2 {
                    font-size: 2rem;
                    font-weight: bold;
                    margin: 0;
                    color: white;
            }

                /* Contenedor del carrusel */
                    .carousel-container {
                    width: 100%;
                    overflow: hidden; /* Oculta las imágenes fuera del área visible */
                    position: relative;
                    padding: 20px 0;
                    background-color: #fff;
                    border-radius: 15px;
                    margin-left: -5px;
                    margin-top: 120px;

            }

            /* Carrusel de clientes */
            .clients {
                display: flex;
                gap: 20px;
                overflow-x: scroll; /* Permite el desplazamiento horizontal */
                scroll-snap-type: x mandatory; /* Asegura que las imágenes se ajusten de manera ordenada al deslizar */
                -webkit-overflow-scrolling: touch; /* Habilita el desplazamiento suave en dispositivos móviles */
            }

            .clientes-nuestros h1{
                margin-top: 30px;
            }

            .client-logo {
                height: 80px; /* Ajusta el tamaño de las imágenes */
                object-fit: contain; /* Mantiene la proporción de las imágenes */
                scroll-snap-align: center; /* Alinea las imágenes al centro del contenedor */
                transition: transform 0.3s; /* Efectos al pasar el cursor */
            }

            .client-logo:hover {
                transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el cursor */
            }

            /* Estilo Responsive */
            @media screen and (max-width: 768px) {
                .clients {
                    gap: 15px; /* Reduce el espacio entre imágenes */
                }

                .client-logo {
                    height: 70px; /* Ajusta el tamaño de las imágenes en pantallas medianas */
                }
            }


                    /* Estilos generales para la galería */
                    .galeria3 {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 10px;
                        max-width: 390px;
                        margin: 0 auto;
                        margin-left: -10px;
                    }

                    .textog2 {
                        text-align: center;
                        padding: 10px;
                        margin-left: -65px;
                    }

                    .textog2 h1 {
                        font-size: 34px;
                        margin-bottom: 10px;
                        margin-left: 75px;
                        margin-top: 80px;
                    }

                    .textog2 p {
                        font-size: 25px;
                        line-height: 1.5;
                        margin-bottom: 15px;
                        text-align: justify;
                        width: 340px;
                        margin-left: 75px;
                    }

                    .textog2 button {
                        color: #000;
                        border: none;
                        padding: 10px 20px;
                        font-size: 16px;
                        cursor: pointer;
                    }

                    /* Estilos para el carrusel */
                    .carousel2 {
                        display: flex;
                        overflow-x: auto;
                        scroll-snap-type: x mandatory;
                        gap: 10px;
                        padding: 10px 0;
                        scrollbar-width: none; /* Oculta el scroll en Firefox */
                        width: 330px;
                        margin-left: 25px;
                        margin-right: 10px;
                    }

                    .carousel2::-webkit-scrollbar {
                        display: none; /* Oculta el scroll en Chrome, Safari y Opera */
                    }

                    .foto {
                        flex: 0 0 90%;
                        scroll-snap-align: center;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 10px;
                        overflow: hidden;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                    }

                    .foto img {
                        width: 100%;
                        height: auto;
                        object-fit: cover;
                        margin-left: -20px;
                    }

                    /* Estilos para el cuadro de texto sobre las imágenes */
                    .texto-sobre-imagen {
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
                        color: #fff;
                        padding: 10px;
                        text-align: center;
                    }

                    .texto-sobre-imagen h1 {
                        font-size: 18px;
                        margin: 0;
                    }

                    .texto-sobre-imagen p {
                        font-size: 14px;
                        margin: 5px 0 0;
                    }

                    * Estilos generales */
                    .faq-container {
                    max-width: 300px;
                    margin: auto;
                    padding: 20px;
                    font-family: Arial, sans-serif;
                    color: white;
                    width: 200px;
                    margin-left: 250px;
                    }

                    .faq-container h2{
                        margin-left: -200px;
                        margin-bottom: 40px;
                        width: 280px;
                    }

                    .faq-item {
                    margin-bottom: 15px;
                    border-bottom: 1px solid transparent;
                    padding-bottom: 10px;
                    width: 320px;
                    margin-left:-210px;
                    }

                    .faq-question {
                    background: none;
                    border: none;
                    font-size: 18px;
                    cursor: pointer;
                    text-align: left;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px;
                    margin-left: -10px;
                    }

                    .faq-answer {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease;
                    padding: 0 10px;
                    font-size: 12px;
                    color: white;
                    text-align: justify;
                    background-color: y;

                    }

                    .faq-answer p{
                        font-size: 16px;
                        margin-top: 10px;
                        text-align: justify;
                        margin-left: 20px;
                    }

                    .faq-answer.visible {
                        max-height: 300px; /* Altura máxima para desplegar la respuesta */
                        padding: 10px;
                    }

                    hr{
                        width: 325px;
                        margin-left: 10px;
                    }

                        .footer{
                            margin-left: -10px;
                            width: 340px;
                            margin-top: -60px;
                        }

                        .footer P{
                            text-align: center;
                            align-items: center;
                            margin-left: 45px;
                        }

                        .footer-container {
                            flex-direction: column;
                            align-items: flex-start;
                            margin-left:-10px;
                            background-color: transparent;
                            width: 350px;
                        }
                        
                        .footer-map-newsletter {
                            width: 100%;
                            margin-left: 10px;
                            background-color: transparent;
                            width: 330px;
                        }

                        .footer-map-newsletter p {
                            margin-left:-7px;
                        }

                        .footer-map-newsletter input{
                            margin-left: 10px;
                        }
                        
                        .footer-info{
                            width: 330px;
                            margin-left: 20px;
                        }

                        .footer-info h2{
                            margin-left: 15px;
                        }

                        .contact-item{
                            display: none;
                            margin-left: -120px;
                            max-width: 230px;
                        }   

                        .map {
                            width: 330px;
                            height: 320px;
                            margin-left: 5px;
                        }

                        .footer-bottom{
                            margin-left: 20px;
                            width: 320px;
                        }
                        
                        .footer-bottom p{
                            font-size: 20px;
                            width: 320px;
                            margin-left: 20px;
                        }

                        .footer-bottom p1{
                            font-size: 20px;
                            width: 320px;
                            margin-left: -10px;
                        }
                        
                        .social-icons1{
                            margin-left:38px;
                        }

                        .footer-map-newsletter input{
                            margin-left: 20px;
                            width: 200px;
                        }
                        
                    }