#fh5co-home .text-inner h1{
    color:#3FA52A;
    margin-top: 100px;
}

#first-section{
    padding: 2vw;
    background-color: white;
}

#rounded-white-space-1{
    background-color: white;
}

#first-section h2{
    text-align: center;
    padding:  3vw 1vw 0 1vw;
    font-size: 2.5vw;
}

#fh5co-services{
    padding: 0;
}

.img-icon{
    object-fit: contain;
    width: 6vw;
    height: 6vw;
    margin: 0;
}

#service-container-content{
    height: 40vw;
}

#service-container{
    height: auto;
}

h3{
    text-align: center;
    font-size: 1.8vw;
}

p{
    font-size:1.6vw;
}

#map-container{
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.pin-icon{
    position: absolute;
    width: 2.5vw;
}

#pin-1{
    top:11.6vw;
    left: 47.7vw;
}

#pin-2{
    top:12.3vw;
    left: 48.3vw;
}

#pin-3{
    top:12.6vw;
    left: 49vw;
}

#pin-4{
    top:16.3vw;
    left: 49.8vw;
}

#link-1{
    color:black;
    text-decoration: none;
    cursor: pointer;
}

#link-2{
    color:#3FA52A;
    text-decoration: none;
    cursor: pointer;
}

#link-3{
    color:#E6511D;
    text-decoration: none;
    cursor: pointer;
}

#link-4{
    color:#6F7072;
    text-decoration: none;
    cursor: pointer;
}

#link-1:hover{
    transition: all 0.3s ease;
    color:#BD0625;

}

#link-2:hover{
    transition: all 0.3s ease;
    color:#BD0625;
}

#link-3:hover{
    transition: all 0.3s ease;
    color:#BD0625;
}

#link-4:hover{
    transition: all 0.3s ease;
    color:#BD0625;
}

#mapa{
    width: 38vw;
}

#button-row{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 6vw;
}

#button-row h2{
    color: black;
    background-color: white;
    padding: 2vw;
    border-radius: 2rem;
    transition: all 0.3s ease;
}

#button-row a{
    text-decoration: none;
}

#button-row h2:hover{
    background-color: #E6511D;
    transition: all 0.3s ease;
    color: white;
}

#mobile{
    display: none;
}

#ubicaciones{
    color: black;
}
/* Estilos para el contenedor principal */
.main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    background-color: #f0f2f5; /* Un color de fondo claro */
}

/* Estilos para la sección del mapa (la parte del monitor) */
.map-section {
    flex: 1; /* Ocupa el espacio disponible en la izquierda */
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-right: 20px; /* Espacio entre las dos columnas */
}

/* Estilos para el contenedor de ubicaciones */
.locations-section {
  flex: 1; /* Ocupa el espacio disponible en la derecha */
}

/* Estilos para cada elemento de ubicación */
.location-item {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 15px;
  margin-bottom: 5vw; /* Espacio entre las ubicaciones */
}

.location-icon {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    /* Estilos para el ícono de ubicación, por ejemplo un background-image o un SVG */
}

/* Estilos para el texto de las ubicaciones */
.location-details h3 {
    margin: 0 !important;
    font-size: 1.1em;
    color: #3FA52A;
}

.location-details p {
    margin: 5px 0 0;
    margin-bottom: 1vw;
    font-size:0.9em;
    color: black;
    text-align: center;
}

.icon-map-marker{
    position: absolute;
    right: 34vw;
    font-size: 2vw;
    color: #BD0625;
}

#laptop{
    width: 100%;
}



/* Puedes añadir media queries para que el diseño se adapte a pantallas más pequeñas, apilando las columnas verticalmente */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    .map-section {
        margin-right: 0;
        margin-bottom: 20px;
    }
}

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

    .icon-map-marker{
        right: 75vw;
        font-size: 5vw;
    }

    #fondo{
        height: 100%;
        width: 100%;
        opacity: 0.65;
        object-fit: cover;
        object-position: -40vw;
    }

    #desktop{
        display:none !important;
    }

    #mobile{
        display: block;
    }

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

    }

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

    .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;
    }


}