:root {
    color-scheme: light;
    --primary: #8B5CF6; 
    --bg-dark: #0b0b12; 
    --accent: #f472b6 !important; 
    --secondary: #2d1b4e; 
    --text-light: #f3f4f6;

    /* Font */
  --font-main: 'Inter', sans-serif;
  --font-code: 'Nunito Sans', monospace;
}

h1, h2, h3, .HOMMY {
font-family: var(--font-code, var(--font-main, monospace));
    font-weight: 800; /* Per un titolo impattante */
}

button, input, select, textarea {
    font-family: var(--font-main);
}

/* Il corpo del testo usa Lato */
body, .lead, p {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

/* La tua label sopra il titolo principale */
.uppercase-label {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.no-wrap {
  white-space: nowrap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* Blocca lo scroll laterale cattivo */
    width: 100%;
      max-width: 100vw;
}

h1 {
    font-size: clamp(2rem, 8vw, 3.5rem); /* Dimensione dinamica: piccola su mobile, grande su desktop */
    line-height: 1.2;
    white-space: normal; /* FONDAMENTALE: deve poter andare a capo! */
    word-wrap: break-word;
    margin-bottom: 20px;
}

/* Stile globale per i titoli H2 */
h2 {
font-size: clamp(1.8rem, 6vw, 2.4rem) !important;  line-height: 1.2;
  margin-bottom: 25px; /* Spazio sotto il titolo */
}

h3 {
  font-size: 1.5rem; /* Circa 24px */
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* Stile globale per i paragrafi */
p {
  font-size: 1.3rem;
  line-height: 1.7;    
  margin-bottom: 20px;
}

.help h1 {
  color: var(--text-light);font-family: var(--font-code);}




  
.my-nav {
  width: 100%;
    max-width: 100vw; /* Non oltrepassare lo schermo */
    padding: 0 5%;
    box-sizing: border-box;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100px;
    z-index: 9999;
    background: var(--bg-dark);
    -webkit-backdrop-filter: blur(12px); /* Per Safari e iOS */
    backdrop-filter: blur(12px);
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.nav-logo img { height: 50px; width: auto; transition: transform 0.3s; }
.nav-links { display: flex; list-style: none; gap: 30px; margin: 0; }
.nav-links a { text-decoration: none; color: var(--text-light); font-size: 1.1rem; }

/* BURGER MENU - Nascosto su Desktop */
.my-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around; /* Meglio di between per le barre */
    width: 30px;
    height: 24px; 
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
}

.my-bar {
 width: 100%;
    height: 3px;
    background-color: var(--text-light) !important;
    display: block; /* Essenziale */
    transition: 0.3s;
}



/* --- 2. NAV LINKS & HOVER EFFETTI --- */
.nav-links a { 
    text-decoration: none; 
    color: var(--text-light); 
    font-size: 1.1rem;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease; /* Transizione fluida */
    position: relative;
}

/* Hover: il testo diventa rosa */
.nav-links a:hover {
    color: var(--accent);
}

/* Link Selezionato (Stato Attivo): Gradiente tra Primary e Accent */
.nav-links a.active {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: var(--bg-dark) !important; /* Testo bianco sopra il gradiente */
    font-weight: 700;
    box-shadow: 0 4px 15px var(--secondary);
}

/* Opzionale: Sottolineatura animata per l'hover (molto pro) */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: var(--accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-links a:hover::after {
    width: 70%;
}

/* Se il link è attivo, non mostrare la sottolineatura */
.nav-links a.active::after {
    display: none;
}














/*FOOTER */
footer {
    background-color: var(--bg-dark);
    /* Linea superiore sfumata (come la navbar opzione 3) */
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent) 1;
    
    padding: 60px 5% 30px 5%;
    color: var(--text-light);
    font-family: var(--font-main);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}



.footer-section h3 {
    font-family: var(--font-code);
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-section p {
    font-size: 0.95rem;
opacity: 1;
    color: #b0b0b0;
        line-height: 1.6;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.3s ease;
opacity: 1;
}

.footer-links a:hover {
    opacity: 1;
background: linear-gradient(to right, var(--primary), var(--accent));
/* 2. Fondamentale: ritaglia il gradiente sulla forma delle lettere */
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. Fondamentale: rende trasparente il colore del testo per mostrare il gradiente sotto */
  color: transparent;

  transform: translateY(-1px);

  display: inline-block;
    padding-left: 5px; /* Piccolo movimento fluido */
}

/* Sezione Bottom per Copyright */
.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--secondary);
    font-size: 0.85rem;
    font-family: var(--font-code);
}

.footer-bottom span {
    color: var(--accent);
}

.hero-description {
  font-family: var(--font-main);
  font-size: 1.25rem; /* Leggermente più grande del testo normale */
  line-height: 1.6;
  color: var(--text-light);
  max-width: 800px;
}

.highlight-primary {
  color: var(--primary);
  font-weight: 700;
  font-family: var(--font-code); /* Dà un tocco tecnico ai servizi */
  transition: text-shadow 0.3s ease;
}

.highlight-accent {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-code);
  transition: text-shadow 0.3s ease;
}

/* Effetto glow opzionale al passaggio del mouse */
.highlight-primary:hover, 
.highlight-accent:hover {
  text-shadow: 0 0 8px currentColor;
  cursor: default;
}

.availability {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    border: 1px solid var(--primary);
    margin-top: 15px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e; /* Verde acceso */
    border-radius: 50%;
    box-shadow: 0 0 10px #22c55e;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
}


.footerpolicy {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.footerlink {
  text-decoration: none;
  color: var(--text-light);
  display: inline-block; 
  transition: color 0.3s; 
}

.footerlink:hover {
background: linear-gradient(to right, var(--primary), var(--accent));

/* 2. Fondamentale: ritaglia il gradiente sulla forma delle lettere */
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. Fondamentale: rende trasparente il colore del testo per mostrare il gradiente sotto */
  color: transparent;

  /* 4. Sposta il link verso l'alto (come avevi scritto tu) */
  transform: translateY(-1px);

}


.nav-logofooter {
    display: inline-block;
    text-align: center;
}

.nav-logofooter img {
    height: 100px; 
    width: auto;
    display: block; /* Mantiene l'immagine come blocco dentro il link */
    margin: 0 auto; /* Sicurezza extra per la centratura */
    transition: transform 0.3s ease;
}

.nav-logofooter img:hover {
    transform: scale(1.1); /* Leggero zoom per interattività */
}












/* SERVIZI */
.card {
  width: 100%; 
  min-height: 10rem; 
  position: relative;
  display: flex;
  flex-direction: column;
margin-bottom: 1.5rem;  
overflow: hidden;
  border-radius: 20px;
  background-color: var(--bg-dark);
  padding: 1.5rem; 
  border: 1px solid var(--secondary);
}

.card h3 {
  z-index: 1;
  color: white;
  font-size: 1.25rem; 
  margin-bottom: 0.75rem;
}

.card p {
  z-index: 1;
  color: var(--text-light);
  font-size: 0.9rem; 
  line-height: 1.4;
  margin: 0;
}

.card::before {
  content: '';
  position: absolute;
  width: 80px;
  background-image: linear-gradient(180deg, var(--accent), var(--primary));
  height: 200%;
animation: rotBGimg 3s linear infinite;
}


.custom-width {
    max-width: 400px; /* Imposta la larghezza massima desiderata */
   
}

.custom-width h2 {
   text-align: left;
}



/* SKILL */
/* GABBIA E TECH STACK */
.stack-wrapper {
  background-color: var(--bg-dark);
  border: 1px solid var(--secondary); 
  transition: all 0.3s ease;
  padding: 1.5rem;
  border-radius: 20px;

}

/* Effetto al passaggio del mouse sulla gabbia */
.stack-wrapper:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--bg-dark), black 20%);
}

.skill-badge {
  background: var(--secondary);
  border: 1px solid var(--secondary) !important;
  color: var(--text-light);
  transition: 0.3s;
  padding: 1rem;
  border-radius: 12px;
}

.skill-badge:hover {
  border-color: var(--accent) !important;
  background: var(--primary); /* Cambia colore usando la variabile */
}

/* Titolo dentro la gabbia */
.stack-wrapper h4 {
  color: var(--text-light);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem !important;
  
}

.sticky-stack {
justify-content: center;
width: 100%;
max-width: 400px;
margin: 0 auto;
position: sticky;
  top: 100px;
}

/* Allineamento dei badge dentro la gabbia */
.stack-wrapper .d-flex {
  justify-content: center; /* Centra i badge all'interno della gabbia */
}

.footer-section p, .footer-links a { opacity: 1; color: #b0b0b0; } /* Grigio chiaro leggibile */
.card p { font-size: 1rem; opacity: 1; } 










/* 1. Il Contenitore: Nasconde l'overflow e imposta lo sfondo bianco */
.skill-slider-container {
  width: 100%;
  overflow: hidden; /* Fondamentale: nasconde le icone fuori dai bordi */
  background-color: #ffffff; /* Il tuo sfondo bianco */
  padding: 40px 0; /* Spazio sopra e sotto la striscia */
  position: relative;
}

/* 2. La Traccia: Allinea i gruppi e definisce l'animazione */
.skill-track {
  display: flex; /* Mette i gruppi uno di fianco all'altro */
  width: calc(200px * 12); /* Calcolo automatico: (larghezza icona + gap) * numero totale icone */
  animation: scrollInfinito 20s linear infinite; /* Nome, durata, tipo di movimento, loop */
}

/* 3. Il Gruppo: Allinea le icone e gestisce lo spazio */
.skill-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 50%; /* Ogni gruppo occupa metà della traccia totale */
  gap: 60px; /* Spazio tra le icone */
  padding: 0 30px; /* Spazio extra ai lati del gruppo */
}

/* 4. Le Icone: Dimensioni e stile (Viola!) */
.skill-group img {
  height: 60px; /* Altezza uniforme per tutte le icone */
  width: auto; /* Mantiene le proporzioni */
  
  /* TRUCCO PRO: Rendi le icone viola senza modificare i file */
  /* Questo filtro converte i colori originali in una tonalità viola */
  filter: grayscale(100%) brightness(80%) sepia(100%) hue-rotate(240deg) saturate(300%);
  
  transition: transform 0.3s ease, filter 0.3s ease; /* Effetto morbido al passaggio del mouse */
}

/* Effetto Hover: L'icona torna al colore originale e si ingrandisce */
.skill-group img:hover {
  filter: none; /* Rimuove il filtro viola */
  transform: scale(1.2); /* Ingrandisce leggermente */
}

/* 5. La Definizione dell'Animazione */
@keyframes scrollInfinito {
  0% {
    transform: translateX(0); /* Partenza: nessuna traduzione */
  }
  100% {
    transform: translateX(-50%); /* Arrivo: sposta la traccia a sinistra della metà (un gruppo intero) */
  }
}

.help {
    background-color: var(--bg-dark);
  
  /* Gradienti con colori solidi di fallback se color-mix fallisce */
  background-image: 
    radial-gradient(circle at 50% 50%, var(--secondary) 0%, transparent 60%),
    radial-gradient(at 80% 20%, var(--accent) 0px, transparent 40%),
    radial-gradient(at 20% 80%, var(--primary) 0px, transparent 40%);
  
  /* Applica il mix solo se supportato */
  background-image: 
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--secondary), transparent 40%) 0%, transparent 60%),
    radial-gradient(at 80% 20%, color-mix(in srgb, var(--accent), transparent 90%) 0px, transparent 40%),
    radial-gradient(at 20% 80%, color-mix(in srgb, var(--primary), transparent 90%) 0px, transparent 40%);
    color: var(--text-light)
}

.help h1 {
  color: var(--text-light)
  var(--font-main)
}

/* Titolo della sezione */
.help h2 {
  font-size: 2.5rem; /* 40px */
  margin-bottom: 0.5rem;
}

/* Sottotitolo descrittivo */
.help .row.mb-4 p {
  font-size: 1.25rem; /* 20px */
}

/* Titoli dei punti (quelli dentro il tag strong) */
.help .card strong {
  display: inline-block;
  font-size: 1.1rem; /* 18px circa */
  margin-bottom: 8px;
}

/* Corpo del testo nelle card */
.help .card p {
  font-size: 0.95rem; /* 15px circa */
  line-height: 1.5;
}


 

/* 2. Il contenitore principale della 404 */
main.help {
    min-height: 50vh;     
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* Centra orizzontale */
    justify-content: center !important; /* Centra verticale */
    text-align: center !important;
    top: 0;
    left: 0;
    z-index: 999;       /* Lo mette sopra tutto */
    padding: 0;
    overflow: hidden; /* Evita scrollbar inutili */
}

.contact-section .container {
    max-width: 450px; /* Un terzo dello schermo desktop è circa 400-500px */
    width: 90%;      /* Impedisce al box di essere più grande dello schermo su mobile */
    margin: 0 auto;  /* Centra il div orizzontalmente */
}

.contact-section p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    opacity: 0.9;
}








@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.card::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 15px;
  /* Background color di fallback */
  background-color: var(--bg-dark);
  
  /* Gradienti con colori solidi di fallback se color-mix fallisce */
  background-image: 
    radial-gradient(circle at 50% 50%, var(--secondary) 0%, transparent 60%),
    radial-gradient(at 80% 20%, var(--accent) 0px, transparent 40%),
    radial-gradient(at 20% 80%, var(--primary) 0px, transparent 40%);
  
  /* Applica il mix solo se supportato */
  background-image: 
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--secondary), transparent 40%) 0%, transparent 60%),
    radial-gradient(at 80% 20%, color-mix(in srgb, var(--accent), transparent 90%) 0px, transparent 40%),
    radial-gradient(at 20% 80%, color-mix(in srgb, var(--primary), transparent 90%) 0px, transparent 40%);
}  
/* .card:hover:before {
  background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
  animation: rotBGimg 3.5s linear infinite;
} */



/* Rimuove l'icona blu standard di Bootstrap e mette una freccia personalizzata */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
    color: var(--accent) !important;
    background-color: transparent !important;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color:var(--text-light);
}

.accordion-item {
    transition: all 0.3s ease;
}

/* Effetto hover discreto */
.accordion-item:hover {
    border-bottom-color: var(--primary) !important;
}

/* Assicurati che l'icona sia visibile */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.2s ease-in-out;
}

/* Rotazione della freccia quando il pannello è aperto */
.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.sez4 {
  background-color: var(--bg-dark);
  
  /* Gradienti con colori solidi di fallback se color-mix fallisce */
  background-image: 
    radial-gradient(circle at 50% 50%, var(--secondary) 0%, transparent 60%),
    radial-gradient(at 80% 20%, var(--accent) 0px, transparent 40%),
    radial-gradient(at 20% 80%, var(--primary) 0px, transparent 40%);
  
  /* Applica il mix solo se supportato */
  background-image: 
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--secondary), transparent 40%) 0%, transparent 60%),
    radial-gradient(at 80% 20%, color-mix(in srgb, var(--accent), transparent 90%) 0px, transparent 40%),
    radial-gradient(at 20% 80%, color-mix(in srgb, var(--primary), transparent 90%) 0px, transparent 40%);
  color: var(--text-light);
}

/* Rende il titolo fisso a sinistra mentre scorri le card */
.sezitit04 {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  height: fit-content;
}

/* Classe comune per tutte le card */
.sezcard-stack {
  position: sticky;
  top: 120px; /* Determina dove si ferma la card in alto */
  width: 100%; /* Prende tutto lo spazio della colonna */
  min-height: 18rem; /* Invece di height fissa, usiamo min-height per i testi lunghi */
  background-color: var(--bg-dark);
  
  /* Gradienti con colori solidi di fallback se color-mix fallisce */
  background-image: 
    radial-gradient(circle at 50% 50%, var(--secondary) 0%, transparent 60%),
    radial-gradient(at 80% 20%, var(--accent, transparent 40%)),
    radial-gradient(at 20% 80%, var(--primary) 0px, transparent 40%);
  
  /* Applica il mix solo se supportato */
  background-image: 
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--secondary), transparent 40%) 0%, transparent 60%),
    radial-gradient(at 80% 20%, color-mix(in srgb, var(--accent), transparent 90%) 0px, transparent 40%),
    radial-gradient(at 20% 80%, color-mix(in srgb, var(--primary), transparent 90%) 0px, transparent 40%);
  border: 3px solid var(--text-light);
  border-radius: 20px; /* Angoli più moderni */
  margin-bottom: 4rem; /* Spazio per scorrere prima della prossima card */
  box-shadow: 0 -10px 30px var(--secondary) /* Ombra superiore per dare profondità */
}

/* Opzionale: sfalsa leggermente il top se vuoi vedere i bordi di quelle sopra */
.sezcard042 { top: 140px; }
.sezcard043 { top: 160px; }
.sezcard044 { top: 180px; }


/* Assicura che le card siano sopra ogni possibile overlay di sfondo */
.sezcard-stack {
    z-index: 10;
    will-change: transform, opacity; /* Ottimizza le prestazioni */
    background-color: var(--bg-dark); /* <-- QUESTO è quello che mancava */
  border: 1px solid var(--secondary);
  border-radius: 20px;
  margin-bottom: 1.5rem; /* Aggiunge spazio tra le card */
  transition: all 0.3s ease;
}

.sezcard-stack.active {
  /* 1. Definizione dei bordi e colori base */
  border-color: var(--primary);
  
  /* 2. Fallback per browser vecchi (Chrome < 111, Safari iOS < 16.2) */
  background-color: var(--bg-dark); 

  /* 3. Colore avanzato per browser moderni */
  background-color: color-mix(in srgb, var(--bg-dark), var(--primary) 5%);

  /* 4. Transizione fluida */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rimuovi il test rosso precedente e usa questo */
.sezcard-stack.active i {
    animation: saltello 1s ease infinite;
    color: var(--accent) !important;
}




/* SEZ5 */
.sez5 {
  background-image: linear-gradient(
    135deg, 
    var(--secondary) 0%, 
    var(--text-light) 25%, 
     var(--text-light) 75%, 
    var(--secondary) 100%
  );
  color: var(--bg-dark);
  font-family: var(--font-main);
  position: relative;

}

.sez5 h2 {
  line-height: 1.2;
}

.sez5 .section-description {
  font-size: 1.25rem; /* Effetto "lead" */
  max-width: 750px;
  opacity: 0.9;
}




@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}










/* SEZ6 */
/* Sfumatura sul testo del titolo */
.text-gradient {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}









/* CHISONO */


/* sez2 */

.chisonosez2 {
max-width: 800px;
}

.chisonosez2 h2 {
  font-size: 2.4rem;
      color: var(--text-light);
    line-height: 1.2; /* Per i titoli è meglio un valore più basso per tenerli compatti */
}

.chisonosez2 p {
  font-size: 1.3rem;
  color: var(--text-light);
  line-height: 1.6; /* Questo è il valore ideale per paragrafi leggibili */
    margin-bottom: 20px; /* Aggiunge spazio anche tra un paragrafo e l'altro */
}

.chisonosez2 img {
border-color: var(--primary);
}

.lead {
  color: var(--bg-dark);
}



/* sez 5 */
.chisonosez5 {
  background-color: var(--text-light);
  color: var(--bg-dark);
}


.chisonosez7 {

background-color: var(--text-light);
  color: var(--bg-dark);
  font-family: var(--font-main);
  position: relative;
 
}

.imgprofile {
  height: 400px; /* Alza o abbassa questo valore */
    width: auto;  /* Mantiene le proporzioni originali */
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.cardportfolio {
    background-color: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
    height: 100%;
    color: var(--text-light);
}

.cardportfolio:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
}

.cardportfolio-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover; /* Ritaglia l'immagine per riempire il box */
    display: block;
}

.card-body {
    padding: 1.5rem;
    text-align: center;
        color: var(--text-light);
}




.card-title {
    font-weight: 700;
    margin: 0;
    font-family: var(--font-main);
}

/* Fix per il layout della griglia */
.row {
    justify-content: center; /* Centra le card se non riempiono la riga */
}




/* 1. Header e Nav di Filtro */
.filter-nav {
       display: flex;
    flex-wrap: wrap;           /* FONDAMENTALE: permette ai bottoni di andare a capo */
    justify-content: center;   /* Li tiene centrati */
    gap: 10px;                 /* Spazio uniforme tra i bottoni */
    margin: 30px auto 40px auto;
    padding: 10px 20px;
    max-width: fit-content;    /* Racchiude i bottoni a pennello */
    border-radius: 30px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Stile dei bottoni singoli */
.filter-nav button {
    background: transparent;
    border: 1px solid var(--primary); /* Colore del bordo (puoi cambiarlo con il tuo colore principale) */
    color: var(--primary);            /* Colore del testo */
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Stato Attivo e Hover (Effetto Neon) */
.filter-nav button.active, 
.filter-nav button:hover {
    background: var(--primary);       /* Il bottone si colora completamente */
    color: var(--text-light);            /* Il testo diventa bianco */
}
/* 2. Layout Card Portfolio (integrazione con Bootstrap) */





.card {
    background: var(--secondary); /* Usa il viola scuro che hai già */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

/* Effetto Hover sulle Card */
.card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px var(--bg-dark);
}

.card-img-top {
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}


.card-title {
    font-family: var(--font-main);
    font-weight: 700;
    margin-bottom: 10px;
}

.card-text {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* 3. Gestione Filtro (JS helper) */
.hidden {
    display: none !important;
}

/* Stile specifico per la Hero del Portfolio */
.portfolio-hero {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
    background: transparent; /* Lascia vedere lo sfondo aurora dietro */
}

/* Assicura che la LEAD non sia troppo larga su schermi grandi */
.portfolio-hero .lead {
    max-width: 600px; /* Limita la larghezza per una leggibilità ottimale */
    margin: 0 auto;
    color: var(--text-light);
    opacity: 0.8;
    line-height: 1.6;
}

/* Piccolo tocco di stile per l'H1 della pagina portfolio */
.portfolio-hero .HOMMY {
    margin-bottom: 20px;
    /* Opzionale: aggiungi un leggero gradiente anche qui per coerenza */
}















/* CONTATTI */

.contact-card, .contact-form {
    background: var(--secondary);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-light);
}

.form-control {
    background: var(--bg-dark) !important;
    border: 1px solid var(--primary) !important;
    color: var(--text-light) !important;
    border-radius: 8px;
    padding: 12px;
}

.form-control:focus {
    box-shadow: 0 0 5px var(--accent);
    outline: none;
}

.form-control:focus, 
.form-control-custom:focus {
    outline: none; 

    /* Aumentiamo l'opacità del box-shadow per renderlo visibile */
    box-shadow: 0 0 0 4px ; 
    background: var(--text-light);
}

.contact-section {
    color: var(--text-light);
}

/* Forza tutti i campi del form a prendersi il 100% della larghezza del loro contenitore */
.form-control-custom, 
.form-select-custom, 
textarea.form-control-custom {
    width: 100% !important; /* L'importante è che siano al 100% */
    display: block;         /* Si assicura che si comportino come blocchi */
    box-sizing: border-box; /* Evita che bordi o padding facciano uscire il campo dai margini */
}

/* Opzionale: aggiungi un po' di spazio tra le colonne quando vanno a capo su mobile */
@media (max-width: 767px) {
    .col-md-6.mb-3 {
        width: 100%;
    }
}







/* CONTATTI */
/* --- STRUTTURA GABBIE --- */
.glass-card {
    background: rgba(255, 255, 255, 0.7); /* Bianco semi-trasparente */
        -webkit-backdrop-filter: blur(15px);

    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    color: var(--secondary);
}

/* --- INFO CARD (SINISTRA) --- */
.info-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.info-icon {
    font-size: 1.5rem;
    background: var(--secondary);
    padding: 10px;
    border-radius: 12px;
}

.info-text strong {
    display: block;
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.info-text p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}





/* --- FORM CARD (DESTRA) --- */
.form-control-custom {
    width: 100%;
    padding: 15px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--secondary);
    border-radius: 12px;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.form-control-custom:focus {
    outline: none;
    background: var(--text-light);
    box-shadow: 0 0 15px ;
}


@keyframes blink { 50% { opacity: 0; } }

/* Stile globale (valido per tutto il sito) */
.btn-global {
    text-decoration: none !important; /* Toglie la sottolineatura blu dei link */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
width: 100%;
}










/* --- TENDINA CUSTOM --- */
.form-select-custom {
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.6);
    border: var(--bg-dark);
    border-radius: 12px;
    color: #1e293b;
    appearance: none; /* Rimuove freccia default */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238b5cf6' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C2.185 5.355 2.403 5 2.812 5h10.376c.409 0 .627.355.361.658l-4.796 5.482a.5.5 0 0 1-.727 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-select-custom:focus {
    outline: none;
    background-color: white;

}

.btn-custom-wide:focus-visible {
    outline-offset: 4px; /* Crea il distacco necessario per non fondersi col nero */
    box-shadow: 0 0 15px var(--text-light); /* Alone luminoso per visibilità extra */
}

/* 1. Reset intelligente: togliamo l'outline brutto di default solo se il browser supporta focus-visible */
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* 2. Focus universale per tastiera (Target principale per l'accessibilità) */
/* Questo salva l'accessibilità del tuo sito */
/* Focus universale ad alto contrasto per sfondo scuro */
:focus-visible {
    outline: 3px solid #FFFFFF !important; /* Bianco puro per staccare dal fondo */
    outline-offset: 4px !important;       /* Distanzia l'anello dal tasto */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important; /* Effetto bagliore */
}

.btn-global:focus-visible {
    /* 1. Rende il focus visibile eliminando il default del browser */
    outline: 3px solid #FFFFFF !important; 
    
    /* 2. Fondamentale per l'accessibilità: stacca l'anello dal bordo del tasto */
    /* Senza questo, l'anello si fonde con il bordo var(--text-light) e non si vede */
    outline-offset: 4px;
    
    /* 3. Garantisce che il tasto rimanga leggibile anche se è "selezionato" */
    background-image: none !important; 
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
}

/* --- BOTTONE AGENZIA (Colonna sinistra) --- */
.btn-agency-link {
    display: block;
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px;
    border: 1px dashed var(--primary);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-agency-link:hover {
    background: var(--primary);
    color: white;
    border-style: solid;
    transform: translateY(-2px);
}

/* --- BOTTONE INVIO (Glow effect) --- */
.btn-submit-glow {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    color: var(--accent);
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-submit-glow:hover {
    box-shadow: 0 8px 25px --primary;
    transform: scale(1.02);
}

.form-check-label {
  color: var(--bg-dark);
}

.check {
    text-decoration: underline; 
    background-image: linear-gradient(90deg, var(--primary), var(--accent));
    
    /* Versione con prefisso per massima compatibilità (Chrome, Safari, iOS) */
    -webkit-background-clip: text; 
    
    /* Versione standard (da mettere per ultima) */
    background-clip: text; 
    
    color: transparent;
    display: inline-block;
    font-weight: 1000; /* Nota: assicurati che il tuo font supporti il peso 1000, altrimenti si fermerà a 700 o 900 */
}

















/* Animazione di switch */
.fade-out-custom {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}










.btn-custom-wide {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    /* Dimensioni */
    min-width: 180px; 
    padding: 14px 28px;
    margin: 0 5px;
    
    /* Estetica Base */
    background-color: var(--bg-dark);
    /* Se non hai un'immagine o gradiente, commentalo o rimuovilo */
    /* background-image: none; */ 

    border: 2px solid var(--text-light);
    border-radius: 12px;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    z-index: 1;
    
    /* Transizione fluida */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s ease;
}




/* L'onda di colore che esplode dal centro usando i tuoi colori */
.btn-custom-wide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary) 0%, var(--accent) 100%);
    
    /* Invece di partire da un punto, lo teniamo pronto ma invisibile */
    transform: scaleX(0); 
    transform-origin: left; /* L'onda partirà da sinistra verso destra */
    opacity: 0;
    z-index: -1;
    
    transition: transform 0.5s ease, opacity 0.3s ease;
}

/* Riflesso che attraversa */
.btn-custom-wide::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(30deg);
    z-index: 0;
    transition: all 0.6s ease;
}

/* STATO HOVER */
.btn-custom-wide:hover {
    transform: scale(1.05) translateY(-3px);
    border-color: var(--accent); /* Il bordo diventa Rosa */
    color: var(--text-light) !important;
}

.btn-custom-wide:hover::before {
    transform: scaleX(1); 
    opacity: 1;
}

.btn-custom-wide:hover::after {
    left: 150%;
}







/* 404 */

.vh-100 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.error-text-box {
    max-width: 500px; /* Evita che il testo si allarghi troppo su schermi grandi */
    margin-top: -20px; /* Avvicina il testo al numerone 404 */
}

.error-code {
    font-family: var(--font-code);
    font-size: clamp(7rem, 25vw, 12rem);
    font-weight: 800;
    margin: 0;
    line-height: 0.8;
}

/* Applica il riflesso solo se il browser lo supporta effettivamente */
@supports (-webkit-box-reflect: below) {
    .error-code {
        -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(255,255,255,0.1));
    }
}
/* Forza la centratura totale del contenitore pulsante */
.error-container .d-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Opzionale: se il pulsante ha display: inline-flex, 
   assicurati che non abbia float o posizionamenti strani */
.btn-custom-wide {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}



/* 3. Reset dei margini per il numero e i testi */
.error-code {
  font-family: var(--font-code);
    font-size: clamp(7rem, 25vw, 12rem);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.error-text-box {
    margin: 20px 0 !important;
}



/* Rimuovi margini che potrebbero sbilanciare il layout */
.error-container {

    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}



/* Assicurati che il pulsante non abbia margini laterali fissi */
.btn-custom-wide {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


.error-description {
    color: var(--text-light);
    opacity: 0.8;
}


/* Applica il riflesso SOLO se supportato e SOLO su desktop */
@media (min-width: 577px) {
    @supports (-webkit-box-reflect: below) {
        .error-code {
            -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(255,255,255,0.1));
        }
    }
}

/* Media query per mobile */
@media (max-width: 576px) {
    .error-text-box {
        padding: 0 15px;
    }
    /* Non serve più mettere -webkit-box-reflect: none; 
       perché grazie al @media sopra, su mobile non verrà proprio applicato. */
}




/* PRIVACY POLICY */

/* Gestione della pagina legale */
.legal-page {
    padding: 60px 0; /* Spazio sopra e sotto */
}

.legal-content h2 {
    color: var(--primary); /* Riprende il viola del tuo brand */
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.legal-content p {
    color: var(--text-light);
    opacity: 0.9;
    margin-bottom: 20px;
    text-align: left; /* Il testo legale è meglio allineato a sinistra */
}

/* Evita che il contenuto vada sotto la navbar fissa */
main.help {
    padding-top: 100px !important;
}

.legal-content ul { padding-left: 20px; margin-bottom: 20px; }
.legal-content li { margin-bottom: 10px; opacity: 0.8; }
.legal-content strong { color: var(--primary); }
.legal-link { color: var(--accent); text-decoration: underline; }


/* Selettore specifico per la lista dei browser nella Cookie Policy */
.legal-content ul {
    list-style: none;      /* Rimuove i pallini brutti */
    padding-left: 0;       /* Allinea a sinistra con il testo */
    margin: 25px 0;
}

.legal-content li {
    position: relative;
    padding-left: 30px;    /* Spazio per l'icona personalizzata */
    margin-bottom: 15px;
    font-size: 1.1rem;
}

/* Creiamo un pallino/icona personalizzato (Viola o Rosa) */
.legal-content li::before {
    content: '→';          /* Puoi usare anche un quadratino '■' o un check '✓' */
    position: absolute;
    left: 0;
    color: var(--accent);  
    font-weight: bold;
}

/* Stile dei link ai browser */
.legal-content li a {
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 1px dashed var(--primary); /* Linea tratteggiata sotto viola */
    transition: all 0.3s ease;
}

.legal-content li a:hover {
    color: var(--primary);
    border-bottom-style: solid; /* Diventa linea continua al passaggio */
    padding-left: 5px;          /* Piccolo movimento fluido */
}









/* ============================================================
   TABLET & MOBILE (Sotto i 992px)
   ============================================================ */
@media (max-width: 992px) {
    /* Riduciamo i margini mx-5 che su tablet iniziano a dare fastidio */
    .mx-5 { 
        margin-left: 1.5rem !important; 
        margin-right: 1.5rem !important; 
    }

h1, h2, h3, p, a {
    -webkit-hyphens: none !important; /* Safari/iOS */
    -ms-hyphens: none !important;      /* IE/Edge */
    hyphens: none !important;          /* Standard (Sempre per ultimo) */
    
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

    /* 1. Distanzia le Sezioni principali */
    section {
        padding-top: 60px !important;    /* Spazio sopra la sezione */
        padding-bottom: 60px !important; /* Spazio sotto la sezione */
    }

    /* 2. Distanzia le Colonne (quando vanno una sotto l'altra) */
    .row > [class^="col-"] {
        margin-bottom: 30px; /* Aggiunge spazio sotto ogni colonna */
    }

    /* Rimuove il margine dall'ultima colonna per non sballare il padding della sezione */
    .row > [class^="col-"]:last-child {
        margin-bottom: 0;
    }

    /* 3. Distanzia i titoli dai paragrafi */
    h2 {
        margin-bottom: 25px !important;
    }

    /* 4. Fix specifico per le card (Sez 4) */
    .card {
        margin-bottom: 20px; /* Spazio tra le card nel layout a griglia */
    }

    
}



/* ============================================================
   MOBILE (Sotto i 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* 1. RESET TOTALE DEI MARGINI CHE ROMPONO IL LAYOUT */
    .row, .mx-5, .pl-5, .mx-4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 2. TESTI ALLINEATI A SINISTRA (Migliore leggibilità) */
    h1, h2, h3, p {
        text-align: left !important; /* Manteniamo la coerenza col desktop */
        white-space: normal !important;
        hyphens: auto; /* Opzionale: aiuta con le parole lunghe */
        -webkit-hyphens: auto;
hyphens: auto;
    }

    h1 { font-size: 2.2rem !important; line-height: 1.1; }
    h2 { font-size: 1.8rem !important; }
    p { font-size: 1.1rem !important; }

h1, h2, h3, p, a {
    -webkit-hyphens: none !important; 
    -ms-hyphens: none !important;      
    hyphens: none !important;          /* Standard messo per ultimo */
    
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}
    /* 3. FIX SEZIONE "MI CHIAMO PAOLA" (Immagine e Testo) */
    .chisonosez2 {
        max-width: 100%;
        padding: 0;
    }

    .imgprofile {
        height: auto;
        width: 100%;
        max-width: 100%; /* Occupa tutta la larghezza su mobile */
        margin-top: 20px;
        border-radius: 15px;
    }

    /* 4. CARD (Sezione 4) */
    /* Le card tornano a tutta larghezza ma con testo a sinistra */
    .col-md-6.col-lg-3 {
        padding: 10px !important;
    }

    /* 5. BOTTONI */
    .btn-custom-wide {
        width: 100%; /* Il bottone a tutta larghezza è più facile da cliccare col pollice */
        text-align: center;
    }

    section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

.help h1, 
    .help p {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.filter-nav {
        gap: 8px;             /* Stringiamo un po' il gap per guadagnare spazio */
    }
    
    .filter-nav button {
        font-size: 0.9rem;    /* Leggermente più piccoli per farne stare di più */
        padding: 8px 15px;
    }

/* Stile base delle card nel portfolio per l'animazione */
.portfolio-item {
    opacity: 1;
    transform: scale(1);
    max-width: 500px; /* Imposta un valore indicativo vicino alla larghezza reale della colonna */
    max-height: 800px; /* Imposta un valore indicativo vicino all'altezza reale della card */
    transition: 
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: visible;
    overflow: hidden;
}

/* Stato nascosto: la card sfuma, si rimpicciolisce e si comprime */
.portfolio-item.hidden {
    opacity: 0;
    transform: scale(0.85);
    max-width: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    visibility: hidden;
    pointer-events: none; /* Impedisce di cliccare la card mentre scompare */
}




/* 1. Forza il contenitore principale */
    footer, 
    .footer-content, 
    .footer-section {
        text-align: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. Forza i titoli h3 e i paragrafi p */
    footer h3, 
    footer p, 
    .footer-section h3, 
    .footer-section p {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* 3. Forza le liste (Navigazione e Contatti) */
    .footer-links {
        text-align: center !important;
        padding: 0 !important;
        list-style-type: none !important;
        width: 100% !important;
    }

    .footer-links li {
        text-align: center !important;
        width: 100% !important;
    }

    .footer-links a {
        display: inline-block; /* Permette la centratura corretta */
        width: auto;
    }

    /* 4. Fix specifico per il logo */
    .nav-logofooter {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .nav-logofooter img {
        margin: 0 auto !important;
    }

    /* 5. Centra il pallino della disponibilità */
    .availability {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px;
    }

        .my-menu-btn { display: flex; }

    .nav-links {
      width: 100%;
        left: 0;
        margin: 0;
        display: none; /* Inizialmente nascosto */
        flex-direction: column;
        position: absolute;
        top: 100px; left: 0; width: 100%;
        background: var(--bg-dark);
        padding: 20px 0;
        text-align: center;
    }

.nav-links.active {
    display: flex !important;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    background: #17171a;
    z-index: 9999;
}

  .help h2 {
    font-size: 1.8rem;
  }
  .help .row.mb-4 p {
    font-size: 1.1rem;
  }

    .HOMMY {
        font-size: 2.5rem; /* Si rimpicciolisce sul telefono */
    }
    
    .d-flex.gap-3 {
        flex-direction: column; /* I pulsanti si mettono uno sopra l'altro se lo schermo è stretto */
        width: 100%;
        padding: 0 20px;
    }
    
    .btn-custom-wide {
        width: 100%; /* Pulsanti a larghezza piena su mobile */
    }

}