@font-face {
  font-family: 'FREAK Grotesk';
  src: url('../fonts/FREAKGrotesk-next-BOLD.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.menu .testo {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: 'FREAK Grotesk', sans-serif !important;
  padding: 80px 20px;
  overflow: visible !important;
}

/* Aumenta padding su desktop per titolo su 2 righe */
@media (min-width: 768px) {
  .menu .testo {
    padding: 80px 150px;
  }
  
  /* Riduce padding orizzontale per titolo "I nostri menù" per farlo stare su 2 righe */
  .menu .testo:first-of-type {
    padding: 80px 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
}

.menu .testo p {
  width: 100%;
  display: block;
  font-size: 15vw !important;
  font-family: 'FREAK Grotesk', sans-serif !important;
  font-weight: 700 !important;
  max-width: 800px !important;
  line-height: 0.8 !important;
}

/* Rimuove max-width dal primo titolo "I nostri menù" */
.menu .testo:first-of-type p {
  max-width: none !important;
}

/* Riduce font-size per titolo su mobile */
@media (max-width: 767px) {
  .menu .testo p {
    font-size: 15vw !important;    
    text-align: center !important;  
  }
  
  /* Riduce outline del titolo su mobile */
  .menu .testo:first-of-type {
    -webkit-text-stroke: 4px #ffffff !important;
    text-stroke: 4px #ffffff !important;
  }
}

.menu .descrizione p {
  line-height: 1.2;
  font-weight: 500;
  font-size: 1.5rem;
}

.menu p {
  line-height: 1.2;
  font-weight: 500;
}

.menu h2 {
  line-height: 0.8 !important;
}

.menu .blocks h2 {
  line-height: 0.8 !important;
}

.menu h2[style*="font-size: 10vw"] {
  line-height: 0.8 !important;
}

.menu h2[style*="font-size: 8vw"] {
  line-height: 0.8 !important;
}

main.menu h2 {
  line-height: 0.8 !important;
}

.menu section h2 {
  line-height: 0.8 !important;
}

.menu .blocks.block-titolo-grande {
  padding-top: 50px;
}


/* Padding-top per h2 "Ci pensiamo noi alle vostre esigenze!" */
.menu h2[style*="font-size: 3vw"] {
  padding-top: 30px;
}

/* Padding-top per h2 con font-size 4vw (Vegan, Low-Cal, Vegetarian, Gluten-Free, ...) */
.menu h2[style*="font-size: 4vw"] {
  padding-top: 30px;
}

/* Font-feature-settings per titolo "I nostri menù" */
.menu .testo p,
.menu .testo p[style] {
  font-feature-settings: "ss03";
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  line-height: 1.1;
  text-align: center !important;
  white-space: normal;
}

/* Margin-top negativo per titolo "Altre Experience" */
.menu h2[style*="font-size: 11vw"] {
  margin-top: -80px;
}

/* Margin-top negativo per titolo "Experience Colarusso" */
.menu h2[style*="6vw"][style*="0800ff"] {
  margin-top: -70px;
  padding-bottom: 30px;
}

/* Aumenta font-size per titolo "Experience Colarusso" su mobile */
@media (max-width: 767px) {
  .menu h2[style*="6vw"][style*="0800ff"] {
    font-size: 8vw !important;
  }
}

/* Margin-top negativo per titolo "Experience Kamprani" */
.menu h2[style*="6vw"][style*="00ff15"] {
  margin-top: -70px;
  position: relative;
  z-index: 10;
  padding-bottom: 30px;
}

/* Aumenta font-size per titolo "Experience Kamprani" su mobile */
@media (max-width: 767px) {
  .menu h2[style*="6vw"][style*="00ff15"] {
    font-size: 8vw !important;
  }
}

/* Allineamento bottoni a bandiera con i testi */
.menu .block-custom-button {
  text-align: left !important;
  display: block !important;
  justify-content: flex-start !important;
  padding-top: 20px !important;
}

/* Bottoni più grandi */
.menu .block-custom-button .btn {
  padding: 12px 40px !important;
  font-size: 2vw !important;
}

/* Animazione rotazione vector2.svg, vector-1.svg e vector-1duygfw.svg con effetto GIF (scattante) */
.menu .block-image img[src*="vector2.svg"],
.menu .block-image img[src*="vector-1.svg"],
.menu .block-image img[src*="vector-1duygfw.svg"] {
  animation: rotateStep 1.5s steps(2, end) infinite;
  transform-origin: center;
  display: inline-block;
  margin-top: -70px;
}

/* Posiziona vector-1duygfw.svg più in basso su mobile */
@media (max-width: 767px) {
  .menu .block-image img[src*="vector-1duygfw.svg"] {
    margin-top: -30px;
  }
  
  /* Padding-bottom su mobile per sezione Experience Colarusso */
  .menu .blocks.block-titolo-grande.block-text.block-custom_button {
    padding-bottom: 50px;
  }
  
  /* Testi dei bottoni: bold e più grandi su mobile */
  .menu .block-custom_button a,
  .menu .block-custom_button button,
  .menu .block-custom_button .btn {
    font-weight: bold !important;
    font-size: 1.2rem !important;
  }
  
  /* Aumenta font-size dei testi "Visualizza il Menù..." su mobile */
  .menu .blocks.block-text p {
    font-size: 1.2rem !important;
  }
}

@keyframes rotateStep {
  0%, 50% { transform: rotate(45deg); }
  50.1%, 100% { transform: rotate(-45deg); }
}

/* Animazione cambio colore per "Collezionale tutte!" */
@keyframes colorCycle {
  0% { color: #FF00EE; }
  25% { color: #0800FF; }
  50% { color: #FFF700; }
  75% { color: #00FF15; }
  100% { color: #FF00EE; }
}

/* Animazione a bandiera fluida e lenta */
@keyframes waveFlag {
  0%, 100% { transform: skewY(0deg) rotateX(0deg); }
  25% { transform: skewY(5deg) rotateX(2deg); }
  50% { transform: skewY(0deg) rotateX(0deg); }
  75% { transform: skewY(-5deg) rotateX(-2deg); }
}

.color-cycling {
  animation: colorCycle 6s infinite, waveFlag 3s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
  transform-style: preserve-3d;
}

/* Aumenta font-size della sezione descrizione solo su desktop */
@media (min-width: 768px) {
  .descrizione p[style*="opacity"] {
    font-size: 1.8rem !important;
  }
}

/* Aumenta font-size per testo "Visualizza il Menù..." */
.menu .block-text p {
  font-size: 2.5vw !important;
  font-weight: 450 !important;
}