:root {
    --primary: #2E7D32;
    --secondary: #FF8F00;
    --light: #F5F5F5;
    --dark: #212121;
    --accent: #5D4037;
    --white: #FFFFFF;
    --header-bg: #F7E7CE;
    --pearl: #FDEEF4;
    --ivory: #FFFFF0;
    --lavender: #E6E6FA;
    --powder-blue: #B0E0E6;
    --pale-silver: #C9C0BB;
    --mint-cream: #F5FFFA;
    --verde-collinare: #5A8F63;
    --verde-collinare-hover: #456d4b;
    --blu-adriatico: #4A6FA5;
    --beige-pietra: #EDE6D6;
    --terracotta-borgo: #C66A4D;
    --grigio-roccia: #6F6F6F;
    --transition: all 0.3s ease;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 2px 10px rgba(0, 0, 0, 0.301);
    --footer: #2e2e2e;
}

/* Features */
.servizi-cittadinanza-container {
    padding: 40px 0;
    background-color: var(--light);
}

.servizi-features p, .servizi-features li {
    font-size: 1.2rem;
}

.servizi-features h3 {
    text-align: left;
}

.servizi {
    background-color: var(--light);
}

.about-content {
    display: flex;
    gap: 40px;
    padding: 20px;
    line-height: 1.8;
}

.about-content p {
    font-size: 1.1rem;
}

.servizi-title {
    font-size: 1.5rem;
    text-align: center;
}

.services-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    /* definisce il numero e la larghezza delle colonne della griglia.
- 1fr indica una frazione dello spazio disponibile: qui ne abbiamo due, per due colonne di uguale ampiezza.
- Se lo schermo si riduce, le colonne si rimpiccioliscono in egual misura.
Posso combinare unità diverse, per esempio 2fr 1fr per una colonna larga il doppio dell’altra, o auto per una colonna che si adatta al contenuto.
 */
    margin: 20px;
    text-align: justify;
}

.cittadinanza-description {
    padding: 20px 60px;
    font-size: 1.2rem;
    text-align: justify;
    font-style: italic;
}

.line {
    border: 2px solid var(--verde-collinare);
    width: 80px;
    margin: auto;
    margin-bottom: 20px;
}

.img-turista {
    flex: 1;
    max-width: 100%;
    object-fit: cover;
    max-height: 700px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    aspect-ratio: 14 / 16;
    transition: transform 0.5s;
}

.img-turista:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-strong);
}

/* MEDIA QUERY PER DISPOSITIVI MOBILI */
/* Quando lo schermo è largo 1260px o meno */
@media (max-width: 1260px) {
    .about-content {
        flex-direction: column;
    }

    .servizi-card1, .servizi-card2 {
        flex-direction: column;
    }
}

/* Turismo */
.servizi-features-container {
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    max-width: 1400px;
    gap: 30px;
}

/* Stili base per le card */
.servizi-card1, .servizi-card2 {
    display: flex;
    line-height: 1.8;
}

.servizi-card1 h3, .servizi-card2 h3 {
    font-size: 1.5rem;
}

.img-accompagnamento {
    flex: 1;
    max-width: 100%;
    margin: 10px;
    object-fit: cover;
    max-height: 500px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 13;
    transition: transform 0.5s;
}

.img-accompagnamento:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-strong);
}

.img-integrazione {
    flex: 1;
    max-width: 100%;
    margin: 10px;
    object-fit: cover;
    max-height: 500px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 13;
    transition: transform 0.5s;
}

.img-integrazione:hover {
    transform: scale(1.01);
    box-shadow: var(--shadow-strong);
}

.servizi-card-text {
    margin: 0;
    padding: 30px 20px;
    text-align: justify;
}

.servizi-card-text ul {
    margin-bottom: 20px;
    padding: 1.3rem;
}

.servizi-card1 ul, .servizi-card2 ul {
    list-style-type: none;
}

.servizi-card1 ul li::before, .servizi-card2 ul li::before {
  content: "⭐";
  margin-right: 8px;
}

.servizi-card-text a {
    border: 1px solid var(--verde-collinare);
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: var(--grigio-roccia);
    font-weight: bold;
    transition: all 0.3s ease;
}

.servizi-card-text a:hover {
    background-color: var(--verde-collinare-hover);
    color: var(--light);
}

.services-grid ul {
    list-style-type: none;
}

.services-grid ul li::before {
  content: "⭐";
  margin-right: 8px;
}


/* MEDIA QUERIES PER LA RESPONSIVITÀ */
/* Tablet - da 768px a 1024px */
@media (max-width: 1024px) {
    .servizi-features-container {
        gap: 15px;
        padding: 0 15px;
    }

    .servizi-card-text {
        padding: 25px 15px;
        text-align: justify;
    }
}

/* Tablet piccoli e smartphone grandi - da 480px a 768px */
@media (max-width: 768px) {
    .servizi-features-container {
        flex-direction: column;
        /* Stack verticale */
        align-items: center;
        /* Centra le card */
        gap: 20px;
        padding: 0 20px;
    }

    .servizi-card-text {
        padding: 20px 15px;
        text-align: justify;
        /* Cambia l'allineamento del testo */
    }

    .servizi-card-text h3 {
        font-size: 1.2em;
        /* Riduci la dimensione del titolo */
        margin-bottom: 15px;
    }

    .servizi-card-text ul {
        font-size: 0.9em;
        /* Riduci leggermente la dimensione del testo */
        line-height: 1.5;
    }
}

/* Smartphone piccoli - fino a 480px */
@media (max-width: 480px) {
    .servizi-features-container {
        padding: 0 10px;
        gap: 15px;
    }

    .servizi-card-text {
        padding: 15px 10px;
        text-align: justify;
    }

    .servizi-card-text h3 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }

    .servizi-card-text ul {
        font-size: 0.85em;
        margin-bottom: 15px;
    }

    .servizi-card-text a {
        padding: 12px 8px;
        font-size: 0.9em;
    }

    #cittadinanza {
        font-size: 1.5rem;
        padding: 10px;
    }
}