/* ================================================================
   FORCE FEST 2K26 - PASS 3
   forcefest-pass3.css

   Technogenesis - Innovate. Create. Evolve.

   Scope: Navbar · Hero · Button System
   Philosophy: Evolved, not replaced. Recognisably Force Fest.
   ================================================================ */

:root {
  --p3-black: #060609;
  --p3-bg: #09090f;
  --p3-surface: #0e0e1a;
  --p3-card: #0b0b15;
  --p3-cyan: #00e5ff;
  --p3-cyan-dim: rgba(0, 229, 255, 0.14);
  --p3-cyan-line: rgba(0, 229, 255, 0.22);
  --p3-cyan-glow: rgba(0, 229, 255, 0.18);
  --p3-purple: #a855f7;
  --p3-purple-dim: rgba(168, 85, 247, 0.12);
  --p3-white: #ffffff;
  --p3-text: #dce8ee;
  --p3-text-mid: #7a9aaa;
  --p3-text-dim: #3d5566;
  --p3-border: rgba(0, 229, 255, 0.18);
  --p3-border-dim: rgba(255, 255, 255, 0.07);
  --p3-border-hair: rgba(255, 255, 255, 0.04);
  /* Display/heading font for the whole home page. forcefest-modern.css
     (--ff-display) and forcefest-pass2.css (--font-display) alias this. */
  --p3-font-d: "Tektur", "Segoe UI", sans-serif;
  --p3-font-b: "Sora", "Oxanium", sans-serif;
  --p3-r: 4px;
  --p3-t: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   1. NAVBAR - COMPLETELY NEW
   ================================================================
   Strategy:
   - Replace the qodef header entirely with our own fixed bar
   - Hide the original qodef header on desktop;keep mobile one
     for its hamburger/side-panel JS
   - Our navbar: fixed, blur backdrop, left logos, centre nav,
     right CTA - clean three-zone layout
   ================================================================ */

#qodef-page-header {
  display: none !important;
} /* Pull page content back up so it sits under our nav */
#qodef-page-outer {
  margin-top: 0 !important;
} /* Decorative homepage content should not become selectable while scrolling. */
.ff-unselectable,
.tg-about,
.ff-section-title {
  -webkit-user-select: none;
  user-select: none;
}
.ff-hero-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80%;
} /* ── FF-NAV SHELL ──────────────────────────────────────────────── */
#ff-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  background: rgba(6, 6, 9, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--p3-border-hair);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
} /* Thinner accent line when scrolled */
#ff-nav.ff-nav--scrolled {
  border-bottom-color: var(--p3-border-dim);
  background: rgba(6, 6, 9, 0.94);
} /* ── LEFT ZONE - LOGOS ─────────────────────────────────────────── */
.ff-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.ff-nav-logo img {
  height: 55px;
  width: auto;
  display: block;
  object-fit: contain;
}
.ff-nav-logo .ff-nav-logo-apeejay {
  height: 60px;
}
.ff-nav-title {
  display: none;
} /* Thin divider between the two logos */
.ff-nav-logo-sep {
  width: 1px;
  height: 22px;
  background: var(--p3-border-dim);
} /* ── CENTRE ZONE - NAV LINKS ───────────────────────────────────── */
.ff-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
} /* Each nav item */
.ff-nav-links > li {
  position: relative;
} /* Top-level link */
.ff-nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--p3-font-b);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--p3-text-mid);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--p3-r);
  transition:
    color var(--p3-t),
    background var(--p3-t);
  position: relative;
} /* Hover state */
.ff-nav-links > li > a:hover {
  color: var(--p3-white);
  background: rgba(255, 255, 255, 0.04);
} /* Active / current */
.ff-nav-links > li.ff-active > a,
.ff-nav-links > li > a:focus-visible {
  color: var(--p3-cyan);
} /* Active underline bar */
.ff-nav-links > li.ff-active > a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--p3-cyan);
  border-radius: 1px;
} /* Dropdown chevron icon */
.ff-nav-chevron {
  width: 10px;
  height: 10px;
  opacity: 0.4;
  transition:
    opacity var(--p3-t),
    transform var(--p3-t);
  flex-shrink: 0;
}
.ff-nav-links > li:hover .ff-nav-chevron,
.ff-nav-links > li:focus-within .ff-nav-chevron {
  opacity: 0.7;
  transform: rotate(-90deg);
} /* ── DROPDOWN PANEL ────────────────────────────────────────────── */
.ff-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: rgba(9, 9, 15, 0.97);
  border: 1px solid var(--p3-border-dim);
  border-top: 1px solid var(--p3-border);
  border-radius: 0 0 var(--p3-r) var(--p3-r);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 100;
} /* Wide dropdown for Events (two columns) */
.ff-dropdown--wide {
  min-width: 380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px 0;
}
.ff-nav-links > li:hover .ff-dropdown,
.ff-nav-links > li:focus-within .ff-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
} /* Dropdown top accent line */
.ff-dropdown::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--p3-cyan), transparent);
}
.ff-dropdown-col {
  padding: 0 4px;
}
.ff-dropdown a {
  display: block;
  font-family: var(--p3-font-b);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--p3-text-mid);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: var(--p3-r);
  margin: 0 4px;
  transition:
    color var(--p3-t),
    background var(--p3-t);
  white-space: nowrap;
}
.ff-dropdown a:hover {
  color: var(--p3-cyan);
  background: var(--p3-cyan-dim);
} /* ── RIGHT ZONE - CTA ──────────────────────────────────────────── */
.ff-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
} /* Results pill button */
.ff-nav-results {
  font-family: var(--p3-font-d);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--p3-cyan);
  text-decoration: none;
  padding: 7px 18px;
  border: 1px solid var(--p3-border);
  border-radius: var(--p3-r);
  background: var(--p3-cyan-dim);
  transition:
    background var(--p3-t),
    color var(--p3-t),
    border-color var(--p3-t);
  white-space: nowrap;
}
.ff-nav-results:hover {
  background: var(--p3-cyan);
  color: var(--p3-black);
  border-color: var(--p3-cyan);
} /* ── RESPONSIVE BREAKPOINTS ────────────────────────────────────── */
/* Note: the hamburger toggle + drawer (#ff-nav-mobile) are fully
   styled in ff-mobile-menu.css, which is loaded last and now owns
   all breakpoints for that component (including making it visible
   on desktop too). Only the centered desktop link row needs to be
   hidden here to make room for the drawer trigger on small screens. */
@media (max-width: 900px) {
  .ff-nav-links {
    display: none;
  }
} /* ================================================================
   2. HERO SECTION - COMPLETELY NEW
   ================================================================
   Strategy:
   - Hide the Revolution Slider entirely
   - Replace with our own full-viewport hero panel
   - Left: text stack with staggered entrance
   - Right: SVG network illustration
   - Background: photo with dark overlay + subtle grid
   ================================================================ */

#rev_slider_5_1_wrapper,
rs-module-wrap {
  display: none !important;
} /* ── HERO SHELL ────────────────────────────────────────────────── */
#ff-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--p3-bg);
  padding-top: 64px; /* navbar height */
} /* Background photo layer */
.ff-hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/BgHero.webp") no-repeat center center / cover;
  opacity: 0.6;
  z-index: 0;
} /* Grid overlay - subtle tech feel */
.ff-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  z-index: 1;
  pointer-events: none;
} /* Radial vignette - keeps edges dark */
.ff-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 40%,
    rgba(6, 6, 9, 0.7) 100%
  );
  z-index: 2;
  pointer-events: none;
} /* Bottom fade to body bg */
.ff-hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--p3-bg));
  z-index: 3;
  pointer-events: none;
} /* Inner two-column layout */
.ff-hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 100px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
} /* ── LEFT: TEXT STACK ──────────────────────────────────────────── */
.ff-hero-text {
  display: flex;
  flex-direction: column;
  gap: 0;
} /* Edition label */
.ff-hero-edition {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--p3-font-b);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p3-text-dim);
  margin-bottom: 20px;
} /* Dot before edition text */
.ff-hero-edition::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p3-cyan);
  box-shadow: 0 0 8px var(--p3-cyan);
} /* Main title */
.ff-hero-title {
  font-family: var(--p3-font-d);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--p3-white);
  margin: 0 0 10px;
  text-shadow: 0 0 60px rgba(0, 229, 255, 0.12);
} /* The "2K26" part in cyan */
.ff-hero-title-year {
  color: var(--p3-cyan);
} /* Theme subtitle */
.ff-hero-theme {
  font-family: var(--p3-font-d);
  font-size: clamp(1rem, 2.2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 8px;
} /* Tagline */
.ff-hero-tagline {
  font-family: var(--p3-font-b);
  font-size: clamp(0.75rem, 1.2vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 229, 255, 0.5);
  margin: 0 0 32px;
} /* Meta info row */
.ff-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--p3-border-hair);
}
.ff-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--p3-font-b);
  font-size: 0.82rem;
  color: var(--p3-text-mid);
  letter-spacing: 0.04em;
} /* Icon dot before each meta item */
.ff-hero-meta-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--p3-cyan);
  opacity: 0.6;
} /* Button row */
.ff-hero-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
} /* ── RIGHT: VISUAL ─────────────────────────────────────────────── */
.ff-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-hero-visual-inner {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
} /* Canvas for the network animation */
#ff-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
} /* Central hex badge */
.ff-hero-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(130px, 22%, 180px);
  aspect-ratio: 1;
  z-index: 5;
}
.ff-hero-badge-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: brightness(10);
}
.ff-hero-badge-label {
  font-family: var(--p3-font-d);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: #00ffff;
  text-transform: uppercase;
  margin-top: 6px;
  text-align: center;
} /* ── HERO ENTRANCE ANIMATIONS ──────────────────────────────────── */
@keyframes ff-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ff-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ff-hero-edition {
  animation: ff-fade-up 0.6s ease both;
  animation-delay: 0.1s;
}
.ff-hero-title {
  animation: ff-fade-up 0.6s ease both;
  animation-delay: 0.22s;
}
.ff-hero-theme {
  animation: ff-fade-up 0.6s ease both;
  animation-delay: 0.32s;
}
.ff-hero-tagline {
  animation: ff-fade-up 0.6s ease both;
  animation-delay: 0.4s;
}
.ff-hero-meta {
  animation: ff-fade-up 0.5s ease both;
  animation-delay: 0.5s;
}
.ff-hero-btns {
  animation: ff-fade-up 0.5s ease both;
  animation-delay: 0.6s;
}
.ff-hero-visual {
  animation: ff-fade-in 0.9s ease both;
  animation-delay: 0.35s;
} /* ── HERO RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .ff-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ff-hero-edition {
    justify-content: center;
  }

  .ff-hero-meta-item {
    justify-content: center;
  }

  .ff-hero-btns {
    justify-content: center;
  }

  .ff-hero-visual {
    display: none; /* hide on mobile - text is enough */
  }
}
@media (max-width: 480px) {
  .ff-hero-title {
    font-size: clamp(2.4rem, 12vw, 3.5rem);
  }
  .ff-hero-theme {
    font-size: 0.9rem;
  }
} /* ================================================================
   3. UNIFIED BUTTON SYSTEM
   ================================================================
   Two canonical variants + size modifier.
   Every button on the site uses one of these.
   ================================================================ */

button,
.ff-btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
} /* ── BASE ──────────────────────────────────────────────────────── */
.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--p3-font-b);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 26px;
  border-radius: var(--p3-r);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
  transition:
    background var(--p3-t),
    color var(--p3-t),
    border-color var(--p3-t),
    box-shadow var(--p3-t),
    transform 0.14s ease;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.ff-btn:active {
  transform: translateY(1px);
} /* ── PRIMARY: filled cyan ───────────────────────────────────────── */
.ff-btn-primary {
  background: var(--p3-cyan);
  border-color: var(--p3-cyan);
  color: var(--p3-black);
}
.ff-btn-primary:hover {
  background: #1aecff;
  border-color: #1aecff;
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.26);
  color: var(--p3-black);
} /* ── SECONDARY: outlined ────────────────────────────────────────── */
.ff-btn-secondary {
  background: transparent;
  border-color: var(--p3-border);
  color: var(--p3-text-mid);
}
.ff-btn-secondary:hover {
  border-color: var(--p3-cyan);
  color: var(--p3-cyan);
  background: var(--p3-cyan-dim);
} /* ── GHOST: minimal ─────────────────────────────────────────────── */
.ff-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--p3-text-dim);
  padding-left: 0;
  padding-right: 0;
}
.ff-btn-ghost:hover {
  color: var(--p3-cyan);
} /* Chevron arrow used inside ghost/secondary buttons */
.ff-btn-arrow {
  display: inline-block;
  transition: transform var(--p3-t);
}
.ff-btn:hover .ff-btn-arrow {
  transform: translateX(4px);
} /* ── SIZE MODIFIER ──────────────────────────────────────────────── */
.ff-btn-sm {
  font-size: 0.68rem;
  padding: 8px 18px;
}
.ff-btn-lg {
  font-size: 0.88rem;
  padding: 14px 36px;
  letter-spacing: 0.18em;
} /* ── APPLY TO EXISTING SITE BUTTONS ────────────────────────────── */

.btnrg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--p3-font-b) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: var(--p3-r) !important;
  background: transparent !important;
  border: 1px solid var(--p3-border-dim) !important;
  color: var(--p3-text-mid) !important;
  margin: 16px 0 18px !important;
  transition:
    border-color var(--p3-t),
    color var(--p3-t),
    background var(--p3-t) !important;
  cursor: pointer !important;
}
.btnrg:hover {
  border-color: var(--p3-border) !important;
  color: var(--p3-cyan) !important;
  background: var(--p3-cyan-dim) !important;
  box-shadow: none !important;
} /* Card View Details buttons */
.ff-card-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--p3-font-b) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--p3-text-dim) !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border: 1px solid var(--p3-border-hair) !important;
  border-radius: var(--p3-r) !important;
  background: transparent !important;
  transition:
    color var(--p3-t),
    border-color var(--p3-t),
    background var(--p3-t) !important;
}
.ff-card-btn:hover {
  color: var(--p3-cyan) !important;
  border-color: var(--p3-border) !important;
  background: var(--p3-cyan-dim) !important;
}
.ff-card-btn svg {
  transition: transform var(--p3-t) !important;
}
.ff-card-btn:hover svg {
  transform: translateX(3px) !important;
} /* Back to top button */
.ff-back-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--p3-font-b) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--p3-text-dim) !important;
  text-decoration: none !important;
  padding: 8px 16px !important;
  border: 1px solid var(--p3-border-hair) !important;
  border-radius: var(--p3-r) !important;
  background: transparent !important;
  transition:
    color var(--p3-t),
    border-color var(--p3-t),
    background var(--p3-t) !important;
}
.ff-back-top:hover {
  color: var(--p3-cyan) !important;
  border-color: var(--p3-border) !important;
  background: var(--p3-cyan-dim) !important;
} /* Side area Register button */
#qodef-side-area button[onclick] {
  font-family: var(--p3-font-b) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 11px 24px !important;
  border-radius: var(--p3-r) !important;
  background: transparent !important;
  border: 1px solid var(--p3-border) !important;
  color: var(--p3-text-mid) !important;
  cursor: pointer !important;
  transition:
    color var(--p3-t),
    border-color var(--p3-t) !important;
}
#qodef-side-area button[onclick]:hover {
  color: var(--p3-cyan) !important;
  border-color: var(--p3-cyan) !important;
} /* ── FOCUS VISIBLE ──────────────────────────────────────────────── */
.ff-btn:focus-visible,
.btnrg:focus-visible,
.ff-card-btn:focus-visible {
  outline: 1px solid var(--p3-cyan) !important;
  outline-offset: 3px !important;
} /* ================================================================
   4. SUPPRESS OLD MOBILE HEADER (keep it for JS side-panel)
   ================================================================ */

/* Keep the existing mobile header but make it invisible - 
   its JS side-panel opener still works via qodef.
   Our own ff-nav handles mobile UI. */
#qodef-page-mobile-header {
  display: none !important;
} /* ================================================================
   5. MISC CONSISTENCY FIXES NEEDED FOR PASS 3
   ================================================================ */

/* Marquee band pushed down to clear our new fixed nav
.qodef-text-marquee{
  margin-top: 0 !important;
}*/

#qodef-main-rev-holder {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
} /* Remove the dark spinner background showing through */
#qodef-page-spinner {
  background: var(--p3-black) !important;
} /* ── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ff-hero-edition,
  .ff-hero-title,
  .ff-hero-theme,
  .ff-hero-tagline,
  .ff-hero-meta,
  .ff-hero-btns,
  .ff-hero-visual {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.force-tagline {
  position: relative;
  width: 100%;
  text-align: center;
  margin: 55px auto 20px;
  padding: 10px 20px;
} /* =========================
   MAY THE FORCE
========================= */

.force-small {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
.force-small::before,
.force-small::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 280px;
  height: 1px;
  transform: translateY(-50%);
  opacity: 0.65;
}
.force-small::before {
  right: 100%;
  background: linear-gradient(to right, transparent, #20dcff);
}
.force-small::after {
  left: 100%;
  background: linear-gradient(to left, transparent, #a83cff);
}
.force-small span {
  position: relative;
  z-index: 2;
  padding: 0.2rem 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #edf1f7;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 9px;
  white-space: nowrap;
  border-radius: 0;
} /* =========================
   BE WITH YOU
========================= */

.force-main {
  position: relative;

  margin: 0;

  font-size: clamp(55px, 6vw, 86px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 1px;

  background: linear-gradient(90deg, #4ccfff 0%, #718fff 45%, #a63cff 100%);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0 0 12px rgba(55, 150, 255, 0.15))
    drop-shadow(0 8px 25px rgba(140, 60, 255, 0.15));
} /* Purple period */

.force-main span {
  -webkit-text-fill-color: #a83cff;
  filter: drop-shadow(0 0 12px rgba(168, 60, 255, 0.7));
} /* =========================
   THE NEON ENERGY LINE
========================= */

.force-main::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -18px;

  transform: translateX(-50%);

  width: 430px;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(70, 190, 255, 0.15) 12%,
    #477dff 35%,
    #8b4cff 50%,
    #b63cff 65%,
    rgba(180, 50, 255, 0.15) 88%,
    transparent 100%
  );

  box-shadow:
    0 0 53px rgba(80, 180, 255, 0.7),
    0 0 62px rgba(110, 80, 255, 0.8),
    0 0 77px rgba(150, 50, 255, 0.65),
    0 0 69px rgba(150, 50, 255, 0.3);

  opacity: 0.5;
} /* =========================
   INNOVATE • CREATE • EVOLVE
========================= */

.force-sub {
  margin-top: 40px;

  font-size: 13px;
  font-weight: 500;

  letter-spacing: 8px;

  color: #27dcff;

  text-shadow: 0 0 8px rgba(39, 220, 255, 0.25);
}
.force-sub b {
  color: #a63cff;

  margin: 0 9px;

  text-shadow: 0 0 8px rgba(166, 60, 255, 0.7);
} /* =========================
   MOBILE
========================= */

@media (max-width: 700px) {
  .force-tagline {
    margin-top: 35px;
  }

  .force-small::before,
  .force-small::after {
    width: 80px;
  }

  .force-small span {
    font-size: 12px;
    letter-spacing: 5px;
    padding: 0 10px;
  }

  .force-main {
    font-size: 42px;
  }

  .force-main::after {
    width: 250px;
    bottom: -14px;
  }

  .force-sub {
    margin-top: 32px;
    font-size: 9px;
    letter-spacing: 4px;
  }
}
.ff-event-search-wrap {
  position: relative;
}
.ff-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
}
#ff-event-search {
  padding-left: 42px;
}