/* ===========================

   VARIABILI

=========================== */

:root {

    --accent: #ff1a1a;

    --bg-dark: #000;

    --bg-light: #fff;

    --text-dark: #fff;

    --text-light: #000;

}



/* ===========================

   BASE

=========================== */

body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: var(--bg-dark);

    color: var(--text-dark);

    text-align: center;

    transition: 0.3s;

}



body.light {

    background: var(--bg-light);

    color: var(--text-light);

}



main {

    max-width: 900px;

    margin: auto;

    padding: 20px;

}



/* ===========================

   HEADER

=========================== */

.header {

    display: flex;

    flex-direction: column;   /* LOGO SEMPRE IN CENTRO */

    justify-content: center;

    align-items: center;

    position: relative;

    width: 100%;

    padding-top: 20px;

}

.menu {

    display: flex;

    justify-content: center;

    gap: 22px;

    margin-top: 25px;

}





.logo {

    width: 90px;

    margin-bottom: 10px;

    padding: 6px;

    border: 2px solid var(--accent);

    border-radius: 12px;

    box-shadow: 0 0 12px var(--accent);

}



.menu {

    display: flex;

    justify-content: center;

    gap: 22px;

    margin-top: 25px;

}





.menu a {

    color: inherit;

    text-decoration: none;

    font-weight: bold;

}



.menu a:hover {

    color: var(--accent);

}



/* ===========================

   PULSANTI LINGUA + TEMA

=========================== */

.controls-menu-middle {

    margin-top: 50px;

    margin-bottom: 25px;

    display: flex;

    justify-content: center;

    gap: 16px;

}



.ctrl-btn {

    padding: 10px 16px;

    border-radius: 8px;

    border: 2px solid var(--accent);

    background: transparent;

    color: inherit;

    cursor: pointer;

    transition: 0.25s;

}



.ctrl-btn:hover {

    background: var(--accent);

    color: #fff;

}



/* ===========================

   SEZIONI

=========================== */

.section {

    margin-top: 30px;

}



/* ===========================

   HOME — STILE A

=========================== */

.home-social {

    margin: 25px 0;

    display: flex;

    justify-content: center;

    gap: 20px;

}



.social-icon {

    width: 32px;

    height: 32px;

    opacity: 0.8;

    transition: 0.25s;

}



.social-icon:hover {

    opacity: 1;

    transform: scale(1.1);

}



/* ===========================

   CONTATTI — VERSIONE PULITA

=========================== */

.contatti-page {

    max-width: 900px;

    margin: 120px auto;

    padding: 40px;

    background: rgba(0,0,0,0.55);

    border-radius: 14px;

    box-shadow: 0 0 18px var(--accent);

}



.contatti-page h1 {

    font-size: 36px;

    color: var(--accent);

    text-shadow: 0 0 10px var(--accent);

    margin-bottom: 25px;

}



.contact-form {

    max-width: 500px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



/* Campi piccoli senza bordo */

.contact-form input,

.contact-form textarea {

    background: rgba(0,0,0,0.45);

    color: #fff;

    border: none;

    border-radius: 10px;

    padding: 12px;

    font-size: 1rem;

    box-shadow: 0 0 8px var(--accent);

}



/* Bottone piccolo */

.send-btn {

    background: var(--accent);

    color: #fff;

    border: none;

    padding: 14px;

    font-size: 1.1rem;

    border-radius: 10px;

    box-shadow: 0 0 10px var(--accent);

    cursor: pointer;

}



.send-btn:hover {

    background: #ff4d4d;

    box-shadow: 0 0 18px #ff4d4d;

    transform: translateY(-2px);

}



/* ===========================

   FOOTER

=========================== */

#footerCopy {

    width: 100%;

    text-align: center;

    padding: 20px 0;

    font-size: 1rem;

    font-weight: 600;

    opacity: 0.85;

    transition: color 0.3s ease;

}



body.dark #footerCopy {

    color: #fff;

    text-shadow: 0 0 6px var(--accent);

}



body.light #footerCopy {

    color: #000;

}



/* ANIMAZIONE X */

.menu-icon.active span:nth-child(1) {

    transform: translateY(10px) rotate(45deg);

}

.menu-icon.active span:nth-child(2) {

    opacity: 0;

}

.menu-icon.active span:nth-child(3) {

    transform: translateY(-10px) rotate(-45deg);

}



/* =========================== */

/* FOTO CHI SONO — CORNICE AND‑B */

/* =========================== */



.foto-profilo-frame {

    width: 180px !important;

    padding: 8px !important;

    border: 2px solid #ff1a1a !important;

    border-radius: 14px !important;

    box-shadow: 0 0 14px #ff1a1a !important;

    background: rgba(0,0,0,0.45) !important;

    margin: 20px auto !important;

}



.foto-profilo-frame img {

    width: 100% !important;

    border-radius: 12px !important;

    display: block !important;

}



/* =========================== */

/* ICONA WHATSAPP PICCOLA AND‑B */

/* =========================== */



.wa-icon {

    width: 22px !important;

    height: 22px !important;

    margin-right: 6px !important;

    vertical-align: middle !important;

    filter: brightness(0) invert(1) !important;

    box-shadow: 0 0 6px #ff1a1a !important;

    border-radius: 6px !important;

    transition: 0.25s !important;

}

/* =========================== */

/* RIMOZIONE COMPLETA CORNICI  */

/* =========================== */



/* FOTO CHI SONO */

.foto-profilo-frame {

    border: none !important;

    box-shadow: none !important;

    background: transparent !important;

    padding: 0 !important;

    margin: 20px auto !important;

}



.foto-profilo-frame img {

    border-radius: 12px !important;

    box-shadow: none !important;

}



/* CAMPI CONTATTI */

.contact-form input,

.contact-form textarea {

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

    background: rgba(0,0,0,0.45) !important;

}



/* CONTATTI PAGE */

.contatti-page {

    box-shadow: none !important;

    border: none !important;

}



/* ICONA WHATSAPP */

.wa-icon {

    box-shadow: none !important;

    border: none !important;

}

/* =========================== */

/* CORNICE ULTRA‑NEON AND‑B    */

/* =========================== */



.contact-form input,

.contact-form textarea {

    background: rgba(0,0,0,0.55);

    color: #fff;

    border: 3px solid #ff1a1a;          /* 🔥 BORDO PIÙ SPESSO */

    border-radius: 14px;                /* 🔥 ANGOLI PIÙ MORBIDI */

    padding: 14px;

    font-size: 1.1rem;

    box-shadow:

        0 0 20px #ff1a1a,

        0 0 35px #ff1a1a;               /* 🔥 GLOW DOPPIO, MOLTO PIÙ FORTE */

    transition: 0.25s;

}



.contact-form input:focus,

.contact-form textarea:focus {

    border-color: #ff3b3b;             /* 🔥 ACCENTO PIÙ VIVO */

    box-shadow:

        0 0 28px #ff3b3b,

        0 0 45px #ff3b3b;               /* 🔥 SUPER NEON QUANDO SCRIVI */

}

/* =========================== */

/* CORNICE ATTORNO AL FORM     */

/* =========================== */



.contatti-page {

    background: rgba(0,0,0,0.55);

    border: 3px solid #ff1a1a;          /* 🔥 CORNICE VERA ATTORNO AL FORM */

    border-radius: 16px;                /* 🔥 ANGOLI MORBIDI */

    box-shadow:

        0 0 20px #ff1a1a,

        0 0 35px #ff1a1a;               /* 🔥 GLOW NEON POTENTE */

    padding: 40px;

    margin: 120px auto;

    max-width: 900px;

}

.contact-form input,

.contact-form textarea {

    background: rgba(0,0,0,0.45);

    color: #fff;

    border: 3px solid #ff1a1a;          /* 🔥 BORDO PIÙ SPESSO */

    border-radius: 12px;

    padding: 14px;

    font-size: 1.1rem;

    box-shadow:

        0 0 18px #ff1a1a,

        0 0 30px #ff1a1a;               /* 🔥 GLOW NEON POTENTE */

    transition: 0.25s;

}



.contact-form input:focus,

.contact-form textarea:focus {

    border-color: #ff3b3b;

    box-shadow:

        0 0 26px #ff3b3b,

        0 0 45px #ff3b3b;               /* 🔥 SUPER NEON QUANDO SCRIVI */

}

/* ========================================= */

/* CORNICE DEFINITIVA TIPO LOGO AND‑B        */

/* ========================================= */



.contact-form input,

.contact-form textarea {

    background: rgba(0,0,0,0.55);

    color: #fff;



    /* 🔥 BORDO ROSSO IDENTICO AL LOGO */

    border: 3px solid #ff1a1a;



    /* 🔥 ANGOLI MORBIDI PREMIUM */

    border-radius: 14px;



    padding: 14px;

    font-size: 1.1rem;



    /* 🔥🔥 GLOW NEON COME IL LOGO (DOPPIO) */

    box-shadow:

        0 0 18px #ff1a1a,

        0 0 32px #ff1a1a;



    transition: 0.25s;

}



.contact-form input:focus,

.contact-form textarea:focus {



    /* 🔥 ACCENTO PIÙ VIVO */

    border-color: #ff3b3b;



    /* 🔥🔥🔥 SUPER NEON QUANDO SCRIVI */

    box-shadow:

        0 0 26px #ff3b3b,

        0 0 45px #ff3b3b;

}

.contact-form input,

.contact-form textarea {

    border: 3px solid #ff1a1a !important;   /* 🔥 FORZA IL BORDO */

    border-radius: 14px !important;

    background: rgba(0,0,0,0.55) !important;

    color: #fff !important;



    box-shadow: 0 0 18px #ff1a1a, 0 0 32px #ff1a1a !important;



    outline: none !important;

}



/* ========================================= */

/*   CONTATTI — SPAZIO + COLORI AND‑B        */

/* ========================================= */



/* Spazio tra ogni voce */

.contacts-block .contact-item {

    margin-bottom: 26px;              /* 🔥 più staccati */

}



/* Testo base */

.contacts-block .contact-item a {

    font-size: 1.28rem;

    font-weight: 600;

    text-decoration: none;

    transition: 0.25s;

}



/* 🔥 Tema chiaro → nero */

body.light .contacts-block .contact-item a {

    color: #000;

}



/* 🔥 Tema scuro → bianco */

body.dark .contacts-block .contact-item a {

    color: #fff;

}



/* 🔥 Hover → rosso neon */

.contacts-block .contact-item a:hover {

    color: #ff1a1a;

    text-shadow: 0 0 6px #ff1a1a;

    transform: translateX(3px);

}



/* ========================================= */

/*   PULSANTE WHATSAPP — SPAZIO EXTRA        */

/* ========================================= */



.whatsapp-buttons {

    margin-top: 30px;                 /* 🔥 più staccato dal telefono */

}



.wa-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;



    background: #25D366;              /* verde WhatsApp */

    color: #000;                      /* tema chiaro */

    font-weight: 700;

    padding: 12px 22px;

    border-radius: 12px;

    text-decoration: none;

    transition: 0.25s;

}



/* 🔥 Tema scuro → testo bianco */

body.dark .wa-btn {

    color: #fff;

}



/* 🔥 Hover → scritta rossa neon */

.wa-btn:hover {

    color: #ff1a1a;

    text-shadow: 0 0 6px #ff1a1a;

    transform: translateY(-2px);

}

/* ========================================= */

/*   PAGINA TECNICI — SPAZIO + COLORI        */

/* ========================================= */



/* Spazio generale della pagina */

.tecnici-page {

    margin-top: 50px;                 /* 🔥 stacca dall’alto */

    margin-bottom: 60px;              /* 🔥 stacca dal footer */

}



/* Titolo della pagina */

.tecnici-title {

    margin-bottom: 35px;              /* 🔥 spazio sotto il titolo */

    font-size: 2rem;

    font-weight: 700;

}



/* Blocco contenuti */

.tecnici-block {

    margin-top: 30px;

    margin-bottom: 40px;              /* 🔥 più aria */

}



/* Paragrafi */

.tecnici-block p {

    margin-bottom: 22px;              /* 🔥 spazio tra paragrafi */

    font-size: 1.2rem;

    line-height: 1.6;

    transition: 0.25s;

}



/* Link */

.tecnici-block a {

    font-size: 1.25rem;

    font-weight: 600;

    text-decoration: none;

    transition: 0.25s;

}



/* 🔥 Tema chiaro → testo nero */

body.light .tecnici-block p,

body.light .tecnici-block a,

body.light .tecnici-title {

    color: #000;

}



/* 🔥 Tema scuro → testo bianco */

body.dark .tecnici-block p,

body.dark .tecnici-block a,

body.dark .tecnici-title {

    color: #fff;

}



/* 🔥 Hover rosso neon sui link */

.tecnici-block a:hover {

    color: #ff1a1a;

    text-shadow: 0 0 6px #ff1a1a;

    transform: translateX(3px);

}

/* ========================================= */

/*   FOOTER + PRIVACY — UNIVERSALE AND‑B     */

/* ========================================= */



/* Footer principale */

#footerCopy {

    text-align: center;

    margin-top: 40px;

    font-size: 0.95rem;

    transition: 0.25s;

}



/* Scritta viola sotto (form-footer) */

.form-footer {

    margin-top: 35px;

    font-size: 0.95rem;

    text-align: center;

    transition: 0.25s;

}



/* Link Privacy in tutte le pagine */

.form-footer + a,

#footerCopy + a {

    display: block;

    margin-top: 10px;

    text-align: center;

    font-weight: 600;

    text-decoration: none;

    transition: 0.25s;

}



/* 🔥 Tema chiaro → nero */

body.light #footerCopy,

body.light .form-footer,

body.light .form-footer + a,

body.light #footerCopy + a {

    color: #000;

}



/* 🔥 Tema scuro → bianco */

body.dark #footerCopy,

body.dark .form-footer,

body.dark .form-footer + a,

body.dark #footerCopy + a {

    color: #fff;

}



/* 🔥 Hover rosso neon */

.form-footer + a:hover,

#footerCopy + a:hover {

    color: #ff1a1a;

    text-shadow: 0 0 6px #ff1a1a;

}

/* ========================================= */

/*   EMAIL IN PROGETTI — COLORE TEMA         */

/* ========================================= */



/* Email e link nella pagina Progetti */

.progetti-page a,

.progetti-page .contact-item a {

    transition: 0.25s;

}



/* Tema chiaro → nero */

body.light .progetti-page a,

body.light .progetti-page .contact-item a {

    color: #000;

}



/* Tema scuro → bianco */

body.dark .progetti-page a,

body.dark .progetti-page .contact-item a {

    color: #fff;

}



/* Hover rosso neon */

.progetti-page a:hover,

.progetti-page .contact-item a:hover {

    color: #ff1a1a;

    text-shadow: 0 0 6px #ff1a1a;

}

/* ========================================= */

/*   EMAIL IN PROGETTI — SENZA UNDERLINE     */

/* ========================================= */



.progetti-page .contact-item a {

    text-decoration: none;        /* 🔥 toglie la linea */

    transition: 0.25s;

}



/* Tema chiaro → nero */

body.light .progetti-page .contact-item a {

    color: #000;

}



/* Tema scuro → bianco */

body.dark .progetti-page .contact-item a {

    color: #fff;

}



/* Hover rosso neon */

.progetti-page .contact-item a:hover {

    color: #ff1a1a;

    text-shadow: 0 0 6px #ff1a1a;

}

/* ========================================= */

/*   CONTATTI — RIMUOVI SPAZIO SOTTO EMAIL   */

/* ========================================= */



.contatti-page .contacts-block {

    margin-bottom: 10px;   /* 🔥 riduce lo spazio enorme */

    padding-bottom: 0;     /* 🔥 elimina spazio interno */

}



.contatti-page .contact-item {

    margin-bottom: 5px;    /* 🔥 compatta ogni voce */

}

/* ========================================= */

/*   CONTATTI — RIDUCI SPAZI SUPERIORI E INFERIORI */

/* ========================================= */



.contatti-page .contacts-block {

    margin-top: 10px;      /* 🔥 riduce lo spazio sopra (tra titolo e email) */

    margin-bottom: 10px;   /* 🔥 riduce lo spazio sotto (prima del form) */

    padding-top: 0;        /* 🔥 elimina padding interno */

    padding-bottom: 0;

}



.contatti-page .contact-item {

    margin: 5px 0;         /* 🔥 compatta ogni voce email/telefono */

}

/* ========================================= */

/*   TRANSIZIONE MORBIDA CAMBIO TEMA AND‑B   */

/* ========================================= */



body {

    transition: background-color 0.35s ease, color 0.35s ease;

}



/* Glow rosso dei bordi del form */

input, textarea, button {

    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;

}



/* Link, testi, titoli */

a, h1, h2, h3, p, span, .contact-item a, .wa-btn {

    transition: color 0.35s ease, text-shadow 0.35s ease;

}

/* ========================================= */

/*   CONTATTI — ELIMINA IL BLOCCO NERO       */

/* ========================================= */



/* Rimuove completamente il contenitore che crea il blocco nero */

.contatti-page .form-block,

.contatti-page .form-container,

.contatti-page .contact-form-wrapper,

.contatti-page .contact-wrapper,

.contatti-page .form-section {

    background: none !important;

    padding: 0 !important;

    margin: 0 !important;

    border: none !important;

}



/* Allinea il form correttamente */

.contatti-page form {

    margin: 0 auto !important;

    width: 100% !important;

}

/* ========================================= */

/*   CONTATTI — RIMOZIONE BLOCCO NERO        */

/* ========================================= */



.contatti-page {

    background: transparent !important;   /* 🔥 niente nero */

    border: none !important;              /* 🔥 niente cornice */

    box-shadow: none !important;          /* 🔥 niente glow */

    padding: 20px !important;             /* 🔥 spazio normale */

    margin: 40px auto !important;         /* 🔥 centrato */

}

/* ========================================= */

/*   MODALITÀ CHIARA — FORM LEGGIBILE        */

/* ========================================= */



body.light .contact-form input,

body.light .contact-form textarea {

    background: #fff !important;          /* 🔥 bianco pulito */

    color: #000 !important;               /* 🔥 testo nero */

    border: 2px solid #ff1a1a !important; /* 🔥 bordo rosso elegante */

    box-shadow: 0 0 6px #ff1a1a !important; /* 🔥 glow leggero */

}



body.light .contact-form input::placeholder,

body.light .contact-form textarea::placeholder {

    color: #555 !important;               /* 🔥 placeholder grigio */

}



body.light .send-btn {

    background: #ff1a1a !important;

    color: #fff !important;

    box-shadow: 0 0 10px #ff1a1a !important;

}

.contact-buttons {

    margin-top: 30px;

    display: flex;

    flex-direction: column;   /* uno sopra l’altro */

    align-items: center;

    gap: 22px;                /* spazio tra i pulsanti */

}

/* ========================================= */

/*   PULSANTI CONTATTI — VERSIONE DEFINITIVA */

/* ========================================= */



.contact-buttons {

    margin-top: 30px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 22px !important;

}



/* Pulsanti piccoli premium */

.whatsapp-button,

.telegram-button {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 12px !important;



    width: 220px !important;

    padding: 12px 18px !important;



    border-radius: 14px !important;

    font-size: 1.1rem !important;

    font-weight: 700 !important;



    border: 3px solid #ff1a1a !important;

    background: rgba(0,0,0,0.35) !important;

    backdrop-filter: blur(6px) !important;



    transition: 0.3s ease !important;

}



/* Logo sempre visibile e più piccolo */

.msg-icon {

    width: 28px !important;

    height: 28px !important;

    filter: none !important;   /* 🔥 logo SEMPRE visibile */

    transition: 0.3s ease !important;

}



/* Colori */

.whatsapp-button {

    background: #25D366 !important;

    color: #fff !important;

}



.telegram-button {

    background: #0088cc !important;

    color: #fff !important;

}



/* Hover */

.whatsapp-button:hover,

.telegram-button:hover {

    transform: translateY(-6px) scale(1.04) !important;

    box-shadow: 0 0 18px #ff1a1a !important;

    border-color: #ff3b3b !important;

}



.whatsapp-button:hover .msg-icon,

.telegram-button:hover .msg-icon {

    transform: translateY(-2px) scale(1.12) !important;

}

/* ========================================= */

/*   EMAIL + TELEFONO IN PROGETTI — STILE CONTATTI */

/* ========================================= */



.progetti-page .contact-item a,

.progetti-page a {

    font-size: 1.28rem !important;      /* 🔥 identico a Contatti */

    font-weight: 600 !important;

    text-decoration: none !important;   /* 🔥 niente underline */

    transition: 0.25s !important;

}



/* Tema chiaro */

body.light .progetti-page .contact-item a,

body.light .progetti-page a {

    color: #000 !important;

}



/* Tema scuro */

body.dark .progetti-page .contact-item a,

body.dark .progetti-page a {

    color: #fff !important;

}



/* Hover rosso neon identico */

.progetti-page .contact-item a:hover,

.progetti-page a:hover {

    color: #ff1a1a !important;

    text-shadow: 0 0 6px #ff1a1a !important;

    transform: translateX(3px) !important;   /* 🔥 movimento identico */

}



/* =========================== */

/*   MENU MOBILE — AND‑B       */

/* =========================== */



.mobile-menu {

    position: fixed;

    top: 0;

    right: -100%;

    width: 70%;

    height: 100vh;

    background: rgba(0,0,0,0.85);

    backdrop-filter: blur(6px);

    box-shadow: -4px 0 12px #ff1a1a;

    display: flex;

    flex-direction: column;

    padding-top: 80px;

    gap: 25px;

    transition: 0.35s ease;

    z-index: 9998;

}



.mobile-menu a {

    color: #fff;

    text-decoration: none;

    font-size: 1.4rem;

    font-weight: 700;

    text-shadow: 0 0 6px #ff1a1a;

}



.mobile-menu.open {

    right: 0;

}



/* =========================== */

/*   HAMBURGER — AND‑B         */

/* =========================== */



.mobile-menu-btn {

    display: none;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

    padding: 10px;

    z-index: 9999;

}



.mobile-menu-btn .bar {

    width: 32px;

    height: 4px;

    background: #ff1a1a;

    border-radius: 4px;

    transition: 0.3s;

}



/* Animazione X */

.mobile-menu-btn.active .bar:nth-child(1) {

    transform: translateY(10px) rotate(45deg);

}

.mobile-menu-btn.active .bar:nth-child(2) {

    opacity: 0;

}

.mobile-menu-btn.active .bar:nth-child(3) {

    transform: translateY(-10px) rotate(-45deg);

}



/* =========================== */

/*   RESPONSIVE                */

/* =========================== */



@media (max-width: 768px) {

    .mobile-menu-btn {

        display: flex !important;

    }

    .menu {

        display: none !important;

    }

}



@media (min-width: 769px) {

    .mobile-menu-btn {

        display: none !important;

    }

    .mobile-menu {

        display: none !important;

    }

    .menu {

        display: flex !important;

    }

}



/* =========================== */

/*   PAGINA GRAZIE — AND‑B     */

/* =========================== */



.andb-thanks {

    max-width: 650px;

    margin: 80px auto;

    padding: 40px 30px;

    background: rgba(0,0,0,0.55);

    border-radius: 16px;

    box-shadow: 0 0 22px #ff1a1a;

    text-align: center;

    backdrop-filter: blur(6px);

}



.thanks-logo {

    width: 120px;

    margin-bottom: 25px;

    filter: drop-shadow(0 0 10px #ff1a1a);

}



.andb-thanks h1 {

    font-size: 2.4rem;

    color: #ff1a1a;

    text-shadow: 0 0 10px #ff1a1a;

    margin-bottom: 20px;

}



.andb-thanks p {

    font-size: 1.25rem;

    line-height: 1.6;

    margin-bottom: 18px;

}



.thanks-btn {

    display: inline-block;

    padding: 14px 28px;

    background: #ff1a1a;

    color: #fff !important;

    font-weight: 700;

    border-radius: 14px;

    text-decoration: none;

    font-size: 1.2rem;

    box-shadow: 0 0 14px #ff1a1a;

    transition: 0.25s;

    margin-top: 25px;

}



.thanks-btn:hover {

    background: #ff3b3b;

    box-shadow: 0 0 22px #ff1a1a;

    transform: translateY(-3px);

}



@media (max-width: 768px) {

    .andb-thanks {

        margin: 40px 20px;

        padding: 30px 20px;

    }



    .thanks-logo {

        width: 100px;

    }



    .andb-thanks h1 {

        font-size: 2rem;

    }



    .andb-thanks p {

        font-size: 1.1rem;

    }



    .thanks-btn {

        width: 100%;

        padding: 16px;

        font-size: 1.15rem;

    }

}

.menu {

    display: flex;

    justify-content: center;

    gap: 22px;

    margin-top: 25px;

}

/* MENU MOBILE DI LATO */

.mobile-menu {

    position: fixed;

    top: 0;

    right: -100%;      /* parte fuori dallo schermo */

    width: 70%;

    height: 100vh;

    background: rgba(0,0,0,0.85);

    backdrop-filter: blur(6px);

    box-shadow: -4px 0 12px #ff1a1a;

    display: flex;

    flex-direction: column;

    padding-top: 80px;

    gap: 25px;

    transition: 0.35s ease;

    z-index: 9998;

}



/* quando si apre */

.mobile-menu.open {

    right: 0;          /* scorre da destra */

}



/* hamburger a destra */

.mobile-menu-btn {

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

}

@media (max-width: 768px) {

    .menu {

        display: none !important;   /* nasconde menu desktop */

    }

    .mobile-menu-btn {

        display: flex !important;   /* mostra hamburger */

    }

}