#fh5co-services{
    background-color: white;
 }

 #fh5co-services{
    height: 45vw;
 }

 #fh5co-services .row{
    display: flex;
    justify-content: center;

}

.row h2{
    padding: 2vw 4vw 2vw 4vw;
    color:white
}

#titulo-mapa{
    color:#BD0625;
}

#main-container{
    position: relative;
}

#main-container img{
    width: 37vw;
    position: absolute;
    padding-bottom: 2vw;
}

.area {
    position: relative; /* Importante para que los puntos se posicionen dentro de ellos */
    border-radius: 100%;
    width: 10vw;
    height: 10vw;
}

#area-1 {
    background-color: rgba(189, 6, 37, 0.5);
    z-index: 5;
    top: 9.2vw;
    right: 0vw;
    left:6.4vw;
    border: #BD0625 solid 0.2vw;
}

#area-2 {
    background-color: rgba(63, 165, 42, 0.5);
    z-index: 2;
    top: 15vw;
    right: 0vw;
    left:4.7vw;
    border: #3FA52A solid 0.2vw;
}

/* Estilos de los puntos centrados */
#point-1, #point-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1vw; /* Un tamaño más pequeño para que parezca un punto */
    height: 1vw;
    border-radius: 50%; /* Para que sea circular */
}

#point-1 {
    background-color: #BD0625;
    z-index: 2;
}

#point-2 {
    background-color: #3FA52A;
    z-index: 3; /* Asegúrate de que estén por encima de #area-2 si es necesario */
}

.info{
    position: absolute;
}

.info p{
    margin: 0;
    font-size: 1.6vw;
}

.info h3{
    margin-bottom: 1vw;
    font-size: 2.2vw;
}

#info-1{
    top:14vw;
    left:10vw;
    color:#BD0625;
}

#info-2{
    top:6vw;
    right: 7vw;
    color:#3FA52A;
}

#info-2 h3{
    color:#3FA52A;
}

.arrows-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* Permite hacer clic a través del SVG si hay elementos debajo */
}

#fh5co-services{
    background-color: white !important;
}

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

     #fh5co-services{
        height: 130vw;
     }

    #fh5co-home .text-inner h1#titulo-infra.titulo-infraestructura {
        font-size: 8.8vw !important;

    }

    .row{
        margin-right: 0;
        margin-left: 0;
    }

    .row h2{
        text-align: center;
    }

    .col-md-4{
        padding: 0 !important;
    }

    #main-container img{
        width: 80vw;
    }

    .info h3{
        font-size: 6vw;
    }

    .info p{
        font-size: 3vw;
    }

    #info-1{
        top: 50vw;
        left: 10vw;
    }

    #info-2{
        top: 70vw;
        left: 10vw;
    }

    h3{
        margin-bottom: 0 !important;
    }



    .area {
    position: relative; /* Importante para que los puntos se posicionen dentro de ellos */
    border-radius: 100%;
    width: 22vw;
    height: 22vw;
    }

    #area-1 {
        background-color: rgba(189, 6, 37, 0.5);
        z-index: 5;
        top: 20vw;
        right: 0vw;
        left:13.8vw;
        border: #BD0625 solid 0.2vw;
    }

    #area-2 {
        background-color: rgba(63, 165, 42, 0.5);
        z-index: 2;
        top: 32.2vw;
        right: 0vw;
        left:10vw;
        border: #3FA52A solid 0.2vw;
    }

    /* Estilos de los puntos centrados */
    #point-1, #point-2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1.5vw; /* Un tamaño más pequeño para que parezca un punto */
        height: 1.5vw;
        border-radius: 50%; /* Para que sea circular */
    }

    #point-1 {
        background-color: #BD0625;
        z-index: 2;
    }

    #point-2 {
        background-color: #3FA52A;
        z-index: 3; /* Asegúrate de que estén por encima de #area-2 si es necesario */
    }

    .arrows-svg{
        display: none;
    }

}