/* ═══════════════════════════════════════════════════════════════════
   SOFTT 2026 — Modern UI/UX Design System
   Bridging Innovation for Intelligent and Secure Technologies
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Font Awesome 5 + v4 shims so legacy `fa fa-icon` markup keeps working */
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');
@import url('https://use.fontawesome.com/releases/v5.15.4/css/v4-shims.css');

:root {
  /* Brand Palette */
  --softt-primary: #AC1E23;
  --softt-primary-dark: #6F0F12;
  --softt-primary-light: #C73C42;
  --softt-accent: #E8B27A;
  --softt-cream: #FAF1E4;
  --softt-gold: #C99A4F;

  /* Neutrals */
  --ink-900: #0F0F12;
  --ink-800: #1A1A1F;
  --ink-700: #2A2A30;
  --ink-500: #565660;
  --ink-400: #84848C;
  --ink-300: #B5B5BC;
  --ink-200: #E4E4E8;
  --ink-100: #F2F2F4;
  --ink-50: #FAFAFB;
  --surface: #FFFFFF;

  /* Type */
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(15, 15, 18, 0.06);
  --shadow-md: 0 8px 28px rgba(15, 15, 18, 0.08);
  --shadow-lg: 0 18px 50px rgba(15, 15, 18, 0.14);
  --shadow-red: 0 14px 38px rgba(172, 30, 35, 0.28);
}

/* ── Reset / Base ─────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: var(--font-body) !important;
  color: var(--ink-800) !important;
  background: var(--ink-50) !important;
  font-feature-settings: "ss01", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  /* Override rogue body rule in style.css that sets display:flex + padding:20px */
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  align-items: unset !important;
  justify-content: unset !important;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body p,
body li,
body span,
body a,
body div {
  font-family: var(--font-body);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

::selection {
  background: var(--softt-primary);
  color: #fff;
}

hr {
  border-color: var(--ink-200);
}

/* ── Header / Navigation Polish ───────────────────────────────────── */
.background-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(15, 15, 18, 0.06) !important;
  box-shadow: 0 1px 24px rgba(15, 15, 18, 0.04) !important;
}

.header-area .main-nav .nav li a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
  color: var(--ink-800) !important;
  text-transform: none !important;
}

.header-area .main-nav .nav li:hover a,
.background-header .main-nav .nav li:hover a {
  color: var(--softt-primary) !important;
}

.header-area .main-nav .nav li.submenu ul {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--ink-200);
  top: 60px;
}

.header-area .main-nav .nav li.submenu ul li a {
  background: #fff !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--ink-100) !important;
}

/* ── Hero / Welcome Section ───────────────────────────────────────── */
.main-banner {
  background:
    radial-gradient(ellipse at top right, rgba(172, 30, 35, 0.06), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(232, 178, 122, 0.10), transparent 60%),
    var(--ink-50) !important;
  padding: 96px 0 50px 0 !important;
  position: relative;
  overflow: hidden;
}

.main-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 15, 18, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 15, 18, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}

.softt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(172, 30, 35, 0.08);
  color: var(--softt-primary);
  border: 1px solid rgba(172, 30, 35, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.softt-hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--softt-primary);
  box-shadow: 0 0 0 4px rgba(172, 30, 35, 0.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(172, 30, 35, 0.18);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(172, 30, 35, 0.05);
  }
}

.main-banner h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink-900) !important;
  margin-bottom: 16px !important;
}

.main-banner h3 strong {
  display: block;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #1a1a1f 0%, var(--softt-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
  font-weight: 800;
}

.main-banner h3 strong sup {
  -webkit-text-fill-color: var(--softt-primary);
  color: var(--softt-primary);
}

.main-banner h3 small {
  display: block;
  font-family: var(--font-body) !important;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 500;
  color: var(--ink-500);
  line-height: 1.55;
  margin-top: 4px;
  letter-spacing: 0;
}

.main-banner h3 hr {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--softt-primary), var(--softt-accent));
  border: 0;
  margin: 22px 0 0;
  border-radius: 2px;
}

.main-banner .left-content {
  margin-right: 0 !important;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto !important;
  text-align: left;
}

.main-banner .left-content>p {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: var(--ink-500) !important;
  font-weight: 400 !important;
  margin-top: 22px !important;
  max-width: 920px;
}

/* Hero meta row */
.softt-hero-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin: 26px 0 8px;
}

.softt-hero-meta .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  padding: 12px 18px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
  min-width: 0;
  flex: 1;
}

.softt-hero-meta .meta-chip:hover {
  transform: translateY(-2px);
  border-color: var(--softt-primary);
  box-shadow: var(--shadow-md);
}

.softt-hero-meta .meta-chip i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(172, 30, 35, 0.08);
  color: var(--softt-primary);
  font-size: 15px;
}

.softt-hero-meta .meta-chip .lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-400);
  font-weight: 600;
}

.softt-hero-meta .meta-chip .val {
  display: block;
  font-size: 14.5px;
  color: var(--ink-900);
  font-weight: 600;
  font-family: var(--font-display);
}

/* Hero CTAs */
.softt-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.softt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(.25, .46, .45, .94);
  border: 2px solid transparent;
  cursor: pointer;
}

.softt-btn-primary {
  background: linear-gradient(135deg, var(--softt-primary) 0%, var(--softt-primary-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.softt-btn-primary:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 18px 44px rgba(172, 30, 35, 0.38);
}

.softt-btn-ghost {
  background: var(--surface);
  color: var(--ink-900);
  border-color: var(--ink-200);
}

.softt-btn-ghost:hover {
  border-color: var(--softt-primary);
  color: var(--softt-primary);
  transform: translateY(-2px);
}

.softt-btn i {
  font-size: 13px;
}

/* ── Important Date Banner Refinement ─────────────────────────────── */
.important-date-banner {
  background: linear-gradient(135deg, var(--ink-900) 0%, #1a1a1f 100%) !important;
  border-bottom: none !important;
  border-radius: var(--r-lg) !important;
  padding: 28px 32px 32px !important;
  color: #fff !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative;
  overflow: hidden;
  margin-top: 32px !important;
}

.important-date-banner::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(172, 30, 35, 0.30), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

.important-date-banner .title {
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 13px !important;
  letter-spacing: 3px !important;
  font-weight: 600 !important;
  margin-bottom: 22px !important;
  text-align: center !important;
  text-transform: uppercase;
  position: relative;
}

.important-date-banner .title::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--softt-accent);
  vertical-align: middle;
  margin-right: 12px;
}

.important-date-banner .title::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--softt-accent);
  vertical-align: middle;
  margin-left: 12px;
}

.important-date-banner .timeline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 0 24px;
  min-height: 120px;
}

.important-date-banner .item {
  position: relative;
  width: 23%;
  text-align: center;
  z-index: 1;
}

.important-date-banner .line {
  background: rgba(232, 178, 122, 0.30) !important;
  top: 24px !important;
}

.important-date-banner .dot {
  background: var(--softt-accent) !important;
  width: 14px !important;
  height: 14px !important;
  box-shadow: 0 0 0 4px rgba(232, 178, 122, 0.18);
  margin: 18px auto 16px !important;
}

.important-date-banner .date {
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  background: linear-gradient(135deg, #fff 0%, var(--softt-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.important-date-banner .desc {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

/* ── Global "important info" bold styling ─────────────────────────── */
b,
strong {
  font-weight: 700;
}

/* Inside important contexts, b/strong should pop with display font + heavier weight */
.main-banner b,
.main-banner strong,
#committee b,
#committee strong,
.softt-hero-meta b,
.softt-hero-meta strong,
.meta-chip .val {
  font-family: var(--font-display);
}

/* ── Section Heading Polish ───────────────────────────────────────── */
.section-heading {
  text-align: center;
}

.section-heading h4 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--ink-900) !important;
  margin-bottom: 18px !important;
  position: relative;
  padding-bottom: 22px;
}

.section-heading h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--softt-primary), var(--softt-accent));
  border-radius: 2px;
}

.section-heading h4 em {
  color: var(--softt-primary) !important;
  font-style: italic !important;
}

.section-heading img[src*="heading-line-dec"] {
  display: none !important;
}

.section-heading p {
  color: var(--ink-500) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 720px;
  margin: 0 auto !important;
  font-weight: 400 !important;
}

/* ── Services Section (Talking About) ─────────────────────────────── */
#services {
  background: var(--ink-50);
  padding: 70px 0 30px;
}

#services .services.section {
  padding: 0 !important;
  background: transparent !important;
}

#services svg path {
  fill: var(--ink-50) !important;
}

/* Refined service cards on top of red theme already applied */
.service-item {
  box-shadow: var(--shadow-sm) !important;
}

.service-item:hover {
  box-shadow: var(--shadow-red) !important;
}

/* ── Call For Paper / CFP Section ─────────────────────────────────── */
#cfp .the-clients {
  padding: 80px 0;
  background: var(--surface);
}

#cfp .btn-warning {
  background: linear-gradient(135deg, var(--softt-primary), var(--softt-primary-dark)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  box-shadow: var(--shadow-red);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#cfp .btn-warning:hover {
  transform: translateY(-2px);
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(172, 30, 35, 0.38);
}

#cfp img.img-fluid {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ── Registration & Important Dates Section ───────────────────────── */
#committee .the-clients {
  padding: 80px 0;
  background: var(--ink-50);
}

#committee h5 {
  font-family: var(--font-display);
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 16px;
  position: relative;
  padding-left: 18px;
}

#committee h5::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 18px;
  background: var(--softt-primary);
  border-radius: 2px;
}

#committee .accordion-text ul li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--ink-200);
  color: var(--ink-700);
  font-size: 14.5px;
  list-style: none;
  position: relative;
  padding-left: 20px;
}

#committee .accordion-text ul {
  list-style: none !important;
  padding: 0 !important;
}

#committee .accordion-text ul li::before {
  content: '›';
  position: absolute;
  left: 4px;
  color: var(--softt-primary);
  font-weight: bold;
  font-size: 16px;
}

#committee .accordion-text ul li b {
  color: var(--softt-primary);
  font-weight: 700;
}

#committee .accordion {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ink-200);
}

#committee .accordion .accordion-head h5 {
  padding-left: 18px;
}

#committee .accordion .content ol li {
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.65;
  list-style: none;
}

/* Register Now button */
#committee a.btn-warning {
  background: linear-gradient(135deg, var(--softt-primary), var(--softt-primary-dark)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-red);
}

#committee a.btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(172, 30, 35, 0.38);
}

/* ── Sponsors / Partners Logo Grid ────────────────────────────────── */
#blm {
  background: var(--surface);
  padding: 64px 0 50px;
  border-top: 1px solid var(--ink-200);
}

#blm .sps {
  max-width: 1200px;
  margin: 0 auto;
}

#blm .logo-grid {
  gap: 24px !important;
  padding: 20px 24px !important;
}

#blm .logo-item {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: 22px 26px;
  min-width: 180px;
  transition: all 0.3s ease;
}

#blm .logo-item:hover {
  border-color: var(--softt-primary);
  background: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

#blm .logo-item p {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  color: var(--ink-400) !important;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}

#blm .logo-item img {
  max-height: 60px !important;
  height: auto !important;
  width: auto !important;
  filter: grayscale(0.2);
  transition: filter 0.3s ease;
}

#blm .logo-item:hover img {
  filter: grayscale(0);
}

/* ── Footer ───────────────────────────────────────────────────────── */
footer#newsletter {
  background: linear-gradient(135deg, var(--ink-900) 0%, #15151a 100%) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  padding: 70px 0 40px !important;
  margin-top: 0 !important;
  position: relative;
  overflow: hidden;
}

footer#newsletter::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(172, 30, 35, 0.20), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

footer#newsletter .section-heading h4 {
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

footer#newsletter .section-heading h4::after {
  background: linear-gradient(90deg, var(--softt-primary-light), var(--softt-accent)) !important;
}

footer#newsletter .section-heading h4 em {
  color: var(--softt-accent) !important;
}

footer#newsletter .footer-widget h4 {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.2px;
  margin-bottom: 18px !important;
  text-transform: uppercase;
}

footer#newsletter .footer-widget p,
footer#newsletter .footer-widget li,
footer#newsletter .footer-widget a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  line-height: 1.8 !important;
  transition: color 0.2s ease;
}

footer#newsletter .footer-widget a:hover {
  color: var(--softt-accent) !important;
}

footer#newsletter .footer-widget ul li {
  list-style: none;
  padding: 4px 0;
}

/* Social icons row in footer */
footer#newsletter .footer-widget .social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

footer#newsletter .footer-widget .social-icons a {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 14px !important;
  line-height: 1 !important;
}

footer#newsletter .footer-widget .social-icons a i {
  font-size: 18px;
  color: inherit;
  line-height: 1;
}

footer#newsletter .footer-widget .social-icons a:hover {
  background: var(--softt-primary) !important;
  border-color: var(--softt-primary) !important;
  color: #fff !important;
  transform: translateY(-3px);
}

footer#newsletter .copyright-text p {
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, 0.50) !important;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
}

footer#newsletter .copyright-text a {
  color: var(--softt-accent) !important;
}

/* ── Misc Polish ──────────────────────────────────────────────────── */
.popup-container {
  font-family: var(--font-body) !important;
}

.popup-form h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

.popup-form h5 {
  font-family: var(--font-display) !important;
}

/* Scroll up button */
.scroll-up {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--softt-primary), var(--softt-primary-dark));
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-red);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  border: none;
  font-size: 16px;
}

.scroll-up.show {
  opacity: 1;
  pointer-events: auto;
}

.scroll-up:hover {
  transform: translateY(-3px);
}

/* ───────────────────────────────────────────────────────────────────
   FIX 1 — Wider containers on full-laptop screens
   The default Bootstrap container was 1140-1200px. Widen on large
   screens so the layout doesn't feel "boxed".
   ─────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .container {
    max-width: 1280px !important;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1320px !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   FIX 2 — Earlier hamburger menu so split-screen layouts don't
   collide with the logo. Style.css already handles the toggle below
   767, so we extend the same behavior up to 991px.
   The existing custom.js uses slideToggle (inline display) so no
   `.active` class hook is needed.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Show hamburger trigger */
  .header-area .menu-trigger {
    display: block !important;
  }

  /* Override style.css's `@media (min-width:767px) { .nav { display: flex !important } }` */
  .header-area .main-nav .nav {
    display: none;
    float: none;
    width: 100%;
    margin-top: 80px !important;
    margin-left: auto;
    background: #fff;
    border-top: 1px solid var(--ink-200);
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0 !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 20px !important;
    background: #f7f7f7 !important;
    color: var(--ink-800) !important;
    border: none !important;
    width: 100%;
  }

  .header-area .main-nav .nav li.submenu {
    padding-right: 0 !important;
  }

  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: none;
    top: 0;
    width: 100%;
    box-shadow: none;
    height: 0;
    overflow: hidden;
    border-radius: 0;
    border: none;
  }

  .header-area .main-nav .nav li.submenu ul.active {
    height: auto;
  }

  .header-area .main-nav .nav li.submenu:after {
    color: var(--ink-700);
    right: 25px;
    top: 15px;
  }

  .header-area .main-nav a.logo img {
    height: 56px !important;
    width: auto !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
}

/* ───────────────────────────────────────────────────────────────────
   FIX 3 — Registration & Important Dates as matching dark cards
   ─────────────────────────────────────────────────────────────────── */
#committee .the-clients {
  padding: 80px 0 0 !important;
  background: var(--ink-50) !important;
}

#committee .col-lg-8.offset-lg-2 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

#committee .section-heading>p {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 24px !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: var(--ink-500) !important;
}

#committee .section-heading>p center,
#committee .section-heading center {
  display: block;
  margin: 24px 0 36px;
}

#committee .section-heading>p>center a.btn-warning {
  margin-top: 0 !important;
}

/* Two-column card row */
#committee .section-heading>.row {
  display: flex !important;
  gap: 24px;
  margin: 0 auto !important;
  max-width: 1100px;
  flex-wrap: wrap;
  text-align: left;
}

#committee .section-heading>.row>[class*="col-lg-6"] {
  flex: 1 1 460px;
  max-width: none !important;
  padding: 0 !important;
}

/* Important Dates card (dark theme, matches hero banner) */
#committee .left-text {
  background: linear-gradient(135deg, var(--ink-900) 0%, #1a1a1f 100%);
  border-radius: var(--r-lg);
  padding: 32px 30px !important;
  color: #fff !important;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

#committee .left-text::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(172, 30, 35, 0.30), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

#committee .left-text h5 {
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 13px !important;
  letter-spacing: 3px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  padding-left: 0 !important;
  margin-bottom: 22px !important;
  position: relative;
  z-index: 2;
}

#committee .left-text h5::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--softt-accent);
  vertical-align: middle;
  margin-right: 12px;
  position: static;
  border-radius: 0;
}

#committee .left-text .accordion-text {
  position: relative;
  z-index: 2;
}

#committee .left-text .accordion-text ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#committee .left-text .accordion-text {
  margin-top: 8px;
}

#committee .left-text .accordion-text ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#committee .left-text .accordion-text ul li {
  padding: 16px 0 16px 28px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  position: relative;
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

#committee .left-text .accordion-text ul li:last-child {
  border-bottom: none !important;
}

#committee .left-text .accordion-text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--softt-accent);
  box-shadow: 0 0 0 3px rgba(232, 178, 122, 0.18);
  font-size: 0;
}

#committee .left-text .accordion-text ul li .date-label {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Important info — strong bold gradient for dates */
#committee .left-text .accordion-text ul li b {
  color: #fff !important;
  font-weight: 800 !important;
  font-family: var(--font-display);
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, #fff 0%, var(--softt-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#committee .left-text .accordion-text .contact-note,
#committee .left-text .accordion-text>p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 22px 0 0 !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.65 !important;
}

#committee .left-text .accordion-text .contact-note b,
#committee .left-text .accordion-text>p b {
  color: var(--softt-accent) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  background: none;
  -webkit-text-fill-color: var(--softt-accent);
}

/* Heading h5 inside Important Dates card needs margin too */
#committee .left-text>h5 {
  margin-bottom: 10px !important;
}

/* Registration Policy card — SAME dark design language as Important Date */
#committee article.accordion {
  background: linear-gradient(135deg, var(--ink-900) 0%, #1a1a1f 100%) !important;
  border-radius: var(--r-lg) !important;
  padding: 32px 30px !important;
  box-shadow: var(--shadow-lg) !important;
  border: none !important;
  height: 100%;
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
}

#committee article.accordion::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -15%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(172, 30, 35, 0.30), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

#committee .accordion .accordion-head h5 {
  font-family: var(--font-display);
  font-size: 13px !important;
  letter-spacing: 3px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  color: #fff !important;
  padding-left: 0 !important;
  margin-bottom: 22px !important;
  position: relative;
  z-index: 2;
}

#committee .accordion .accordion-head h5::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--softt-accent);
  vertical-align: middle;
  margin-right: 12px;
  position: static;
  border-radius: 0;
}

#committee .accordion .accordion-body {
  position: relative;
  z-index: 2;
}

#committee .accordion .content ol {
  padding-left: 0 !important;
  list-style: none;
  counter-reset: regnum;
  margin: 0 !important;
}

#committee .accordion .content ol li {
  padding: 10px 0 10px 36px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  position: relative;
  counter-increment: regnum;
  list-style: none !important;
  text-indent: 0;
}

#committee .accordion .content ol li::before {
  content: counter(regnum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  width: 26px;
  height: 26px;
  background: rgba(232, 178, 122, 0.15);
  color: var(--softt-accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0;
}

#committee .accordion .content ol li b {
  color: #fff !important;
  font-weight: 700;
  font-family: var(--font-display);
}

/* Hide the manual "1." "2." numbers in the HTML since CSS counters do it */
#committee .accordion .content ol li {
  font-variant-numeric: tabular-nums;
}

/* ── Registration Fees Table ──────────────────────────────────────── */
.softt-regfee-wrap {
  padding-top: 30px;
  padding-bottom: 0;
}

.softt-regfee-header {
  background: rgba(172,30,35,0.15);
  border-bottom: 2px solid var(--softt-accent);
}

.softt-regfee-header th {
  padding: 16px 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

.softt-regfee-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(135deg, var(--ink-900) 0%, #1a1a1f 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  overflow: hidden;
}

.regfee-row {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background-color 0.2s ease;
}

.regfee-row:hover {
  background-color: rgba(172,30,35,0.08);
}

.regfee-row:last-child {
  border-bottom: none;
}

.regfee-row--attendee {
  background-color: rgba(232,178,122,0.04);
}

.regfee-row--attendee:hover {
  background-color: rgba(232,178,122,0.12);
}

.regfee-category {
  padding: 16px 24px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  flex: 1;
}

.regfee-idr {
  padding: 16px 20px;
  text-align: right;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

.regfee-usd {
  padding: 16px 24px;
  text-align: right;
  font-size: 15px;
  color: var(--softt-accent);
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .regfee-row {
    display: flex;
    flex-wrap: wrap;
  }

  .regfee-category {
    flex: 1 1 100%;
    padding: 12px 16px;
  }

  .regfee-idr {
    flex: 1 1 50%;
    padding: 8px 16px;
    text-align: left;
  }

  .regfee-usd {
    flex: 1 1 50%;
    padding: 8px 16px 12px;
    text-align: left;
  }
}

/* ───────────────────────────────────────────────────────────────────
   FIX 4 — Sponsor / Partner Logos: bigger + redesigned grid
   ─────────────────────────────────────────────────────────────────── */
#blm {
  background: var(--surface);
  padding: 70px 0 60px;
  border-top: 1px solid var(--ink-200);
  position: relative;
}

#blm::before,
#blm::after {
  content: none;
}

#blm .sps {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

#blm .logo-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px !important;
  padding: 0 !important;
}

#blm .logo-item {
  background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: var(--r-lg) !important;
  padding: 30px 24px !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 18px !important;
  transition: all 0.35s cubic-bezier(.25, .46, .45, .94) !important;
  position: relative;
  overflow: hidden;
}

#blm .logo-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(172, 30, 35, 0) 0%, rgba(172, 30, 35, 0.04) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#blm .logo-item:hover {
  border-color: var(--softt-primary) !important;
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
}

#blm .logo-item:hover::before {
  opacity: 1;
}

#blm .logo-item p {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--softt-primary) !important;
  text-transform: uppercase;
  margin: 0 !important;
  position: relative;
  padding-bottom: 10px;
}

#blm .logo-item p::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--softt-primary), var(--softt-accent));
  border-radius: 1px;
}

#blm .logo-item img {
  max-height: 110px !important;
  height: auto !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
  filter: none !important;
  position: relative;
  z-index: 1;
}

#blm .logo-item:hover img {
  filter: none !important;
}

/* ───────────────────────────────────────────────────────────────────
   FIX 5 — Footer edge-to-edge, defeat ALL legacy footer rules
   Use viewport-based break-out to escape any constraining parent.
   ─────────────────────────────────────────────────────────────────── */
html,
body {
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

footer#newsletter,
body footer#newsletter {
  background-image: none !important;
  background: linear-gradient(135deg, var(--ink-900) 0%, #15151a 100%) !important;
  margin: 0 !important;
  padding: 80px 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78) !important;
  box-sizing: border-box !important;
}

footer#newsletter::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(172, 30, 35, 0.20), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

footer#newsletter>.container,
body footer#newsletter>.container {
  max-width: 1200px !important;
  /* Centered content on large screens */
  width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin: 0 auto !important;
}

footer#newsletter>.container>.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Top "See You in Yogyakarta" headline row — centered, full width */
footer#newsletter>.container>.row:first-child {
  margin-bottom: 40px !important;
}

footer#newsletter>.container>.row:nth-child(2) {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 48px !important;
  margin-top: 24px !important;
}

footer#newsletter .copyright-text {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  padding-bottom: 40px;
  /* Space inside the footer background */
  margin-top: 32px;
  margin-bottom: 0 !important;
  /* Ensure no margin below the footer */
}

footer#newsletter .copyright-text p {
  border-top: none !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Original Responsive (kept) ────────────────────────────────────── */
@media (max-width: 992px) {
  .main-banner {
    padding: 100px 0 50px 0 !important;
  }

  .important-date-banner {
    padding: 24px 22px 26px !important;
  }

  .softt-hero-meta {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .softt-hero-meta .meta-chip {
    padding: 10px 12px;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .softt-hero-meta .meta-chip i {
    width: 28px;
    height: 28px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .softt-hero-meta .meta-chip .val {
    font-size: 12.5px;
  }

  .softt-hero-meta .meta-chip .lbl {
    font-size: 10px;
  }

  #blm .logo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #committee .section-heading>.row>[class*="col-lg-6"] {
    flex: 1 1 100%;
  }
}

@media (max-width: 767px) {
  .softt-hero-meta {
    flex-direction: column;
  }

  .softt-hero-meta .meta-chip {
    width: 100%;
    flex: unset;
  }

  .important-date-banner .timeline {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 22px !important;
    min-height: unset !important;
    padding: 0 12px !important;
  }

  .important-date-banner .item {
    width: 100% !important;
    text-align: left !important;
    padding-left: 28px !important;
  }

  .important-date-banner .item .dot {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    margin: 0 !important;
  }

  .important-date-banner .line {
    top: 24px !important;
    bottom: 24px !important;
    left: 23px !important;
    right: auto !important;
    width: 2px !important;
    height: auto !important;
  }

  .main-banner {
    padding: 88px 16px 40px !important;
  }

  .main-banner h3 strong {
    font-size: 30px !important;
  }

  .softt-hero-badge {
    font-size: 11px;
    padding: 6px 12px;
  }

  #blm {
    padding: 50px 0 40px;
  }

  #blm::after {
    font-size: 22px;
    margin-bottom: 24px;
  }

  #blm .logo-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #blm .logo-item {
    padding: 22px 18px !important;
  }

  #blm .logo-item img {
    max-height: 90px !important;
  }

  /* footer padding handled by inner .container — outer element stays zero */
  html body footer#newsletter {
    padding: 0 !important;
    margin: 0 !important;
  }

  footer#newsletter .section-heading h4 {
    font-size: 24px !important;
  }

  footer#newsletter > .container > .row > [class*="col-"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #committee .left-text,
  #committee article.accordion {
    padding: 26px 22px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER ABSOLUTE FIX — override templatemo-art-factory.css + Bootstrap
   Spesifisitas: html > body > footer#newsletter  (0-1-2) beats
   templatemo `footer` (0-0-1) dan `footer { padding: 60px 0 }` di semua
   kondisi tanpa perlu viewport hack.
   ══════════════════════════════════════════════════════════════════════ */
html body footer#newsletter {
  display: block !important;
  margin:  0 !important;
  padding: 0 !important;
  width:   100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
  overflow: hidden !important; /* MENCEGAH MARGIN COLLAPSE DARI ANAK ELEMEN (sumber space bawah) */
  /* background tetap dark */
  background: linear-gradient(135deg, var(--ink-900) 0%, #15151a 100%) !important;
}

/* Inner container — vertical rhythm via padding-top, bukan footer outer */
html body footer#newsletter > .container {
  padding-top:    70px !important;
  padding-bottom: 0    !important;
  padding-left:   24px !important;
  padding-right:  24px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Copyright bar — flush to footer bottom edge */
html body footer#newsletter .copyright-text {
  padding-bottom: 24px !important;
  margin-bottom:  0    !important;
}
html body footer#newsletter .copyright-text p {
  margin-bottom:  0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 425px) {
  html body footer#newsletter {
    margin:  0 !important;
    padding: 0 !important;
    width:   100% !important;
    max-width: 100% !important;
  }
  html body footer#newsletter > .container {
    padding-top:   40px !important;
    padding-left:  12px !important;
    padding-right: 12px !important;
    padding-bottom: 0   !important;
  }
}

/* ── Breakpoint-specific: > 1042px ──────────────────────────── */
@media (min-width: 1043px) {
  html body footer#newsletter {
    margin:  0 !important;
    padding: 0 !important;
    width:   100% !important;
    max-width: 100% !important;
  }
}

/* ── Breakpoint-specific: > 1200px ──────────────────────────── */
@media (min-width: 1200px) {
  html body footer#newsletter {
    margin:  0 !important;
    padding: 0 !important;
    width:   100% !important;
    max-width: 100% !important;
  }
  html body footer#newsletter > .container {
    padding-left:  32px !important;
    padding-right: 32px !important;
  }
}