/* Estilo general para los bloques de servicio */
.services-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
    color: black;
    margin-bottom: 80px;
    cursor: pointer;
}

.service-block {
    width: 30%;
    padding: 20px;
    border: 1px solid #8b00ff78;
    border-radius: 8px;
    box-shadow: 0 0 8px rgb(104, 81, 155);
    background-color: #e8e8e8;
    transition: transform 0.3s ease;
}

.service-block:hover {
    transform: translateY(-5px);
}

/* Estilos de los detalles de servicio */
.service-info {
    display: none;
    /* margin-top: 30px; */
    margin-bottom: 80px;
}

.service-info.active {
    display: block;
    box-shadow: 0px 0px 10px 1px #6f6f6f;
    background: #fff9db;
    color: black;
    padding: 10px;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    width: 580px;
    max-width: 100%;
}

#service1 h5 {
  color: #991313;
}

#service2 h5 {
  color: #186779;
}

#service3 h5 {
  color: #1a661a;
}

#service4 h5 {
  color: #8a6305;
}

#service5 h5 {
  color: purple;
}

#service6 h5 {
  color: #00009b;
}

#service7 h5 {
   color: #4263e8;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .service-block {
        width: 100%; /* Los bloques de servicio ocuparán el 100% del ancho */
    }

    /* Los detalles del servicio se moverán justo debajo del bloque */
    .service-info {
        display: none;
    }
}