/* Colori principali */
        :root {
            --blu-enpa: #2EA0D3;
            --bianco: #FFFFFF;
            --blu-notte: #153A5B;
            --grigio-chiaro: #EAECEF;
            --arancio-hover: #FF8C42;
            --verde-scuro: #006400;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Stile generale */
        body {
            background-color: var(--grigio-chiaro);
            color: var(--blu-notte);
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
        }

        /* ======================================================================================= */
        /* ===                                       NAVBAR                                    === */
        /* ======================================================================================= */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #153A5B; /* Colore aggiornato */
            padding: 15px 20px;
        }

        /* Contenitore Logo + Testo */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        /* Testo accanto al logo */
        .logo-text {
            text-align: left;
            font-size: 18px;
            line-height: 1.2;
            font-weight: bold;
            color: #EAE0D5; /* Beige caldo per migliorare la leggibilità */
        }

        .hamburger {
            cursor: pointer;
            flex-direction: column;
            gap: 5px;
            display: none; /* Ora è nascosto quando lo schermo è grande */
        }

        .hamburger div {
            width: 30px;
            height: 4px;
            background-color: white;
            transition: transform 0.3s ease-in-out;
        }

        .logo {
            text-align: right;
        }

        .logo img {
            height: 50px;
        }

        .nav-links {
            list-style: none;
            display: flex;
            justify-content: center;
            flex-grow: 1;
        }

        .nav-links li {
            margin: 0 15px;
        }

        .nav-links a {
            text-decoration: none;
            color: white;
            font-size: 18px;
            align: center;
            transition: color 0.3s ease-in-out;
            position: relative;
        }

        .nav-links a[href="donazioni.html"] {
        color: red;
        font-weight: bold;
        }

        .nav-links a:hover {
            color: #ffcc00;
        }

        /* Effetto animato del pulsante */
        .nav-links a::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #ffcc00;
            bottom: -3px;
            left: 0;
            transform: scaleX(0);
            transition: transform 0.3s ease-in-out;
        }

        .nav-links a:hover::before {
            transform: scaleX(1);
        }

        .social-icons {
            display: flex;
            gap: 15px;
        /*  margin-right: 100px; */ /* Aumentato lo spazio dal fondo della pagina */
        }

        .social-icon {
            width: 30px;
            height: 30px;
            display: block;
            background-size: cover;
            transition: transform 0.3s ease-in-out;
        }

        /* Personalizzazione delle icone social */
        .ig {
            background-image: url('../img/instagram.png');
        }

        .fb {
            background-image: url('../img/facebook.png');
        }

        .social-icon:hover {
            transform: scale(1.2);
        }

        /* Animazione del pulsante hamburger */
        .hamburger.active div:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        .hamburger.active div:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active div:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

        /* ======================================================================================= */
        /* ===                                 FINE NAVBAR                                     === */
        /* ======================================================================================= */

        /* ======================================================================================= */
        /* ===                                 TOP BUTTON                                      === */
        /* ======================================================================================= */

        /* Pulsante "Top" */
        .top-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background-color: var(--blu-notte);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            opacity: 0;
            visibility: hidden;
        }

        /* Logo nel pulsante */
        .top-button img {
            width: 30px;
            transition: transform 0.2s ease-in-out;
        }

        /* Effetto hover */
        .top-button:hover {
            background-color: var(--arancio-hover);
            transform: scale(1.1);
        }

        .top-button:hover img {
            transform: scale(1.2);
        }

        /* Quando è visibile */
        .top-button.show {
            opacity: 1;
            visibility: visible;
        }

        /* ======================================================================================= */
        /* ===                               FINE TOP BUTTON                                   === */
        /* ======================================================================================= */
        /* ======================================================================================= */
        /* ===                                   CONTATTI                                      === */
        /* ======================================================================================= */

                /* Contenitore principale */
                .form-container {
                    display: flex;
                    width: 80%;
                    margin: auto;
                    background-color: var(--blu-notte);
                    color: var(--bianco);
                    border-radius: 10px;
                    padding: 20px;
                    gap: 30px;
                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
                    margin-bottom: 40px; /* Aggiunto spazio sotto */
                }
        
                /* Sezione form */
                .contact-form {
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
        
                .contact-form h2 {
                    font-size: 24px;
                    margin-bottom: 10px;
                }
        
                .contact-form p {
                    font-size: 16px;
                    margin-bottom: 20px;
                }
        
                .contact-form form {
                    display: flex;
                    flex-direction: column;
                    width: 80%;
                }
        
                .contact-form input,
                .contact-form textarea {
                    width: 100%;
                    padding: 12px;
                    margin-bottom: 15px;
                    border: none;
                    border-radius: 5px;
                    font-size: 16px;
                }
        
                .contact-form textarea {
                    height: 120px;
                    resize: none;
                }
        
                .send-button {
                    background-color: var(--arancio-hover);
                    color: var(--bianco);
                    padding: 12px;
                    font-size: 18px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    transition: background-color 0.3s ease-in-out;
                }
        
                .send-button:hover {
                    background-color: #D66D32;
                }
        
                /* Sezione mappa */
                .map {
                    width: 50%;
                }
        
                .map iframe {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                    border: none;
                }
                /* ======================================================================================= */
                /* ===                                   FINE CONTATTI                                 === */
                /* ======================================================================================= */
        
                /* ======================================================================================= */
                /* ===                                    FOOTER                                       === */
                /* ======================================================================================= */
                           /* Footer */
                footer {
                    width: 100%;
                    background-color: var(--blu-notte);
                    color: var(--bianco);
                    padding: 20px;
                    font-size: 18px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
        
                /* Container unico per la sezione con link */
                .footer-content {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    align-items: center;
                }
        
                .footer-left, .footer-right {
                    width: 50%;
                    padding: 10px;
                }
        
                /* Link a sinistra */
                .footer-left a {
                    display: block;
                    text-decoration: none;
                    color: var(--bianco);
                    font-size: 16px;
                    margin: 5px 0;
                    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
                }
        
               .footer-left a[href="donazioni.html"] {
                color: red;
                font-weight: bold;
                }
        
                .footer-left a[href="donazioni.html"]:hover {
                    color: var(--arancio-hover);
                    transform: scale(1.1);
                }
        
                .footer-left a:hover {
                    color: var(--arancio-hover);
                    transform: scale(1.1);
                }
        
        
                /* Link con icona a destra */
                .footer-right a {
                    display: flex;
                    align-items: center;
                    text-decoration: none;
                    color: var(--bianco);
                    font-size: 16px;
                    margin: 5px 0;
                    transition: color 0.3s ease-in-out;
                }
        
                .footer-right img {
                    width: 25px;
                    margin-right: 10px;
                    transition: transform 0.3s ease-in-out;
                }
        
                .footer-right a:hover img {
                    transform: scale(1.2);
                }
        
                /* Icone social in basso (100% width) */
                .footer-bottom {
                    width: 100%;
                    text-align: center;
                    padding: 0; /* Rimosso padding per evitare bianco in basso */
                    margin-top: 10px;
                }
        
                .social-icons {
                    display: flex;
                    justify-content: center;
                    gap: 20px;
                }
        
                .icon img {
                    width: 40px;
                    transition: transform 0.3s ease-in-out;
                }
        
                .icon:hover img {
                    transform: translateY(-10px) scale(1.1);
                }
                /* Link licenza nel footer: sempre rosso */
                footer .footer-bottom a.license-link,
                footer .footer-bottom a.license-link:visited,
                footer .footer-bottom a.license-link:hover,
                footer .footer-bottom a.license-link:active {
                    color: red !important;
                    text-decoration: none;
                }
                /* ======================================================================================= */
                /* ===                                  FINE FOOTER                                    === */
                /* ======================================================================================= */

        /* Responsività con menu hamburger */
        @media screen and (max-width: 767px) {
            /* ======================================================================================= */
            /* ===                                       NAVBAR                                    === */
            /* ======================================================================================= */
                .navbar {
                    flex-direction: column;
                    align-items: center;
                }
    
                .hamburger {
                    display: flex; /* Adesso appare quando è piccolo */
                    position: absolute;
                    right: 20px;
                    top: 15px;
                }
    
                .logo-container {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
    
                .logo {
                    order: -1; /* Metto il logo sopra */
                    text-align: center;
                    margin-bottom: 10px;
                }
    
                .logo img {
                    height: 60px;
                }
    
                .nav-links {
                    flex-direction: column;
                    margin: 15px 0;
                    display: none;
                }
    
                .nav-links a {
                text-decoration: none;
                color: white;
                font-size: 38px;
                align: center;
                transition: color 0.3s ease-in-out;
                position: relative;
                }
    
                .nav-links.active {
                    display: flex;
                }
    
                .social-icons {
                    margin-top: 20px;
                    display: flex;
                    justify-content: center;
                }

            /* ======================================================================================= */
            /* ===                                 FINE NAVBAR                                     === */
            /* ======================================================================================= */
            
            
        /* ======================================================================================= */
        /* ===                                    FORM                                         === */
        /* ======================================================================================= */
        .form-container {
            flex-direction: column;
            width: 90%;
        }

        .contact-form,
        .map {
            width: 100%;
        }
    /* ======================================================================================= */
    /* ===                                 FINE FORM                                       === */
    /* ======================================================================================= */

    }