/* Stili di base per tutto il corpo della pagina */
:root {
  --primary-color: #36454F; /* Nuovo colore primario: grigio scuro dal logo */
  --secondary-color: #ff7f00; /* Manteniamo l'arancione per gli accenti */
  --light-bg-color: #f0f4f8; /* Un grigio-azzurro molto chiaro per lo sfondo generale */
  --text-color: #444; /* Grigio scuro per il testo normale */
  --poppins-font: 'Poppins', sans-serif;
  --lato-font: 'Lato', sans-serif;
}

body {
  font-family: var(--lato-font);
  margin: 0;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--light-bg-color);
}

h1, h2, h3, h4 {
  font-family: var(--poppins-font);
}

.logo img {
    height: 150px; /* Imposta l'altezza del logo, puoi modificarla */
    max-width: 100%;
    vertical-align: middle; /* Allinea l'immagine verticalmente */
}

/* Container per centrare il contenuto e dare respiro */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Header e navigazione */
header {
    background: var(--primary-color);
    color: white;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex; /* Mantiene il flexbox per allineare logo e nav */
    justify-content: space-between; /* Spinge logo a sinistra e nav a destra */
    align-items: center; /* Centra verticalmente */
    padding: 10px 20px; /* Aggiunge padding laterale */
}

/* Sezione Hero (la parte principale) */
.hero {
    background: var(--primary-color); /* Ora usa il colore primario del logo */
    color: white;
    text-align: center;
    padding: 5px 20px;
}

.hero h2 {
    font-size: 3em;
    color: white; /* Il testo deve essere bianco sul gradiente */
    margin-bottom: 20px;
}

.cta-button {
    background: var(--secondary-color);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px; /* Bottone più arrotondato */
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Aggiunge un'animazione */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    background: #e66d00;
    transform: translateY(-3px); /* Effetto leggero al passaggio del mouse */
}
/* Sezione Features */
/* Sezione Features con immagine di sfondo */
.features {
    padding: 60px 0;
    text-align: center;
    background-image: url('../background.jpg'); /* Inserisci il percorso al tuo file */
    background-size: cover; /* Assicura che l'immagine copra tutta l'area */
    background-position: center; /* Centra l'immagine */
    background-repeat: no-repeat; /* Evita che l'immagine si ripeta */
}

.feature-item {
    flex: 1 1 300px;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombra più pronunciata */
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px); /* Effetto di sollevamento al passaggio del mouse */
}

.feature-item h4 {
    color: var(--primary-color);
    font-size: 1.5em;
}

/* Footer */
footer {
    background: var(--primary-color);
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 25px 0;
}

/* Media query per schermi più grandi */
@media (min-width: 768px) {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center; /* Allinea il menu a destra */
        flex-wrap: wrap;
    }

    nav li {
        margin: 0 15px;
    }

    nav a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: block;
        padding: 10px 15px; /* Aumenta l'area cliccabile */
        transition: color 0.3s ease;
    }

    nav a:hover {
        color: var(--secondary-color);
    }

    .container {
        padding: 10px; /* Aggiunge padding laterale su schermi più grandi */
    }
}

/* Stile per il contenitore a due colonne */
.split-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 5%;
    gap: 40px; 
    align-items: stretch;
}

---

/* Stile per la colonna di sinistra */
.left-side {
    /* Ora, il left-side è un contenitore Flexbox */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra il titolo orizzontalmente */
    gap: 20px;
}

/* Stile per la colonna di destra */
.right-side {
    /* La chiave è qui: usa Flexbox */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra il titolo orizzontalmente */
    gap: 20px;
}

/* Stile per il nuovo riquadro a destra */
.new-feature-item {
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Fai in modo che il box si allunghi per tutta l'altezza disponibile */
    flex-grow: 1;
    display: flex; /* Utilizza flex per allineare il contenuto interno */
    flex-direction: column;
    justify-content: space-between; /* Sposta il pulsante in fondo */
}

.new-feature-item h4 {
    color: var(--primary-color);
    font-size: 1.5em;
}

.new-feature-item:hover {
    transform: translateY(-5px); /* Effetto di sollevamento al passaggio del mouse */
}