/* ==========================================================================
   Design Quest Custom Stylesheet (Bootstrap 5 Extension)
   Design Tokens & Variables extracted from Figma
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&family=Unbounded:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Funnel+Display:wght@300..800&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* Colors */
  --brandPrimary: #8A38F5;
  --brandOnPrimary: #ffffff;
  --brandPrimaryVariant: #7125D3;
  --brandPrimaryVariant2: #5916B1;
  --brandPrimaryVariant3: #C293FF;
  --brandPrimaryVariant4: #F4EBFF;
  --brandSecondary: #000000;
  --brandOnSecondary: #B7B7B7;
  --brandSecondaryVariant: #878787;
  --brandSecondaryVariant2: #565656;

  --backgroundBackground: #ffffff;
  --backgroundSurfaceHighest: #f2f2f2;
  --backgroundSurfaceHigh: #eaeaea;
  --backgroundSurfaceLow: #f5f5f5;
  --backgroundSurfaceLowest: #181716;
  --backgroundSurfaceLowVariant: #D4D4D4;
  --backgroundsurfaceHighVariant: #000000;

  --textColorDefault: #181716;
  --textColorHigh: #525252;
  --textColorHighest: #252323;
  --textColorLow: #d4d4d4;
  --textColorLowest: #ffffff;
  --textColorLowVariant: #585554;
  --textColorLowestVariant: #8f8f8f;

  --iconColorDefault: #252323;
  --iconColorHigh: #8A38F5;
  --iconColorHighest: #000000;
  --iconColorLow: #f7f7f7;
  --iconColorLowest: #ffffff;

  --borderColorBorder: rgba(0, 0, 0, 0.08);
  --borderColorBorderVariant2: rgba(255, 255, 255, 0.2);
  --borderColorBorderVariant3: rgba(255, 255, 255, 0.04);

  --disableOnDisable: #8f8f8f;
  --disableDisable: #e1e4e8;

  --statusSuccess: #509711;
  --statusOnSuccess: #E2FFC8;
  --statusSuccessVariant: #CDFFA2;
  --statusOnSuccessVariant: #275300;
  --statusSuccessVariant2: #EDFBF3;
  --statusSuccessVariant2: #EEFBF4;
  --statusOnSuccessVariant2: #128546;

  --statusInfo: #08284E;
  --statusOnInfo: #B8D9FF;
  --statusInfoVariant: #407BBF;
  --statusOnInfoVariant: #012D43;

  --statusWarning: #E8A43D;
  --statusOnWarning: #FFD596;
  --statusWarningVariant: #FFD596;
  --statusOnWarningVariant: #FFBE5B;

  --statusError: #DC2626;
  --statusOnError: #FADEDE;
  --statusErrorVariant: #FADEDE;
  --statusOnErrorVariant: #DC2626;

  --fixedBlack: #181716;
  --fixedWhite: #ffffff;

  /* Font Family */
  --font-family-main: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Unbounded', 'Poppins', sans-serif;
  --font-family-tertiary: 'Caveat', 'Poppins', sans-serif;

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Font Styles */
  --font-style-normal: normal;
  --font-style-italic: italic;

  /* Font Sizes */
  --font-size-10px: 10px;
  --font-size-12px: 12px;
  --font-size-14px: 14px;
  --font-size-16px: 16px;
  --font-size-18px: 18px;
  --font-size-20px: 20px;
  --font-size-24px: 24px;
  --font-size-28px: 28px;
  --font-size-32px: 32px;
  --font-size-36px: 36px;
  --font-size-40px: 40px;
  --font-size-44px: 44px;
  --font-size-56px: 56px;
  --font-size-58px: 58px;
  --font-size-60px: 60px;
  --font-size-64px: 64px;
  --font-size-76px: 76px;

  /* Line Heights */
  --line-height-xs: 20px;
  --line-height-sm: 24px;
  --line-height-md: 28px;
  --line-height-lg: 32px;
  --line-height-xl: 48px;
  --line-height-2xl: 58px;
  --line-height-3xl: 84px;
  --line-height-4xl: 115px;

  /* Letter Spacing */
  --letter-spacing-xs: 0px;
  --letter-spacing-sm: 1px;
  --letter-spacing-md: 2px;
  --letter-spacing-lg: 3px;
  --letter-spacing-xl: 4px;
  --letter-spacing-2xl: 4px;

  /* Spacing */
  --spacing-0: 0px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 28px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 58px;
  --spacing-6xl: 80px;
  --spacing-7xl: 100px;
  --spacing-8xl: 120px;
  --spacing-9xl: 180px;

  /* Border Radius */
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-xl1: 50px;
  --border-radius-full: 400px;

  /* Shadows */
  --shadow-image-frame: 1px 1px 15px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Global & Utility Styles using Design Tokens
   ========================================================================== */

html,
body {
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  color: var(--textColorDefault);
  background-color: var(--backgroundBackground);
  overflow-x: clip;
  max-width: 100vw;
}

.text-dark {
  color: var(--textColorHighest);
}

.text-white {
  color: var(--textColorLowest);
}

.text-color-lowest-variant {
  color: var(--textColorLowestVariant) !important;
}

.text-brand-primary {
  color: var(--brandPrimary) !important;
}

/* Hero Section */
.hero-title {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-64px);
  line-height: var(--line-height-3xl);
  letter-spacing: var(--letter-spacing-xs);
}

h1,
.h1-title {
  font-family: var(--font-family-main);
  font-size: var(--font-size-56px);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-2xl);
  letter-spacing: var(--letter-spacing-xs);
}

.h1-title-variant {
  font-family: var(--font-family-main);
  font-size: var(--font-size-56px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-2xl);
  letter-spacing: var(--letter-spacing-xs);
}

.h1-title-variant-2 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-56px);
  font-weight: var(--font-weight-bold);
  font-style: var(--font-style-italic);
  line-height: var(--line-height-2xl);
  letter-spacing: var(--letter-spacing-xs);
}

h2,
.heading-2 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-40px);
  line-height: var(--line-height-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--textColorLowest);
}

.testimonial-quote-img {
  width: 104px;
  height: 77px;
  object-fit: contain;
}

h3,
.heading-3 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-32px);
  line-height: var(--line-height-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--textColorHighest);
}

h4,
.heading-4 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-24px);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lg);
  color: var(--textColorHighest);
}

.heading-4-variant {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-24px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-xs);
}

.heading-4-variant-2 {
  font-family: var(--font-family-tertiary);
  font-size: var(--font-size-24px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-xs);
}

.title-large {
  font-family: var(--font-family-main);
  font-size: var(--font-size-18px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-xs);
}

.title-large-variant-2 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-20px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-xs);
}

.title-medium {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-16px);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xs);
}

.title-small {
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-xs);
}

.body-large {
  font-family: var(--font-family-main);
  font-size: var(--font-size-18px);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xs);
}

.body-medium {
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-xs);
}

.body-small {
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-xs);
}

.label-small {
  font-family: var(--font-family-main);
  font-size: var(--font-size-12px);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-xs);
}

/* Buttons */
.btn-brand-primary {
  background-color: var(--brandPrimary);
  color: var(--brandOnPrimary);
  border-radius: var(--border-radius-full);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-medium);
  border: none;
  padding: 12px 28px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn-brand-primary:hover {
  background-color: var(--brandPrimaryVariant);
  color: var(--brandOnPrimary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(138, 56, 245, 0.35);
}

.btn-brand-primary:active {
  background-color: var(--brandPrimary);
  color: var(--brandOnPrimary);
  transform: translateY(0);
}

/* Outlined Secondary Button */
.btn-brand-secondary {
  background-color: transparent;
  color: var(--brandPrimary);
  border: 2px solid var(--brandSecondary);
  border-radius: var(--border-radius-full);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-medium);
  padding: 12px 28px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: none;
}

.btn-brand-secondary:hover {
  background-color: transparent;
  border-color: var(--brandSecondary);
  color: var(--brandPrimaryVariant);
  transform: translateY(-2px);
  box-shadow: none;
}

.btn-brand-secondary:active {
  background-color: transparent;
  border-color: var(--brandSecondary);
  color: var(--brandPrimary);
  transform: translateY(0);
}

/* Tab Button Component */
.btn-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 180px;
  padding: 13px 36px;
  border: none;
  border-radius: var(--border-radius-full);
  background-color: transparent;
  color: var(--brandSecondaryVariant);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
}

.btn-tab.active {
  background-color: var(--brandPrimary);
  color: var(--brandOnPrimary);
}

.btn-tab:hover:not(.active) {
  color: var(--textColorLowest);
}

.btn-tab:focus-visible {
  outline: 2px solid var(--brandPrimary);
  outline-offset: 2px;
}

/* Header & Floating Navigation */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 24px;
  z-index: 2001;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--spacing-0) !important;
  padding-right: var(--spacing-0) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Outer Logo (Inside glassmorphic navbar pill) */
.header-logo-brand {
  display: flex;
  align-items: center;
  opacity: 1;
  white-space: nowrap;
  margin-right: 16px;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-logo-brand img {
  height: 36px;
  width: auto;
  display: block;
}

/* Inner Logo (Inside pill, for backward compatibility) */

.toggler-open-icon {
  display: inline-block;
  vertical-align: middle;
}

#navbar-hamburger.is-open .toggler-open-icon {
  display: none !important;
}

/* Close (X) icon for the mobile toggler */
.toggler-close-icon {
  display: none;
}

#navbar-hamburger.is-open .toggler-close-icon {
  display: inline-block !important;
}

/* Glassmorphic Navigation Pill (Extends 100% over logo area) */
.navbar-floating {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--borderColorBorder);
  border-radius: var(--border-radius-full);
  padding: 8px 24px;
  box-shadow: var(--shadow-header);
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}

/* Sticky Header State (On Scroll) */
.site-header.is-sticky {
  position: fixed;
  top: 12px;
  padding-top: 0;
  animation: slideHeaderDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mobile & Tablet Floating Overlay Navbar (< 992px) */
@media (max-width: 991.98px) {
  .site-header {
    position: fixed !important;
    top: 12px !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 0 !important;
    z-index: 2000 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
    transform: translateY(0);
    opacity: 1;
  }

  .site-header.nav-overlay-hidden {
    transform: translateY(-140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site-header .navbar-floating {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

@keyframes slideHeaderDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.site-header.is-sticky .header-wrapper {
  justify-content: center !important;
}

.site-header.is-sticky .navbar-floating {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.nav-link-custom {
  color: var(--textColorDefault);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-md) !important;
  transition: color 0.2s ease;
}

.nav-link-custom:hover,
.nav-link-custom.active {
  color: var(--brandPrimary) !important;
}
.new-theme-btn .btn:hover {
    background-color: var(--brandPrimaryVariant);
    color: var(--brandOnPrimary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(138, 56, 245, 0.35);
}
/* ==========================================================================
   Section Modular Layout Rules
   ========================================================================== */

/* Global Container Max-Width Override (1440px across all sections) */
@media (min-width: 1200px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-1440 {
    max-width: 1440px !important;
  }
}

.hero-section {
  padding: 80px 0;
  position: relative;
}

.container-1440 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.about-section {
  padding: 24px 0 89px 0;
  background-color: var(--backgroundBackground);
  position: relative;
}

.about-statements-wrapper {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
  gap: 20px !important;
}

.about-statement-row {
  font-family: var(--font-family-main);
  font-size: var(--font-size-58px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.about-statement-row.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.about-statement-row:nth-child(1) {
  transition-delay: 0ms;
}

.about-statement-row:nth-child(2) {
  transition-delay: 300ms;
}

.about-statement-row:nth-child(3) {
  transition-delay: 600ms;
}

.about-statement-row:nth-child(4) {
  transition-delay: 900ms;
}

.about-text-brand {
  color: var(--textColorDefault);
  font-weight: var(--font-weight-semibold);
}

.about-text-dark {
  color: var(--textColorDefault);
  font-weight: var(--font-weight-semibold);
}

.about-pill-frame {
  display: inline-block;
  width: clamp(140px, 16vw, 220px);
  height: clamp(55px, 6.5vw, 90px);
  border-radius: 400px;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  margin: 0 4px;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-pill-frame:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.about-pill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ==========================================================================
   Metrics Section (4x3 Grid)
   ========================================================================== */
.metrics-section {
  padding: 0;
  background-color: var(--backgroundBackground);
  position: relative;
  width: 100%;
  overflow: hidden;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
}

.metrics-card {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

textarea#messagebox {
    height: 130px;
}
.subscribe-success-message {
    font-size: 12px !important;
    color: #128546 !important;
}
.metrics-card-dark {
  background-color: var(--backgroundSurfaceLowest);
  color: var(--backgroundBackground);
  padding: var(--spacing-xl);
}

.metrics-card-light {
  background-color: var(--backgroundBackground);
  color: var(--textColorDefault);
  padding: var(--spacing-xl);
}

.metrics-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.metrics-number {
  font-family: var(--font-family-main);
  font-size: var(--font-size-64px);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}

.metrics-card-dark .metrics-number {
  color: var(--backgroundBackground);
}

.metrics-card-light .metrics-number {
  color: var(--brandSecondary);
}

.metrics-label {
  font-family: var(--font-family-main);
  font-size: var(--font-size-18px);
  font-weight: var(--font-weight-medium);
  margin: 0;
  line-height: 1.3;
}

.metrics-card-dark .metrics-label {
  color: var(--textColorLowest);
}

.metrics-card-light .metrics-label {
  color: var(--textColorLowVariant);
}

.metrics-card-image {
  background-color: #f5f5f5;
}

.metrics-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.metrics-card-image:hover .metrics-img {
  transform: scale(1.03);
}

.metrics-q-logo {
  max-width: 140px;
  max-height: 140px;
  width: 40%;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  /* Reduce the metrics text cards height and add top/bottom padding */
  .metrics-card-dark,
  .metrics-card-light {
    aspect-ratio: 16 / 6 !important;
    height: auto !important;
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
  }

  /* Keep the image height as is */
  .metrics-card-image {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }

  /* Remove Q logo box */
  .metrics-card-logo {
    display: none !important;
  }

  /* Remove/Hide the last image card (Child 12) on mobile */
  .metrics-grid> :nth-child(12) {
    display: none !important;
  }

  /* Order the items to alternate: Metric card -> Image card */
  .metrics-grid> :nth-child(1) {
    order: 1;
  }

  /* 400K+ (M) */
  .metrics-grid> :nth-child(2) {
    order: 2;
  }

  /* Image 1 (I) */
  .metrics-grid> :nth-child(3) {
    order: 3;
  }

  /* 350K+ (M) */
  .metrics-grid> :nth-child(4) {
    order: 4;
  }

  /* Image 2 (I) */
  .metrics-grid> :nth-child(8) {
    order: 5;
  }

  /* 25 Speakers (M) */
  .metrics-grid> :nth-child(5) {
    order: 6;
  }

  /* Image 3 (I) */
  .metrics-grid> :nth-child(9) {
    order: 7;
  }

  /* 5 Events (M) */
  .metrics-grid> :nth-child(7) {
    order: 8;
  }

  /* Image 4 (I) */
  .metrics-grid> :nth-child(11) {
    order: 9;
  }

  /* 99% Positive (M) */
  .metrics-grid> :nth-child(10) {
    order: 10;
  }

  /* Image 5 (I) */
}

.speakers-section {
  padding: var(--spacing-6xl) 0;
  position: relative;
}

.gallery-section {
  padding: var(--spacing-6xl) 0;
  background-color: var(--backgroundSurfaceLow);
  position: relative;
}

.join-section {
  padding: var(--spacing-6xl) 0;
  position: relative;
}

.partners-section {
  padding: var(--spacing-6xl) 0;
  background-color: var(--backgroundBackground);
  position: relative;
}

/* Badge Pills */
.community-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-0) var(--spacing-xs);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-medium);
  color: var(--textColorDefault);
  font-family: var(--font-family-heading);
}

.hero-word-switcher {
  display: inline-grid;
  vertical-align: bottom;
  color: var(--brandPrimary);
  position: relative;
}

.hero-word-switcher span {
  grid-area: 1 / 1;
  color: var(--brandPrimary);
  opacity: 0;
  filter: blur(12px);
  transform: scaleX(1.08);
  pointer-events: none;
  will-change: opacity, filter, transform;
}

.hero-word-switcher span.active {
  opacity: 1;
  filter: blur(0px);
  transform: scaleX(1);
  pointer-events: auto;
  animation: heroWordMorphIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-word-switcher span.leaving {
  opacity: 0;
  filter: blur(12px);
  transform: scaleX(0.92);
  animation: heroWordMorphOut 0.55s cubic-bezier(0.55, 0, 0.45, 1) both;
}

@keyframes heroWordMorphIn {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: scaleX(1.12) scaleY(1.04);
  }

  40% {
    opacity: 0.6;
    filter: blur(4px);
    transform: scaleX(0.97) scaleY(1);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    transform: scaleX(1) scaleY(1);
  }
}

@keyframes heroWordMorphOut {
  0% {
    opacity: 1;
    filter: blur(0px);
    transform: scaleX(1) scaleY(1);
  }

  100% {
    opacity: 0;
    filter: blur(14px);
    transform: scaleX(0.9) scaleY(0.96);
  }
}

.hero-subtext {
  font-size: var(--font-size-16px);
  line-height: var(--line-height-body-l);
  color: var(--textColorHigh);
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-medium);
  max-width: 520px;
}

/* Mobile-only hero copy (see custom mobile hero block near the end of this
   file) — hidden by default everywhere; shown only at the 412-767.98px
   breakpoint, where it replaces .hero-subtext-default. */
.hero-subtext-mobile {
  display: none;
}

/* Hero Collage Animation */
.hero-collage-container {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-left: -41px;
  margin-right: 0;
  height: 650px;
  overflow: hidden;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none;
  transform-origin: center center;
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.hero-collage-container::before,
.hero-collage-container::after {
  content: none !important;
  display: none !important;
}

.hero-collage-track {
  display: flex;
  gap: 20px;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  background: transparent !important;
}

.hero-collage-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0%;
  min-width: 0;
  height: max-content;
  will-change: transform;
  background: transparent !important;
}

.hero-collage-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  flex-shrink: 0;
  background: transparent !important;
}

.hero-collage-img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--border-radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Animations for Stacks */
.hero-collage-col.col-up {
  animation: scrollCollageUp 80s linear infinite;
}

.hero-collage-col.col-down {
  animation: scrollCollageDown 80s linear infinite;
}

@keyframes scrollCollageUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(-50% - 10px));
  }
}

@keyframes scrollCollageDown {
  0% {
    transform: translateY(calc(-50% - 10px));
  }

  100% {
    transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
  .hero-collage-container {
    height: 540px;
    transform: none;
    margin-top: var(--spacing-lg);
  }

  .hero-collage-col {
    width: 140px;
  }

  .hero-collage-img {
    height: 180px;
  }
}

@media (max-width: 575.98px) {
  .hero-collage-container {
    height: 420px;
    transform: none;
  }

  .hero-collage-track {
    gap: 10px;
  }

  .hero-collage-col {
    width: 110px;
  }

  .hero-collage-img {
    height: 140px;
    border-radius: var(--border-radius-md);
  }
}

/* Grid Highlights (4x3 Grid Section) */

/* Event Highlights Section (Figma 3002:5519) */
.events-section {
  padding: 100px 0;
  background-color: var(--backgroundsurfaceHighVariant);
  color: var(--iconColorLowest);
  position: relative;
  overflow: hidden;
}

.events-nav-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  padding: 0;
}

.events-nav-btn .events-nav-icon {
  width: 24px;
  height: 24px;
}

.events-nav-btn:hover .events-nav-icon,
.events-nav-btn.active .events-nav-icon {
  filter: invert(31%) sepia(85%) saturate(4789%) hue-rotate(256deg) brightness(98%) contrast(97%);
}

.events-nav-btn:hover {
  transform: scale(1.1);
}

.events-carousel-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.events-carousel-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Root cause of the jagged/crooked hover corners: the old rule put the
   rounded-corner clip (border-radius + overflow:hidden) on the SAME element
   that also (a) received the hover `transform: translateY(...)` and (b)
   painted an animating `box-shadow`, while a descendant (the bg image) was
   simultaneously scaled. Every hover frame, the browser had to re-rasterize
   the rounded-rect clip mask against a moving/self-transforming layer that
   was also compositing a shadow — that's the exact combination Chromium and
   Safari can fail to anti-alias cleanly, producing crooked/pixelated corners
   even though the border-radius *value* itself was correct.

   Fix: split "moves + casts shadow" from "clips content" into two elements.
   `.event-highlight-card` (this element) only ever translates and grows a
   box-shadow on hover — it has no overflow:hidden, so nothing about its own
   rounded corners is ever clipped/re-masked while it animates.
   `.event-card-visual` (below) is the single clipping layer: it never
   receives a transform itself, so its rounded clip is rasterized once, at
   rest, and stays crisp no matter how much its child image zooms inside it. */
.event-highlight-card {
  flex: 0 0 calc(25% - 18px);
  min-width: 280px;
  height: 480px;
  position: relative;
  border-radius: 20px !important;
  background-color: #121212;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-sizing: border-box !important;
  outline: none !important;
  border: none !important;
}

.event-highlight-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  outline: none !important;
  border: none !important;
}

/* The only element that clips — border-radius is inherited from the card
   above, never redeclared, so there is a single source of truth for it. */
.event-card-visual {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
}

.event-highlight-card .event-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: inherit !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  will-change: transform;
}

.event-highlight-card:hover .event-card-bg {
  transform: scale(1.08) translateZ(0);
}

.event-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.644) 0%, rgb(0 0 0 / 62%) 40%, rgba(0, 0, 0, 0.514) 100%);
  pointer-events: none;
}

.event-card-body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-card-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card-title {
  font-family: var(--font-family-heading);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.event-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-medium);
  color: var(--textColorLowest);
}

.event-badge-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.event-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borderColorBorderVariant2);
  color: var(--iconColorLowest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  padding: 0;
  padding-left: 3px;
}

.event-play-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.event-highlight-card:hover .event-play-btn,
.event-play-btn:hover {
  transform: scale(1.12);
  background: var(--brandPrimary) !important;
  border-color: var(--borderColorBorderVariant2) !important;
  color: var(--iconColorLowest) !important;
}

.event-card-bottom {
  display: flex;
  justify-content: flex-end;
}

.event-youtube-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 17, 16, 0.6);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--textColorLowest);
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-regular);
  text-decoration: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.event-youtube-btn:hover {
  background: rgba(18, 17, 16, 0.85);
  color: #ffffff;
}

.event-yt-logo {
  height: 12px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 1199.98px) {
  .event-highlight-card {
    flex: 0 0 calc(33.333% - 16px);
  }
}

@media (max-width: 991.98px) {
  .event-highlight-card {
    flex: 0 0 calc(50% - 12px);
    height: 420px;
  }
}

@media (max-width: 575.98px) {
  .event-highlight-card {
    flex: 0 0 100%;
    height: 380px;
  }
}

/* Speakers Section (What Awaits - Figma Node 2930:2313) */
.speakers-section {
  padding: 100px 0;
  background-color: #f5f5f5;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.speakers-wrapper {
  width: 100%;
}

@media (min-width: 992px) {
  .speakers-wrapper {
    gap: 112px !important;
  }
}

.speakers-left-block {
  flex: 0 0 auto;
  width: 380px;
  padding-left: calc((100vw - 1440px) / 2 + 15px);
  box-sizing: content-box;
}

@media (max-width: 1470px) {
  .speakers-left-block {
    padding-left: 30px;
  }
}

@media (max-width: 991.98px) {
  .speakers-left-block {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
}

.speakers-q-graphic {
  width: 100%;
  max-width: 280px;
}

.speakers-q-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.speakers-main-subtext {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-16px);
  line-height: 1.6;
  color: var(--textColorHigh);
  max-width: 380px;
}

.speakers-carousel-container {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
}

.speakers-carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
  background: linear-gradient(to right, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 100%);
  pointer-events: none;
  z-index: 5;
}

/* Speakers drag indicator overlay styling */
.speakers-drag-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.82);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 100px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  font-family: var(--font-family-main);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.speakers-drag-indicator.show {
  opacity: 1;
  visibility: visible;
}

.drag-indicator-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Subtle left-right bounce animations for arrow vectors */
.drag-arrow-left {
  animation: drag-arrow-left-bounce 1.2s infinite ease-in-out;
}

.drag-arrow-right {
  animation: drag-arrow-right-bounce 1.2s infinite ease-in-out;
}

@keyframes drag-arrow-left-bounce {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-4px);
  }
}

@keyframes drag-arrow-right-bounce {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

.speakers-right-cards {
  flex: 1;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  /* Firefox */
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y;
}

.speakers-right-cards.active {
  cursor: grabbing;
}

.speakers-right-cards::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.speakers-right-cards img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.speaker-feature-card {
  flex: 0 0 calc(50% - 12px);
  min-width: 320px;
  height: 380px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: #1a1918;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.speaker-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.speaker-feature-card:hover .speaker-card-bg {
  transform: scale(1.05);
}

.speaker-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgb(0 0 0 / 57%) 50%, rgba(0, 0, 0, 0.918) 100%);
  pointer-events: none;
}

.speaker-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.speaker-card-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-24px);
  font-weight: var(--font-weight-semibold);
  color: var(--textColorLowest);
  margin: 0;
  line-height: 1.25;
  text-align: center;

}

.speaker-card-desc {
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--textColorLow);
  margin: 0;
  text-align: center;
}

@media (max-width: 991.98px) {
  .speakers-left-block {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .speakers-right-cards {
    width: 100%;
  }

  .speaker-feature-card {
    flex: 0 0 calc(100% - 16px);
    height: 280px;
  }
}

/* Testimonials / Attendees Section (Figma Node 1801:8855) */
.gallery-section {
  padding: 100px 0;
  background-color: #ffffff;
  position: relative;
}

.testimonial-section-subtitle {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-medium);
  font-size: var(var(--font-size-14px));
  color: var(--textColorHigh);
}

.testimonial-left-panel {
  padding-right: 1rem;
}

.testimonial-quote-icon {
  display: block;
}

.testimonial-progress-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.testimonial-dash {
  height: 3px;
  background-color: #181716;
  border-radius: 2px;
  display: inline-block;
}

.testimonial-dash.short {
  width: 12px;
  opacity: 0.4;
}

.testimonial-dash.long {
  width: 50px;
}

.testimonial-next-btn {
  font-family: var(--font-family-main);
  font-size: 0.95rem;
  color: #181716;
  transition: transform 0.2s ease, color 0.2s ease;
}

.testimonial-next-icon {
  width: 32px;
  height: 32px;
  transition: filter 0.2s ease;
}

.testimonial-next-btn:hover {
  color: var(--brandPrimary);
  transform: translateX(4px);
}

.testimonial-next-btn:hover .testimonial-next-icon {
  filter: invert(31%) sepia(85%) saturate(4789%) hue-rotate(256deg) brightness(98%) contrast(97%);
}

.testimonial-figma-card {
  background-color: var(--backgroundBackground);
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  height: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.testimonial-user-photo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 24px;
}

.testimonial-event-name {
  font-family: var(--font-family-heading);
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  color: #181716;
  margin-bottom: 14px;
}

.testimonial-body-text {
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  line-height: 1.6;
  font-weight: var(--font-weight-medium);
  color: var(--textColorHighest);
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-author-name {
  font-family: var(--font-family-heading);
  font-size: 1.05rem;
  font-weight: var(--font-weight-medium);
  color: var(--brandPrimary);
  margin-bottom: 4px;
}

.testimonial-author-role {
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  color: var(--textColorHigh);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0;
}

/* Testimonial Slider */
.testimonial-slider-viewport {
  overflow: hidden;
  width: 100%;
}

.testimonial-slider-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.testimonial-slide-group {
  display: flex;
  gap: 24px;
  flex: 0 0 100%;
  width: 100%;
}

.testimonial-slide-group .testimonial-figma-card {
  flex: 0 0 calc((100% - 24px) / 2);
  min-width: 0;
}

/* Active/inactive progress dashes for slider */
.testimonial-dash.long {
  width: 50px;
  opacity: 1;
}

.testimonial-dash.short {
  width: 12px;
  opacity: 0.4;
}

/* Mobile: one card per slide group */
@media (max-width: 767.98px) {

  /* Flatten the group container so cards become direct flex items of the track */
  .testimonial-slide-group {
    display: contents !important;
  }

  /* Force the track to be a single horizontal row on mobile */
  .testimonial-slider-track {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }

  /* Set each card to occupy exactly 100% width of the slider viewport */
  .testimonial-figma-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   Join CTA Section
   ========================================================================== */
.join-section {
  position: relative;
  height: 517px;
  display: flex;
  align-items: center;
  background-image: url('/assets/website-images/assets/cta-bg-image.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.join-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 85%) 0%, rgb(11 11 10 / 92%) 45%, rgba(18, 17, 16, 0.1) 100%);
  z-index: 1;
}

.join-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.join-content {
  max-width: 620px;
  text-align: left;
}

.join-content .h1-title {
  margin-bottom: var(--spacing-sm);
}

.join-desc {
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-regular);
  color: var(--textColorLow);
  margin-bottom: var(--spacing-4xl);
  max-width: 620px;
}

/* Partners Section */
.partners-section {
  background-color: var(--backgroundBackground);
  padding: 80px 0;
  height: 368px;
  display: flex;
  align-items: center;
}

.partners-logos-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.partner-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.partner-logo-item:hover {
  transform: translateY(-2px);
}

.partner-logo-img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.partner-logo-img:hover {
  opacity: 1;
}

/* Specific visually balanced heights from Figma */
.partner-logo-item:nth-child(1) .partner-logo-img {
  max-height: 120px;
}

/* bbs */
.partner-logo-item:nth-child(2) .partner-logo-img {
  max-height: 120px;
}

/* IDF */
.partner-logo-item:nth-child(3) .partner-logo-img {
  max-height: 120px;
}

/* cocogrid */
.partner-logo-item:nth-child(4) .partner-logo-img {
  max-height: 120px;
}

/* mite */
.partner-logo-item:nth-child(5) .partner-logo-img {
  max-height: 120px;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-section {
  width: 100%;
  background-color: var(--backgroundsurfaceHighVariant);
  overflow: hidden;
  padding: var(--spacing-3xl) 0 var(--spacing-6xl);
  position: relative;
}

/* Hero: background image + heading + subtitle + tabs */
.faq-hero {
  position: relative;
  width: 100%;
  max-width: 1014px;
  margin: 0 auto;
  overflow: hidden;
  padding: 56px 24px 40px;
  border-radius: 24px;
}

.faq-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.faq-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.faq-hero-subtitle {
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-md);
  color: var(--textColorLow);
  max-width: 400px;
  margin: 0 0 38px;
}

/* Tabs */
.faq-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--backgroundSurfaceLowest);
  border-radius: var(--border-radius-full);
  padding: 0;
  border: 2px solid var(--borderColorBorderVariant2);
}

/* Body: tab panels + accordions */
.faq-body {
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-0);
}

.faq-content {
  max-width: 1014px;
  margin: 0 auto;
}

.faq-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

.faq-item:last-child {
  border-bottom: none !important;
}

.faq-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--spacing-xl) var(--spacing-0) !important;
  color: var(--textColorLowest) !important;
  font-family: var(--font-family-main);
  font-size: var(--font-size-18px) !important;
  font-weight: var(--font-weight-bold) !important;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
  transition: color 0.25s ease;
}

.faq-btn:hover {
  color: var(--brandPrimary) !important;
}

.faq-btn::after {
  display: none !important;
  /* Hide default Bootstrap chevron */
}

/* Custom + and - Icon Transition */
.faq-icon-indicator {
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: var(--spacing-lg);
  flex-shrink: 0;
}

.faq-icon-indicator::before,
.faq-icon-indicator::after {
  content: '';
  position: absolute;
  background-color: var(--textColorLowest);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

/* Horizontal line (minus bar) */
.faq-icon-indicator::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}

/* Vertical line (makes it a plus) */
.faq-icon-indicator::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

.faq-btn:not(.collapsed) .faq-icon-indicator::after {
  transform: rotate(90deg) scaleY(0);
  /* Hide vertical line for minus sign */
}

.faq-btn:hover .faq-icon-indicator::before,
.faq-btn:hover .faq-icon-indicator::after {
  background-color: var(--brandPrimary);
}

.faq-answer-text {
  padding: 0 0 22px 0 !important;
  color: var(--textColorLow) !important;
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  max-width: 916px;
}

.faq-question-text {
  font-family: var(--font-family-main);
  font-size: var(--font-size-18px);
  font-weight: var(--font-weight-semibold);
  color: var(--textColorLowest);
  line-height: var(--line-height-md);
}

/* Footer & Banner */
/* ==========================================================================
   Footer & WhatsApp Banner Section
   ========================================================================== */
.footer-section {
  padding: 60px 0 40px 0;
  background-color: var(--backgroundBackground);
  color: var(--textColorDefault);
  border-top: none !important;
  position: relative;
}

.footer-summary-text {
  color: var(--textColorHigh);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-medium);

}

.footer-link {
  color: var(--textColorHigh);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  font-size: var(--font-size-16px);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--brandPrimary);
}

.footer-attribution-link {
  color: var(--brandPrimary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-attribution-link:hover {
  color: var(--brandPrimaryVariant);
  text-decoration: underline;
}

.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--brandPrimaryVariant4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-icon-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: invert(31%) sepia(97%) saturate(3948%) hue-rotate(256deg) brightness(99%) contrast(95%);
}

/* Footer Newsletter Subscription */
.footer-newsletter {
  margin-top: var(--spacing-xl, 24px);
  width: 100%;
}

.footer-newsletter-form {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  width: 100%;
}

.footer-newsletter-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 10px 16px;
  background-color: var(--backgroundBackground, #ffffff);
  border: 1px solid var(--borderColorBorder, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px, 14px);
  color: var(--textColorDefault, #181716);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.footer-newsletter-input::placeholder {
  color: var(--textColorLowestVariant, #8f8f8f);
  font-size: var(--font-size-14px, 14px);
}

.footer-newsletter-input:focus {
  border-color: var(--brandPrimary, #8A38F5);
  box-shadow: 0 0 0 3px var(--brandPrimaryVariant4, #F4EBFF);
}

.footer-newsletter-btn {
  height: 48px;
  padding: 0 22px;
  background-color: var(--brandPrimary, #8A38F5);
  color: var(--brandOnPrimary, #ffffff);
  border: none;
  border-radius: 12px;
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px, 14px);
  font-weight: var(--font-weight-medium, 500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-newsletter-btn:hover {
  background-color: var(--brandPrimaryVariant, #7125D3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(138, 56, 245, 0.25);
}

.footer-newsletter-btn:active {
  transform: translateY(0);
}

/* WhatsApp Bar */
.whatsapp-banner-new {
  background: var(--statusSuccessVariant2);
  border-radius: 8px;
  padding: 14px 24px;
  margin-top: var(--spacing-4xl);
  width: 100%;
}

.whatsapp-banner-text-new {
  color: var(--statusOnSuccessVariant2);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16px);
  margin: 0;
}

.whatsapp-banner-link {
  color: #2e7d32;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.whatsapp-banner-link:hover {
  opacity: 0.8;
}

/* Responsive adjustments for Join CTA */
@media (max-width: 991.98px) {
  .join-section {
    height: auto;
    min-height: auto;
    padding: var(--spacing-6xl) var(--spacing-0);
  }

  .join-desc {
    font-size: var(--font-size-16px);
    margin-bottom: var(--spacing-3xl);
  }

  /* Responsive Partners Section */
  .partners-section {
    height: auto;
    padding: 60px 0;
  }

  .partners-logos-wrapper {
    justify-content: center;
    gap: 40px 60px;
  }

  /* Responsive FAQ Section */
  .faq-hero {
    padding: 40px 20px 32px;
  }

  .faq-hero-subtitle {
    max-width: 340px;
  }

  .faq-tabs {
    width: 100%;
    max-width: 460px;
  }

  .btn-tab {
    min-width: 0;
    flex: 1;
    padding: 12px 20px;
    font-family: var(--font-family-main);
    font-size: var(--font-size-12px);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-xs);
  }

  .faq-body {
    padding: 32px 20px 0;
  }
}

@media (max-width: 575.98px) {
  .join-section {
    padding: 60px 0;
  }

  .join-desc {
    font-size: var(--font-size-14px);
    margin-bottom: var(--spacing-xl);
  }

  /* Mobile Partners Section */
  .partners-section {
    padding: 50px 0;
  }

  .partners-logos-wrapper {
    gap: 30px 40px;
  }

  .partner-logo-img {
    max-height: 36px !important;
  }

  /* Mobile FAQ Section */
  .faq-hero {
    padding: 32px 16px 28px;
  }

  .faq-hero-subtitle {
    font-size: 14px;
    max-width: 280px;
  }

  .faq-tabs {
    gap: 12px;
  }

  .btn-tab {
    font-size: 13px;
    padding: 10px 14px;
    height: 44px;
  }

  .faq-body {
    padding: 28px 16px 0;
  }

  .faq-btn {
    font-size: 16px !important;
    padding: 16px 0 !important;
  }

  .faq-answer-text {
    font-size: 14px;
    padding-bottom: 16px !important;
  }
}

/* ============ MODAL ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  /* Make sure it covers header/nav */
  background: rgba(6, 5, 4, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  padding: 80px 100px;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: all;
}

@media(max-width:900px) {
  .modal-overlay {
    padding: 70px 16px;
  }
}

.modal-box {
  width: 100%;
  max-width: 960px;
  transform: scale(.94);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.modal-overlay.show .modal-box {
  transform: scale(1);
}

.modal-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.modal-top-text h3 {
  font-family: var(--font-family-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}

.modal-top-text .m-meta {
  color: #a89f92;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.modal-counter {
  margin-left: auto;
  font-family: var(--font-family-heading);
  font-size: 13px;
  color: #a89f92;
  flex-shrink: 0;
}

.modal-counter b {
  color: #ffffff;
  font-weight: 600;
}

.stage {
  position: relative;
}

.modal-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8);
  background: #000;
}

.modal-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit !important;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15, 13, 11, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.nav-btn:hover {
  background: var(--brandPrimary);
  border-color: var(--brandPrimary);
}

.nav-btn:hover svg path {
  stroke: #ffffff;
}

.nav-btn.prev {
  left: -26px;
}

.nav-btn.next {
  right: -26px;
}

@media(max-width:900px) {
  .nav-btn {
    width: 42px;
    height: 42px;
  }

  .nav-btn.prev {
    left: 6px;
  }

  .nav-btn.next {
    right: 6px;
  }
}

.nav-btn.disabled {
  opacity: .25;
  pointer-events: none;
}

.close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 2010;
}

.close-btn:hover {
  background: rgba(255, 255, 255, .14);
  color: var(--brandPrimary);
  border-color: var(--brandPrimary);
  transform: rotate(90deg);
}

.filmstrip-wrap {
  position: relative;
  margin-top: 20px;
}

.filmstrip-wrap::before,
.filmstrip-wrap::after {
  display: none !important;
}

.filmstrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}

.filmstrip::-webkit-scrollbar {
  display: none;
}

.film-item {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid transparent;
  opacity: .5;
  scroll-snap-align: start;
  transition: opacity .25s ease, border-color .25s ease, transform .2s ease;
}

.film-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The Design Quest 2K26 poster art is a tall portrait image (title copy
   stacked above the speakers). Centered cover-cropping in this wide 16/10
   thumbnail mostly shows empty background above the speakers' heads, so
   shift the focal point down to bring the speakers into frame — same
   image, same object-fit:cover, no stretch/squash/aspect-ratio change. */
.film-item img[src="/assets/website-images/assets/yt-dq-26-1.png"] {
  object-position: center 72%;
}

.film-item img[src="/assets/website-images/assets/yt-dq-23-1.png"] {
  object-position: center 72%;
}

.film-item .fi-shade {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, .35);
}

.film-item .fi-label {
  position: absolute;
  bottom: 5px;
  left: 7px;
  right: 7px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.film-item:hover {
  opacity: .8;
  transform: translateY(-2px);
}

.film-item.active {
  opacity: 1;
  border-color: var(--brandPrimary);
}

.film-item.active::before {
  content: '▶  Now Playing';
  position: absolute;
  bottom: 22px;
  left: 7px;
  right: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  z-index: 3;
  font-family: var(--font-family-main);
}

.film-item.active .fi-shade {
  background: rgba(0, 0, 0, 50%) !important;
  /* Dark overlay using var(--backgroundSurfaceLowest) */
  opacity: 1 !important;
  z-index: 2;
}

.film-item.active .fi-label {
  bottom: 5px;
  top: auto;
  z-index: 3;
}

@media(max-width:360px) {
  .filmstrip-wrap {
    display: none;
  }
}

@media(max-width:480px) {
  .modal-overlay {
    padding: 54px 10px 22px;
  }

  .modal-box {
    max-width: 100%;
  }

  .modal-top {
    gap: 8px;
    margin-bottom: 10px;
  }

  .modal-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .modal-top-text h3 {
    font-size: 14.5px;
  }

  .modal-top-text .m-meta {
    font-size: 10.5px;
  }

  .modal-counter {
    font-size: 10.5px;
    padding: 5px 9px;
  }

  .modal-frame-wrap {
    border-radius: 12px;
  }

  .nav-btn {
    width: 36px;
    height: 36px;
  }

  .nav-btn.prev {
    left: 4px;
  }

  .nav-btn.next {
    right: 4px;
  }

  .nav-btn svg {
    width: 14px;
    height: 14px;
  }

  .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
  }

  .filmstrip {
    gap: 8px;
  }

  .film-item {
    width: 104px;
  }

  .film-item .fi-label {
    font-size: 9.5px;
  }
}

/* ==========================================================================
   Laptop Overlay Adjustments — 1025px – 1366px
   ─────────────────────────────────────────────
   Targets typical laptop screens (13"–15", e.g. 1366×768) where the desktop
   overlay fills the viewport with almost no top/bottom breathing room.

   Strategy:
   · Generous symmetric padding (60px top + bottom) gives clear space above
     the event header and below the thumbnail strip.
   · Narrowing modal-box to 720px makes the 16/9 player render at ~405px tall
     (720 × 9/16) instead of ~540px — the key reduction in player height.
   · overflow-y: auto is a safety net so content never clips on shorter screens.
   · close-btn top offset is aligned with the new overlay top padding.
   · Desktop, tablet, and mobile layouts are completely untouched.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1366px) {

  /* ── Overlay: generous vertical padding, allow scroll if needed ── */
  .modal-overlay {
    padding: 60px 80px;
    align-items: center;
    overflow-y: auto;
  }

  /* ── Modal box: narrower width → shorter 16/9 player height ── */
  .modal-box {
    max-width: 720px;
  }

  /* ── Event header: tighten gap to player ── */
  .modal-top {
    margin-bottom: 10px;
  }

  /* ── Player: consistent border-radius at this size ── */
  .modal-frame-wrap {
    border-radius: 12px;
  }

  /* ── Filmstrip: tighter gap above thumbnails ── */
  .filmstrip-wrap {
    margin-top: 14px;
  }

  /* ── Thumbnail cards: proportionally narrower ── */
  .film-item {
    width: 120px;
  }

  /* ── Close button: align with new top padding ── */
  .close-btn {
    top: 22px;
    right: 28px;
  }
}

/* ==========================================================================
   Tablet Layout Adjustments — max-width: 1024px
   ─────────────────────────────────────────────
   All typography values reference existing :root variables.
   Only spacing overrides are introduced where the desktop value
   is too large or too small for a ~768–1024 px viewport.
   Do NOT remove or modify breakpoints outside this block.
   ========================================================================== */
@media (max-width: 1024px) {

  /* ── Overflow Fix (root cause) ─────────────────────────────────────────────
     The hero collage uses margin-left:-41px to bleed into the right column on
     desktop. On tablet the two columns stack, so that negative margin causes
     the element to overflow the viewport and enables horizontal drag.
     Reset it here instead of masking with overflow-x:hidden on <body>.        */
  .hero-collage-container {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* Constrain the speakers carousel's own box so it cannot push page width
     wider — overflow-x stays "auto" (same as desktop) so the existing
     drag-to-scroll / infinite-loop JS keeps scrolling it, instead of
     "hidden" which would freeze that interaction on tablet. */
  .speakers-right-cards {
    max-width: 100%;
  }

  /* ── Overflow Fix #2 (root cause) ───────────────────────────────────────────
     .about-statement-row carries Bootstrap's `flex-nowrap` + `text-nowrap`
     utility classes, both of which set their property with !important. That
     beats a plain override, so a later rule in this same file that tried to
     set white-space:normal here never actually took effect — the row stayed
     on one unbreakable line. Once font-size drops to 36px but the four text
     segments + pill image still don't fit one line at 768–1024px, the row's
     rendered width exceeds the viewport and the whole page becomes
     horizontally draggable. Both utility classes must be beaten with
     !important to actually stop the overflow.                               */
  .about-statement-row {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  /* ── Global Section Side Padding (skip Metrics — it is full-bleed) ─────────
     Value: --spacing-xl (24px) — matches the existing Bootstrap gutter.       */
  .hero-section,
  .about-section,
  .events-section,
  .speakers-section,
  .gallery-section,
  .join-section,
  .partners-section,
  .faq-section,
  .footer-section {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    box-sizing: border-box;
  }

  /* ════════════════════════════════════════════════════════════════════════
     Header / Navigation
     ════════════════════════════════════════════════════════════════════════ */
  .nav-link-custom {
    /* Typography */
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    /* Spacing */
    padding: var(--spacing-xs) var(--spacing-sm) !important;
  }

  .btn-brand-primary {
    /* Button typography */
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
    /* Spacing */
    padding: var(--spacing-xs) var(--spacing-lg);
  }

  /* ════════════════════════════════════════════════════════════════════════
     Hero Section
     ════════════════════════════════════════════════════════════════════════ */
  .hero-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-8xl);
    padding-bottom: var(--spacing-6xl);
  }

  .hero-title {
    font-size: var(--font-size-56px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-2xl);
  }

  /* Hero subtext */
  .hero-subtext {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-md);
    max-width: 100%;
  }

  /* Hero community badge */
  .community-pill-badge {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
    padding: 0;
    gap: var(--spacing-xs);
  }

  .community-pill-badge span {
    font-size: var(--font-size-14px);
  }

  /* Hero collage height */
  .hero-collage-container {
    height: 480px;
  }

  /* Gap between hero text stack items */
  .hero-section .d-flex.flex-column {
    gap: var(--spacing-3xl);
  }

  /* ════════════════════════════════════════════════════════════════════════
     About Section
     ════════════════════════════════════════════════════════════════════════ */
  .about-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-5xl);
  }

  /* About statement rows — desktop uses 58px; scale down for tablet.
     (white-space/flex-wrap overrides live earlier in this media query,
     next to the overflow root-cause fix.) */
  .about-statement-row {
    font-size: var(--font-size-36px);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    row-gap: var(--spacing-xs);
  }

  /* Slightly tighter vertical rhythm between the four statement rows on
     tablet — Bootstrap's gap-5 utility (!important) sets 48px by default. */
  .about-statements-wrapper {
    gap: var(--spacing-2xl) !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     Metrics Section  (full-bleed — no side padding override)
     ════════════════════════════════════════════════════════════════════════ */
  .metrics-number {
    font-size: var(--font-size-58px);
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }

  .metrics-label {
    font-size: var(--font-size-18px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
  }

  /* Card internal padding */
  .metrics-card-dark,
  .metrics-card-light {
    padding: var(--spacing-lg);
  }

  /* .metrics-card sets both aspect-ratio:4/3 AND height:100% against a grid
     row that is auto-sized (no grid-template-rows) — that percentage height
     resolves ambiguously against an indefinite row track, so the last row's
     cards can compute a hair shorter than the row above, leaving a gap that
     the black .events-section background shows through as a stray line at
     the bottom of the grid. Let aspect-ratio alone drive the height. */
  .metrics-grid {
    align-items: stretch;
  }

  .metrics-card {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     Event Highlights Section
     ════════════════════════════════════════════════════════════════════════ */
  .events-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
  }

  /* Card-count layout and heading-to-slider spacing are tablet-only visual
     tweaks (items 2 & 3) — nested with min-width:768px so they don't leak
     into the phone widths this same max-width:1024px block also matches,
     where the dedicated 991.98px/575.98px rules above already set a
     different (1 or 2 card) mobile layout. */
  @media (min-width: 768px) {

    /* The actual gap above the carousel comes from the heading row's
       Bootstrap mb-4/mb-md-5 utilities (!important, 48px from 768px up) */
    .events-content>.d-flex.mb-4.mb-md-5 {
      margin-bottom: var(--spacing-xl) !important;
    }

    /* Cards — show 3 full cards, with the 4th peeking in half-cropped to
       signal there are more.
       card = (viewport - 3 gaps) / 3.5 — uses the container's own width
       (100%) as reference so the formula is self-contained. */
    .event-highlight-card {
      flex: 0 0 calc((100% - 3 * var(--spacing-md)) / 3.5);
      min-width: 0;
      height: 320px;
    }

    .event-highlight-card .event-card-bg {
      object-position: center 20%;
    }

    /* ── Carousel viewport bleed ──────────────────────────────────────────
       Problem: the viewport's overflow:hidden clip sits at the container's
       content-area right edge, which is 36px inside the section's actual
       right border (section padding 24px + container-1440 padding 12px).
       That 36px gap is what makes the 4th-card peek look accidentally cut
       off rather than intentional.

       Fix: widen the viewport by exactly those 36px so its clip boundary
       aligns with the section's right border. Now the card formula
       (100% - 3 gaps) / 3.5 resolves against the wider viewport width and
       produces exactly 50% of the 4th card as a clean peek — equal to the
       natural 36px left padding created by the section + container padding.

       The section's own overflow:hidden (set in the base CSS) caps the bleed
       at the section border, so nothing leaks beyond the screen edge.
       Left-side clipping is unchanged: cards that scroll off-screen to the
       left are still clipped at the viewport's unmodified left edge.     */
    .events-carousel-viewport {
      overflow-x: hidden;
      width: calc(100% + 36px);
      /* 36 = section-padding-right (24) + container-padding-right (12) */
    }
  }

  .event-card-body {
    padding: var(--spacing-lg);
  }

  /* Card title */
  .event-card-title {
    font-size: var(--font-size-16px);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-md);
  }

  /* Card date badge */
  .event-date-badge {
    font-size: var(--font-size-12px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-xs);
    gap: var(--spacing-xs);
  }

  /* Gap between cards in carousel */
  .events-carousel-track {
    gap: var(--spacing-md);
  }

  /* ════════════════════════════════════════════════════════════════════════
     Speakers Section
     ════════════════════════════════════════════════════════════════════════ */
  .speakers-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
  }

  /* Section heading */

  /* Section subtext */
  .speakers-main-subtext {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-md);
    /* Adjust width to control word wrapping so "and creative" is kept on the second line */
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    /* Gap below subtext before cards */
    margin-bottom: var(--spacing-4xl);
  }

  /* Extend the container to the right edge of the section (counteracting the section's padding-right)
     so that cards slide all the way to the edge and the gradient aligns at the absolute right boundary. */
  .speakers-carousel-container {
    margin-right: calc(-1 * var(--spacing-xl));
    padding-right: var(--spacing-xl);
    overflow: hidden;
  }

  /* Align the gradient overlay precisely at the absolute right edge of the section, extending all the way. */
  .speakers-carousel-container::after {
    right: 0;
    width: 180px;
    background: linear-gradient(to right, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 100%);
  }

  /* ── Speakers wrapper: reduce horizontal gap on tablet (side-by-side layout
     is active from 992px up via flex-lg-row; the desktop rule inside
     @media min-width:992px sets 112px — override it here to a tighter value
     so the left content block and slider sit closer together, matching the
     Figma tablet design. Nested with min-width:768px so it only fires when
     the two-column row layout is in effect, not on portrait tablet/phone
     where the columns have already stacked vertically.) */
  @media (min-width: 768px) {
    .speakers-wrapper {
      gap: 40px !important;
    }
  }

  /* Speaker cards — update layout to mimic the desktop look on tablet:
     The current active card is central/primary, with previous and next cards half-cropped.
     Setting flex-basis to 65% ensures one card dominates while adjacent cards peek in. */
  .speaker-feature-card {
    flex: 0 0 65%;
    min-width: 280px;
    height: 320px;
  }

  /* Card content internal padding */
  .speaker-card-content {
    padding: var(--spacing-lg) var(--spacing-lg);
    gap: var(--spacing-xs);
  }

  /* Speaker card title — 18px, semibold, using design-system font family */
  .speaker-card-title {
    font-size: var(--font-size-18px);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-md);
  }

  /* Speaker card description — 14px, regular weight */
  .speaker-card-desc {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-sm);
  }

  /* ════════════════════════════════════════════════════════════════════════
     Testimonials / Gallery Section
     ════════════════════════════════════════════════════════════════════════ */
  .gallery-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
  }

  /* Section subtitle */
  .testimonial-section-subtitle {
    font-size: var(--font-size-14px);
    line-height: var(--line-height-md);
    /* Gap below subtitle before cards */
    margin-bottom: var(--spacing-4xl);
  }

  /* The big "Real Stories" text in the left panel */
  .testimonial-stories-text {
    font-size: var(--font-size-28px);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
  }

  /* Testimonial cards */
  .testimonial-figma-card {
    padding: var(--spacing-lg) var(--spacing-lg);
    min-height: 360px;
    border-radius: var(--border-radius-lg);
  }

  /* Gap between slides */
  .testimonial-slide-group {
    gap: var(--spacing-md);
  }

  /* User photo */
  .testimonial-user-photo {
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacing-md);
  }

  /* Event name inside card */
  .testimonial-event-name {
    font-size: var(--font-size-16px);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
  }

  /* Body copy inside card */
  .testimonial-body-text {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-md);
    color: var(--textColorHighest);
  }

  /* Author name */
  .testimonial-author-name {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
  }

  /* Author role */
  .testimonial-author-role {
    font-size: var(--font-size-12px);
    font-weight: var(--font-weight-medium);
  }

  /* ════════════════════════════════════════════════════════════════════════
     Join / CTA Section
     ════════════════════════════════════════════════════════════════════════ */
  .join-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
    height: auto;
  }

  /* CTA body copy */
  .join-desc {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-md);
    /* Gap below copy before button */
    margin-bottom: var(--spacing-4xl);
    max-width: 95%;
  }

  /* CTA button */

  /* ════════════════════════════════════════════════════════════════════════
     Partners Section
     ════════════════════════════════════════════════════════════════════════ */
  .partners-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
    height: auto;
  }

  /* Logo row — reduce gap to avoid MITE/Aiotrix overflow */
  .partners-logos-wrapper {
    gap: var(--spacing-lg) var(--spacing-3xl);
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Uniform logo height on tablet */
  .partner-logo-img {
    max-height: 72px;
  }

  /* Keep visually balanced sizes for individually tall logos */
  .partner-logo-item:nth-child(1) .partner-logo-img,
  .partner-logo-item:nth-child(2) .partner-logo-img,
  .partner-logo-item:nth-child(3) .partner-logo-img,
  .partner-logo-item:nth-child(4) .partner-logo-img,
  .partner-logo-item:nth-child(5) .partner-logo-img {
    max-height: 72px;
  }

  /* ════════════════════════════════════════════════════════════════════════
     FAQ Section
     ════════════════════════════════════════════════════════════════════════ */
  .faq-hero {
    padding: 40px 20px 32px;
  }

  .faq-hero-subtitle {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-md);
    max-width: 320px;
  }

  .faq-tabs {
    width: 100%;
    max-width: 460px;
  }

  .btn-tab {
    min-width: 0;
    flex: 1;
    padding: 12px 20px;
  }

  .faq-body {
    padding: var(--spacing-4xl) 20px 0;
  }

  /* FAQ question button */
  .faq-btn {
    font-size: var(--font-size-16px) !important;
    font-weight: var(--font-weight-semibold) !important;
    padding: var(--spacing-lg) 0 !important;
  }

  /* FAQ question text span */
  .faq-question-text {
    font-size: var(--font-size-16px);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-md);
  }

  /* FAQ answer */
  .faq-answer-text {
    font-size: var(--font-size-14px);
    line-height: var(--line-height-md);
    padding-bottom: var(--spacing-lg) !important;
  }

  /* ════════════════════════════════════════════════════════════════════════
     Footer
     ════════════════════════════════════════════════════════════════════════ */
  .footer-section {
    /* Section vertical spacing */
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-3xl);
  }

  /* Footer body / summary text */
  .footer-summary-text {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-md);
    max-width: 100% !important;
  }

  /* Footer nav links */
  .footer-link {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-medium);
  }

  /* Footer attribution */
  .footer-attribution {
    font-size: var(--font-size-12px);
    gap: var(--spacing-xs);
  }

  /* Row gap between footer columns */
  .footer-content .row {
    gap: var(--spacing-4xl) 0;
  }

  /* WhatsApp banner */
  .whatsapp-banner-new {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--spacing-4xl) !important;
    padding: var(--spacing-lg);
    margin-top: var(--spacing-3xl);
  }

  .whatsapp-banner-text-new {
    font-size: var(--font-size-14px);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-md);
    text-align: center !important;
  }

}

/* ==========================================================================
   Events Mega Menu Styles
   ========================================================================== */
/* ==========================================================================
   Events Mega Menu Styles
   ========================================================================== */
.events-mega-menu {
  position: fixed;
  top: 82px;
  left: 50%;
  width: 90%;
  max-width: 1200px;
  background: var(--backgroundBackground);
  /* White background matching the navigation drawer */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  z-index: 2002;
  display: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-15px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.events-mega-menu.show {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Desktop / Tablet: add a ~24px breathing gap between the navbar pill
   and the mega menu overlay. Mobile never shows the mega menu so this
   only targets ≥768px screens. */
@media (min-width: 768px) {
  .events-mega-menu {
    top: 106px;
  }
}

/* Back-drop shadow / dimmer behind the mega menu */
.events-mega-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1999;
  display: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.events-mega-menu-backdrop.show {
  display: block;
  opacity: 1;
}

.mega-menu-content-wrapper {
  width: 100%;
  padding: 48px 60px;
  box-sizing: border-box;
}

.mega-menu-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 60px;
}

.mega-menu-left {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 12px;
  /* Adds bottom padding to balance the vertical layout gaps */
}

.mega-menu-nav-group {
  margin-top: auto;
  margin-bottom: auto;
}

.mega-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mega-menu-item {
  font-family: var(--font-family-heading);
  font-size: 24px;
  font-weight: 500;
  color: var(--backgroundSurfaceLowest);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.mega-menu-item:hover {
  color: var(--brandPrimary);
  transform: translateX(4px);
}

.mega-menu-socials {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: auto;
}

/* Reuses the footer's .social-icon-btn theme (lavender background with purple icons) */
.mega-menu-socials .social-icon-btn {
  background-color: var(--brandPrimaryVariant4);
}

.mega-menu-socials .social-icon-btn img {
  width: 20px;
  height: 20px;
}

.mega-menu-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mega-menu-image-container {
  width: 100%;
  max-width: 680px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
  /* Removed container border-box white styling/shadow */
  background: transparent;
  /* Removed background completely */
  position: relative;
}

.mega-menu-featured-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Fades the image's own edges into the mega menu's white background (#ffffff)
   on all four sides instead of leaving hard rectangular boundaries. Sits on a 
   pseudo-element, not the <img> itself, so the source file is untouched. */
.mega-menu-image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%),
    linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%);
}

/* ---- Events nav trigger: active (menu open) text colour ---- */
#nav-events-trigger.active {
  color: var(--brandPrimary);
}

/* ---- Events arrow SVGs ---- */
/* Both arrows share base sizing/alignment */
.events-arrow--right,
.events-arrow--down {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
  /* Inherit the current nav-link colour so hover also tints the arrow */
  color: inherit;
  transition: color 0.2s ease, opacity 0.15s ease;
}

/* Default state: show right arrow, hide down arrow */
.events-arrow--right {
  display: inline-block;
}

.events-arrow--down {
  display: none;
}

/* Active (open) state: hide right arrow, show down arrow */
#nav-events-trigger.active .events-arrow--right {
  display: none;
}

#nav-events-trigger.active .events-arrow--down {
  display: inline-block;
}

/* Responsive Styles for Mega Menu */
@media (max-width: 1024px) {
  .mega-menu-content-wrapper {
    padding: 32px 40px;
  }

  .mega-menu-row {
    gap: 40px;
  }

  .mega-menu-left {
    flex: 0 0 320px;
  }

  .mega-menu-item {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .events-mega-menu {
    position: static;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border-top: none;
  }

  .mega-menu-content-wrapper {
    padding: 16px 20px;
  }

  .mega-menu-row {
    flex-direction: column;
    gap: 24px;
  }

  .mega-menu-left {
    flex: auto;
  }

  .mega-menu-right {
    display: none;
    /* Hide featured image on mobile for simplicity, matching Figma responsive styles */
  }

}

/* ==========================================================================
   Mobile Header & Hero (412px – 767.98px)
   Figma: node 1801:9170 "Hero section Mobile" (412x462 frame), a dedicated
   mobile composition — not a scaled-down desktop/tablet layout. Nested
   min-width:412px inside the existing mobile breakpoint (max-width:767.98px,
   the same boundary used elsewhere in this file, e.g. .testimonial-slide-group)
   so nothing below 412px or above 767.98px is affected.
   ========================================================================== */
@media (max-width: 767.98px) {
  @media (min-width: 0px) {

    /* ========================================
       HEADER SECTION
       ======================================== */
    .site-header {
      padding-top: var(--spacing-sm);
      /* 12px, matches Figma's header y-offset */
    }

    .header-wrapper {
      padding-left: var(--spacing-lg) !important;
      padding-right: var(--spacing-lg) !important;
    }

    .header-logo-brand img {
      height: 24px !important;
      width: auto;
      object-fit: contain;
    }

    /* Strip the pill's glass chrome so only the transparent hamburger tap
       target remains, top-right, matching the plain white reference header. */
    .navbar-floating {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
      box-shadow: none;
      padding-left: var(--spacing-sm, 12px) !important;
      padding-right: var(--spacing-sm, 12px) !important;
    }

    .navbar-toggler {
      width: 44px;
      height: 44px;
      padding: 0;
      margin-right: 0 !important;
      /* overrides Bootstrap's .me-2 utility (!important) */
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--border-radius-full);
    }

    /* Menu icon asset, replacing Bootstrap's default toggler SVG. */

    /* Swap to the close (X) icon while the menu is open.
       The .is-open class is added/removed by the custom drawer controller. */
    .navbar-toggler.is-open .toggler-close-icon {
      display: block;
      width: 24px;
      height: 24px;
      color: #000000;
    }

    /* Reveal the "Join Community" CTA in the default mobile header row
       (previously desktop-only via d-none d-lg-block), and reorder it ahead
       of the toggler — Figma's mobile header row is [logo] ... [button, icon]. */
    .navbar-floating .container-fluid>.d-none.d-lg-block {
      display: block !important;
      order: 1;
    }

    .navbar-toggler {
      order: 2;
    }

    .navbar-floating .container-fluid {
      gap: 20px;
    }

    /* Removed from the flex flow entirely (not just faded) so it can't
       consume a gap slot next to the CTA button above. */

    /* Mobile header's CTA is smaller than the hero's Explore Events button
       (Figma node 3096:7144: 160x37.45px, 12px label). */
    #header-cta-btn {

      height: 37.45px;
      font-size: 12px;
    }

    /* Prevent Bootstrap's collapse nav from ever appearing on mobile.
       The custom mobile drawer (#mobileNavDrawer) is used instead. */
    #navbarNav {
      display: none !important;
    }

    /* ========================================
       HERO SECTION
       ======================================== */
    .hero-section {
      padding-top: 94px;
      /* clears the absolutely-positioned header (12+44) + Figma's 38px gap */
      padding-bottom: 50px;
      /* Side padding lives on .container below instead — zero this out so it
         doesn't stack with the tablet block's own .hero-section side padding
         (both blocks match this width range). */
      padding-left: 0;
      padding-right: 0;
    }

    .hero-section .container {
      padding-left: 20px;
      padding-right: 20px;
    }

    /* Restore hero image collage/slider on mobile below the text column */
    .hero-content .row>.col-lg-6+.col-lg-6 {
      display: block !important;
      margin-top: var(--spacing-xl);
    }

    .hero-content .d-flex.flex-column {
      max-width: 345px;
      gap: 0 !important;
      /* overrides Bootstrap's .gap-4 utility (!important); exact rhythm set via margins below, since Figma's gaps aren't uniform */
    }

    /* Community badge */
    .community-pill-badge {
      gap: 7px;
      padding: 10px;
      font-size: var(--font-size-12px);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-md);
      /* 28px */
      white-space: nowrap;
    }

    .community-pill-badge img {
      width: 16px;
      height: 16px;
    }

    .community-pill-badge span {
      font-size: var(--font-size-12px);
    }

    /* Heading — force exactly 2 lines ("A Community" / "That Learn.") via
       the existing <br>; nothing here should let it wrap to a 3rd line. */
    .hero-title {
      font-size: var(--font-size-40px);
      font-weight: var(--font-weight-semibold);
      letter-spacing: 0;
      margin: 0;
    }

    .hero-word-switcher {
      font-weight: var(--font-weight-bold);
    }

    /* Description — keep default/desktop copy visible on mobile responsive as well */
    .hero-subtext-default {
      display: block;
      font-size: var(--font-size-14px);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-sm);
      color: var(--textColorHigh);
      max-width: 100%;
      margin: var(--spacing-md) 0 0;
    }

    .hero-subtext-mobile {
      display: none;
    }

    /* Button — 32px gap below description */
    .hero-content .d-flex.flex-column>div:last-child {
      margin-top: var(--spacing-3xl);
    }

    .btn-brand-primary {
      height: 44px;
      font-size: var(--font-size-16px);
    }

    /* ========================================
       ABOUT SECTION
       ======================================== */
    .about-section {
      padding-top: var(--spacing-4xl);
      padding-bottom: var(--spacing-5xl);
      padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);
    }

    .about-statements-wrapper {
      gap: var(--spacing-2xl) !important;
    }

    .about-statement-row {
      font-size: var(--font-size-24px);
      font-weight: var(--font-weight-semibold);
      line-height: 1.25;
      row-gap: var(--spacing-xs);
      font-family: var(--font-family-main);
    }

    .about-text-brand {
      color: var(--textColorDefault);
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-32px);
    }

    .about-text-dark {
      color: var(--textColorDefault);
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-32px);
    }

    .about-pill-frame {
      width: 150px;
      height: 50px;
    }

    /* ========================================
       PARTNERS SECTION
       ======================================== */
    .partners-section {
      padding-top: var(--spacing-5xl);
      padding-bottom: var(--spacing-5xl);
      padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);
      height: auto;
    }

    .partner-logo-img {
      max-height: 48px !important;

    }

    /* ========================================
       SPEAKERS SECTION
       ======================================== */
    .speakers-section {
      padding-top: var(--spacing-5xl);
      padding-bottom: var(--spacing-5xl);
      padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);
    }

    .heading-3 {
      font-family: var(--font-family-main);
      font-size: var(--font-size-24px);
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-lg);
      margin-bottom: var(--spacing-md);
    }

    .speakers-main-subtext {
      font-family: var(--font-family-main);
      font-size: var(--font-size-14px);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-md);
      margin-bottom: var(--spacing-xl);
      max-width: 100%;
    }

    .speakers-carousel-container {
      margin-right: 0 !important;
      padding-right: 0 !important;
      overflow: hidden !important;
    }

    .speakers-carousel-container::after {
      display: none !important;
    }

    /* One card at a time: full-width, no gap, snap centering */
    .speakers-right-cards {
      gap: 0 !important;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
    }

    .speaker-feature-card {
      width: 100% !important;
      flex: 0 0 100% !important;
      height: 340px !important;
      min-height: 340px !important;
      max-height: 340px !important;
      scroll-snap-align: center;
    }

    .speaker-card-content {
      padding: var(--spacing-lg);
      gap: var(--spacing-xs);
    }

    .speaker-card-title {
      font-family: var(--font-family-heading);
      font-size: var(--font-size-18px);
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-md);
      color: var(--textColorLowest);
    }

    .speaker-card-desc {
      font-family: var(--font-family-main);
      font-size: var(--font-size-14px);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-sm);
      color: var(--textColorLow);
    }

    /* ========================================
       EVENT HIGHLIGHTS SECTION
       ======================================== */
    .events-section {
      padding-top: var(--spacing-6xl);
      padding-bottom: var(--spacing-6xl);
      padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);
    }

    .events-section .events-content>.d-flex {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: var(--spacing-md) !important;
    }

    .events-section .events-content>.d-flex>.d-flex {
      align-self: flex-end !important;
    }

    .events-section .heading-2 {
      font-family: var(--font-family-main);
      font-size: var(--font-size-24px) !important;
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-lg);
    }

    .events-carousel-viewport {
      overflow: hidden !important;
    }

    .event-highlight-card {
      width: calc(100vw - 80px) !important;
      flex: 0 0 calc(100vw - 80px) !important;
      height: 400px !important;
      min-height: 400px !important;
      max-height: 400px !important;
    }

    .event-highlight-card .event-card-bg {
      object-position: center 20% !important;
    }

    .event-card-body {
      padding: var(--spacing-lg);
    }

    .event-card-title {
      font-family: var(--font-family-main);
      font-size: var(--font-size-16px);
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-md);
      color: var(--textColorLowest);
    }

    .event-date-badge {
      font-size: var(--font-size-12px);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-xs);
      gap: var(--spacing-xs);
    }

    .events-carousel-track {
      gap: var(--spacing-md);
    }

    /* Disable hover interactions on mobile */
    .event-highlight-card:hover {
      transform: none !important;
      box-shadow: none !important;
    }

    .event-highlight-card:hover .event-card-bg {
      transform: none !important;
    }

    .event-highlight-card:hover .event-play-btn,
    .event-play-btn:hover {
      transform: none !important;
      background: rgba(0, 0, 0, 0.45) !important;
      border-color: var(--borderColorBorderVariant2) !important;
      color: var(--iconColorLowest) !important;
    }

    /* ========================================
       TESTIMONIALS SECTION
       ======================================== */
    .gallery-section {
      padding-top: var(--spacing-5xl);
      padding-bottom: var(--spacing-5xl);
      padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);
    }

    .heading-2 {
      font-family: var(--font-family-main);
      font-size: var(--font-size-24px) !important;
      font-weight: var(--font-weight-semibold);
      line-height: var(--line-height-lg);
      letter-spacing: var(--letter-spacing-xs);
    }

    .testimonial-stories-text {
      font-family: var(--font-family-main);
      font-size: var(--font-size-18px);
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-lg);
      letter-spacing: var(--letter-spacing-xs);
    }

    .testimonial-section-subtitle {
      font-family: var(--font-family-main);
      font-size: var(--font-size-14px);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-md);
      margin-bottom: var(--spacing-4xl);
    }

    .testimonial-quote {
      font-family: var(--font-family-main);
      font-size: var(--font-size-16px);
      line-height: var(--line-height-md);
      font-weight: var(--font-weight-regular);
      color: var(--textColorHigh);
    }

    .author-name {
      font-family: var(--font-family-heading);
      font-size: var(--font-size-16px);
      font-weight: var(--font-weight-medium);
    }

    .author-role {
      font-family: var(--font-family-main);
      font-size: var(--font-size-14px);
      color: var(--textColorHigh);
    }

    /* ========================================
       FAQ SECTION
       ======================================== */
    .faq-hero {
      padding: 32px 16px 28px;
    }

    .faq-body {
      padding: 28px 16px 0;
    }

    /* ========================================
       CTA / JOIN COMMUNITY SECTION
       ======================================== */
    .join-section {
      padding-top: var(--spacing-5xl);
      padding-bottom: var(--spacing-5xl);
      padding-left: var(--spacing-xl);
      padding-right: var(--spacing-xl);
      height: auto;
      background-position: 75% center;
    }

    .join-section .h1-title,
    .join-content .h1-title,
    .join-content h1 {
      font-family: var(--font-family-main) !important;
      font-size: var(--font-size-24px) !important;
      line-height: var(--line-height-lg) !important;
      font-weight: var(--font-weight-semibold) !important;
      letter-spacing: var(--letter-spacing-xs) !important;
      margin-bottom: var(--spacing-md) !important;
    }

    .join-desc {
      font-family: var(--font-family-main);
      font-size: var(--font-size-14px);
      line-height: 1.6;
      font-weight: var(--font-weight-regular);
      margin-bottom: var(--spacing-3xl);
      max-width: 240px;
    }

    /* ========================================
       FOOTER
       ======================================== */
    .footer-section {
      padding-top: var(--spacing-4xl);
      padding-bottom: var(--spacing-3xl);
      padding-left: var(--spacing-lg) !important;
      padding-right: var(--spacing-lg) !important;
    }

    .footer-summary-text {
      font-family: var(--font-family-main);
      font-size: var(--font-size-14px);
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-md);
    }

    .footer-link {
      font-family: var(--font-family-main);
      font-size: var(--font-size-14px);
      font-weight: var(--font-weight-medium);
    }

    .footer-attribution {
      font-size: var(--font-size-12px);
      gap: var(--spacing-xs);
    }

    .footer-content .row {
      gap: var(--spacing-4xl) 0;
    }
  }
}

/* ========================================
   NAVIGATION DRAWER & SUB-DRAWER (< 1200px)
   ======================================== */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 4000;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-nav-drawer.open,
.mobile-nav-drawer.is-open {
  transform: translateY(0);
}

.drawer-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-3xl);
}

.btn-drawer-cta {
  background-color: var(--brandPrimary);
  color: var(--brandOnPrimary);
  height: 37.45px;
  padding: var(--spacing-0) var(--spacing-lg);
  border-radius: var(--border-radius-full, 50px);
  text-decoration: none;
  font-family: var(--font-family-heading, var(--font-family-main));
  font-weight: var(--font-weight-medium, 500);
  font-size: var(--font-size-12px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  white-space: nowrap;
}

.btn-drawer-cta:hover {
  background-color: var(--brandPrimaryVariant);
  color: var(--brandOnPrimary);
  opacity: 0.9;
}

.btn-drawer-cta:active {
  background-color: var(--brandPrimary);
  color: var(--brandOnPrimary);
}

.drawer-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

.drawer-content {
  padding: 24px 20px;
  flex: 1;
}

.drawer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.drawer-nav-link {
  font-family: var(--font-family-heading);
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.drawer-nav-link.active,
.drawer-nav-link:hover {
  color: var(--brandPrimary, #0d6efd);
}

/* Sub-drawer for Events inside mobile navigation */
.mobile-events-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 4001;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-events-drawer.open,
.mobile-events-drawer.is-open {
  transform: translateX(0);
}

/* Back button in events drawer header */
.drawer-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}

/* Events list */
.events-drawer-content {
  padding: 40px 24px 24px;
  flex: 1;
}

.events-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Mobile events drawer page-based navigation */
.events-drawer-nav-group {
  margin-bottom: 0;
}

/* Pagination buttons inside the mobile events drawer */
.events-drawer-content .events-drawer-link {
  font-family: var(--font-family-heading);
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  color: #000;
  text-decoration: none;
}

.events-drawer-link:hover {
  color: var(--brandPrimary, #0d6efd);
}

/* Social icons row */
.events-drawer-socials {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  margin-top: 60px;
}

.events-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--brandPrimaryVariant4);
  flex-shrink: 0;
}

.events-social-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: invert(31%) sepia(97%) saturate(3948%) hue-rotate(256deg) brightness(99%) contrast(95%);
}

/* Bottom image */
.events-drawer-image-wrap {
  position: relative;
  width: 100%;
  flex-shrink: 0;
}

.events-drawer-img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(100%);
}

.events-drawer-img-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background:
    linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%),
    linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%);
  pointer-events: none;
}

@media (max-width: 991.98px) {

  /* ========================================
       MOBILE TWEAKS: Partners, FAQ, CTA, Testimonials, Speakers
       ======================================== */
  .partners-section {
    height: auto !important;
    padding: 40px 0 !important;
  }

  .heading-2 {
    font-size: var(--font-size-24px) !important;
    line-height: var(--line-height-lg);
  }

  .partners-logos-wrapper {
    align-items: center !important;
    gap: var(--spacing-md) !important;
  }

  .partner-logo-img {
    height: 72px !important;
    max-height: 72px !important;
  }

  .disabled-arrow {
    opacity: 0.3;
    pointer-events: none;
  }

  /* ========================================
       EVENTS TRIGGER (in main drawer)
       ======================================== */
  .drawer-events-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .drawer-events-trigger svg {
    flex-shrink: 0;
    color: #000;
  }

  /* ========================================
       MOBILE EVENTS SUB-DRAWER
       ======================================== */
  .mobile-events-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 4100;
    /* above main drawer */
    transform: translateX(100%);
    /* slides in from right */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
  }

  .mobile-events-drawer.open {
    transform: translateX(0);
  }

  /* Back button in events drawer header */
  .drawer-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
  }

  /* Events list */
  .events-drawer-content {
    padding: 40px 24px 24px;
    flex: 1;
  }

  .events-drawer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* Mobile events drawer page-based navigation */
  .events-drawer-nav-group {
    margin-bottom: 0;
  }

  /* Pagination buttons inside the mobile events drawer */
  .events-drawer-content .events-drawer-link {
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    color: #000;
    text-decoration: none;
  }

  .events-drawer-link:hover {
    color: var(--brandPrimary, #0d6efd);
  }

  /* Social icons row */
  .events-drawer-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    margin-top: 60px;
  }

  .events-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--brandPrimaryVariant4);
    flex-shrink: 0;
  }


  .events-social-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(31%) sepia(97%) saturate(3948%) hue-rotate(256deg) brightness(99%) contrast(95%);
  }

  /* Bottom image */
  .events-drawer-image-wrap {
    position: relative;
    width: 100%;
    flex-shrink: 0;
  }

  .events-drawer-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: grayscale(100%);
  }

  .events-drawer-img-fade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background:
      linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%),
      linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #ffffff 100%);
    pointer-events: none;
  }
}

/* ==========================================================================
   About Page Hero Banner Section (Figma Node 1792:8758)
   ========================================================================== */
.about-hero-banner {
  padding-top: var(--spacing-9xl) !important;
  text-align: center;
}

.about-hero-content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.about-hero-title {
  white-space: nowrap;
}

@media (max-width: 991.98px) {

  .about-hero-title,
  .about-hero-title span,
  .gallery-hero-title,
  .gallery-hero-title span,
  .speakers-hero-title,
  .speakers-hero-title span,
  .explore-banner-section h1,
  .explore-banner-section h1 span,
  .explore-banner-section .h1-title-variant-2 {
    font-family: var(--font-family-main) !important;
    font-size: var(--font-size-40px) !important;
    line-height: var(--line-height-xl) !important;
    letter-spacing: var(--letter-spacing-xss) !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}

.about-hero-banner {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  text-align: center;
}

.about-banner-video-container {
  width: 100%;
  margin-top: var(--spacing-5xl);
  padding-left: var(--spacing-4xl);
  padding-right: var(--spacing-4xl);
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.about-banner-video-wrap {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-radius: var(--border-radius-xl1) var(--border-radius-xl1) 0 0;
  overflow: hidden;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.about-banner-video {
  width: 100%;
  height: auto;
  max-height: 780px;
  object-fit: cover;
  display: block !important;
  margin-bottom: 0 !important;
  border: none !important;
  outline: none !important;
}

@media (max-width: 991.98px) {
  .about-hero-banner {
    padding-top: 110px !important;
    padding-bottom: 0 !important;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    margin-bottom: 0 !important;
  }

  .about-banner-video-container {
    padding-left: var(--spacing-0);
    padding-right: var(--spacing-0);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .about-banner-video-wrap {
    border-top-left-radius: var(--border-radius-xl) !important;
    border-top-right-radius: var(--border-radius-xl) !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .about-banner-video {
    max-height: 400px;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .about-hero-banner {
    padding-top: var(--spacing-8xl) !important;
    padding-bottom: 0 !important;
  }

  .about-banner-video {
    max-height: 260px;
    margin-bottom: -1px !important;
  }

  .community-passion-title {
    margin-bottom: var(--spacing-4xl) !important;
  }
}

/* ==========================================================================
   Infinite Marquee Ticker Strip (Figma Node 1792:8769)
   ========================================================================== */
.ticker-strip-section {
  background-color: var(--brandPrimary);
  padding: var(--spacing-xl) var(--spacing-0);
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 0 !important;
  border-top: none !important;
}

.ticker-strip-track {
  display: flex;
  width: max-content;
  animation: tickerInfiniteScroll 25s linear infinite;
}

.ticker-strip-track:hover {
  animation-play-state: paused;
}

.ticker-strip-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
  padding-right: var(--spacing-4xl);
}

.ticker-item {
  font-family: var(--font-family-main);
  font-size: var(--font-size-40px);
  line-height: var(--line-height-xl);
  letter-spacing: var(--letter-spacing-xs);
  text-transform: lowercase;
  color: var(--brandPrimaryVariant4);
}

.ticker-w1 {
  font-weight: var(--font-weight-regular);
  font-style: normal;
}

.ticker-w2 {
  font-weight: var(--font-weight-semibold);
  font-style: var(--font-style-italic);
}

.ticker-item.text-white,
.ticker-item.text-brand {
  color: var(--textColorLow);
}

.ticker-logo {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: var(--brandPrimaryVariant4);
  -webkit-mask: url('/assets/website-images/assets/dq_logo_solid.svg') no-repeat center / contain;
  mask: url('/assets/website-images/assets/dq_logo_solid.svg') no-repeat center / contain;
}

@keyframes tickerInfiniteScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 991.98px) {

  .ticker-item,
  .ticker-w1,
  .ticker-w2 {
    font-size: var(--font-size-24px) !important;
    line-height: var(--line-height-lg) !important;
  }

  .ticker-logo {
    width: 24px !important;
    height: 24px !important;
  }

  .ticker-strip-content {
    gap: var(--spacing-xl) !important;
    padding-right: var(--spacing-2xl) !important;
  }
}

@media (max-width: 575.98px) {
  .ticker-strip-section {
    padding: var(--spacing-md) var(--spacing-0);
  }
}

/* ==========================================================================
   Turning Passion into a Community Section (Figma Node 1792:8771)
   ========================================================================== */
.community-passion-section {
  padding-top: var(--spacing-8xl);
  padding-bottom: var(--spacing-8xl);
  background-color: var(--backgroundSurfaceLow);
}

.community-passion-title {
  margin-bottom: var(--spacing-6xl);
}

.community-map-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  pointer-events: none;
  z-index: 0;
}

.community-card {
  position: relative;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  height: 312px !important;
  flex: 0 0 300px;
  background-color: var(--backgroundBackground);
  border-radius: var(--spacing-md);
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--borderColorBorder);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.community-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.community-card-content {
  position: relative;
  z-index: 2;
  transition: opacity 0.35s ease;
}

.community-card:hover .community-card-content {
  opacity: 0;
}

.community-card-hover-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.4s ease;
  transform: scale(1.05);
}

.community-card:hover .community-card-hover-img {
  opacity: 1;
  transform: scale(1);
}

.dq-card-logo {
  color: rgba(0, 0, 0, 0.10);
}

@media (min-width: 1200px) {
  .card-stagger-down {
    margin-top: var(--spacing-5xl);
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .community-passion-section {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
  }

  .community-cards-row {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    --bs-gutter-x: 24px !important;
    --bs-gutter-y: 32px !important;
    row-gap: 32px !important;
  }

  .community-cards-row .col-auto {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    display: flex !important;
    justify-content: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .community-cards-row .col-auto:nth-last-child(-n+2) {
    margin-bottom: 0 !important;
  }

  .community-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 320px !important;
    flex: 1 1 auto !important;
  }

  .card-stagger-up,
  .card-stagger-down {
    margin-top: var(--spacing-0) !important;
  }
}

@media (max-width: 767.98px) {
  .community-passion-section {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .community-cards-row {
    padding-top: var(--spacing-4xl);
    --bs-gutter-y: var(--spacing-4xl) !important;
    gap: var(--spacing-4xl) !important;
  }

  .community-cards-row .col-auto {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .community-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 340px !important;
  }

  .card-stagger-up,
  .card-stagger-down {
    margin-top: var(--spacing-0) !important;
  }
}

/* ==========================================================================
   So, What's Design Quest Section (Figma Node 1792:8778)
   ========================================================================== */
.whats-dq-section {
  background-color: var(--backgroundsurfaceHighVariant);
  padding-top: var(--spacing-6xl);
  padding-bottom: var(--spacing-6xl);
  position: relative;
  overflow: hidden;
}

.whats-dq-text p {
  color: var(--textColorLowest);
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-xs);
}

.whats-dq-image-wrap {
  width: 510px;
  max-width: 100%;
  height: 600px;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-left: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.whats-dq-section:hover .whats-dq-image-wrap,
.whats-dq-section.is-revealed .whats-dq-image-wrap {
  opacity: 1;
  transform: translateX(0);
}

.whats-dq-img {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-lg);
  display: block;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .whats-dq-section {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
  }

  .whats-dq-content,
  .whats-dq-section .col-lg-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .whats-dq-image-wrap {
    width: 100%;
    height: auto;
    max-height: 380px;
    opacity: 1;
    transform: none;
    margin-top: var(--spacing-3xl);
  }

  .whats-dq-img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
  }
}

/* ==========================================================================
   Gallery Page Component Styles
   ========================================================================== */
.gallery-hero-section {
  padding-top: var(--spacing-9xl);
  padding-bottom: var(--spacing-2xl);
  text-align: center;
}

.gallery-hero-content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.gallery-hero-title {
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .gallery-hero-title {
    white-space: normal;
  }
}

/* ==========================================================================
   Gallery Selection Tabs & Photo Grid (Figma Node 3739:9089)
   ========================================================================== */
.gallery-edition-tabs-section {
  padding-bottom: var(--spacing-4xl);
}

.gallery-tabs-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  overflow-x: auto;
  padding-bottom: var(--spacing-md);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.gallery-tabs-row::-webkit-scrollbar {
  height: 4px;
}

.gallery-tabs-row::-webkit-scrollbar-thumb {
  background: var(--borderColorBorder);
  border-radius: 4px;
}

.gallery-tab-card {
  flex: 1 1 0px;
  min-width: 175px;
  position: relative;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--borderColorBorder);
  background-color: var(--backgroundBackground);
  padding: var(--spacing-xs);
  overflow: visible;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s ease;
  user-select: none;
}

.gallery-tab-card:hover {
  box-shadow: none;
}

.gallery-tab-inner {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-color: var(--backgroundBackground);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.gallery-tab-img-wrap {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius-md);
  background-color: transparent;
}

.gallery-tab-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius-md);
  transform: scale(1);
  transition: transform 0.35s ease;
}

.gallery-tab-card:hover .gallery-tab-img {
  transform: scale(1.05);
}

.gallery-tab-label {
  padding: 8px 8px;
  text-align: center;
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-medium);
  color: var(--textColorHighest);
  background-color: var(--backgroundBackground);
  border-radius: 12px;
  transition: none;
  white-space: nowrap;
}

/* Active State */
.gallery-tab-card.active {
  border-color: var(--backgroundSurfaceLowVariant) !important;
  background-color: var(--backgroundSurfaceLowVariant) !important;
  box-shadow: none !important;
}

.gallery-tab-card.active .gallery-tab-inner,
.gallery-tab-card.active .gallery-tab-label {
  background-color: inherit;
}

.gallery-tab-card.active .gallery-tab-label {
  color: var(--textColorDefault) !important;
  font-weight: var(--font-weight-semibold);
}

.gallery-tab-card.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 18px;
  height: 18px;
  background-color: inherit;
  border-radius: 3px;
  z-index: 10;
}

/* Gallery Events Sidebar Sticky behavior (Figma Reference) */
.gallery-edition-section,
.gallery-edition-section .container-1440,
.gallery-layout-wrapper {
  overflow: visible !important;
}

.gallery-layout-wrapper {
  display: flex;
  align-items: flex-start;
}

@media (min-width: 992px) {
  .gallery-layout-wrapper {
    padding-left: var(--spacing-4xl);
    padding-right: var(--spacing-4xl);
  }

  .gallery-events-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 110px !important;
    align-self: flex-start !important;
    z-index: 100;
  }
}

.gallery-events-sidebar .heading-4 {
  border-bottom: 2px solid var(--brandSecondaryVariant);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg) !important;
}

#galleryEditionTitle {
  margin-bottom: var(--spacing-2xl);
}

.gallery-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gallery-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--font-family-main);
  font-size: 15px;
  font-weight: 500;
  color: #344054;
  border-bottom: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  user-select: none;
  position: relative;
}

.gallery-sidebar-item::after {
  display: none !important;
  content: none !important;
}

.gallery-sidebar-arrow {
  display: none;
  flex-shrink: 0;
}

.gallery-sidebar-item:hover {
  background-color: #F9FAFB !important;
  color: #101828 !important;
}

.gallery-sidebar-item.active {
  background-color: #F9F5FF !important;
  color: #7F56D9 !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.gallery-sidebar-item.active::after {
  display: none !important;
  content: none !important;
}

.gallery-sidebar-item.active .gallery-sidebar-arrow {
  display: block !important;
}

/* Mobile Event Custom Dropdown */
.gallery-mobile-selector-wrap {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 80px !important;
  z-index: 1500 !important;
  background-color: #FFFFFF !important;
  padding: 12px 0 !important;
  margin-bottom: 20px;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gallery-mobile-selector-wrap.is-sticky-active::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 4px);
  left: -200px;
  right: -200px;
  height: 500px;
  background-color: var(--backgroundBackground) !important;
  z-index: -1;
  pointer-events: none;
}

.gallery-mobile-selector-wrap.is-navbar-hidden {
  top: 10px !important;
}

.gallery-mobile-dropdown {
  position: relative;
  width: 100%;
}

.gallery-mobile-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--backgroundBackground);
  border: 1px solid var(--borderColorBorder, #EAECF0);
  border-radius: var(--border-radius-md, 12px);
  padding: 12px 16px;
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  font-weight: 600;
  color: var(--textColorHighest);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.gallery-mobile-dropdown-btn:hover,
.gallery-mobile-dropdown-btn.is-open {
  border-color: #7F56D9;
  background-color: #FAFAFA;
}

.gallery-mobile-dropdown-arrow {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.gallery-mobile-dropdown-btn.is-open .gallery-mobile-dropdown-arrow {
  transform: rotate(180deg);
}

.gallery-mobile-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  border-radius: 12px;
  box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.14), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
  padding: 6px;
  z-index: 1100;
  overflow: hidden;
}

.gallery-mobile-dropdown-menu.show {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fadeInDropdown 0.2s ease forwards;
}

@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gallery-mobile-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-family-main);
  font-size: 15px;
  font-weight: 500;
  color: #344054;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.gallery-mobile-dropdown-item:hover {
  background-color: #F9FAFB;
  color: #101828;
}

.gallery-mobile-dropdown-item.active {
  background-color: #F9F5FF;
  color: #7F56D9;
  font-weight: 600;
}

.gallery-mobile-item-arrow {
  display: none;
  flex-shrink: 0;
}

.gallery-mobile-dropdown-item.active .gallery-mobile-item-arrow {
  display: block;
}

@media (max-width: 991.98px) {
  .gallery-edition-section {
    padding-top: 0 !important;
  }

  .gallery-events-sidebar {
    width: 100%;
    position: static !important;
    top: auto !important;
    align-self: auto !important;
  }

  .gallery-sidebar-list {
    flex-direction: column;
    gap: 4px;
  }

  .gallery-sidebar-item {
    border-bottom: none !important;
    padding: 10px 14px;
    border-radius: 8px !important;
  }

  .gallery-sidebar-item.active {
    background-color: #F9F5FF !important;
    color: #7F56D9 !important;
  }

  .gallery-sidebar-item.active .gallery-sidebar-arrow {
    display: block !important;
  }
}

/* Gallery Photo Grid */
.gallery-photo-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--spacing-3xl);
  row-gap: var(--spacing-lg);
  align-items: flex-start;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.gallery-photo-col {
  flex: 1 1 0px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
  min-width: 0;
}

.gallery-photo-centered-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.gallery-photo-centered-row .gallery-photo-card {
  width: calc((100% - (2 * var(--spacing-4xl))) / 3);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .gallery-photo-grid {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 991.98px) {
  .gallery-photo-grid {
    column-gap: var(--spacing-lg);
  }

  .gallery-photo-centered-row .gallery-photo-card {
    width: calc((100% - (2 * var(--spacing-lg))) / 3);
  }
}

@media (max-width: 767.98px) {
  .gallery-photo-grid {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .gallery-photo-col {
    width: 100%;
  }

  .gallery-photo-centered-row .gallery-photo-card {
    width: 100%;
  }

  .gallery-photo-img.short,
  .gallery-photo-img.tall {
    height: 280px;
  }
}

@media (max-width: 575.98px) {
  .gallery-tab-card {
    min-width: 140px;
    padding: 6px;
  }

  .gallery-tab-label {
    font-size: var(--font-size-12px);
    padding: 6px 4px;
    white-space: nowrap;
  }
}

.gallery-photo-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--backgroundSurfaceLow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.gallery-photo-img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  transition: transform 0.5s ease;
}

.gallery-photo-img.short {
  height: 320px;
}

.gallery-photo-img.tall {
  height: 460px;
}

.gallery-photo-img[src*="Image 6.png"],
.gallery-photo-img[src*="Image%206.png"] {
  object-position: center top !important;
}

.gallery-photo-img[src*="Image 10.png"],
.gallery-photo-img[src*="Image%2010.png"],
.gallery-photo-img[src*="Image 11.png"],
.gallery-photo-img[src*="Image%2011.png"],
.gallery-photo-img[src*="Image 14.png"],
.gallery-photo-img[src*="Image%2014.png"] {
  object-position: center 27% !important;
}

/* MQ 2K24 specific image positioning & offset */
.gallery-photo-card:hover .gallery-photo-img {
  transform: scale(1.05);
}

/* ==========================================================================
   Timeline / Our Journey Section (Figma Node 1792:8779)
   ========================================================================== */
.timeline-section {
  background-color: #F8F9FA;
  padding: var(--spacing-6xl) 0;
}

.timeline-eyebrow {
  color: var(--textColorDefault);
}

.timeline-slides-container {
  position: relative;
  min-height: 480px;
}

.timeline-slide {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.timeline-slide.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Timeline Polaroid Card (Figma Node 3827:7299) */
.timeline-polaroid-card {
  display: inline-block;
  max-width: 612px;
  width: 100%;
  background: var(--backgroundBackground, #ffffff);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg, 16px);
  box-shadow: var(--shadow-image-frame, 1px 1px 15px rgba(0, 0, 0, 0.12));
  transform: rotate(-3deg);
  text-align: left;
}

.timeline-polaroid-photo {
  width: 100%;
  height: 300px;
  border-radius: var(--border-radius-md, 12px);
  overflow: hidden;
  background-color: var(--backgroundSurfaceHigh, #eaeaea);
}

.timeline-polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.timeline-polaroid-footer {
  margin-top: 14px;
  /* padding: var(--spacing-0) var(--spacing-xs); */
  color: var(--textColorDefault);
}

.timeline-polaroid-date,
.timeline-polaroid-location {
  font-family: var(--font-family-tertiary);
  font-size: var(--font-size-24px);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--textColorDefault, #181716);
}

.timeline-polaroid-location-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Right Content */
.timeline-content h3 {
  margin-bottom: var(--spacing-md);
}

.timeline-desc {
  color: var(--textColorHigh);
}

/* Timeline Navigation Tabs */
.timeline-nav-wrapper {
  position: relative;
  max-width: 900px;
  margin: var(--spacing-5xl) auto 0 auto;
}

.timeline-line {
  position: absolute;
  top: 70px;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  height: 1px;
  border-top: 1px dashed var(--textColorLowestVariant, #D4D4D4);
  z-index: 1;
}

.timeline-tabs {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--spacing-sm));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-tab {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  outline: none !important;
  user-select: none;
  transition: transform 0.3s ease;
}

.timeline-tab:focus,
.timeline-tab:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.timeline-year {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-24px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--textColorLowestVariant, #CCCCCC);
  transition: color 0.3s ease;
}

.timeline-tab:hover .timeline-year,
.timeline-tab.active .timeline-year {
  color: var(--textColorHighest, #181716);
}

.timeline-tab[data-target="mq_2024"] .timeline-year {
  font-size: var(--font-size-16px) !important;
}

.timeline-icon-wrap {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  transition: transform 0.3s ease;
}

.timeline-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.timeline-icon-active {
  display: none;
}

.timeline-icon-inactive {
  display: block;
  color: var(--iconColorLow);
}

.timeline-tab.active .timeline-icon-wrap {
  transform: scale(1.15);
}

.timeline-tab.active .timeline-icon-active {
  display: block;
}

.timeline-tab.active .timeline-icon-inactive {
  display: none;
}

/* Mobile & Tablet Responsiveness for Timeline (< 1024px) */
@media (max-width: 1023.98px) {
  .timeline-section {
    padding: 60px var(--spacing-lg);
  }

  .timeline-section .col-lg-6,
  .timeline-content {
    padding-left: var(--spacing-0) !important;
    padding-right: var(--spacing-0) !important;
  }

  .timeline-nav-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-3xl, 32px);
    padding-top: var(--spacing-xs, 8px);
    overflow: hidden;
  }

  .timeline-line {
    top: 68px;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    transform: none;
    z-index: 1;
  }

  .timeline-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: clamp(20px, 2.5vw, 20px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 0px;
    padding-bottom: 12px;
    margin-left: -8px !important;
    position: relative;
    z-index: 2;
  }

  .timeline-tabs::-webkit-scrollbar {
    display: none;
  }

  .timeline-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex: 0 0 clamp(95px, 34%, 190px) !important;
    width: clamp(95px, 34%, 190px) !important;
    min-width: clamp(95px, 34%, 190px) !important;
    max-width: clamp(95px, 34%, 190px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
  }

  .timeline-tab.active {
    opacity: 1 !important;
  }

  .timeline-icon-wrap {
    justify-content: center !important;
  }

  .timeline-polaroid-card {
    max-width: 360px !important;
    width: 100% !important;
    transform: rotate(-3deg) !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .timeline-polaroid-photo {
    height: 176px !important;
  }

  .timeline-polaroid-date,
  .timeline-polaroid-location {
    font-size: var(--font-size-16px) !important;
  }

  .timeline-year {
    font-size: clamp(20px, 4.5vw, 24px) !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   The Team Behind Design Quest Section (Figma Node 2828:11648)
   ========================================================================== */
.team-section {
  background-color: var(--backgroundsurfaceHighVariant);
  height: 706px;
  max-height: 706px;
  display: flex;
  align-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.team-section .container-1440 {
  width: 75%;
}

.team-content h2 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-48px, 48px);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-xl, 48px);
  color: var(--textColorLowest, #ffffff) !important;
}

.team-content p {
  color: var(--textColorLow, #d4d4d4) !important;
}

@media (max-width: 991.98px) {
  .team-section {
    height: auto;
    max-height: none;
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .team-section .container-1440 {
    width: 100% !important;
  }

  .team-section .col-lg-5,
  .team-section .col-lg-7,
  .team-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .team-content h2 {
    font-size: 32px;
    line-height: var(--line-height-lg);
  }
}

.team-photo-grid-wrapper {
  position: relative;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  transform: rotate(4deg);
  transform-origin: center center;
  transition: transform 0.5s ease;
}

.team-photo-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  justify-content: flex-start;
  gap: var(--spacing-xs) !important;
}

.team-photo-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 376px !important;
  min-width: 376px !important;
  max-width: 376px !important;
  flex: 0 0 376px !important;
}

/* .team-col-2 {
  transform: translateY(30px);
} */

/* .team-col-3 {
  transform: translateY(60px);
} */

.team-photo-card {
  box-sizing: border-box !important;
  width: 376px !important;
  min-width: 376px !important;
  max-width: 376px !important;
  height: 398px !important;
  min-height: 398px !important;
  max-height: 398px !important;
  flex: 0 0 376px !important;
  flex-shrink: 0 !important;
  background: var(--backgroundBackground, #ffffff);
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-4xl) !important;
  border-radius: var(--border-radius-sm, 16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.team-photo-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--border-radius-xs) !important;
  display: block !important;
  transition: opacity 0.6s ease-in-out !important;
}

@media (max-width: 1199.98px) {
  .team-photo-grid-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: clamp(340px, 80vw, 440px) !important;
    margin: 32px auto 0 !important;
    transform: rotate(0deg) !important;
    position: relative !important;
  }

  .team-photo-grid {
    width: 100% !important;
    justify-content: center !important;
  }

  .team-photo-col.team-col-2,
  .team-photo-col.team-col-3 {
    display: none !important;
  }

  .team-photo-col.team-col-1 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
  }

  .team-col-1 .team-photo-card:not(:first-child) {
    display: none !important;
  }

  .team-photo-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-4xl) !important;
  }

  .team-photo-card img {
    width: 100% !important;
    height: clamp(260px, 50vw, 360px) !important;
    min-height: 0 !important;
    max-height: 380px !important;
    object-fit: cover !important;
    border-radius: var(--border-radius-xs) !important;
  }

  .team-badge-overlay {
    display: flex !important;
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    right: -10px !important;
    bottom: -20px !important;
    width: 130px !important;
    height: 130px !important;
    z-index: 10 !important;
  }

  .team-badge-inner {
    width: 130px !important;
    height: 130px !important;
  }

  .team-badge-logo img {
    width: 92px !important;
    height: 92px !important;
  }
}

/* Circular Badge Overlay */
.team-badge-overlay {
  position: absolute;
  left: 315px;
  top: 745px;
  z-index: 10;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.team-badge-inner {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-badge-text {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: spinTeamBadge 20s linear infinite;
}

.team-badge-text text {
  font-family: var(--font-family-main);
  font-size: var(--font-size-12px);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-xs);
  fill: var(--textColorHighest, #181716);
}

#badgeTextPath {
  fill: none !important;
  stroke: none !important;
}

@keyframes spinTeamBadge {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.team-badge-logo {
  position: absolute;
  z-index: 2;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-badge-logo img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

/* ==========================================================================
   Idea Behind Design Quest Section (Figma Node 1792:8876)
   ========================================================================== */
.idea-section {
  background-color: var(--backgroundBackground, #ffffff);
  padding: var(--spacing-6xl) 0;
  padding-bottom: var(--spacing-8xl);
  position: relative;
  overflow: hidden;
}

.idea-gradient-bg {
  position: absolute;
  left: 50%;
  bottom: -100px;
  width: 640px;
  height: 1620px;
  transform: translateY(-100%);
  background: radial-gradient(ellipse at center, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 75%);
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
  z-index: 8 !important;
}

.visionaries-composition {
  position: relative;
  width: 100%;
  max-width: 650px;
  height: 520px;
  margin: 0 auto;
  z-index: 3;
}

.visionary-person {
  position: absolute;
  bottom: 0;
  cursor: default;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Staggered Scroll Reveal Sequence: Left -> Right -> Center */
.visionaries-composition.animated .visionary-asha {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.visionaries-composition.animated .visionary-aravinth {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.visionaries-composition.animated .visionary-naveen {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* Positioning the 3 Cutout Visionaries */
.visionary-asha {
  left: 13%;
  bottom: -12%;
  z-index: 3;
  width: 48%;
}

.visionary-naveen {
  left: 34%;
  bottom: 130px;
  z-index: 1;
  width: 38%;
}

.visionary-aravinth {
  right: 0;
  bottom: -10%;
  z-index: 5;
  /* Bring Aravinth to front */
  width: 50%;
}

.visionary-aravinth::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--backgroundBackground);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: url('/assets/website-images/assets/Aravinth Shivasambo.png');
  mask-image: url('/assets/website-images/assets/Aravinth Shivasambo.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  mask-position: top center;
}

.visionary-cutout {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.08));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 80%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 80%);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.visionary-naveen .visionary-cutout {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 95%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 95%);
}

/* Text Tag Styling */
.visionary-text-tag {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.tag-left {
  top: 50px;
  left: -100px;
  align-items: flex-end;
  text-align: right;
}

.tag-top-center {
  top: 25px;
  left: -90px;
  transform: none;
  align-items: flex-end;
  text-align: right;
}

.tag-right {
  top: 40px;
  right: -90px;
}

.visionary-tag-name {
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-semibold);
  font-style: italic;
  letter-spacing: var(--letter-spacing-sm);
  text-transform: uppercase;
  color: var(--textColorDefault);
}

.visionary-tag-role {
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--textColorLowVariant);
  display: inline-flex;
  white-space: nowrap;
}


.tag-left .visionary-tag-role {
  max-width: none;
  white-space: nowrap;
}

/* Responsive styles */
@media (max-width: 991.98px) {
  .idea-section {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .visionary-card {
    max-width: 100%;
  }

  .idea-section .col-lg-5,
  .idea-section .col-lg-7,
  .idea-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: var(--spacing-md);
  }

  .visionaries-composition {
    height: 360px;
    max-width: 380px;
    margin-top: -120px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .visionary-tag-name {
    font-size: var(--font-size-12px) !important;
    letter-spacing: var(--letter-spacing-sm);
  }

  .visionary-tag-role {
    font-size: var(--font-size-10px) !important;
    line-height: var(--line-height-xs) !important;
  }


  .tag-left {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .tag-left .visionary-tag-name,
  .tag-left .visionary-tag-role {
    text-align: right !important;
    align-self: flex-end !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  .visionary-tag-name,
  .tag-top-center .visionary-tag-name,
  .tag-right .visionary-tag-name {
    text-align: center !important;
    align-self: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .visionary-tag-role,
  .tag-top-center .visionary-tag-role,
  .tag-right .visionary-tag-role {
    text-align: center !important;
    align-self: center !important;
    justify-content: center !important;
    max-width: none !important;
    width: 100% !important;
  }

  .tag-left {
    top: 130px;
    left: -20px;
  }

  .tag-top-center {
    top: -50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: max-content !important;
  }

  .tag-right {
    top: 120px;
    right: -20px;
  }

  .visionary-asha {
    width: 44% !important;
    left: 7% !important;
  }

  .visionary-naveen {
    width: 40% !important;
    left: 25% !important;
    bottom: 58px !important;
  }

  .visionary-aravinth {
    width: 46% !important;
    right: 12% !important;
  }
}

@media (max-width: 575.98px) {
  .visionaries-composition {
    height: 380px;
    max-width: 320px;
  }

  .visionary-naveen {
    bottom: 40px !important;
  }

  .visionary-tag-name {
    font-size: var(--font-size-12px) !important;
  }

  .visionary-tag-role {
    font-size: var(--font-size-10px) !important;
    line-height: var(--line-height-xs) !important;
  }

  .tag-left {
    top: 158px;
    left: -40px;
  }

  .tag-top-center {
    top: -55px;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .tag-right {
    top: 180px;
    right: -30px;
  }
}

/* ==========================================================================
   Tablet Responsive Screen Styles (768px – 1199.98px, including iPad Pro 1024px)
   Keep 32px (var(--spacing-3xl)) left and right padding throughout tablet sections
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {

  .header-wrapper,
  .site-header,
  .events-section,
  .hero-section,
  .about-hero-banner,
  .speakers-hero-section,
  .whats-dq-section,
  .timeline-section,
  .team-section,
  .idea-section,
  .drawer-content,
  .gallery-hero-section,
  .gallery-edition-section,
  .gallery-edition-tabs-section,
  .speakers-hero-section,
  .speakers-grid-section,
  .explore-banner-section,
  .explore-section,
  .explore-page-wrapper,
  .footer-section {
    padding-left: var(--spacing-3xl) !important;
    padding-right: var(--spacing-3xl) !important;
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-1440 {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: var(--spacing-0) !important;
    padding-right: var(--spacing-0) !important;
  }

  .hero-section .row,
  .whats-dq-section .row,
  .timeline-section .row,
  .team-section .row,
  .idea-section .row {
    margin-left: var(--spacing-0) !important;
    margin-right: var(--spacing-0) !important;
  }

  .whats-dq-image-wrap {
    width: clamp(320px, 70vw, 540px) !important;
    max-width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    margin: var(--spacing-2xl) auto 0 auto !important;
  }

  .whats-dq-img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .visionaries-composition {
    width: clamp(360px, 72vw, 600px) !important;
    max-width: 100% !important;
    aspect-ratio: 650 / 520 !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .visionary-tag,
  .tag-left,
  .tag-top-center,
  .tag-right {
    align-items: center !important;
    text-align: center !important;
  }

  .visionary-tag-name {
    font-size: clamp(11px, 1.4vw, 15px) !important;
  }

  .visionary-tag-role {
    font-size: clamp(10px, 1.2vw, 13px) !important;
    max-width: none !important;
  }


  .visionary-asha {
    bottom: -10% !important;
  }

  .visionary-aravinth {
    bottom: -10% !important;
  }

  /* 1st Image Tag (Asha Aravinth) -> RIGHT ALIGNED */
  .tag-left {
    top: auto !important;
    bottom: -10px !important;
    left: 12% !important;
    align-items: flex-end !important;
    text-align: right !important;
  }

  .tag-left .visionary-tag-name,
  .tag-left .visionary-tag-role {
    text-align: right !important;
    align-self: flex-end !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  /* Middle Image Tag (Naveen Ferrao) -> CENTER ALIGNED */
  .tag-top-center {
    top: -55px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: max-content !important;
  }

  .tag-top-center .visionary-tag-name,
  .tag-top-center .visionary-tag-role {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    align-self: center !important;
    width: 100% !important;
  }

  /* Right / 3rd Image Tag (Aravinth Sivasambo) -> LEFT ALIGNED */
  .tag-right {
    top: auto !important;
    bottom: -10px !important;
    right: 8% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .tag-right .visionary-tag-name,
  .tag-right .visionary-tag-role {
    text-align: left !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
    width: auto !important;
  }

  .about-hero-title,
  .gallery-hero-title,
  .explore-banner-section h1 {
    white-space: normal !important;
    line-height: var(--line-height-xl) !important;
  }

  .gallery-tab-card {
    min-width: 135px;
  }

  .gallery-tab-label {
    font-size: var(--font-size-12px) !important;
    padding: 6px 4px !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   Mobile Responsive Screen Styles (< 768px)
   Keep 20px (var(--spacing-lg)) left and right padding throughout all mobile sections
   ========================================================================== */
@media (max-width: 767.98px) {

  .header-wrapper,
  .drawer-header-bar,
  .hero-section,
  .about-hero-banner,
  .speakers-hero-section,
  .whats-dq-section,
  .timeline-section,
  .team-section,
  .idea-section,
  .gallery-hero-section,
  .gallery-edition-section,
  .gallery-edition-tabs-section,
  .speakers-hero-section,
  .speakers-grid-section,
  .explore-banner-section,
  .explore-section,
  .footer-section {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
  }

  .hero-section .container,
  .whats-dq-section .container-1440,
  .timeline-section .container-1440,
  .team-section .container-1440,
  .idea-section .container-1440,
  .speakers-hero-section .container-1440,
  .speakers-grid-section .container-1440,
  .explore-banner-section .container-1440,
  .explore-section .container-1440 {
    width: 100% !important;
    padding-left: var(--spacing-0) !important;
    padding-right: var(--spacing-0) !important;
  }

  .hero-section .row,
  .whats-dq-section .row,
  .timeline-section .row,
  .team-section .row,
  .idea-section .row,
  .speakers-grid-section .row {
    margin-left: var(--spacing-0) !important;
    margin-right: var(--spacing-0) !important;
  }

  .hero-section {
    padding-left: var(--spacing-0) !important;
    padding-right: var(--spacing-0) !important;
  }
}

/* ==========================================================================
   Speakers Page Component Styles
   ========================================================================== */

.speakers-hero-section {
  padding-top: var(--spacing-9xl);
  padding-bottom: var(--spacing-6xl);
  text-align: center;
  position: relative;
  background-color: var(--backgroundBackground, #ffffff);
}

.speakers-hero-content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.speakers-hero-title {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: var(--line-height-2xl);
}

@media (max-width: 1199.98px) {

  .gallery-hero-section,
  .explore-banner-section {
    padding-top: var(--spacing-8xl) !important;
  }
}

@media (max-width: 767.98px) {
  .gallery-hero-section {
    padding-top: var(--spacing-8xl) !important;
    padding-bottom: var(--spacing-lg) !important;
    display: block !important;
  }

  #galleryEditionTitle {
    display: none !important;
  }

  .gallery-edition-section {
    padding-top: 0 !important;
  }

  .gallery-mobile-selector-wrap {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 575.98px) {

  .speakers-hero-banner,
  .speakers-hero-section,
  .explore-banner-section {
    padding-top: var(--spacing-8xl) !important;
  }
}

/* Category Filter Tabs & Search Bar */
.speakers-controls-section {
  padding-bottom: 32px;
}

.speakers-controls-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(245, 245, 245, 0.8);
  border: 1px solid var(--borderColorBorder, rgba(0, 0, 0, 0.08));
  border-radius: 24px;
  backdrop-filter: blur(10px);
}

.speakers-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.speakers-filter-pill {
  border: none;
  background: transparent;
  padding: 8px 20px;
  border-radius: 100px;
  font-family: var(--font-family-main);
  font-size: 14px;
  font-weight: 500;
  color: var(--textColorHigh, #525252);
  transition: all 0.25s ease;
  cursor: pointer;
}

.speakers-filter-pill:hover {
  color: var(--brandPrimary, #8A38F5);
  background: rgba(138, 56, 245, 0.06);
}

.speakers-filter-pill.active {
  background: var(--brandPrimary, #8A38F5);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(138, 56, 245, 0.3);
}

.speakers-search-box {
  position: relative;
  min-width: 240px;
}

.speakers-search-input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border-radius: 100px;
  border: 1px solid var(--borderColorBorder, rgba(0, 0, 0, 0.12));
  background: #ffffff;
  font-family: var(--font-family-main);
  font-size: 14px;
  color: var(--textColorDefault, #181716);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.speakers-search-input:focus {
  border-color: var(--brandPrimary, #8A38F5);
  box-shadow: 0 0 0 3px rgba(138, 56, 245, 0.15);
}

.speakers-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  opacity: 0.5;
}

/* Speakers Grid & Cards (3 Columns, Width: 400px, Height: 586px, Overlay Height: 250px) */
.speakers-grid-section {
  padding-bottom: 100px;
}

.speakers-grid-section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  column-gap: 10px;
  gap: 10px 10px;
  --bs-gutter-x: 0px !important;
}

.speakers-grid-section .row>*,
.speakers-grid-section .speaker-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 0 0 calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
  display: flex;
  justify-content: center;
}

@media (max-width: 991.98px) {

  .speakers-grid-section .row>*,
  .speakers-grid-section .speaker-item {
    flex: 0 0 calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
  }
}

@media (max-width: 575.98px) {

  .speakers-grid-section .row>*,
  .speakers-grid-section .speaker-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.speaker-page-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 586px;
  border-radius: 36px;
  overflow: hidden;
  background-color: var(--backgroundsurfaceHighVariant);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.speaker-page-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.speaker-page-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.speaker-page-card:hover .speaker-page-img {
  transform: scale(1.035);
}

/* Frosted Overlay Element (Dynamic photo color progressive blur: Top 337px, Height 250px, Blur 59px) */
.speaker-page-overlay {
  position: absolute;
  top: 337px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 35px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(59px) saturate(140%);
  -webkit-backdrop-filter: blur(59px) saturate(140%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 21.56%, rgba(0, 0, 0, 1) 72.94%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 21.56%, rgba(0, 0, 0, 1) 72.94%);
  pointer-events: none;
  z-index: 1;
}

.speaker-page-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 35px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

.speaker-page-card-body {
  position: absolute;
  top: 337px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  padding: var(--spacing-lg);
  transform: translateY(20px);
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.speaker-page-name {
  font-family: var(--font-family-main);
  font-size: var(--font-size-20px);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-md);
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.speaker-page-role {
  font-family: var(--font-family-main);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.speaker-page-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.speaker-tag-pill {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 5px 18px;
  border-radius: 100px;
  font-family: var(--font-family-main);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-block;
}

@media (max-width: 991.98px) {
  .speaker-page-card {
    height: 520px;
  }

  .speaker-page-overlay,
  .speaker-page-card-body {
    top: 290px;
    height: 230px;
  }
}

@media (max-width: 575.98px) {
  .speaker-page-card {
    height: 460px;
    border-radius: 28px;
  }

  .speaker-page-overlay,
  .speaker-page-card-body {
    top: 240px;
    height: 220px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  .speaker-page-card-body {
    padding: var(--spacing-lg);
  }

  .speaker-page-name {
    font-size: 20px;
  }

  .speaker-page-role {
    font-size: 13px;
  }
}

/* ==========================================================================
   Explore Mangalore Dedicated Page Styles
   ========================================================================== */
.eyebrow-pill {
  background-color: var(--brandPrimaryVariant4, #F4EBFF);
  color: var(--brandPrimary, #7F56D9);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.explore-tab-btn {
  background: transparent;
  color: #585554;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  font-weight: 500;
}

.explore-tab-btn:hover {
  color: #181716;
  background: rgba(0, 0, 0, 0.04);
}

.explore-tab-btn.active {
  background: var(--textColorHighest, #181716) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.explore-spot-card {
  border-radius: 16px !important;
}

/* Match the speakers page photo zoom on Explore Mangalore cards. */
.explore-mangalore-page .explore-spot-card .spot-card-img,
.explore-mangalore-page .adventure-bento-card > img {
  transform: scale(1);
  transform-origin: center center;
  transition: filter 0.4s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.explore-mangalore-page .explore-spot-card:hover .spot-card-img,
.explore-mangalore-page .adventure-bento-card:hover > img {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .explore-mangalore-page .explore-spot-card .spot-card-img,
  .explore-mangalore-page .adventure-bento-card > img,
  .explore-mangalore-page .explore-spot-card:hover .spot-card-img,
  .explore-mangalore-page .adventure-bento-card:hover > img {
    transform: none;
    transition: none;
  }
}

.explore-spot-card .spot-card-title,
.explore-spot-card h3 {
  font-family: var(--font-family-main);
  font-size: var(--font-size-18px);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-xs);
}

.explore-spot-card .spot-card-desc,
.explore-spot-card p {
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--textColorLow);
}


.explore-spot-card,
.adventure-bento-card {
  cursor: pointer;
}

.spot-card-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.92) 100%);
  z-index: 2;
}


.explore-banner-section {
  padding-top: var(--spacing-9xl) !important;
  padding-bottom: var(--spacing-2xl) !important;
  text-align: center;
}

@media (max-width: 1400px) {
  .explore-banner-section {
    padding-top: var(--spacing-8xl) !important;
  }
}

@media (max-width: 991.98px) {
  .explore-banner-section {
    padding-top: var(--spacing-8xl) !important;
  }
}

.explore-figma-card {
  width: 369px;
  max-width: 85vw;
}

/* Adventures Bento Grid Layout & Hover Interaction (Figma node 2907:5760 & 2904:4167) */
.adventures-bento-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-0);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.adventure-bento-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--borderColorBorderVariant2, rgba(255, 255, 255, 0.1));
  cursor: pointer;
}

.adventure-bento-card:last-child {
  border-right: none;
}

.adventure-bento-card>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease, transform 0.4s ease;
}

.adventure-bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
  z-index: 1;
}

.adventure-bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.88);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 2;
}

.adventure-bento-card:hover::before {
  transform: translateY(0);
}

.adventure-bento-card:hover>img {
  filter: brightness(0.4) blur(1px);
}

.adventure-vertical-title {
  position: absolute;
  bottom: var(--spacing-xl);
  right: 18px;
  color: var(--fixedWhite);
  font-family: var(--font-family-main);
  font-size: var(--font-size-32px);
  font-weight: var(--font-weight-bold);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  margin: var(--spacing-0);
  line-height: 1;
  letter-spacing: -0.01em;
  z-index: 3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: opacity 0.4s ease;
}

.adventure-bento-card:hover .adventure-vertical-title {
  opacity: 0.25;
}

.adventure-hover-content {
  position: absolute;
  top: 36px;
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 4;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.adventure-bento-card:hover .adventure-hover-content {
  opacity: 1;
  transform: translateY(0);
}

.adventure-locations-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--fixedWhite);
  font-family: var(--font-family-main);
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
}

img.adventure-location-icon,
.adventure-location-icon {
  width: var(--spacing-md) !important;
  height: var(--spacing-md) !important;
  max-width: var(--spacing-md) !important;
  max-height: var(--spacing-md) !important;
  min-width: var(--spacing-md) !important;
  min-height: var(--spacing-md) !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.adventure-locations-list {
  list-style: none;
  padding: var(--spacing-0);
  margin: var(--spacing-0);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.adventure-locations-list li {
  position: relative;
  padding-left: 14px;
  color: var(--textColorLow);
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  line-height: 1.4;
  font-weight: var(--font-weight-regular);
}

.adventure-locations-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--textColorLow);
  font-size: var(--font-size-14px);
}

@media (max-width: 1199.98px) {
  .adventures-bento-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    height: 420px;
    border-radius: var(--border-radius-lg);
    gap: var(--spacing-xs);
  }

  .adventures-bento-grid::-webkit-scrollbar {
    display: none;
  }

  .adventure-bento-card {
    flex: 0 0 220px;
    min-width: 220px;
    border-radius: var(--border-radius-md);
    border-right: none;
  }

  /* Dark bottom gradient overlay for readability on mobile & tab */
  .adventure-bento-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.88) 100%) !important;
  }

  /* Disable dark hover overlay pseudo element on mobile & tab */
  .adventure-bento-card::before {
    display: none !important;
  }

  .adventure-bento-card:hover>img {
    filter: none !important;
  }

  /* Vertical title positioned at top-right on mobile & tab */
  .adventure-vertical-title {
    font-size: 26px;
    top: var(--spacing-lg);
    bottom: auto;
    right: 14px;
    opacity: 1 !important;
  }

  /* Permanently show locations list at bottom without hover on mobile & tab */
  .adventure-hover-content {
    top: auto;
    bottom: var(--spacing-md);
    left: 14px;
    right: 14px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .adventure-locations-header {
    display: none !important;
  }

  .adventure-locations-list li {
    font-size: var(--font-size-12px) !important;
    color: var(--fixedWhite);
  }

  .adventure-locations-list li::before {
    font-size: var(--font-size-12px) !important;
    color: var(--fixedWhite);
  }
}

.explore-purple-pill {
  display: inline-block;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.70) 100%);
  color: #ffffff;
  border-radius: var(--border-radius-md, 12px);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.site-account {
  position: relative;
}

@media (max-width: 1199.98px) {
  .navbar-floating .container-fluid > .site-account-container.d-none.d-lg-block {
    display: none !important;
  }
}

.site-account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brandPrimary, #8A38F5);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.site-account-avatar:hover {
  background: var(--brandPrimaryVariant, #7125D3);
}

.site-account-avatar:focus-visible {
  outline: 3px solid var(--brandPrimaryVariant3, #C293FF);
  outline-offset: 3px;
}

.site-account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
  z-index: 1050;
}

.site-account-dropdown.show {
  display: block;
}

.site-account-item {
    display: block;
    width: 100%;
    padding: 5px 14px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--textColorHighest, #252323);
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    font-weight: 500;
}

.site-account-item:focus-visible,
.site-account-item.active {
  background: var(--brandPrimaryVariant4, #F4EBFF);
  color: var(--brandPrimary, #8A38F5);
}


.site-account-item:hover {
    background-color: #F9FAFB;
    color: #101828;
}

.site-account-signout {
  color: #dc3545;
}

.explore-scroll-row {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.explore-scroll-row,
.adventures-bento-grid {
  cursor: grab;
  user-select: none;
}

.explore-scroll-row.dragging,
.adventures-bento-grid.dragging {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

.explore-scroll-row::-webkit-scrollbar {
  display: none;
}

.explore-scroll-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease, transform 0.2s ease;
  cursor: pointer;
  color: var(--brandPrimary);
}

.explore-scroll-btn img {
  width: 24px;
  height: 24px;
  filter: invert(32%) sepia(87%) saturate(4177%) hue-rotate(256deg) brightness(98%) contrast(97%);
  transition: opacity 0.25s ease;
}

.explore-scroll-btn svg {
  width: 24px;
  height: 24px;
}

.explore-scroll-btn svg path {
  stroke: var(--brandPrimary) !important;
}

.explore-scroll-btn:disabled,
.explore-scroll-btn.disabled {
  opacity: 0.30 !important;
  cursor: default;
  pointer-events: none;
}

.explore-scroll-btn:not(:disabled):not(.disabled):hover {
  background: transparent !important;
  border-color: transparent !important;
  opacity: 0.75;
}

.explore-scroll-btn:not(:disabled):not(.disabled):hover img {
  filter: invert(32%) sepia(87%) saturate(4177%) hue-rotate(256deg) brightness(98%) contrast(97%);
}

/* ==========================================================================
   Sign In Page Form Styling
   ========================================================================== */
.form-input-custom {
  width: 100%;
  background-color: #EEF2FE;
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  color: var(--textColorHighest);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.form-input-custom:focus {
  background-color: var(--fixedWhite);
  border-color: var(--brandPrimary);
  box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.15);
}

.form-input-custom::placeholder,
.form-input-custom::-webkit-input-placeholder,
input[type="password"]::placeholder,
input[type="password"]::-webkit-input-placeholder {
  color: var(--textColorHigh) !important;
  opacity: 1 !important;
  font-family: var(--font-family-main) !important;
  letter-spacing: normal !important;
}

.sign-in-card {
  background: var(--fixedWhite);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-4xl);
  width: 100%;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991.98px) {
  .sign-in-card {
    padding: var(--spacing-2xl);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .contact-form-col {
    margin-top: 24px !important;
  }
}

/* ==========================================================================
   Join Community Form Card, Dropdown & Checkbox Styling
   ========================================================================== */
.join-community-card {
  max-width: 100%;
}

select.form-input-custom {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: var(--spacing-md) !important;
  padding-right: 36px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  cursor: pointer;
}

/* Custom Form Select Dropdown Component */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #EEF2FE;
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  padding: 10px 14px;
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  color: var(--textColorHighest);
  cursor: pointer;
  outline: none;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.custom-select-btn:hover {
  background-color: #E8EDFB;
}

.custom-select-btn.is-open {
  background-color: var(--fixedWhite, #ffffff);
  border-color: var(--brandPrimary, #7F56D9);
  box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.15);
}

.custom-select-text {
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  color: var(--textColorHighest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-text.placeholder-text {
  color: var(--textColorHigh, #525252);
  font-weight: 400;
}

.custom-select-arrow {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.custom-select-btn.is-open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  background: var(--fixedWhite, #FFFFFF);
  border: 1px solid var(--borderColorBorder, #EAECF0);
  border-radius: 12px;
  box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.14), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
  padding: 6px;
  z-index: 1050;
  max-height: 220px;
  overflow-y: auto;
}

.custom-select-menu.show {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fadeInDropdown 0.2s ease forwards;
}

.custom-select-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-family-main);
  font-size: var(--font-size-14px);
  font-weight: 500;
  color: #344054;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.custom-select-item:hover {
  background-color: #F9FAFB;
  color: #101828;
}

.custom-select-item.selected {
  background-color: var(--brandPrimaryVariant4, #F9F5FF);
  color: var(--brandPrimary, #7F56D9);
  font-weight: 600;
}

.form-check-input {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--brandPrimary) !important;
  border-color: var(--brandPrimary) !important;
}

.form-check-input:focus {
  border-color: var(--brandPrimary) !important;
  box-shadow: 0 0 0 0.2rem rgba(127, 86, 217, 0.25) !important;
}

/* ==========================================================================
   Join Community Page & Hero Banner Styling
   ========================================================================== */
.join-community-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background-image: url('/assets/website-images/assets/DQ 2K26 images/Image 5.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: var(--spacing-9xl) !important;
  padding-bottom: var(--spacing-6xl) !important;
}

.join-community-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(16, 18, 48, 0.85) 0%, rgba(70, 28, 110, 0.80) 50%, rgba(165, 30, 110, 0.85) 100%);
  z-index: 1;
}

.join-community-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ==========================================================================
   Policy & Terms Pages Mobile Responsive Header Title (24px)
   ========================================================================== */
.policy-header-title {
  font-size: var(--font-size-24px) !important;
  line-height: var(--line-height-lg) !important;
}

@media (max-width: 991.98px) {
  .team-content {
    padding-right: 0 !important;
  }

  .policy-header-title,
  .explore-banner-section h1.heading-4 {
    font-size: 24px !important;
    font-size: var(--font-size-24px) !important;
    line-height: var(--line-height-lg) !important;
  }
}