/* ==========================================================================
   HCL Cyclothon — #ChangeYourGear Challenge
   Responsive rebuild on Bootstrap 5.1.3 grid/components.
   Colors/fonts/structure verified against the live (redesigned) Figma file.
   ========================================================================== */

:root{
  --hcl-orange:   #f5861f;
  --hcl-gold:     #f8be19;
  --hcl-navy:     #223f87;
  --hcl-teal:     #006c82;
  --hcl-blue:     #006bb6;
  --hcl-black:    #1a1a1a;
  --hcl-gray-border: #b3b3b3;
  --hcl-gray-text:   #7c7c7c;
  --hcl-tick:     #d9d9d9;
  --hcl-light-bg: #f4f4f4;
  --hcl-card-border: #e4e4e4;
  --hcl-faq-bg:   #ededed;
  --hcl-header-divider: #156db1;

  --font-display: "Geologica", sans-serif;
 
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden;}
body{
  margin: 0;
  font-family: var( --font-display);
  color: var(--hcl-black);
  background: #fff;
  overflow-x: hidden;
}
img{ max-width: 100%; }
a{ text-decoration: none; color: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
p{ margin: 0; }
.fx-text-blue{ color: var(--hcl-blue); }



/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.fx-h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
  color: var(--hcl-black); line-height: 1.2;
      margin-bottom: 10px;
}
.fx-h2-thin{ font-weight: 100; }
.fx-body{
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.45; color: var(--hcl-black);
}
.fx-hero .fx-gold{color: #FBD875}
.fx-intro {padding-top: 30px!important}
/* ==========================================================================
   REVEAL / ANIMATION UTILITIES
   ========================================================================== */
.fx-reveal, .fx-reveal-left{
  opacity: 0;
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
.fx-reveal{ transform: translateY(30px); }
.fx-reveal-left{ transform: translateX(-30px); }
.fx-reveal.in-view, .fx-reveal-left.in-view{ opacity: 1; transform: none; }
.fx-delay-1.in-view{ transition-delay: .15s; }
.fx-delay-2.in-view{ transition-delay: .3s; }
.fx-delay-3.in-view{ transition-delay: .45s; }
.fx-delay-4.in-view{ transition-delay: .6s; }
#progress .fx-reveal.in-view, .fx-reveal-left.in-view{margin-top: 0px;}
.fx-shimmer{
  background: linear-gradient(100deg, currentColor 30%, #fff 50%, currentColor 70%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fxShimmer 5s linear infinite;
}
@keyframes fxShimmer{ 0%{ background-position: 200% center; } 100%{ background-position: -200% center; } }
.fx-pulse{ animation: fxPulse 2.4s ease-in-out infinite; }
@keyframes fxPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  50%{ box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
@keyframes fxFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

/* ==========================================================================
   SECONDARY SUB-NAV
   Hidden by default — JS watches the hero and adds .is-visible the moment it
   scrolls fully out of view, at which point this fixes itself to the top.
   Removing .is-visible (scrolling back up past the hero) hides it again.
   ========================================================================== */
.fx-subnav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1020;
  background: var(--hcl-header-divider);
  padding: 10px 0;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .35s var(--ease-out-expo), opacity .3s ease, visibility 0s linear .35s;
}
.fx-subnav.is-visible{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .35s var(--ease-out-expo), opacity .3s ease, visibility 0s linear 0s;
  margin-top: 74px;
}
.fx-subnav-link{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 300; font-size: .9rem;
  color: #fff; padding: .55rem 1.1rem; border-radius: 0;
  border-bottom: 2px solid transparent;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.fx-subnav-link.active{
  background: var(--hcl-light-bg);
  color: var(--hcl-blue);
  font-weight: 600;
  border-bottom-color: var(--hcl-header-divider);
}
.fx-subnav-link:hover:not(.active){ color: #dcecf9; }
#insta{display: none;}
.state-wise select{

      width: 100%;
    height: 50px;
    background: #fff;
    border: 1px solid var(--hcl-tick);
    border-radius: 12px;
    padding: 0 1.3rem;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 1rem;
    color: #545861;
    transition: border-color .25s ease;

}
/* Contact Form 7 Custom Checkbox */
/* Contact Form 7 Custom Checkbox */
#join-the-challenge .fx-privacy-check .wpcf7-list-item {
    margin: 0;
}

#join-the-challenge .fx-privacy-check label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

#join-the-challenge .fx-privacy-check input[type="checkbox"]{
    -webkit-appearance:none;
    appearance:none;
    width:22px;
    height:22px;
    min-width:22px;
    border:2px solid #CFCFCF;
    border-radius:4px;
    background:#fff;
    cursor:pointer;
    position:relative;
    margin-top:2px;
    transition:.3s ease;
}

#join-the-challenge .fx-privacy-check input[type="checkbox"]:hover{
    border-color:var(--hcl-header-divider);
}

#join-the-challenge .fx-privacy-check input[type="checkbox"]:checked{
    background:var(--hcl-header-divider);
    border-color:var(--hcl-header-divider);
}

#join-the-challenge .fx-privacy-check input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:5px;
    height:10px;
    border:solid #fff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

#join-the-challenge .fx-privacy-check .wpcf7-list-item-label{
    font-size:18px;
    line-height:1.5;
    color:#222;
}
@media (max-width: 991.98px){
  .fx-subnav{ overflow-x: auto; }
  .fx-subnav .container-fluid{ justify-content: flex-start !important; flex-wrap: nowrap; }
}

/* ==========================================================================
   PILL BUTTONS
   ========================================================================== */
.fx-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius: 35px; padding: .55rem 1.75rem;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  white-space: nowrap; border: none;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.fx-pill1{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius: 35px; padding: .55rem 1.75rem;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem;
  white-space: nowrap; border: none;
      z-index: 9
  
}
.fx-pill-white{ background:#fff; color:#000; }
.fx-pill-white:hover{ background: var(--hcl-orange); color:#fff; transform: translateY(-3px); box-shadow:0 10px 24px rgba(245,134,31,.4); }
.fx-pill-blue{ background: var(--hcl-blue); color:#fff; font-weight:400; }
.fx-pill-blue1{ background: var(--hcl-blue); color:#fff; font-weight:400; }
.fx-pill-blue:hover{ background: var(--hcl-navy); color:#fff; transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,107,182,.35); }
.fx-pill-gold{ background: var(--hcl-gold); color:#000; }
.fx-pill-gold:hover{ background:#000; color: var(--hcl-gold); transform: translateY(-3px); box-shadow:0 10px 24px rgba(248,190,25,.4); }
.fx-step-btn img{ width:20px; height:20px; border-radius:50%; object-fit:cover; }

/* ==========================================================================
   HERO
   ========================================================================== */
.fx-hero{ min-height: 395px; display:flex; align-items:center;     margin-top: 70px;}
.fx-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center;
  z-index:0;
}
.fx-hero-content{ position:relative; z-index:1; padding: 2.5rem 0; }
.fx-hero-title{
  font-family: var(--font-display); font-weight:700; color:#fff;
  font-size: clamp(1.8rem, 1.3rem + 3vw, 2.75rem);
  line-height: 1.25; margin: 0 0 .5rem;
}
.fx-gold{ color: var(--hcl-gold); }
.fx-hero-subtext{
  font-family: var(--font-display); font-weight:300; color:#fff;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 2rem);
  margin: 0 0 1.5rem;
}
.fx-chip-white img{ filter: brightness(0) invert(1); }

/* ==========================================================================
   INTRO
   ========================================================================== */
.fx-intro{ position: relative; }
.fx-intro-float{
  position: fixed; top: auto; right: 22px; bottom: 82px; z-index: 899;
  opacity:0; visibility:hidden; transform: translateY(20px);
  transition: opacity .35s var(--ease-out-expo), visibility 0s linear .35s, transform .35s var(--ease-out-expo);
}
.fx-intro-float.show{ opacity:1; visibility:visible; transform:none; transition: opacity .35s var(--ease-out-expo), transform .35s var(--ease-out-expo); }

.fx-chip{ display:flex; align-items:flex-start; gap:.85rem; }
.fx-chip img{ width:48px; height:auto; flex:0 0 auto; }
.fx-chip strong{ display:block; font-family:var(--font-display); font-weight:500; font-size:1.05rem; color:var(--hcl-black); margin-bottom:4px; }
.fx-chip span{ font-family:var(--font-display); font-weight:300; font-size:.95rem; color:var(--hcl-black); }
.fx-chip-white strong, .fx-chip-white span{ color: #fff; }
.intro-chain{
      position: absolute;
    bottom: -57px;
    right: 0;
}
/* ==========================================================================
   CHALLENGES (flat design — verified: no card bg/shadow in source)
   ========================================================================== */
.fx-challenges{ background: var(--hcl-light-bg); }
.fx-challenge-row > [class^="col-"]{ position: relative; }
.fx-challenge-row{    --bs-gutter-x: 85px;}
@media (min-width: 992px){
  .fx-challenge-row > [class^="col-"]:not(:last-child)::after{
    content:""; position:absolute; top:8%; bottom:0%; right:0rem; width:1px; background: var(--hcl-gray-border);
  }
}
.fx-card{ height:100%; }
.fx-ribbon{
  display:inline-flex; align-items:center; min-height:45px; padding: .6rem 1.5rem;
  border-radius: 0 15px 0 0; background: var(--hcl-orange);
  font-family: var(--font-display); font-weight:700; font-size: clamp(.85rem,.8rem + .2vw,1rem); color:#fff;
}
.fx-heading-pill{
  display:flex; align-items:center; min-height:52px; width: 100%; max-width:348px; padding: .6rem 1.1rem;
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.1rem,1rem + .4vw,1.375rem); color:#fff;
  line-height: 1.2;
}
.fx-card-desc{
  margin-top: .85rem; font-family: var(--font-display); font-weight:300; font-size:1rem; line-height:1.5; color: var(--hcl-black);
}
@media (min-width: 992px){
  /* Reserve equal space for the longest description (card 1) so the divider/Winners/
     Rewards rows land at the same height in all 3 cards regardless of copy length. */
  .fx-card-desc{ min-height: 120px;     max-width: 345px; }
}
.fx-card-hr{ margin: 1.25rem 0; height:1px; background: var(--hcl-gray-border); }
.fx-card-meta{ display:flex; align-items:flex-start; gap: .85rem; margin-top: 1.1rem; }
.fx-card-meta-icon{ width:30px; height:auto; margin-top:2px; }
.fx-card-meta-icon.fx-icon-rewards{ width:27px; }
.fx-card-meta strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--hcl-black); margin-bottom:2px; }
.fx-card-meta ul li{
  font-family: var(--font-display); font-weight:300; font-size:1rem; line-height:1.6; color: var(--hcl-black);
  padding-left: 16px; position: relative;
}
.fx-card-meta ul li::before{ content:"\2022"; position:absolute; left:0; color: var(--hcl-black); }
.fx-product-row{ display:flex; gap: 9px; margin-top: 1.25rem;    justify-content: center; }
.fx-product-slot{
  flex: 0 0 auto; width: 90px; height: 98px; background:#fff; border-radius:20px;
  display:flex; align-items:center; justify-content:center; padding:.75rem;
  transition: transform .3s var(--ease-out-expo);
}
.fx-product-slot:hover{ transform: translateY(-4px); }
.fx-product-slot img{ max-width:100%; max-height:100%; object-fit:contain; }
.fx-illustrative-note{
  margin: 1.5rem 0 0; text-align:left;
  font-family: var(--font-display); font-weight:300; font-size:.8rem; color: #000;
}

/* ==========================================================================
   PARTICIPATE — DESKTOP ZIGZAG (lg+)
   Grid, not flex: row 1 holds "text above" content, row 2 holds all 5 circles,
   row 3 holds "text below" content. Every circle lives in grid-row 2, so they
   always align on one shared line no matter which side its text sits on —
   only the (independently auto-sized) row 1 / row 3 content shifts up/down.
   ========================================================================== */
.fx-zigzag{ margin-top: 3rem; }
.fx-zigzag-row{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto auto;
}
.fx-zig-top{
  grid-row: 1;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center;
}
.fx-zig-bottom{
  grid-row: 3;
  display:flex; flex-direction:column; align-items:center; text-align:center;
      position: relative;
    top: -30px;
}
.fx-zig-circle-cell{
  grid-row: 2; position: relative; z-index: 1;
  display:flex; align-items:center; justify-content:center;
}

/* Single continuous chain graphic (full-chain.svg) spanning circle-1's centre to circle-5's
   centre, sharing grid-row 2 with the circles so it centres on the same line as them.
   It fades in with the rest of the row via .fx-reveal. */
.fx-chain-track{
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 0;
  align-self: center;
  width: 79%;
  margin: 0 7.5%;
  pointer-events: none;
}
.fx-chain-track img{     width: 100%;
    height: auto;
    display: block;
    position: relative;
    left: 38px;
    top: 5px;
}

/* A stream of small highlights rides along fxChainPath — a centreline traced from
   the actual full-chain.svg artwork's pixels (see fx-chain-run circles' <mpath>) —
   so they travel exactly along every dip and peak of the real chain, like rollers
   moving around a running bike chain. */
.fx-chain-run{
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  display: none;
}
.fx-chain-run circle{
  filter: drop-shadow(0 0 3px rgba(255,255,255,.9));
}

.fx-step-circle{
  width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:600; font-size:1.75rem; color:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transition: transform .4s var(--ease-out-expo), box-shadow .4s ease;
  animation: fxCircleZoom 2.6s ease-in-out infinite;
}
.fx-step-circle:hover{ animation-play-state: paused; transform: scale(1.08) rotate(-4deg); }
@keyframes fxCircleZoom{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}
.fx-tick{ width:2px; height:40px; background: var(--hcl-tick); border-radius:2px; margin: 6px 0; }
.fx-step-heading{
  font-family: var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.3;
  color: var(--hcl-black); margin: 8px 0 6px;
}
.fx-step-desc{
  font-family: var(--font-display); font-weight:300; font-size:1rem; line-height:1.5;
  color: var(--hcl-black); margin-bottom: 10px;
}
.fx-zig-top .fx-step-btn, .fx-zig-bottom .fx-step-btn{ margin-top:.35rem; }

/* ==========================================================================
   PARTICIPATE — MOBILE / TABLET VERTICAL TIMELINE (below lg)
   ========================================================================== */
.fx-timeline{ position: relative; max-width: 560px; margin: 0 auto; }
.fx-timeline::before{
  content:""; position:absolute; left:29px; top:10px; bottom:10px; width:2px; background: var(--hcl-tick);
}
.fx-timeline-step{ position:relative; display:flex; gap:1.25rem; padding-bottom: 2.5rem; }
.fx-timeline-step-last{ padding-bottom:0; }
.fx-timeline-step .fx-step-circle{ width:58px; height:58px; font-size:1.2rem; position:relative; z-index:1; }
.fx-timeline-body{ text-align:left; padding-top:6px; }
.fx-timeline-body .fx-step-heading{ margin-top:0; }
#participate{position: relative;    padding-top: 70px !important;}
#participate::before{
content: '';
    background: url(../assets/images/participate-chain.png) no-repeat;
    height: 148px;
    width: 100%;
    position: absolute;
    left: 0;
    top: -57px;
} 
/* ==========================================================================
   TRACK YOUR PROGRESS
   ========================================================================== */
/* .fx-progress{ background: var(--hcl-light-bg); } */
.fx-progress-card{
  background: var(--hcl-light-bg); border:1px solid var(--hcl-card-border); border-radius:20px;
  padding: 2.5rem 2rem 0px;
}
.fx-progress-phone{ max-width: 260px; filter: drop-shadow(0 25px 40px rgba(0,0,0,.15)); animation: fxFloat 5s ease-in-out infinite; }

/* ==========================================================================
   INFO CARDS
   ========================================================================== */
.fx-info-card{
  border-radius: 20px; padding: 2.25rem; color:#fff; height:100%;
  transition: transform .4s var(--ease-out-expo), box-shadow .4s ease;
}
.fx-info-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 45px rgba(0,0,0,.2); }
.fx-info-card h3{ font-family: var(--font-display); font-weight:700; font-size:1.75rem; margin:0 0 1rem; }
.fx-info-card p{ font-family: var(--font-display); font-weight:200; font-size:18px; line-height:1.4; margin-bottom:.65rem; }
.fx-info-card-hashtag{font-weight: bold;}
.fx-info-card ul li{
      font-family: var(--font-display);
    font-weight: 200;
    line-height: 1.6;
    padding-left: 1.35rem;
    position: relative;
    margin-bottom: 4px;
    font-size: 18px;
}
.fx-info-card ul li::before{ content:"\2022"; position:absolute; left:.4rem; }

.fx-info-card-hashtag{ font-family: var(--font-display); font-weight:700!important; font-size:1.1rem; margin-top: .75rem; }

/* ==========================================================================
   CATCH THE MOMENTUM LIVE
   ========================================================================== */
.fx-momentum-caption{
  font-family: var(--font-display); font-weight:300; font-size:.9rem; color: var(--hcl-gray-text);
  max-width: 720px; margin: -1.5rem auto 2.5rem; line-height:1.5;
}
.fx-momentum-row{ max-width: 1144px; margin: 0 auto; position: relative; padding-bottom: 2.75rem; }
.fx-momentum-item{ position: relative; transition: transform .35s var(--ease-out-expo); }
.fx-momentum-item:hover{ transform: translateY(-6px); }
.fx-momentum-phone{
  position: relative; z-index: 2; width: 100%; height: auto; display:block; pointer-events:none;
}
.fx-momentum-row::after{    content: '';
    position: absolute;
    width: 100%;
    height: 62px;
    top: auto;
    bottom: calc(2.75rem - 12px);
    background: #fff;
    z-index: 9;
    pointer-events: none;}

/* Owl Carousel — nav arrows / dots restyled to match the brand palette */
.fx-momentum-row .owl-nav{ position:absolute; top:38%; left:0; right:0; z-index:10; pointer-events:none; }
.fx-momentum-row .owl-nav .owl-prev,
.fx-momentum-row .owl-nav .owl-next{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:50%; pointer-events:auto;
  background: var(--hcl-blue) !important; color:#fff !important;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1; box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: background .25s ease, transform .25s var(--ease-out-expo);
}
.fx-momentum-row .owl-nav .owl-prev{ left:-21px; }
.fx-momentum-row .owl-nav .owl-next{ right:-21px; }
.fx-momentum-row .owl-nav .owl-prev:hover,
.fx-momentum-row .owl-nav .owl-next:hover{ background: var(--hcl-navy) !important; transform: translateY(-50%) scale(1.08); }
.fx-momentum-row .owl-dots{ position:absolute; bottom:0; left:0; right:0; text-align:center; z-index:10; }
.fx-momentum-row .owl-dots .owl-dot span{
  background: var(--hcl-gray-border) !important; width:9px; height:9px; margin:5px;
}
.fx-momentum-row .owl-dots .owl-dot.active span{ background: var(--hcl-blue) !important; }
/* Reel content sits behind the phone frame image, showing through its transparent screen cutout */
.fx-reel{
  position: absolute; z-index: 1; inset: 3.5% 2.2%;
  border-radius: 11%/9%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-family: var(--font-display); color: #fff;top: 0;
}
.fx-reel-1{ background: linear-gradient(155deg, #4f5bd5 0%, #962fbf 30%, #d62976 55%, #fa7e1e 80%, #feda75 100%); }
.fx-reel-2{ background: linear-gradient(155deg, #223f87 0%, #006bb6 55%, #27a8e0 100%); }
.fx-reel-3{ background: linear-gradient(155deg, #f5861f 0%, #f8be19 100%); }
.fx-reel-4{ background: linear-gradient(155deg, #006c82 0%, #223f87 60%, #962fbf 100%); }
.fx-reel-progress{ position:absolute; top:6%; left:6%; right:14%; display:flex; gap:4px; }
.fx-reel-progress span{ flex:1; height:2.5px; border-radius:2px; background: rgba(255,255,255,.35); }
.fx-reel-progress span:first-child{ background: rgba(255,255,255,.95); }

.fx-reel-play{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 15%; aspect-ratio: 1; min-width: 34px; border-radius:50%;
  background: rgba(255,255,255,.22); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
  animation: fxReelPlayPulse 2.6s ease-in-out infinite;
}
.fx-reel-play svg{ width: 42%; height: 42%; margin-left: 8%; color:#fff;top:0 }
@keyframes fxReelPlayPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  50%{ box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.fx-reel-side{
  position:absolute; right:4%; bottom:22%; display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size: .8rem;
}
.fx-reel-icon{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.fx-reel-icon em{ font-style:normal; font-size:.55rem; font-weight:500; }
.fx-reel-footer{
  position:relative; padding: 10% 20% 8% 6%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.fx-reel-footer strong{ display:block; font-size:.8rem; font-weight:600; margin-bottom:2px; }
.fx-reel-footer span{ display:block; font-size:.68rem; font-weight:300; opacity:.9; }
.fx-momentum-divider{    margin-top: -50px;
    border: none;
    border-top: 1px solid var(--hcl-gray-border);
    z-index: 99;
    position: relative; }

/* ==========================================================================
   FAQ ACCORDION — Bootstrap accordion, restyled
   ========================================================================== */
   #faq{padding-bottom: 10px!important;}
.fx-faq-accordion .accordion-item{
  border:none; margin-bottom: 1rem; border-radius: 12px !important; overflow:hidden;
  background: var(--hcl-faq-bg);
}
.fx-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
  border: 1px solid var(--hcl-gray-border);
}
.fx-faq-accordion .accordion-button{
  font-family: var(--font-display); font-weight:700; font-size:1.1rem;
  color: var(--hcl-gray-text); background: var(--hcl-faq-bg);
  padding: 1.5rem 1.75rem ; box-shadow:none;
}
.fx-faq-accordion .accordion-button:not(.collapsed){
  color: var(--hcl-black); background: var(--hcl-faq-bg); box-shadow:none;padding-bottom: 5px;
}
.fx-faq-accordion .accordion-button:focus{ box-shadow:none; }
.fx-faq-accordion .accordion-button::after{
  width:34px; height:34px; background-color:#fff; border-radius:50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath d='M2 4 L6 8 L10 4' stroke='%231a1a1a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:center; background-size: 13px;
  transform: rotate(180deg);
  transition: transform .3s var(--ease-out-expo);
}
.fx-faq-accordion .accordion-button:not(.collapsed)::after{ transform: rotate(0deg); }
.fx-faq-accordion .accordion-body{
  font-family: var(--font-display); font-weight:300; font-size:1rem; line-height:1.6; color: var(--hcl-black);
  background:var(--hcl-faq-bg);   padding: 0rem 1.75rem 20px;
;
}

/* ==========================================================================
   SIGNUP FORM
   ========================================================================== */
.fx-input{
  width: 100%; height: 50px; background:#fff; border: 1px solid var(--hcl-tick); border-radius: 12px;
  padding: 0 1.3rem; font-family: var(--font-display); font-weight:300; font-size:1rem; color:#545861;
  transition: border-color .25s ease;
}
.fx-input:focus{ outline:none; border-color: var(--hcl-blue); }
.fx-input::placeholder{ color:#545861; }
.fx-textarea{ height: auto; min-height: 122px; padding-top: .9rem; resize: vertical; }
.fx-select{ appearance:none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3e%3cpath d='M1 1L7 7L13 1' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position: right 1.3rem center; }
.fx-privacy-check{ display:flex; align-items:center; gap:.75rem; padding-left:0; }
.fx-privacy-check .form-check-input{
  width: 22px; height: 22px; margin:0; background-color:#eaeaea; border-radius:4px; border:none; flex:0 0 auto;
}
.fx-privacy-check .form-check-input:checked{ background-color: var(--hcl-blue); }
.fx-privacy-check .form-check-label{ font-family: var(--font-display); font-weight:300; font-size:1rem; color:#000; }
.fx-recaptcha{ max-width: 300px; border-radius: 4px; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top{
  position: fixed; bottom: 22px; right: 22px; z-index: 900;
  width:46px; height:46px; border-radius:50%; border:none;
  background: var(--hcl-orange); color:#fff; font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(245,134,31,.4);
  opacity:0; visibility:hidden; transform: translateY(20px);
  transition: all .35s var(--ease-out-expo); cursor:pointer;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--hcl-navy); transform: translateY(-4px); }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */



   
   @media (max-width: 1280px){
     .fx-hero{min-height: 290px;}
     .fx-hero-content{padding: 0px 0 15px}
   }
@media (max-width: 991.98px){
  .fx-hero{ min-height: auto; }
  .fx-hero-img{ object-position: 75% center; }
  .fx-hero-content{ padding: 2.5rem 0; }
  .intro-chain{    bottom: -70px;}
  .fx-intro {overflow: hidden;}
}
@media (max-width: 767.98px){
  .fx-progress-card{ padding: 1.75rem 1.25rem; }
  .d-table{ margin-left:auto; margin-right:auto; }
}
@media (max-width: 575.98px){
  .fx-ribbon{ font-size:.8rem; padding:.5rem 1rem; }
  .fx-heading-pill{ font-size:1.05rem; }
  .fx-product-slot{ width: 70px; height: 80px; }
      .fx-hero-content {
        padding: 2.5rem 15px;
    }
    #progress{text-align: center;}
    .fx-infocards {padding-bottom: 0px!important;}
    .fx-reveal.in-view, .fx-reveal-left.in-view{margin-bottom: 10px!important;}
    #faq {
    padding-bottom: 0px !important;
}
.fx-faq-accordion .accordion-item:last-child{margin-bottom: 0px;}
#participate::before{    top: -95px;z-index: -1;}

}



.new-menu #menu-main-menu li:not(:last-child){position: relative;}
.new-menu #menu-main-menu li:not(:last-child):after{
  content: '';
  position: absolute;
  border-right: 1px solid #b3b3b3;
  top: 8px;
  height: 80%;
}
footer .footer-bottom p{text-align: center;font-size: 16px}
footer .footer-bottom p a{color: #fff}
footer .footer-bottom p a:hover{color: #006cb7}
footer .footer-bottom p span{margin: 0 10px}
footer .w-content ul li{    border-left: 1px solid #B3B3B3;    padding-left: 10px;}
footer .w-content a{    line-height: 26px;    font-size: 16px;    color: #B3B3B3;}
footer .w-content a:hover{color: #006cb7}
footer .w-content p {

    color: #fff;
    display: flex;
    line-height: 1.4;
    gap: 20px;
    font-size: 18px;
}
footer .w-content p a{color: #fff}
.foter-logo-wrapper {margin-bottom: 30px}
footer .foter-logo-wrapper img {
    max-width: 190px;
}
.social-section h4{
      color: #B3B3B3;
    font-size: 18px;
}
.social-section ul{
  display: flex;
    gap: 10px;
}
.social-section a{
      width: 40px;
    height: 40px;
    display: flex;
    background: #b3b3b3;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.social-section a:hover{
  background:#006cb7 ;
}
.social-section{
      display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
    height: 100%;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tablet only */
   footer .w-content{margin-bottom: 30px} 
}

@media(max-width: 576px){
  .new-menu #menu-main-menu li:not(:last-child):after{display: none;}
  footer .w-content{margin-bottom: 30px}
  .foter-logo-wrapper{text-align: center;}
  footer .w-content p{justify-content: start;
        margin: 0 auto;
        width: 300px;}
  .new-menu #menu-main-menu li:not(:last-child){
    border-bottom: 1px solid #b3b3b3;
  }
  .fx-hero{    margin-top: 58px;}
  .fx-subnav.is-visible{    margin-top: 58px;}
  .w-content p img{width: 20px}
  .fx-faq-accordion .accordion-button{
    font-size: 1rem;padding: 15}
    .fx-illustrative-note{line-height: 1.2}
    #subnav{display: none;}
    #participate {
    position: relative;
    padding-top: 41px !important;
}
#participate .container > .mb-5{margin-bottom: 20px!important}
.fx-info-card h3{    font-size: 1.5rem;}
.fx-hero {
        min-height: 80vh;
    }
        .fx-hero-img {
        object-position: 75% bottom;
    }
    .fx-hero-content{
              position: relative;
        top: -90px
    }
}