/* SECCION DE CARRUSEL */
#carouselExampleCaptions {
    position: relative;
}

#carouselExampleCaptions .carousel-video {
    object-fit: cover;
    width: 100%;
    height: 550px;
}

#carouselExampleCaptions .overlay-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    width: 100%;
    padding: 0 20px;
}

#carouselExampleCaptions .text-left {
    color: white;
    text-align: left;
    margin-left: 150px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 0.1),
        2px 2px 2px rgba(0, 0, 0, 0.15),
        3px 3px 3px rgba(0, 0, 0, 0.2),
        4px 4px 4px rgba(0, 0, 0, 0.25),
        5px 5px 5px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out 0.5s forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#carouselExampleCaptions .image-right {
    text-align: right;
    margin-right: 220px;
}

#carouselExampleCaptions .hover-grow {
    transition: transform 0.3s ease-in-out;
    transform: scale(1.1);
}

#carouselExampleCaptions .text-left h2 {
    font-size: 3.5rem;
    font-weight: 900;
}

#carouselExampleCaptions .text-left h2.sector {
    font-size: 4rem;
    font-weight: 800;
}

#carouselExampleCaptions .text-left p {
    font-size: 2.5rem;
    font-weight: 800;
}

#carouselExampleCaptions .btn-cotizar {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: white;
    font-weight: 800;
    padding: 10px 20px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
    margin-right: 60px;
    border-radius: 30px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

#carouselExampleCaptions .btn-cotizar:hover {
    background-color: #3B98EF;
    color: white;
}

#carouselExampleCaptions .large-image {
    width: 500px;
    height: 700px;
    object-fit: contain;
}

#carouselExampleCaptions .custom-prev,
#carouselExampleCaptions .custom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(59, 152, 239, 0.5);
    border-radius: 5px;
    border: 2px solid white;
    opacity: 1;
    transition: all 0.3s ease-in-out;
}

#carouselExampleCaptions .custom-prev {
    left: 40px;
}

#carouselExampleCaptions .custom-prev-icon {
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23ffffff\' viewBox=\'0 0 16 16\'%3E%3Cpath d=\'M11.5 1.5l-7 7 7 7\'/%3E%3C/svg%3E');
}

#carouselExampleCaptions .custom-next {
    right: 40px;
}

#carouselExampleCaptions .custom-next-icon {
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23ffffff\' viewBox=\'0 0 16 16\'%3E%3Cpath d=\'M4.5 1.5l7 7-7 7\'/%3E%3C/svg%3E');
}

#carouselExampleCaptions .custom-prev:hover,
#carouselExampleCaptions .custom-next:hover {
    background-color: black;
    transition: background-color 0.3s ease-in-out;
}

#carouselExampleCaptions .carousel-indicators button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid white;
    transition: background-color 0.3s ease;
}

#carouselExampleCaptions .carousel-indicators button.active {
    background-color: #3B98EF;
}

#carouselExampleCaptions .carousel-indicators {
    gap: 10px;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    #carouselExampleCaptions .carousel-video {
        height: auto;
        width: 100%;
        object-fit: contain; /* Mostrar el video completo sin recortar */
    }

    #carouselExampleCaptions .text-left {
        margin-left: 10px;
        font-size: 0.9rem;
    }

    #carouselExampleCaptions .text-left h2 {
        font-size: 1.8rem;
    }

    #carouselExampleCaptions .text-left p {
        font-size: 1rem;
    }

    #carouselExampleCaptions .btn-cotizar {
        font-size: 0.9rem;
        padding: 6px 12px;
        margin-right: 10px;
    }

    #carouselExampleCaptions .large-image {
        width: 100%;
        height: auto;
        object-fit: contain; /* Asegura que la imagen mantenga su proporción sin recortes */
    }

    #carouselExampleCaptions .custom-prev,
    #carouselExampleCaptions .custom-next {
        width: 40px;
        height: 40px;
    }

    #carouselExampleCaptions .custom-prev-icon,
    #carouselExampleCaptions .custom-next-icon {
        width: 20px;
        height: 20px;
    }

    #carouselExampleCaptions .carousel-indicators button {
        width: 10px;
        height: 10px;
    }
}






/* SECCION DE SIGUENOS EN NUESTRAS REDES SOCIALES */
.section-two {
    background-color: white; /* Fondo claro */
    padding: 20px 0; /* Reducir el padding vertical para disminuir la altura */
    border: 5px solid transparent; /* Borde transparente inicial */
    border-radius: 10px; /* Bordes redondeados */
    position: relative; /* Necesario para el borde difuminado */
    overflow: visible; /* Mostrar la imagen que sobresale */
    text-align: left; /* Alinear contenido a la izquierda */
    font-family: Arial, sans-serif; /* Cambiar la fuente a Arial */
    justify-content: flex-start; /* Justificar a la izquierda */
    align-items: center;
}

/* Ajuste para evitar línea flotante */
.section-two::before {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    left: -10px; /* Eliminamos bottom para evitar que cause una línea flotante */
    background: linear-gradient(45deg, #3B98EF, #3B98EF, #3B98EF); /* Cambiar el celeste a #3B98EF */
    filter: blur(10px); /* Difuminado */
    z-index: -1; /* Detrás del contenido */
}

.section-two .content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start; /* Alinear el contenido a la izquierda */
    padding-left: 0px; /* Añadir un padding a la izquierda */
}

.section-two .content {
    display: flex;
    justify-content: flex-start; /* Alinear los íconos y texto a la izquierda */
    align-items: center;
    width: 100%;
    max-width: 800px; /* Ajustar el ancho máximo para centrado */
    padding: 0 20px;
}

/* Estilo del texto */
.section-two .floating-title {
    font-size: 20px; /* Tamaño de letra */
    font-family: Arial, sans-serif;
    font-weight: 800; /* Letras más gruesas */
    color: black;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    margin: 0;
    white-space: nowrap; /* Evitar que el texto se divida */
    margin-right: 40px; /* Mantener el espacio entre texto e íconos */
    padding-left: 40px; /* Añadir padding para desplazar el texto a la izquierda */
}

/* Estilo para los iconos de redes sociales */
.section-two .social-icons {
    display: flex;
    gap: 15px; /* Reducir la separación entre los íconos */
    padding-left: 50px; /* Añadir padding a la izquierda para alinear los íconos */
}

.section-two .social-link {
    width: 50px; /* Tamaño de los íconos */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3B98EF; /* Cambiar a #3B98EF */
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
    box-shadow: 0 5px 15px black;
}

.section-two .social-link i {
    color: white;
    font-size: 24px; /* Tamaño del icono */
}

/* Efectos de hover */
.section-two .social-link:hover {
    transform: translateY(-5px) rotate(3deg);
    background-color: black;
    box-shadow: 0 8px 20px rgba(0, 140, 255, 0.6);
}

/* Imagen decorativa flotante con movimiento e inclinada */
.floating-image {
    position: absolute;
    right: 10%; /* Separar más del borde derecho */
    bottom: -100px; /* Ajustar para que la mitad sobresalga en la sección inferior */
    width: 180px; /* Aumentar el tamaño de la imagen */
    z-index: 1; /* Asegurarse de que la imagen esté sobre el contenido */
    opacity: 0.8; /* Un poco de transparencia */
    animation: floating 3s ease-in-out infinite; /* Añadir animación de movimiento */
    transform: rotate(15deg); /* Inclinación hacia la derecha */
}

/* Animación de rebote suave (bouncing) */
@keyframes floating {
    0% {
        transform: translateY(0) rotate(15deg); /* Mantener la inclinación */
    }
    50% {
        transform: translateY(-20px) rotate(15deg); /* Desplazamiento hacia arriba manteniendo la inclinación */
    }
    100% {
        transform: translateY(0) rotate(15deg); /* Volver a la posición inicial con la inclinación */
    }
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    .section-two .content {
        flex-direction: column;
        text-align: center;
        padding-left: 0; /* Quitar padding a la izquierda en pantallas pequeñas */
    }

    .section-two .social-icons {
        margin-top: 20px;
        padding-left: 0; /* Quitar padding a la izquierda en pantallas pequeñas */
    }

    .section-two .floating-title {
        font-size: 16px;
        padding-left: 0; /* Quitar padding a la izquierda en pantallas pequeñas */
    }

    .section-two .social-link {
        width: 40px;
        height: 40px;
    }

    .section-two .social-link i {
        font-size: 18px;
    }

    /* Ocultar la imagen flotante en pantallas pequeñas */
    .floating-image {
        display: none;
    }
}






/* TERCERA SECCION*/
.features-section {
    display: flex;
    justify-content: space-around;
    background-color: #3B98EF; /* Color de fondo de la sección */
    padding: 50px 20px; /* Aumentar el alto con más padding en la parte superior e inferior */
    font-family: Arial, sans-serif; /* Fuente Arial */
}

.feature {
    text-align: center;
    width: 18%;
    padding: 10px;
    border-right: 1px solid #fff; /* Línea blanca divisoria */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical */
    align-items: center; /* Centrado horizontal */
    position: relative; /* Para posicionar el triángulo */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, height 0.3s ease; /* Añadir transición en la altura */
    background-color: #3B98EF; /* Color de fondo inicial */
    height: 200px; /* Altura inicial */
}

.feature:last-child {
    border-right: none; /* Eliminar la línea derecha del último elemento */
}

.feature .icon img {
    width: 60px;
    height: auto;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.4))
            drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.3))
            drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2))
            drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1))
            drop-shadow(5px 5px 0px rgba(0, 0, 0, 0.05));
}

/* Estilo inicial con efecto 3D para el texto */
.feature h3 {
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin: 0;
    font-family: Arial, sans-serif;
    text-shadow: 
        1px 1px 0px rgba(0, 0, 0, 0.4),
        2px 2px 0px rgba(0, 0, 0, 0.3),
        3px 3px 0px rgba(0, 0, 0, 0.2),
        4px 4px 0px rgba(0, 0, 0, 0.1),
        5px 5px 0px rgba(0, 0, 0, 0.05);
    transition: color 0.3s ease, font-weight 0.3s ease, text-shadow 0.3s ease;
}

/* Eliminar efecto 3D en el texto al hacer hover */
.feature:hover h3 {
    color: black; /* Cambia a negro al hacer hover */
    font-weight: 800;
    text-shadow: none; /* Elimina el efecto 3D */
}


/* Efecto al pasar el mouse */
.feature:hover {
    transform: translateY(-10px) scale(1.05); /* Hacer el cuadro más grande */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Sombra elegante */
    background-color: white; /* Fondo blanco al hacer hover */
    height: 200px; /* Aumentar la altura al hacer hover */
    border-right: 3px solid white; /* Hacer la línea divisoria más gruesa al hacer hover */
}

.feature:hover .icon img {
    transform: scale(1.2); /* Agrandar el ícono aún más al hacer hover */
}

.feature:hover h3 {
    color: black; /* Cambiar el color del texto a celeste */
    font-weight:800; /* Hacer las letras más gruesas */
}

/* Hacer la línea divisoria más alta al hacer hover */
.feature:hover {
    border-right: 3px solid white;
}

.feature:hover .icon img {
    filter: brightness(0) saturate(100%) invert(46%) sepia(85%) saturate(1331%) hue-rotate(174deg) brightness(101%) contrast(101%); /* Cambiar el color del ícono a celeste */
}

/* Triángulo negro más pequeño y separado de la esquina superior izquierda */
.feature::before {
    content: "";
    position: absolute;
    top: 10px; /* Separado de la esquina superior */
    left: 10px; /* Separado de la esquina izquierda */
    width: 0;
    height: 0;
    border-right: 20px solid transparent; /* Tamaño más pequeño */
    border-bottom: 20px solid transparent; /* Tamaño más pequeño */
    display: none; /* Ocultar por defecto */
}

/* Mostrar el triángulo negro al hacer hover */
.feature:hover::before {
    border-left: 20px solid #3B98EF; /* Triángulo negro */
    border-top: 20px solid #3B98EF; /* Triángulo negro */
    display: block; /* Mostrar al hacer hover */
}

@media (max-width: 768px) {
    .features-section {
        flex-direction: column;
        align-items: center;
    }

    .feature {
        width: 80%;
        margin-bottom: 20px;
        border-right: none; /* Eliminar la línea divisoria en móviles */
        border-bottom: 1px solid white; /* Línea divisoria en móviles */
    }

    .feature:last-child {
        border-bottom: none; /* Eliminar la línea inferior del último elemento en móviles */
    }
}




  
/* CUARTA SECCION */
.two-column-section {
    display: flex;
    justify-content: space-between;
    padding: 0;
    background: white;
    align-items: stretch;
    height: 70vh;
}

/* Ajuste para las columnas */
.left-column, .right-column {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Estilo para la imagen en la columna izquierda */
.left-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ajuste para la columna derecha */
.right-column {
    text-align: center;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilo para el texto 'MANTARO PERÚ' sin efecto borroso */
/* Ajuste para el texto 'MANTARO PERÚ' */
.right-column h1 {
    font-family: Arial, sans-serif;
    font-size: 3.5rem; /* Tamaño de fuente aumentado */
    font-weight: 900; /* Grosor aumentado */
    text-transform: uppercase;
    color: black; /* Cambiado a color negro */
    margin-bottom: 20px;
}

/* Botones alineados horizontalmente */
.button-group {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.button {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1.2rem;
    font-family: Arial, sans-serif;
    font-weight: 800; /* Grosor aumentado */
    color: white;
    TEXT-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    background: #3B98EF; /* Color celeste */
    border-radius: 50px;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    margin: 0 15px; /* Separación entre los botones */
    animation: buttonMove 2s infinite; /* Efecto de movimiento */
}


/* Efecto hover para los botones */
.button:hover {
    background: black ; /* Un tono más oscuro de celeste */
    transform: scale(1.1);
}

/* Definición de la animación de movimiento */
@keyframes buttonMove {
    0% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
/* Estilo para el texto 'Importadores y Distribuidores' */
.right-column .small-text {
    font-family: Arial, sans-serif;
    font-size: 1.rem; /* Tamaño de fuente ajustado */
    font-weight: 900; /* Grosor aumentado */
    color: #3B98EF; /* Color celeste */
    margin-bottom: 10px;
}
/* Estilo para el texto 'Somos la mejor opción para tus proyectos' */
.right-column .large-text {
    font-family: Arial, sans-serif;
    font-size: 1.3rem; /* Tamaño de fuente ajustado */
    font-weight: 900; /* Grosor aumentado */
    color: #3B98EF; /* Color celeste */
    margin-bottom: 20px;
    animation: moveText 2s infinite; /* Efecto de movimiento */
}

/* Definición de la animación de movimiento */
@keyframes moveText {
    0% { transform: translateX(0); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}


/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .two-column-section {
        flex-direction: column;
        height: auto;
    }

    .left-column, .right-column {
        width: 100%;
    }

    .right-column h1 {
        font-size: 2.5rem;
    }

    .button-group {
        flex-direction: column;
    }

    .button {
        margin: 10px 0;
    }
}





/* QUINTA SECCION */
.image-slider-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 45vh;
    background-color: #3B98EF;
    position: relative;
    overflow: hidden;
}

/* Contenedor del slider */
.slider-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Slider de imágenes */
.image-slider {
    display: flex;
    width: calc(100% * 10 / 5); /* Ancho total considerando las imágenes duplicadas */
    height: 100%;
    animation: slide 12s infinite linear;
}

/* Contenedor de cada imagen */
.image-item {
    width: calc(100% / 10); /* Cada imagen ocupa un décimo del ancho total */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* Estilo para las imágenes */
.image-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Efecto de hover con elevación y sombra */
.image-item:hover img {
    opacity: 0.8;
}

/* Ocultar leyendas */
.caption {
    display: none;
}

/* Animación del slider */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .image-slider-section {
        height: 35vh; /* Reducir la altura en pantallas pequeñas */
    }

    .image-slider {
        width: calc(100% * 2); /* Cambiar el ancho total para mejorar la responsividad */
        animation: slide-small 10s infinite linear; /* Ajustar la duración de la animación */
    }

    .image-item {
        width: calc(100% / 5); /* Mostrar menos imágenes en fila en pantallas pequeñas */
    }

    .image-item img {
        object-fit: cover; /* Ajustar las imágenes para cubrir mejor el contenedor en pantallas pequeñas */
    }
}

/* Animación específica para pantallas pequeñas */
@keyframes slide-small {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}






/* SEXTA SECCION */
/* Estilos generales */
.seccion-dividida {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    height: 140vh;
    column-gap: 40px;
    background: #3B98EF;
}

.texto-izquierda, .imagenes-derecha {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.texto-izquierda {
    width: 40%; 
    text-align: left;
    height: auto;
    margin-right: 40px;
    color: white;
    font-family: Arial, sans-serif;
}

.boton-innovacion {
    background-color: black;
    color: white;
    border: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    padding: 10px 40px;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 20px;
    width: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.5px;
    font-family: 'Arial', sans-serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
}

.texto-izquierda h1 {
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: white;
    font-family: Arial, sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.texto-izquierda p {
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: black;
    font-family: Arial, sans-serif;
}

.texto-izquierda p:last-child {
    margin-bottom: 30px;
}

.imagenes-derecha {
    width: 60%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    height: 100%;
}

.imagenes-derecha img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    animation: elegantSwing 8s ease-in-out infinite;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
}

/* Efecto impresionante de hover */
.imagenes-derecha img:hover {
    transform: scale(1.1); /* Zoom con una ligera rotación */
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.7); /* Aumento de sombra */
}


/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .seccion-dividida {
        flex-direction: column; /* Cambiar a columna en lugar de fila */
        height: auto; /* Ajustar altura para dispositivos móviles */
        padding: 20px;
    }

    .texto-izquierda, .imagenes-derecha {
        width: 100%; /* Hacer que las secciones ocupen todo el ancho */
        margin: 0;
    }

    .texto-izquierda h1 {
        font-size: 2rem; /* Reducir tamaño del título en pantallas pequeñas */
    }

    .texto-izquierda p {
        font-size: 1rem; /* Reducir tamaño del texto */
    }

    .boton-innovacion {
        width: 100%; /* Hacer que el botón ocupe todo el ancho disponible */
        font-size: 0.85rem; /* Reducir el tamaño de fuente del botón */
        padding: 10px 20px;
    }

    .imagenes-derecha {
        grid-template-columns: 1fr; /* Cambiar a una columna */
        grid-gap: 15px;
    }

    .imagenes-derecha img {
        width: 100%; /* Ajustar el ancho de las imágenes para pantallas pequeñas */
    }
}





/* SEPTIMA SECCION  */
/* Estilos generales */
.catalog-section {
    background-image: url('img/tubos fondo.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    height: 70vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    overflow: visible;
    font-family: Arial, sans-serif;
    padding-right: 20px;
}

.catalog-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.catalog-images {
    position: absolute;
    left: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 50%;
    margin-top: -100px;
    padding-left: 20px;
    z-index: 2;
}

.catalog-img {
    width: 250px;
    height: auto;
    border-radius: 40px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
    object-fit: cover;
}

.catalog-img:nth-child(1) {
    transform: rotate(-10deg) translateY(-20px);
    z-index: 3;
}

.catalog-img:nth-child(2) {
    transform: rotate(10deg) translateY(-20px);
    margin-left: -50px;
    z-index: 2;
}

.catalog-img:hover {
    transform: rotate(0deg) translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
}

.catalog-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
    padding: 20px;
    color: white;
    text-align: center;
    margin-right: 50px;
    padding-right: 40px;
}

.catalog-content h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    color: white;
}

.catalog-subtitle {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: white;
}

.catalog-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-acceder {
    background-color: #3B98EF;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 1rem;
    margin-right: 20px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: Arial, sans-serif;
    font-weight: 900;
}

.btn-acceder:active {
    transform: scale(1.1);
}

.btn-acceder:hover {
    background-color: black;
}

.consult-link {
    color: white;
    text-decoration: underline;
    font-size: 1.4rem;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

.consult-link:hover {
    color: #3B98EF;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .catalog-section {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }

    .catalog-images {
        display: none; /* Oculta las imágenes en pantallas pequeñas */
    }

    .catalog-content {
        width: 100%;
        margin-right: 0;
        padding: 10px 20px;
        text-align: center;
    }

    .catalog-content h1 {
        font-size: 1.8rem;
    }

    .catalog-subtitle {
        font-size: 1rem;
    }

    .btn-acceder {
        font-size: 1rem;
        padding: 8px 16px;
    }

    .consult-link {
        font-size: 1.2rem;
    }
}





/*OCTAVA SECCION*/
.industrial-projects {
    background-image: url('img/fondo\ minimalista.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 40px 0;
    color: #ffffff;
    text-align: center;
    position: relative;
}

.industrial-projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.section-header,
.projects-grid {
    position: relative;
    z-index: 2;
}

.section-header {
    margin-bottom: 30px;
}

.icon-link {
    text-decoration: none;
}

.icon-link i {
    font-size: 60px;
    color: white;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.icon-link i:hover {
    color: #00c8ff;
}

.section-header h2 {
    font-size: 36px;
    font-weight: 800;
    margin-top: 0;
    color: white;
    font-family: Arial, sans-serif;
}

.section-subtitle {
    font-size: 18px;
    color: #00c8ff;
    font-family: Arial, sans-serif;
    font-weight: 900;
    margin-top: 10px;
    line-height: 1.5;
}

.projects-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.project-item {
    width: 30%;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    animation: moveImage 3s infinite alternate ease-in-out;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease, box-shadow 0.3s ease;
}

@keyframes moveImage {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

.project-item:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}

.project-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

.project-item:hover img {
    opacity: 0.8;
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .projects-grid {
        flex-direction: column; /* Cambia a columna */
        gap: 15px; /* Reduce el espacio entre elementos */
    }

    .project-item {
        width: 90%; /* Ocupa casi todo el ancho */
    }

    .section-header h2 {
        font-size: 28px; /* Reduce el tamaño del título */
    }

    .section-subtitle {
        font-size: 16px; /* Reduce el tamaño del subtítulo */
    }

    .icon-link i {
        font-size: 50px; /* Reduce el tamaño del ícono */
    }

    .project-item img {
        height: 250px; /* Reduce la altura de la imagen */
    }
}





/* NOVENA SECCION */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.contenedor {
    display: flex;
    height: 65vh;
}

.menu-izquierdo {
    width: 20%;
    background-color: #3B98EF;
    color: white;
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.6), 12px 0 30px rgba(0, 0, 0, 0.3); /* Sombra 3D más notoria */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.menu-izquierdo ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.menu-izquierdo ul li a {
    color: white;
    text-decoration: none;
    font-size: 15px;
    padding: 6px;
    display: block;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-weight: 900;
}

.menu-izquierdo ul li a:hover {
    background-color: transparent;
}

.menu-izquierdo ul li a.activo {
    color: black;
    font-weight: 800;
}

.contenido-derecho {
    width: 80%;
    padding: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
}

.contenido-derecho h6 {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 20px;
    border-radius: 15px;
    background-color: black;
    color: white;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.contenido-derecho h6:hover {
    background-color: #3B98EF;
    color: black;
    transform: scale(1.05);
}

/* Estilos de las tarjetas */
.circulos-contenedor {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

.circulo-contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    animation: fade-in 1s forwards;
}

.circulo {
    width: 220px;
    height: 220px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    border: 4px solid #3B98EF;
    background-color: white;
}

.circulo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease;
    filter: grayscale(20%);
}

.circulo:hover {
    box-shadow: 0 0 20px rgba(59, 152, 239, 0.5);
    border-color: black;
    background-color: rgba(59, 152, 239, 0.2);
    transform: scale(1.1); /* Zoom con una ligera rotación */
}

.circulo:hover img {
    filter: grayscale(0%);
}

.circulo-contenedor p {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    text-align: center;
    font-weight: 800;
}

/* Efecto de desvanecimiento */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media (max-width: 768px) {
    .contenedor {
        flex-direction: column; /* Cambia la disposición a columna */
        height: auto; /* Ajusta la altura para que sea automática */
    }

    .menu-izquierdo {
        width: 100%; /* Ocupa todo el ancho */
        height: auto; /* Ajusta la altura para el contenido */
        padding: 10px 0; /* Reduce el padding */
    }

    .menu-izquierdo ul li a {
        font-size: 14px; /* Reduce el tamaño de fuente */
        padding: 8px; /* Reduce el espacio */
    }

    .contenido-derecho {
        width: 100%; /* Ocupa todo el ancho */
        padding: 15px; /* Reduce el padding */
        text-align: center;
    }

    .contenido-derecho h6 {
        font-size: 18px; /* Reduce el tamaño de la fuente */
        padding: 8px 16px; /* Ajusta el padding */
    }

    .circulos-contenedor {
        flex-direction: column; /* Cambia a columna */
        gap: 15px; /* Añade espacio entre elementos */
        height: auto; /* Ajusta la altura para el contenido */
    }

    .circulo {
        width: 180px; /* Reduce el tamaño de los círculos */
        height: 180px; /* Ajusta la altura proporcionalmente */
    }

    .circulo-contenedor p {
        font-size: 13px; /* Reduce el tamaño de fuente del texto */
    }
}






/* DECIMA SECCION */
.custom-section {
    height: 75vh; /* Ajusta la altura según sea necesario */
}

.row.h-100 {
    height: 100%; /* Asegura que el contenedor "row" ocupe toda la altura */
}

.text-section {
    text-align: left;
    font-family: Arial, sans-serif;
    color: black;
    font-weight: 900;
    padding-left: 30px;
    font-size: 18px;
}

.title-3d {
    font-size: 40px; /* Tamaño un poco más grande */
    font-weight: 900;
    color: white;
    font-family: Arial, sans-serif;
    text-shadow: 3px 3px 4px #333; /* Efecto 3D */
}

/* Estilo para el botón */
.btn-3d {
    display: inline-block;
    font-weight: 800;
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 18px;
    background-color: transparent;
    color: white;
    border: 3px solid white;
    font-family: Arial, sans-serif; /* Fuente Arial */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para efecto 3D */
    transition: all 0.3s ease;
    position: relative;
}

/* Hover para el botón */
.btn-3d:hover {
    background-color: black;
    color: white;
    border: 3px solid black;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); /* Sombra en hover */
}

/* Fondo celeste para la sección de texto */
.bg-light-blue {
    background-color: #3B98EF;
    height: 100%;
}

/* Video en la sección izquierda */
.video-full {
    object-fit: cover; /* Ajusta el video sin perder la resolución */
    height: 100%;
    width: 100%;
}
@media (max-width: 768px) {
    .custom-section {
        height: auto; /* Ajusta la altura automáticamente */

    }

    .text-section {
        padding-left: 15px; /* Reduce el padding lateral */
        font-size: 16px; /* Reduce el tamaño de fuente */
        text-align: center; /* Centra el texto */
    }

    .title-3d {
        font-size: 28px; /* Reduce el tamaño de fuente del título */
        text-align: center; /* Centra el título */
    }

    .btn-3d {
        font-size: 16px; /* Reduce el tamaño del botón */
        padding: 8px 20px; /* Ajusta el padding del botón */
    }

    .row.h-100 {
        flex-direction: column; /* Cambia a disposición en columna */
        height: auto; /* Ajusta la altura automáticamente */
    }

    .bg-light-blue {
        height: auto; /* Ajusta la altura para el contenido */
        padding: 20px 15px; /* Agrega padding en pantallas pequeñas */
    }

    .video-full {
        height: auto; /* Ajusta la altura del video */
        width: 100%; /* Ocupa todo el ancho de la pantalla */
        margin-bottom: 20px; /* Añade espacio entre el video y el texto */
    }
}