/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

/*--
    Common Css
--*/
html { overflow-x: hidden; }

body {
  font-size: 14px;
  font-weight: 300;
  line-height: 25px;
  color: #3b4045;
  font-family: "Josefin Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  background-color: #fff;
  z-index: 999999;
  transition: opacity .35s cubic-bezier(.2,.8,.2,1), visibility .35s cubic-bezier(.2,.8,.2,1);
}
.preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
}

h1,h2,h3,h4,h5,h6 { font-weight: 300; margin: 0; }

h1,.h1 { font-size: 44px; line-height: 56px; }
h2,.h2 { font-size: 30px; line-height: 35px; }
h3,.h3 { font-size: 23px; line-height: 25px; }
h4,.h4 { font-size: 20px; line-height: 24px; font-weight: 400; }

p { font-size: 18px; line-height: 25px; }

ul { padding: 0; margin: 0; list-style: none; }
a { transition: all 0.2s ease-in-out 0s; }

a:focus, .btn:focus, .btn:active:focus { box-shadow: none; outline: 0; }
a, a:active, a:focus { text-decoration: none; }

.mt-100 { margin-top: 100px; }

.bg-1 { background-image: url(../images/call-to-action.jpg); }
.bg-orange { background: #f9a743; }

.bg-opacity { position: relative; }
.bg-opacity:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.section { padding: 100px 0; }

.font-size-60 { font-size: 60px; line-height: 1.2; }
@media (max-width: 575px) {
  .font-size-60 { font-size: 40px; }
}

.mb-10 { margin-bottom: 10px; }
.mb-40 { margin-bottom: 40px; }

.slick-slide { outline: 0; }

/*--
    custom heading
--*/
.text-center { text-align: center; }

.heading {
  text-align: center;
  color: #777;
  padding-bottom: 70px;
}
.heading h2 {
  color: #3c3c3c;
  padding-bottom: 15px;
  text-transform: capitalize;
  font-weight: 700;
  font-size: 40px;
  line-height: 40px;
}
.heading p {
  font-size: 17px;
  line-height: 24px;
  font-weight: 300;
}

.subheading {
  color: #3c3c3c;
  padding-bottom: 15px;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 32px;
  line-height: 45px;
}

/* Buttons */
.btn { border-radius: 0; text-decoration: none !important; }

.btn-main {
  color: #fff;
  border-radius: 30px;
  font-size: 18px;
  padding: 15px 40px;
  display: inline-block;
  background-color: #f9a743;
  box-shadow: 0 15px 40px rgba(249, 167, 68, 0.5);
  background-image: linear-gradient(bottom, rgba(255, 239, 206, 0) 0%, rgba(255, 239, 206, 0.25) 100%);
}
.btn-main:hover, .btn-main:focus { background-color: #f9a743; color: #fff; }

.btn-main-sm {
  padding: 12px 35px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}

/* ============================================================
   NAVIGATION (sticky sempre + effetto "premium")
   ============================================================ */

/* IMPORTANT: lascia la classe sticky-top nel tuo HTML */
.navigation{
  position: sticky;     /* rinforzo: sticky sempre */
  top: 0;
  z-index: 9999;
  background: rgba(255,255,255,0) !important; /* semi trasparente per far "passare" la sfumatura */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* box-shadow: 0 10px 24px rgba(0,0,0,.06); */
}

/* Se vuoi più bianca quando scolli, puoi gestirlo via JS con .is-scrolled */
.navigation.is-scrolled{
  background: rgba(255,255,255,.20) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.navbar-brand { color: #444; font-size: 25px; margin: 0; line-height: 1; }

.nav-link { font-size: 16px; font-weight: bold; padding: 10px 20px !important; }
.navbar-light .navbar-nav .nav-link { color: #444; }

.lang-list { border: 0; margin: 10px 20px; font-size: 16px; cursor: pointer; }

.navigation .dropdown-menu {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #f5f5f5;
}

@media (max-width: 991px) {
  .navigation .dropdown-menu {
    text-align: center;
    float: left !important;
    width: 100%;
    margin: 0;
  }
}

.navigation .dropdown-menu li:first-child { margin-top: 5px; }
.navigation .dropdown-menu li:last-child { margin-bottom: 5px; }
.navigation .dropdown-toggle::after { display: none; }
.navigation .dropdown-toggle > i { font-size: 14px; }

.navigation .dropleft .dropdown-menu,
.navigation .dropright .dropdown-menu { margin: 0; }

.navigation .dropleft .dropdown-toggle::before,
.navigation .dropright .dropdown-toggle::after {
  font-weight: bold;
  font-family: "themefisher-font";
  border: 0;
  font-size: 10px;
  vertical-align: 1px;
  display: inline-block;
}
.navigation .dropleft .dropdown-toggle::before { margin-right: 5px; content: "\f124"; }
.navigation .dropright .dropdown-toggle::after { margin-left: 5px; content: "\f125"; }

.navigation .dropdown-item {
  color: #444;
  padding: 0.6rem 1rem 0.35rem;
  font-weight: 600;
  font-size: 15px;
}

.navigation .dropdown-submenu.active > .dropdown-toggle,
.navigation .dropdown-submenu:hover > .dropdown-item,
.navigation .dropdown-item.active,
.navigation .dropdown-item:hover {
  background: #f9a743;
  color: white;
}

@media (min-width: 992px) {
  .navigation .dropdown-menu {
    transition: all 0.2s ease-in, visibility 0s linear 0.2s, transform 0.2s linear;
    display: block;
    visibility: hidden;
    opacity: 0;
    min-width: 200px;
    margin-top: 8px;
  }
  .navigation .dropdown:hover > .dropdown-menu {
    visibility: visible;
    transition: all 0.45s ease 0s;
    opacity: 1;
  }
}

.navbar-collapse.show {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 80px);
}
.navbar-toggler:focus { outline: 0; }

/* Badge */
.badge-primary { background-color: #f9a743; }

/* ============================================================
   ICONS
   ============================================================ */
.icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* ============================================================
   GALLERY (template)
   ============================================================ */
.gallery { padding-bottom: 100px; }
.gallery .owl-item { overflow: hidden; position: relative; }
.gallery .block { padding: 20px; position: relative; }
.gallery .block:hover .gallery-overlay { transform: scale(1); opacity: 1; border-radius: 0; }
.gallery .gallery-overlay {
  position: absolute;
  inset: 15px;
  background: rgba(255, 255, 255, 0.85);
  transform: scale(0.7);
  transition: 0.3s ease-in-out;
  z-index: 2;
  opacity: 0;
  border-radius: 50%;
}
.gallery .gallery-overlay .gallery-popup {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f9a743;
  padding: 5px 10px;
  border-radius: 40px;
  width: 50px;
  height: 50px;
}
.gallery .gallery-overlay .gallery-popup i {
  color: #fff;
  font-size: 30px;
  line-height: 40px;
  display: inline-block;
}

/* Testimonials */
.testimonials .testimonial-block { padding: 0 10px; }
.testimonials .testimonial-block i {
  font-size: 40px;
  display: inline-block;
  margin-bottom: 20px;
  color: #f9a743;
}
.testimonials .testimonial-block p {
  font-family: "Droid Serif", serif;
  font-size: 14px;
  color: #777;
}
.testimonials .testimonial-block .author-details { margin-top: 30px; }
.testimonials .testimonial-block .author-details img { border-radius: 50%; width: 50px; }
.testimonials .testimonial-block .author-details h4 {
  font-weight: 700;
  font-size: 20px;
  margin-top: 10px;
}

/* Call-to-action */
.call-to-action {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.input-group { margin-top: 30px; position: relative; }
.input-group .btn-submit {
  padding: 10.5px 40px !important;
  position: absolute;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  top: 0; right: 0;
}
.input-group input {
  height: 50px;
  border-radius: 40px;
  border: none;
  padding-left: 15px;
  box-shadow: none;
  display: table-cell;
}

/* Footer */
.footer-menu a { font-size: 14px; font-weight: 700; color: #444; padding: 10px; }

footer {
  text-align: center;
  background: #f4f4f4;
  padding: 50px 0;
}
footer .footer-logo { color: #555; display: block; }
footer p.copyright-text {
  font-weight: 300;
  font-size: 12px;
  color: #888;
  letter-spacing: 3px;
  margin-top: 15px;
}
footer p.copyright-text a { color: #282828; }
footer p.copyright-text a:hover { text-decoration: none; }

/* Forms */
.form-control {
  border: 1px solid #dadada;
  border-radius: 35px;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
}
.form-control:focus { border-color: #f9a743; box-shadow: none; }
.form-control::placeholder { font-size: 80%; }

textarea.form-control {
  height: 150px;
  padding-top: 15px;
}

.form {
  margin-bottom: 50px;
}

.btn-main .footer {
  color: #fff;
  border-radius: 30px;
  font-size: 18px;
  padding: 15px 40px;
  display: inline-block;
  background-color: #f9a743;
  box-shadow: 0 15px 40px rgba(249, 167, 68, 0.5);
  background-image: linear-gradient(bottom, rgba(255, 239, 206, 0) 0%, rgba(255, 239, 206, 0.25) 100%);
}

/* ============================================================
   MOTION SYSTEM
   ============================================================ */
:root{
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

/* Reveal base */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Hover card */
.hover-card{
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  border-radius: 14px;
  padding: 15px;
}
.hover-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* CTA glow */
.btn-glow{
  position: relative;
  overflow: hidden;
}
.btn-glow::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(59,130,246,.25), transparent 65%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  z-index:-1;
}
.btn-glow:hover::after{ opacity: 1; }

/* ============================================================
   HERO + TOP SPLASH (sfumatura SOLO qui, impercettibile)
   ============================================================ */

/* Wrapper SOLO HERO (nel tuo HTML: <div class="top-splash"> ... hero ... </div>) */
/* NAV sempre sticky e con trasparenza per far vedere la sfumatura sotto */
/* .navigation{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255,255,255,.55) !important; 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
} */

/* Wrapper SOLO HERO */
.top-splash{
  position: relative;
  background: #fff;
  isolation: isolate;
  /* IMPORTANT: niente overflow: clip/hidden qui, altrimenti la sfumatura non sale sotto la nav */
}

/* sfumatura principale: usa 100% (altezza hero) invece di un numero enorme */
.top-splash::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-220px;                  /* sale sopra la nav */
  height: calc(100% + 220px);  /* = solo hero + extra per coprire nav */
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(160,120,255,.58) 0%,
      rgba(160,120,255,.34) 28%,
      rgba(160,120,255,.18) 48%,
      rgba(160,120,255,.09) 66%,
      rgba(160,120,255,.04) 80%,
      rgba(255,255,255,0) 100%
    );
  pointer-events:none;
  z-index:0;
}

/* dissolvenza finale impercettibile (niente taglio netto) */
.top-splash::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 260px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.75) 60%,
    #fff 100%
  );
  pointer-events:none;
  z-index:1;
}

/* Contenuti sopra ai gradient */
.top-splash .hero{
  position: relative;
  background: transparent !important;
  z-index: 2;
}
.top-splash .hero .container{
  position: relative;
  z-index: 2;
}

/* Hero */
.hero{
  position: relative;
  background: transparent !important;
  z-index: 2; /* contenuto sopra il gradient */
}
.hero .container{ position: relative; z-index: 2; }

/* Hero visual principale */
.hero-visual{
  position: relative;
  animation: heroFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.18));
}

@keyframes heroFloat{
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* Zoom visual (se usi .zoom-visual) */
.zoom-visual{
  transform: scale(.92);
  transition: transform 1.1s var(--ease-out);
}
.zoom-visual.is-visible{
  transform: scale(1);
}

/* Feature visual drop shadow */
.feature-visual{
  transition: transform .25s ease-out;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.15));
}


/* alza tutto di ~50px senza conflitti */
#features .tilt-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateY(-50px);
}

#features .parallax-tilt{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s cubic-bezier(.2,.8,.2,1); /* per hover fluido */
}

@media (max-width: 767.98px){
  #features .tilt-wrap{ transform:none; }
}

/* Desktop */
#features .parallax-tilt{
  --baseY: -50;
  will-change: transform;
}

/* Mobile */
@media (max-width: 767.98px){
  #features .parallax-tilt{
    --baseY: -30;
  }
}


/* WHY: movimento + leggero rialzo */
#why .parallax-tilt{
  --baseY: -20;
  will-change: transform;
}

/* Mobile: ancora più stabile e un po’ più su */
@media (max-width: 767.98px){
  #why .parallax-tilt{
    --baseY: -10;
  }
}



/* --- Lampadina: animazioni luce --- */
/* Consiglio: metti questo CSS nel tuo file principale */

svg .bulb-core{
  transform-origin: 50% 60%;
  animation: bulbPulse 2.8s infinite;
}

svg .bulb-glow{
  transform-origin: 50% 60%;
  animation: glowPulse 2.8s infinite;
  /* Lasciamo screen + opacity già nello style inline, ma l'animazione la modula */
}

svg .bulb-hotspot{
  transform-origin: 50% 60%;
  animation: hotspotFlicker 2.8s infinite;
}

svg .bulb-texture{
  transform-origin: 50% 60%;
  animation: textureBreath 2.8s infinite;
}

/* Pulsazione “morbida” del bulbo */
@keyframes bulbPulse{
  0%   { opacity: .92; transform: scale(1); }
  8%   { opacity: 1;   transform: scale(1.01); }
  13%  { opacity: .95; transform: scale(1.005); }
  22%  { opacity: 1;   transform: scale(1.02); }
  55%  { opacity: .96; transform: scale(1.01); }
  74%  { opacity: 1;   transform: scale(1.02); }
  100% { opacity: .92; transform: scale(1); }
}

/* Bagliore: cresce e cala con micro-flicker (realistico) */
@keyframes glowPulse{
  0%   { opacity: .35; filter: blur(0px);   transform: scale(1); }
  20%  { opacity: .85; filter: blur(0.35px); transform: scale(1.03); }
  72%  { opacity: .95; filter: blur(0.45px); transform: scale(1.05); }
  100% { opacity: .35; filter: blur(0px);   transform: scale(1); }
}


/* Hotspot: “scintilla” (più rapido e nervoso) */
@keyframes hotspotFlicker{
  0%   { opacity: .55; transform: scale(1); }
  6%   { opacity: 1;   transform: scale(1.04); }
  10%  { opacity: .70; transform: scale(1.01); }
  18%  { opacity: 1;   transform: scale(1.06); }
  28%  { opacity: .60; transform: scale(1.02); }
  36%  { opacity: .95; transform: scale(1.05); }
  60%  { opacity: .65; transform: scale(1.02); }
  78%  { opacity: 1;   transform: scale(1.06); }
  100% { opacity: .55; transform: scale(1); }
}

/* Texture screen: respira appena (opzionale) */
@keyframes textureBreath{
  0%   { opacity: .55; }
  20%  { opacity: .75; }
  55%  { opacity: .60; }
  72%  { opacity: .80; }
  100% { opacity: .55; }
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce){
  svg .bulb-core,
  svg .bulb-glow,
  svg .bulb-hotspot,
  svg .bulb-texture{
    animation: none !important;
  }
}

svg .bulb-core,
svg .bulb-glow,
svg .bulb-hotspot,
svg .bulb-texture{
  transform-box: fill-box;
  transform-origin: center;
}


svg .ray{
  transform-box: fill-box;
  transform-origin: center;
  animation: rayTwinkle 2.8s infinite;
  opacity: .75;
}

/* svg .ray-1{ animation-delay: 0s; } */
svg .ray-2{ animation-delay: 0s; }
svg .ray-3{ animation-delay: .10s; }
svg .ray-4{ animation-delay: .20s; }
svg .ray-5{ animation-delay: .30s; }
svg .ray-6{ animation-delay: .40s; }
svg .ray-7{ animation-delay: .50s; }
svg .ray-8{ animation-delay: .60s; }
svg .ray-9{ animation-delay: .70s; }
svg .ray-10{ animation-delay: .80s; }


@keyframes rayTwinkle{
  0%   { opacity: .35; transform: scale(0.98); }
  18%  { opacity: .85; transform: scale(1.03); }
  55%  { opacity: .55; transform: scale(1.00); }
  72%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: .35; transform: scale(0.98); }
}

.hero-illustration svg{
  width: 400px;      /* desktop */
  max-width: 100%;
  height: auto;
}


@media (max-width: 768px){
  .hero-illustration svg{
    width: 300px;
  }
}

@media (max-width: 480px){
  .hero-illustration svg{
    width: 240px;
  }
}


/* ============================================================
   call to action
   ============================================================ */

.btn-icon .icon{
  width: 28px;
  height: 28px;
}



/* ============================================================
   switch button it/en
   ============================================================ */

.lang-switch{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
}

.lang-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  min-width:42px;
  padding:0 12px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  letter-spacing:.06em;
  color:#2f343a;
  opacity:.72;
}

.lang-pill:hover{ opacity:1; }

.lang-pill.active,
.lang-pill[aria-current="page"]{
  opacity:1;
  color:#111;
  background:#fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

/* Mobile: un filo più “presente” */
.lang-switch--mobile{
  justify-content:flex-end;
}