/* Stili base per il corpo della pagina */
body, html {
    margin: 0;
    padding: 0;
    height: 100%; /* Fa sì che body e html occupino tutta l'altezza della finestra */
    overflow: hidden; /* Previene scrollbar indesiderate */

    /* Proprietà comuni per l'immagine di sfondo */
    background-size: cover;      /* L'immagine copre tutto lo sfondo, tagliando se necessario */
    background-position: center; /* Centra l'immagine di sfondo */
    background-repeat: no-repeat;/* Evita che l'immagine si ripeta */
    background-attachment: fixed;/* L'immagine rimane fissa anche se la pagina scorre */
}

/* --- REGOLE DI DEFAULT (NON IN MEDIA QUERY): --- */
/* Questa sarà l'immagine di sfondo predefinita (es. per desktop o orientamento orizzontale) */
body {
    background-image: url('Land_page_Oriz_no_gif.png'); /* Carica l'immagine orizzontale di default */
}


/* --- MEDIA QUERY: Per schermi in orientamento VERTICALE (portrait) --- */
@media screen and (orientation: portrait) {
    body {
        background-image: url('Land_page_Vert_no_gif2.png'); /* Se in verticale, carica l'immagine verticale */
    }
}

/* --- MEDIA QUERY: Per schermi in orientamento ORIZZONTALE (landscape) --- */
/* Questo media query assicura che l'immagine orizzontale sia usata esplicitamente
   anche quando un dispositivo mobile viene ruotato in orizzontale.
   Potrebbe non essere strettamente necessario se la regola di default è 'landscape'
   e non hai altre media query che interferiscono, ma è più esplicito. */
@media screen and (orientation: landscape) {
    body {
        background-image: url('Land_page_Oriz_no_gif.png'); /* Se in orizzontale, carica l'immagine orizzontale */
    }
}

/* --- OPZIONALE: MEDIA QUERY COMBINATE PER UN CONTROLLO PIÙ FINE --- */
/* Se vuoi l'immagine verticale SOLO su schermi piccoli (es. telefoni) in verticale: */
@media screen and (max-width: 768px) and (orientation: portrait) {
    body {
        background-image: url('Land_page_Vert_no_gif2.png');
    }
}

/* E l'orizzontale per tutto il resto (desktop e schermi più grandi, o qualsiasi orientamento landscape) */
@media screen and (min-width: 769px), screen and (orientation: landscape) {
    body {
        background-image: url('Land_page_Oriz_no_gif.png');
    }
}

/* --- STILI PER LA GIF --- */

/* Contenitore della GIF per facilitare il posizionamento */
.gif-container {
    position: absolute; /* O 'fixed' se vuoi che resti sempre visibile anche scorrendo */
    top: 38%;           /* Inizia dal 50% dall'alto */
    left: 50%;          /* Inizia dal 50% da sinistra */
    transform: translate(-50%, -50%); /* Centra perfettamente la GIF */
    z-index: 5;         /* Assicura che sia sopra l'immagine di sfondo (body) ma sotto il form (z-index: 10) */
    width: 600px;       /* Larghezza desiderata della GIF */
    max-width: 80%;     /* Assicura che non sia troppo grande su schermi piccoli */
    height: auto;       /* L'altezza si adatta per mantenere le proporzioni */
    overflow: hidden;   /* Nasconde parti se l'immagine fosse troppo grande */
}

.gif-overlay {
    display: block;     /* Rimuove eventuali spazi bianchi extra */
    width: 100%;        /* La GIF occupa il 100% della larghezza del suo contenitore */
    height: auto;       /* L'altezza si adatta per mantenere le proporzioni */
    object-fit: contain; /* Assicura che l'intera GIF sia visibile senza tagli */
}

 /* Media Query per l'ORIENTAMENTO ORIZZONTALE (Landscape) sui telefoni */
@media screen and (max-width: 850px) and (orientation: landscape) {
    .gif-container {
        /* Riduci la dimensione, usando un valore più piccolo, per lasciare spazio in larghezza */
        width: 40%; /* Esempio: occupa solo il 40% della larghezza della finestra */
        
        /* Aumenta il z-index se necessario per sovrapporre il form */
        z-index: 10;
        
        /* Regola la posizione: potresti volerla leggermente spostata a sinistra */
        top: 40%;
        left: 50%; /* Spostala al 30% da sinistra per non collidere con il form a destra */
        transform: translate(-50%, -50%);
    }
    
/* Esempio di media query per schermi stretti (cellulare) */
@media screen and (max-width: 600px)and (orientation: portrait) { 
    
    .gif-container {
        /* Aumenta la dimensione */
        width: 90%; /* Prova il 90% della larghezza della finestra */
        
        top: 10%; /* Regola la posizione verticale */
        left: 50%;
        transform: translate(-50%, -50%); /* Essenziale per il centraggio */
    }

   

    
}

    
}