/* ============================================================
   CSS Style Sheet
   ============================================================ */

/* ============================================================
   BASE
   ============================================================ */
body {
    font-size: 16px;
    font-weight: normal;
    line-height: 25px;
    font-family: 'Nunito', sans-serif;
    background-attachment: fixed;
    background-size: 100%;
    /*
    font-family: 'Oswald', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-family: 'SolaimanLipi', sans-serif;
    */
}

a:hover,
a:focus {
    text-decoration: none;
}


/* ============================================================
   HEADER
   ============================================================ */
header {
    position: sticky;
    top: 0;                                     /* ← required for sticky to work */
    z-index: 999;                               /* ← reduced from 999999; 999 is sufficient */
    background-color: #fff;
}

header p {
    margin: 0;
    padding: 0;
}

header .header-logo-name {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 27.2px;
    color: #1A6B6B;
    font-weight: bold;
}

header .header-logo-bangla {
    display: block;
    font-size: 30px;
    font-family: 'SolaimanLipi', sans-serif;
    color: #6d1547;
    font-weight: bold;
}

/* ── Primary nav ──────────────────────────────────────────────────────────────── */
header nav ul {
    margin:     0;
    padding:    0;
    list-style: none;
}

header nav ul li {
    float:    left;
    position: relative;
    z-index:  100;
    margin:   2px 2px 0 0;
}

header nav ul li a {
    display:         block;
    margin:          0;
    padding:         0 15px;
    line-height:     50px;
    font-family:     "Oswald", sans-serif;
    font-size:       18px;
    font-weight:     700;
    color:           var(--color-primary);
    text-decoration: none;
    transition:      color var(--transition-base);
}

header nav ul li:last-child a {
    padding-right: 0;
}

header nav ul li a:hover {
    color: var(--color-green);
}

/* ── Dropdown menu ────────────────────────────────────────────────────────────── */
header nav ul li ul {
    position:         absolute;
    width:            190px;
    left:             0;
    background-color: transparent;
    display:          none;
}

header nav ul li:hover ul {
    top:        100%;
    left:       0;
    display:    inline-block;
    background: var(--color-primary);
    transition: var(--transition-base);
}

header nav ul li ul li {
    float:         none;
    border-bottom: 1px dotted #f5f5f5;
    padding-left:  10px;
}

header nav ul li ul li:last-child {
    border: 0;
}

header nav ul li ul li a {
    padding:     0;
    line-height: 30px;
    font-size:   15px;
    font-weight: 400;
    color:       #fff;
    border:      0 !important;
    transition:  color 0.05s ease;
}

header nav ul li ul li a:hover {
    padding-left:     10px;
    color:            #f5f5f5 !important;
    background:       transparent !important;
    border:           0;
}
/* --- Navbar row (row 3 / last) --- */
header .navbar {
    padding: 0;
    float:   right;
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
}

header .navbar-brand {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 40px;
    float: left;
}

header .navbar-brand img {
    width: 60px;
    margin-right: 20px;
    float: left;
    height: auto;
}

/* --- Primary nav links --- */
header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header nav ul li {
    float: left;
    position: relative;
    z-index: 100;
    margin: 2px 2px 0 0;
}

header nav ul li:hover a {
    color: #6d1547;
    transition: .5s;
}

header nav ul li a {
    margin: 0;
    display: block;
    line-height: 78px;
    padding: 0 14px;
    color: #1A6B6B;
    transition: .5s;
    text-transform: uppercase;
    font-size: 18px;
    text-decoration: none;
}

header nav ul li a:hover {
    text-decoration: none;
    color: #6d1547;
    transition: .5s;
}

/* --- Dropdown menu --- */
header nav ul li ul {
    position: absolute;
    width: 190px;
    left: 0;
    background-color: none;
    display: none;
}

header nav ul li:hover ul {
    left: 0;
    top: 78px;
    display: inline-block;
    transition: .5s;
    background: #6d1547;
}

header nav ul li ul li {
    float: none;
    border-bottom: 1px dotted #f5f5f5;
    padding-left: 10px;
}

header nav ul li ul li:last-child {
    border: 0;
}

header nav ul li ul li a {
    color: #f5f5f5 !important;
    transition: .05s;
    padding: 0;
    line-height: 30px;
    border: 0 !important;
    font-size: 15px;
}

header nav ul li ul li a:hover {
    border: 0;
    padding-left: 10px;
    color: #f5f5f5 !important;
    background: transparent !important;
}


/* ============================================================
   END OF HEADER
   ============================================================ */

/* ══════════════════════════════════════════════════════
   SLIDER
   ══════════════════════════════════════════════════════ */
#main-slider {
  overflow: hidden;
  /*background: #6d1547;*/
}
 
/* ── Carousel item base ── */
#main-slider .carousel-item {
  background: #6d1547;
}
 
/* ══ Inner layout ══════════════════════════════════════ */
.slider-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
  position: relative;
}
 
/* ══ LEFT — content panel ══════════════════════════════ */
.slider-content {
  padding: 52px 48px 44px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: #6d1547;
}
 
/* top white label: LEARN TODAY */
.slider-label {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 0 0 2px;
}
 
/* golden heading: LEAD TOMORROW */
.slider-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  color: #f5c518;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin: 0 0 18px;
}
 
/* description paragraph */
.slider-description {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  max-width: 360px;
  margin-bottom: 28px;
}
 
/* CTA buttons row */
.slider-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
 
.slider-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
 
/* yellow filled button */
.slider-btn-primary {
  background: #f5c518;
  color: #6d1547;
  border: 2px solid #f5c518;
}
.slider-btn-primary:hover {
  background: transparent;
  color: #f5c518;
}
 
/* white outline button */
.slider-btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.7);
}
.slider-btn-outline:hover {
  background: #fff;
  color: #6d1547;
}
 
/* icon circles on buttons */
.btn-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.slider-btn-primary .btn-icon {
  background: rgba(15,35,82,0.2);
}
 
/* ── Feature icons strip ── */
.slider-features {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
 
.slider-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.75);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.74rem;
  line-height: 1.35;
  max-width: 108px;
}
 
/* icon box outline style matching design */
.slider-feature-icon {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
}
 
/* ══ RIGHT — image panel ═══════════════════════════════ */
.slider-image-panel {
  position: relative;
  overflow: hidden;
  background: #c8c8c8;
}
 
/* Diagonal separator between left and right */
.slider-image-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  width: 150px;
  height: 100%;
  background: #6d1547;
  transform: skewX(-15deg);
  z-index: 1;
  transform-origin: top left;
}
 
.slider-img-wrap {
  width: 100%;
  height: 100%;
}
 
.slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
 
/* ── Hexagon badge bottom right ── */
.slider-badge {
  position: absolute;
  bottom: -50px;
  right: 28px;
  z-index: 3;
  width: 170px;
  height: 200px;
  background: #f5c518;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #6d1547;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
  padding: 24px 14px;
}
 
/* ══ Indicators ════════════════════════════════════════ */
#main-slider .carousel-indicators {
  bottom: 14px;
  left: 0;
  width: 50%;
  margin: 0;
  padding-left: 60px;
  justify-content: flex-start;
}
 
#main-slider .carousel-indicators button {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  border: none;
  background: rgba(255,255,255,0.35);
  transition: background 0.3s, width 0.3s;
  margin: 0 3px;
}
#main-slider .carousel-indicators button.active {
  background: #f5c518;
  width: 48px;
}
 
/* ══ Controls ══════════════════════════════════════════ */
#main-slider .carousel-control-prev,
#main-slider .carousel-control-next {
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s, background 0.3s;
}
#main-slider:hover .carousel-control-prev,
#main-slider:hover .carousel-control-next { opacity: 1; }
#main-slider .carousel-control-prev:hover,
#main-slider .carousel-control-next:hover { background: rgba(245,197,24,0.3); }
#main-slider .carousel-control-prev { left: 14px; }
#main-slider .carousel-control-next { right: 14px; }
#main-slider .carousel-control-prev-icon,
#main-slider .carousel-control-next-icon { width: 18px; height: 18px; }
 
/* ══ Responsive ════════════════════════════════════════ */
@media (max-width: 991px) {
  .slider-content  { padding: 40px 32px 32px 36px; }
  .slider-label    { font-size: 1.5rem; }
  .slider-heading  { font-size: 2rem; }
  .slider-badge    { width: 92px; height: 92px; font-size: 0.6rem; }
}
 
@media (max-width: 767px) {
  .slider-inner { grid-template-columns: 1fr; min-height: auto; }
  .slider-content {
    padding: 36px 24px 28px;
    order: 1;
  }
  .slider-image-panel {
    height: 230px;
    order: 2;
  }
  .slider-image-panel::before { display: none; }
  .slider-label   { font-size: 1.2rem; }
  .slider-heading { font-size: 1.6rem; }
  .slider-badge   { width: 76px; height: 76px; font-size: 0.55rem; bottom: 12px; right: 12px; }
  #main-slider .carousel-indicators { padding-left: 24px; }
}


/* ============================================================
   ABOUT SECTION 
   Design: warm dusk palette, editorial type treatment,
   signature "polaroid tilt" image card with ink shadow
   ============================================================ */
 
/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --about-bg:           #F7F4EF;        /* warm off-white */
  --about-sand:         #E8DECE;        /* muted sand stripe */
  --about-ink:          #1C1917;        /* near-black text */
  --about-muted:        #6B6460;        /* secondary text */
  --about-accent:       #6d1547;        /* burnt sienna CTA */
  --about-accent-hover: #9C3209;
  --about-gold:         #D4A84B;        /* warm gold rule */
  --about-white:        #FFFFFF;
 
  --about-radius:       4px;
  --about-transition:   0.3s ease;
  --about-font-display: 'Playfair Display', Georgia, serif;
  --about-font-body:    'Inter', 'Helvetica Neue', sans-serif;
}
 
/* ── Section Shell ─────────────────────────────────────── */
#about {
  position: relative;
  padding: 40px 0 70px;
  overflow: hidden;
}
 
/* Subtle diagonal sand stripe — background texture, not noise */
#about::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 45%,
    var(--about-sand) 45%,
    var(--about-sand) 55%,
    transparent 55%
  );
  opacity: 0.35;
  pointer-events: none;
}
 
/* ── Image Column ──────────────────────────────────────── */
.about-img-type {
  position: relative;
  display: inline-block;
 
  /* Signature element: polaroid-style tilt card */
  background: var(--about-white);
  padding: 12px 12px 40px;
  border-radius: var(--about-radius);
  transform: rotate(-2.5deg);
  box-shadow:
    0 4px 16px rgba(28, 25, 23, 0.12),
    0 1px  4px rgba(28, 25, 23, 0.08),
    6px 8px 0   rgba(28, 25, 23, 0.06);  /* ink offset shadow */
  transition: transform var(--about-transition),
              box-shadow var(--about-transition);
  will-change: transform;
}
 
.about-img-type:hover {
  transform: rotate(-0.5deg) translateY(-4px);
  box-shadow:
    0 12px 32px rgba(28, 25, 23, 0.16),
    0  2px  6px rgba(28, 25, 23, 0.08),
    6px 10px 0  rgba(28, 25, 23, 0.06);
}
 
/* Thin gold rule at bottom of polaroid (like a caption line) */
.about-img-type::after {
  content: '';
  position: absolute;
  bottom: 14px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--about-gold);
  opacity: 0.5;
}
 
.about-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: 2px;
}
 
/* ── Content Column ────────────────────────────────────── */
.page-content {
  padding-left: 24px;
}
 
/* Eyebrow label */
.page-content::before {
  content: 'About Us';
  display: block;
  font-family: var(--about-font-body);
  font-size: 16px;       /* 11px */
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--about-accent);
  margin-bottom: 14px;
}
 
/* Heading */
.page-content h2 {
  font-family: var(--about-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.18;
  color: var(--about-ink);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
 
/* Gold underline beneath first line of heading */
.page-content h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--about-gold);
  margin-top: 14px;
  border-radius: 2px;
}
 
/* Body text */
.page-content .content {
  font-family: var(--about-font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--about-muted);
  margin-bottom: 28px;
    text-align: justify;
}
 
/* ── CTA Button ─────────────────────────────────────────── */
.page-content .btn-outline-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
 
  font-family: var(--about-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--about-accent);
 
  padding: 11px 24px;
  border: 1.5px solid var(--about-accent);
  border-radius: var(--about-radius);
  background: transparent;
 
  transition:
    background-color var(--about-transition),
    color            var(--about-transition),
    border-color     var(--about-transition),
    transform        var(--about-transition);
}
 
.page-content .btn-outline-primary:hover,
.page-content .btn-outline-primary:focus-visible {
  background-color: var(--about-accent);
  border-color:     var(--about-accent);
  color:            var(--about-white);
  transform:        translateX(3px);
  outline:          none;
}
 
.page-content .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(193, 68, 14, 0.28);
}
 
/* ── Row vertical alignment ────────────────────────────── */
#about .row {
  align-items: center;
}
 
/* ── Scroll-in animation ───────────────────────────────── */
#about .col-12 {
  opacity: 0;
  transform: translateY(24px);
  animation: aboutFadeUp 0.65s ease forwards;
}
 
#about .col-12:nth-child(1) { animation-delay: 0.1s; }
#about .col-12:nth-child(2) { animation-delay: 0.25s; }
 
@keyframes aboutFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #about .col-12 {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .about-img-type,
  .about-img-type:hover,
  .page-content .btn-outline-primary:hover {
    transition: none;
    transform: rotate(-2.5deg); /* keep tilt, skip motion */
  }
}
 
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #about {
    padding: 64px 0 72px;
  }
 
  .about-img-type {
    transform: rotate(-1.5deg);
    margin-bottom: 40px;
    max-width: 360px;
  }
 
  .page-content {
    padding-left: 0;
  }
 
  .page-content::before {
    margin-top: 8px;
  }
}
 
@media (max-width: 479.98px) {
  .about-img-type {
    padding: 8px 8px 32px;
  }
 
  .page-content h2 {
    font-size: 1.625rem;
  }
}
/* about section end */

/* ============================================================
   POPULAR PROGRAMS SECTION
   Layout : 3-col grid → 2-col → 1-col
   Palette: matches about section tokens; extends with deep teal
   Signature: left-border accent that grows on hover + icon
              circle that lifts with a colour fill
   ============================================================ */

/* ── Tokens (extend your root if already declared) ─────── */
:root {
  --prog-bg:           #F0EDE8;          /* slightly deeper than about bg */
  --prog-card-bg:      #FFFFFF;
  --prog-ink:          #1C1917;
  --prog-muted:        #6B6460;
  --prog-accent:       #6d1547;          /* burnt sienna — shared with about */
  --prog-accent-hover: #1A6B6B;
  --prog-teal:         #1A6B6B;          /* deep teal — the new colour */
  --prog-teal-light:   #E6F2F2;
  --prog-gold:         #D4A84B;
  --prog-border:       #E2DDD8;
  --prog-radius:       6px;
  --prog-transition:   0.28s ease;
  --prog-font-display: 'Playfair Display', Georgia, serif;
  --prog-font-body:    'Inter', 'Helvetica Neue', sans-serif;
}

/* ── Section Shell ─────────────────────────────────────── */
#popular {
  padding: 60px 0;
  background-color: var(--prog-bg);
}

/* ── Section Header ────────────────────────────────────── */
.popular-header {
  text-align: center;
  margin-bottom: 56px;
}

.popular-eyebrow {
  display: inline-block;
  font-family: var(--prog-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--prog-accent);
  margin-bottom: 10px;
}

.popular-heading {
  font-family: var(--prog-font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--prog-ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Centred gold rule under heading */
.popular-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--prog-gold);
  border-radius: 2px;
  margin: 12px auto 0;
}

.popular-subheading {
  font-family: var(--prog-font-body);
  font-size: 1rem;
  color: var(--prog-muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Grid ──────────────────────────────────────────────── */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
}

/* ── Card ──────────────────────────────────────────────── */
.program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--prog-card-bg);
  border: 1px solid var(--prog-border);
  border-radius: var(--prog-radius);
  padding: 32px 28px 24px;
  overflow: hidden;

  /* Signature: left accent stripe that grows on hover */
  border-left: 3px solid transparent;

  transition:
    border-left-color var(--prog-transition),
    box-shadow        var(--prog-transition),
    transform         var(--prog-transition);

  /* Staggered fade-up via CSS custom property */
  opacity: 0;
  transform: translateY(20px);
  animation: progCardIn 0.5s ease forwards;
  animation-delay: calc(var(--card-index, 0) * 0.08s);
}

.program-card:hover {
  border-left-color: var(--prog-teal);
  box-shadow: 0 8px 28px rgba(28, 25, 23, 0.10);
  transform: translateY(-4px);
}

/* Top-right corner dot — quiet texture */
.program-card::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--prog-teal-light);
  opacity: 0;
  transition: opacity var(--prog-transition);
}

.program-card:hover::after {
  opacity: 1;
}

/* ── Icon ──────────────────────────────────────────────── */
.program-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--prog-teal-light);
  color: var(--prog-teal);
  margin-bottom: 22px;
  flex-shrink: 0;
  transition:
    background-color var(--prog-transition),
    color            var(--prog-transition),
    transform        var(--prog-transition);
}

.program-card:hover .program-card__icon {
  background-color: var(--prog-teal);
  color: #ffffff;
  transform: scale(1.08);
}

/* Dashicons or Font Awesome sizing inside circle */
.program-card__icon .dashicons,
.program-card__icon [class*="fa-"] {
  font-size: 22px;
  width: 22px;
  height: 22px;
  line-height: 1;
}

/* ── Card Body ─────────────────────────────────────────── */
.program-card__body {
  flex: 1;
}

.program-card__title {
  font-family: var(--prog-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--prog-ink);
  margin: 0 0 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color var(--prog-transition);
}

.program-card:hover .program-card__title {
  color: var(--prog-teal);
}

.program-card__excerpt {
  font-family: var(--prog-font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--prog-muted);
  margin: 0;
}

/* ── Card Footer / Button ──────────────────────────────── */
.program-card__footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--prog-border);
}

.program-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--prog-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--prog-accent);
  transition: color var(--prog-transition), gap var(--prog-transition);
}

.program-card__btn:hover,
.program-card__btn:focus-visible {
  color: var(--prog-accent-hover);
  gap: 10px;
  outline: none;
}

.program-card__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(193, 68, 14, 0.25);
  border-radius: 2px;
}

.program-card__arrow {
  transition: transform var(--prog-transition);
}

.program-card__btn:hover .program-card__arrow {
  transform: translateX(3px);
}

/* ── Empty state ───────────────────────────────────────── */
.programs-empty {
  text-align: center;
  font-family: var(--prog-font-body);
  color: var(--prog-muted);
  font-size: 1rem;
  padding: 48px 0;
}

/* ── Animations ────────────────────────────────────────── */
@keyframes progCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .program-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .program-card:hover {
    transform: none;
  }

  .program-card__btn:hover .program-card__arrow,
  .program-card:hover .program-card__icon {
    transform: none;
  }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 575.98px) {
  #popular {
    padding: 64px 0 72px;
  }

  .programs-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .program-card {
    padding: 24px 20px 18px;
  }

  .popular-header {
    margin-bottom: 40px;
  }
}


/* ============================================================
   COUNTER SECTION
   Dark navy background, gold eyebrow, white icon + number
   Matches the uploaded reference image exactly
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ctr-bg:           #6d1547;       /* deep navy */
  --ctr-gold:         #D4A84B;       /* gold eyebrow + accents */
  --ctr-white:        #FFFFFF;
  --ctr-muted:        #A8B4CC;       /* label colour */
  --ctr-divider:      rgba(255, 255, 255, 0.15);
  --ctr-icon-border:  rgba(255, 255, 255, 0.25);
  --ctr-font-display: 'Playfair Display', Georgia, serif;
  --ctr-font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --ctr-transition:   0.3s ease;
}

/* ── Section Shell ─────────────────────────────────────── */
#counter {
  background-color: var(--ctr-bg);
  padding: 52px 0;
}

/* ── Eyebrow ────────────────────────────────────────────── */
.counter-eyebrow {
  font-family: var(--ctr-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ctr-gold);
  text-align: center;
  margin: 0 0 36px;
}

/* ── Grid ──────────────────────────────────────────────── */
.counter-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

/* ── Single Item ───────────────────────────────────────── */
.counter-item {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  padding: 0 32px;
  position: relative;
}

/* First item: no left padding */
.counter-item:first-child {
  padding-left: 0;
}

/* Last item: no right padding */
.counter-item:last-child {
  padding-right: 0;
}

/* ── Divider ────────────────────────────────────────────── */
/* Placed as a pseudo element on the right edge of each item (except last) */
.counter-divider {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 52px;
  background: var(--ctr-divider);
}

/* ── Icon Circle ────────────────────────────────────────── */
.counter-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border: 1.5px solid var(--ctr-icon-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ctr-white);
  transition: border-color var(--ctr-transition),
              background-color var(--ctr-transition),
              transform var(--ctr-transition);
}

.counter-icon i {
  font-size: 24px;
  line-height: 1;
}

.counter-item:hover .counter-icon {
  border-color: var(--ctr-gold);
  background-color: rgba(212, 168, 75, 0.12);
  transform: scale(1.08);
}

/* ── Text Content ───────────────────────────────────────── */
.counter-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.counter-number {
  font-family: var(--ctr-font-body);
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: var(--ctr-white);
  letter-spacing: -0.02em;
  line-height: 1;
}

.counter-suffix {
  font-size: inherit;
  font-weight: inherit;
  color: var(--ctr-gold);
}

.counter-label {
  font-family: var(--ctr-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ctr-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .counter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }

  .counter-item {
    padding: 0 24px;
  }

  /* Hide divider on tablet/mobile — use border-right instead */
  .counter-divider {
    display: none;
  }

  /* Right border on items 1 & 3 (left column) */
  .counter-item:nth-child(odd) {
    border-right: 1px solid var(--ctr-divider);
  }

  /* Bottom border on top row */
  .counter-item:nth-child(-n+2) {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ctr-divider);
  }
}

@media (max-width: 575.98px) {
  #counter {
    padding: 48px 0;
  }

  .counter-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .counter-item {
    padding: 0 0 24px;
    border-right: none !important;
    border-bottom: 1px solid var(--ctr-divider);
  }

  .counter-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .counter-item:nth-child(-n+2) {
    border-bottom: 1px solid var(--ctr-divider);
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .counter-item:hover .counter-icon {
    transform: none;
  }
}


/* ============================================================
   FEEDBACK / TESTIMONIALS SECTION
   Palette : continues the site token system (navy, gold, sienna)
   Layout  : 3-col masonry-feel grid → 2-col → 1-col
   Signature: oversized opening quote mark as a background glyph
              + teal left-border accent on hover (matches programs)
   ============================================================ */

/* ── Tokens (shared with other sections) ───────────────── */
:root {
  --fb-bg:           #FFFFFF;
  --fb-card-bg:      #F7F4EF;        /* warm off-white card */
  --fb-card-hover:   #FFFFFF;
  --fb-navy:         #0D1B3E;
  --fb-ink:          #1C1917;
  --fb-muted:        #6B6460;
  --fb-accent:       #6d1547;        /* burnt sienna */
  --fb-teal:         #1A6B6B;
  --fb-teal-light:   #E6F2F2;
  --fb-gold:         #D4A84B;
  --fb-star-on:      #F5A623;
  --fb-star-off:     #DDD8D3;
  --fb-border:       #E2DDD8;
  --fb-radius:       8px;
  --fb-transition:   0.28s ease;
  --fb-font-display: 'Playfair Display', Georgia, serif;
  --fb-font-body:    'Inter', 'Helvetica Neue', sans-serif;
}

/* ── Section Shell ─────────────────────────────────────── */
#feedback {
  padding: 60px 0;
  background-color: var(--fb-bg);
}

/* ── Section Header ────────────────────────────────────── */
.feedback-header {
  text-align: center;
  margin-bottom: 56px;
}

.feedback-eyebrow {
  display: inline-block;
  font-family: var(--fb-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fb-accent);
  margin-bottom: 10px;
}

.feedback-heading {
  font-family: var(--fb-font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--fb-ink);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.feedback-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--fb-gold);
  border-radius: 2px;
  margin: 12px auto 0;
}

.feedback-subheading {
  font-family: var(--fb-font-body);
  font-size: 1rem;
  color: var(--fb-muted);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Grid ──────────────────────────────────────────────── */
.feedback-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;         /* allow cards to be different heights */
}

/* ── Card ──────────────────────────────────────────────── */
.feedback-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--fb-border);
  border-left: 3px solid var(--fb-border);   /* signature grow-on-hover */
  border-radius: var(--fb-radius);
  padding: 60px 40px;
  overflow: hidden;

  transition:
    border-left-color var(--fb-transition),
    background-color  var(--fb-transition),
    box-shadow        var(--fb-transition),
    transform         var(--fb-transition);

  /* Staggered fade-up */
  opacity: 0;
  transform: translateY(22px);
  animation: fbCardIn 0.5s ease forwards;
  animation-delay: calc(var(--fi, 0) * 0.09s);
}

.feedback-card:hover {
  border-left-color: var(--fb-teal);
  background-color: var(--fb-card-hover);
  box-shadow: 0 10px 32px rgba(28, 25, 23, 0.09);
  transform: translateY(-4px);
}

/* ── Oversized quote glyph (signature background element) ─ */
.feedback-card__quote {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--fb-font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--fb-navy);
  pointer-events: none;
  user-select: none;
  transition: opacity var(--fb-transition);
}

.feedback-card:hover .feedback-card__quote {
  opacity: 0.09;
}

/* ── Stars ──────────────────────────────────────────────── */
.feedback-card__stars {
  display: flex;
  gap: 3px;
}

.star { flex-shrink: 0; }

.star--filled path { fill: var(--fb-star-on); stroke: none; }
.star--empty  path { fill: var(--fb-star-off); stroke: none; }

/* ── Blockquote text ────────────────────────────────────── */
.feedback-card__text {
  font-family: var(--fb-font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--fb-muted);
  margin: 0;
  padding: 0;
  border: none;
  flex: 1;
}

/* ── Author row ─────────────────────────────────────────── */
.feedback-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  margin-top: auto;
  border-top: 1px solid var(--fb-border);
}

/* Avatar image */
.feedback-card__avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--fb-border);
  transition: border-color var(--fb-transition);
}

.feedback-card:hover .feedback-card__avatar {
  border-color: var(--fb-teal);
}

/* Initials fallback */
.feedback-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fb-navy);
  color: #ffffff;
  font-family: var(--fb-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  border: 2px solid transparent;
}

/* Author text */
.feedback-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feedback-card__name {
  font-family: var(--fb-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fb-ink);
  line-height: 1.3;
}

.feedback-card__role {
  font-family: var(--fb-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fb-accent);
  letter-spacing: 0.03em;
}

/* ── Empty state ────────────────────────────────────────── */
.feedback-empty {
  text-align: center;
  font-family: var(--fb-font-body);
  color: var(--fb-muted);
  font-size: 1rem;
  padding: 48px 0;
}

/* ── Animation ──────────────────────────────────────────── */
@keyframes fbCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .feedback-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .feedback-card:hover {
    transform: none;
  }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .feedback-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 575.98px) {
  #feedback {
    padding: 64px 0 72px;
  }

  .feedback-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feedback-card {
    padding: 24px 20px 20px;
  }

  .feedback-header {
    margin-bottom: 40px;
  }

  .feedback-card__quote {
    font-size: 4.5rem;
  }
}



/* ============================================================
   CTA CONTACT BAR
   Matches reference: amber/gold banner, navy button, icon circles
   Sits between sections as a full-width attention strip
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --cta-yellow:        #F5B800;          /* amber banner bg */
  --cta-yellow-dark:   #DCA500;          /* hover tint */
  --cta-navy:          #6d1547;          /* button bg + text */
  --cta-navy-hover:    #1A6B6B;
  --cta-white:         #FFFFFF;
  --cta-ink:           #1C1917;          /* headline text */
  --cta-divider:       rgba(13, 27, 62, 0.20);
  --cta-font-display:  'Playfair Display', Georgia, serif;
  --cta-font-body:     'Inter', 'Helvetica Neue', sans-serif;
  --cta-transition:    0.25s ease;
}

/* ── Section Shell ─────────────────────────────────────── */
#cta-bar {
  background-color: var(--cta-yellow);
  padding: 20px 0;
}

/* ── Inner flex row ─────────────────────────────────────── */
.cta-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ── Left block ─────────────────────────────────────────── */
.cta-bar__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Phone icon in white circle */
.cta-bar__icon {
  width: 52px;
  height: 52px;
  background: var(--cta-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cta-navy);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13, 27, 62, 0.12);
}

.cta-bar__icon i {
  font-size: 20px;
}

.cta-bar__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cta-bar__tagline {
  font-family: var(--cta-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cta-navy);
  opacity: 0.8;
  line-height: 1.3;
}

.cta-bar__headline {
  font-family: var(--cta-font-body);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--cta-navy);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* ── Center: contact items ──────────────────────────────── */
.cta-bar__contacts {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: center;
}

.cta-bar__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cta-navy);
  font-family: var(--cta-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: opacity var(--cta-transition);
}

.cta-bar__contact-item i {
  font-size: 17px;
  opacity: 0.75;
}

.cta-bar__contact-item:hover {
  opacity: 0.75;
}

.cta-bar__contact-item:focus-visible {
  outline: 2px solid var(--cta-navy);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Thin vertical divider between phone and email */
.cta-bar__contact-divider {
  display: block;
  width: 1px;
  height: 28px;
  background: var(--cta-divider);
  flex-shrink: 0;
}

/* ── Right: CTA button ──────────────────────────────────── */
.cta-bar__action {
  flex-shrink: 0;
}

.cta-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--cta-navy);
  color: var(--cta-white);
  font-family: var(--cta-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  transition:
    background-color var(--cta-transition),
    gap              var(--cta-transition),
    transform        var(--cta-transition);
}

.cta-bar__btn:hover {
  background-color: var(--cta-navy-hover);
  gap: 14px;
}

.cta-bar__btn:focus-visible {
  outline: 3px solid var(--cta-navy);
  outline-offset: 3px;
}

.cta-bar__btn svg {
  transition: transform var(--cta-transition);
  flex-shrink: 0;
}

.cta-bar__btn:hover svg {
  transform: translateX(3px);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .cta-bar__contacts {
    gap: 16px;
  }

  .cta-bar__contact-item {
    font-size: 0.875rem;
  }

  .cta-bar__btn {
    padding: 12px 20px;
    font-size: 0.8125rem;
  }
}

@media (max-width: 767.98px) {
  #cta-bar {
    padding: 28px 0;
  }

  .cta-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .cta-bar__contacts {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 14px;
  }

  .cta-bar__action {
    width: 100%;
  }

  .cta-bar__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cta-bar__btn:hover,
  .cta-bar__btn:hover svg {
    transition: none;
    transform: none;
    gap: 10px;
  }
}






/* ============================================================
   SITE FOOTER
   Dark navy background, 4-column grid, gold dividers
   Matches reference image exactly
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ft-bg:           #1A6B6B;          /* deep navy */
  --ft-bottom-bg:    #6d1547;          /* slightly darker for copyright bar */
  --ft-white:        #FFFFFF;
  --ft-muted:        #A8B4CC;          /* body / link text */
  --ft-muted-hover:  #FFFFFF;
  --ft-gold:         #D4A84B;          /* headings + divider */
  --ft-border:       rgba(255,255,255,0.08);
  --ft-social-bg:    rgba(255,255,255,0.10);
  --ft-social-hover: #D4A84B;
  --ft-font-display: 'Playfair Display', Georgia, serif;
  --ft-font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --ft-transition:   0.25s ease;
}

/* ── Footer shell ───────────────────────────────────────── */
#site-footer {
  font-family: var(--ft-font-body);
  background-color: var(--ft-bg);
  color: var(--ft-muted);
}

/* ── Top area ───────────────────────────────────────────── */
.footer-top {
  padding: 64px 0 48px;
}

/* ── 4-column grid ──────────────────────────────────────── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px 48px;
  align-items: start;
}

/* ── Shared col styles ──────────────────────────────────── */
.footer-col__heading {
  font-family: var(--ft-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ft-white);
  margin: 0 0 14px;
}

/* Gold underline divider */
.footer-divider {
  width: 32px;
  height: 2px;
  background: var(--ft-gold);
  border-radius: 2px;
  margin-bottom: 20px;
}

/* ── Col 1: Brand ───────────────────────────────────────── */
.footer-col--brand {
  padding-right: 16px;
  border-right: 1px solid var(--ft-border);
}

.footer-logo-link {
  display: inline-block;
  margin-bottom: 18px;
}

.footer-logo {
  max-width: 160px;
  height: auto;
  display: block;
}

.footer-site-name {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ft-white);
  text-decoration: none;
  margin-bottom: 18px;
}

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ft-muted);
  margin: 0;
  max-width: 26ch;
}

/* ── Nav list (Quick Links + Programs) ──────────────────── */
.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list li a {
  font-size: 0.9rem;
  color: var(--ft-muted);
  text-decoration: none;
  transition: color var(--ft-transition), padding-left var(--ft-transition);
  display: inline-block;
}

.footer-nav-list li a:hover {
  color: var(--ft-white);
  padding-left: 6px;
}

.footer-nav-list li a:focus-visible {
  outline: 2px solid var(--ft-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Col 4: Contact list ────────────────────────────────── */
.footer-contact-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-contact-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ft-muted);
}

/* Icon box */
.footer-contact-list__item i {
  margin-top: 2px;
  font-size: 14px;
  color: var(--ft-gold);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.footer-contact-list__item a {
  color: var(--ft-muted);
  text-decoration: none;
  transition: color var(--ft-transition);
}

.footer-contact-list__item a:hover {
  color: var(--ft-white);
}

/* ── Social icons ───────────────────────────────────────── */
.footer-socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--ft-social-bg);
  color: var(--ft-white);
  font-size: 14px;
  text-decoration: none;
  transition:
    background-color var(--ft-transition),
    color            var(--ft-transition),
    transform        var(--ft-transition);
}

.footer-social-btn:hover {
  background-color: var(--ft-gold);
  color: var(--ft-bg);
  transform: translateY(-2px);
}

.footer-social-btn:focus-visible {
  outline: 2px solid var(--ft-gold);
  outline-offset: 2px;
}

/* ── Notice (no menu assigned) ──────────────────────────── */
.footer-notice {
  font-size: 0.8rem;
  color: var(--ft-muted);
  font-style: italic;
  margin: 0;
}

/* ── Copyright bar ──────────────────────────────────────── */
.footer-bottom {
  background-color: var(--ft-bottom-bg);
  border-top: 1px solid var(--ft-border);
  padding: 16px 0;
}

.footer-copy {
  font-size: 0.8125rem;
  color: var(--ft-muted);
  margin: 0;
  text-align: center;
}

.footer-copy a {
  color: var(--ft-gold);
  text-decoration: none;
  transition: color var(--ft-transition);
}

.footer-copy a:hover {
  color: var(--ft-white);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 40px;
  }

  .footer-col--brand {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--ft-border);
    padding-bottom: 32px;
    grid-column: 1 / -1;  /* spans full width on tablet */
  }

  .footer-tagline {
    max-width: 48ch;
  }
}

@media (max-width: 767.98px) {
  .footer-top {
    padding: 48px 0 36px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-col--brand {
    grid-column: auto;
    border-bottom: 1px solid var(--ft-border);
    padding-bottom: 28px;
  }

  .footer-col {
    border-bottom: 1px solid var(--ft-border);
    padding-bottom: 28px;
  }

  .footer-col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .footer-tagline {
    max-width: 100%;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .footer-social-btn:hover,
  .footer-nav-list li a:hover {
    transition: none;
    transform: none;
    padding-left: 0;
  }
}


/* ── Wrapper ── */
/* ── Section ── */
#exam_result { padding: 60px 0; background: #f5f7fa; }

/* ── Search Box ── */
.result-search-box {
    background: #fff; border-radius: 10px;
    padding: 30px; box-shadow: 0 2px 15px rgba(0,0,0,.08);
    margin-bottom: 30px;
}
.result-search-box h3 {
    margin: 0 0 20px; font-size: 20px; font-weight: 700;
    color: #1a1a2e; border-left: 4px solid #6d1547; padding-left: 12px;
}
.search-fields { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.field-group { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.field-group label { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 5px; }
.field-group input[type="text"] {
    padding: 10px 14px; border: 1.5px solid #dde1e7;
    border-radius: 6px; font-size: 14px; color: #333; outline: none;
    transition: border-color .25s;
}
.field-group input[type="text"]:focus { border-color: #6d1547; }
.btn-group { flex-direction: row !important; gap: 10px; flex: unset !important; }
#searchBtn {
    padding: 10px 24px; background: #6d1547; color: #fff;
    border: none; border-radius: 6px; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: background .2s;
    display: flex; align-items: center; gap: 7px;
}
#searchBtn:hover { background: #0052a3; }
.reset-btn {
    padding: 10px 18px; background: #e74c3c; color: #fff !important;
    border-radius: 6px; font-size: 14px; font-weight: 600;
    text-decoration: none; display: flex; align-items: center;
    gap: 7px; transition: background .2s;
}
.reset-btn:hover { background: #c0392b; }

/* ── Result Count ── */
.result-count { margin-bottom: 12px; font-size: 14px; color: #555; }
.result-count strong { color: #6d1547; }

/* ── Table ── */
.table-responsive { overflow-x: auto; }
.result-table {
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,.08); font-size: 14px;
}
.result-table thead tr { background: #6d1547; color: #fff; }
.result-table thead th { padding: 13px 16px; text-align: left; font-weight: 600; font-size: 13px; }
.result-table tbody tr { border-bottom: 1px solid #eef0f4; transition: background .15s; }
.result-table tbody tr:hover { background: #f0f6ff; }
.result-table tbody tr:last-child { border-bottom: none; }
.result-table tbody td { padding: 12px 16px; color: #444; }

/* ── Badges ── */
.badge { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-pass { background: #e6f9ee; color: #1e7e34; }
.badge-fail { background: #fde8e8; color: #c0392b; }

/* ── View Button ── */
.view-details-btn {
    padding: 7px 14px; background: #17a2b8; color: #fff;
    border: none; border-radius: 5px; font-size: 13px;
    font-weight: 600; cursor: pointer; transition: background .2s;
    display: inline-flex; align-items: center; gap: 6px;
}
.view-details-btn:hover { background: #138496; }

/* ── No Result ── */
.no-result {
    background: #fff8e1; border-left: 4px solid #f0ad4e;
    padding: 16px 20px; border-radius: 6px;
    color: #856404; font-size: 14px;
    display: flex; align-items: center; gap: 10px;
}

/* ══ MODAL OVERLAY ══ */
.result-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.6); z-index: 99999;
    align-items: center; justify-content: center; padding: 16px;
}
.result-modal-overlay.active { display: flex; }

/* ══ MODAL BOX ══ */
.result-modal-box {
    background: #fff; border-radius: 12px;
    width: 100%; max-width: 680px;
    max-height: 90vh; display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    overflow: hidden;
    animation: modalIn .2s ease;
}
@keyframes modalIn {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* Modal Header */
.modal-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: #6d1547; color: #fff;
    flex-shrink: 0;
}
.modal-header-left { display: flex; align-items: center; gap: 10px; }
.modal-header-left i { font-size: 18px; opacity: .85; }
.modal-header h4 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-header-actions { display: flex; gap: 8px; }

.print-btn {
    padding: 7px 16px; background: #fff; color: #6d1547;
    border: none; border-radius: 6px; font-size: 13px;
    font-weight: 700; cursor: pointer; transition: background .2s;
    display: flex; align-items: center; gap: 6px;
}
.print-btn:hover { background: #e8f0ff; }

.modal-close-btn {
    padding: 7px 12px; background: rgba(255,255,255,.18);
    color: #fff; border: none; border-radius: 6px;
    font-size: 15px; cursor: pointer; transition: background .2s;
    display: flex; align-items: center;
}
.modal-close-btn:hover { background: rgba(255,255,255,.32); }

/* Modal Body */
.modal-body { padding: 24px 22px; overflow-y: auto; flex: 1; }

/* ── Section Titles ── */
.detail-section { margin-bottom: 24px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; color: #6d1547;
    border-bottom: 2px solid #e8f0ff;
    padding-bottom: 6px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 7px;
}

/* ── Detail Table inside modal ── */
.detail-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.detail-table tr { border-bottom: 1px solid #f0f4f8; }
.detail-table tr:last-child { border-bottom: none; }
.detail-table td {
    padding: 9px 12px; vertical-align: top;
}
.detail-table td:first-child {
    width: 42%; font-weight: 600; color: #555;
    background: #f8fafd;
}
.detail-table td:last-child { color: #222; }
.detail-table td .badge { font-size: 13px; padding: 4px 16px; }

/* ── Print ── */
@media print {

    /* Hide everything except printWrap */
    body > *:not(#printWrap) { display: none !important; }

    #printWrap {
        display: block !important;
        position: fixed; inset: 0;
        padding: 28px 32px;
        background: #fff;
        font-family: Arial, sans-serif;
        font-size: 13px;
        color: #222;
    }

    /* ── Letterhead ── */
    .print-letterhead {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 10px;
    }
    .print-logo-wrap img.print-logo {
        width: 72px;
        height: 72px;
        object-fit: contain;
        border-radius: 6px;
    }
    .print-org-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .print-site-title {
        font-size: 20px;
        font-weight: 800;
        color: #0066cc !important;
        display: block;
        line-height: 1.2;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-site-bangla {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        display: block;
    }
    .print-org-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 18px;
        font-size: 11px;
        color: #555;
        margin-top: 4px;
    }
    .print-org-meta span {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .print-org-meta i {
        color: #0066cc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Divider ── */
    .print-divider {
        border: none;
        border-top: 2.5px solid #0066cc !important;
        margin: 10px 0 14px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Document Title Bar ── */
    .print-doc-header {
        background: #0066cc !important;
        color: #fff !important;
        padding: 10px 16px;
        border-radius: 5px;
        margin-bottom: 16px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-doc-header h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* ── Detail Sections ── */
    .detail-section { margin-bottom: 16px; }
    .detail-section-title {
        font-size: 11px !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: #0066cc !important;
        border-bottom: 1.5px solid #ccdff5 !important;
        padding-bottom: 5px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .detail-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }
    .detail-table tr { border-bottom: 1px solid #eee; }
    .detail-table td { padding: 7px 10px; vertical-align: top; }
    .detail-table td:first-child {
        width: 40%;
        font-weight: 600;
        color: #555;
        background: #f8fafd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Badges ── */
    .badge { padding: 3px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .badge-pass {
        background: #e6f9ee !important; color: #1e7e34 !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .badge-fail {
        background: #fde8e8 !important; color: #c0392b !important;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }

    /* ── Auto-generated Notice ── */
    .print-notice {
        margin-top: 20px;
        border: 1.5px dashed #f0ad4e !important;
        background: #fff8e1 !important;
        color: #856404 !important;
        padding: 9px 14px;
        border-radius: 5px;
        font-size: 11px;
        font-style: italic;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-notice i {
        color: #f0ad4e !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Footer ── */
    .print-footer {
        position: fixed;
        bottom: 18px; left: 32px; right: 32px;
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        color: #999;
        border-top: 1px solid #ddd;
        padding-top: 6px;
    }

} /* end @media print */

/* ── Responsive ── */
@media (max-width: 576px) {
    .search-fields { flex-direction: column; }
    .result-modal-box { max-height: 95vh; }
    .detail-table td:first-child { width: 48%; }
}


/* ---------- overlay ---------- */
#resultModal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.6) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}
#resultModal.modal-is-open {
    display: flex !important;
}
 
/* ---------- box ---------- */
.result-modal-box {
    background: #ffffff !important;
    border-radius: 10px !important;
    width: 100% !important;
    max-width: 640px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
    position: relative !important;
}
 
/* ---------- header ---------- */
.exam-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}
.exam-modal-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}
.exam-modal-header-left i { color: #4f46e5; font-size: 17px; }
.exam-modal-actions { display: flex; gap: 6px; }
.exam-modal-actions button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
}
.exam-modal-actions button:hover { background: #f3f4f6; }
.exam-modal-close:hover { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; }
 
/* ---------- body ---------- */
.exam-modal-body {
    overflow-y: auto;
    padding: 18px 20px;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
 
/* ---------- card inside body ---------- */
.exam-result-card .org-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.exam-result-card .org-logo {
    width: 56px; height: 56px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.exam-result-card .org-initials {
    width: 56px; height: 56px;
    border-radius: 6px;
    background: #eef2ff;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; font-weight: 700; color: #4f46e5;
    flex-shrink: 0;
}
.exam-result-card .org-name  { font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 2px; }
.exam-result-card .org-bangla{ font-size: 13px; color: #374151; margin: 0 0 2px; }
.exam-result-card .org-meta  { font-size: 11px; color: #6b7280; margin: 0; }
.exam-result-card hr { border: none; border-top: 1px solid #e5e7eb; margin: 10px 0; }
 
/* result strip */
.exam-result-strip {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px; border-radius: 7px; margin-bottom: 12px;
}
.exam-result-strip.badge-pass { background: #f0fdf4; border: 1px solid #86efac; }
.exam-result-strip.badge-fail { background: #fff1f2; border: 1px solid #fca5a5; }
.exam-result-strip .s-label { font-size: 12px; color: #6b7280; font-weight: 500; }
.exam-result-strip .s-value { font-size: 15px; font-weight: 700; }
.exam-result-strip.badge-pass .s-value { color: #15803d; }
.exam-result-strip.badge-fail .s-value { color: #b91c1c; }
 
/* detail table */
.exam-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exam-detail-table tr:not(:last-child) th,
.exam-detail-table tr:not(:last-child) td { border-bottom: 1px solid #f3f4f6; }
.exam-detail-table th {
    text-align: left; padding: 7px 10px;
    color: #6b7280; font-weight: 500; width: 42%;
    background: #f9fafb; vertical-align: top;
}
.exam-detail-table td { padding: 7px 10px; color: #111827; font-weight: 500; }
 
/* card footer */
.exam-card-footer {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 11px; color: #9ca3af; text-align: center;
}
.exam-card-footer a { color: #4f46e5; text-decoration: none; }
 
/* body scroll lock */
body.exam-modal-open { overflow: hidden !important; }



/* breadcrumbs section start */
#breadcrumbs { background-color: #6d1547; color: #fff; text-transform: uppercase; font-weight: bold; font-size:12px; }
#breadcrumbs ul { margin:0; padding: 0; }
#breadcrumbs ul li { list-style: none; display: inline; margin-right: 5px; }
#breadcrumbs ul li.separator { color:#ccc; }
#breadcrumbs ul li i { padding-right: 8px; }
#breadcrumbs ul li a { line-height: 35px; color:#f5f5f5; }
#breadcrumbs ul li a:hover { color:#D4A84B; }
/* breadcrumbs section end */

/* page navigation start here */
.wp-pagenavi {text-align: right; }
.wp-pagenavi span.current { font-weight: normal; color:#fff; border-color:#6d1547; background-color: #6d1547; }
.wp-pagenavi span { border:1px solid #6d1547; color: #6d1547; }
.wp-pagenavi span:first-child { display:none; }
.wp-pagenavi > a  {float:none; margin:0 2px; padding:3px 5px; line-height: 25px; background-color:#fff !important; border:1px solid #6d1547 !important; transition: .2s; color: #6d1547 !important;  }
.wp-pagenavi > a:hover, #archive .wp-pagenavi span.current { color: #fff !important; background-color: #6d1547 !important; border: 1px solid #6d1547; transition: .2s; }
.wpcf7 { margin-top: 25px; }
/* page navigation end here */

/* catPage section start */
#catPage { padding:20px 0; }
#catPage a { color: #6d1547; transition: .3s; }
#catPage a:hover { color: #E71C23; transition: .3s; }
#catPage h3 { font-size: 14px; font-weight: bold; text-transform: uppercase; }
#catPage h4 { font-size: 12px; background: #6d1547; padding-left: 15px; color: #fff; line-height: 30px; margin: 15px 0 0; text-transform: uppercase; font-weight: bold; }
#catPage p a { color: #111; transition: .3s; }
#catPage img { width: 100%; height: auto; transition: .7s; }
#catPage form { display: inline-block; width: 100%; } 
#catPage form input[type=text] { border: 1px solid #6d1547; padding: 2px 6px; color: #111; margin: 0; border-right: 0; background-color: rgba(255,255,255,.2); float: left; width:86%; } 
#catPage form input[type=submit] { border: 1px solid #6d1547; font-family: FontAwesome; background-color: #6d1547; color: #f5f5f5; padding: 2px 10px; font-size: 19px; cursor: pointer; float: left; }
#catPage ul { margin: 0 0 15px; border: 1px solid #6d1547; padding: 0; } 
#catPage ul li { list-style: none; border-bottom: 1px dotted #6d1547; padding: 5px 15px; display: block; margin: 0; } 
#catPage ul li:last-child {  border: 0; } 
#catPage ul li a { color: #111; transition: .5s; } 
#catPage ul li a:hover { color: #999; transition: .5s; }
#catPage ul > a { color: #6d1547; transition: .5s; margin: 5px 10px; display: block; text-align: right; }
#catPage > div > div > div > div > div > div:first-child { width:100%; height: 190px; overflow:hidden; }
#catPage > div > div > div > div > div { margin-bottom: 20px; }
/* catPage section end */

/* archive section start */
#archive { padding:35px 0; background: #fff; }
#archive a { color:#6d1547; transition: .5s; text-decoration: none; }
#archive a:hover { color: #1A6B6B; transition: .5s; }
#archive h3 { font-family: 'Ubuntu', sans-serif; font-size: 25px; font-weight: bold; margin-bottom: 20px; margin-top: 15px; }
#archive h4 { font-size: 12px; background: #6d1547; padding-left: 15px; color: #fff; line-height: 30px; margin: 15px 0 0; text-transform: uppercase; font-weight: bold; }
#archive img { width: 100%; height: auto; transition: .7s; border-radius: 15px; }
.archive-item__actions .btn-primary { margin-top: 15px; background: #6d1547; color: #ffffff !important; border: 1px solid #6d1547; }
.archive-item__excerpt { text-align: justify; }
/* archive section end */


/* singlePage section start*/
#singlePage { padding:50px 0; text-align: justify; }
#singlePage a { color: #6d1547; transition: .5s; }
#singlePage a:hover { color: #E71C23; transition: .5s; }
#singlePage h2 { font-size: 30px; color:#6d1547; font-weight: bold; }
#singlePage h2 small { display: block; font-weight: normal; font-style: italic; font-size: 18px; }
#singlePage img { width: 50%; height: auto; float: left; position: relative; margin: 0 25px 25px 0; }
#singlePage > div > div > div table { text-align: left; }
/* singlePage section end */


/* ── Details Page ── */
#detailsPage { padding: 60px 0; background: #f5f7fa; }

/* ── Thumbnail ── */
.details-thumbnail {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    margin-bottom: 24px;
    position: sticky;
    top: 20px;
}
.details-thumbnail img { width: 100%; height: auto; display: block; }

/* ── Content Box ── */
.details-content {
    background: #fff;
    border-radius: 10px;
    padding: 32px 28px;
    box-shadow: 0 2px 15px rgba(0,0,0,.07);
}

/* ── Title ── */
.details-title {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 16px;
    line-height: 1.3;
}

/* ── Meta ── */
.details-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
    color: #777;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef0f4;
}
.details-meta span { display: flex; align-items: center; gap: 6px; }
.details-meta i { color: #6d1547; }

/* ── Body Content ── */
.details-body {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 24px;
}
.details-body p { margin-bottom: 14px; }
.details-body img { max-width: 100%; border-radius: 6px; }
.details-body a { color: #6d1547; text-decoration: underline; }

/* ── Page Links ── */
.page-links {
    margin: 18px 0;
    font-size: 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.page-links a {
    padding: 4px 12px;
    background: #6d1547;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
}

/* ── Tags ── */
.details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
    padding-top: 16px;
    border-top: 1px solid #eef0f4;
    font-size: 13px;
    color: #777;
}
.details-tags i { color: #6d1547; }
.tag-link {
    padding: 4px 12px;
    background: #e8f0ff;
    color: #6d1547;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.tag-link:hover { background: #6d1547; color: #fff; }

/* ── Navigation ── */
.details-navigation {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid #eef0f4;
}
.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #f0f6ff;
    color: #6d1547;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-btn:hover { background: #6d1547; color: #fff; }
.nav-next { margin-left: auto; }

/* ── 404 Box ── */
.not-found-box {
    text-align: center;
    background: #fff;
    padding: 60px 30px;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,.07);
}
.not-found-icon {
    font-size: 56px;
    color: #e74c3c;
    margin-bottom: 16px;
}
.not-found-box h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
}
.not-found-box p {
    color: #666;
    font-size: 15px;
    margin-bottom: 24px;
}
.back-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #6d1547;
    color: #fff;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.back-home-btn:hover { background: #0052a3; color: #fff; }

/* ── Responsive ── */
@media ( max-width: 768px ) {
    .details-content { padding: 22px 16px; }
    .details-title { font-size: 20px; }
    .nav-btn { max-width: 100%; }
    .details-thumbnail { position: static; }
}


#enrollmentSection { padding: 60px 0; background: #f5f7fa; }

/* ── Card ── */
.enrollment-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.09);
}

/* ── Header ── */
.enrollment-header {
    background: linear-gradient(135deg, #6d1547, #1A6B6B);
    color: #fff;
    text-align: center;
    padding: 36px 24px 28px;
}
.enrollment-header i { font-size: 40px; margin-bottom: 12px; display: block; opacity: .9; }
.enrollment-header h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.enrollment-header p  { margin: 0; font-size: 14px; opacity: .8; }

/* ── Alert ── */
.enrollment-alert {
    margin: 20px 24px 0;
    padding: 14px 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.enrollment-alert.alert-success {
    background: #e6f9ee; color: #1e7e34;
    border-left: 4px solid #28a745;
}
.enrollment-alert.alert-error {
    background: #fde8e8; color: #c0392b;
    border-left: 4px solid #e74c3c;
}

/* ── Form Sections ── */
.form-section {
    padding: 24px 28px;
    border-bottom: 1px solid #f0f4f8;
}
.form-section:last-of-type { border-bottom: none; }
.form-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #6d1547;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-title i { font-size: 14px; }

/* ── Fields ── */
.form-group { margin-bottom: 0; }
.form-label  { font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; display: block; }
.required    { color: #e74c3c; margin-left: 2px; }
.form-control {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid #dde1e7;
    border-radius: 6px; font-size: 14px;
    color: #333; outline: none;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
}
.form-control:focus {
    border-color: #6d1547;
    box-shadow: 0 0 0 3px rgba(0,102,204,.1);
}
.form-control.is-invalid { border-color: #e74c3c; }
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { cursor: pointer; }

/* ── Photo Upload ── */
.photo-upload-wrap {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.photo-preview {
    width: 110px; height: 110px;
    border-radius: 50%; border: 3px dashed #6d1547;
    display: flex; align-items: center;
    justify-content: center; overflow: hidden;
    background: #f0f6ff; cursor: pointer;
    transition: border-color .2s;
}
.photo-preview i { font-size: 28px; color: #6d1547; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload-label {
    padding: 7px 18px; background: #e8f0ff;
    color: #6d1547; border-radius: 6px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; display: inline-flex;
    align-items: center; gap: 6px;
    transition: background .2s;
}
.photo-upload-label:hover { background: #6d1547; color: #fff; }
.photo-input { display: none; }
.photo-upload-wrap small { font-size: 11px; color: #999; }

/* ── Submit ── */
.form-submit-wrap {
    padding: 24px 28px;
    background: #f8fafd;
    border-top: 1px solid #eef0f4;
    text-align: center;
}
.enroll-submit-btn {
    padding: 13px 40px;
    background: linear-gradient(135deg, #6d1547, #1A6B6B);
    color: #fff; border: none;
    border-radius: 8px; font-size: 15px;
    font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center;
    gap: 10px; transition: opacity .2s, transform .15s;
    min-width: 220px; justify-content: center;
}
.enroll-submit-btn:hover   { opacity: .9; transform: translateY(-1px); }
.enroll-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Responsive ── */
@media (max-width: 576px) {
    .form-section { padding: 20px 16px; }
    .form-submit-wrap { padding: 20px 16px; }
    .enrollment-header { padding: 28px 16px 20px; }
}


/* ── Enrollment Form Alert States ──────────────────────── */
.enrollment-alert {
  padding: 14px 18px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 24px;
}
 
.enrollment-alert--success {
  background-color: #E6F4EA;
  color: #1E7B34;
  border: 1px solid #B7E1C3;
}
 
.enrollment-alert--error {
  background-color: #FDECEC;
  color: #C0392B;
  border: 1px solid #F5C6C6;
}
 
/* Spinner for submit button */
.fa-spinner {
  animation: enrollSpin 0.8s linear infinite;
}
 
@keyframes enrollSpin {
  to { transform: rotate(360deg); }
}





/* searchPage section start*/
#searchPage { padding:20px; background: #fff; }
#searchPage a { color: #6d1547; transition: .5s; margin-top: 10px; }
#searchPage a:hover { color: #E71C23; transition: .5s; }
#searchPage h3 { font-size: 22px; }
#searchPage h4 { font-size: 20px; background: #6d1547; padding-left: 15px; color: #fff; line-height: 30px; margin: 0;  }
#searchPage img { height: auto; width: 100%; }
#searchPage small { display: block; }
#searchPage p { margin: 0; }
#searchPage > div > div > div:last-child ul { margin: 0 0 15px; padding: 0; border: 1px solid #6d1547; }
#searchPage > div > div > div:last-child ul li { list-style: none; border-bottom: 1px dotted #6d1547; padding: 5px 10px; }
#searchPage > div > div > div:last-child ul li:last-child { border: 0; }
#searchPage > div > div > div:last-child ul li a { color: #111; transition: .5s; line-height: 26px; } 
#searchPage > div > div > div:last-child ul li a:hover { color: #999; transition: .5s; }
#searchPage > div > div > div:last-child div { margin-bottom: 15px; }
#searchPage form { display: inline-block; } 
#searchPage form input[type=text] { border: 1px solid #6d1547; padding: 2px 10px; color: #111; margin: 0; border-right: 0; background-color: rgba(255,255,255,.2); float: left; } 
#searchPage form input[type=submit] { border: 1px solid #6d1547; font-family: FontAwesome; background-color: #6d1547; color: #f5f5f5; padding: 2px 10px; font-size: 19px; cursor: pointer; float: left; }
/* searchPage section end */

/* searchLose section start*/
#searchLose { padding:120px 0; text-align: center; background: #fff; }
#searchLose h2 { font-size: 175px; line-height: 175px; color: #6d1547; font-family: 'Oswald', sans-serif; }
#searchLose h2 small { display: block; font-size: 60px; line-height: 60px; font-family: 'Nunito', sans-serif; }
#searchLose a { color: #6d1547; text-decoration: underline; transition: .5s; }
#searchLose a:hover { color: #666; text-decoration: none;transition: .5s; }
/* searchLose section end */


/*======================================================================================
                 media query start here
=======================================================================================*/

@media (min-width:320px) and (max-width:480px) {
    header { text-align: center; }
    header ul li a { line-height: 25px; }
    header > div > div > div:nth-child(2) { display: none; }
    header > div > div > div:nth-child(3) { text-align: center; }
    header form { float: none; margin: 10px auto; display: inline-block; }
    #navigation .navbar-brand img { width: 50px; margin-right: 10px; }
    #navigation h1 { font-size: 26px; }
    #navigation h1 small { font-size: 14px; }
    #navigation nav ul li { float: none; }
    #navigation nav ul li ul { display: inline; }
    #navigation nav ul li:hover ul { top: 0; }
    #navigation nav ul li ul { position: relative; width: 100%; }
    
}

@media (min-width:450px) and (max-width:639px) {    
    
}

@media (min-width:640px) and (max-width:768px) {
    
}

@media (min-width:769px) and (max-width:992px) {
   
}

@media (min-width:1100px) and (max-width:1300px) {

}

@media (min-width:1301px) and (max-width:1400px) {

}

@media (min-width:1401px) {
	
}