:root{
  --red:#f52b32;
  --blue:#0877ff;
  --ink:#071225;
  --white:#f8f8f6;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#050914;color:var(--white);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.page-shell{background:var(--red);padding:18px;min-height:100vh}
.hero{position:relative;min-height:calc(100vh - 36px);border:14px solid #060a13;border-radius:48px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;background:#071326}
.hero-bg{position:absolute;inset:0;background-image:url('assets/reference-hero.png');background-size:cover;background-position:center;filter:saturate(.95) contrast(1.05);z-index:-3}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,12,29,.88) 0%,rgba(4,12,30,.68) 35%,rgba(4,8,22,.45) 65%,rgba(3,7,18,.74) 100%),linear-gradient(180deg,rgba(1,7,20,.72),transparent 35%,rgba(1,7,18,.58));z-index:-2}
.hero-noise{position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");z-index:-1;pointer-events:none}
.nav{height:92px;display:flex;align-items:center;gap:40px;padding:0 32px;border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:3}
.brand{min-width:320px;display:grid;grid-template-columns:56px auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;line-height:.88}
.brand-logo{grid-row:1/3;width:56px;height:56px;object-fit:cover;border-radius:12px;background:#fff}
.brand-copy{display:flex;flex-direction:column}
.brand-main{font-size:31px;font-weight:800;letter-spacing:-1.5px;color:#f13636}.brand-accent{font-size:31px;font-weight:800;letter-spacing:-1.5px;color:#fff}.brand small{grid-column:2;font-size:7px;letter-spacing:1.1px;color:rgba(255,255,255,.68);margin-top:5px}
.nav-links{display:flex;align-items:center;justify-content:center;gap:42px;flex:1;font-size:15px;font-weight:500;color:rgba(255,255,255,.88)}
.nav-links a{transition:.2s}.nav-links a:hover{color:#fff;transform:translateY(-1px)}
.nav-cta{background:var(--blue);padding:23px 30px;font-weight:700;font-size:14px;letter-spacing:.2px;box-shadow:0 12px 28px rgba(0,119,255,.2)}
.menu{display:none;background:none;border:0}.menu span{display:block;width:24px;height:2px;background:white;margin:5px}
.hero-content{position:relative;z-index:2;margin:100px auto 0;width:min(1500px,100%);text-align:center;transform:translateX(-4%);margin-top: 200px; margin-left:100px ;}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:64px;line-height:.85;letter-spacing:2px;color:#eee;text-shadow:0 2px 22px #000}
h1{margin-top:14px;font-size:clamp(72px,8.3vw,145px);line-height:.78;letter-spacing:-6px;font-weight:700;text-shadow:0 8px 32px rgba(0,0,0,.45)}
h1 span{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:.52em;letter-spacing:1px;line-height:.85}h1 strong{display:block;color:#fff}
.event-card{position:absolute;z-index:4;left:21%;bottom:13%;width:min(880px,64%);min-height:205px;background:#f8f8f5;color:#101522;display:grid;grid-template-columns:320px 58px 1fr 68px;align-items:stretch;box-shadow:0 25px 60px rgba(0,0,0,.35)}
.date-block{padding:35px 25px 28px 42px}.date{font-size:34px;font-weight:800;color:#e53538;line-height:1}.city{font-family:'Barlow Condensed';font-size:28px;margin-top:13px;color:#4c4c51}.workshop{font-size:13px;font-weight:700;margin-top:24px}
.arrow{display:flex;align-items:center;justify-content:center;font-size:78px;font-family:'Barlow Condensed';font-weight:200;color:#666;transform:scaleX(.7)}
.description{padding:36px 30px;font-family:'Barlow Condensed';font-size:22px;line-height:1.22;color:#293142}.description p{max-width:420px}
.side-register{display:flex;align-items:center;justify-content:center;background:var(--blue);color:white;font-size:14px;font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.4px}
.hero-footer{position:absolute;bottom:18px;left:35px;right:35px;display:flex;justify-content:space-between;color:rgba(255,255,255,.65);font-size:11px;letter-spacing:1px;text-transform:uppercase;z-index:2}
.placeholder{padding:100px max(8vw,40px);background:#080e1d;border-top:1px solid #17233b;min-height:35vh}.placeholder:nth-child(even){background:#0b1325}.placeholder h2{font-size:52px;margin-bottom:16px}.placeholder p{max-width:700px;color:#aab4c8;line-height:1.7}.register a{display:inline-block;margin-top:22px;color:#65aaff}
@media(max-width:1000px){.nav-links{gap:18px}.brand{min-width:230px}.event-card{left:9%;width:82%}.hero-content{transform:none;margin-top:85px}.eyebrow{font-size:50px}h1{font-size:clamp(65px,11vw,110px)}}
@media(max-width:760px){.page-shell{padding:8px}.hero{border-width:8px;border-radius:30px;min-height:780px}.nav{height:76px;padding:0 18px}.brand{min-width:0;flex:1;grid-template-columns:46px auto;column-gap:10px}.brand-logo{width:46px;height:46px;border-radius:10px}.brand-main,.brand-accent{font-size:24px}.nav-links,.nav-cta{display:none}.menu{display:block}.hero-content{width:92%;margin-top:100px}.eyebrow{font-size:38px}h1{font-size:clamp(58px,17vw,94px);letter-spacing:-3px}.event-card{position:absolute;left:5%;bottom:7%;width:90%;grid-template-columns:1fr 46px;min-height:260px}.date-block{padding:25px 20px}.date{font-size:28px}.city{font-size:24px}.arrow{display:none}.description{grid-column:1/2;padding:0 20px 24px;font-size:18px}.side-register{grid-column:2;grid-row:1/3}.hero-footer{display:none}}

.marquee {
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;

  overflow: hidden;
  background: #1268e8;
  color: #fff;
  height: 96px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 25s linear infinite;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 55px;
  padding-right: 55px;
  flex-shrink: 0;
}

.marquee-content span {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
}

.marquee-content b,
.marquee-content i {
  font-size: 35px;
  font-style: normal;
  line-height: 1;
}

.marquee-content b {
  color: #00ff00;
}

.marquee-content i {
  color: #ffff00;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

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

/* Optional: pause when hovering */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Mobile */
@media (max-width: 768px) {
  .marquee {
    height: 75px;
  }

  .marquee-content {
    gap: 30px;
    padding-right: 30px;
  }

  .marquee-content span {
    font-size: 27px;
  }

  .marquee-content b,
  .marquee-content i {
    font-size: 25px;
  }

  .marquee-track {
    animation-duration: 18s;
  }
}
.full-width-section {
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
}
/* =====================================================
   SCHOLARHUB — ABOUT SECTION
===================================================== */

.about-section {

  position: relative;
  overflow: hidden;

  background: #000;

  color: #fff;

  padding: 150px 0 170px;

  isolation: isolate;
  
}


/* =====================================================
   BACKGROUND GRID
===================================================== */

.about-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 70px 70px;

  opacity: .35;

  pointer-events: none;

  z-index: -3;
}


/* subtle glow */

.about-section::after {
  content: "";

  position: absolute;

  width: 800px;
  height: 800px;

  left: -350px;
  top: 250px;

  background: #0877ff;

  opacity: .08;

  filter: blur(150px);

  border-radius: 50%;

  z-index: -4;
}


/* =====================================================
   DECORATIVE SHAPES
===================================================== */

.about-shape {
  position: absolute;

  pointer-events: none;

  z-index: -1;
}


/* BLUE SHAPE */

.about-shape-blue {

  width: 300px;
  height: 300px;

  right: -90px;
  top: 110px;

  background: #0877ff;

  border-radius:
    60% 40% 70% 30%
    / 40% 60% 40% 60%;

  transform: rotate(28deg);
}


/* GREEN SHAPE */

.about-shape-green {

  width: 190px;
  height: 190px;

  left: -80px;
  bottom: 100px;

  background: #00ed00;

  border-radius:
    45% 55% 30% 70%
    / 60% 40% 60% 40%;

  transform: rotate(-25deg);
}


/* small decorative star */

.about-shape-green::after {

  content: "✱";

  position: absolute;

  right: -90px;
  top: -70px;

  color: #f5f500;

  font-size: 80px;
}


/* =====================================================
   CONTAINER
===================================================== */

.about-container {

  width: min(1180px, calc(100% - 80px));

  margin: auto;

  position: relative;
}


/* =====================================================
   HEADER
===================================================== */

.about-heading {

  text-align: center;

  max-width: 900px;

  margin: 0 auto 90px;
}


.about-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 10px 20px;

  border: 1px solid rgba(245,245,0,.4);

  border-radius: 100px;

  color: #f5f500;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 30px;
}


.about-eyebrow span {

  font-size: 18px;

  line-height: 1;
}


.about-heading h2 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size: clamp(80px, 11vw, 150px);

  font-weight: 900;

  line-height: .72;

  letter-spacing: -5px;

  margin: 0;
}


.about-heading h2 span {

  color: #0877ff;

  margin-left: 15px;
}


.about-subtitle {

  max-width: 760px;

  margin: 40px auto 0;

  color: #a8a8ae;

  font-size: 18px;

  line-height: 1.6;

  font-weight: 400;
}


/* =====================================================
   CARDS
===================================================== */

.about-card {

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #111923,
      #080c12
    );

  border: 1px solid rgba(255,255,255,.12);

  border-radius: 24px;

  padding: 45px;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;

  box-shadow:
    0 25px 80px rgba(0,0,0,.35);
}


.about-card::before {

  content: "";

  position: absolute;

  width: 90px;
  height: 4px;

  left: 45px;
  top: 0;

  background: #0877ff;
}


.about-card:hover {

  transform: translateY(-7px);

  border-color:
    rgba(8,119,255,.6);

  background:
    linear-gradient(
      145deg,
      #141e2b,
      #090d13
    );
}


/* =====================================================
   INTRODUCTION CARD
===================================================== */

.about-introduction {

  min-height: 280px;

  display: flex;

  gap: 45px;

  align-items: flex-start;

  margin-bottom: 25px;
}


.about-introduction::before {

  background: #00ed00;
}


.about-card-content {

  flex: 1;
}


.card-number {

  color: #0877ff;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 18px;

  font-weight: 800;

  letter-spacing: 2px;

  min-width: 35px;
}


.card-label {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #777d87;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 18px;
}


.card-label span {

  width: 24px;

  height: 2px;

  background: #f5f500;
}


.about-card h3 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size: 42px;

  font-weight: 800;

  line-height: .9;

  letter-spacing: -.5px;

  margin-bottom: 25px;
}


.about-card p {

  color: #aeb3bc;

  font-size: 16px;

  line-height: 1.75;

  max-width: 850px;
}


.about-card p strong {

  color: #0877ff;

  font-weight: 600;
}


/* =====================================================
   SYMBOL
===================================================== */

.card-symbol {

  position: absolute;

  right: 40px;
  top: 35px;

  width: 55px;
  height: 55px;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #f5f500;

  font-size: 22px;

  transition: .3s;
}


.about-card:hover .card-symbol {

  background: #0877ff;

  border-color: #0877ff;

  color: #fff;

  transform: rotate(45deg);
}


/* =====================================================
   TWO COLUMN GRID
===================================================== */

.about-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 25px;
}


.about-grid .about-card {

  min-height: 370px;

  display: flex;

  flex-direction: column;
}


.about-grid .about-card:nth-child(1)::before {

  background: #0877ff;
}


.about-grid .about-card:nth-child(2)::before {

  background: #f5f500;
}


.about-grid .about-card p {

  max-width: 480px;
}


/* =====================================================
   CARD ARROW
===================================================== */

.card-arrow {

  margin-top: auto;

  width: 52px;
  height: 52px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.15);

  display: flex;

  align-items: center;
  justify-content: center;

  color: #fff;

  font-size: 20px;

  transition: .3s;
}


.about-card:hover .card-arrow {

  background: #0877ff;

  border-color: #0877ff;

  transform: translate(5px,-5px);
}


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

@media (max-width: 900px) {

  .about-section {

    padding: 110px 0;
  }


  .about-container {

    width: min(
      100% - 45px,
      700px
    );
  }


  .about-heading {

    margin-bottom: 60px;
  }


  .about-heading h2 {

    font-size: 90px;

    letter-spacing: -3px;
  }


  .about-introduction {

    display: block;
  }


  .about-introduction .card-number {

    margin-bottom: 25px;
  }


  .about-grid {

    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .about-section {

    padding: 90px 0;
  }


  .about-container {

    width: calc(100% - 30px);
  }


  .about-eyebrow {

    font-size: 9px;

    letter-spacing: 2px;
  }


  .about-heading h2 {

    font-size: 65px;

    letter-spacing: -2px;
  }


  .about-heading h2 span {

    margin-left: 5px;
  }


  .about-subtitle {

    font-size: 15px;

    padding: 0 10px;
  }


  .about-card {

    padding: 30px 25px;

    border-radius: 18px;
  }


  .about-card::before {

    left: 25px;
  }


  .about-card h3 {

    font-size: 35px;
  }


  .about-card p {

    font-size: 14px;

    line-height: 1.65;
  }


  .card-symbol {

    width: 42px;
    height: 42px;

    right: 22px;
    top: 25px;
  }


  .about-shape-blue {

    width: 180px;
    height: 180px;

    right: -100px;
  }


  .about-shape-green {

    width: 120px;
    height: 120px;

    left: -70px;
  }

}

/* =====================================================
   SCHOLARHUB — SYMPOSIUM THEMES
===================================================== */

.themes-section {
  position: relative;
  overflow: hidden;

  background: #000;
  color: #fff;

  padding: 150px 0 170px;

  isolation: isolate;
}


/* Background grid */

.themes-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 70px 70px;

  opacity: .4;

  z-index: -3;
}


/* Blue glow */

.themes-section::after {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  right: -350px;
  top: 300px;

  background: #0877ff;

  opacity: .08;

  filter: blur(140px);

  border-radius: 50%;

  z-index: -4;
}


/* =====================================================
   DECORATIVE SHAPES
===================================================== */

.themes-shape {
  position: absolute;

  pointer-events: none;

  z-index: -1;
}


/* Blue organic shape */

.themes-shape-blue {
  width: 280px;
  height: 280px;

  right: -120px;
  top: 90px;

  background: #0877ff;

  border-radius:
    60% 40% 70% 30%
    / 40% 60% 40% 60%;

  transform: rotate(25deg);
}


/* Green shape */

.themes-shape-green {
  width: 170px;
  height: 170px;

  left: -80px;
  bottom: 130px;

  background: #00ed00;

  border-radius:
    50% 50% 30% 70%
    / 60% 40% 60% 40%;

  transform: rotate(-25deg);
}


/* =====================================================
   CONTAINER
===================================================== */

.themes-container {
  width: min(1180px, calc(100% - 80px));

  margin: auto;

  position: relative;
}


/* =====================================================
   HEADER
===================================================== */

.themes-header {
  max-width: 850px;

  margin-bottom: 85px;
}


.themes-eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 10px 20px;

  border: 1px solid rgba(245,245,0,.45);

  border-radius: 100px;

  color: #f5f500;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 30px;
}


.themes-eyebrow span {
  font-size: 18px;
}


.themes-header h2 {
  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size: clamp(80px, 10vw, 140px);

  font-weight: 900;

  line-height: .78;

  letter-spacing: -4px;
}


.themes-header h2 span {
  color: #0877ff;
}


.themes-header p {
  max-width: 650px;

  margin-top: 35px;

  color: #a6a8ae;

  font-size: 17px;

  line-height: 1.6;
}


/* =====================================================
   GRID
===================================================== */

.themes-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 22px;
}


/* =====================================================
   THEME CARD
===================================================== */

.theme-card {
  position: relative;

  min-height: 360px;

  padding: 38px;

  overflow: hidden;

  border-radius: 22px;

  border: 1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(
      145deg,
      #111821,
      #080b10
    );

  display: flex;

  flex-direction: column;

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;
}


.theme-card:hover {
  transform: translateY(-8px);

  border-color: rgba(255,255,255,.3);
}


/* Colored top line */

.theme-card::before {
  content: "";

  position: absolute;

  left: 38px;
  right: 38px;

  top: 0;

  height: 4px;

  background: #0877ff;
}


.theme-green::before {
  background: #00ed00;
}


.theme-yellow::before {
  background: #f5f500;
}


/* =====================================================
   TOP
===================================================== */

.theme-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 55px;
}


.theme-number {
  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 18px;

  font-weight: 800;

  letter-spacing: 2px;

  color: #777e89;
}


.theme-icon {
  font-size: 30px;

  color: #0877ff;
}


.theme-green .theme-icon {
  color: #00ed00;
}


.theme-yellow .theme-icon {
  color: #f5f500;
}


/* =====================================================
   CONTENT
===================================================== */

.theme-content {
  position: relative;

  z-index: 2;
}


.theme-content h3 {
  max-width: 570px;

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size: clamp(34px, 3vw, 48px);

  font-weight: 800;

  line-height: .9;

  letter-spacing: -.5px;
}


.theme-content h3 span {
  display: block;

  color: #0877ff;
}


.theme-green .theme-content h3 span {
  color: #00ed00;
}


.theme-yellow .theme-content h3 span {
  color: #f5f500;
}


.theme-content p {
  max-width: 510px;

  margin-top: 25px;

  color: #969ba4;

  font-size: 14px;

  line-height: 1.65;
}


/* =====================================================
   ARROW
===================================================== */

.theme-arrow {
  position: absolute;

  right: 35px;
  bottom: 30px;

  width: 52px;
  height: 52px;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 20px;

  color: #fff;

  transition: .3s;
}


.theme-card:hover .theme-arrow {
  background: #0877ff;

  border-color: #0877ff;

  transform: translate(5px,-5px);
}


.theme-green:hover .theme-arrow {
  background: #00ed00;

  border-color: #00ed00;

  color: #000;
}


.theme-yellow:hover .theme-arrow {
  background: #f5f500;

  border-color: #f5f500;

  color: #000;
}


/* =====================================================
   LARGE CARD EFFECT
===================================================== */

.theme-card::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -90px;
  bottom: -100px;

  border-radius: 50%;

  background: #0877ff;

  opacity: .08;

  transition: .4s;
}


.theme-green::after {
  background: #00ed00;
}


.theme-yellow::after {
  background: #f5f500;
}


.theme-card:hover::after {
  transform: scale(2);
  opacity: .14;
}


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

@media (max-width: 900px) {

  .themes-section {
    padding: 110px 0;
  }

  .themes-container {
    width: min(100% - 45px, 700px);
  }

  .themes-grid {
    grid-template-columns: 1fr;
  }

  .themes-header {
    margin-bottom: 60px;
  }

}


@media (max-width: 600px) {

  .themes-section {
    padding: 90px 0;
  }

  .themes-container {
    width: calc(100% - 30px);
  }

  .themes-header h2 {
    font-size: 65px;
    letter-spacing: -2px;
  }

  .themes-header p {
    font-size: 15px;
  }

  .theme-card {
    min-height: 330px;

    padding: 30px 25px;

    border-radius: 18px;
  }

  .theme-card::before {
    left: 25px;
    right: 25px;
  }

  .theme-top {
    margin-bottom: 40px;
  }

  .theme-content h3 {
    font-size: 35px;
  }

  .theme-content p {
    font-size: 13px;
  }

}

/* =====================================================
   SCHOLARHUB — ORGANIZING COMMITTEE
===================================================== */

.committee-section {
  position: relative;

  overflow: hidden;

  background: #000;

  color: #fff;

  padding: 150px 0 180px;

  isolation: isolate;
}


/* =====================================================
   BACKGROUND
===================================================== */

.committee-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.022) 1px,
      transparent 1px
    );

  background-size: 70px 70px;

  opacity: .4;

  z-index: -4;
}


/* blue ambient glow */

.committee-section::after {

  content: "";

  position: absolute;

  width: 750px;
  height: 750px;

  left: -450px;
  top: 250px;

  border-radius: 50%;

  background: #0877ff;

  opacity: .07;

  filter: blur(150px);

  z-index: -5;
}


/* =====================================================
   DECORATIVE SHAPES
===================================================== */

.committee-shape {

  position: absolute;

  pointer-events: none;

  z-index: -1;
}


/* blue shape */

.committee-shape-blue {

  width: 310px;
  height: 310px;

  right: -130px;
  top: 120px;

  background: #0877ff;

  border-radius:
    60% 40% 70% 30%
    / 40% 60% 40% 60%;

  transform: rotate(25deg);
}


/* green shape */

.committee-shape-green {

  width: 170px;
  height: 170px;

  left: -80px;
  bottom: 170px;

  background: #00ed00;

  border-radius:
    50% 50% 30% 70%
    / 60% 40% 60% 40%;

  transform: rotate(-25deg);
}


/* =====================================================
   CONTAINER
===================================================== */

.committee-container {

  width: min(
    1180px,
    calc(100% - 80px)
  );

  margin: auto;

  position: relative;
}


/* =====================================================
   HEADER
===================================================== */

.committee-header {

  max-width: 900px;

  margin-bottom: 110px;
}


.committee-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 10px 20px;

  border: 1px solid rgba(245,245,0,.45);

  border-radius: 100px;

  color: #f5f500;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 32px;
}


.committee-eyebrow span {

  font-size: 18px;

  line-height: 1;
}


.committee-header h2 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size:
    clamp(
      75px,
      10vw,
      145px
    );

  font-weight: 900;

  line-height: .76;

  letter-spacing: -4px;
}


.committee-header h2 span {

  color: #0877ff;

  display: block;
}


.committee-header p {

  max-width: 760px;

  margin-top: 40px;

  color: #999fa9;

  font-size: 17px;

  line-height: 1.7;
}


/* =====================================================
   GROUP
===================================================== */

.committee-group {

  margin-bottom: 80px;
}


/* =====================================================
   GROUP TITLE
===================================================== */

.committee-group-title {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 28px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    rgba(255,255,255,.1);
}


.committee-group-title span {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #0877ff;

  color: #fff;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 17px;

  font-weight: 800;
}


.committee-group:nth-of-type(2)
.committee-group-title span {

  background: #00ed00;

  color: #000;
}


.committee-group:nth-of-type(3)
.committee-group-title span {

  background: #f5f500;

  color: #000;
}


.committee-group-title h3 {

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 27px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =====================================================
   GRID
===================================================== */

.committee-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}
/* =====================================================
   IMPORTANT DATES
===================================================== */

.important-dates {

  position: relative;

  width: 100%;

  background: #000;

  color: #fff;

  overflow: hidden;

  isolation: isolate;

  border-top: 1px solid rgba(255,255,255,.08);
}


/* subtle grid */

.important-dates::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 70px 70px;

  pointer-events: none;

  z-index: -2;
}


/* blue glow */

.important-dates::after {

  content: "";

  position: absolute;

  width: 520px;

  height: 520px;

  right: -260px;

  top: 100px;

  background: var(--blue);

  border-radius: 50%;

  opacity: .12;

  filter: blur(20px);

  pointer-events: none;

  z-index: -1;
}


/* =====================================================
   CONTAINER
===================================================== */

.dates-container {

  width: min(1200px, calc(100% - 80px));

  margin: 0 auto;

  padding: 130px 0 70px;
}


/* =====================================================
   HEADER
===================================================== */

.dates-header {

  margin-bottom: 75px;
}


.dates-label {

  display: flex;

  align-items: center;

  gap: 14px;

  color: #858c96;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 3px;

  margin-bottom: 35px;
}


.dates-label span {

  color: var(--yellow);

  font-size: 20px;
}


.dates-heading {

  display: grid;

  grid-template-columns: 1fr 420px;

  gap: 80px;

  align-items: end;
}


.dates-heading h2 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size:
    clamp(
      80px,
      9vw,
      135px
    );

  font-weight: 900;

  line-height: .68;

  letter-spacing: -5px;
}


.dates-heading h2 span {

  display: block;

  color: var(--blue);
}


.dates-heading p {

  max-width: 420px;

  color: #9299a3;

  font-size: 15px;

  line-height: 1.7;
}


/* =====================================================
   DATES LIST
===================================================== */

.dates-list {

  border-top:
    1px solid
    rgba(255,255,255,.15);
}


/* =====================================================
   DATE ROW
===================================================== */

.date-row {

  position: relative;

  min-height: 185px;

  display: grid;

  grid-template-columns:
    70px
    150px
    1fr
    60px;

  align-items: center;

  gap: 25px;

  border-bottom:
    1px solid
    rgba(255,255,255,.1);

  transition:
    background .3s ease,
    padding .3s ease;
}


.date-row:hover {

  background:
    linear-gradient(
      90deg,
      rgba(8,119,255,.08),
      transparent
    );

  padding-left: 15px;

  padding-right: 15px;
}


/* left blue line */

.date-row::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 3px;

  background: transparent;

  transition: .3s;
}


.date-row:hover::before {

  background: var(--blue);
}


/* symposium special */

.symposium-row {

  background:
    linear-gradient(
      90deg,
      rgba(0,237,0,.045),
      transparent
    );
}


.symposium-row::before {

  background: var(--green);
}


/* =====================================================
   NUMBER
===================================================== */

.date-number {

  color: #4a515b;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 18px;

  font-weight: 800;

  letter-spacing: 2px;
}


/* =====================================================
   BIG DATE
===================================================== */

.date-big {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size: 75px;

  font-weight: 900;

  line-height: .65;

  letter-spacing: -3px;

  color: #fff;
}


.date-big span {

  display: block;

  margin-bottom: 8px;

  color: var(--blue);

  font-family: Inter, sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 3px;
}


.date-row:nth-child(2)
.date-big span {

  color: var(--yellow);
}


.symposium-row .date-big span {

  color: var(--green);
}


/* =====================================================
   DETAILS
===================================================== */

.date-details small {

  color: #747c87;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2.5px;
}


.date-details h3 {

  margin-top: 10px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 38px;

  font-weight: 800;

  line-height: .85;

  letter-spacing: -.5px;
}


.date-details h3 span {

  color: var(--blue);
}


.date-row:nth-child(2)
.date-details h3 span {

  color: var(--yellow);
}


.symposium-row
.date-details h3 span {

  color: var(--green);
}


.date-details p {

  max-width: 500px;

  margin-top: 13px;

  color: #737b86;

  font-size: 12px;

  line-height: 1.5;
}


/* =====================================================
   ARROW
===================================================== */

.date-arrow {

  width: 45px;

  height: 45px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--blue);

  font-size: 20px;

  transition: .3s;
}


.date-row:nth-child(2)
.date-arrow {

  color: var(--yellow);
}


.symposium-row .date-arrow {

  color: var(--green);

  border-color:
    rgba(0,237,0,.3);
}


.date-row:hover .date-arrow {

  background: var(--blue);

  color: #fff;

  border-color: var(--blue);

  transform:
    rotate(8deg)
    scale(1.1);
}


/* =====================================================
   ACTION BUTTONS
===================================================== */

.dates-actions {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 50px;
}


.date-primary-btn,
.date-secondary-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  min-height: 56px;

  padding: 0 25px;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;

  transition: .25s;
}


.date-primary-btn {

  background: var(--blue);

  color: #fff;
}


.date-primary-btn:hover {

  background: var(--green);

  color: #000;

  transform: translateY(-3px);
}


.date-primary-btn span {

  font-size: 20px;
}


.date-secondary-btn {

  border:
    1px solid
    rgba(255,255,255,.25);

  color: #fff;
}


.date-secondary-btn:hover {

  background: #fff;

  color: #000;

  border-color: #fff;

  transform: translateY(-3px);
}


.date-secondary-btn span {

  font-size: 18px;
}


/* =====================================================
   BOTTOM
===================================================== */

.dates-bottom {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-top: 70px;

  color: #555d68;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;
}


.dates-bottom div {

  height: 1px;

  flex: 1;

  background:
    rgba(255,255,255,.1);
}


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

@media (max-width: 900px) {

  .dates-heading {

    grid-template-columns: 1fr;

    gap: 35px;
  }


  .date-row {

    grid-template-columns:
      50px
      120px
      1fr
      50px;
  }


  .date-details h3 {

    font-size: 32px;
  }

}


@media (max-width: 650px) {

  .dates-container {

    width: calc(100% - 40px);

    padding: 90px 0 55px;
  }


  .dates-heading h2 {

    font-size: 72px;

    letter-spacing: -3px;
  }


  .dates-heading p {

    font-size: 14px;
  }


  .date-row {

    min-height: 190px;

    grid-template-columns:
      35px
      90px
      1fr;

    gap: 12px;

    padding: 20px 0;
  }


  .date-row:hover {

    padding-left: 8px;

    padding-right: 8px;
  }


  .date-number {

    font-size: 14px;
  }


  .date-big {

    font-size: 58px;
  }


  .date-big span {

    font-size: 8px;
  }


  .date-details h3 {

    font-size: 27px;
  }


  .date-details p {

    font-size: 11px;
  }


  .date-arrow {

    display: none;
  }


  .dates-actions {

    flex-direction: column;

    align-items: stretch;
  }


  .date-primary-btn,
  .date-secondary-btn {

    width: 100%;
  }


  .dates-bottom {

    flex-wrap: wrap;

    line-height: 1.6;
  }

}
.important-dates {
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
}

/* =====================================================
   CARD
===================================================== */

.committee-card {

  position: relative;

  min-height: 190px;

  padding: 30px;

  overflow: hidden;

  border-radius: 18px;

  border:
    1px solid
    rgba(255,255,255,.1);

  background:
    linear-gradient(
      145deg,
      #111923,
      #070b11
    );

  transition:
    transform .3s ease,
    border-color .3s ease,
    background .3s ease;
}


.committee-card:hover {

  transform: translateY(-6px);

  border-color:
    rgba(8,119,255,.55);

  background:
    linear-gradient(
      145deg,
      #151f2d,
      #090d13
    );
}


/* colored line */

.committee-card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 55px;
  height: 3px;

  background: #0877ff;
}


.committee-card:nth-child(2)::before {

  background: #00ed00;
}


.committee-card:nth-child(3)::before {

  background: #f5f500;
}


/* =====================================================
   NUMBER
===================================================== */

.committee-number {

  position: absolute;

  right: 25px;
  top: 20px;

  color: #3d4653;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 17px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =====================================================
   NAME
===================================================== */

.committee-card h4 {

  padding-right: 30px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 25px;

  font-weight: 700;

  line-height: 1;

  margin-bottom: 12px;
}


.committee-card p {

  color: #9299a5;

  font-size: 13px;

  line-height: 1.5;
}


.committee-card small {

  display: block;

  margin-top: 4px;

  color: #5e6775;

  font-size: 12px;
}


/* =====================================================
   INTERNATIONAL TAG
===================================================== */

.committee-card em {

  display: inline-block;

  margin-top: 12px;

  padding: 5px 10px;

  border:
    1px solid
    rgba(8,119,255,.5);

  border-radius: 100px;

  color: #0877ff;

  font-size: 8px;

  font-weight: 800;

  font-style: normal;

  letter-spacing: 1px;
}


/* =====================================================
   SPECIAL CARD WIDTHS
===================================================== */

/* First group has 5 members */

.committee-group:first-of-type
.committee-card:nth-child(4),
.committee-group:first-of-type
.committee-card:nth-child(5) {

  grid-column: span 1;
}


/* =====================================================
   HOVER ACCENT
===================================================== */

.committee-card::after {

  content: "↗";

  position: absolute;

  right: 22px;
  bottom: 18px;

  width: 34px;
  height: 34px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #777;

  font-size: 14px;

  opacity: 0;

  transform: translate(5px,5px);

  transition: .3s;
}


.committee-card:hover::after {

  opacity: 1;

  transform: translate(0,0);

  color: #0877ff;

  border-color: #0877ff;
}


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

@media (max-width: 1000px) {

  .committee-container {

    width: min(
      100% - 45px,
      750px
    );
  }


  .committee-grid {

    grid-template-columns:
      repeat(2, 1fr);
  }


  .committee-header {

    margin-bottom: 75px;
  }

}


@media (max-width: 600px) {

  .committee-section {

    padding: 90px 0 110px;
  }


  .committee-container {

    width: calc(100% - 30px);
  }


  .committee-header h2 {

    font-size: 65px;

    letter-spacing: -2px;
  }


  .committee-header p {

    font-size: 15px;
  }


  .committee-grid {

    grid-template-columns: 1fr;
  }


  .committee-card {

    min-height: 175px;

    padding: 27px;
  }


  .committee-group {

    margin-bottom: 60px;
  }


  .committee-group-title h3 {

    font-size: 23px;
  }


  .committee-shape-blue {

    width: 180px;
    height: 180px;

    right: -100px;
  }


  .committee-shape-green {

    width: 120px;
    height: 120px;

    left: -70px;
  }

}

/* =====================================================
   SCHOLARHUB — WHITE FOOTER
===================================================== */

.site-footer {
  position: relative;

  background: #f7f7f3;
  color: #050505;

  overflow: hidden;

  border-top: 1px solid #ddd;
}


/* =====================================================
   TOP CTA
===================================================== */

.footer-cta {

  position: relative;

  min-height: 430px;

  padding: 85px max(8vw, 50px);

  background: #fff;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 60px;

  overflow: hidden;
}


/* Huge decorative blue circle */

.footer-cta::before {

  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  right: -180px;
  top: -230px;

  background: #0877ff;

  border-radius: 50%;

  opacity: 1;
}


/* Green decorative shape */

.footer-cta::after {

  content: "✱";

  position: absolute;

  right: 310px;
  bottom: -45px;

  font-size: 150px;

  line-height: 1;

  color: #00e900;

  transform: rotate(15deg);
}


.footer-cta-content {

  position: relative;

  z-index: 2;

  max-width: 700px;
}


.footer-label {

  display: inline-block;

  margin-bottom: 22px;

  color: #0877ff;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 3px;
}


.footer-cta h2 {

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size: clamp(
    80px,
    10vw,
    145px
  );

  font-weight: 900;

  line-height: .76;

  letter-spacing: -4px;
}


.footer-cta h2 span {

  color: #0877ff;
}


.footer-cta p {

  max-width: 600px;

  margin-top: 30px;

  color: #555;

  font-size: 16px;

  line-height: 1.6;
}


/* =====================================================
   REGISTER BUTTON
===================================================== */

.footer-register {

  position: relative;

  z-index: 3;

  min-width: 210px;

  height: 210px;

  border-radius: 50%;

  background: #0877ff;

  color: #fff;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 22px;

  font-weight: 800;

  letter-spacing: 1px;

  transition:
    transform .35s ease,
    background .35s ease;
}


.footer-register span {

  font-size: 35px;

  line-height: 1;
}


.footer-register:hover {

  transform: rotate(-8deg) scale(1.05);

  background: #00e900;

  color: #000;
}


/* =====================================================
   MAIN FOOTER
===================================================== */

.footer-main {

  position: relative;

  padding:
    75px
    max(8vw, 50px)
    70px;

  display: grid;

  grid-template-columns:
    2.2fr
    1fr
    1fr
    1.4fr;

  gap: 70px;

  border-top: 1px solid #ddd;
}


/* =====================================================
   BRAND
===================================================== */

.footer-logo {

  display: flex;

  align-items: baseline;

  gap: 5px;

  font-family:
    "Barlow Condensed",
    Impact,
    sans-serif;

  font-size: 47px;

  font-weight: 900;

  line-height: .8;

  letter-spacing: -2px;
}

.footer-logo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 18px;
  background: #fff;
}


.footer-logo span {

  color: #111;
}


.footer-logo strong {

  color: #0877ff;
}


.footer-brand > p {

  max-width: 400px;

  margin-top: 25px;

  color: #666;

  font-size: 14px;

  line-height: 1.7;
}


/* =====================================================
   SOCIALS
===================================================== */

.footer-socials {

  display: flex;

  gap: 10px;

  margin-top: 28px;
}


.footer-socials a {

  width: 40px;
  height: 40px;

  border: 1px solid #bbb;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #111;

  font-size: 13px;

  font-weight: 700;

  transition: .25s;
}


.footer-socials a:hover {

  background: #0877ff;

  border-color: #0877ff;

  color: #fff;

  transform: translateY(-3px);
}


/* =====================================================
   COLUMNS
===================================================== */

.footer-column {

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.footer-column h3 {

  margin-bottom: 25px;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size: 18px;

  font-weight: 900;

  letter-spacing: 2px;
}


.footer-column a {

  position: relative;

  width: max-content;

  margin-bottom: 13px;

  color: #555;

  font-size: 14px;

  transition:
    color .2s ease,
    transform .2s ease;
}


.footer-column a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -3px;

  width: 0;
  height: 2px;

  background: #0877ff;

  transition: width .25s ease;
}


.footer-column a:hover {

  color: #0877ff;

  transform: translateX(4px);
}


.footer-column a:hover::after {

  width: 100%;
}


.footer-contact p {

  margin-top: 15px;

  color: #777;

  font-size: 13px;

  line-height: 1.7;
}


/* =====================================================
   BOTTOM BAR
===================================================== */

.footer-bottom {

  min-height: 75px;

  padding:
    20px
    max(8vw, 50px);

  border-top: 1px solid #d7d7d7;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 30px;

  color: #777;

  font-size: 11px;
}


.footer-legal {

  display: flex;

  gap: 25px;
}


.footer-legal a {

  color: #666;

  transition: color .2s;
}


.footer-legal a:hover {

  color: #0877ff;
}


.footer-mark {

  justify-self: end;

  color: #111;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;
}


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

@media (max-width: 1000px) {

  .footer-main {

    grid-template-columns:
      1.5fr
      1fr
      1fr;

    gap: 50px;
  }

  .footer-brand {

    grid-column: 1 / -1;
  }

  .footer-cta {

    min-height: 380px;
  }

}


@media (max-width: 700px) {

  .footer-cta {

    min-height: 550px;

    padding:
      70px
      25px;

    display: block;
  }


  .footer-cta h2 {

    font-size: 75px;

    letter-spacing: -2px;
  }


  .footer-cta p {

    font-size: 14px;
  }


  .footer-register {

    width: 150px;
    height: 150px;

    min-width: 150px;

    margin-top: 45px;

    font-size: 17px;
  }


  .footer-register span {

    font-size: 27px;
  }


  .footer-cta::before {

    width: 250px;
    height: 250px;

    right: -120px;
    top: -100px;
  }


  .footer-cta::after {

    right: 20px;
    bottom: 20px;

    font-size: 90px;
  }


  .footer-main {

    padding:
      55px 25px;

    grid-template-columns:
      1fr 1fr;

    gap: 45px 30px;
  }


  .footer-brand {

    grid-column: 1 / -1;
  }


  .footer-bottom {

    padding:
      25px;

    grid-template-columns: 1fr;

    gap: 18px;
  }


  .footer-legal {

    flex-wrap: wrap;

    gap: 15px;
  }


  .footer-mark {

    justify-self: start;
  }

}


@media (max-width: 450px) {

  .footer-main {

    grid-template-columns: 1fr;
  }

}