/*
 Theme Name: FRG Child
 Template: Divi
*/


/* ==========================================================================
   FR Brand — Stili Globali
   Francesco Rotondo · francescorotondo.it

   INDICE CLASSI
   -------------

   TESTO GRADIENTATO (solo estetico, nessun link)
   .fr-grad-ra         Gradiente rosso → arancione, animato al reveal
   .fr-grad-ag         Gradiente arancione → giallo, animato al reveal

   TESTO GRADIENTATO CON LINK (su tag <a>)
   .fr-grad-ra-link    Come fr-grad-ra + hover inverte direzione
   .fr-grad-ag-link    Come fr-grad-ag + hover inverte direzione

   HIGHLIGHT (solo estetico, nessun link)
   .fr-hl-ra           Highlight rosso → arancione (testo bianco)
   .fr-hl-ag           Highlight arancione → giallo (testo nero)

   HIGHLIGHT CON LINK (su tag <a>)
   .fr-hl-ra-link      Come fr-hl-ra + hover inverte gradiente
   .fr-hl-ag-link      Come fr-hl-ag + hover inverte gradiente

   PULSANTI (su modulo pulsante Divi)
   .fr-btn-text        Testo con freccia diagonale ↗, underline hover
   .fr-btn-text-fwd    Testo con chevron avanti ›, underline hover
   .fr-btn-text-back   Testo con chevron indietro ‹, underline hover
   .fr-btn-dark        Pulsante arrotondato su sfondo scuro, fill gradiente hover
   .fr-btn-light       Pulsante arrotondato su sfondo chiaro, fill gradiente hover

   MODIFICATORI PULSANTI
   .on-light           Da aggiungere ai btn-text su sezioni a fondo chiaro

   LAYOUT
   .sezione-fp         Sezione full-page centrata verticalmente (100vh)
   .fr-row-full        Riga che occupa 100vh, centrata
   .frg-project-hero   Hero di progetto, overflow visible per GSAP pin

   EFFETTI
   .fr-glass           Frosted glass (blur + trasparenza)

   VARIABILI CSS
   --fr-nero           #131620
   --fr-giallo         #FFD616
   --fr-arancione      #F15411
   --fr-rosso          #82070D
   --fr-bianco         #FFFFFF
   --fr-delay          Ritardo animazione reveal (default 500ms)
   --fr-duration       Durata animazione reveal (default 900ms)
   --fr-text-fallback  Colore testo prima del reveal (default #FFFFFF)
                       Su sezioni a fondo chiaro: style="--fr-text-fallback: #131620"
   ========================================================================== */
/* =====================================================
   FRG SCROLL PAGE — CLASSI DIVI
   =====================================================

   SECTION (classi CSS della section Divi)
   -------------------------------------------------------
   sezione-fp              → obbligatoria su ogni section
                             attiva il full-page scroll

   hs-section              → slide orizzontali con larghezza
                             configurata nel plugin (default
                             30vw), con dots e skip button.
                             su mobile sempre 90vw.
                             usare da sola per le card

   hs-section--half        → slide al 50/50 su desktop
                             (se sono 2, layout statico —
                             se sono 3+, scroll orizzontale)
                             sempre 100vw su mobile.
                             no dots, no skip

   hs-section--full        → slide 100vw su tutti i device,
                             scroll orizzontale sempre attivo.
                             no dots, no skip

   ROW (classi CSS della row Divi dentro una hs-section)
   -------------------------------------------------------
   hs-slide                → obbligatoria su ogni row
                             che deve essere una slide.
                             l'ordine nel DOM è l'ordine
                             di scorrimento

   ESEMPI
   -------------------------------------------------------
   Card 33%  → sezione-fp  hs-section
   50/50     → sezione-fp  hs-section  hs-section--half
   100% full → sezione-fp  hs-section  hs-section--full
     Row     → hs-slide
   ===================================================== */

/* ═══════════════════════════════════════════════════════════
   FRG SCROLL PAGE — CLASSI ANIMAZIONE (v1.8.1)
   Gestite da GSAP via JS, nessun CSS necessario.
   Questo file è solo una legenda di riferimento.
   ═══════════════════════════════════════════════════════════

   ── ANIMAZIONE BASE (una sola per elemento) ─────────────

   .frg-fade-in        → Dissolvenza (1.2s)
   .frg-slide-up       → Sale dal basso (0.6s)
   .frg-slide-down     → Scende dall'alto (0.6s)
   .frg-slide-left     → Entra da destra verso sinistra (0.6s)
   .frg-slide-right    → Entra da sinistra verso destra (0.6s)
   .frg-zoom-in        → Zoom da piccolo a normale (0.6s)
   .frg-zoom-out       → Zoom da grande a normale (0.6s)

   ── REVEAL (effetto tendina, una sola per elemento) ─────

   .frg-reveal-left    → Si svela da sinistra a destra (0.8s)
   .frg-reveal-right   → Si svela da destra a sinistra (0.8s)

   ── RITARDO (combinabile, uno per elemento) ─────────────

   .frg-delay-100      → 100ms
   .frg-delay-200      → 200ms
   .frg-delay-300      → 300ms
   .frg-delay-400      → 400ms
   .frg-delay-500      → 500ms

   ── DURATA (opzionale, sovrascrive le durate di default) ─

   .frg-fast            → 0.3s
   .frg-slow            → 1s

   ── ESEMPI ──────────────────────────────────────────────

   Titolo:      frg-slide-up
   Sottotitolo: frg-slide-up frg-delay-200
   Paragrafo:   frg-fade-in frg-delay-400
   Immagine:    frg-reveal-left frg-delay-300
   Card:        frg-zoom-in frg-delay-200 frg-slow

   ── DOVE SI APPLICA ─────────────────────────────────────

   Divi Builder → Modulo → Avanzate → CSS ID e Classi → CSS Class

   ── NOTE ────────────────────────────────────────────────

   • Togliere le animazioni native Divi (tab Animazione)
     dai moduli dentro le sezioni gestite dal plugin scroll.
   • Le classi funzionano SOLO dentro sezioni con classe
     "sezione-fp" (gestite da FRG Scroll Page).
   • I reveal (clip-path) non usano opacity: l'elemento
     è visibile, viene solo "scoperto" progressivamente.

   ═══════════════════════════════════════════════════════════ */

* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
*::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}


/* ==========================================================================
   VARIABILI GLOBALI
   ========================================================================== */

:root {
  --fr-nero:          #131620;
  --fr-giallo:        #FFD616;
  --fr-arancione:     #F15411;
  --fr-rosso:         #82070D;
  --fr-bianco:        #FFFFFF;
  --fr-delay:         500ms;
  --fr-duration:      900ms;
  --fr-text-fallback: #FFFFFF;
}


@font-face {
  font-family: 'Satoshi';
  src: url('https://rebrand.francescorotondographics.it/wp-content/uploads/et-fonts/Satoshi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}


@media (max-width: 767px) {
    .reverse-mobile.et_pb_row {
        display: flex;
        flex-wrap: wrap;
    }
    .reverse-mobile .et_pb_column:first-child {
        order: 2;
    }
    .reverse-mobile .et_pb_column:last-child {
        order: 1;
    }
}

/* ==========================================================================
   TIPOGRAFIA GLOBALE
   ========================================================================== */

body h1, body h2, body h3, body h4, body h5,
body .et_pb_module h1,
body .et_pb_module h2,
body .et_pb_module h3,
body .et_pb_module h4,
body .et_pb_module h5,
body .et_pb_section h1,
body .et_pb_section h2,
body .et_pb_section h3,
body .et_pb_section h4,
body .et_pb_section h5 {
  font-family: 'Satoshi', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.1;
  color: #fff;
}

h1, .et_pb_module h1 {
  font-size: clamp(36px, 2.25vw + 27.55px, 60px);
}

h2, .et_pb_module h2 {
  font-size: clamp(28px, 1.32vw + 23.07px, 42px);
}

h3, .et_pb_module h3 {
  font-size: clamp(22px, 0.94vw + 18.48px, 32px);
  line-height: 1.2;
}

h4, .et_pb_module h4 {
  font-size: clamp(18px, 0.56vw + 15.89px, 24px);
  line-height: 1.3;
}

h5, .et_pb_module h5 {
  font-size: clamp(14px, 0.56vw + 11.89px, 20px);
  line-height: 1.3;
}

h6,
.et_pb_module h6 {
  font-family: 'Space Grotesk', sans-serif;
font-size: clamp(11px, 0.19vw + 10.3px, 13px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b2b2b2;
}

p,
.et_pb_module p,
.et_pb_text p,
.et_pb_blurb p,
.et_pb_cta p {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(16px, 0.75vw + 13.18px, 24px);
  font-weight: 300;
  line-height: 1.2;
  color: #ffffff;
}

.small-text p {
	font-family: 'Satoshi', sans-serif;
  font-size: clamp(13px, 0.75vw + 13.18px, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: #ffffff;
}



/* Anti-flash FRG Scroll */
html { background: #131620; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* Sezione full-page centrata verticalmente */
.sezione-fp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Riga — altezza naturale, non forzata */
.et_pb_row {
  min-height: auto !important;
}

/* Riga 100vh centrata */
.fr-row-full {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
}

/* Mobile — colonne in colonna */
@media (max-width: 767px) {
  .et_pb_row {
    flex-direction: column !important;
    justify-content: center !important;
  }
  .et_pb_row .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Hero di progetto — overflow visible per GSAP pin */
.frg-project-hero,
.frg-project-hero.pin-spacer {
  overflow: visible !important;
}


/* ==========================================================================
   EFFETTI
   ========================================================================== */

.fr-glass {
  background: rgba(19, 22, 32, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.fr-glass-col {
  background: rgba(19, 22, 32, 0.2) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
}


/* ==========================================================================
   1. TESTO GRADIENTATO
   ========================================================================== */

.fr-grad-ra,
.fr-grad-ag,
.fr-grad-ra-link,
.fr-grad-ag-link {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: right center;
  transition: background-position var(--fr-duration) ease;
}

.fr-grad-ra,
.fr-grad-ra-link {
  background-image: linear-gradient(
    90deg,
    var(--fr-rosso),
    var(--fr-arancione) 50%,
    var(--fr-text-fallback) 50.1%
  );
}

.fr-grad-ag,
.fr-grad-ag-link {
  background-image: linear-gradient(
    90deg,
    var(--fr-arancione),
    var(--fr-giallo) 50%,
    var(--fr-text-fallback) 50.1%
  );
}

.fr-grad-ra.fr-revealed,
.fr-grad-ag.fr-revealed,
.fr-grad-ra-link.fr-revealed,
.fr-grad-ag-link.fr-revealed {
  background-position: left center;
}


/* ==========================================================================
   2. LINK GRADIENTATO — hover inverte direzione
   ========================================================================== */

.fr-grad-ra-link,
.fr-grad-ag-link {
  background-size: 300% 100%;
  text-decoration: none;
}

.fr-grad-ra-link {
  background-image: linear-gradient(
    90deg,
    var(--fr-arancione),
    var(--fr-rosso)         33.33%,
    var(--fr-rosso)         33.33%,
    var(--fr-arancione)     66.66%,
    var(--fr-text-fallback) 66.66%
  );
}

.fr-grad-ag-link {
  background-image: linear-gradient(
    90deg,
    var(--fr-giallo),
    var(--fr-arancione)     33.33%,
    var(--fr-arancione)     33.33%,
    var(--fr-giallo)        66.66%,
    var(--fr-text-fallback) 66.66%
  );
}

.fr-grad-ra-link.fr-revealed,
.fr-grad-ag-link.fr-revealed {
  background-position: center center;
}

.fr-grad-ra-link.fr-revealed:hover,
.fr-grad-ag-link.fr-revealed:hover {
  background-position: left center;
  transition: background-position 400ms ease;
}


/* ==========================================================================
   3. HIGHLIGHT
   ========================================================================== */

.fr-hl-ra,
.fr-hl-ag,
.fr-hl-ra-link,
.fr-hl-ag-link {
  padding: 0 3px;
  margin: 0 -3px;
  background-repeat: no-repeat;
  background-size: 0% 65%;
  background-position: left 68%;
  transition: background-size var(--fr-duration) ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fr-hl-ra,
.fr-hl-ra-link {
  background-image: linear-gradient(90deg, var(--fr-rosso), var(--fr-arancione));
  color: var(--fr-bianco);
}

.fr-hl-ag,
.fr-hl-ag-link {
  background-image: linear-gradient(90deg, var(--fr-arancione), var(--fr-giallo));
  color: var(--fr-nero);
}

.fr-hl-ra.fr-revealed,
.fr-hl-ag.fr-revealed,
.fr-hl-ra-link.fr-revealed,
.fr-hl-ag-link.fr-revealed {
  background-size: 100% 65%;
}


/* ==========================================================================
   4. HIGHLIGHT LINK — hover inverte gradiente
   ========================================================================== */

.fr-hl-ra-link,
.fr-hl-ag-link {
  text-decoration: none;
}

.fr-hl-ra-link {
  background-image: linear-gradient(
    90deg,
    var(--fr-rosso)     0%,
    var(--fr-arancione) 50%,
    var(--fr-rosso)     100%
  );
}

.fr-hl-ag-link {
  background-image: linear-gradient(
    90deg,
    var(--fr-arancione) 0%,
    var(--fr-giallo)    50%,
    var(--fr-arancione) 100%
  );
}

.fr-hl-ra-link.fr-revealed,
.fr-hl-ag-link.fr-revealed {
  background-size: 200% 65%;
  transition: background-size var(--fr-duration) ease, background-position 400ms ease;
}

.fr-hl-ra-link.fr-revealed:hover,
.fr-hl-ag-link.fr-revealed:hover {
  background-position: right 68%;
}


/* ==========================================================================
   5. BUTTON TEXT — base condivisa
   ========================================================================== */

.fr-btn-text.et_pb_button,
.fr-btn-text-fwd.et_pb_button,
.fr-btn-text-back.et_pb_button {
  font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(13px, 0.19vw + 12.3px, 15px);
	font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #b2b2b2 !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  padding-right: 1.8em !important;
  position: relative !important;
  background-image: linear-gradient(var(--fr-bianco), var(--fr-bianco)) !important;
  background-size: 0% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  transition: color 350ms ease, background-size 350ms ease !important;
}

.fr-btn-text.et_pb_button:hover,
.fr-btn-text-fwd.et_pb_button:hover,
.fr-btn-text-back.et_pb_button:hover {
  color: var(--fr-bianco) !important;
  background-size: 100% 1px !important;
}

.fr-btn-text.et_pb_button::before,
.fr-btn-text-fwd.et_pb_button::before,
.fr-btn-text-back.et_pb_button::before {
  display: none !important;
}


/* 5a. Freccia diagonale ↗ */

.fr-btn-text.et_pb_button::after {
  content: '' !important;
  font-family: initial !important;
	font-size: inherit !important;
  display: block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

.fr-btn-text.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translate(2px, -2px) !important;
}


/* 5b. Chevron avanti › */

.fr-btn-text-fwd.et_pb_button::after {
  content: '' !important;
  font-family: initial !important;
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

.fr-btn-text-fwd.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translateX(4px) !important;
}


/* 5c. Chevron indietro ‹ */

.fr-btn-text-back.et_pb_button {
  padding-right: 0 !important;
  padding-left: 1.8em !important;
  background-position: right bottom !important;
}

.fr-btn-text-back.et_pb_button::after {
  content: '' !important;
  font-family: initial !important;
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

.fr-btn-text-back.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translateX(-4px) !important;
}


/* 5d. Variante fondo chiaro — hover nero */

.fr-btn-text.on-light.et_pb_button,
.fr-btn-text-fwd.on-light.et_pb_button,
.fr-btn-text-back.on-light.et_pb_button {
  background-image: linear-gradient(var(--fr-nero), var(--fr-nero)) !important;
  background-size: 0% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
}

.fr-btn-text.on-light.et_pb_button:hover,
.fr-btn-text-fwd.on-light.et_pb_button:hover,
.fr-btn-text-back.on-light.et_pb_button:hover {
  color: var(--fr-nero) !important;
  background-size: 100% 1px !important;
}

.fr-btn-text-back.on-light.et_pb_button {
  background-position: right bottom !important;
}

.fr-btn-text.on-light.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
}

.fr-btn-text-fwd.on-light.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131620' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

.fr-btn-text-back.on-light.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131620' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}


/* ==========================================================================
   6. BUTTON DARK
   Fix flash: background-size 250%, blend morbido, transizione 600ms
   ========================================================================== */

.fr-btn-dark.et_pb_button {
  font-family: 'Satoshi', sans-serif !important;
font-size: clamp(12px, 0.38vw + 12.59px, 16px) !important; 
	color: var(--fr-bianco) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 12px 28px !important;
  background-image: linear-gradient(
    90deg,
    var(--fr-rosso),
    var(--fr-arancione) 35%,
    var(--fr-nero)      65%
  ) !important;
  background-size: 250% 100% !important;
  background-position: right center !important;
  transition: background-position 600ms ease-in-out !important;
}

.fr-btn-dark.et_pb_button::after {
  display: none !important;
}

.fr-btn-dark.et_pb_button:hover {
  background-position: left center !important;
  color: var(--fr-bianco) !important;
}


/* ==========================================================================
   7. BUTTON LIGHT
   Fix flash: background-size 250%, blend morbido, transizione 600ms
   ========================================================================== */

.fr-btn-light.et_pb_button {
  font-family: 'Satoshi', sans-serif !important;
font-size: clamp(12px, 0.38vw + 12.59px, 16px) !important;
  color: var(--fr-nero) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 12px 28px !important;
  background-image: linear-gradient(
    90deg,
    var(--fr-giallo),
    var(--fr-arancione) 35%,
    var(--fr-bianco)    65%
  ) !important;
  background-size: 250% 100% !important;
  background-position: right center !important;
  transition: background-position 600ms ease-in-out, color 600ms ease-in-out !important;
  text-decoration: none !important;
 
}


.fr-btn-light.et_pb_button::after {
  display: none !important;
}

.fr-btn-light.et_pb_button:hover {
  background-position: left center !important;
  color: var(--fr-nero) !important;
}


.fr-btn-dark.et_pb_button::before,
.fr-btn-light.et_pb_button::before {
  display: none !important;
}

.fr-btn-dark.et_pb_button::after,
.fr-btn-dark.et_pb_button:hover::after,
.fr-btn-light.et_pb_button::after,
.fr-btn-light.et_pb_button:hover::after {
  display: none !important;
}


@media (max-width: 480px) {
  .fr-btn-dark.et_pb_button,
  .fr-btn-light.et_pb_button {
    padding: 8px 20px !important;
  }
}


/* ==========================================================================
   8. BUTTON OUTLINE
   ========================================================================== */

.fr-btn-outline.et_pb_button {
font-family: 'Satoshi', sans-serif !important;
  font-size: clamp(12px, 0.38vw + 12.59px, 16px) !important;
  color: var(--fr-bianco) !important;
  border-radius: 100px !important;
  padding: 11px 27px !important;
  background: linear-gradient(var(--fr-nero), var(--fr-nero)) padding-box,
              linear-gradient(90deg, var(--fr-giallo), var(--fr-arancione)) border-box !important;
  border: 2px solid transparent !important;
  transition: background 400ms ease, color 400ms ease !important;
  text-decoration: none !important;
}
.fr-btn-outline.et_pb_button::before,
.fr-btn-outline.et_pb_button::after {
  display: none !important;
}
.fr-btn-outline.et_pb_button:hover {
  color: var(--fr-bianco) !important;
  background: linear-gradient(var(--fr-nero), var(--fr-nero)) padding-box,
              linear-gradient(90deg, var(--fr-bianco), var(--fr-bianco)) border-box !important;
}
@media (max-width: 480px) {
  .fr-btn-outline.et_pb_button {
    padding: 7px 19px !important;
  }
}



/* ==========================================================================
   9. BUTTON GROUP
   Bottoni affiancati, wrap su mobile
   ========================================================================== */

.fr-btn-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}


/* ==========================================================================
   11. BUTTON SOCIAL
   ========================================================================== */

.fr-btn-social {
  font-family: 'Satoshi', sans-serif !important;
	font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important;
	font-weight: 700 !important;
  color: var(--fr-nero) !important;
  border-radius: 100px !important;
  padding: 11px 24px 11px 44px !important;
  border: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
background-image: linear-gradient(
    90deg,
    var(--fr-giallo),
    var(--fr-arancione) 50%,
    var(--fr-giallo) 100%
  ) !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position 600ms ease-in-out !important;
}

.fr-btn-social svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  left: 18px !important;
}


.fr-btn-social:hover {
  background-position: right center !important;
  color: var(--fr-nero) !important;
}


/* ==========================================================================
   12. BUTTON SOCIAL TEXT
   ========================================================================== */

.fr-btn-social-text {
  font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(13px, 0.19vw + 12.3px, 15px);
	font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #b2b2b2 !important;
  text-decoration: none !important;
  background-color: transparent !important;
  padding: 4px 0 !important;
  padding-right: 1.8em !important;
  position: relative !important;
  background-image: linear-gradient(#fff, #fff) !important;
  background-size: 0% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  transition: color 350ms ease, background-size 350ms ease !important;
  display: inline-block !important;
}

.fr-btn-social-text:hover {
  color: #ffffff !important;
  background-size: 100% 1px !important;
}

.fr-btn-social-text::after {
  content: '' !important;
  display: block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
}

.fr-btn-social-text:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translate(2px, -2px) !important;
}


/* ==========================================================================
   13. GHOST
   ========================================================================== */



.fr-btn-ghost.et_pb_button {
  font-family: 'Satoshi', sans-serif !important;
  font-size: clamp(12px, 0.38vw + 12.59px, 16px) !important;
  color: var(--fr-bianco) !important;
  border-radius: 100px !important;
  padding: 11px 27px !important;
  background: transparent !important;
  border: 2px solid var(--fr-bianco) !important;
  transition: background 400ms ease, color 400ms ease, border-color 400ms ease !important;
  text-decoration: none !important;
}
.fr-btn-ghost.et_pb_button::before,
.fr-btn-ghost.et_pb_button::after {
  display: none !important;
}
.fr-btn-ghost.et_pb_button:hover {
  background: var(--fr-bianco) !important;
  color: var(--fr-nero) !important;
  border-color: var(--fr-bianco) !important;
}
@media (max-width: 480px) {
  .fr-btn-ghost.et_pb_button {
    padding: 7px 19px !important;
  }
}



/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .fr-grad-ra,
  .fr-grad-ag {
    background-position: left center;
    transition: none;
  }

  .fr-grad-ra-link,
  .fr-grad-ag-link {
    background-position: center center;
    transition: background-position 400ms ease;
  }

  .fr-hl-ra,
  .fr-hl-ag {
    background-size: 100% 65%;
    transition: none;
  }

  .fr-hl-ra-link,
  .fr-hl-ag-link {
    background-size: 200% 65%;
    transition: background-position 400ms ease;
  }

  .fr-btn-text.et_pb_button,
  .fr-btn-text-fwd.et_pb_button,
  .fr-btn-text-back.et_pb_button,
  .fr-btn-dark.et_pb_button,
  .fr-btn-light.et_pb_button {
    transition: none !important;
  }

}






/*Stili per creare colonne fluide*/
.formRow{
	margin:0 -15px;
}
	.formRow .full_width,
	.formRow .one_half,
	.formRow .one_third,
	.formRow .two_third,
	.formRow .one_fourth,
	.formRow .three_fourth,
	.formRow .one_fifth,
	.formRow .two_fifth,
	.formRow .three_fifth,
	.formRow .four_fifth,
	.formRow .one_sixth,
	.formRow .five_sixth{
		padding:0 15px !important;
		margin:0 0 15px !Important;
		float:left;
	}
	.formRow .full_width{width:100% !important;}
	.formRow .one_half{width:50% !important;}
	.formRow .one_third{width:33.333333% !important;}
	.formRow .two_third{width:66.666666% !important;}
	.formRow .one_fourth{width:25% !important;}
	.formRow .three_fourth{width:75% !important;}
	.formRow .one_fifth{width:20% !important;}
	.formRow .two_fifth{width:40% !important;}
	.formRow .three_fifth{width:60% !important;}
	.formRow .four_fifth{width:80% !important;}
	.formRow .one_sixth{width:16.666666% !important;}
	.formRow .five_sixth{width:83.333333% !important;}
	
	
	.formRow label{
		width:100%;
		display:block;
	}
	
		.formRow input:not([type=checkbox]),
		.formRow textarea,
		.formRow select{
			width:100%;
			display:block;
		}
	.formRow .wpcf7-list-item:first-of-type{
		margin-left:0 !important;
	}
.formRow:after{
	content:'';
	display:block;
	clear:both;
}

@media (max-width:767px){
	.formRow .full_width,
	.formRow .one_half,
	.formRow .one_third,
	.formRow .two_third,
	.formRow .one_fourth,
	.formRow .three_fourth,
	.formRow .one_fifth,
	.formRow .two_fifth,
	.formRow .three_fifth,
	.formRow .four_fifth,
	.formRow .one_sixth,
	.formRow .five_sixth{
		width:100% !important;
	}
}



/* CONTACT FORM */


.wpcf7 p{
	font-size: 14px !important;
}

.wpcf7 input, .wpcf7 textarea {
	background-color: transparent !important;
	border: 0px;
	border-bottom: 1px solid #fff;
}

.wpcf7 input {
	margin-bottom: 20px !important;
}

.wpcf7 input::placeholder, .wpcf7 textarea::placeholder {
	color: #fff !important;
	opacity: 0.7;
}

.wpcf7 textarea {
	height: 100px !important;
}
.wpcf7 button.wpcf7-submit {
  font-family: 'Space Grotesk', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #b2b2b2 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  padding-right: 1.8em !important;
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  cursor: pointer !important;
  background-image: linear-gradient(var(--fr-bianco), var(--fr-bianco)) !important;
  background-size: 0% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  transition: color 350ms ease, background-size 350ms ease !important;
}

.wpcf7 button.wpcf7-submit:hover {
  color: var(--fr-bianco) !important;
  background-size: 100% 1px !important;
}

.wpcf7 button.wpcf7-submit::before {
  display: none !important;
}

.wpcf7 button.wpcf7-submit::after {
  content: '' !important;
  font-family: initial !important;
  display: block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

.wpcf7 button.wpcf7-submit:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translate(2px, -2px) !important;
}

.wpcf7-form .submit-wrap {
  text-align: right !important;
	
}

.wpcf7-form .submit-wrap .full_width {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.wpcf7-form .form-note {
  color: #b2b2b2 !important;
  font-size: 0.75em !important;
  margin: 0 !important;
	margin-top: 20px !important;
}





/*
.wpcf7 input[type=submit] {
	background-color: #fff !important;
	color: #131620;
	padding: 10px 35px !important;
	border-radius: 20px;
	font-weight:300;
	font-size: 16px;	
}
*/

@media only screen and (max-width: 980px) {
    .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
        color: #fff !important;
    }
}

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before, .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: 'a' !important;
}



/* GESTIONE MARQUEE */

.frg-collaborazioni .et_pb_column {
    min-width: 0;
    overflow: hidden;
}

.frg-collaborazioni .frg-marquee-wrapper {
    width: 100%;
    max-width: 100%;
}

.frg-collaborazioni .frg-marquee-clip {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    .frg-marquee-clip {
        padding: 16px 0 !important;
        box-sizing: content-box !important;
    }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Gradiente ag sulle h4 
.et-l--footer .fr-grad-ag,
.et-l--footer .fr-grad-ag h4 {
    background: linear-gradient(90deg, #FFD616, #F15411) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Lascia che il builder sovrascriva i font-size 
.et-l--footer .et_pb_text h1,
.et-l--footer .et_pb_text h4,
.et-l--footer .et_pb_text h5,
.et-l--footer .et_pb_text p {
    font-size: unset !important;
}

.et-l--footer .et_pb_text h4 {
	padding-bottom: 2px !important;
}
*/


/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Gradiente ag sulle h4 — solo sul tag testo, non sul modulo */
.et-l--footer .fr-grad-ag h4 {
    background: linear-gradient(90deg, #FFD616, #F15411) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
}

/* Annulla il gradiente sul modulo padre */
.et-l--footer .fr-grad-ag {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* Font-size footer — solo sezione #info */
#info .et_pb_text h4 {
    font-size: 18px !important;
}

#info .et_pb_text p {
    font-size: 16px !important;
}

@media (max-width: 980px) {
    #info .et_pb_text h4 {
        font-size: 16px !important;
    }
    #info .et_pb_text p {
        font-size: 14px !important;
    }
}


#copyright .et_pb_text p {
    font-size: 14px !important;
}

@media (max-width: 980px) {
 
    #copyright .et_pb_text p {
        font-size: 12px !important;
    }
}


/* Stile modulo blog footer */

#blog-footer .et_pb_post {
	margin-bottom: 20px !important;
}

#blog-footer .et_pb_post h2 {
	padding: 0px !important;
	font-size: 16px !important;
}

@media (max-width: 980px) {
	#blog-footer .et_pb_post h2 {
	font-size: 14px !important;
}

}

#blog-footer .more-link {
      font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important;
	font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #b2b2b2 !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  padding-right: 1.8em !important;
  position: relative !important;
  background-image: linear-gradient(var(--fr-bianco), var(--fr-bianco)) !important;
  background-size: 0% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  transition: color 350ms ease, background-size 350ms ease !important;
	 display: inline-flex;
    align-items: center;
    gap: 6px;
}



#blog-footer .more-link:hover {
  color: var(--fr-bianco) !important;
  background-size: 100% 1px !important;
}

#blog-footer .more-link::before {
  display: none !important;
}


/* 5a. Freccia diagonale ↗ */

#blog-footer .more-link::after {
  content: '' !important;
  font-family: initial !important;
	font-size: inherit !important;
  display: block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

#blog-footer .more-link:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translate(2px, -2px) !important;
}


/* ===== Imposto altezza 100dvh a tutto il sito ==== */

@media (max-width: 768px) {
    body:not(.frg-scroll-page) .et_pb_section {
        min-height: 100dvh !important;
    }
}