/* === MARKINTEL VIRTUAL STEEL SUMMIT — v6 === */

/* 1. Premium fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* 2. Design tokens */
:root {
  --ink: #0B0D0E;
  --ink-2: #1A1D20;
  --steel: #6B7280;
  --steel-soft: #E5E7EB;
  --paper: #FAFAF7;
  --accent: #E5572B;
  --accent-deep: #B33E1B;
  --accent-glow: rgba(229, 87, 43, 0.18);
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
}

/* 3. Global typography */
body, p, li {
  font-family: var(--body) !important;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5,
.banner-title, .section-title {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.06 !important;
  color: var(--ink) !important;
}

[class*="icon"], [class*="Icon"],
i, .fa, [class^="bs-icon"], [class*=" bs-icon"],
.close, .close-btn, .menu-toggle,
[class*="caret"], [class*="arrow"] {
  font-family: inherit !important;
}

/* === 4. HERO TYPOGRAPHY === */
.banner-widget h1,
.banner-widget .banner-title {
  font-size: clamp(2.75rem, 7vw, 6rem) !important;
  font-weight: 700 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.032em !important;
  color: #FAFAF7 !important;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.45),
    0 6px 40px rgba(0, 0, 0, 0.25) !important;
}

.banner-widget [class*="date"],
.banner-widget [class*="Date"] {
  font-family: var(--display) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: rgba(250, 250, 247, 0.95) !important;
}

/* === HERO IMAGE — bulletproof hover === */

/* Use scale() via zoom-like wrapper trick — won't conflict with Backstage's transforms */
.banner-widget .media-image {
  display: block !important;
  overflow: visible !important;
  transition: filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter:
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.32))
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.22)) !important;
  cursor: pointer !important;
}

.banner-widget img.fluid-image {
  display: block !important;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

/* Hover scale on image, glow shift on wrapper */
.banner-widget .media-image:hover img.fluid-image {
  transform: scale(1.035) !important;
}

.banner-widget .media-image:hover {
  filter:
    drop-shadow(0 45px 85px rgba(0, 0, 0, 0.45))
    drop-shadow(0 14px 30px rgba(229, 87, 43, 0.22))
    saturate(1.06) !important;
}

/* === REGISTER BUTTON in hero — shimmer sweep === */
.banner-widget .bs-btn,
.banner-widget button.primary {
  padding: 1.05rem 2.4rem !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.13em !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 12px 36px rgba(229, 87, 43, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease !important;
}
.banner-widget .bs-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  ) !important;
  transition: left 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  pointer-events: none !important;
}
.banner-widget .bs-btn:hover::before {
  left: 100% !important;
}
.banner-widget .bs-btn:hover,
.banner-widget button.primary:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 22px 50px rgba(229, 87, 43, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

/* === 5. Section headers === */
.community-section h2,
.community-section h1 {
  color: var(--ink) !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
}

/* === 6. NAVIGATION === */
header.bs-main-menu,
.bs-main-menu.fixed {
  --bs-nav-active-bg: transparent !important;
  background: rgba(250, 250, 247, 0.94) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(11, 13, 14, 0.08) !important;
  box-shadow: 0 8px 24px rgba(11, 13, 14, 0.04) !important;
}
.main-menu a,
.nav-link-st1 a,
.menu-right a {
  font-family: var(--display) !important;
  font-weight: 500 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 10px 16px !important;
  position: relative !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color 0.2s ease !important;
}
.main-menu a::after,
.nav-link-st1 a::after {
  content: '' !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 4px !important;
  height: 2px !important;
  background: var(--accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
.main-menu a:hover::after,
.nav-link-st1 a:hover::after {
  transform: scaleX(1) !important;
}
.main-menu a:hover {
  color: var(--accent) !important;
}
.nav-active-st1 .active,
.nav-active-st1 a.active,
.main-menu .active,
.main-menu .active a,
.main-menu a.active {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
}
.nav-active-st1 .active::after,
.main-menu .active::after,
.main-menu a.active::after {
  transform: scaleX(1) !important;
  background: var(--ink) !important;
  height: 3px !important;
  bottom: 2px !important;
}
.menu-right a[href*="signin"],
.menu-right a[href*="signup"],
.menu-right a[href*="login"],
.menu-right > a:last-child {
  border: 1.5px solid var(--ink) !important;
  padding: 9px 22px !important;
  margin-left: 14px !important;
  background: transparent !important;
  color: var(--ink) !important;
  transition: all 0.25s ease !important;
}
.menu-right a[href*="signin"]:hover,
.menu-right a[href*="signup"]:hover,
.menu-right a[href*="login"]:hover,
.menu-right > a:last-child:hover {
  background: var(--ink) !important;
  color: #fff !important;
}
.menu-right a[href*="signin"]::after,
.menu-right a[href*="signup"]::after,
.menu-right a[href*="login"]::after,
.menu-right > a:last-child::after {
  display: none !important;
}
.main-menu [class*="caret"],
.main-menu [class*="arrow"],
.main-menu svg {
  margin-left: 4px !important;
  opacity: 0.55 !important;
  transition: opacity 0.2s ease !important;
}
.main-menu a:hover [class*="caret"],
.main-menu a:hover svg {
  opacity: 1 !important;
}

/* === 7. Buttons (global) === */
.bs-btn,
button.primary,
button[type="submit"],
input[type="submit"],
a.bs-btn {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 0.85rem 1.9rem !important;
  font-size: 0.82rem !important;
  transition: all 0.25s ease !important;
  border: 2px solid transparent !important;
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 10px 30px var(--accent-glow);
}
.bs-btn:hover,
button.primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
a.bs-btn:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.2) !important;
}

/* === 8. Section padding === */
.community-page-home .community-section {
  padding-block: clamp(64px, 8vw, 110px) !important;
}
.banner-widget {
  padding-block: 0 !important;
}

/* === 9. Cards === */
.community-page-home [class*="speaker-card"],
.community-page-home [class*="sponsor-card"],
.community-page-home [class*="session-card"] {
  background: #fff !important;
  border: 1px solid var(--steel-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}
.community-page-home [class*="speaker-card"]:hover,
.community-page-home [class*="sponsor-card"]:hover,
.community-page-home [class*="session-card"]:hover {
  border-color: var(--ink) !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.08) !important;
}

/* === 10. COUNTDOWN — minimal === */
[class*="countdown"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-shadow: none !important;
}
[class*="countdown"] > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 4px 20px !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
}
[class*="countdown"] > *:not(:last-child) {
  border-right: 1px solid rgba(250, 250, 247, 0.28) !important;
}
[class*="countdown"] .number,
[class*="countdown"] strong,
[class*="countdown"] [class*="value"],
[class*="countdown"] > * > *:first-child {
  font-family: var(--display) !important;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #FAFAF7 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  margin-bottom: 6px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) !important;
}
[class*="countdown"] .label,
[class*="countdown"] small,
[class*="countdown"] [class*="unit"],
[class*="countdown"] > * > *:last-child {
  font-family: var(--display) !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  color: rgba(250, 250, 247, 0.6) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}

/* === 11. Track / category pills === */
.community-page-home [class*="track"],
.community-page-home .pill,
.community-page-home .tag {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--display) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  padding: 0.4rem 0.85rem !important;
  font-weight: 600 !important;
}

/* === 12. Form inputs === */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--steel-soft) !important;
  border-radius: 0 !important;
  padding: 0.9rem !important;
  font-family: var(--body) !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--ink) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

/* === 13. Footer === */
footer, .bs-footer {
  background: var(--ink) !important;
  border-top: 4px solid var(--accent) !important;
  padding-block: 64px !important;
}





/* === WHY ATTEND — premium card treatment (real selectors) === */

/* Each card */
.community-page-home .li-item {
  position: relative !important;
  padding-bottom: 32px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--steel-soft) !important;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease !important;
  overflow: hidden !important;
  cursor: default !important;
}

/* Accent line that traces in from left on hover */
.community-page-home .li-item::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 0% !important;
  height: 2px !important;
  background: var(--accent) !important;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}
.community-page-home .li-item:hover::after {
  width: 100% !important;
}

/* Lift the card on hover */
.community-page-home .li-item:hover {
  transform: translateY(-6px) !important;
}

/* Image wrapper — clip the zoom, no bg */
.community-page-home .li-item .list-image,
.community-page-home .li-item .media-image,
.community-page-home .li-item .media-element {
  overflow: hidden !important;
  background: transparent !important;
  aspect-ratio: 16 / 10 !important;
}

/* Image — fill wrapper, desaturated at rest */
.community-page-home .li-item img.fluid-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s ease !important;
  filter: saturate(0.85) !important;
  will-change: transform, filter !important;
}
.community-page-home .li-item:hover img.fluid-image {
  transform: scale(1.08) !important;
  filter: saturate(1.05) !important;
}

/* Card titles — kill the coral red */
.community-page-home .li-item h3,
.community-page-home .li-item h4,
.community-page-home .li-item [class*="title"] {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  transition: color 0.4s ease !important;
}

/* Title flips to accent on hover */
.community-page-home .li-item:hover h3,
.community-page-home .li-item:hover h4,
.community-page-home .li-item:hover [class*="title"] {
  color: var(--accent) !important;
}

/* Card body text */
.community-page-home .li-item p {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--steel) !important;
  font-family: var(--body) !important;
}

/* === Section header — kill the red on "Why Attend?" (stronger) === */
.community-page-home h1,
.community-page-home h2,
.community-page-home h3,
body .community-section h1,
body .community-section h2,
body .community-section h3,
body [class*="community-section"] h1,
body [class*="community-section"] h2 {
  color: var(--ink) !important;
}

/* Section subtitle */
.community-page-home .community-section > div > p,
.community-page-home .community-section [class*="subtitle"] {
  color: var(--steel) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}













/* === FEATURED SESSIONS — CSS-drawn chevron arrows === */

/* Position the nav at the sides, vertically centered on the card */
.featured-session-card .owl-nav {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 16px !important;
  z-index: 10 !important;
}

.featured-session-card {
  position: relative !important;
}

/* Buttons */
.featured-session-card .owl-prev,
.featured-session-card .owl-next {
  pointer-events: auto !important;
  background: #fff !important;
  border: 1px solid var(--steel-soft) !important;
  border-radius: 0 !important;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  font-size: 0 !important; /* hide any text/icon content */
  color: transparent !important;
}

/* Hide ALL existing icon content */
.featured-session-card .owl-prev *,
.featured-session-card .owl-next * {
  display: none !important;
}

/* Draw a CSS chevron using ::before */
.featured-session-card .owl-prev::before,
.featured-session-card .owl-next::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid var(--ink) !important;
  border-right: 2px solid var(--ink) !important;
  background: transparent !important;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}

/* Right arrow chevron points right */
.featured-session-card .owl-next::before {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Left arrow chevron points left */
.featured-session-card .owl-prev::before {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

/* Hover — fill ink, lift, white chevron */
.featured-session-card .owl-prev:hover,
.featured-session-card .owl-next:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}
.featured-session-card .owl-prev:hover::before,
.featured-session-card .owl-next:hover::before {
  border-top-color: #fff !important;
  border-right-color: #fff !important;
}

/* Subtle directional nudge on hover */
.featured-session-card .owl-prev:hover::before {
  transform: translate(-45%, -50%) rotate(-135deg) !important;
}
.featured-session-card .owl-next:hover::before {
  transform: translate(-55%, -50%) rotate(45deg) !important;
}

/* Disabled state */
.featured-session-card .owl-prev.disabled,
.featured-session-card .owl-next.disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}
.featured-session-card .owl-prev.disabled:hover,
.featured-session-card .owl-next.disabled:hover {
  background: #fff !important;
  border-color: var(--steel-soft) !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}
.featured-session-card .owl-prev.disabled:hover::before {
  border-top-color: var(--ink) !important;
  border-right-color: var(--ink) !important;
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}
.featured-session-card .owl-next.disabled:hover::before {
  border-top-color: var(--ink) !important;
  border-right-color: var(--ink) !important;
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Pagination dots */
.featured-session-card .owl-dots {
  margin-top: 32px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}
.featured-session-card .owl-dot {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
}
.featured-session-card .owl-dot span {
  width: 24px !important;
  height: 2px !important;
  background: var(--steel-soft) !important;
  border-radius: 0 !important;
  transition: background 0.3s ease, width 0.3s ease !important;
  display: block !important;
  margin: 0 !important;
}
.featured-session-card .owl-dot.active span {
  background: var(--accent) !important;
  width: 40px !important;
}
.featured-session-card .owl-dot:hover span {
  background: var(--ink) !important;
}




















/* === SPONSORS — premium polish (real selectors) === */

/* Tier labels (DIAMOND / GOLD / SILVER) — accent hairline before */
.bs-sponsor-listing .sponsor-title {
  position: relative !important;
  padding-left: 36px !important;
  font-family: var(--display) !important;
  letter-spacing: 0.32em !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  color: var(--ink) !important;
  margin-bottom: 32px !important;
}
.bs-sponsor-listing .sponsor-title::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 24px !important;
  height: 1px !important;
  background: var(--accent) !important;
  transform: translateY(-50%) !important;
}

/* Sponsor logo card — base state */
.bs-sponsor-listing .sponsor-tile {
  background: #fff !important;
  border: 1px solid var(--steel-soft) !important;
  border-radius: 0 !important;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease,
    box-shadow 0.5s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Hover lift + ink border */
.bs-sponsor-listing .sponsor-tile:hover {
  transform: translateY(-6px) !important;
  border-color: var(--ink) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
}

/* Logo desaturation — full color on hover */
.bs-sponsor-listing .sponsor-tile .bs-image img.image-contain {
  transition:
    filter 0.5s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  filter: grayscale(0.7) opacity(0.78) !important;
}
.bs-sponsor-listing .sponsor-tile:hover .bs-image img.image-contain {
  filter: grayscale(0) opacity(1) !important;
  transform: scale(1.04) !important;
}

/* Sponsor name below logo */
.bs-sponsor-listing .sponsor-tile + p,
.bs-sponsor-listing .sponsor-name {
  font-family: var(--display) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--ink) !important;
  margin-top: 14px !important;
}

/* Subtle corner accent on hover */
.bs-sponsor-listing .sponsor-tile::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 0 !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}
.bs-sponsor-listing .sponsor-tile:hover::after {
  border-width: 0 20px 20px 0 !important;
  border-color: transparent var(--accent) transparent transparent !important;
}

/* === MODAL (when clicking a sponsor logo) === */
.modal-content {
  border-radius: 0 !important;
  border: 1px solid var(--steel-soft) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18) !important;
  padding: 32px !important;
}
.modal-content .category-title {
  font-family: var(--display) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  color: var(--accent) !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}
.modal-content .image-title {
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  text-align: center !important;
  margin-top: 16px !important;
}
.modal-content .bs-image.rect-size {
  border: 1px solid var(--steel-soft) !important;
  border-radius: 0 !important;
}