:root {
    --primary-color: #ff3300; /* Un rosso/arancione acceso simile a quello dell'immagine */
    --background-color: #f9f9f9; /* Sfondo bianco */
    --text-color: var(--primary-color);
    --font-family-body: 'Arial', sans-serif; /* Font generico per fallback se Mattone non carica */
}

/* --- Dichiarazione del font "Mattone" --- */
@font-face {
    font-family: 'Mattone'; /* Il nome che darai al font nel tuo CSS */
    src: url('./fonts/Mattone-Regular.woff2') format('woff2'), /* Percorso al tuo file font */
         url('./fonts/Mattone-Regular.woff') format('woff'),
         url('./fonts/Mattone-Regular.ttf') format('truetype'); /* Aggiungi gli altri formati se li hai per compatibilità */
    font-weight: normal; /* O bold, light, a seconda del peso del font che hai */
    font-style: normal;
    font-display: swap; /* Consigliato per migliorare il caricamento del font */
}


html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Mattone', sans-serif; /* Applica Mattone come font principale del body */
    background-color: var(--background-color);
    color: var(--text-color);
    overflow: hidden; /* Per evitare scrollbar indesiderate inizialmente. Potrebbe essere rimosso per About page */
    cursor: url('assets/Cursore1.png'); /* Usa l'immagine Pianeta.png come cursore */
}

/* Specifico per il body della pagina About, se vuoi scroll */
body.about-page-body {
    overflow-y: auto; /* Permetti lo scroll verticale per la pagina About */
}

.container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    padding: 20px 40px; /* Padding su desktop */
    box-sizing: border-box;
    position: relative; /* Per posizionamento assoluto degli elementi interni se necessario */
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: auto; /* Spinge il main-content e il footer verso il centro/fondo */
}

.top-left p {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    /* font-family: 'Mattone', sans-serif; - Già applicato al body */
}

.top-right a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 500;
    /* font-family: 'Mattone', sans-serif; - Già applicato al body */
}

/* Main Content (Logo e elementi grafici) */
.main-content {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Per posizionare gli elementi grafici rispetto a questo contenitore */
    width: 100%;
}

.logo-tutotike-img {
    width: 40vw; /* Dimensione responsiva per l'immagine del logo */
    max-width: 500px; /* Massima larghezza per desktop */
    height: auto;
}

/* Vecchi placeholder grafici rimossi, si useranno immagini se presenti */
/* .graphic-element { display: none; } */

/* Footer */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: auto; /* Spinge il footer in fondo */
}

.bottom-left p {
    margin: 0;
    line-height: 1.2;
    font-size: 1.1em;
    font-weight: 500;
    /* font-family: 'Mattone', sans-serif; - Già applicato al body */
}

.bottom-left a {
    color: var(--text-color);
    text-decoration: none;
    /* font-family: 'Mattone', sans-serif; - Già applicato al body */
}

.bottom-right a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 500;
    /* font-family: 'Mattone', sans-serif; - Già applicato al body */
}

/* --- Stili per la Pagina "About" --- */
.container.about-page {
    height: auto; /* Permetti al container di espandersi in altezza */
    min-height: 100vh; /* Assicura che sia alto almeno quanto la viewport */
    justify-content: flex-start; /* Allinea il contenuto in alto */
}

.main-content.about-content {
    flex-direction: column; /* Contenuto About in colonna */
    justify-content: flex-start;
    align-items: flex-start; /* Allinea il testo a sinistra */
    padding-top: 50px; /* Spazio sotto l'header */
    padding-bottom: 50px; /* Spazio prima del footer */
}

.about-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px;
}

.about-text-left {
    flex: 1;
    margin-right: 50px; /* Spazio tra le due colonne */
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 45%; /* Limita la larghezza del testo */
}

.about-offer {
    flex: 1;
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 45%;
}

.about-offer p {
    margin-bottom: 10px;
    font-weight: bold; /* "What we offer:" è in grassetto nell'immagine */
}

.about-offer ul {
    list-style: none; /* Rimuovi i pallini */
    padding: 0;
    margin: 0;
}

.about-offer li {
    margin-bottom: 5px;
}

.get-in-touch-section {
    margin-top: auto; /* Spinge verso il fondo della main-content */
    width: 100%;
    text-align: left; /* Allinea il testo a sinistra */
}

.get-in-touch-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
}

.get-in-touch-section p {
    margin: 5px 0;
}
.get-in-touch-section a {
    text-decoration: none;
    color: var(--text-color);
}


/* --- Media Queries per la Responsività --- */

/* Per tablet e schermi più piccoli */
@media (max-width: 768px) {
    .container {
        padding: 15px 25px;
    }

    .top-left p,
    .top-right a,
    .bottom-left p,
    .bottom-right a,
    .about-text-left,
    .about-offer,
    .get-in-touch-title,
    .get-in-touch-section p {
        font-size: 0.95em; /* Riduci leggermente la dimensione del font */
    }

    .logo-tutotike-img {
        width: 60vw; /* Aumenta leggermente il logo su schermi medi */
    }

    /* Pagina About */
    .about-section {
        flex-direction: column; /* Impila le colonne About */
        align-items: center;
        text-align: center;
    }
    .about-text-left, .about-offer {
        max-width: 90%; /* Occupa quasi tutta la larghezza */
        margin-right: 0;
        margin-bottom: 20px;
    }
    .about-offer ul {
        text-align: center; /* Centra la lista */
    }
    .get-in-touch-section {
        text-align: center; /* Centra la sezione get in touch */
    }
}

/* Per smartphone */
@media (max-width: 480px) {
    .container {
        padding: 10px 15px;
    }

    .header, .footer {
        flex-direction: column; /* Impila gli elementi verticalmente */
        align-items: center; /* Centra gli elementi */
        text-align: center;
    }

    .top-left, .top-right, .bottom-left, .bottom-right {
        margin-bottom: 10px; /* Spazio tra gli elementi impilati */
    }
    .top-right {
        margin-top: 5px; /* Spazio tra le due linee dell'header */
    }
    .bottom-left {
        margin-top: 15px; /* Spazio tra il footer e il centro */
    }

    .top-left p,
    .top-right a,
    .bottom-left p,
    .bottom-right a,
    .about-text-left,
    .about-offer,
    .get-in-touch-title,
    .get-in-touch-section p {
        font-size: 0.85em; /* Riduci ulteriormente la dimensione del font */
    }

    .logo-tutotike-img {
        width: 80vw; /* Rendi il logo più grande su schermi piccoli */
    }

    /* Pagina About */
    .about-section {
        padding-top: 20px;
        margin-bottom: 20px;
    }
    .about-text-left, .about-offer {
        max-width: 100%;
        margin-bottom: 15px;
    }
    .get-in-touch-section {
        margin-top: 20px;
    }
}