#fondo{
    opacity: 0.90;
}

#fh5co-services{
    background-color: #494949;
    text-align: center;
    position: relative;
    padding: 0;
    padding-bottom: 4vh;
}

#fh5co-services h2{
    color:#3FA52A;
    padding: 5vw;
}

#fh5co-testimony{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 20vw;
}

.carousel-container {
    width: 1100px; /* Ancho para mostrar 3 imágenes de 300px + espacio */
    height: 220px;
    overflow: hidden;
    position: relative;
    border-radius: 40%;
}

.carousel-track {
    display: flex;
    transition: transform 1s ease-in-out; /* Transición suave entre slides */
    animation: scrollCarousel 30s infinite linear; /* 10s por slide * 3 slides = 30s total */
}

.carousel-slide {
    min-width: 100%; /* Cada slide ocupa el 100% del ancho del contenedor */
    display: flex;
    justify-content: space-around; /* Distribuye las imágenes con espacio entre ellas */
    align-items: center;
    padding: 10px 0;
    box-sizing: border-box; /* Incluir padding en el ancho */
}

.carousel-slide img {
    width: 300px; /* Ancho de cada imagen */
    height: 200px; /* Alto de cada imagen */
    object-fit: contain; /* Asegura que la imagen cubra el área sin distorsionarse */
    border-radius: 8px;
    background-color: white;
    margin: 0;
}

/* Animación para el desplazamiento automático */
@keyframes scrollCarousel {
    0% { transform: translateX(0); }
    33.33% { transform: translateX(-100%); } /* Desplaza al segundo conjunto de imágenes */
    66.66% { transform: translateX(-200%); } /* Desplaza al tercer conjunto de imágenes */
    100% { transform: translateX(0); } /* Vuelve al inicio para un ciclo continuo */
}

#fh5co-explore{
    background-color: #494949;
    padding: 10vw 0 4vw 0;
    text-align: center;
    position: relative;

}

/* --- Nuevas reglas para el carrusel de alianzas --- */

#fh5co-explore .carousel-container {
    height: auto;
    /* Ajustar el ancho para que quepan todos los elementos y el duplicado */
    width: 100%;
    border-radius: 0;
}

#fh5co-explore .carousel-slide {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    margin-left: 20vw;
    box-sizing: border-box;
    /* Ajusta este valor para que quepan tus 4 imágenes. 
       min-width: 100% es si tienes 1 imagen por slide. 
       Si tienes varias, es mejor no usarlo aquí y dejar que el ancho se adapte.
    */
}

#fh5co-explore .carousel-slide img {
    width: auto; 
    height: 12vw; 
    padding: 4vw;
    margin: 1vw;
    background-color: white;
    border-radius: 1rem;
    object-fit: cover;
}

#alianzas-carousel-track {
    /* Aquí se ajusta la animación. 
       El 50% es la clave, ya que el track ahora es 200% del ancho del contenedor.
    */
    animation: scrollAlianzas 30s infinite linear;
}

@keyframes scrollAlianzas {
    0% { transform: translateX(-70%); }
    75%{ transform: translate(-15%)}
    100% { transform: translateX(-70%); } /* Vuelve al inicio para un ciclo continuo */

}

#last-image{
    padding: 0 2vw 0 2vw !important;
}

/* --- Fin de las nuevas reglas --- */

#rounded-white-space-1{
    background-color: white;
    position: absolute;
    bottom: 0;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#rounded-white-space-2{
    background-color: white;
    position: absolute;
    top: 0;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#MaxGNV{
    padding-top: 2vw !important;
    padding-bottom: 2vw !important;
    padding-left: 6vw !important;
    padding-right: 6vw !important;
}

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

    #desktop{
        display:none !important;
    }

    #mobile{
        display: block;
    }

    #fh5co-home .text-inner h1{
        font-size: 11vw;

    }

    .row{
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 6vw;
    }

    .col-md-4{
        
    }

    #first-section h2{
        font-size: 8vw;
    }

    #service-container{
        height: 340vw !important;
    }

    #service-container-content{
        height: 270vw;
        text-align: center;
    }

    #service-container-content i{
        font-size: 15vw;
    }

    #service-container-content .row{
        margin-bottom: 4vw;
    }

    #service-container-content h3{
        margin: 0 !important;
    }

    .img-icon{
        width: 15vw;
        height: auto;
    }

    h3{
        font-size: 6vw;
    }

    #mapa{
        width: 90vw;
    }

    .pin-icon{
        width: 6vw;
    }

    #pin-1{
        top: 27vw;
    }

    #pin-2{
        top: 29vw;
    }

    #pin-3{
        top: 29vw;
        left: 50vw;
    }

    #pin-4{
        top: 38vw;
        left: 52vw;
    }

    #service-container-content p{
        font-size: 4.6vw;
    }

    #service-container-content #subtitle-1 {
        margin-bottom: 12vw !important;
    }

    #fh5co-testimony{
        height: 40vw;
    }

    .carousel-slide{
        margin-right: 47vw;
    }


    .carousel-slide img {
    width: 50vw; /* Ancho de cada imagen */
    height: 45vw; /* Alto de cada imagen */
    object-fit: contain; /* Asegura que la imagen cubra el área sin distorsionarse */
    border-radius: 8px;
    background-color: white;
    margin: 0;
    padding: 2vw;
}

    /* Animación para el desplazamiento automático */
    @keyframes scrollCarousel {
        0% { transform: translateX(0); }
        33.33% { transform: translateX(-150%); } /* Desplaza al segundo conjunto de imágenes */
        66.66% { transform: translateX(-360%); } /* Desplaza al tercer conjunto de imágenes */
        100% { transform: translateX(0); } /* Vuelve al inicio para un ciclo continuo */
    }

    #fh5co-explore{
        padding: 30vw 0 4vw 0;
        
    }

    #fh5co-explore .carousel-slide img {
        width: 45vw;
        height: 20vw;
    }

    #fh5co-explore .carousel-slide {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px 0;
        margin-left: 20vw;
        box-sizing: border-box;
        /* Ajusta este valor para que quepan tus 4 imágenes. 
        min-width: 100% es si tienes 1 imagen por slide. 
        Si tienes varias, es mejor no usarlo aquí y dejar que el ancho se adapte.
        */
    }

    #fh5co-explore .carousel-slide img {
        width: auto; 
        height: 17vw; 
        padding: 4vw;
        margin: 1vw;
        background-color: white;
        border-radius: 1rem;
        object-fit: cover;
    }

    @keyframes scrollAlianzas {
        0% { transform: translateX(-155%); }
        60%{ transform: translate(0%)}
        100% { transform: translateX(-155%); } /* Vuelve al inicio para un ciclo continuo */

    }
    #alianzas-carousel-track {
    /* Aquí se ajusta la animación. 
       El 50% es la clave, ya que el track ahora es 200% del ancho del contenedor.
    */
    animation: scrollAlianzas 30s infinite linear;
}

}