* { box-sizing: border-box; margin: 0; padding: 0; }

.carousel-container {
            width: 95%; max-width: 1580px;
            margin: auto;
            overflow: hidden;
            position: relative;
            padding-bottom: 50px; 
        }

        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .service {
            min-width: 50%;
            flex: 0 0 50%;
            text-align: center; padding: 40px;
            position: relative;
        }

        .service img {
            width: 100%;
            height: auto;
        }

        .service h3 {
            color: #002e6e;
            font-size: 18px;
            font-weight: bold;
        }

        .service p {
            color: gray;
            font-size: 14px;
        }

        .controls {
            position: absolute;
            bottom: 0px;
            left: -10px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding:10px;
        }

.controls #next { margin-right: 20px;
        }
.controls #prev { margin-left: 40px;
        }

        .controls button {
            background: white;
            border: 1px solid #ccc;
            cursor: pointer;
            padding: 10px;
            border-radius: 40px;
            font-size: 18px;
            transition: background 0.3s;
        }

        .controls button:hover {
            background: #002d75; color: #ffffff;
        }

@media (max-width: 800px) {
            .service {
                min-width: 100%;
                flex: 0 0 100%; padding: 0; padding-top: 30px;
}
            
            .controls #next { margin-right: -20px;}
             .controls #prev { margin-left: 0px;}
            .carousel-container {
            width: 90%; max-width: 1480px;
            margin: auto;
            overflow: hidden;
            position: relative;
            padding-bottom: 50px; text-align: center;
        }
            
        }

.botoservi{text-align:center;HEIGHT:30px; padding-left: 10px; padding-right: 10px; padding-bottom: 5px; padding-top: 5px; width:220px;border:0; font-size:14PX;color:#002d75;font-weight:400; background-color:#ffffff; border-radius: 100px 100px 100px 100px; -moz-border-radius: 100px 100px 100px 100px; -webkit-border-radius: 100px 100px 100px 100px; cursor:pointer;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; text-decoration: none; border: 2px solid #ececec;}
.botoservi:hover{color:#ffffff; background-color:#002d75; border:2px solid #002d75; }


#tecnologia{ width: 100%; text-align: center;}

#instalaciones{ width: 100%; text-align: center;background:url("../imagenes/s0.jpg") no-repeat center center ;background-size:cover;}

.containerdos {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .installation {
            width: 100%;
            height: 280px;
            background-image: url('../imagenes/i0.jpg'); /* Imagen gris de fondo inicial */
            background-size: cover;
            background-position: center;
            color: black; /* Color del texto negro */
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            text-decoration: none; /* Evita subrayado del link */
            transition: all 1s ease; /* Transición general */
        }

        /* Añadimos la imagen colorida */
        .installation::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0; /* Inicialmente invisible */
            transition: opacity 1s ease; /* Transición de opacidad */
            z-index: 0; /* La imagen está por debajo del texto */
        }

        /* Cambiar la imagen de fondo según el div */
        .installation:nth-child(1)::after {
            background-image: url('../imagenes/i1.jpg');
        }
        .installation:nth-child(2)::after {
            background-image: url('../imagenes/i2.jpg');
        }
        .installation:nth-child(3)::after {
            background-image: url('../imagenes/i3.jpg');
        }
        .installation:nth-child(4)::after {
            background-image: url('../imagenes/i4.jpg');
        }

        /* Efecto de hover */
        .installation:hover {
            background-image: url('../imagenes/i0.jpg'); /* Fondo gris */
        }

        .installation:hover::after {
            opacity: 1; /* Mostrar la imagen colorida */
        }

        /* Texto alineado a la izquierda con un margen de 5% desde la izquierda */


.installation .text-container {
    width: 90%;
    max-width: 1500px;
    text-align: left; /* Asegura que el texto quede alineado a la izquierda */
    position: relative; /* Ya no es absoluto, para que respete el ancho */
    left: auto;
    top: auto;
    transform: none;
}

.installation .text-container {
    width: 90%;
    max-width: 1500px;
    text-align: left;
    position: relative; /* Mantiene su posición dentro de installation */
    z-index: 2; /* Asegura que esté por encima de la imagen */
}

/* Ajustamos la imagen del hover */
.installation::after {
    z-index: 1; /* Se mantiene detrás del texto */
}

        /* Texto grande */
        .installation .text-container .big {
            font-size:160px; /* Ajuste automático del tamaño del texto */
            font-weight: 600;
        }

/* Texto grande */
        .installation .text-container .big2 {
            font-size:80px; /* Ajuste automático del tamaño del texto */
            font-weight: 600;
        }

        /* Texto pequeño */
        .installation .text-container .small {
            font-size: calc(10px + 1.5vw); /* Tamaño más pequeño para los números */
            font-weight: 400;
        }
@media screen and (max-width:1550px)
 { 
.installation .text-container .big2 {font-size:70px;}
}

@media screen and (max-width:1300px)
 { 
.installation .text-container .big2 {font-size:60px;}
}

@media screen and (max-width:1220px)
 { 
.installation .text-container .big {font-size:14vw;}   
}

@media screen and (max-width:1120px)
 { 
.installation .text-container .big2 {font-size:4.7vw;}
}

@media screen and (max-width:820px)
 {
     .installation {height: 200px;} 
}

@media screen and (max-width:520px)
 {
.installation .text-container .big {font-size:12vw;}   
     
}

.elren{ display: block;  }

@media screen and (max-width:820px)
 {
.elren{ display: none;}     
}

 .ball{-moz-animation:spin 1.5s infinite linear;-webkit-animation:spin 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(4px);}
}
@-webkit-keyframes spin{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(4px);}
}
@-o-keyframes spin{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(4px);}
}
@-moz-keyframes spin{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(4px);}
}

 .ball2{-moz-animation:spin2 1.5s infinite linear;-webkit-animation:spin2 1.5s infinite linear;-0-animation:spin2 1.5s infinite linear;animation:spin2 1.5s infinite linear;}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(-4px);}
}
@-webkit-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(-4px);}
}
@-o-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(-4px);}
}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(4px);}
}