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



body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

/* Estilos del contenedor principal */
.container {
    width: 100%;
    max-width: 100%;
    /* Asegurarse de que no se desborde el contenido */
    overflow-x: hidden;
    /* Evitar la barra de desplazamiento horizontal */
}

/* Estilos del header */
header {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 30px;
    /* 40px en la parte superior e inferior, 30px a la izquierda y derecha */
}

.logo {
    width: 200px;
    /* Ajusta el tamaño del logo según tus necesidades */
    max-width: 100%;
    margin-left: 4cm;
}

.phone {
    display: flex;
    align-items: center;
}

.phone-icon {
    margin-right: 5px;
}

/* Estilos de la barra de navegación */
nav {
    background-color: #00A7BB;
    text-align: left;
    /* Alinea los enlaces a la izquierda */
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    /* Alinear los enlaces completamente a la izquierda */
    align-items: center;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 1cm;
    /* Espacio de 1 cm entre cada enlace */
    padding: 5px;
    /* Añadimos un relleno para mejorar la interacción al hacer clic */
    transition: color 0.3s ease;
    /* Transición para suavizar el cambio de color */
}

nav a:hover {
    color: #0E2A3F;
    /* Cambio de color a #0E2A3F al pasar el cursor */
}

nav a.active {
    background-color: #0000ff;
    /* Color de fondo para el enlace activo */
}

/* Estilos para el enlace del teléfono */
.phone a {
    text-decoration: none;
    /* Quitamos el subrayado */
    color: #000000;
    /* Color del número de teléfono */
}

.phone a:hover {
    color: #000000;
    /* Cambio de color a #000000 al pasar el cursor */
}

.Homeleft {
    margin-left: 5cm;
}


/* Estilos del resto de la página, tal como se mostró anteriormente... */
.carousel-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    /* Agregamos este estilo para que el carrusel ocupe todo el ancho */
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
    width: 300%;
    /* Ajustamos el ancho del carrusel para mostrar 3 imágenes */
    height: 400px;
    /* Altura deseada del carrusel */
}

.carousel-item {
    flex-shrink: 0;
    width: 33.33%;
    /* Ajustamos el ancho de cada imagen en el carrusel */
}

.carousel-item img {
    width: 100%;
    /* Ajustamos el ancho de las imágenes al 100% del contenedor */
    height: 100%;
    /* Ajustamos la altura de las imágenes al 100% del contenedor */
    object-fit: cover;
    /* Redimensionamos las imágenes para que cubran todo el espacio sin distorsión */
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid #00A7BB;
    /* Borde de color azul fuerte */
}

.carousel-indicator.active {
    background-color: #333;
}


/* Estilos para la sección de texto partida en dos */
.text-section {
    display: flex;
    justify-content: space-between;
    padding: 50px;
}

.text-column {
    flex: 1;
    padding: 0 20px;
    margin-right: 320px;
    /* Agrega el espaciado entre las columnas de texto */
    font-size: 17px;
}

/* Para la última columna, elimina el margen derecho para evitar espacios innecesarios */
.text-column:last-child {
    margin-right: 0;
}

/* Estilos para el párrafo "Specialist In Fasteners and Castings for The Automotive Industry And Other Industries" */
.specialist-paragraph {
    color: #575756;
    /* Letra gris */
    font-weight: bold;
    /* Texto más rellenito (negrita) */
    font-size: 22px;
}

/* Estilos para los puntos naranjas en la segunda columna a partir del segundo párrafo */
.text-column:nth-child(2) p:not(:first-child)::before {
    content: "\2022";
    /* Código del punto unicode */
    color: #E9B229;
    /* Color del punto */
    font-size: 50px;
    /* Tamaño del punto */
    margin-right: 10px;
    /* Espaciado entre el punto y el texto */
    background-color: orange;
    /* Color de fondo naranja */
    border-radius: 50%;
    /* Hacemos el punto circular */
    display: inline-block;
    /* Para que el punto no rompa el flujo del texto */
    line-height: 0;
    /* Eliminamos el espacio adicional que genera el punto */
    padding-right: 5px;
    /* Ajustamos el espacio a la derecha del punto */
    vertical-align: middle;
    /* Centramos verticalmente el punto */
}

/* Espaciado entre párrafos en la primera columna */
.text-column:nth-child(1) p+p {
    margin-top: 40px;
    /* Ajusta el espacio entre los párrafos en la primera columna */
}

/* Ajustar el espacio izquierdo en la primera columna */
.text-column:nth-child(1) {
    padding-left: 60px;
    /* Agrega más espacio izquierdo */
}

.card {
    flex: 1;
    max-width: 320px;
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 0 0px 60px 0;
    word-wrap: break-word;
    border: none;
    box-shadow: 10px 10px 15px -6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    position: relative;
}

/* Estilos para el texto dentro de las tarjetas y el texto editable */
.card p {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

/* Clases para posicionar las tarjetas individualmente */
.card-1 {
    margin-right: 20px;
    margin-left: 130px;
}

.card-2 {
    margin-right: 20px;
    margin-left: -40px;
}

.card-3 {
    margin-right: 20px;
    margin-left: -10px;
}

.card-4 {
    margin-right: 120px;
}

/* Clase para controlar la fuente y tamaño del texto en el párrafo */
.custom-text {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-size: 18px;
    /* Tamaño de fuente personalizado */
}

/* Estilos para el texto "Benefits:" */
.benefits-text {
    font-size: 3.5vw;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    text-align: center;
}

/* Estilos para los textos principales */
.heading-text1,
.heading-text2,
.heading-text3,
.heading-text4 {
    font-family: 'Poppins', sans-serif;
    color: #FFF;
    position: absolute;
    text-align: center;
}

/* Tamaños personalizados para cada heading-text */
.heading-text1 {
    font-size: 2vw;
    top: 21px;
    left: 16%;
    transform: translateX(-50%);
}

.heading-text2 {
    font-size: 2vw;
    top: 21px;
    left: 39%;
    transform: translateX(-50%);
}

.heading-text3 {
    font-size: 2vw;
    top: 21px;
    left: 60%;
    transform: translateX(-50%);
}

.heading-text4 {
    font-size: 2vw;
    top: 21px;
    left: 81%;
    transform: translateX(-50%);
}

/* Estilos para el contenedor de la imagen y las letras */
.arrow-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Permite que los elementos se envuelvan */
    text-align: center;
    position: relative;
}

/* Estilo para la línea de flechas */
.arrow-line {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Ajustar el ancho de cada heading-text */
.heading-text1 {
    flex-basis: 25%;
}

.heading-text2 {
    flex-basis: 25%;
}

.heading-text3 {
    flex-basis: 25%;
}

.heading-text4 {
    flex-basis: 25%;
}

/* Ajustar el ancho de la línea de flechas */
.arrow-line {
    max-width: 90%;
    width: 100%;
}

/* Estilos para el texto "FAQS:" */
.FAQS-TEXT {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    text-align: center;
    /* Centrado del texto */
    margin-top: 80px;
    font-size: 70px;
}



.card-container {
    display: flex;
    justify-content: space-between;
    margin-top: -10px;
    /* Ajustar el margen superior según tus necesidades */
    gap: 10px;
    /* Espacio entre las tarjetas. Puedes modificar este valor según tus necesidades */
}

.card {
    flex: 1;
    /* Permitir que las tarjetas se adapten automáticamente al contenido */
    max-width: 320px;
    /* Ajustar el tamaño máximo de las tarjetas según tus necesidades */
    background-color: #ffffff9d;
    padding: 20px;
    text-align: center;
    /* Eliminar el esquinas redondas */
    border-radius: 10;
    /* Esquinas redondas solo en el lado derecho */
    word-wrap: break-word;
    /* Evitar el desbordamiento del texto */
    border: none;
    /* Eliminar el borde en todos los lados */
    box-shadow: 10px 10px 15px -6px rgba(0, 0, 0, 0.3);
    /* Sombra solo debajo de las tarjetas */
    display: flex;
    /* Usar flexbox para alinear verticalmente */
    align-items: center;
    /* Centrar verticalmente el contenido */
}

/* Estilos para el texto dentro de las tarjetas y el texto editable */
.card p,
.editable-text {
    font-size: 16px;
    /* Ajusta el tamaño de fuente según tus necesidades */
    line-height: 1.6;
    /* Ajusta el espaciado entre líneas según tus necesidades */
    text-align: center;
    /* Centrar el texto horizontalmente */
}

/* Estilos para el texto editable */
.editable-text {
    border: 1px solid #ddd;
    padding: 5px;
    margin-top: 10px;
    /* Ajustar el margen superior según tus necesidades */
}

/* Nueva clase específica para la tarjeta independiente */
.new-card {
    flex: 1;
    max-width: 700px;
    /* Ajustar el ancho máximo de las tarjetas según tus necesidades */
    height: 30px;
    /* Ajustar la altura deseada de las tarjetas */
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 0 20px 20px 0;
    /* Esquinas redondas solo en el lado derecho */
    word-wrap: break-word;
    border: none;
    /* Eliminar el borde en todos los lados */
    box-shadow: 10px 10px 12px -9px rgba(0, 0, 0, 0.3);
    /* Sombra solo debajo de las tarjetas */
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 20px;
    margin-right: 141.732px;
    /* Espacio de 5 cm (aproximadamente 141.732px) entre tarjetas */
    margin-bottom: 40px;
    /* Espacio entre tarjetas verticales */
    position: relative;
    /* Agregamos posición relativa para controlar el elemento naranja */


}

/* Estilos para el cuadrado naranja de la tarjeta independiente */
.new-card .orange-square {
    position: absolute;
    bottom: 0px;
    /* Ajustar la posición vertical del cuadro */
    right: -35px;
    /* Ajustar la posición horizontal del cuadro */
    width: 90px;
    height: 70px;
    box-shadow: 10px 15px 25px -1px rgba(0, 0, 0, 0.4);
    /* Sombra solo debajo de las tarjetas */
    background-color: #E6962D;
    border-radius: 10px;
    /* Agregamos bordes redondos */
    z-index: -1;
    /* Enviar el cuadro detrás de la tarjeta */
}

/* Estilos para el texto adicional que se muestra fuera de la tarjeta */
.additional-text {
    /* ... Estilos anteriores ... */
    position: absolute;
    top: 120px;
    /* Ajustar la distancia vertical desde la tarjeta */
    left: 0;
    right: 0;
    background-color: #fff;
    padding: -90px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    /* Nuevos estilos modificables */
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins (puedes cambiarla por otra fuente) */
    font-size: 22px;
    /* Tamaño de fuente (puedes ajustarlo según tus necesidades) */
    color: #575756;
    /* Color de texto (puedes cambiarlo al que prefieras) */


    /* Evita que el texto se divida en múltiples líneas */

}

.card-container {
    position: relative;
    /* Añadir posición relativa para que las tarjetas internas no afecten */
}


/* Estilo para ocultar el texto adicional cuando no está activo */
.new-card .additional-text {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    /* Agregar una transición suave */


}

.new-card.active {
    margin-bottom: 190px;
    /* Ajusta el espacio inferior para dar espacio al texto adicional */
}

/* Espaciado entre las tarjetas cuando se muestra el texto adicional */
.new-card.active+.pushed-card {
    margin-top: 20px;

}

/* Estilo para empujar la tarjeta hacia abajo cuando la tarjeta anterior está activa */
.pushed-card {
    transform: translateY(50px);
    /* Ajustar el desplazamiento vertical */
    transition: transform 0.3s ease;
    /* Agregar una transición suave */
}


/* Estilos para mostrar el texto adicional cuando la tarjeta tiene la clase "active" */
.new-card.active .additional-text {
    max-height: 200px;
    /* Ajustar la altura máxima del texto adicional */
    opacity: 1;
    /* Mostrar el texto con opacidad completa */
}

.new-card.active+.new-card {
    margin-top: 40px;
}

/* Ajustar posición del texto adicional fuera de la tarjeta */
.new-card .additional-text {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.new-card.active .additional-text {
    max-height: 200px;
    opacity: 1;
}

/* Contenedor para las tarjetas y el texto adicional */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
    /* Espacio entre las tarjetas y el texto adicional */
}

/* Nueva clase para el contenedor del texto adicional */
.additional-text-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    /* Espacio entre las tarjetas y el texto adicional */
}

/* Icono de las tarjetas FAQs */
/* Estilos comunes para los iconos de las tarjetas FAQs */
.card-icon-container {
    position: absolute;
    /* Ajusta aquí los valores de left y top para posicionar el icono según tus necesidades */
}

/* Estilos específicos para cada icono */
.icon-1 {
    left: -100px;
    top: 6px;
}

.icon-2 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 2 */
    top: -3px;
    /* Ajusta la posición vertical del icono 2 */
}

.icon-3 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 3 */
    top: -4px;
    /* Ajusta la posición vertical del icono 3 */
}

.icon-4 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 4 */
    top: -6px;
    /* Ajusta la posición vertical del icono 4 */
}

.icon-5 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 5 */
    top: 2px;
    /* Ajusta la posición vertical del icono 5 */
}

.icon-6 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 6 */
    top: -4px;
    /* Ajusta la posición vertical del icono 6 */
}

.new-card {
    position: relative;
    margin-left: 230px;
    /* Ajusta el espaciado entre el icono y la tarjeta */
    width: 600px;
    /* Ajusta el ancho de la tarjeta a 400px (puedes cambiar este valor según tus necesidades) */

}

.Text-cardnew {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    text-align: center;
    /* Centrado del texto */
    font-size: 22px;
    /* Tamaño fuente */
    margin-left: 120px;
}

.Text-cardnewAditional {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    font-size: 15px;
    /* Tamaño fuente */


    display: inline-block;
    /* Asegura que el texto se desplace horizontalmente */
}

.FAQS-PADDING {
    /* Estilos para posicionar el contenedor */
    position: relative;
    top: 40px;
    /* Mover el contenedor hacia abajo 100px */
    right: -50px;
    /* Mover el contenedor hacia la derecha 50px */
    left: -10px;
    /* Mover el contenedor hacia la derecha 50px */

}

.BARRACOLORES-PADDING {
    /* Estilos para posicionar el contenedor */
    position: relative;
    top: 0px;
    /* Mover el contenedor hacia abajo 100px */
    left: 0px;
    /* Mover el contenedor hacia la derecha 50px */

}

.TEXTOPADDING {
    /* Estilos para posicionar el contenedor */
    position: relative;
    top: -19px;
    /* Mover el contenedor hacia abajo 100px */
    left: 0px;
    /* Mover el contenedor hacia la derecha 50px */

}

/* Estilos del pie de página */
.footer {
    background-color: #f2f2f2;
    padding: 50px;
    text-align: center;
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    /* Alinear los elementos en una fila */
    justify-content: center;
    /* Centrar el contenido horizontalmente */
    align-items: center;
    /* Centrar el contenido verticalmente */
}

.footer img {
    width: 300px;
    margin-right: 20px;
    /* Espaciado entre el logo y el texto */
}

.footer-text {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    font-size: 20px;
    text-align: left;
    /* Alinea el texto a la izquierda */
    line-height: 2.5;
    /* Espaciado entre líneas para mejorar la legibilidad */
}


/* Escritorio extra grande */
@media only screen and (min-width: 1200px) {}

/* Escritorio grande */
@media only screen and (min-width: 1024px) {
    
    body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

/* Estilos del contenedor principal */
.container {
    width: 100%;
    max-width: 100%;
    /* Asegurarse de que no se desborde el contenido */
    overflow-x: hidden;
    /* Evitar la barra de desplazamiento horizontal */
}

/* Estilos del header */
header {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 30px;
    /* 40px en la parte superior e inferior, 30px a la izquierda y derecha */
}

.logo {
    width: 200px;
    /* Ajusta el tamaño del logo según tus necesidades */
    max-width: 100%;
    margin-left: 4cm;
}

.phone {
    display: flex;
    align-items: center;
}

.phone-icon {
    margin-right: 5px;
}

/* Estilos de la barra de navegación */
nav {
    background-color: #00A7BB;
    text-align: left;
    /* Alinea los enlaces a la izquierda */
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    /* Alinear los enlaces completamente a la izquierda */
    align-items: center;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 1cm;
    /* Espacio de 1 cm entre cada enlace */
    padding: 5px;
    /* Añadimos un relleno para mejorar la interacción al hacer clic */
    transition: color 0.3s ease;
    /* Transición para suavizar el cambio de color */
}

nav a:hover {
    color: #0E2A3F;
    /* Cambio de color a #0E2A3F al pasar el cursor */
}

nav a.active {
    background-color: #0000ff;
    /* Color de fondo para el enlace activo */
}

/* Estilos para el enlace del teléfono */
.phone a {
    text-decoration: none;
    /* Quitamos el subrayado */
    color: #000000;
    /* Color del número de teléfono */
}

.phone a:hover {
    color: #000000;
    /* Cambio de color a #000000 al pasar el cursor */
}

.Homeleft {
    margin-left: 5cm;
}


/* Estilos del resto de la página, tal como se mostró anteriormente... */
.carousel-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    /* Agregamos este estilo para que el carrusel ocupe todo el ancho */
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
    width: 300%;
    /* Ajustamos el ancho del carrusel para mostrar 3 imágenes */
    height: 400px;
    /* Altura deseada del carrusel */
}

.carousel-item {
    flex-shrink: 0;
    width: 33.33%;
    /* Ajustamos el ancho de cada imagen en el carrusel */
}

.carousel-item img {
    width: 100%;
    /* Ajustamos el ancho de las imágenes al 100% del contenedor */
    height: 100%;
    /* Ajustamos la altura de las imágenes al 100% del contenedor */
    object-fit: cover;
    /* Redimensionamos las imágenes para que cubran todo el espacio sin distorsión */
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid #00A7BB;
    /* Borde de color azul fuerte */
}

.carousel-indicator.active {
    background-color: #333;
}


/* Estilos para la sección de texto partida en dos */
.text-section {
    display: flex;
    justify-content: space-between;
    padding: 50px;
}

.text-column {
    flex: 1;
    padding: 0 20px;
    margin-right: 320px;
    /* Agrega el espaciado entre las columnas de texto */
    font-size: 17px;
}

/* Para la última columna, elimina el margen derecho para evitar espacios innecesarios */
.text-column:last-child {
    margin-right: 0;
}

/* Estilos para el párrafo "Specialist In Fasteners and Castings for The Automotive Industry And Other Industries" */
.specialist-paragraph {
    color: #575756;
    /* Letra gris */
    font-weight: bold;
    /* Texto más rellenito (negrita) */
    font-size: 22px;
}

/* Estilos para los puntos naranjas en la segunda columna a partir del segundo párrafo */
.text-column:nth-child(2) p:not(:first-child)::before {
    content: "\2022";
    /* Código del punto unicode */
    color: #E9B229;
    /* Color del punto */
    font-size: 50px;
    /* Tamaño del punto */
    margin-right: 10px;
    /* Espaciado entre el punto y el texto */
    background-color: orange;
    /* Color de fondo naranja */
    border-radius: 50%;
    /* Hacemos el punto circular */
    display: inline-block;
    /* Para que el punto no rompa el flujo del texto */
    line-height: 0;
    /* Eliminamos el espacio adicional que genera el punto */
    padding-right: 5px;
    /* Ajustamos el espacio a la derecha del punto */
    vertical-align: middle;
    /* Centramos verticalmente el punto */
}

/* Espaciado entre párrafos en la primera columna */
.text-column:nth-child(1) p+p {
    margin-top: 40px;
    /* Ajusta el espacio entre los párrafos en la primera columna */
}

/* Ajustar el espacio izquierdo en la primera columna */
.text-column:nth-child(1) {
    padding-left: 60px;
    /* Agrega más espacio izquierdo */
}

.card {
    flex: 1;
    max-width: 320px;
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 0 0px 60px 0;
    word-wrap: break-word;
    border: none;
    box-shadow: 10px 10px 15px -6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    position: relative;
}

/* Estilos para el texto dentro de las tarjetas y el texto editable */
.card p {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}
/* Clases para ajustar el tamaño de las tarjetas individualmente */
.card-1 {
    width: 105px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: 95px;
    margin-top: 10px;
}

.card-2 {
    width: 105px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: 60px;
    margin-top: 10px;



}

.card-3 {
    width: 105px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: 60px;
    margin-top: 10px;
}

.card-4 {
    width: 105px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: 60px;
    margin-top: 10px;
}


/* Clase para controlar la fuente y tamaño del texto en el párrafo */
.custom-text {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-size: 18px;
    /* Tamaño de fuente personalizado */
}

/* Estilos para el texto "Benefits:" */
.benefits-text {
    font-size: 3.5vw;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    text-align: center;
}

/* Estilos para los textos principales */
.heading-text1,
.heading-text2,
.heading-text3,
.heading-text4 {
    font-family: 'Poppins', sans-serif;
    color: #FFF;
    position: absolute;
    text-align: center;
}

/* Tamaños personalizados para cada heading-text */
.heading-text1 {
    font-size: 2vw;
    top: 21px;
    left: 16%;
    transform: translateX(-50%);
}

.heading-text2 {
    font-size: 2vw;
    top: 21px;
    left: 39%;
    transform: translateX(-50%);
}

.heading-text3 {
    font-size: 2vw;
    top: 21px;
    left: 60%;
    transform: translateX(-50%);
}

.heading-text4 {
    font-size: 2vw;
    top: 21px;
    left: 81%;
    transform: translateX(-50%);
}

/* Estilos para el contenedor de la imagen y las letras */
.arrow-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Permite que los elementos se envuelvan */
    text-align: center;
    position: relative;
}

/* Estilo para la línea de flechas */
.arrow-line {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Ajustar el ancho de cada heading-text */
.heading-text1 {
    flex-basis: 25%;
}

.heading-text2 {
    flex-basis: 25%;
}

.heading-text3 {
    flex-basis: 25%;
}

.heading-text4 {
    flex-basis: 25%;
}

/* Ajustar el ancho de la línea de flechas */
.arrow-line {
    max-width: 90%;
    width: 100%;
}

/* Estilos para el texto "FAQS:" */
.FAQS-TEXT {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    text-align: center;
    /* Centrado del texto */
    margin-top: 80px;
    font-size: 40px;
}



.card-container {
    display: flex;
    justify-content: space-between;
    margin-top: -10px;
    /* Ajustar el margen superior según tus necesidades */
    gap: 10px;
    /* Espacio entre las tarjetas. Puedes modificar este valor según tus necesidades */
}

.card {
    flex: 1;
    /* Permitir que las tarjetas se adapten automáticamente al contenido */
    max-width: 320px;
    /* Ajustar el tamaño máximo de las tarjetas según tus necesidades */
    background-color: #ffffff9d;
    padding: 20px;
    text-align: center;
    /* Eliminar el esquinas redondas */
    border-radius: 10;
    /* Esquinas redondas solo en el lado derecho */
    word-wrap: break-word;
    /* Evitar el desbordamiento del texto */
    border: none;
    /* Eliminar el borde en todos los lados */
    box-shadow: 10px 10px 15px -6px rgba(0, 0, 0, 0.3);
    /* Sombra solo debajo de las tarjetas */
    display: flex;
    /* Usar flexbox para alinear verticalmente */
    align-items: center;
    /* Centrar verticalmente el contenido */
}

/* Estilos para el texto dentro de las tarjetas y el texto editable */
.card p,
.editable-text {
    font-size: 16px;
    /* Ajusta el tamaño de fuente según tus necesidades */
    line-height: 1.6;
    /* Ajusta el espaciado entre líneas según tus necesidades */
    text-align: center;
    /* Centrar el texto horizontalmente */
}

/* Estilos para el texto editable */
.editable-text {
    border: 1px solid #ddd;
    padding: 5px;
    margin-top: 10px;
    /* Ajustar el margen superior según tus necesidades */
}

/* Nueva clase específica para la tarjeta independiente */
.new-card {
    flex: 1;
    max-width: 700px;
    /* Ajustar el ancho máximo de las tarjetas según tus necesidades */
    height: 30px;
    /* Ajustar la altura deseada de las tarjetas */
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 0 20px 20px 0;
    /* Esquinas redondas solo en el lado derecho */
    word-wrap: break-word;
    border: none;
    /* Eliminar el borde en todos los lados */
    box-shadow: 10px 10px 12px -9px rgba(0, 0, 0, 0.3);
    /* Sombra solo debajo de las tarjetas */
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 20px;
    margin-right: 141.732px;
    /* Espacio de 5 cm (aproximadamente 141.732px) entre tarjetas */
    margin-bottom: 40px;
    /* Espacio entre tarjetas verticales */
    position: relative;
    /* Agregamos posición relativa para controlar el elemento naranja */


}

/* Estilos para el cuadrado naranja de la tarjeta independiente */
.new-card .orange-square {
    position: absolute;
    bottom: 0px;
    /* Ajustar la posición vertical del cuadro */
    right: -35px;
    /* Ajustar la posición horizontal del cuadro */
    width: 90px;
    height: 70px;
    box-shadow: 10px 15px 25px -1px rgba(0, 0, 0, 0.4);
    /* Sombra solo debajo de las tarjetas */
    background-color: #E6962D;
    border-radius: 10px;
    /* Agregamos bordes redondos */
    z-index: -1;
    /* Enviar el cuadro detrás de la tarjeta */
}

/* Estilos para el texto adicional que se muestra fuera de la tarjeta */
.additional-text {
    /* ... Estilos anteriores ... */
    position: absolute;
    top: 120px;
    /* Ajustar la distancia vertical desde la tarjeta */
    left: 0;
    right: 0;
    background-color: #fff;
    padding: -90px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
    /* Nuevos estilos modificables */
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins (puedes cambiarla por otra fuente) */
    font-size: 22px;
    /* Tamaño de fuente (puedes ajustarlo según tus necesidades) */
    color: #575756;
    /* Color de texto (puedes cambiarlo al que prefieras) */


    /* Evita que el texto se divida en múltiples líneas */

}

.card-container {
    position: relative;
    /* Añadir posición relativa para que las tarjetas internas no afecten */
}


/* Estilo para ocultar el texto adicional cuando no está activo */
.new-card .additional-text {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    /* Agregar una transición suave */


}

.new-card.active {
    margin-bottom: 260px;
    /* Ajusta el espacio inferior para dar espacio al texto adicional */
}

/* Espaciado entre las tarjetas cuando se muestra el texto adicional */
.new-card.active+.pushed-card {
    margin-top: 20px;

}

/* Estilo para empujar la tarjeta hacia abajo cuando la tarjeta anterior está activa */
.pushed-card {
    transform: translateY(50px);
    /* Ajustar el desplazamiento vertical */
    transition: transform 0.3s ease;
    /* Agregar una transición suave */
}


/* Estilos para mostrar el texto adicional cuando la tarjeta tiene la clase "active" */
.new-card.active .additional-text {
    max-height: 200px;
    /* Ajustar la altura máxima del texto adicional */
    opacity: 1;
    /* Mostrar el texto con opacidad completa */
}

.new-card.active+.new-card {
    margin-top: 40px;
}

/* Ajustar posición del texto adicional fuera de la tarjeta */
.new-card .additional-text {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.new-card.active .additional-text {
    max-height: 200px;
    opacity: 1;
}

/* Contenedor para las tarjetas y el texto adicional */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
    /* Espacio entre las tarjetas y el texto adicional */
}

/* Nueva clase para el contenedor del texto adicional */
.additional-text-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    /* Espacio entre las tarjetas y el texto adicional */
}

/* Icono de las tarjetas FAQs */
/* Estilos comunes para los iconos de las tarjetas FAQs */
.card-icon-container {
    position: absolute;
    /* Ajusta aquí los valores de left y top para posicionar el icono según tus necesidades */
}

/* Estilos específicos para cada icono */
.icon-1 {
    left: -100px;
    top: 6px;
}

.icon-2 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 2 */
    top: -3px;
    /* Ajusta la posición vertical del icono 2 */
}

.icon-3 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 3 */
    top: -4px;
    /* Ajusta la posición vertical del icono 3 */
}

.icon-4 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 4 */
    top: -6px;
    /* Ajusta la posición vertical del icono 4 */
}

.icon-5 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 5 */
    top: 2px;
    /* Ajusta la posición vertical del icono 5 */
}

.icon-6 {
    left: -100px;
    /* Ajusta la posición horizontal del icono 6 */
    top: -4px;
    /* Ajusta la posición vertical del icono 6 */
}

.new-card {
    position: relative;
    margin-left: 230px;
    /* Ajusta el espaciado entre el icono y la tarjeta */
    width: 600px;
    /* Ajusta el ancho de la tarjeta a 400px (puedes cambiar este valor según tus necesidades) */

}

.Text-cardnew {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    text-align: center;
    /* Centrado del texto */
    font-size: 22px;
    /* Tamaño fuente */
    margin-left: 120px;
}

.Text-cardnewAditional {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    font-size: 15px;
    /* Tamaño fuente */


    display: inline-block;
    /* Asegura que el texto se desplace horizontalmente */
}

.FAQS-PADDING {
    /* Estilos para posicionar el contenedor */
    position: relative;
    top: 40px;
    /* Mover el contenedor hacia abajo 100px */
    right: -50px;
    /* Mover el contenedor hacia la derecha 50px */
    left: -10px;
    /* Mover el contenedor hacia la derecha 50px */

}

.BARRACOLORES-PADDING {
    /* Estilos para posicionar el contenedor */
    position: relative;
    top: 0px;
    /* Mover el contenedor hacia abajo 100px */
    left: 0px;
    /* Mover el contenedor hacia la derecha 50px */

}

.TEXTOPADDING {
    /* Estilos para posicionar el contenedor */
    position: relative;
    top: -19px;
    /* Mover el contenedor hacia abajo 100px */
    left: 0px;
    /* Mover el contenedor hacia la derecha 50px */

}

/* Estilos del pie de página */
.footer {
    background-color: #f2f2f2;
    padding: 50px;
    text-align: center;
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    /* Alinear los elementos en una fila */
    justify-content: center;
    /* Centrar el contenido horizontalmente */
    align-items: center;
    /* Centrar el contenido verticalmente */
}

.footer img {
    width: 300px;
    margin-right: 20px;
    /* Espaciado entre el logo y el texto */
}

.footer-text {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    font-size: 20px;
    text-align: left;
    /* Alinea el texto a la izquierda */
    line-height: 2.5;
    /* Espaciado entre líneas para mejorar la legibilidad */
}

    
}


@media only screen and (max-width: 425px) {

/* Estilos del header */
header {
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
}

.Homeleft {
    margin-left: 0;
}

.logo {
    margin-left: 0;
    margin-bottom: 7px;
}

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

/* Estilos de la barra de navegación */
nav {
    flex-direction: column;
    align-items: center;
    padding: 7px;
}

nav a {
    margin-right: 0;
    margin-bottom: 3px;
}

/* Estilos para la sección de texto partida en dos */
.text-section {
    flex-direction: column;
    padding: 21px;
}

.text-column {
    margin-right: 0;
    padding: 0 7px;
    margin-bottom: 21px;
}

.text-column:nth-child(1) {
    padding-left: 0;
}

/* Estilos para el párrafo "Specialist In Fasteners and Castings for The Automotive Industry And Other Industries" */
.specialist-paragraph {
    font-size: 14px;
}

/* Estilos para los puntos naranjas en la segunda columna a partir del segundo párrafo */
.text-column:nth-child(2) p:not(:first-child)::before {
    font-size: 24px;
    margin-right: 4px;
    padding-right: 2px;
}


/* Estilos para el texto "Benefits:" */
.benefits-text {
    font-size: 3.5vw;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    text-align: center;
}

/* Estilos para los textos principales */
.heading-text1,
.heading-text2,
.heading-text3,
.heading-text4 {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    position: absolute;
    text-align: center;
}

/* Tamaños personalizados para cada heading-text */
.heading-text1 {
    font-size: 2vw;
    top: 6px;
    left: 14%;
    transform: translateX(-50%);
}

.heading-text2 {
    font-size: 2vw;
    top: 6px;
    left: 39%;
    transform: translateX(-50%);
}

.heading-text3 {
    font-size: 2vw;
    top: 6px;
    left: 63%;
    transform: translateX(-50%);
}

.heading-text4 {
    font-size: 2vw;
    top: 7px;
    left: 85%;
    transform: translateX(-50%);
}

/* Estilos para el contenedor de la imagen y las letras */
.arrow-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Permite que los elementos se envuelvan */
    text-align: center;
    position: relative;
}

/* Estilo para la línea de flechas */
.arrow-line {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Ajustar el ancho de cada heading-text */
.heading-text1 {
    flex-basis: 25%;
}

.heading-text2 {
    flex-basis: 25%;
}

.heading-text3 {
    flex-basis: 25%;
}

.heading-text4 {
    flex-basis: 25%;
}

/* Ajustar el ancho de la línea de flechas */
.arrow-line {
    max-width: 100%;
    width: 100%;
}

.card-container {
    display: flex;
    flex-direction: column;
    /* Cambiamos la dirección a vertical */
    align-items: center;
    /* Centrar las tarjetas horizontalmente */
    gap: 10px;
    /* Espacio entre las tarjetas. Puedes modificar este valor según tus necesidades */
    margin-top: -10px;
    /* Ajustar el margen superior según tus necesidades */
    margin-left: 50px;
    /* Ajustar el margen izquierdo según tus necesidades */
}

.card {
    background-color: #ffffff9d;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    word-wrap: break-word;
    border: none;
    box-shadow: 10px 10px 15px -6px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para el texto dentro de las tarjetas y el texto editable */
.card p {
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
}

/* Clases para ajustar el tamaño de las tarjetas individualmente */
.card-1 {
    width: 30px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: -95%;
    margin-top: 3%;
}

.card-2 {
    width: 35px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: -35%;
    margin-top: -60%;



}

.card-3 {
    width: 30px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: 23%;
    margin-top: -65%;
}

.card-4 {
    width: 30px;
    /* Ajustar el ancho según tus necesidades */
    margin-left: 99%;
    margin-top: -63%;
}

/* Nueva clase específica para la tarjeta independiente */
.new-card {
    flex: 1;
    max-width: 160px;
    /* Ajustar el ancho máximo de las tarjetas según tus necesidades */
    height: 3px;
    /* Ajustar la altura deseada de las tarjetas */
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    border-radius: 0 20px 20px 0;
    /* Esquinas redondas solo en el lado derecho */
    word-wrap: break-word;
    border: none;
    /* Eliminar el borde en todos los lados */
    box-shadow: 10px 10px 12px -9px rgba(0, 0, 0, 0.3);
    /* Sombra solo debajo de las tarjetas */
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 20px;
    margin-right: 141.732px;
    /* Espacio de 5 cm (aproximadamente 141.732px) entre tarjetas */
    margin-bottom: 40px;
    /* Espacio entre tarjetas verticales */
    position: relative;
    /* Agregamos posición relativa para controlar el elemento naranja */


}

/* Estilos para el cuadrado naranja de la tarjeta independiente */
.new-card .orange-square {
    position: absolute;
    bottom: 0px;
    /* Ajustar la posición vertical del cuadro */
    right: -15px;
    /* Ajustar la posición horizontal del cuadro */
    width: 95px;
    height: 43px;
    box-shadow: 10px 15px 25px -1px rgba(0, 0, 0, 0.4);
    /* Sombra solo debajo de las tarjetas */
    background-color: #E6962D;
    border-radius: 10px;
    /* Agregamos bordes redondos */
    z-index: -1;
    /* Enviar el cuadro detrás de la tarjeta */
}

/* Estilos para el texto adicional que se muestra fuera de la tarjeta */
.additional-text {
    /* ... Estilos anteriores ... */
    display: block;
    /* Mostrar el elemento solo en dispositivos móviles */

    position: absolute;
    top: 90px;
    /* Ajustar la distancia vertical desde la tarjeta */

    /* Nuevos estilos modificables */
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins (puedes cambiarla por otra fuente) */
    font-size: 2px;
    /* Tamaño de fuente (puedes ajustarlo según tus necesidades) */
    color: #f8f8f7;
    /* Color de texto (puedes cambiarlo al que prefieras) */
    white-space: pre-line;


    /* Evita que el texto se divida en múltiples líneas */

}

.card-container {
    position: relative;
    /* Añadir posición relativa para que las tarjetas internas no afecten */
}


/* Estilo para ocultar el texto adicional cuando no está activo */
.new-card .additional-text {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    /* Agregar una transición suave */


}

.new-card.active {
    margin-bottom: 190px;
    /* Ajusta el espacio inferior para dar espacio al texto adicional */
}

/* Espaciado entre las tarjetas cuando se muestra el texto adicional */
.new-card.active+.pushed-card {
    margin-top: 20px;

}

/* Estilo para empujar la tarjeta hacia abajo cuando la tarjeta anterior está activa */
.pushed-card {
    transform: translateY(50px);
    /* Ajustar el desplazamiento vertical */
    transition: transform 0.3s ease;
    /* Agregar una transición suave */
}


/* Estilos para mostrar el texto adicional cuando la tarjeta tiene la clase "active" */
.new-card.active .additional-text {
    max-height: 20px;
    /* Ajustar la altura máxima del texto adicional */
    opacity: 1;
    /* Mostrar el texto con opacidad completa */
}

.new-card.active+.new-card {
    margin-top: 40px;
}

/* Ajustar posición del texto adicional fuera de la tarjeta */
.new-card .additional-text {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.new-card.active .additional-text {
    max-height: 200px;
    opacity: 1;
}

/* Contenedor para las tarjetas y el texto adicional */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
    /* Espacio entre las tarjetas y el texto adicional */
}

/* Nueva clase para el contenedor del texto adicional */
.additional-text-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    /* Espacio entre las tarjetas y el texto adicional */
}

/* Icono de las tarjetas FAQs */
/* Estilos comunes para los iconos de las tarjetas FAQs */
.card-icon-container {
    position: absolute;
    /* Ajusta aquí los valores de left y top para posicionar el icono según tus necesidades */
}

/* Estilos específicos para cada icono */
.icon-1 {
    left: -60px;
    top: -18px;
}

.icon-2 {
    left: -60px;
    /* Ajusta la posición horizontal del icono 2 */
    top: -18px;
    /* Ajusta la posición vertical del icono 2 */
}

.icon-3 {
    left: -60px;
    /* Ajusta la posición horizontal del icono 3 */
    top: -18px;
    /* Ajusta la posición vertical del icono 3 */
}

.icon-4 {
    left: -60px;
    /* Ajusta la posición horizontal del icono 4 */
    top: -18px;
    /* Ajusta la posición vertical del icono 4 */
}

.icon-5 {
    left: -60px;
    /* Ajusta la posición horizontal del icono 5 */
    top: -18px;
    /* Ajusta la posición vertical del icono 5 */
}

.icon-6 {
    left: -60px;
    /* Ajusta la posición horizontal del icono 6 */
    top: -18px;
    /* Ajusta la posición vertical del icono 6 */
}

.new-card {
    position: relative;
    margin-left: 110px;
    /* Ajusta el espaciado entre el icono y la tarjeta */
    width: 600px;
    /* Ajusta el ancho de la tarjeta a 400px (puedes cambiar este valor según tus necesidades) */

}

.Text-cardnew {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    text-align: center;
    /* Centrado del texto */
    font-size: 7px;
    /* Tamaño fuente */
    margin-left: 20px;
}

.Text-cardnewAditional {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    font-size: 7px;
    /* Tamaño fuente */
    margin-left: -20px;
    writing-mode: hori-rl;

    display: inline-block;
    /* Asegura que el texto se desplace horizontalmente */
}

/* Estilos para el texto "FAQS:" */
.FAQS-TEXT {
    font-family: 'Poppins', sans-serif;
    /* Fuente Poppins */
    font-weight: bold;
    /* Texto en negritas */
    color: #575756;
    /* Color gris oscuro */
    text-align: center;
    /* Centrado del texto */
    margin-top: 120px;
    font-size: 16px;
    margin-bottom: -10px;
}

/* Estilos del pie de página */
.footer {
    background-color: #f2f2f2;
    padding: 30px;
    text-align: center;
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    /* Alinear los elementos en una fila */
    justify-content: center;
    /* Centrar el contenido horizontalmente */
    align-items: center;
    /* Centrar el contenido verticalmente */
}

.footer img {
    width: 100px;
    margin-right: 20px;
    /* Espaciado entre el logo y el texto */
}

.footer-text {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    font-size: 7px;
    text-align: left;
    /* Alinea el texto a la izquierda */
    line-height: 1.4;
    /* Espaciado entre líneas para mejorar la legibilidad */
}

/* Estilos del resto de la página, tal como se mostró anteriormente... */
.carousel-container {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
    /* Agregamos este estilo para que el carrusel ocupe todo el ancho */
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
    width: 300%;
    /* Ajustamos el ancho del carrusel para mostrar 3 imágenes */
    height: 160px;
    /* Altura deseada del carrusel */
}

.carousel-item {
    flex-shrink: 0;
    width: 33.33%;
    /* Ajustamos el ancho de cada imagen en el carrusel */
}

.carousel-item img {
    width: 100%;
    /* Ajustamos el ancho de las imágenes al 100% del contenedor */
    height: 100%;
    /* Ajustamos la altura de las imágenes al 100% del contenedor */
    object-fit: cover;
    /* Redimensionamos las imágenes para que cubran todo el espacio sin distorsión */
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid #00A7BB;
    /* Borde de color azul fuerte */
}

.carousel-indicator.active {
    background-color: #333;
}




}

@media only screen and (max-width: 390px) {}


@media only screen and (max-width: 375px) {

    /* Estilos del header */
    header {
        flex-direction: column;
        align-items: center;
        padding: 16px 12px;
    }

    .Homeleft {
        margin-left: 0;
    }

    .logo {
        margin-left: 0;
        margin-bottom: 7px;
    }

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

    /* Estilos de la barra de navegación */
    nav {
        flex-direction: column;
        align-items: center;
        padding: 7px;
    }

    nav a {
        margin-right: 0;
        margin-bottom: 3px;
    }

    /* Estilos para la sección de texto partida en dos */
    .text-section {
        flex-direction: column;
        padding: 21px;
    }

    .text-column {
        margin-right: 0;
        padding: 0 7px;
        margin-bottom: 21px;
    }

    .text-column:nth-child(1) {
        padding-left: 0;
    }

    /* Estilos para el párrafo "Specialist In Fasteners and Castings for The Automotive Industry And Other Industries" */
    .specialist-paragraph {
        font-size: 14px;
    }

    /* Estilos para los puntos naranjas en la segunda columna a partir del segundo párrafo */
    .text-column:nth-child(2) p:not(:first-child)::before {
        font-size: 24px;
        margin-right: 4px;
        padding-right: 2px;
    }


    /* Estilos para el texto "Benefits:" */
    .benefits-text {
        font-size: 3.5vw;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        text-align: center;
    }

    /* Estilos para los textos principales */
    .heading-text1,
    .heading-text2,
    .heading-text3,
    .heading-text4 {
        font-family: 'Poppins', sans-serif;
        color: #ffffff;
        position: absolute;
        text-align: center;
    }

    /* Tamaños personalizados para cada heading-text */
    .heading-text1 {
        font-size: 2vw;
        top: 6px;
        left: 14%;
        transform: translateX(-50%);
    }

    .heading-text2 {
        font-size: 2vw;
        top: 6px;
        left: 39%;
        transform: translateX(-50%);
    }

    .heading-text3 {
        font-size: 2vw;
        top: 6px;
        left: 63%;
        transform: translateX(-50%);
    }

    .heading-text4 {
        font-size: 2vw;
        top: 7px;
        left: 85%;
        transform: translateX(-50%);
    }

    /* Estilos para el contenedor de la imagen y las letras */
    .arrow-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        /* Permite que los elementos se envuelvan */
        text-align: center;
        position: relative;
    }

    /* Estilo para la línea de flechas */
    .arrow-line {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* Ajustar el ancho de cada heading-text */
    .heading-text1 {
        flex-basis: 25%;
    }

    .heading-text2 {
        flex-basis: 25%;
    }

    .heading-text3 {
        flex-basis: 25%;
    }

    .heading-text4 {
        flex-basis: 25%;
    }

    /* Ajustar el ancho de la línea de flechas */
    .arrow-line {
        max-width: 100%;
        width: 100%;
    }

    .card-container {
        display: flex;
        flex-direction: column;
        /* Cambiamos la dirección a vertical */
        align-items: center;
        /* Centrar las tarjetas horizontalmente */
        gap: 10px;
        /* Espacio entre las tarjetas. Puedes modificar este valor según tus necesidades */
        margin-top: -10px;
        /* Ajustar el margen superior según tus necesidades */
        margin-left: 50px;
        /* Ajustar el margen izquierdo según tus necesidades */
    }

    .card {
        background-color: #ffffff9d;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        word-wrap: break-word;
        border: none;
        box-shadow: 10px 10px 15px -6px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Estilos para el texto dentro de las tarjetas y el texto editable */
    .card p {
        font-size: 10px;
        line-height: 1.1;
        text-align: center;
    }

    /* Clases para ajustar el tamaño de las tarjetas individualmente */
    .card-1 {
        width: 30px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: -95%;
        margin-top: 5%;
    }

    .card-2 {
        width: 35px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: -35%;
        margin-top: -72%;



    }

    .card-3 {
        width: 30px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: 23%;
        margin-top: -70%;
    }

    .card-4 {
        width: 30px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: 109%;
        margin-top: -75%;
    }

    /* Nueva clase específica para la tarjeta independiente */
    .new-card {
        flex: 1;
        max-width: 160px;
        /* Ajustar el ancho máximo de las tarjetas según tus necesidades */
        height: 3px;
        /* Ajustar la altura deseada de las tarjetas */
        background-color: #ffffff;
        padding: 20px;
        text-align: center;
        border-radius: 0 20px 20px 0;
        /* Esquinas redondas solo en el lado derecho */
        word-wrap: break-word;
        border: none;
        /* Eliminar el borde en todos los lados */
        box-shadow: 10px 10px 12px -9px rgba(0, 0, 0, 0.3);
        /* Sombra solo debajo de las tarjetas */
        display: flex;
        align-items: center;
        position: relative;
        margin-left: 20px;
        margin-right: 141.732px;
        /* Espacio de 5 cm (aproximadamente 141.732px) entre tarjetas */
        margin-bottom: 40px;
        /* Espacio entre tarjetas verticales */
        position: relative;
        /* Agregamos posición relativa para controlar el elemento naranja */


    }

    /* Estilos para el cuadrado naranja de la tarjeta independiente */
    .new-card .orange-square {
        position: absolute;
        bottom: 0px;
        /* Ajustar la posición vertical del cuadro */
        right: -15px;
        /* Ajustar la posición horizontal del cuadro */
        width: 95px;
        height: 43px;
        box-shadow: 10px 15px 25px -1px rgba(0, 0, 0, 0.4);
        /* Sombra solo debajo de las tarjetas */
        background-color: #E6962D;
        border-radius: 10px;
        /* Agregamos bordes redondos */
        z-index: -1;
        /* Enviar el cuadro detrás de la tarjeta */
    }

    /* Estilos para el texto adicional que se muestra fuera de la tarjeta */
    .additional-text {
        /* ... Estilos anteriores ... */
        display: block;
        /* Mostrar el elemento solo en dispositivos móviles */

        position: absolute;
        top: 90px;
        /* Ajustar la distancia vertical desde la tarjeta */

        /* Nuevos estilos modificables */
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins (puedes cambiarla por otra fuente) */
        font-size: 2px;
        /* Tamaño de fuente (puedes ajustarlo según tus necesidades) */
        color: #f8f8f7;
        /* Color de texto (puedes cambiarlo al que prefieras) */
        white-space: pre-line;


        /* Evita que el texto se divida en múltiples líneas */

    }

    .card-container {
        position: relative;
        /* Añadir posición relativa para que las tarjetas internas no afecten */
    }


    /* Estilo para ocultar el texto adicional cuando no está activo */
    .new-card .additional-text {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        /* Agregar una transición suave */


    }

    .new-card.active {
        margin-bottom: 190px;
        /* Ajusta el espacio inferior para dar espacio al texto adicional */
    }

    /* Espaciado entre las tarjetas cuando se muestra el texto adicional */
    .new-card.active+.pushed-card {
        margin-top: 20px;

    }

    /* Estilo para empujar la tarjeta hacia abajo cuando la tarjeta anterior está activa */
    .pushed-card {
        transform: translateY(50px);
        /* Ajustar el desplazamiento vertical */
        transition: transform 0.3s ease;
        /* Agregar una transición suave */
    }


    /* Estilos para mostrar el texto adicional cuando la tarjeta tiene la clase "active" */
    .new-card.active .additional-text {
        max-height: 20px;
        /* Ajustar la altura máxima del texto adicional */
        opacity: 1;
        /* Mostrar el texto con opacidad completa */
    }

    .new-card.active+.new-card {
        margin-top: 40px;
    }

    /* Ajustar posición del texto adicional fuera de la tarjeta */
    .new-card .additional-text {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .new-card.active .additional-text {
        max-height: 200px;
        opacity: 1;
    }

    /* Contenedor para las tarjetas y el texto adicional */
    .cards-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 40px;
        /* Espacio entre las tarjetas y el texto adicional */
    }

    /* Nueva clase para el contenedor del texto adicional */
    .additional-text-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        /* Espacio entre las tarjetas y el texto adicional */
    }

    /* Icono de las tarjetas FAQs */
    /* Estilos comunes para los iconos de las tarjetas FAQs */
    .card-icon-container {
        position: absolute;
        /* Ajusta aquí los valores de left y top para posicionar el icono según tus necesidades */
    }

    /* Estilos específicos para cada icono */
    .icon-1 {
        left: -60px;
        top: -18px;
    }

    .icon-2 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 2 */
        top: -18px;
        /* Ajusta la posición vertical del icono 2 */
    }

    .icon-3 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 3 */
        top: -18px;
        /* Ajusta la posición vertical del icono 3 */
    }

    .icon-4 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 4 */
        top: -18px;
        /* Ajusta la posición vertical del icono 4 */
    }

    .icon-5 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 5 */
        top: -18px;
        /* Ajusta la posición vertical del icono 5 */
    }

    .icon-6 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 6 */
        top: -18px;
        /* Ajusta la posición vertical del icono 6 */
    }

    .new-card {
        position: relative;
        margin-left: 110px;
        /* Ajusta el espaciado entre el icono y la tarjeta */
        width: 600px;
        /* Ajusta el ancho de la tarjeta a 400px (puedes cambiar este valor según tus necesidades) */

    }

    .Text-cardnew {
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins */
        font-weight: bold;
        /* Texto en negritas */
        color: #575756;
        /* Color gris oscuro */
        text-align: center;
        /* Centrado del texto */
        font-size: 7px;
        /* Tamaño fuente */
        margin-left: 20px;
    }

    .Text-cardnewAditional {
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins */
        font-weight: bold;
        /* Texto en negritas */
        color: #575756;
        /* Color gris oscuro */
        font-size: 7px;
        /* Tamaño fuente */
        margin-left: -20px;
        writing-mode: hori-rl;

        display: inline-block;
        /* Asegura que el texto se desplace horizontalmente */
    }

    /* Estilos para el texto "FAQS:" */
    .FAQS-TEXT {
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins */
        font-weight: bold;
        /* Texto en negritas */
        color: #575756;
        /* Color gris oscuro */
        text-align: center;
        /* Centrado del texto */
        margin-top: 90px;
        font-size: 16px;
        margin-bottom: -10px;
    }

    /* Estilos del pie de página */
    .footer {
        background-color: #f2f2f2;
        padding: 30px;
        text-align: center;
        margin-top: 100px;
        display: flex;
        flex-direction: row;
        /* Alinear los elementos en una fila */
        justify-content: center;
        /* Centrar el contenido horizontalmente */
        align-items: center;
        /* Centrar el contenido verticalmente */
    }

    .footer img {
        width: 100px;
        margin-right: 20px;
        /* Espaciado entre el logo y el texto */
    }

    .footer-text {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        font-size: 7px;
        text-align: left;
        /* Alinea el texto a la izquierda */
        line-height: 1.4;
        /* Espaciado entre líneas para mejorar la legibilidad */
    }

    /* Estilos del resto de la página, tal como se mostró anteriormente... */
    .carousel-container {
        position: relative;
        overflow: hidden;
        max-width: 100%;
        width: 100%;
        /* Agregamos este estilo para que el carrusel ocupe todo el ancho */
    }

    .carousel {
        display: flex;
        transition: transform 0.5s ease;
        width: 300%;
        /* Ajustamos el ancho del carrusel para mostrar 3 imágenes */
        height: 160px;
        /* Altura deseada del carrusel */
    }

    .carousel-item {
        flex-shrink: 0;
        width: 33.33%;
        /* Ajustamos el ancho de cada imagen en el carrusel */
    }

    .carousel-item img {
        width: 100%;
        /* Ajustamos el ancho de las imágenes al 100% del contenedor */
        height: 100%;
        /* Ajustamos la altura de las imágenes al 100% del contenedor */
        object-fit: cover;
        /* Redimensionamos las imágenes para que cubran todo el espacio sin distorsión */
    }

    .carousel-indicators {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .carousel-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 5px;
        cursor: pointer;
        border: 2px solid #00A7BB;
        /* Borde de color azul fuerte */
    }

    .carousel-indicator.active {
        background-color: #333;
    }



}




@media only screen and (max-width: 320px) {

    /* Estilos del header */
    header {
        flex-direction: column;
        align-items: center;
        padding: 16px 12px;
    }

    .Homeleft {
        margin-left: 0;
    }

    .logo {
        margin-left: 0;
        margin-bottom: 7px;
    }

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

    /* Estilos de la barra de navegación */
    nav {
        flex-direction: column;
        align-items: center;
        padding: 7px;
    }

    nav a {
        margin-right: 0;
        margin-bottom: 3px;
    }

    /* Estilos para la sección de texto partida en dos */
    .text-section {
        flex-direction: column;
        padding: 21px;
    }

    .text-column {
        margin-right: 0;
        padding: 0 7px;
        margin-bottom: 21px;
    }

    .text-column:nth-child(1) {
        padding-left: 0;
    }

    /* Estilos para el párrafo "Specialist In Fasteners and Castings for The Automotive Industry And Other Industries" */
    .specialist-paragraph {
        font-size: 14px;
    }

    /* Estilos para los puntos naranjas en la segunda columna a partir del segundo párrafo */
    .text-column:nth-child(2) p:not(:first-child)::before {
        font-size: 24px;
        margin-right: 4px;
        padding-right: 2px;
    }


    /* Estilos para el texto "Benefits:" */
    .benefits-text {
        font-size: 3.5vw;
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        text-align: center;
    }

    /* Estilos para los textos principales */
    .heading-text1,
    .heading-text2,
    .heading-text3,
    .heading-text4 {
        font-family: 'Poppins', sans-serif;
        color: #ffffff;
        position: absolute;
        text-align: center;
    }

    /* Tamaños personalizados para cada heading-text */
    .heading-text1 {
        font-size: 2vw;
        top: 6px;
        left: 14%;
        transform: translateX(-50%);
    }

    .heading-text2 {
        font-size: 2vw;
        top: 6px;
        left: 39%;
        transform: translateX(-50%);
    }

    .heading-text3 {
        font-size: 2vw;
        top: 6px;
        left: 63%;
        transform: translateX(-50%);
    }

    .heading-text4 {
        font-size: 2vw;
        top: 7px;
        left: 85%;
        transform: translateX(-50%);
    }

    /* Estilos para el contenedor de la imagen y las letras */
    .arrow-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        /* Permite que los elementos se envuelvan */
        text-align: center;
        position: relative;
    }

    /* Estilo para la línea de flechas */
    .arrow-line {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* Ajustar el ancho de cada heading-text */
    .heading-text1 {
        flex-basis: 25%;
    }

    .heading-text2 {
        flex-basis: 25%;
    }

    .heading-text3 {
        flex-basis: 25%;
    }

    .heading-text4 {
        flex-basis: 25%;
    }

    /* Ajustar el ancho de la línea de flechas */
    .arrow-line {
        max-width: 100%;
        width: 100%;
    }

    .card-container {
        display: flex;
        flex-direction: column;
        /* Cambiamos la dirección a vertical */
        align-items: center;
        /* Centrar las tarjetas horizontalmente */
        /* Espacio entre las tarjetas. Puedes modificar este valor según tus necesidades */

    }

    .card {
        background-color: #ffffff9d;
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        word-wrap: break-word;
        border: none;
        box-shadow: 10px 10px 15px -6px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Estilos para el texto dentro de las tarjetas y el texto editable */
    .card p {
        font-size: 7px;
        line-height: 1.1;
        text-align: center;
    }

    /* Clases para ajustar el tamaño de las tarjetas individualmente */
    .card-1 {
        width: 20px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: -94%;
        margin-top: 10%;
    }

    .card-2 {
        width: 20px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: -39%;
        margin-top: -69%;



    }

    .card-3 {
        width: 20px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: 17%;
        margin-top: -68%;
    }

    .card-4 {
        width: 20px;
        /* Ajustar el ancho según tus necesidades */
        margin-left: 112%;
        margin-top: -59%;
    }

    /* Nueva clase específica para la tarjeta independiente */
    .new-card {
        flex: 1;
        max-width: 90px;
        /* Ajustar el ancho máximo de las tarjetas según tus necesidades */
        height: 3px;
        /* Ajustar la altura deseada de las tarjetas */
        background-color: #ffffff;
        padding: 20px;
        text-align: center;
        border-radius: 0 20px 20px 0;
        /* Esquinas redondas solo en el lado derecho */
        word-wrap: break-word;
        border: none;
        /* Eliminar el borde en todos los lados */
        box-shadow: 10px 10px 12px -9px rgba(0, 0, 0, 0.3);
        /* Sombra solo debajo de las tarjetas */
        display: flex;
        align-items: center;
        position: relative;
        margin-left: 20px;
        margin-right: 141.732px;
        /* Espacio de 5 cm (aproximadamente 141.732px) entre tarjetas */
        margin-bottom: 40px;
        /* Espacio entre tarjetas verticales */
        position: relative;
        /* Agregamos posición relativa para controlar el elemento naranja */


    }

    /* Estilos para el cuadrado naranja de la tarjeta independiente */
    .new-card .orange-square {
        position: absolute;
        bottom: 0px;
        /* Ajustar la posición vertical del cuadro */
        right: -15px;
        /* Ajustar la posición horizontal del cuadro */
        width: 95px;
        height: 40px;
        box-shadow: 10px 1px 25px -1px rgba(0, 0, 0, 0.4);
        /* Sombra solo debajo de las tarjetas */
        background-color: #E6962D;
        border-radius: 10px;
        /* Agregamos bordes redondos */
        z-index: -1;
        /* Enviar el cuadro detrás de la tarjeta */
    }

    /* Estilos para el texto adicional que se muestra fuera de la tarjeta */
    .additional-text {
        /* ... Estilos anteriores ... */
        display: block;
        /* Mostrar el elemento solo en dispositivos móviles */

        position: absolute;
        top: 66px;
        /* Ajustar la distancia vertical desde la tarjeta */

        /* Nuevos estilos modificables */
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins (puedes cambiarla por otra fuente) */
        font-size: 2px;
        /* Tamaño de fuente (puedes ajustarlo según tus necesidades) */
        color: #fff;
        /* Color de texto (puedes cambiarlo al que prefieras) */
        white-space: pre-line;


        /* Evita que el texto se divida en múltiples líneas */

    }

    .card-container {
        position: relative;
        /* Añadir posición relativa para que las tarjetas internas no afecten */
    }


    /* Estilo para ocultar el texto adicional cuando no está activo */
    .new-card .additional-text {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        /* Agregar una transición suave */


    }

    .new-card.active {
        margin-bottom: 185px;
        /* Ajusta el espacio inferior para dar espacio al texto adicional */
    }

    /* Espaciado entre las tarjetas cuando se muestra el texto adicional */
    .new-card.active+.pushed-card {
        margin-top: 20px;

    }

    /* Estilo para empujar la tarjeta hacia abajo cuando la tarjeta anterior está activa */
    .pushed-card {
        transform: translateY(50px);
        /* Ajustar el desplazamiento vertical */
        transition: transform 0.3s ease;
        /* Agregar una transición suave */
    }


    /* Estilos para mostrar el texto adicional cuando la tarjeta tiene la clase "active" */
    .new-card.active .additional-text {
        max-height: 300px;
        /* Ajustar la altura máxima del texto adicional */
        opacity: 1;
        /* Mostrar el texto con opacidad completa */
    }

    .new-card.active+.new-card {
        margin-top: 40px;
    }

    /* Ajustar posición del texto adicional fuera de la tarjeta */
    .new-card .additional-text {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .new-card.active .additional-text {
        max-height: 200px;
        opacity: 1;
    }

    /* Contenedor para las tarjetas y el texto adicional */
    .cards-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 40px;
        /* Espacio entre las tarjetas y el texto adicional */
    }

    /* Nueva clase para el contenedor del texto adicional */
    .additional-text-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        /* Espacio entre las tarjetas y el texto adicional */
    }

    /* Icono de las tarjetas FAQs */
    /* Estilos comunes para los iconos de las tarjetas FAQs */
    .card-icon-container {
        position: absolute;

        /* Ajusta aquí los valores de left y top para posicionar el icono según tus necesidades */
    }

    /* Estilos específicos para cada icono */
    .icon-1 {
        left: -60px;
        top: -12px;



    }

    .icon-2 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 2 */
        top: -19px;
        /* Ajusta la posición vertical del icono 2 */

    }

    .icon-3 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 3 */
        top: -4px;
        /* Ajusta la posición vertical del icono 3 */
    }

    .icon-4 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 4 */
        top: -6px;
        /* Ajusta la posición vertical del icono 4 */
    }

    .icon-5 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 5 */
        top: 2px;
        /* Ajusta la posición vertical del icono 5 */
    }

    .icon-6 {
        left: -60px;
        /* Ajusta la posición horizontal del icono 6 */
        top: -4px;
        /* Ajusta la posición vertical del icono 6 */
    }

    .new-card {
        position: relative;
        margin-left: 110px;
        /* Ajusta el espaciado entre el icono y la tarjeta */
        width: 600px;
        /* Ajusta el ancho de la tarjeta a 400px (puedes cambiar este valor según tus necesidades) */

    }

    .Text-cardnew {
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins */
        font-weight: bold;
        /* Texto en negritas */
        color: #575756;
        /* Color gris oscuro */
        text-align: center;
        /* Centrado del texto */
        font-size: 7px;
        /* Tamaño fuente */
        margin-left: 20px;
    }

    .Text-cardnewAditional {
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins */
        font-weight: bold;
        /* Texto en negritas */
        color: #575756;
        /* Color gris oscuro */
        font-size: 8px;
        /* Tamaño fuente */
        margin-left: -20px;
        writing-mode: hori-rl;

        display: inline-block;
        /* Asegura que el texto se desplace horizontalmente */
    }

    /* Estilos para el texto "FAQS:" */
    .FAQS-TEXT {
        font-family: 'Poppins', sans-serif;
        /* Fuente Poppins */
        font-weight: bold;
        /* Texto en negritas */
        color: #575756;
        /* Color gris oscuro */
        text-align: center;
        /* Centrado del texto */
        margin-top: 60px;
        font-size: 3.5vw;
        margin-bottom: -10px;
    }

    /* Estilos del pie de página */
    .footer {
        background-color: #f2f2f2;
        padding: 30px;
        text-align: center;
        margin-top: 100px;
        display: flex;
        flex-direction: row;
        /* Alinear los elementos en una fila */
        justify-content: center;
        /* Centrar el contenido horizontalmente */
        align-items: center;
        /* Centrar el contenido verticalmente */
    }

    .footer img {
        width: 100px;
        margin-right: 20px;
        /* Espaciado entre el logo y el texto */
    }

    .footer-text {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        font-size: 7px;
        text-align: left;
        /* Alinea el texto a la izquierda */
        line-height: 1.4;
        /* Espaciado entre líneas para mejorar la legibilidad */
    }

    /* Estilos del resto de la página, tal como se mostró anteriormente... */
    .carousel-container {
        position: relative;
        overflow: hidden;
        max-width: 100%;
        width: 100%;
        /* Agregamos este estilo para que el carrusel ocupe todo el ancho */
    }

    .carousel {
        display: flex;
        transition: transform 0.5s ease;
        width: 300%;
        /* Ajustamos el ancho del carrusel para mostrar 3 imágenes */
        height: 150px;
        /* Altura deseada del carrusel */
    }

    .carousel-item {
        flex-shrink: 0;
        width: 33.33%;
        /* Ajustamos el ancho de cada imagen en el carrusel */
    }

    .carousel-item img {
        width: 100%;
        /* Ajustamos el ancho de las imágenes al 100% del contenedor */
        height: 100%;
        /* Ajustamos la altura de las imágenes al 100% del contenedor */
        object-fit: cover;
        /* Redimensionamos las imágenes para que cubran todo el espacio sin distorsión */
    }

    .carousel-indicators {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .carousel-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        margin: 0 5px;
        cursor: pointer;
        border: 2px solid #00A7BB;
        /* Borde de color azul fuerte */
    }

    .carousel-indicator.active {
        background-color: #333;
    }



}