@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --bg: #F8F4EC;
  --b2: #ebdfcd;
  --b3: #EDE3D2;
  --g1: #C89B2C;
  --g2: #D9B14E;
  --c1: #0B2240;
  --t2: #4F6479;
  --grn: #1F4EA8;
  --ylw: #C89B2C;
  --org: #C89B2C;
  --fh: 'Sora', serif;
  --fb: 'Inter', sans-serif
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--c1);
  overflow-x: hidden
}

a {
  text-decoration: none;
  color: inherit
}

img {
  max-width: 100%
}

::selection {
  background: var(--g1);
  color: var(--bg)
}

::-webkit-scrollbar {
  width: 6px
}

::-webkit-scrollbar-track {
  background: var(--bg)
}

::-webkit-scrollbar-thumb {
  background: var(--g1);
  border-radius: 3px
}

input,
select,
textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(200, 155, 44, 0.15);
  border-radius: 14px;
  color: var(--c1);
  font-family: var(--fb);
  font-size: 0.88rem;
  outline: none;
  transition: all 0.3s
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--grn);
  box-shadow: 0 0 0 4px rgba(31, 78, 168, 0.15)
}

input::placeholder,
textarea::placeholder {
  color: rgba(7, 20, 39, 0.3)
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e8a840' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center
}

option {
  background: var(--b2);
  color: var(--c1)
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center
  }

  100% {
    background-position: 200% center
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px)
  }

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

/* === GEN-Z LIGHT THEME OVERRIDES =========================== */
/* Re-tuned shadows and pops layered on top of the variable swap */
body {
  background: linear-gradient(180deg, #F8F4EC 0%, #F1E9DC 100%) fixed;
  color: #0B2240
}

.bg {
  background: rgba(200, 155, 44, 0.08) !important;
  color: #C89B2C !important;
  border-color: #C89B2C !important
}

.bg:hover {
  background: linear-gradient(135deg, #1F4EA8, #C89B2C) !important;
  color: #F8F4EC !important;
  border-color: transparent !important
}

.gc {
  background: linear-gradient(145deg, #FFFFFF, #F1E9DC) !important;
  border: 1px solid rgba(200, 155, 44, 0.2) !important;
  box-shadow: 0 4px 14px rgba(7, 20, 39, 0.04)
}

.gc:hover {
  box-shadow: 0 18px 40px rgba(200, 155, 44, 0.14), 0 0 30px rgba(31, 78, 168, 0.08) !important;
  border-color: rgba(31, 78, 168, 0.35) !important
}

.gc::before {
  background: linear-gradient(90deg, #1F4EA8, #C89B2C, #C89B2C, #B11217) !important
}

.st em {
  background: linear-gradient(135deg, #B11217, #C89B2C, #C89B2C, #1F4EA8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important
}

::-webkit-scrollbar-track {
  background: #F1E9DC
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C89B2C, #C89B2C)
}

input,
select {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1.5px solid rgba(200, 155, 44, 0.3) !important;
  color: #0B2240 !important
}

input:focus,
select:focus {
  border-color: #1F4EA8 !important;
  box-shadow: 0 0 0 4px rgba(31, 78, 168, 0.15) !important
}

input::placeholder {
  color: rgba(79, 100, 121, 0.55) !important
}

option {
  background: #FFFFFF !important;
  color: #0B2240 !important
}

.faq-q h4 {
  color: #0B2240
}

.faq-a p {
  color: #4F6479
}

.faq-item {
  border-bottom: 1px solid rgba(200, 155, 44, 0.18)
}

.faq-item.open .faq-q h4 {
  color: #C89B2C
}

.partner {
  background: #FFFFFF;
  border: 1px solid rgba(200, 155, 44, 0.18)
}

.partner:hover {
  border-color: rgba(31, 78, 168, 0.45);
  box-shadow: 0 8px 24px rgba(7, 20, 39, 0.06)
}

.popup-overlay {
  background: rgba(7, 20, 39, 0.55) !important
}

.popup-box {
  background: linear-gradient(145deg, #FFFFFF, #F1E9DC) !important;
  border: 1px solid rgba(200, 155, 44, 0.3) !important;
  color: #0B2240 !important;
  box-shadow: 0 30px 80px rgba(7, 20, 39, 0.18) !important
}

.popup-close {
  color: #4F6479 !important
}

#navbar {
  background: rgba(248, 244, 236, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(200, 155, 44, 0.18) !important
}

#mobile-menu {
  background: rgba(248, 244, 236, 0.97) !important
}

.logo-tm img {
  filter: drop-shadow(0 6px 18px rgba(200, 155, 44, 0.25)) !important
}

.gal-item {
  border: 1px solid rgba(200, 155, 44, 0.15)
}

.gal-item img {
  filter: brightness(0.92) saturate(1.1)
}

.gal-item .cap {
  background: linear-gradient(to top, rgba(7, 20, 39, 0.78), transparent)
}

.sl {
  color: #C89B2C
}

.sl::before {
  background: linear-gradient(90deg, #1F4EA8, #C89B2C)
}

.st {
  color: #0B2240
}

/* announcement marquees */
.marquee-warn {
  background: linear-gradient(90deg, #F3E7E7, #F0DEDE) !important;
  color: #B11217 !important
}

.marquee-info {
  background: linear-gradient(90deg, #F2ECDB, #EDE3D2, #E1E8F4) !important;
  color: #0B2240 !important
}

/* === END GEN-Z OVERRIDES =================================== */

@keyframes float {

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

  50% {
    transform: translateY(-12px)
  }
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(31, 78, 168, 0.4)
  }

  70% {
    box-shadow: 0 0 0 16px rgba(31, 78, 168, 0)
  }
}

.bf {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none;
  gap: 10px;
  background: linear-gradient(135deg, #1F4EA8, #C89B2C, #C89B2C, #1F4EA8);
  background-size: 300% 300%;
  animation: gradientMove 4s ease infinite;
  color: #0B2240;
  overflow: hidden;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.4s;
}

.bf:hover {
  transform: translateY(-2px);
  background: #000;
  color: #fff;
}

.bg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border: 2px solid var(--g1);
  border-radius: 60px;
  background: rgba(200, 155, 44, 0.06);
  color: var(--g1);
  cursor: pointer;
  font-family: var(--fb);
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  transition: all 0.4s;
  text-decoration: none
}

.bg:hover {
  background: linear-gradient(135deg, #1F4EA8, #C89B2C);
  color: #0B2240;
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(31, 78, 168, 0.35);
  border-color: transparent
}

.bs {
  padding: 11px 24px;
  font-size: 0.75rem;
  letter-spacing: 2px
}

.gc {
  background: linear-gradient(145deg, rgba(200, 155, 44, 0.04), rgba(244, 238, 224, 0.9));
  border: 1px solid rgba(200, 155, 44, 0.1);
  border-radius: 24px;
  transition: all 0.45s;
  position: relative;
  overflow: hidden;
  padding: 32px 24px
}

.gc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1F4EA8, #C89B2C, #C89B2C);
  opacity: 0;
  transition: opacity 0.4s
}

.gc:hover {
  transform: translateY(-8px);
  border-color: rgba(31, 78, 168, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(31, 78, 168, 0.08)
}

.gc:hover::before {
  opacity: 1
}

.sp {
  max-width: 1280px;
  margin: 0 auto
}

.sl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--g1);
  font-weight: 600;
  margin-bottom: 14px
}

.sl::before {
  content: '';
  width: 40px;
  height: 1.5px;
  background: linear-gradient(90deg, #1F4EA8, #C89B2C)
}

.st {
  font-family: var(--fh);
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 700;
  color: var(--c1);
  line-height: 1.15;
  margin-bottom: 18px
}

.st em {
  background: linear-gradient(135deg, #1F4EA8, #C89B2C, #C89B2C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic
}

.center {
  text-align: center
}

.grid {
  display: grid;
  gap: 24px
}

.g2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
}

.g3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

.g4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
}

.logo-tm {
  position: relative;
  display: inline-block
}

.logo-tm img {
  border-radius: 50%;
  border: 2px solid rgba(200, 155, 44, 0.2);
  filter: drop-shadow(0 4px 12px rgba(200, 155, 44, 0.25));
  background: rgba(255, 255, 255, 0.5)
}

.logo-tm .tm {
  position: absolute;
  top: -2px;
  right: -8px;
  font-size: 9px;
  color: var(--g1);
  font-weight: 800
}

.soc-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.3s;
  text-decoration: none
}

.soc-btn:hover {
  transform: translateY(-3px) scale(1.12)
}

.dummy-img {
  width: 100%;
  border-radius: 18px;
  border: 2px dashed rgba(200, 155, 44, 0.2);
  object-fit: cover;
  transition: all 0.4s
}

.dummy-img:hover {
  border-color: rgba(31, 78, 168, 0.4);
  transform: scale(1.02)
}

/* Timeline components (about, achievements, medical-fitness-calculator) */
.design-line {
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #1F4EA8, #C89B2C, #C89B2C);
}

.design-dot-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.design-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid;
  margin-right: 8px;
}

.blue-dot {
  background: #1F4EA8;
  box-shadow: 0 0 0 2px #1F4EA8;
  border-color: var(--bg);
}

.gold-dot {
  background: #C89B2C;
  box-shadow: 0 0 0 2px #C89B2C;
  border-color: var(--bg);
}

.red-dot {
  background: #B11217;
  box-shadow: 0 0 0 2px #B11217;
  border-color: var(--bg);
}

.timeline-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.reveal {
  opacity: 1;
  transform: none;
  transition: all 0.7s ease
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1.5px
}

.tag-green {
  color: #1F4EA8;
  background: rgba(31, 78, 168, 0.08);
  border: 1px solid rgba(31, 78, 168, 0.2)
}

.tag-gold {
  color: #C89B2C;
  background: rgba(200, 155, 44, 0.08);
  border: 1px solid rgba(200, 155, 44, 0.2)
}

.tag-orange {
  color: #C89B2C;
  background: rgba(200, 155, 44, 0.08);
  border: 1px solid rgba(200, 155, 44, 0.2)
}

@media(max-width:768px) {
  .sp {
    padding: 60px 14px
  }

  .st {
    font-size: clamp(1.8rem, 6vw, 2.6rem) !important
  }

  .g2,
  .g3 {
    grid-template-columns: 1fr !important
  }

  .g4 {
    grid-template-columns: repeat(2, 1fr) !important
  }

  .gc {
    padding: 24px 18px !important;
    border-radius: 18px
  }

  .bg {
    padding: 14px 28px;
    font-size: 0.78rem
  }

  nav .nav-links {
    display: none !important
  }

  .mob-menu-btn {
    display: flex !important
  }

  .hide-mob {
    display: none !important
  }

  .reveal {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .timeline-container .reveal {
    display: grid !important;
    grid-template-columns: 25px 1fr !important;
    gap: 6px !important;
    margin-bottom: 24px !important;
    position: relative !important;
  }

  .design-line {
    left: 8px;
  }

  .sp.timeline-section {
    padding: 12px;
  }

  .mob-p-3 {
    padding: 30px !important;
  }
}

@media(max-width:480px) {
  .sp {
    padding: 50px 12px
  }

  .g4 {
    grid-template-columns: 1fr !important
  }

  .bf {
    padding: 12px 22px;
    font-size: 0.72rem
  }

  .bg {
    padding: 12px 22px;
    font-size: 0.72rem
  }

  h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important
  }
}

:root {
  --navy: #071427;
  --navy2: #0B2240;
  --gold: #C89B2C;
  --gold-lt: #D9B14E;
  --red: #B11217;
  --blue: #1F4EA8;
  --blue-lt: #4A74C4;
  --ivory: #F8F4EC;
  --text: #111827;
  --coral: #C89B2C;
  --coral2: #D9B14E;
  --mint: #1F4EA8;
  --mint2: #4A74C4;
  --rose: #B11217;
  --violet: #1F4EA8;
  --cream: #F8F4EC;
  --cream2: #F4EEE0;
  --fd: 'Sora', sans-serif;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(7, 20, 39, .04), 0 8px 24px rgba(7, 20, 39, .06);
  --shadow-lift: 0 12px 32px rgba(7, 20, 39, .12);
  --ds-ease: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  color: var(--text)
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.st,
.hero-title,
.sl,
.parent-quote,
.popup-title,
.hero-stat-num,
.hero-card-label,
.bn-title,
.pillar-title,
.final-title,
.appdl-quote,
[class*="-title"],
[class*="-heading"] {
  font-family: var(--fh) !important;
  letter-spacing: -.01em
}

h1,
.hero-title {
  font-weight: 800 !important;
  line-height: 1.05
}

h2,
.st,
.title {
  font-weight: 700 !important
}

/* premium cards */
.gc,
[class*="card"]:not(.appdl-card):not(.hero-card),
.reveal>div {
  transition: transform .4s var(--ds-ease), box-shadow .4s var(--ds-ease)
}

.gc:hover,
[class*="-card"]:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift)
}

/* radius normalisation */
button,
.btn,
[class*="btn"],
input,
select,
textarea {
  border-radius: var(--radius)
}

/* ripple */
.ds-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: dsRipple .6s linear;
  pointer-events: none
}

@keyframes dsRipple {
  to {
    transform: scale(4);
    opacity: 0
  }
}

/* hero gradient per brief */
.hero {
  background: linear-gradient(135deg, #071427 0%, #0B2240 60%, #1F4EA8 100%) !important
}

/* scroll reveal */
.ds-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ds-ease), transform .7s var(--ds-ease)
}

.ds-reveal.in {
  opacity: 1;
  transform: none
}

.ds-stagger>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ds-ease), transform .6s var(--ds-ease)
}

.ds-stagger.in>* {
  opacity: 1;
  transform: none
}

img {
  transition: transform .5s var(--ds-ease)
}

.img-zoom:hover img,
[class*="gallery"] img:hover {
  transform: scale(1.05)
}

/* focus a11y */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px
}

.ds-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600
}

.ds-skip:focus {
  left: 0
}

/* mobile sticky action bar */
.ds-mobilebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1980;
  display: none;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 1px;
  background: rgba(7, 20, 39, .12);
  box-shadow: 0 -4px 24px rgba(7, 20, 39, .18);
  backdrop-filter: blur(8px)
}

.ds-mobilebar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 8px 4px;
  font-family: 'Inter', sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  color: var(--navy)
}

.ds-mobilebar a svg {
  width: 20px;
  height: 20px
}

.ds-mobilebar .mb-call {
  color: var(--navy)
}

.ds-mobilebar .mb-wa {
  color: #0c8a4a
}

.ds-mobilebar .mb-apply {
  background: var(--red);
  color: #fff
}

@media(max-width:860px) {
  .ds-mobilebar {
    display: grid
  }

  body {
    padding-bottom: 0 !important
  }

  .campus-daly>div {
    grid-template-columns: 50px 1fr !important;
  }

  .gender-dob-fields {
    grid-template-columns: 1fr !important;
  }

  .achievements-list .reveal {
    display: grid !important;
    grid-template-columns: 25px 1fr !important;
    gap: 6px !important;
    margin-bottom: 24px !important;
    position: relative !important;
    padding: 0px !important;
  }

  .achievements-list .design-line {
    left: 12px !important;
  }

  .personal-items-section .grid {
    grid-template-columns: 1fr !important;
  }

  .rating-section {
    padding: 48px 0px 28px !important;
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important
  }

  .ds-reveal,
  .ds-stagger>* {
    opacity: 1 !important;
    transform: none !important
  }
}

.appcard-section {
  background: var(--b2);
}

.hb-appcard-wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.hb-appcard {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 36px;
  background: linear-gradient(135deg, #071427, #0B2240 60%, #10306a);
  border-radius: 28px;
  padding: 46px 48px;
  box-shadow: 0 30px 70px rgba(7, 20, 39, .28)
}

.hb-appcard::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -90px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(200, 155, 44, .22), transparent 65%);
  filter: blur(30px)
}

.hb-appcard-txt {
  flex: 1;
  position: relative;
  z-index: 1
}

.hb-appcard-eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hb-goldlt);
  font-weight: 700;
  margin-bottom: 12px
}

.hb-appcard-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.18;
  color: #fff;
  margin: 0 0 12px
}

.hb-appcard-sub {
  color: #aebed2;
  font-size: .95rem;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 540px
}

.hb-appcard-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.hb-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 14px;
  background: #fff;
  color: #071427;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  transition: transform .3s, box-shadow .3s
}

.hb-store svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0
}

.hb-store:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .3)
}

.hb-store.alt {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .4)
}

.hb-appcard-art {
  font-size: 6rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .4))
}

.p-80 {
  padding: 80px 28px !important;
}

.cadet-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px dashed rgba(200, 155, 44, 0.2);
}

.cadet-img img {
  width: 100%;
  height: 100%;
}

@media(max-width:767px) {
  .apply-page-schedule .reveal-left {
    text-align: left !important;
  }

  .center {
    text-align: left;
  }

  .p-80 {
    padding: 50px 12px !important;
  }

  .hb-appcard {
    flex-direction: column;
    text-align: center;
    padding: 36px 26px
  }

  .hb-appcard-art {
    display: none
  }

  .hb-appcard-btns {
    justify-content: center
  }
}

/* MODERN FORM (override popup to clean light card) */
.popup-card {
  background: #ffffff !important;
  border: 1px solid rgba(7, 20, 39, .08) !important;
  color: #111827 !important;
  box-shadow: 0 34px 90px rgba(7, 20, 39, .28) !important
}

.popup-title {
  color: #071427 !important
}

.popup-title em {
  color: var(--hb-red) !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  font-style: italic
}

.popup-sub {
  color: #5a6b7e !important
}

.popup-eyebrow {
  color: var(--hb-blue) !important;
  background: rgba(31, 78, 168, .08) !important
}

.popup-eyebrow-dot {
  background: var(--hb-blue) !important
}

.popup-card input,
.popup-card select,
.popup-card select#p-dob-year,
.popup-card select#p-dob-month,
.popup-card select#p-dob-day {
  background: #F7F9FC !important;
  border: 1.5px solid #E3E8EF !important;
  color: #111827 !important
}

.popup-card input::placeholder {
  color: #9aa6b4 !important
}

.popup-card input:focus,
.popup-card select:focus {
  border-color: var(--hb-blue) !important;
  box-shadow: 0 0 0 4px rgba(31, 78, 168, .13) !important
}

.popup-card option {
  background: #fff;
  color: #111827
}

.popup-btn {
  background: linear-gradient(135deg, #B11217, #d8262c) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(177, 18, 23, .3) !important
}

.popup-consent,
.popup-consent span {
  color: #5a6b7e !important
}

.popup-close {
  color: #8a98a8 !important
}

/* Hero with background image overlay (faq, eligibility, testimonials, apply) */
.hero-page:has(.bg-img) {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  padding: 140px 24px 80px;
  overflow: hidden
}

.hero-page .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(248, 244, 236, 0.92), rgba(248, 244, 236, 0.7))
}

.hero-page .bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  filter: saturate(0.5)
}

.hero-page .content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%
}

/* Button */
.btn {
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  transition: all 0.4s;
  border: 1px solid transparent;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-gold {
  background: #c89b2c;
  color: #000;
}

.btn-gold:hover {
  background: #fff;
  color: #c89b2c;
  border-color: #c89b2c;
}

.btn-red {
  background: #640000;
  color: #fff;
}

.btn-red:hover {
  background: #fff;
  color: #640000;
  border-color: #640000;
}

.btn-green {
  background: #25D366;
  color: #fff;
}

.btn-green:hover {
  background: #fff;
  color: #25D366;
  border-color: #25D366;
}

/* Breadcrumb */
.breadcrumb {
  background-color: #640000;
  width: 100%;
  padding: 10px;
  color: #fff;
  margin-top: 65px;
  position: sticky;
  top: 65px;
  z-index: 5;
}

.breadcrumb-container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 0 24px;
  display: flex;
  gap: 5px;
}

.breadcrumb a {
  color: var(--g1);
  transition: color 0.3s;
  font-weight: 700;
}

.breadcrumb a:hover {
  color: #fff;
}


@media(max-width:768px) {
  .breadcrumb a {
    font-size: 12px;
  }

  .breadcrumb-container {
    font-size: 12px;
    padding: 0;
  }

  .career-voyage {
    margin: 0 auto;
  }

  .career-voyage>div {
    flex-direction: column !important;
  }

  .career-voyage-arrow {
    transform: rotate(90deg);
  }

  .setps-section>.reveal {
    margin-bottom: 0px !important;
  }

  .steps-container .reveal {
    padding: 10px 0px !important;
  }

  .box-p-20 {
    padding: 20px !important;
  }

  .achievements-section .gc {
    width: 100%;
  }

  .hero-page:has(.bg-img) {
    min-height: 40vh;
    padding: 120px 16px 60px
  }

  .design-line {
    left: 33px !important;
  }

  .num-circle {
    width: 50px !important;
    height: 50px !important;
  }

  .reveal {
    gap: 12px !important;
  }

  .why-us-section .why-us-icon {
    font-size: 1.4rem !important;
  }

  .about-timeline-container .design-line {
    left: 8px !important;
  }

  .about-timeline-container .reveal {
    padding: 0px !important;
  }

  .how-it-works-section .design-line {
    left: 23px !important;
  }
}

.article-container {
  max-width: 1000px;
  margin: 0 auto;
  color: #1e293b; 
  line-height: 1.7; 
  margin-top: 50px;
  padding: 0px 30px;
  padding-bottom: 50px;
}

.article-header {
  text-align: center;
  margin-bottom: 40px;
}



.article-excerpt {
  font-size: 1.1rem;
  color: #64748b; 
  max-width: 650px;
  margin: 0 auto 24px auto;
}

.article-featured-image {
 width: 100%;
 height: 100%;
 overflow: hidden;
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

.article-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 20px;
}


.article-content {
  font-size: 1.05rem; 
}

.content-subheading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 32px;
  margin-bottom: 16px;
}

.article-content p {
  margin-bottom: 24px;
  color: #334155;
}

.article-quote {
  margin: 40px 0;
  padding-left: 20px;
  border-left: 4px solid #0d9488; 
  font-style: italic;
}

.article-quote p {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .article-container {
    margin-top: 30px;
    padding: 0 20px;
  }


  .article-featured-image {
    height: 350px; 
    border-radius: 16px; 
  }
}

/* 2. MOBILE SCREENS (max-width: 480px) */
@media (max-width: 480px) {
  .article-container {
    margin-top: 20px;
    padding: 0 16px;
  }

  .article-title {
    font-size: 1.65rem; 
    margin-bottom: 12px;
  }

  .article-excerpt {
    font-size: 0.95rem; 
    line-height: 1.5;
  }

  .article-featured-image {
    height: 220px; 
    border-radius: 12px;
    margin-bottom: 24px;
  }

  .content-subheading {
    font-size: 1.4rem;
    margin-top: 24px;
  }

  .article-content {
    font-size: 0.98rem; 
  }

  .article-quote p {
    font-size: 1.1rem;
  }
}