.service-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 15px;
    border: 2px solid var(--cultured);
    border-radius: var(--border-radius-md);
}

/* Stil pentru fiecare element de serviciu */
.service-item {
    display: flex;
    align-items: center; /* Alinierea verticală a iconiței și titlului */
    text-align: left; /* Aliniere text stânga */
    flex-direction: row; /* Așezarea iconiței și titlului pe aceeași linie */
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    flex: 1 1 20%; /* Permite elementelor să se adapteze */
    max-width: 150px; /* Lățime maximă pentru elementele de serviciu */
}

/* Stilizare pentru iconițe */
.service-icon {
    font-size: 2rem; /* Dimensiune mai mare pentru iconițe */
    color: var(--primary-color);
    margin-right: 10px; /* Spațiu între iconiță și titlu */
}

.service-title {
    font-size: 1rem;
    font-weight: bold;
}

/* Descrierea serviciului */
.service-desc {
    font-size: 0.7rem;
    color: var(--secondary-color);
}

/* Stilizare responsivă pentru mobil */
@media (max-width: 768px) {
    .service-container {
        padding: 15px 10px; /* Ajustăm padding-ul pentru mobil */
    }

    .service-item {
        flex: 1 1 20%; /* Fiecare element va ocupa 20% din lățimea containerului */
        max-width: none; /* Eliminăm lățimea maximă pentru a permite adaptarea completă */
    }

    .service-icon {
        font-size: 1.5rem; /* Dimensiune mai mică pentru iconițe */
    }

    .service-title {
        font-size: 1rem; /* Dimensiune mai mică pentru titluri */
    }

    .service-desc {
        font-size: 0.8rem; /* Dimensiune mai mică pentru descriere */
    }
}