.site-logo {
  display: block;
  height: 62px;
  width: 172px;
  object-fit: contain;
  object-position: left center;
}

.organizer-brand {
  display: flex;
  align-items: center;
  margin-right: 1.25rem;
}

.organizer-brand img {
  display: block;
  width: 112px;
  height: 42px;
  object-fit: contain;
  border-radius: 4px;
}

.conference-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
}

.conference-brand span {
  color: #1684cb;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  margin-left: 1.8rem;
}

.hero-visual {
  display: none;
}

.hero-youth-logo {
  position: absolute;
  top: 2rem;
  right: clamp(1.25rem, 5vw, 5rem);
  width: clamp(115px, 10vw, 165px);
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .28));
}

.registration-page-title {
  font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
  letter-spacing: .03em !important;
  margin-bottom: .55rem;
}

.registration-page-subtitle {
  font-family: "Noto Sans Malayalam", sans-serif !important;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem) !important;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.social-icon {
  color: #fff;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.social-icon:hover { color: #fff; background: #df2330; border-color: #df2330; }

.navbar {
  min-height: 92px;
  padding-block: .65rem !important;
}

.hero-logo {
  display: block;
  width: min(100%, 620px);
  max-height: 280px;
  object-fit: contain;
  object-position: left center;
  margin: .5rem 0 1.25rem;
}

.hero .hero-title {
  margin: .45rem 0 1rem;
  color: #143458 !important;
  font-family: "Noto Sans Malayalam", sans-serif !important;
  font-size: clamp(3.2rem, 6vw, 6.4rem) !important;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.06em;
}

/* Reference palette: navy, sky blue, white and red */
body { background: #f5f7fb; color: #1c2f45; }
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f5f7fb 0%, #f5f7fbe8 47%, #f5f7fb26 74%), url("assets/quran-hero.png") center right/cover no-repeat !important;
}
.navbar { background: #fff !important; border-color: #d9e2ed !important; }
.navbar .nav-link { color: #263849 !important; }
.navbar .nav-link:hover { color: #1684cb !important; }
.hero .eyebrow { color: #1684cb !important; font-size: 1.12rem; font-weight: 800; letter-spacing: .05em; }
.hero .lead { color: #425166 !important; }
.event-date, .event-date small, .event-date span { color: #143458 !important; }
.event-date b { color: #143458 !important; }
.countdown-row > div { background: #ffffffdd !important; border-color: #c7e2f7 !important; border-top-color: #df2330 !important; }
.countdown-row strong { color: #143458 !important; }
.countdown-row small { color: #1684cb !important; }
.hero .btn-brand { background: #df2330 !important; border-color: #df2330 !important; }
.hero .btn-brand:hover { background: #bd1623 !important; border-color: #bd1623 !important; }
.hero .btn-outline-brand { color: #143458 !important; border-color: #143458 !important; }
.hero .btn-outline-brand:hover { background: #143458 !important; border-color: #143458 !important; color: #fff !important; }

.btn-brand,
.btn-outline-brand {
  background: #df2330 !important;
  border-color: #df2330 !important;
  color: #fff !important;
}

.btn-brand:hover,
.btn-outline-brand:hover {
  background: #bd1623 !important;
  border-color: #bd1623 !important;
  color: #fff !important;
}

.hero .btn.btn-red {
  background: #df2330 !important;
  border-color: #df2330 !important;
  color: #fff !important;
}

.hero .btn.btn-red:hover {
  background: #bd1623 !important;
  border-color: #bd1623 !important;
}

.hero .btn.btn-outline-brand {
  background: #143458 !important;
  border-color: #143458 !important;
  color: #fff !important;
}

.hero .btn.btn-outline-brand:hover {
  background: #0d2744 !important;
  border-color: #0d2744 !important;
}

.ts-wrapper .ts-control {
  min-height: 48px;
  border-color: #ced4da;
  font-size: 1.1rem;
}

.ts-wrapper.focus .ts-control {
  border-color: #1684cb;
  box-shadow: 0 0 0 .25rem rgba(22, 132, 203, .16);
}

.hero .lead { color: #31483f !important; }
.hero .eyebrow { color: #276c63 !important; }
.event-date, .event-date small, .event-date span { color: #173f36 !important; }
.countdown-row > div { border-color: #bfd8d3 !important; box-shadow: 0 8px 20px rgba(21, 63, 55, .12) !important; }
.countdown-row > div { border-top-color: #276c63 !important; }
.countdown-row strong { color: #155b50 !important; }
.countdown-row small { color: #276c63 !important; }
.hero .btn-brand { background: #155b50 !important; border-color: #155b50 !important; }
.hero .btn-outline-brand { color: #155b50 !important; border-color: #155b50 !important; }
.hero .btn-outline-brand:hover { background: #155b50 !important; color: #fff !important; }

@media (max-width: 767px) {
  .hero { background: linear-gradient(180deg, #f5f7fb55 0%, #f5f7fb10 55%, #f5f7fb66 100%), url("assets/quran-hero-mobile.png") center/cover no-repeat !important; }
  .navbar { min-height: 74px; }
  .site-logo { height: 46px; width: 128px; }
  .organizer-brand { margin: 1rem 0 .5rem; }
  .organizer-brand img { width: 120px; height: 45px; }
  .conference-brand span { font-size: .42rem; letter-spacing: .11em; margin-left: 1.8rem; }
  .hero-youth-logo { top: 1rem; right: 1rem; width: 105px; }
  .hero .hero-title { font-size: clamp(2.8rem, 13vw, 4.5rem) !important; }
}