/* FIL-ITALIA About showcase: one clean slider implementation */
#about.about-section{
  --fil-about-green:#0a9c57;
  --fil-about-green-bright:#6ceaa5;
  --fil-about-red:#d62e49;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  padding:34px 28px 42px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 90% 5%,rgba(214,46,73,.16),transparent 29%),
    radial-gradient(circle at 4% 96%,rgba(31,202,113,.14),transparent 30%),
    linear-gradient(135deg,#020d09 0%,#06432d 57%,#061b13 100%)!important;
}

#about .fil-about-layout{
  width:min(1280px,100%)!important;
  margin:0 auto!important;
  display:block!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#about .fil-about-showcase-stage{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 54px minmax(300px,410px)!important;
  align-items:center!important;
  gap:clamp(16px,2.4vw,32px)!important;
  min-width:0!important;
}

#about .fil-about-layout-copy{
  min-width:0!important;
  display:block!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

#about .fil-about-layout-copy>h2{
  margin:0 0 23px!important;
  color:var(--fil-about-red)!important;
  font-size:clamp(.95rem,1.3vw,1.18rem)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  text-align:left!important;
}
#about .fil-about-layout-copy>h2::after{
  content:""!important;
  display:inline-block!important;
  width:38px!important;
  height:1px!important;
  margin:0 0 4px 12px!important;
  background:rgba(214,46,73,.6)!important;
}
#about .fil-about-layout-copy>h2::before{display:none!important;content:none!important}

#about .fil-about-story,
#about .fil-about-pathway{display:none!important}

#about .fil-about-slider,
#about .fil-about-slider-viewport{
  width:100%!important;
  min-width:0!important;
}
#about .fil-about-slider-viewport{
  overflow:hidden!important;
  background:transparent!important;
}

#about .about-grid.fil-about-slider-track{
  width:100%!important;
  max-width:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}

#about .about-grid.fil-about-slider-track>.about-card{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:430px!important;
  box-sizing:border-box!important;
  padding:0 6px 8px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  color:#fff!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left!important;
  cursor:default!important;
  transform:none!important;
}
#about .about-grid.fil-about-slider-track>.about-card[hidden]{display:none!important}
#about .about-grid.fil-about-slider-track>.about-card.is-active{
  display:block!important;
  animation:filAboutSlideIn .36s ease both!important;
}
#about .about-grid.fil-about-slider-track>.about-card::before{content:none!important;display:none!important}
#about .about-grid.fil-about-slider-track>.about-card::after{
  content:""!important;
  position:static!important;
  display:block!important;
  width:70px!important;
  height:4px!important;
  margin:22px 0 0!important;
  border-radius:99px!important;
  background:var(--fil-about-red)!important;
}
#about .about-grid.fil-about-slider-track>.about-card h3{
  margin:0 0 28px!important;
  max-width:760px!important;
  color:#fff!important;
  font-size:clamp(2.25rem,4.6vw,4.9rem)!important;
  font-weight:900!important;
  line-height:.95!important;
  letter-spacing:-.055em!important;
  text-transform:uppercase!important;
}
#about .about-grid.fil-about-slider-track>.about-card p{
  margin:0!important;
  max-width:760px!important;
  color:#f1f7f4!important;
  font-size:clamp(.95rem,1.25vw,1.12rem)!important;
  font-weight:500!important;
  line-height:1.66!important;
  white-space:pre-line!important;
}

#about .fil-about-slider-arrow{
  width:54px!important;
  height:54px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:50%!important;
  color:#fff!important;
  background:rgba(2,13,9,.25)!important;
  font-size:2rem!important;
  font-weight:400!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:transform .2s ease,background .2s ease,border-color .2s ease!important;
}
#about .fil-about-slider-arrow:hover{
  transform:translateY(-2px)!important;
  border-color:var(--fil-about-green-bright)!important;
  background:rgba(108,234,165,.14)!important;
}
#about .fil-about-slider-arrow:focus-visible{
  outline:3px solid rgba(108,234,165,.35)!important;
  outline-offset:4px!important;
}

#about .fil-about-story-media{
  width:min(100%,410px)!important;
  max-width:410px!important;
  min-height:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:18px!important;
  background:#0b3022!important;
  box-shadow:0 24px 70px rgba(0,0,0,.33)!important;
}
#about .fil-about-story-media::before,
#about .fil-about-story-media::after{display:none!important;content:none!important}
#about .fil-about-story-media img{
  width:100%!important;
  height:auto!important;
  max-height:500px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}

#about .fil-about-slider-tabs{
  width:min(1280px,100%)!important;
  margin:24px auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  overflow:visible!important;
  border:1px solid rgba(255,255,255,.36)!important;
  border-radius:14px!important;
  background:rgba(1,18,12,.35)!important;
}
#about .fil-about-slider-tab{
  position:relative!important;
  min-width:0!important;
  min-height:136px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px!important;
  align-items:center!important;
  gap:16px!important;
  padding:22px 28px!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid rgba(255,255,255,.27)!important;
  border-radius:0!important;
  color:#fff!important;
  background:transparent!important;
  text-align:left!important;
  cursor:pointer!important;
  transition:background .22s ease,transform .22s ease!important;
}
#about .fil-about-slider-tab:first-child{border-radius:13px 0 0 13px!important}
#about .fil-about-slider-tab:last-child{border-right:0!important;border-radius:0 13px 13px 0!important}
#about .fil-about-slider-tab:hover{background:rgba(255,255,255,.06)!important}
#about .fil-about-slider-tab.is-active{
  color:#fff!important;
  background:linear-gradient(135deg,#bd1735 0%,#df3550 100%)!important;
}
#about .fil-about-slider-tab.is-active::before{
  content:""!important;
  position:absolute!important;
  top:-12px!important;
  left:50%!important;
  width:22px!important;
  height:22px!important;
  transform:translateX(-50%) rotate(45deg)!important;
  background:#cf2642!important;
}
#about .fil-about-slider-tab-progress{
  position:absolute!important;
  left:0!important;
  bottom:0!important;
  width:0;
  height:4px!important;
  background:var(--fil-about-green-bright)!important;
  pointer-events:none!important;
}
#about .fil-about-slider-tab.is-active.is-timing .fil-about-slider-tab-progress{
  animation:filAboutTimer 9s linear forwards!important;
}
#about .fil-about-slider-tab-copy{min-width:0!important}
#about .fil-about-slider-tab-number{
  display:block!important;
  margin:0 0 10px!important;
  color:inherit!important;
  font-size:clamp(1.45rem,2.4vw,2.2rem)!important;
  font-weight:900!important;
  line-height:1!important;
}
#about .fil-about-slider-tab-label{
  display:block!important;
  color:inherit!important;
  font-size:clamp(.76rem,1.05vw,.98rem)!important;
  font-weight:900!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
}
#about .fil-about-slider-tab-icon{
  width:48px!important;
  height:48px!important;
  display:block!important;
  color:#fff!important;
}
#about .fil-about-slider-tab-icon svg{
  width:100%!important;
  height:100%!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#about .fil-about-social-cta{
  width:min(1280px,100%)!important;
  margin:20px auto 0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:32px!important;
  padding:24px 30px!important;
  box-sizing:border-box!important;
  border-top:1px solid rgba(255,255,255,.26)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  border-radius:0!important;
  color:#fff!important;
  background:linear-gradient(90deg,rgba(5,48,33,.78),rgba(3,22,15,.72))!important;
  box-shadow:none!important;
}
#about .fil-about-social-copy small{
  display:block!important;
  margin:0 0 7px!important;
  color:var(--fil-about-green-bright)!important;
  font-size:.68rem!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
}
#about .fil-about-social-copy strong{
  display:block!important;
  margin:0 0 5px!important;
  color:#fff!important;
  font-size:clamp(1.05rem,1.8vw,1.45rem)!important;
  line-height:1.15!important;
}
#about .fil-about-social-copy p{
  margin:0!important;
  color:#cde0d6!important;
  font-size:.84rem!important;
  font-weight:600!important;
  line-height:1.45!important;
}
#about .fil-about-social-links{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
#about .fil-about-social-link{
  min-height:48px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:11px 18px!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:999px!important;
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
  font-size:.78rem!important;
  font-weight:900!important;
  text-decoration:none!important;
  transition:transform .2s ease,background .2s ease!important;
}
#about .fil-about-social-link:hover{
  transform:translateY(-2px)!important;
  background:rgba(108,234,165,.13)!important;
}
#about .fil-about-social-link svg{
  width:19px!important;
  height:19px!important;
  fill:currentColor!important;
}
#aboutModal{display:none!important}

@keyframes filAboutSlideIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes filAboutTimer{from{width:0}to{width:100%}}

@media(max-width:1020px){
  #about .fil-about-showcase-stage{
    grid-template-columns:48px minmax(0,1fr) 48px minmax(245px,340px)!important;
    gap:18px!important;
  }
  #about .about-grid.fil-about-slider-track>.about-card{min-height:475px!important}
  #about .fil-about-slider-tab{min-height:124px!important;padding:18px!important;grid-template-columns:1fr 40px!important}
  #about .fil-about-slider-tab-icon{width:38px!important;height:38px!important}
}

@media(max-width:760px){
  #about.about-section{padding:25px 13px 36px!important}
  #about .fil-about-showcase-stage{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:
      "copy copy"
      "prev next"
      "media media"!important;
    gap:18px 12px!important;
  }
  #about .fil-about-layout-copy{grid-area:copy!important}
  #about .fil-about-slider-prev{grid-area:prev!important;justify-self:end!important}
  #about .fil-about-slider-next{grid-area:next!important;justify-self:start!important}
  #about .fil-about-story-media{
    grid-area:media!important;
    width:min(100%,330px)!important;
    max-width:330px!important;
    justify-self:center!important;
  }
  #about .about-grid.fil-about-slider-track>.about-card{
    min-height:0!important;
    padding:0 2px 6px!important;
  }
  #about .about-grid.fil-about-slider-track>.about-card h3{
    font-size:clamp(2.15rem,11vw,3.6rem)!important;
    margin-bottom:22px!important;
  }
  #about .about-grid.fil-about-slider-track>.about-card p{
    font-size:.9rem!important;
    line-height:1.62!important;
  }
  #about .fil-about-slider-tabs{
    grid-template-columns:1fr!important;
    border-radius:14px!important;
  }
  #about .fil-about-slider-tab{
    min-height:88px!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    padding:16px 18px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.25)!important;
    border-radius:0!important;
  }
  #about .fil-about-slider-tab:first-child{border-radius:13px 13px 0 0!important}
  #about .fil-about-slider-tab:last-child{border-bottom:0!important;border-radius:0 0 13px 13px!important}
  #about .fil-about-slider-tab.is-active::before{
    top:50%!important;
    left:-9px!important;
    transform:translateY(-50%) rotate(45deg)!important;
  }
  #about .fil-about-slider-tab-number{margin-bottom:5px!important;font-size:1.45rem!important}
  #about .fil-about-slider-tab-label{font-size:.78rem!important}
  #about .fil-about-social-cta{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:21px 18px!important;
  }
  #about .fil-about-social-links{flex-wrap:wrap!important}
}

@media(prefers-reduced-motion:reduce){
  #about .about-grid.fil-about-slider-track>.about-card.is-active,
  #about .fil-about-slider-tab.is-active.is-timing .fil-about-slider-tab-progress{animation:none!important}
}