/* ==========================================================================
   ESC (Europe Study Centre) - Main Stylesheet
   Note: Zero CSS :root variables are used as per explicit requirement.
   All color codes are written directly within specific class selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global Typography & Reset
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1a2238;
  background-color: #f7f9fd;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  transition: all 0.25s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   Common Components & Utilities (Direct Color Declarations)
   -------------------------------------------------------------------------- */
.esc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffc72c;
  color: #0d1e4c;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 50px;
  border: 2px solid #ffc72c;
  box-shadow: 0 4px 14px rgba(255, 199, 44, 0.35);
  cursor: pointer;
  transition: all 0.3s ease;
}

.esc-btn-primary:hover {
  background-color: #e6b01a;
  border-color: #e6b01a;
  color: #06112d;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 199, 44, 0.45);
}

.esc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.esc-btn-secondary:hover {
  background-color: #ffffff;
  color: #102a71;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.esc-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #102a71;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 50px;
  border: 1px solid #102a71;
  box-shadow: 0 4px 12px rgba(16, 42, 113, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}

.esc-btn-dark:hover {
  background-color: #0a1b49;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 42, 113, 0.35);
}

/* --------------------------------------------------------------------------
   Navigation Bar (Header / Nav)
   -------------------------------------------------------------------------- */
.esc-navbar-section {
  background-color: #202d7c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.esc-nav-brand {
  display: inline-flex;
  align-items: center;
}

.esc-nav-logo-img {
  height: 62px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  display: block;
}

.esc-nav-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.esc-nav-brand-title {
  color: #ffffff;
  font-size: 1.28rem;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.esc-nav-brand-subtitle {
  color: #ffffff;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.4px;
  margin-top: 3px;
  display: block;
}

.esc-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.esc-nav-links a {
  color: #ffffff;
  font-size: 1.14rem;
  font-weight: 700;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.esc-nav-links a:hover,
.esc-nav-links a.active {
  color: #ebbe28;
}

.esc-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ebbe28;
  color: #1f276f;
  font-weight: 800;
  font-size: 1.2rem;
  padding: 9px 24px;
  border-radius: 50px;
  border: 1px solid #ebbe28;
  box-shadow: 0 4px 12px rgba(235, 190, 40, 0.25);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.esc-btn-whatsapp:hover {
  background-color: #d9ad1b;
  border-color: #d9ad1b;
  color: #10164e;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(235, 190, 40, 0.35);
}

.esc-nav-cta .esc-btn-primary {
  padding: 8px 22px;
  font-size: 0.88rem;
}

/* --------------------------------------------------------------------------
   Navbar Action Elements (Call, WhatsApp, Phone Display Pill, Divider)
   -------------------------------------------------------------------------- */
.esc-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.esc-nav-divider {
  display: inline-block;
  width: 1px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.28);
  margin: 0 12px 0 6px;
  align-self: center;
  flex-shrink: 0;
}

.esc-btn-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  cursor: pointer;
}

.esc-btn-circle-call {
  background-color: #fecd2a;
  color: #202d7c;
  box-shadow: 0 3px 10px rgba(254, 205, 42, 0.25);
}

.esc-btn-circle-call:hover {
  background-color: #ffd200;
  color: #162060;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(254, 205, 42, 0.4);
}

.esc-btn-circle-wa {
  background-color: #25d366;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25);
}

.esc-btn-circle-wa:hover {
  background-color: #20ba5a;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.esc-btn-phone-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fecd2a;
  color: #202d7c;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.2px;
  padding: 8px 22px;
  border-radius: 50px;
  box-shadow: 0 3px 10px rgba(254, 205, 42, 0.25);
  white-space: nowrap;
  user-select: text;
  cursor: default;
}

@media (min-width: 992px) and (max-width: 1280px) {
  .esc-nav-links {
    gap: 18px;
  }
  .esc-nav-links a {
    font-size: 1.05rem;
  }
  .esc-btn-phone-display {
    font-size: 0.96rem;
    padding: 7px 16px;
  }
  .esc-btn-circle {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }
}

/* Mobile Header & Three-Bar Hamburger Toggler */
.esc-navbar-toggler {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.esc-navbar-toggler:hover,
.esc-navbar-toggler.esc-open {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffd200;
}

.esc-toggler-bar {
  display: block;
  width: 22px;
  height: 2.2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

.esc-navbar-toggler.esc-open .esc-bar-1 {
  transform: translateY(7.2px) rotate(45deg);
  background-color: #ffd200;
}

.esc-navbar-toggler.esc-open .esc-bar-2 {
  opacity: 0;
  transform: translateX(-8px);
}

.esc-navbar-toggler.esc-open .esc-bar-3 {
  transform: translateY(-7.2px) rotate(-45deg);
  background-color: #ffd200;
}

/* Mobile Dropdown Collapse Drawer */
.esc-mobile-nav-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, margin-top 0.28s ease;
  opacity: 0;
  background-color: #1a205d;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0;
}

.esc-mobile-nav-collapse.esc-mobile-open {
  max-height: 440px;
  opacity: 1;
  margin-top: 14px;
  padding: 14px 18px 18px 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.esc-mobile-nav-links {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.esc-mobile-nav-links li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.esc-mobile-nav-links li:last-child {
  border-bottom: none;
}

.esc-mobile-nav-links a {
  display: block;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 700;
  padding: 11px 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.esc-mobile-nav-links a:hover,
.esc-mobile-nav-links a:active {
  color: #ffd200;
  padding-left: 6px;
}

/* --------------------------------------------------------------------------
   Section 1: Hero Banner Section (Unique Class: esc-hero-banner-section)
   -------------------------------------------------------------------------- */
.esc-hero-banner-section {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  padding: 0;
}

/* Background Slider Wrap & Image */
.esc-hero-slider-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.esc-hero-slider-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

.esc-hero-bg-desktop {
  display: block;
}

.esc-hero-bg-mobile {
  display: none;
}

/* Overlay layer */
.esc-hero-slider-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}

/* Content Layer & Alignment */
.esc-hero-content-layer {
  position: relative;
  z-index: 2;
}

.esc-hero-slide-row {
  min-height: 600px;
  padding-top: 55px;
  padding-bottom: 65px;
}

/* Rounded Pill */
.esc-hero-pill-wrap {
  margin-bottom: 22px;
}

.esc-hero-pill {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.7);
  color: #1e2875;
  border: 1.5px solid #23317e;
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(35, 49, 126, 0.08);
}

/* Title matching reference graphic */
.esc-hero-slider-title {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  margin-bottom: 16px;
  line-height: 0.94;
  text-transform: uppercase;
}

.esc-hero-title-free {
  display: block;
  color: #005dd4;
  font-size: 5.8rem;
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -1.5px;
}

.esc-hero-title-navy {
  display: block;
  color: #001643;
  font-size: 5.8rem;
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -1.5px;
}

.esc-hero-title-badge-wrap {
  margin-top: 12px;
  margin-bottom: 8px;
  display: block;
}

.esc-hero-title-badge {
  display: inline-block;
  background-color: #005dd4;
  color: #ffffff;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  padding: 6px 20px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 93, 212, 0.22);
}

.esc-hero-title-bar {
  width: 65px;
  height: 6px;
  background-color: #005dd4;
  margin-top: 18px;
  margin-bottom: 22px;
  border-radius: 2px;
}

/* Duration Stamp & Flight Path */
.esc-hero-duration-badge-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: -25px;
}

.esc-hero-flight-item {
  position: relative;
  width: 170px;
  height: 85px;
}

.esc-hero-flight-svg {
  width: 100%;
  height: 100%;
}

.esc-hero-stamp-badge {
  width: 205px;
  height: 205px;
  filter: drop-shadow(0 6px 18px rgba(0, 93, 212, 0.16));
  transition: transform 0.3s ease;
  user-select: none;
}

.esc-hero-stamp-badge:hover {
  transform: scale(1.05) rotate(-2deg);
}

.esc-stamp-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Paragraph */
.esc-hero-slider-desc {
  font-size: 1.35rem;
  line-height: 1.45;
  color: #1e2875;
  font-weight: 700;
  max-width: 580px;
  margin-bottom: 24px;
}

.esc-hero-btn-desc {
  font-size: 1.5rem;
  line-height: 1.6;
  color: #233177;
  font-weight: 700;
  max-width: 580px;
  margin-bottom: 30px;
}

/* Buttons Row */
.esc-hero-btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* QR Code Image inside btn row */
.esc-hero-qr-img {
  width:110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Button 1: Pathway (Yellow) */
.esc-btn-pathway {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #f1b816;
  color: #162058;
  font-weight: 800;
  font-size: 1.5rem;
  padding: 12px 28px;
  border-radius: 50px;
  border: 1.5px solid #162058;
  box-shadow: 0 4px 14px rgba(241, 184, 22, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
}

.esc-btn-pathway:hover {
  background-color: #dfa811;
  color: #0b1136;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(241, 184, 22, 0.45);
}

/* Button 2: WhatsApp Community Button (WhatsApp Green) */
.esc-btn-whatsapp-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #25D366;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 12px 28px;
  border-radius: 50px;
  border: 1.5px solid #25D366;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.esc-btn-whatsapp-hero i {
  font-size: 1.35rem;
  line-height: 1;
}

.esc-btn-whatsapp-hero:hover {
  background-color: #20ba5a;
  border-color: #20ba5a;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

/* Left Icon with Text */
.esc-hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1e2970;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.esc-hero-trust-badge i {
  color: #f1b816;
  font-size: 1.15rem;
}

/* --------------------------------------------------------------------------
   Bottom Center Carousel Controls (Inner Dot with Outer White Border & Arrows)
   -------------------------------------------------------------------------- */
.esc-hero-bottom-controls {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 10;
}

.esc-carousel-arrow-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.esc-carousel-arrow-btn:hover {
  transform: scale(1.15);
  opacity: 0.9;
}

.esc-carousel-target-indicators {
  display: flex;
  align-items: center;
  gap: 10px;
}

.esc-carousel-target-indicators button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.25s ease;
}

.esc-target-outer-ring {
  width: 22px;
  height: 22px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  transition: all 0.25s ease;
}

.esc-target-inner-dot {
  width: 7px;
  height: 7px;
  background-color: #ffffff;
  border-radius: 50%;
  display: block;
}

.esc-carousel-target-indicators button.active {
  opacity: 1;
}

.esc-carousel-target-indicators button.active .esc-target-outer-ring {
  border-color: #ffffff;
  transform: scale(1.1);
}

.esc-carousel-target-indicators button:not(.active) .esc-target-outer-ring {
  border-color: rgba(255, 255, 255, 0.75);
}

.esc-carousel-target-indicators button:not(.active) .esc-target-inner-dot {
  background-color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Responsive: Hero Banner Section
   ========================================================================== */

/* Small desktop / laptop */
@media (min-width: 993px) and (max-width: 1199px) {
  .esc-hero-slide-row {
    min-height: 540px;
    padding-top: 45px;
    padding-bottom: 55px;
  }
  .esc-hero-title-free,
  .esc-hero-title-navy {
    font-size: 4.4rem;
  }
  .esc-hero-title-badge {
    font-size: 2.6rem;
    padding: 5px 16px 7px;
  }
  .esc-hero-slider-desc {
    font-size: 1.15rem;
  }
  .esc-hero-btn-desc {
    font-size: 1.15rem;
  }
  .esc-btn-pathway {
    font-size: 1.2rem;
    padding: 11px 24px;
  }
  .esc-hero-qr-img {
    width: 90px;
    height: 90px;
  }
  .esc-hero-stamp-badge {
    width: 170px;
    height: 170px;
  }
  .esc-hero-flight-item {
    width: 130px;
    height: 68px;
  }
  .esc-hero-duration-badge-wrap {
    gap: 12px;
    margin-top: 0;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 992px) {
  .esc-hero-slide-row {
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .esc-hero-title-free,
  .esc-hero-title-navy {
    font-size: 3.4rem;
    letter-spacing: -1px;
  }
  .esc-hero-title-badge {
    font-size: 2rem;
    padding: 5px 14px 6px;
  }
  .esc-hero-title-bar {
    margin-top: 14px;
    margin-bottom: 18px;
  }
  .esc-hero-slider-desc {
    font-size: 1.05rem;
    margin-bottom: 18px;
  }
  .esc-hero-btn-desc {
    font-size: 1rem;
    margin-bottom: 0;
  }
  .esc-hero-btn-row {
    gap: 14px;
  }
  .esc-btn-pathway,
  .esc-btn-whatsapp-hero {
    font-size: 1.05rem;
    padding: 10px 22px;
  }
  .esc-hero-qr-img {
    width: 76px;
    height: 76px;
  }
  /* Right visual column drops below content on tablet */
  .esc-hero-slide-row .col-xl-5 {
    justify-content: flex-start !important;
    margin-top: 24px;
  }
  .esc-hero-duration-badge-wrap {
    margin-top: 0;
  }
  .esc-hero-stamp-badge {
    width: 140px;
    height: 140px;
  }
}

/* Large mobile / small tablet */
@media (min-width: 576px) and (max-width: 767px) {
  .esc-hero-bg-desktop {
    display: none;
  }
  .esc-hero-bg-mobile {
    display: block;
  }
  .esc-hero-slider-bg-img.esc-hero-bg-mobile {
    object-position: center center;
  }
  .esc-hero-slide-row {
    min-height: auto;
    padding-top: 32px;
    padding-bottom: 28px;
  }
  .esc-hero-title-free,
  .esc-hero-title-navy {
    font-size: 2.5rem;
    letter-spacing: -0.6px;
  }
  .esc-hero-title-badge {
    font-size: 1.4rem;
    padding: 4px 12px 5px;
  }
  .esc-hero-title-bar {
    width: 50px;
    height: 5px;
    margin-top: 10px;
    margin-bottom: 14px;
  }
  .esc-hero-slider-desc {
    font-size: 0.95rem;
    margin-bottom: 16px;
  }
  .esc-hero-btn-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }
  .esc-btn-pathway,
  .esc-btn-whatsapp-hero {
    font-size: 0.95rem;
    padding: 10px 22px;
    width: 100%;
    justify-content: center;
  }
  .esc-hero-btn-desc {
    font-size: 0.88rem;
    margin-bottom: 8px;
  }
  .esc-hero-qr-img {
    width: 68px;
    height: 68px;
  }
  /* Hide flight path + duration stamp to declutter small screens */
  .esc-hero-flight-item {
    display: none !important;
  }
  .esc-hero-duration-badge-wrap {
    margin-top: 12px;
  }
  .esc-hero-stamp-badge {
    width: 110px;
    height: 110px;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .esc-hero-bg-desktop {
    display: none;
  }
  .esc-hero-bg-mobile {
    display: block;
  }
  .esc-hero-slider-bg-img.esc-hero-bg-mobile {
    object-position: center center;
  }
  .esc-hero-slide-row {
    min-height: auto;
    padding-top: 26px;
    padding-bottom: 24px;
  }
  .esc-hero-title-free,
  .esc-hero-title-navy {
    font-size: 3.5rem;
    letter-spacing: -0.4px;
  }
  .esc-hero-title-badge {
    font-size: 2.05rem;
    padding: 3px 10px 4px;
    border-radius: 3px;
  }
  .esc-hero-title-badge-wrap {
    margin-top: 8px;
    margin-bottom: 4px;
  }
  .esc-hero-title-bar {
    width: 40px;
    height: 4px;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  .esc-hero-slider-desc {
    font-size: 1rem;
    margin-bottom: 25px;
  }
  .esc-hero-btn-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 12px;
  }
  .esc-btn-pathway {
    font-size: 1rem;
    padding: 9px 18px;
    width: 100%;
    justify-content: center;
  }
  
  /* The -50px here pulled a two-button stack back up under the headline.
     With the Enroll button gone there is one button and nothing to pull. */
  .esc-btn-whatsapp-hero {
    font-size: 1rem;
    padding: 9px 18px;
    width: 100%;
    justify-content: center;
  }
  .esc-hero-btn-desc {
    font-size: 0.78rem;
    line-height: 1.4;
    margin-bottom: 6px;
  }
  .esc-hero-qr-img {
    width: 56px;
    height: 56px;
  }
  .esc-hero-flight-item {
    display: none !important;
  }
  .esc-hero-duration-badge-wrap {
    margin-top: 10px;
    gap: 10px;
  }
  .esc-hero-stamp-badge {
    width: 88px;
    height: 88px;
  }
}


/* --------------------------------------------------------------------------
   Section 2: Stats Counter Strip (Unique Class: esc-stats-counter-section)
   -------------------------------------------------------------------------- */
.esc-stats-counter-section {
  background-color: #f7be16;
  padding: 0;
  border-bottom: 2px solid #dfa70e;
  color: #101c54;
}

.esc-stat-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 20px;
}

.esc-stat-card-border {
  border-right: 1.5px solid rgba(16, 28, 84, 0.22);
}

.esc-stat-number {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  color: #101c54;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.esc-stat-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: #121e54;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.25;
}

/* Card 5: QR Code Block */
.esc-stat-qr-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 20px 28px;
}

.esc-stat-qr-text {
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.25;
  color: #101c54;
  letter-spacing: -0.2px;
}

.esc-stat-qr-img-wrap {
  flex-shrink: 0;
}

.esc-stat-qr-img {
  width: 70px;
  height: 70px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  display: block;
}


/* --------------------------------------------------------------------------
   Section 3: Trusted Bridge Section (Unique Class: esc-trusted-bridge-section)
   -------------------------------------------------------------------------- */
.esc-trusted-bridge-section {
  background-color: #f7f9fd;
  padding: 50px 0;
  border-bottom: 1px solid #e9edf5;
}

.esc-trusted-bridge-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f2;
  border-radius: 24px;
  padding: 45px 40px;
  box-shadow: 0 10px 36px rgba(18, 30, 84, 0.04);
  position: relative;
  overflow: hidden;
}

/* Header Small Text with Yellow Line */
.esc-bridge-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.esc-bridge-tag-text {
  color: #121e54;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.esc-bridge-yellow-line {
  width: 34px;
  height: 3px;
  background-color: #f7be16;
  border-radius: 2px;
  display: inline-block;
}

/* Main Title */
.esc-bridge-main-title {
  font-size: 2.35rem;
  font-weight: 850;
  line-height: 1.22;
  color: #121e54;
  margin-bottom: 22px;
  letter-spacing: -0.5px;
}

.esc-bridge-yellow-text {
  color: #f7be16;
  font-weight: 850;
}

/* Narrative Paragraphs */
.esc-bridge-paragraph {
  color: #4a5676;
  font-size: 0.9rem;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 16px;
}

/* Bottom Row: Line + Slogan + Dots */
.esc-bridge-bottom-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.esc-bridge-bottom-line {
  width: 32px;
  height: 3.5px;
  background-color: #f7be16;
  border-radius: 2px;
  display: inline-block;
}

.esc-bridge-bottom-tagline {
  color: #7b88a8;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.esc-bridge-dots-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.esc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.esc-dot-amber {
  background-color: #f7be16;
}

.esc-dot-slate {
  background-color: #9cb0cf;
}

.esc-dot-light {
  background-color: #cbd5e1;
}

/* --------------------------------------------------------------------------
   Three Feature Cards (Middle Column)
   -------------------------------------------------------------------------- */
.esc-bridge-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 3;
}

.esc-feature-badge-card {
  background-color: #ffffff;
  border: 1px solid #edf1f8;
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(18, 30, 84, 0.05);
  transition: all 0.28s ease;
}

.esc-feature-badge-card:hover {
  transform: translateY(-3px);
  border-color: #f7be16;
  box-shadow: 0 14px 34px rgba(18, 30, 84, 0.1);
}

.esc-badge-icon-box {
  width: 58px;
  height: 58px;
  background-color: #f7be16;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #101c54;
  font-size: 1.65rem;
  flex-shrink: 0;
}

.esc-badge-content {
  flex: 1;
  min-width: 0;
}

.esc-badge-title {
  font-size: 1.05rem;
  font-weight: 850;
  color: #101c54;
  margin-bottom: 4px;
  line-height: 1.25;
}

.esc-badge-desc {
  font-size: 0.8rem;
  color: #5c6989;
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}

.esc-badge-arrow-box {
  width: 36px;
  height: 36px;
  background-color: #fcedbf;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #101c54;
  font-size: 0.95rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.esc-feature-badge-card:hover .esc-badge-arrow-box {
  background-color: #f7be16;
  color: #0c153f;
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Right Column Visual: Student Photo with Accents
   -------------------------------------------------------------------------- */
.esc-bridge-visual-wrap {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.esc-bridge-circle-bg {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  background-color: #fed943;
  border-radius: 50%;
  z-index: 1;
}

.esc-bridge-dots-grid {
  position: absolute;
  top: 40px;
  left: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 0.8;
}

.esc-dot-row {
  display: flex;
  gap: 7px;
}

.esc-dot-row span {
  width: 4px;
  height: 4px;
  background-color: #f7be16;
  border-radius: 50%;
  display: inline-block;
}

.esc-flight-trail-svg {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 140px;
  height: 140px;
  z-index: 1;
  pointer-events: none;
}

.esc-flight-plane-icon {
  position: absolute;
  top: 30px;
  right: 18px;
  z-index: 2;
  color: #f7be16;
  font-size: 1.9rem;
  transform: rotate(20deg);
}

.esc-vertical-dot-strip {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
  opacity: 0.7;
}

.esc-vertical-dot-strip span {
  width: 4px;
  height: 4px;
  background-color: #f7be16;
  border-radius: 50%;
  display: block;
}

.esc-bridge-student-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 350px;
  max-height: 500px;
  object-fit: contain;
  display: block;
  margin-top: auto;
  filter: drop-shadow(0 12px 24px rgba(18, 30, 84, 0.12));
}


/* --------------------------------------------------------------------------
   Section 4: Four Countries. One Journey (Unique Class: esc-four-countries-section)
   Note: Zero CSS :root variables used. Direct hex color declarations only.
   -------------------------------------------------------------------------- */
.esc-four-countries-section {
  background-color: #f7f9fd;
  padding: 40px 0 50px 0;
}

.esc-four-countries-wrapper {
  background-color: #1a3399;
  border-radius: 28px;
  padding: 48px 44px 44px 44px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(18, 34, 110, 0.16);
}

/* Header Tag with Small Text & Yellow Line */
.esc-countries-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.esc-countries-tag-text {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.esc-countries-yellow-line {
  width: 38px;
  height: 3.5px;
  background-color: #f7be16;
  border-radius: 2px;
  display: inline-block;
}

/* Main Heading */
.esc-countries-main-title {
  font-size: 4rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.esc-countries-yellow-text {
  color: #f7be16;
  font-weight: 850;
}

/* Paragraph */
.esc-countries-subtext {
  color: #e2e8f8;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 34px;
  max-width: 800px;
}

/* Upcoming FREE Internships Cards */
.esc-intern-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 13px 13px 18px 13px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.esc-intern-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

.esc-intern-card-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background-color: #e8eef8;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.esc-intern-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.esc-intern-card:hover .esc-intern-card-img {
  transform: scale(1.05);
}

.esc-intern-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 4px;
}

.esc-intern-card-title {
  font-size: 2rem;
  font-weight: 800;
  color: #0d1e4c;
  line-height: 1.25;
  margin-bottom: 10px;
  min-height: 2.6em;
  letter-spacing: -0.2px;
}

.esc-intern-card-location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  min-height: 2.6em;
}

.esc-intern-location-icon {
  color: #1a56db;
  font-size: 1.05rem;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 1px;
}

.esc-intern-location-text {
  font-size: 1.5rem;
  font-weight: 500;
  color: #556987;
  line-height: 1.35;
}

.esc-intern-card-btn {
  margin-top: auto;
  width: 100%;
  background-color: #ffc72c;
  color: #08153e;
  font-size: 1.5rem;
  font-weight: 800;
  border-radius: 50px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 199, 44, 0.32);
  transition: all 0.25s ease;
  cursor: pointer;
}

.esc-intern-card-btn:hover {
  background-color: #f2b918;
  color: #06112d;
  box-shadow: 0 6px 18px rgba(255, 199, 44, 0.5);
  transform: translateY(-1px);
}

.esc-intern-card-btn i {
  font-size: 1.05rem;
  transition: transform 0.25s ease;
  display: inline-block;
}

.esc-intern-card-btn:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVE: Section 4 - Four Countries. One Journey (esc-four-countries-section)
   ========================================================================== */

/* ---- Large Tablets / Small Laptops (993px - 1199px) ---- */
@media (min-width: 993px) and (max-width: 1199px) {
    .esc-four-countries-section {
        padding: 34px 0 44px 0;
    }

    .esc-four-countries-wrapper {
        padding: 42px 34px 38px 34px;
        border-radius: 24px;
    }

    .esc-countries-main-title {
        font-size: 3.1rem;
    }

    .esc-countries-subtext {
        font-size: 1.5rem;
        margin-bottom: 28px;
        max-width: 680px;
    }

    .esc-intern-card {
        padding: 12px 12px 16px 12px;
        border-radius: 18px;
    }

    .esc-intern-card-img-wrap {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .esc-intern-card-title {
        font-size: 1.4rem;
        min-height: 2.5em;
        margin-bottom: 8px;
    }

    .esc-intern-card-location {
        margin-bottom: 14px;
        min-height: 2.4em;
    }

    .esc-intern-location-text {
        font-size: 1.1rem;
    }

    .esc-intern-location-icon {
        font-size: 0.95rem;
    }

    .esc-intern-card-btn {
        font-size: 1.1rem;
        padding: 9px 16px;
    }
}

/* ---- Tablets (768px - 992px) ---- */
@media (min-width: 768px) and (max-width: 992px) {
    .esc-four-countries-section {
        padding: 28px 0 36px 0;
    }

    .esc-four-countries-wrapper {
        padding: 32px 24px;
        border-radius: 20px;
    }

    .esc-countries-main-title {
        font-size: 2.3rem;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .esc-countries-subtext {
        font-size: 1.15rem;
        margin-bottom: 24px;
        max-width: 100%;
    }

    .row.g-4.mt-1 {
        --bs-gutter-y: 1.4rem;
    }

    .esc-intern-card {
        padding: 12px 12px 16px 12px;
        border-radius: 16px;
    }

    .esc-intern-card-img-wrap {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .esc-intern-card-title {
        font-size: 1.15rem;
        min-height: auto;
        margin-bottom: 8px;
        -webkit-line-clamp: 2;
    }

    .esc-intern-card-location {
        min-height: auto;
        margin-bottom: 14px;
    }

    .esc-intern-location-text {
        font-size: 0.95rem;
    }

    .esc-intern-location-icon {
        font-size: 0.9rem;
    }

    .esc-intern-card-btn {
        font-size: 0.95rem;
        padding: 9px 16px;
        gap: 8px;
    }

    .esc-intern-card-btn i {
        font-size: 0.9rem;
    }
}

/* ---- Mobile Landscape / Large Phones (576px - 767px) ---- */
@media (min-width: 576px) and (max-width: 767px) {
    .esc-four-countries-section {
        padding: 22px 0 30px 0;
    }

    .esc-four-countries-wrapper {
        padding: 26px 18px;
        border-radius: 18px;
    }

    .esc-countries-main-title {
        font-size: 1.9rem;
        line-height: 1.22;
        margin-bottom: 10px;
    }

    .esc-countries-subtext {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .row.g-4.mt-1 {
        --bs-gutter-y: 1.1rem;
    }

    .esc-intern-card {
        padding: 10px 10px 14px 10px;
        border-radius: 14px;
    }

    .esc-intern-card-img-wrap {
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .esc-intern-card-body {
        padding: 0 2px;
    }

    .esc-intern-card-title {
        font-size: 1.05rem;
        min-height: auto;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .esc-intern-card-location {
        min-height: auto;
        margin-bottom: 12px;
        gap: 6px;
    }

    .esc-intern-location-text {
        font-size: 0.88rem;
    }

    .esc-intern-location-icon {
        font-size: 0.85rem;
    }

    .esc-intern-card-btn {
        font-size: 0.88rem;
        padding: 9px 14px;
        gap: 7px;
    }

    .esc-intern-card-btn i {
        font-size: 0.85rem;
    }
}

/* ---- Mobile Portrait (max-width: 575px) ---- */
@media (max-width: 575px) {
    .esc-four-countries-section {
        padding: 18px 0 24px 0;
    }

    .esc-four-countries-wrapper {
        padding: 20px 14px;
        border-radius: 16px;
    }

    .esc-countries-main-title {
        font-size: 1.55rem;
        line-height: 1.25;
        margin-bottom: 8px;
        letter-spacing: 0;
    }

    .esc-countries-subtext {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .row.g-4.mt-1 {
        --bs-gutter-y: 0.9rem;
        margin-top: 0 !important;
    }

    .esc-intern-card {
        padding: 9px 9px 13px 9px;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    }

    .esc-intern-card:hover {
        transform: none;
    }

    .esc-intern-card-img-wrap {
        border-radius: 10px;
        margin-bottom: 10px;
        aspect-ratio: 16 / 10;
    }

    .esc-intern-card-body {
        padding: 0 2px;
    }

    .esc-intern-card-title {
        font-size: 0.98rem;
        min-height: auto;
        margin-bottom: 6px;
        line-height: 1.3;
        letter-spacing: 0;
    }

    .esc-intern-card-location {
        min-height: auto;
        margin-bottom: 12px;
        gap: 6px;
    }

    .esc-intern-location-icon {
        font-size: 0.82rem;
        margin-top: 2px;
    }

    .esc-intern-location-text {
        font-size: 0.84rem;
        line-height: 1.3;
    }

    .esc-intern-card-btn {
        font-size: 0.85rem;
        padding: 10px 14px;
        gap: 6px;
        border-radius: 40px;
    }

    .esc-intern-card-btn i {
        font-size: 0.82rem;
    }
}

/* --------------------------------------------------------------------------
   Section 5: Program Essentials & Inclusions (Unique Class: esc-program-inclusions-section)
   Note: Zero CSS :root variables used. Direct hex color declarations only.
   -------------------------------------------------------------------------- */
.esc-program-inclusions-section {
  background-color: #f7f9fd;
  padding: 40px 0 50px 0;
}

.esc-inclusions-card-panel {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 45px 40px;
  box-shadow: 0 10px 36px rgba(18, 30, 84, 0.04);
}

/* Tag: Left side blue line with text */
.esc-inclusions-tag-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.esc-inclusions-blue-line {
  width: 28px;
  height: 3.5px;
  background-color: #1565d8;
  border-radius: 2px;
  display: inline-block;
}

.esc-inclusions-tag-text {
  color: #1565d8;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Heading */
.esc-inclusions-title {
  font-size: 2.45rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.18;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.esc-inclusions-title-blue {
  color: #1565d8;
  font-weight: 850;
}

/* Subtitle / Para */
.esc-inclusions-subtitle {
  color: #52607b;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 36px;
  max-width: 650px;
}

/* Card Box Container */
.esc-inc-box {
  border-radius: 18px;
  padding: 28px 22px 24px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.esc-inc-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(18, 30, 84, 0.06);
}

/* Box Background Themes */
.esc-inc-box-inclusions {
  background-color: #f4f8ff;
  border: 1px solid #dce8fa;
}

.esc-inc-box-exclusions {
  background-color: #fdfbf3;
  border: 1px solid #f6eedb;
}

.esc-inc-box-duration {
  background-color: #f4f8ff;
  border: 1px solid #dce8fa;
}

.esc-inc-box-activities {
  background-color: #f2faf6;
  border: 1px solid #dff2e9;
}

/* Icon Badges */
.esc-inc-icon-wrap {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.esc-icon-blue {
  background-color: #dbe8fd;
  color: #1565d8;
  font-size: 2rem;
}

.esc-icon-yellow {
  background-color: #fcedc9;
  color: #0c1b48;
}

.esc-cross-icon-dark {
  font-size: 1.2rem;
  font-weight: 900;
  color: #0c1b48;
  -webkit-text-stroke: 1px #0c1b48;
}

.esc-icon-green {
  background-color: #d8f3e5;
  color: #1f8a65;
  font-size: 2rem;
}

/* Card Titles */
.esc-inc-card-title {
  font-size: 3rem;
  font-weight: 800;
  color: #0c1b48;
  margin-bottom: 12px;
  line-height: 1.25;
}

/* Inclusions Pricing Elements */
.esc-inc-price-val {
  font-size: 4rem;
  font-weight: 850;
  color: #1565d8;
  line-height: 1.12;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.esc-inc-price-desc {
  font-size: 0.82rem;
  font-weight: 500;
  color: #55627a;
  line-height: 1.45;
}

.esc-inc-divider {
  width: 100%;
  height: 1px;
  background-color: #d5e5fa;
  margin: 18px 0;
}

/* List with Dots */
.esc-inc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.esc-inc-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 500;
  color: #4a5676;
  line-height: 1.42;
}

.esc-dot-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  display: inline-block;
}

.esc-bullet-yellow {
  background-color: #f7be16;
}

.esc-bullet-green {
  background-color: #27ae7c;
}

/* Card 2 Bottom Callout Note */
.esc-inc-bottom-note {
  margin-top: auto;
  padding-top: 22px;
}

.esc-inc-bottom-note-box {
  background-color: #fcf4df;
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.esc-note-book-icon {
  font-size: 1.35rem;
  color: #0c1b48;
  flex-shrink: 0;
}

.esc-note-text {
  font-size: 0.77rem;
  font-style: italic;
  font-weight: 500;
  color: #4a5676;
  line-height: 1.35;
}

/* Duration Elements */
.esc-inc-duration-val {
  font-size: 6rem;
  font-weight: 850;
  color: #1565d8;
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.esc-inc-duration-para {
  font-size: 0.84rem;
  font-weight: 500;
  color: #55627a;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE: Section 5 - Program Essentials & Inclusions (esc-program-inclusions-section)
   ========================================================================== */

/* ---- Large Tablets / Small Laptops (993px - 1199px) ---- */
@media (min-width: 993px) and (max-width: 1199px) {
    .esc-program-inclusions-section {
        padding: 34px 0 44px 0;
    }

    .esc-inclusions-card-panel {
        padding: 38px 32px;
        border-radius: 22px;
    }

    .esc-inclusions-title {
        font-size: 2.15rem;
    }

    .esc-inclusions-subtitle {
        font-size: 0.9rem;
        margin-bottom: 30px;
    }

    .esc-inc-box {
        padding: 24px 20px 20px 20px;
        border-radius: 16px;
    }

    .esc-inc-icon-wrap {
        width: 60px;
        height: 60px;
        margin-bottom: 14px;
    }

    .esc-icon-blue,
    .esc-icon-green {
        font-size: 1.7rem;
    }

    .esc-inc-card-title {
        font-size: 2.3rem;
        margin-bottom: 10px;
    }

    .esc-inc-duration-val {
        font-size: 4.4rem;
        margin-bottom: 8px;
    }

    .esc-inc-duration-para {
        font-size: 0.8rem;
    }

    .esc-inc-list {
        gap: 12px;
    }

    .esc-inc-list li {
        font-size: 1.15rem;
    }

    .esc-inc-price-val {
        font-size: 3.2rem;
    }

    .esc-inc-price-desc {
        font-size: 0.78rem;
    }
}

/* ---- Tablets (768px - 992px) ---- */
@media (min-width: 768px) and (max-width: 992px) {
    .esc-program-inclusions-section {
        padding: 28px 0 36px 0;
    }

    .esc-inclusions-card-panel {
        padding: 30px 22px;
        border-radius: 20px;
    }

    .esc-inclusions-tag-text {
        font-size: 0.85rem;
    }

    .esc-inclusions-title {
        font-size: 1.85rem;
        margin-bottom: 10px;
    }

    .esc-inclusions-subtitle {
        font-size: 0.85rem;
        margin-bottom: 24px;
        max-width: 100%;
    }

    .row.g-4 {
        --bs-gutter-y: 1.2rem;
    }

    .esc-inc-box {
        padding: 22px 18px 18px 18px;
        border-radius: 16px;
    }

    .esc-inc-icon-wrap {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }

    .esc-icon-blue,
    .esc-icon-green {
        font-size: 1.5rem;
    }

    .esc-inc-card-title {
        font-size: 1.7rem;
        margin-bottom: 8px;
    }

    .esc-inc-duration-val {
        font-size: 3.4rem;
        margin-bottom: 6px;
    }

    .esc-inc-duration-para {
        font-size: 0.78rem;
    }

    .esc-inc-list {
        gap: 10px;
    }

    .esc-inc-list li {
        font-size: 0.98rem;
        gap: 8px;
    }

    .esc-dot-bullet {
        width: 7px;
        height: 7px;
        margin-top: 5px;
    }

    .esc-inc-price-val {
        font-size: 2.6rem;
    }

    .esc-inc-price-desc {
        font-size: 0.74rem;
    }

    .esc-inc-divider {
        margin: 14px 0;
    }

    .esc-inc-bottom-note-box {
        padding: 10px 12px;
        gap: 9px;
    }

    .esc-note-book-icon {
        font-size: 1.15rem;
    }

    .esc-note-text {
        font-size: 0.72rem;
    }
}

/* ---- Mobile Landscape / Large Phones (576px - 767px) ---- */
@media (min-width: 576px) and (max-width: 767px) {
    .esc-program-inclusions-section {
        padding: 22px 0 30px 0;
    }

    .esc-inclusions-card-panel {
        padding: 24px 16px;
        border-radius: 18px;
    }

    .esc-inclusions-tag-wrap {
        gap: 10px;
        margin-bottom: 10px;
    }

    .esc-inclusions-blue-line {
        width: 22px;
    }

    .esc-inclusions-tag-text {
        font-size: 0.78rem;
    }

    .esc-inclusions-title {
        font-size: 1.55rem;
        margin-bottom: 8px;
    }

    .esc-inclusions-subtitle {
        font-size: 0.8rem;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .row.g-4 {
        --bs-gutter-y: 1rem;
    }

    .esc-inc-box {
        padding: 20px 16px 16px 16px;
        border-radius: 14px;
    }

    .esc-inc-box:hover {
        transform: none;
    }

    .esc-inc-icon-wrap {
        width: 50px;
        height: 50px;
        margin-bottom: 12px;
    }

    .esc-icon-blue,
    .esc-icon-green {
        font-size: 1.35rem;
    }

    .esc-inc-card-title {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }

    .esc-inc-duration-val {
        font-size: 2.7rem;
        margin-bottom: 6px;
    }

    .esc-inc-duration-para {
        font-size: 0.75rem;
    }

    .esc-inc-list {
        gap: 10px;
    }

    .esc-inc-list li {
        font-size: 0.9rem;
        gap: 8px;
    }

    .esc-dot-bullet {
        width: 7px;
        height: 7px;
        margin-top: 5px;
    }

    .esc-inc-price-val {
        font-size: 2.2rem;
    }

    .esc-inc-price-desc {
        font-size: 0.72rem;
    }

    .esc-inc-divider {
        margin: 12px 0;
    }

    .esc-inc-bottom-note-box {
        padding: 9px 11px;
        gap: 8px;
    }

    .esc-note-book-icon {
        font-size: 1.05rem;
    }

    .esc-note-text {
        font-size: 0.7rem;
    }
}

/* ---- Mobile Portrait (max-width: 575px) ---- */
@media (max-width: 575px) {
    .esc-program-inclusions-section {
        padding: 18px 0 24px 0;
    }

    .esc-inclusions-card-panel {
        padding: 18px 12px;
        border-radius: 16px;
    }

    .esc-inclusions-tag-wrap {
        gap: 8px;
        margin-bottom: 8px;
    }

    .esc-inclusions-blue-line {
        width: 18px;
        height: 3px;
    }

    .esc-inclusions-tag-text {
        font-size: 0.72rem;
    }

    .esc-inclusions-title {
        font-size: 1.32rem;
        line-height: 1.25;
        margin-bottom: 8px;
        letter-spacing: 0;
    }

    .esc-inclusions-subtitle {
        font-size: 0.76rem;
        line-height: 1.5;
        margin-bottom: 16px;
        max-width: 100%;
    }

    .row.g-4 {
        --bs-gutter-y: 0.85rem;
    }

    .esc-inc-box {
        padding: 18px 14px 14px 14px;
        border-radius: 14px;
    }

    .esc-inc-box:hover {
        transform: none;
        box-shadow: none;
    }

    .esc-inc-icon-wrap {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .esc-icon-blue,
    .esc-icon-green {
        font-size: 1.15rem;
    }

    .esc-cross-icon-dark {
        font-size: 1rem;
    }

    .esc-inc-card-title {
        font-size: 1.18rem;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .esc-inc-duration-val {
        font-size: 2.1rem;
        margin-bottom: 6px;
    }

    .esc-inc-duration-para {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    .esc-inc-list {
        gap: 9px;
    }

    .esc-inc-list li {
        font-size: 0.82rem;
        gap: 7px;
        line-height: 1.4;
    }

    .esc-dot-bullet {
        width: 6px;
        height: 6px;
        margin-top: 5px;
    }

    .esc-inc-price-val {
        font-size: 1.85rem;
        margin-bottom: 3px;
    }

    .esc-inc-price-desc {
        font-size: 0.68rem;
    }

    .esc-inc-divider {
        margin: 10px 0;
    }

    .esc-inc-bottom-note {
        padding-top: 16px;
    }

    .esc-inc-bottom-note-box {
        padding: 9px 10px;
        gap: 8px;
        border-radius: 8px;
    }

    .esc-note-book-icon {
        font-size: 0.95rem;
    }

    .esc-note-text {
        font-size: 0.66rem;
        line-height: 1.35;
    }
}

/* --------------------------------------------------------------------------
   Section 6: Learn Explore Grow Section (Unique Class: esc-learn-explore-grow-section)
   Note: Zero CSS :root variables used. Direct hex color declarations only.
   -------------------------------------------------------------------------- */
.esc-learn-explore-grow-section {
  background-color: #f7f9fd;
  padding: 40px 0 50px 0;
}

.esc-leg-wrapper {
  background-color: #1a3399;
  border-radius: 28px;
  padding: 48px 44px 44px 44px;
  position: relative;
  overflow: visible;
  box-shadow: 0 16px 40px rgba(18, 34, 110, 0.16);
}

/* Header Tag with Small Text & Yellow Line */
.esc-leg-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.esc-leg-tag-text {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.esc-leg-yellow-line {
  width: 38px;
  height: 3.5px;
  background-color: #f7be16;
  border-radius: 2px;
  display: inline-block;
}

/* Main Heading */
.esc-leg-title {
  font-size: 4rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.esc-leg-yellow-text {
  color: #f7be16;
  font-weight: 850;
}

/* Paragraph */
.esc-leg-subtitle {
  color: #e2e8f8;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 38px;
  max-width: 1000px;
}

/* Three Cards Grid */
.esc-leg-card {
  background-color: #ffffff;
  border-radius: 18px;
  padding: 30px 24px 22px 24px;
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  overflow: visible;
}

.esc-leg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

/* Top Left Yellow Tag with Icon */
.esc-leg-tab-tag {
  position: absolute;
  top: -14px;
  left: 24px;
  width: 48px;
  height: 52px;
  background-color: #f7be16;
  border-radius: 10px 10px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(247, 190, 22, 0.35);
}

.esc-leg-tab-icon {
  color: #101c54;
  font-size: 1.45rem;
}

/* Top Right Number Watermark */
.esc-leg-card-num {
  position: absolute;
  top: 14px;
  right: 24px;
  font-size: 2.85rem;
  font-weight: 850;
  color: #cbd9f4;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

/* Card Content (Left) */
.esc-leg-card-content {
  position: relative;
  z-index: 2;
  max-width: 66%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.esc-leg-card-title {
  font-size: 2rem;
  font-weight: 850;
  color: #101c54;
  margin-bottom: 8px;
  line-height: 1.25;
}

.esc-leg-card-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: #4a5676;
  line-height: 1.30;
  margin-bottom: 18px;
}

/* Rounded Right Arrow Button */
.esc-leg-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #f7be16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #101c54;
  font-size: 0.85rem;
  font-weight: 900;
  margin-top: auto;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(247, 190, 22, 0.3);
  transition: all 0.22s ease;
}

.esc-leg-arrow-btn:hover {
  background-color: #dfa811;
  transform: translateX(2px);
}

.esc-leg-arrow-btn i {
  -webkit-text-stroke: 1px #101c54;
}

/* Bottom Right Illustration */
.esc-leg-illustration-wrap {
  position: absolute;
  right: 8px;
  bottom: 0;
  height: 115px;
  width: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
}

.esc-leg-illustration-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom right;
  opacity: 0.95;
  display: block;
}

/* ==========================================================================
   RESPONSIVE: Section 6 - Learn Explore Grow (esc-learn-explore-grow-section)
   ========================================================================== */

/* ---- Large Tablets / Small Laptops (993px - 1199px) ---- */
@media (min-width: 993px) and (max-width: 1199px) {
    .esc-learn-explore-grow-section {
        padding: 34px 0 44px 0;
    }

    .esc-leg-wrapper {
        padding: 40px 32px 36px 32px;
        border-radius: 24px;
    }

    .esc-leg-title {
        font-size: 3.1rem;
    }

    .esc-leg-subtitle {
        font-size: 1.5rem;
        margin-bottom: 32px;
        max-width: 800px;
    }

    .esc-leg-card {
        padding: 26px 20px 20px 20px;
        min-height: 320px;
        border-radius: 16px;
    }

    .esc-leg-tab-tag {
        width: 42px;
        height: 46px;
        top: -12px;
        left: 20px;
    }

    .esc-leg-tab-icon {
        font-size: 1.25rem;
    }

    .esc-leg-card-num {
        font-size: 2.3rem;
        top: 12px;
        right: 20px;
    }

    .esc-leg-card-content {
        max-width: 68%;
        margin-top: 20px;
    }

    .esc-leg-card-title {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .esc-leg-card-text {
        font-size: 1.1rem;
        margin-bottom: 14px;
    }

    .esc-leg-illustration-wrap {
        width: 110px;
        height: 90px;
    }
}

/* ---- Tablets (768px - 992px) ---- */
@media (min-width: 768px) and (max-width: 992px) {
    .esc-learn-explore-grow-section {
        padding: 28px 0 36px 0;
    }

    .esc-leg-wrapper {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .esc-leg-title {
        font-size: 2.15rem;
        margin-bottom: 10px;
    }

    .esc-leg-subtitle {
        font-size: 1.1rem;
        margin-bottom: 26px;
        max-width: 100%;
    }

    .row.g-4.mt-1 {
        --bs-gutter-y: 1.3rem;
    }

    .esc-leg-card {
        padding: 24px 18px 18px 18px;
        min-height: 260px;
        border-radius: 16px;
    }

    .esc-leg-tab-tag {
        width: 40px;
        height: 44px;
        top: -12px;
        left: 18px;
        border-radius: 9px 9px 10px 10px;
    }

    .esc-leg-tab-icon {
        font-size: 1.15rem;
    }

    .esc-leg-card-num {
        font-size: 2rem;
        top: 12px;
        right: 18px;
    }

    .esc-leg-card-content {
        max-width: 66%;
        margin-top: 18px;
    }

    .esc-leg-card-title {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }

    .esc-leg-card-text {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .esc-leg-illustration-wrap {
        width: 95px;
        height: 78px;
        right: 6px;
    }
}

/* ---- Mobile Landscape / Large Phones (576px - 767px) ---- */
@media (min-width: 576px) and (max-width: 767px) {
    .esc-learn-explore-grow-section {
        padding: 22px 0 30px 0;
    }

    .esc-leg-wrapper {
        padding: 26px 16px;
        border-radius: 18px;
    }

    .esc-leg-title {
        font-size: 1.75rem;
        margin-bottom: 8px;
    }

    .esc-leg-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 20px;
        max-width: 100%;
    }

    .row.g-4.mt-1 {
        --bs-gutter-y: 1rem;
    }

    .esc-leg-card {
        padding: 22px 16px 16px 16px;
        min-height: auto;
        border-radius: 14px;
    }

    .esc-leg-card:hover {
        transform: none;
    }

    .esc-leg-tab-tag {
        width: 38px;
        height: 42px;
        top: -12px;
        left: 16px;
        border-radius: 8px 8px 10px 10px;
    }

    .esc-leg-tab-icon {
        font-size: 1.05rem;
    }

    .esc-leg-card-num {
        font-size: 1.8rem;
        top: 12px;
        right: 16px;
    }

    .esc-leg-card-content {
        max-width: 62%;
        margin-top: 16px;
    }

    .esc-leg-card-title {
        font-size: 1.15rem;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .esc-leg-card-text {
        font-size: 0.85rem;
        line-height: 1.42;
        margin-bottom: 10px;
    }

    .esc-leg-illustration-wrap {
        width: 80px;
        height: 66px;
        right: 4px;
    }
}

/* ---- Mobile Portrait (max-width: 575px) ---- */
@media (max-width: 575px) {
    .esc-learn-explore-grow-section {
        padding: 18px 0 24px 0;
    }

    .esc-leg-wrapper {
        padding: 20px 12px;
        border-radius: 16px;
    }

    .esc-leg-header-tag {
        gap: 8px;
        margin-bottom: 8px;
    }

    .esc-leg-tag-text {
        font-size: 0.72rem;
    }

    .esc-leg-yellow-line {
        width: 26px;
        height: 3px;
    }

    .esc-leg-title {
        font-size: 1.5rem;
        line-height: 1.25;
        margin-bottom: 8px;
        letter-spacing: 0;
    }

    .esc-leg-subtitle {
        font-size: 0.82rem;
        line-height: 1.5;
        margin-bottom: 16px;
        max-width: 100%;
    }

    .row.g-4.mt-1 {
        --bs-gutter-y: 0.9rem;
        margin-top: 0 !important;
    }

    /* Illustration hidden and card switches to a simple stacked layout for clarity on small phones */
    .esc-leg-card {
        padding: 24px 14px 16px 14px;
        min-height: auto;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    }

    .esc-leg-card:hover {
        transform: none;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    }

    .esc-leg-tab-tag {
        width: 36px;
        height: 40px;
        top: -12px;
        left: 14px;
        border-radius: 8px 8px 10px 10px;
    }

    .esc-leg-tab-icon {
        font-size: 1rem;
    }

    .esc-leg-card-num {
        font-size: 1.5rem;
        top: 10px;
        right: 14px;
    }

    .esc-leg-card-content {
        max-width: 100%;
        margin-top: 14px;
    }

    .esc-leg-card-title {
        font-size: 1.05rem;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .esc-leg-card-text {
        font-size: 0.8rem;
        line-height: 1.45;
        margin-bottom: 8px;
    }

    /* Illustration moves out of absolute overlap and sits below text, right-aligned */
    .esc-leg-illustration-wrap {
        position: static;
        width: 70px;
        height: 60px;
        margin-top: 6px;
        align-self: flex-end;
    }
}

/* --------------------------------------------------------------------------
   Section 7: About Europe Study Centre (Unique Class: esc-about-centre-section)
   -------------------------------------------------------------------------- */
.esc-about-centre-section {
  background-color: #ffffff;
  padding: 50px 0;
  border-bottom: 1px solid #e2e8f0;
}

.esc-about-card-panel {
  background-color: #ffffff;
  border: 1.2px solid #dce4ef;
  border-radius: 20px;
  padding: 42px 46px 28px 46px;
  box-shadow: 0 4px 25px rgba(16, 28, 84, 0.03);
  position: relative;
  overflow: hidden;
}

/* 1. Rounded Pill Outline Badge */
.esc-about-pill {
  display: inline-block;
  border: 1.5px solid #1055c9;
  border-radius: 8px;
  padding: 5px 16px;
  color: #1055c9;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

/* 2. Heading */
.esc-about-title {
  font-size: 3.8rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.12;
  margin-bottom: 0;
  letter-spacing: -0.6px;
}

.esc-about-title-blue {
  color: #0066f5;
}

/* 3. Yellow Line */
.esc-about-yellow-line {
  width: 38px;
  height: 3.5px;
  background-color: #f7be16;
  border-radius: 2px;
  margin: 16px 0 20px 0;
}

/* 4. Descriptive Paragraphs */
.esc-about-para {
  color: #4a5676;
  font-size: 1.2rem;
  line-height: 1.58;
  font-weight: 800;
  margin-bottom: 15px;
  max-width: 535px;
}

/* 5. Gradient Button with Rounded Arrow */
.esc-about-btn-wrap {
  margin-top: 24px;
}

.esc-about-gradient-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #0d58d3 0%, #063a96 100%);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 700;
  padding: 9px 10px 9px 24px;
  border-radius: 50px;
  box-shadow: 0 5px 18px rgba(13, 88, 211, 0.42);
  transition: all 0.25s ease;
  border: none;
}

.esc-about-gradient-btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 88, 211, 0.55);
}

.esc-about-btn-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f7be16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0c1b48;
  font-size: 0.85rem;
  font-weight: 900;
  transition: transform 0.2s ease;
}

.esc-about-btn-arrow i {
  -webkit-text-stroke: 1.2px #0c1b48;
}

.esc-about-gradient-btn:hover .esc-about-btn-arrow {
  transform: translateX(3px);
}

/* 6. Horizontal Line */
.esc-about-h-line {
  border-top: 1px solid #eaedf5;
  margin: 28px 0 22px 0;
  max-width: 535px;
}

/* 7. Bottom Feature Row */
.esc-about-feature-box {
  display: flex;
  align-items: center;
}

.esc-about-globe-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #f7be16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0c1b48;
  font-size: 2rem;
  flex-shrink: 0;
}

.esc-about-v-line {
  width: 1.5px;
  height: 50px;
  background-color: #dbe4f0;
  margin: 0 20px;
  flex-shrink: 0;
}

.esc-about-feature-text {
  display: flex;
  flex-direction: column;
}

.esc-about-feature-sub {
  font-size: 0.92rem;
  color: #505c75;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 2px;
}

.esc-about-feature-val {
  font-size: 2.1rem;
  font-weight: 850;
  color: #0066f5;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

/* Right Column: Visual Collage Image */
.esc-about-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.esc-about-student-img {
  max-width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   RESPONSIVE: Section 7 - About Europe Study Centre (esc-about-centre-section)
   ========================================================================== */

/* ---- Large Tablets / Small Laptops (993px - 1199px) ---- */
@media (min-width: 993px) and (max-width: 1199px) {
    .esc-about-centre-section {
        padding: 42px 0;
    }

    .esc-about-card-panel {
        padding: 34px 30px 24px 30px;
        border-radius: 18px;
    }

    .esc-about-pill {
        font-size: 0.82rem;
        padding: 4px 14px;
        margin-bottom: 14px;
    }

    .esc-about-title {
        font-size: 2.6rem;
    }

    .esc-about-yellow-line {
        margin: 13px 0 16px 0;
    }

    .esc-about-para {
        font-size: 1rem;
        line-height: 1.55;
        margin-bottom: 12px;
        max-width: 100%;
    }

    .esc-about-gradient-btn {
        font-size: 0.88rem;
        padding: 8px 8px 8px 20px;
        gap: 12px;
    }

    .esc-about-btn-arrow {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
    }

    .esc-about-h-line {
        margin: 22px 0 18px 0;
        max-width: 100%;
    }

    .esc-about-globe-badge {
        width: 48px;
        height: 48px;
        font-size: 1.7rem;
    }

    .esc-about-v-line {
        height: 44px;
        margin: 0 16px;
    }

    .esc-about-feature-sub {
        font-size: 0.82rem;
    }

    .esc-about-feature-val {
        font-size: 1.7rem;
    }

    .esc-about-student-img {
        max-height: 440px;
    }
}

/* ---- Tablets (768px - 992px) ---- */
@media (min-width: 768px) and (max-width: 992px) {
    .esc-about-centre-section {
        padding: 34px 0;
    }

    .esc-about-card-panel {
        padding: 28px 22px 20px 22px;
        border-radius: 16px;
    }

    .esc-about-pill {
        font-size: 0.78rem;
        padding: 4px 12px;
        margin-bottom: 12px;
    }

    .esc-about-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .esc-about-yellow-line {
        margin: 12px 0 14px 0;
        width: 32px;
    }

    .esc-about-para {
        font-size: 0.92rem;
        line-height: 1.55;
        margin-bottom: 12px;
        max-width: 100%;
    }

    .esc-about-btn-wrap {
        margin-top: 18px;
    }

    .esc-about-gradient-btn {
        font-size: 0.84rem;
        padding: 8px 8px 8px 18px;
        gap: 10px;
    }

    .esc-about-btn-arrow {
        width: 26px;
        height: 26px;
        font-size: 0.72rem;
    }

    .esc-about-h-line {
        margin: 18px 0 16px 0;
        max-width: 100%;
    }

    .esc-about-globe-badge {
        width: 44px;
        height: 44px;
        font-size: 1.5rem;
    }

    .esc-about-v-line {
        height: 40px;
        margin: 0 14px;
    }

    .esc-about-feature-sub {
        font-size: 0.78rem;
    }

    .esc-about-feature-val {
        font-size: 1.45rem;
    }

    .esc-about-student-img {
        max-height: 340px;
    }
}

/* ---- Mobile Landscape / Large Phones (576px - 767px) ---- */
@media (min-width: 576px) and (max-width: 767px) {
    .esc-about-centre-section {
        padding: 26px 0;
    }

    .esc-about-card-panel {
        padding: 22px 16px 16px 16px;
        border-radius: 14px;
    }

    .esc-about-pill {
        font-size: 0.72rem;
        padding: 4px 12px;
        margin-bottom: 10px;
    }

    .esc-about-title {
        font-size: 1.6rem;
        line-height: 1.22;
    }

    .esc-about-yellow-line {
        margin: 10px 0 12px 0;
        width: 28px;
        height: 3px;
    }

    .esc-about-para {
        font-size: 0.85rem;
        line-height: 1.52;
        margin-bottom: 10px;
        max-width: 100%;
    }

    .esc-about-btn-wrap {
        margin-top: 16px;
    }

    .esc-about-gradient-btn {
        font-size: 0.8rem;
        padding: 7px 7px 7px 16px;
        gap: 10px;
    }

    .esc-about-btn-arrow {
        width: 24px;
        height: 24px;
        font-size: 0.68rem;
    }

    .esc-about-h-line {
        margin: 16px 0 14px 0;
        max-width: 100%;
    }

    .esc-about-globe-badge {
        width: 42px;
        height: 42px;
        font-size: 1.4rem;
    }

    .esc-about-v-line {
        height: 38px;
        margin: 0 12px;
    }

    .esc-about-feature-sub {
        font-size: 0.74rem;
    }

    .esc-about-feature-val {
        font-size: 1.3rem;
    }

    .esc-about-student-img {
        max-height: 280px;
    }
}

/* ---- Mobile Portrait (max-width: 575px) ---- */
@media (max-width: 575px) {
    .esc-about-centre-section {
        padding: 20px 0;
    }

    .esc-about-card-panel {
        padding: 18px 12px 14px 12px;
        border-radius: 14px;
    }

    .esc-about-pill {
        font-size: 0.68rem;
        padding: 4px 10px;
        margin-bottom: 10px;
        border-radius: 6px;
    }

    .esc-about-title {
        font-size: 1.32rem;
        line-height: 1.28;
        letter-spacing: 0;
    }

    .esc-about-yellow-line {
        margin: 8px 0 10px 0;
        width: 24px;
        height: 3px;
    }

    .esc-about-para {
        font-size: 0.78rem;
        line-height: 1.5;
        margin-bottom: 10px;
        max-width: 100%;
        font-weight: 700;
    }

    .esc-about-btn-wrap {
        margin-top: 14px;
    }

    .esc-about-gradient-btn {
        font-size: 0.74rem;
        padding: 6px 6px 6px 14px;
        gap: 8px;
        width: 100%;
        justify-content: space-between;
    }

    .esc-about-btn-arrow {
        width: 22px;
        height: 22px;
        font-size: 0.64rem;
    }

    .esc-about-gradient-btn:hover {
        transform: none;
    }

    .esc-about-h-line {
        margin: 14px 0 12px 0;
        max-width: 100%;
    }

    .esc-about-feature-box {
        flex-wrap: nowrap;
    }

    .esc-about-globe-badge {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
    }

    .esc-about-v-line {
        height: 32px;
        margin: 0 10px;
    }

    .esc-about-feature-sub {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    .esc-about-feature-val {
        font-size: 1.1rem;
    }

    .esc-about-student-img {
        max-height: 230px;
    }
}

/* --------------------------------------------------------------------------
   Section 8: Schengen Visa 29 Countries (Unique Class: esc-schengen-visa-section)
   -------------------------------------------------------------------------- */
.esc-schengen-visa-section {
  background-color: #ffffff;
  padding: 50px 0;
  border-bottom: 1px solid #e2e8f0;
}

.esc-visa-card-panel {
  background-color: #ffffff;
  border: 1.2px solid #dce4ef;
  border-radius: 22px;
  padding: 46px 48px 36px 48px;
  box-shadow: 0 4px 25px rgba(16, 28, 84, 0.03);
  position: relative;
  overflow: hidden;
}

/* Corner Soft Gradient Accents */
.esc-visa-glow-bl {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 280px;
  height: 220px;
  background: radial-gradient(ellipse at bottom left, rgba(215, 238, 252, 0.75) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.esc-visa-glow-br {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 240px;
  background: radial-gradient(ellipse at bottom right, rgba(215, 238, 252, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

.esc-visa-top-row {
  min-height: 230px;
  position: relative;
  z-index: 2;
}

/* 1. Line with Text */
.esc-visa-pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.esc-visa-preline {
  width: 32px;
  height: 2.5px;
  background-color: #00a896;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.esc-visa-pretext {
  color: #00a896;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 2. Heading */
.esc-visa-heading {
  font-size: 4rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.08;
  letter-spacing: -0.6px;
  margin-bottom: 18px;
}

.esc-visa-highlight {
  color: #00a896;
}

/* 3. Paragraph */
.esc-visa-subtext {
  color: #505c75;
  font-size: 2rem;
  line-height: 1.58;
  font-weight: 800;
  max-width: 900px;
  margin-bottom: 0;
}

/* Right Visual Area */
.esc-visa-visual-container {
  position: relative;
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Background Europe Map Vector */
.esc-visa-map-backdrop {
  position: absolute;
  right: 15px;
  top: -15px;
  width: 440px;
  height: 255px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
}

.esc-visa-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dashed Curved Flight Path & Airplane SVG */
.esc-visa-flight-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* 29 / SCHENGEN Stat Badge */
.esc-visa-stat-box {
  position: absolute;
  right: 25px;
  top: 100px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
}

.esc-visa-stat-line {
  width: 1.5px;
  height: 52px;
  background-color: #dbe4f0;
  flex-shrink: 0;
}

.esc-visa-stat-text-wrap {
  display: flex;
  flex-direction: column;
}

.esc-visa-stat-num {
  font-size: 2.85rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1;
  letter-spacing: -0.5px;
}

.esc-visa-stat-slash {
  color: #00a896;
  font-weight: 700;
}

.esc-visa-stat-lbl {
  font-size: 0.74rem;
  font-weight: 850;
  color: #0c1b48;
  letter-spacing: 3.5px;
  margin-top: 6px;
}

/* Bottom Carousel Card: Rounded full card with automated moving flags */
.esc-visa-slider-pill {
  background-color: #ffffff;
  border: 1.2px solid #e2e8f0;
  border-radius: 50px;
  padding: 10px 18px;
  box-shadow: 0 4px 20px rgba(16, 28, 84, 0.04);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  margin-top: 36px;
  overflow: hidden;
}

/* Viewport & Sliding Track */
.esc-visa-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.esc-visa-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: escVisaMarquee 45s linear infinite;
  will-change: transform;
}

.esc-visa-slider-pill:hover .esc-visa-track {
  animation-play-state: paused;
}

@keyframes escVisaMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Country Flag Items */
.esc-visa-flag-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-right: 1.2px solid #edf1f7;
  box-sizing: border-box;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.esc-visa-flag-item:hover {
  transform: translateY(-1px);
}

.esc-visa-flag-img {
  width: 72px;
  height: 62px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  object-fit: cover;
  flex-shrink: 0;
}

.esc-visa-flag-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0c1b48;
  white-space: nowrap;
}

/* ==========================================================================
   Responsive: Schengen Visa Section
   ========================================================================== */

/* Small desktop / laptop */
@media (min-width: 993px) and (max-width: 1199px) {
  .esc-visa-card-panel {
    padding: 40px 36px 30px;
  }
  .esc-visa-heading {
    font-size: 3.2rem;
  }
  .esc-visa-subtext {
    font-size: 1.5rem;
  }
  .esc-visa-visual-container {
    height: 220px;
  }
  .esc-visa-map-backdrop {
    width: 360px;
    height: 210px;
    right: 0;
    top: -10px;
  }
  .esc-visa-stat-box {
    right: 10px;
    top: 92px;
    gap: 12px;
  }
  .esc-visa-stat-num {
    font-size: 2.4rem;
  }
  .esc-visa-stat-lbl {
    font-size: 0.68rem;
    letter-spacing: 2.5px;
  }
  .esc-visa-flag-img {
    width: 56px;
    height: 46px;
  }
  .esc-visa-flag-name {
    font-size: 1.15rem;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 992px) {
  .esc-visa-card-panel {
    padding: 32px 24px 26px;
    border-radius: 18px;
  }
  .esc-visa-top-row {
    min-height: auto;
  }
  .esc-visa-heading {
    font-size: 2.6rem;
    margin-bottom: 14px;
  }
  .esc-visa-subtext {
    font-size: 1.15rem;
    max-width: 100%;
  }
  .esc-visa-visual-container {
    justify-content: center;
    height: 210px;
    margin-top: 24px;
  }
  .esc-visa-map-backdrop {
    width: 300px;
    height: 180px;
    right: auto;
    top: 0;
  }
  .esc-visa-stat-box {
    right: 10px;
    top: 80px;
    gap: 10px;
  }
  .esc-visa-stat-line {
    height: 44px;
  }
  .esc-visa-stat-num {
    font-size: 2rem;
  }
  .esc-visa-stat-lbl {
    font-size: 0.62rem;
    letter-spacing: 2px;
  }
  .esc-visa-slider-pill {
    margin-top: 28px;
    padding: 8px 14px;
  }
  .esc-visa-flag-img {
    width: 40px;
    height: 32px;
  }
  .esc-visa-flag-name {
    font-size: 0.95rem;
  }
}

/* Large mobile / small tablet */
@media (min-width: 576px) and (max-width: 767px) {
  .esc-visa-card-panel {
    padding: 26px 18px 22px;
    border-radius: 16px;
  }
  .esc-visa-heading {
    font-size: 2rem;
    letter-spacing: -0.3px;
  }
  .esc-visa-subtext {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .esc-visa-visual-container {
    height: auto;
    min-height: 160px;
    margin-top: 18px;
    justify-content: center;
  }
  .esc-visa-map-backdrop {
    position: relative;
    width: 220px;
    height: 140px;
    right: auto;
    top: auto;
    opacity: 0.9;
  }
  .esc-visa-flight-svg {
    display: none; /* keeps the small view uncluttered */
  }
  .esc-visa-stat-box {
    right: 8px;
    top: 8px;
    gap: 8px;
  }
  .esc-visa-stat-line {
    height: 36px;
  }
  .esc-visa-stat-num {
    font-size: 1.5rem;
  }
  .esc-visa-stat-lbl {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    margin-top: 3px;
  }
  .esc-visa-slider-pill {
    margin-top: 20px;
    padding: 6px 10px;
    border-radius: 40px;
  }
  .esc-visa-flag-item {
    padding: 4px 10px;
    gap: 6px;
  }
  .esc-visa-flag-img {
    width: 30px;
    height: 22px;
  }
  .esc-visa-flag-name {
    font-size: 0.8rem;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .esc-schengen-visa-section {
    padding: 32px 0;
  }
  .esc-visa-card-panel {
    padding: 22px 14px 18px;
    border-radius: 14px;
  }
  .esc-visa-glow-bl,
  .esc-visa-glow-br {
    width: 160px;
    height: 140px;
  }
  .esc-visa-heading {
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
  .esc-visa-subtext {
    font-size: 0.85rem;
  }
  .esc-visa-visual-container {
    flex-direction: column;
    height: auto;
    margin-top: 16px;
    justify-content: center;
    align-items: center;
  }
  .esc-visa-map-backdrop {
    position: relative;
    width: 170px;
    height: 110px;
    right: auto;
    top: auto;
    margin: 0 auto;
  }
  .esc-visa-flight-svg {
    display: none;
  }
  .esc-visa-stat-box {
    position: static;
    margin-top: 12px;
    justify-content: center;
  }
  .esc-visa-stat-line {
    height: 28px;
  }
  .esc-visa-stat-num {
    font-size: 1.3rem;
  }
  .esc-visa-stat-lbl {
    font-size: 0.5rem;
    letter-spacing: 1px;
    margin-top: 2px;
  }
  .esc-visa-slider-pill {
    margin-top: 18px;
    padding: 5px 8px;
    border-radius: 30px;
  }
  .esc-visa-flag-item {
    padding: 3px 8px;
    gap: 5px;
    border-right-width: 1px;
  }
  .esc-visa-flag-img {
    width: 24px;
    height: 17px;
    border-radius: 3px;
  }
  .esc-visa-flag-name {
    font-size: 0.7rem;
  }
}


/* --------------------------------------------------------------------------
   Section 9: Support Network Section (Unique Class: esc-support-network-section)
   -------------------------------------------------------------------------- */
.esc-support-network-section {
  background-color: #ffffff;
  padding: 50px 0;
  border-bottom: 1px solid #e2e8f0;
}

.esc-network-card-panel {
  background-color: #ffffff;
  border: 1.2px solid #dce4ef;
  border-radius: 22px;
  padding: 48px 48px;
  box-shadow: 0 4px 25px rgba(16, 28, 84, 0.03);
  position: relative;
  overflow: hidden;
}

/* Atmospheric soft blue background glows */
.esc-network-glow-top {
  position: absolute;
  top: -60px;
  left: 36%;
  width: 380px;
  height: 280px;
  background: radial-gradient(circle, rgba(215, 238, 252, 0.7) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
  z-index: 1;
}

.esc-network-glow-bottom {
  position: absolute;
  bottom: -80px;
  left: 30%;
  width: 360px;
  height: 260px;
  background: radial-gradient(circle, rgba(215, 238, 252, 0.75) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
  z-index: 1;
}

/* 1. Left line with text */
.esc-network-pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.esc-network-preline {
  width: 32px;
  height: 2.5px;
  background-color: #f28b72;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.esc-network-pretext {
  color: #e87b64;
  font-size: 0.80rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 2. Title */
.esc-network-heading {
  font-size: 3.2rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.08;
  margin-bottom: 0;
  letter-spacing: -0.6px;
}

.esc-network-highlight {
  color: #0066f5;
}

/* 3. Paragraph */
.esc-network-desc {
  color: #505c75;
  font-size: 0.92rem;
  line-height: 1.58;
  font-weight: 500;
  max-width: 440px;
  margin-top: 18px;
  margin-bottom: 26px;
}

/* 4. Button with right arrow */
.esc-network-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #0a1f4d;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(10, 31, 77, 0.25);
  transition: all 0.25s ease;
  border: none;
}

.esc-network-btn:hover {
  background-color: #071638;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10, 31, 77, 0.35);
}

.esc-network-btn i {
  font-size: 1.05rem;
  transition: transform 0.2s ease;
}

.esc-network-btn:hover i {
  transform: translateX(3px);
}

/* Right Side Cards (2x2 Grid) */
.esc-net-card {
  border-radius: 18px;
  padding: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.esc-net-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(16, 28, 84, 0.06);
}

.esc-net-card-white {
  background-color: #ffffff;
  border: 1.2px solid #e5ecf5;
}

.esc-net-card-yellow {
  background-color: #fef8e7;
  border: 1.2px solid #faeec9;
}

/* Icon Badges */
.esc-net-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.esc-net-icon-coral {
  background-color: #fdedec;
  color: #e74c3c;
}

.esc-net-icon-gold {
  background-color: #fae7ad;
  color: #c68600;
}

.esc-net-icon-mint {
  background-color: #e2f7ed;
  color: #059669;
}

.esc-net-icon-sky {
  background-color: #e3f1fc;
  color: #0070d2;
}

/* Card Title & Text */
.esc-net-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0c1b48;
  margin-bottom: 8px;
  line-height: 1.2;
}

.esc-net-card-text {
  font-size: 0.85rem;
  color: #505c75;
  line-height: 1.5;
  margin-bottom: 0;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 991.98px) {
  .esc-network-card-panel {
    padding: 30px 20px;
    border-radius: 18px;
  }
  .esc-network-heading {
    font-size: 2.4rem;
  }
}

@media (max-width: 575.98px) {
  .esc-network-heading {
    font-size: 1.9rem;
  }
  .esc-net-card {
    padding: 20px;
  }
}

/* --------------------------------------------------------------------------
   Section 10: FAQ Accordion Section (Unique Class: esc-faq-accordion-section)
   -------------------------------------------------------------------------- */
.esc-faq-accordion-section {
  background-color: #ffffff;
  padding: 50px 0;
  border-bottom: 1px solid #e2e8f0;
}

.esc-faq-card-panel {
  background-color: #2a3ca4;
  border-radius: 22px;
  padding: 52px 50px;
  color: #ffffff;
  box-shadow: 0 4px 25px rgba(16, 28, 84, 0.05);
}

/* 1. Left line with text */
.esc-faq-pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.esc-faq-preline {
  width: 34px;
  height: 2.5px;
  background-color: #5ce1e6;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.esc-faq-pretext {
  color: #a8bbf5;
  font-size: 0.80rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 2. Big Font Title */
.esc-faq-big-heading {
  font-size: 3.8rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.8px;
  margin-bottom: 0;
}

.esc-faq-title-cyan {
  color: #5ce1e6;
}

/* Right Side: Four Question Cards */
.esc-faq-list {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.esc-faq-card {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  transition: all 0.25s ease;
}

.esc-faq-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px 0;
  cursor: pointer;
  user-select: none;
}

.esc-faq-question {
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
  line-height: 1.35;
  padding-right: 16px;
}

.esc-faq-arrow {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.esc-faq-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-in-out, opacity 0.3s ease;
  opacity: 0;
}

.esc-faq-open .esc-faq-card-body {
  max-height: 250px;
  opacity: 1;
}

.esc-faq-open .esc-faq-card-header {
  padding-bottom: 10px;
}

.esc-faq-answer {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.88rem;
  line-height: 1.6;
  padding-bottom: 18px;
  margin-bottom: 0;
  max-width: 95%;
  font-weight: 400;
}

/* Responsive */
@media (max-width: 991.98px) {
  .esc-faq-card-panel {
    padding: 34px 24px;
    border-radius: 18px;
  }
  .esc-faq-big-heading {
    font-size: 2.8rem;
  }
  .esc-faq-question {
    font-size: 1.02rem;
  }
}

@media (max-width: 575.98px) {
  .esc-faq-big-heading {
    font-size: 2.2rem;
  }
  .esc-faq-card-panel {
    padding: 26px 16px;
  }
}

/* --------------------------------------------------------------------------
   Section 11: CTA Banner Section (Unique Class: esc-cta-banner-section)
   -------------------------------------------------------------------------- */
.esc-cta-banner-section {
  background-color: #ffffff;
  padding: 40px 0 60px 0;
  position: relative;
  overflow: hidden;
}

.esc-cta-banner-card {
  background-color: #fed100;
  background-image: linear-gradient(135deg, #fed600 0%, #ffc800 100%);
  border-radius: 28px;
  padding: 72px 64px 68px 64px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

/* Abstract subtle background rings */
.esc-cta-bg-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.esc-cta-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.esc-cta-ring-1 {
  width: 560px;
  height: 560px;
  border: 45px solid rgba(240, 185, 0, 0.32);
  bottom: -240px;
  left: -140px;
}

.esc-cta-ring-2 {
  width: 840px;
  height: 840px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  bottom: -380px;
  left: -280px;
}

.esc-cta-ring-3 {
  width: 620px;
  height: 620px;
  border: 55px solid rgba(255, 255, 255, 0.14);
  top: -260px;
  right: -80px;
}

/* Watermark 29 - Giant number with fading invisible bottom */
.esc-cta-watermark-29 {
  position: absolute;
  right: 2%;
  top: 48%;
  transform: translateY(-50%);
  font-size: 26rem;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -6px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  /* Top is clearly visible in soft translucent white, bottom smoothly fades invisible */
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.72) 0%, 
    rgba(255, 255, 255, 0.55) 28%, 
    rgba(255, 255, 255, 0.22) 58%, 
    rgba(255, 255, 255, 0) 84%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 32%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 84%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 32%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 84%);
}

/* Bottom European Landmarks Skyline */
.esc-cta-skyline-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 220px;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  display: flex;
  align-items: flex-end;
}

.esc-cta-skyline-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
}

/* Flight Path & Airplane with Shadow */
.esc-cta-flight-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

.esc-cta-flight-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Content layer on top */
.esc-cta-content-row {
  position: relative;
  z-index: 4;
}

/* 1. Left side line with text */
.esc-cta-pretitle {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.esc-cta-preline {
  width: 38px;
  height: 2px;
  background-color: #081636;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.esc-cta-pretext {
  color: #081636;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

/* 2. Big text */
.esc-cta-heading {
  font-size: 4rem;
  font-weight: 850;
  line-height: 1.06;
  color: #081636;
  margin-bottom: 28px;
  letter-spacing: -1.2px;
}

/* 3. One button with right arrow */
.esc-cta-btn-wrap {
  margin-bottom: 18px;
}

.esc-cta-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #081636;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 13px 28px;
  border-radius: 50px;
  border: 2px solid #081636;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(8, 22, 54, 0.16);
}

.esc-cta-btn-dark:hover {
  background-color: #040c20;
  border-color: #040c20;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(8, 22, 54, 0.28);
}

.esc-cta-btn-dark i {
  font-size: 1.05rem;
  transition: transform 0.2s ease;
}

.esc-cta-btn-dark:hover i {
  transform: translateX(4px);
}

/* 4. WhatsApp icon with text */
.esc-cta-whatsapp-wrap {
  display: flex;
  align-items: center;
}

.esc-cta-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 700;
  color: #081636;
  transition: all 0.2s ease;
}

.esc-cta-whatsapp-link i {
  font-size: 1.45rem;
  color: #081636;
  line-height: 1;
}

.esc-cta-whatsapp-link:hover {
  color: #040c20;
  opacity: 0.85;
  transform: translateX(2px);
}

/* ==========================================================================
   Responsive: CTA Banner Section
   ========================================================================== */

/* Small desktop / laptop */
@media (min-width: 993px) and (max-width: 1199px) {
  .esc-cta-banner-card {
    padding: 58px 48px 54px;
  }
  .esc-cta-heading {
    font-size: 3.2rem;
    margin-bottom: 24px;
  }
  .esc-cta-watermark-29 {
    font-size: 20rem;
    right: 1%;
  }
  .esc-cta-skyline-wrap {
    width: 55%;
    height: 190px;
  }
  .esc-cta-btn-dark {
    font-size: 1.25rem;
    padding: 12px 24px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 992px) {
  .esc-cta-banner-section {
    padding: 30px 0 46px;
  }
  .esc-cta-banner-card {
    padding: 46px 34px 42px;
    border-radius: 22px;
  }
  .esc-cta-heading {
    font-size: 2.4rem;
    margin-bottom: 20px;
    letter-spacing: -0.8px;
  }
  .esc-cta-pretext {
    font-size: 0.7rem;
    letter-spacing: 1.8px;
  }
  .esc-cta-watermark-29 {
    font-size: 13rem;
    right: 0;
    letter-spacing: -4px;
  }
  .esc-cta-skyline-wrap {
    width: 60%;
    height: 150px;
  }
  .esc-cta-ring-1 {
    width: 420px;
    height: 420px;
    border-width: 34px;
    bottom: -180px;
    left: -110px;
  }
  .esc-cta-ring-2 {
    width: 620px;
    height: 620px;
    bottom: -280px;
    left: -200px;
  }
  .esc-cta-ring-3 {
    width: 460px;
    height: 460px;
    border-width: 40px;
    top: -190px;
    right: -60px;
  }
  .esc-cta-btn-dark {
    font-size: 1.1rem;
    padding: 11px 22px;
  }
  .esc-cta-whatsapp-link {
    font-size: 0.92rem;
  }
}

/* Large mobile / small tablet */
@media (min-width: 576px) and (max-width: 767px) {
  .esc-cta-banner-section {
    padding: 24px 0 36px;
  }
  .esc-cta-banner-card {
    padding: 36px 24px 120px;
    border-radius: 20px;
  }
  .esc-cta-heading {
    font-size: 1.9rem;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
  }
  .esc-cta-pretext {
    font-size: 0.65rem;
    letter-spacing: 1.5px;
  }
  .esc-cta-watermark-29 {
    font-size: 9rem;
    top: 8%;
    right: 4%;
    transform: none;
    letter-spacing: -3px;
  }
  .esc-cta-skyline-wrap {
    width: 100%;
    height: 110px;
    justify-content: center;
  }
  .esc-cta-skyline-img {
    object-position: bottom center;
  }
  .esc-cta-flight-wrap {
    display: none; /* declutter small screens */
  }
  .esc-cta-ring-1,
  .esc-cta-ring-2,
  .esc-cta-ring-3 {
    display: none;
  }
  .esc-cta-btn-dark {
    font-size: 1rem;
    padding: 10px 20px;
    width: 100%;
    justify-content: center;
  }
  .esc-cta-btn-wrap {
    margin-bottom: 14px;
  }
  .esc-cta-whatsapp-link {
    font-size: 0.88rem;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .esc-cta-banner-section {
    padding: 20px 0 28px;
  }
  .esc-cta-banner-card {
    padding: 30px 18px 130px;
    border-radius: 16px;
  }
  .esc-cta-heading {
    font-size: 1.5rem;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
    line-height: 1.2;
  }
  .esc-cta-pretext {
    font-size: 0.6rem;
    letter-spacing: 1.2px;
  }
  .esc-cta-preline {
    width: 28px;
  }
  .esc-cta-watermark-29 {
    font-size: 6.5rem;
    top: 6%;
    right: 3%;
    transform: none;
    letter-spacing: -2px;
  }
  .esc-cta-skyline-wrap {
    width: 100%;
    height: 85px;
    justify-content: center;
  }
  .esc-cta-skyline-img {
    object-position: bottom center;
  }
  .esc-cta-flight-wrap {
    display: none;
  }
  .esc-cta-ring-1,
  .esc-cta-ring-2,
  .esc-cta-ring-3 {
    display: none;
  }
  .esc-cta-btn-dark {
    font-size: 0.92rem;
    padding: 10px 18px;
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  .esc-cta-btn-wrap {
    margin-bottom: 12px;
  }
  .esc-cta-whatsapp-link {
    font-size: 0.82rem;
    gap: 8px;
  }
  .esc-cta-whatsapp-link i {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   Section 12: Main Footer Section (Unique Class: esc-main-footer-section)
   -------------------------------------------------------------------------- */
.esc-main-footer-section {
  background-color: #123bb0;
  background-image: linear-gradient(180deg, #133db8 0%, #0e3099 100%);
  color: #ffffff;
  padding: 80px 0 24px 0;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
}

.esc-footer-container {
  position: relative;
  z-index: 2;
}

/* Top Navigation Row: Left Line + Nav Links */
.esc-footer-top-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.esc-footer-top-line {
  width: 38px;
  height: 3px;
  background-color: #fed200;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.esc-footer-nav-list {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.esc-footer-nav-list a {
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  display: inline-block;
}

.esc-footer-nav-list a:hover {
  color: #fed200;
  border-bottom-color: #fed200;
}

/* Active Nav Link (Contact with yellow text and bottom border) */
.esc-footer-nav-list a.esc-footer-nav-active {
  color: #fed200;
  font-weight: 700;
  border-bottom: 2px solid #fed200;
}

/* Main Content Row */
.esc-footer-main-row {
  margin-bottom: 30px;
  position: relative;
  z-index: 3;
}

/* 1. Left line with text */
.esc-footer-pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.esc-footer-preline {
  width: 34px;
  height: 2.5px;
  background-color: #fed200;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.esc-footer-pretext {
  color: #fed200;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* 2. Big Title */
.esc-footer-heading {
  font-size: 3.35rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1.14;
  letter-spacing: -0.8px;
  margin-bottom: 22px;
}

/* 3. Description Paragraph */
.esc-footer-desc {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 470px;
  margin-bottom: 0;
  font-weight: 400;
}

/* Right Side: Three Stacked Contact Cards */
.esc-footer-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin-left: auto;
  margin-top: 24px;
}

.esc-footer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 16px 24px;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
}

.esc-footer-card:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.esc-footer-card-inner-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.esc-footer-card-icon-circle {
  width: 48px;
  height: 48px;
  background-color: #fed200;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease;
}

.esc-footer-card:hover .esc-footer-card-icon-circle {
  transform: scale(1.06);
}

.esc-footer-card-icon-circle i {
  color: #0b2265;
  font-size: 1.25rem;
  line-height: 1;
}

.esc-footer-card-info {
  display: flex;
  flex-direction: column;
}

.esc-footer-card-main {
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
}

.esc-footer-card-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 500;
  margin-top: 2px;
}

.esc-footer-card-chevron {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.esc-footer-card:hover .esc-footer-card-chevron {
  color: #fed200;
  transform: translateX(3px);
}

/* Bottom Skyline Line Art Background */
.esc-footer-skyline-wrap {
  width: 100%;
  height: 220px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.esc-footer-skyline-lineart {
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.85;
}

/* Bottom Bar */
.esc-footer-bottom-bar {
  border-top: none;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.58);
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  z-index: 3;
}

.esc-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.esc-footer-bottom-links a {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color 0.2s ease;
}

.esc-footer-bottom-links a:hover {
  color: #fed200;
}

/* ==========================================================================
   Responsive: Main Footer Section
   ========================================================================== */

/* Small desktop / laptop */
@media (min-width: 993px) and (max-width: 1199px) {
  .esc-main-footer-section {
    padding: 64px 0 22px;
  }
  .esc-footer-top-nav {
    gap: 28px;
    margin-bottom: 40px;
  }
  .esc-footer-nav-list {
    gap: 28px;
  }
  .esc-footer-heading {
    font-size: 2.7rem;
  }
  .esc-footer-desc {
    font-size: 0.98rem;
    max-width: 420px;
  }
  .esc-footer-cards-stack {
    max-width: 460px;
  }
  .esc-footer-card {
    padding: 14px 20px;
  }
  .esc-footer-skyline-wrap {
    height: 170px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 992px) {
  .esc-main-footer-section {
    padding: 54px 0 20px;
  }
  .esc-footer-top-nav {
    gap: 22px;
    margin-bottom: 36px;
  }
  .esc-footer-nav-list {
    gap: 22px;
  }
  .esc-footer-nav-list a {
    font-size: 0.9rem;
  }
  .esc-footer-heading {
    font-size: 2.2rem;
    letter-spacing: -0.5px;
  }
  .esc-footer-desc {
    font-size: 0.94rem;
    max-width: 100%;
  }
  .esc-footer-cards-stack {
    max-width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }
  .esc-footer-card {
    padding: 13px 18px;
    border-radius: 16px;
  }
  .esc-footer-card-icon-circle {
    width: 42px;
    height: 42px;
  }
  .esc-footer-card-icon-circle i {
    font-size: 1.1rem;
  }
  .esc-footer-card-main {
    font-size: 0.98rem;
  }
  .esc-footer-card-sub {
    font-size: 0.8rem;
  }
  .esc-footer-skyline-wrap {
    height: 130px;
    opacity: 0.7;
  }
  .esc-footer-main-row {
    margin-bottom: 24px;
  }
  .esc-footer-bottom-bar {
    font-size: 0.8rem;
    gap: 12px;
  }
  .esc-footer-bottom-links {
    gap: 16px;
  }
}

/* Large mobile / small tablet */
@media (min-width: 576px) and (max-width: 767px) {
  .esc-main-footer-section {
    padding: 44px 0 20px;
  }
  .esc-footer-top-nav {
    gap: 16px;
    margin-bottom: 30px;
  }
  .esc-footer-nav-list {
    gap: 16px 22px;
  }
  .esc-footer-nav-list a {
    font-size: 0.86rem;
  }
  .esc-footer-pretext {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
  }
  .esc-footer-heading {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  .esc-footer-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 100%;
  }
  .esc-footer-cards-stack {
    max-width: 100%;
    margin-left: 0;
    margin-top: 6px;
    gap: 12px;
  }
  .esc-footer-card {
    padding: 12px 16px;
    border-radius: 14px;
  }
  .esc-footer-card-inner-left {
    gap: 12px;
  }
  .esc-footer-card-icon-circle {
    width: 38px;
    height: 38px;
  }
  .esc-footer-card-icon-circle i {
    font-size: 1rem;
  }
  .esc-footer-card-main {
    font-size: 0.9rem;
  }
  .esc-footer-card-sub {
    font-size: 0.75rem;
  }
  .esc-footer-card-chevron {
    font-size: 1rem;
  }
  .esc-footer-skyline-wrap {
    height: 90px;
    opacity: 0.5;
  }
  .esc-footer-main-row {
    margin-bottom: 20px;
  }
  .esc-footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.78rem;
    padding-top: 20px;
  }
  .esc-footer-bottom-links {
    gap: 14px;
    flex-wrap: wrap;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .esc-main-footer-section {
    padding: 36px 0 18px;
  }
  .esc-footer-top-nav {
    gap: 10px;
    margin-bottom: 26px;
  }
  .esc-footer-top-line {
    width: 28px;
  }
  .esc-footer-nav-list {
    gap: 12px 18px;
  }
  .esc-footer-nav-list a {
    font-size: 0.8rem;
    padding-bottom: 4px;
  }
  .esc-footer-pretitle {
    margin-bottom: 14px;
  }
  .esc-footer-preline {
    width: 24px;
  }
  .esc-footer-pretext {
    font-size: 0.68rem;
    letter-spacing: 1.2px;
  }
  .esc-footer-heading {
    font-size: 1.5rem;
    line-height: 1.24;
    letter-spacing: -0.3px;
    margin-bottom: 14px;
  }
  .esc-footer-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 100%;
  }
  .esc-footer-cards-stack {
    max-width: 100%;
    margin-left: 0;
    margin-top: 4px;
    gap: 10px;
  }
  .esc-footer-card {
    padding: 11px 14px;
    border-radius: 12px;
  }
  .esc-footer-card-inner-left {
    gap: 10px;
  }
  .esc-footer-card-icon-circle {
    width: 34px;
    height: 34px;
  }
  .esc-footer-card-icon-circle i {
    font-size: 0.9rem;
  }
  .esc-footer-card-main {
    font-size: 0.82rem;
  }
  .esc-footer-card-sub {
    font-size: 0.68rem;
    margin-top: 1px;
  }
  .esc-footer-card-chevron {
    font-size: 0.9rem;
  }
  .esc-footer-skyline-wrap {
    height: 60px;
    opacity: 0.4;
  }
  .esc-footer-main-row {
    margin-bottom: 16px;
  }
  .esc-footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.72rem;
    padding-top: 16px;
  }
  .esc-footer-bottom-links {
    gap: 10px 14px;
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints & Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  .esc-hero-duration-badge-wrap {
    margin-top: 18px;
    margin-bottom: 24px;
  }

  .esc-hero-stamp-badge {
    width: 155px;
    height: 155px;
  }

  .esc-hero-flight-item {
    display: none;
  }

  .esc-hero-bg-desktop {
    display: none;
  }

  .esc-hero-bg-mobile {
    display: block;
    object-fit: contain;
    object-position: right center;
    opacity: 0.7;
  }

  .esc-hero-slider-overlay {
    background: linear-gradient(90deg, 
      rgba(255, 255, 255, 0.92) 0%, 
      rgba(255, 255, 255, 0.82) 45%, 
      rgba(255, 255, 255, 0.5) 80%, 
      rgba(255, 255, 255, 0.25) 100%
    );
  }

  .esc-hero-slide-row {
    min-height: 500px;
    padding-top: 50px;
    padding-bottom: 70px;
  }
  
  .esc-hero-visual-card {
    margin-top: 40px;
  }

  .esc-stat-card {
    padding: 18px 16px;
  }

  .esc-stat-card-border {
    border-bottom: 1.5px solid rgba(16, 28, 84, 0.15);
  }

  .esc-stat-qr-card {
    padding: 20px 16px;
  }

  .esc-trusted-bridge-card {
    padding: 32px 24px;
  }

  .esc-bridge-main-title {
    font-size: 2rem;
  }

  .esc-bridge-visual-wrap {
    min-height: 380px;
    margin-top: 20px;
  }

  .esc-cta-banner-card {
    padding: 52px 36px 48px 36px;
  }

  .esc-cta-heading {
    font-size: 2.85rem;
  }

  .esc-cta-watermark-29 {
    font-size: 15rem;
    right: 2%;
  }

  .esc-cta-skyline-wrap {
    width: 75%;
    height: 170px;
  }

  .esc-footer-heading {
    font-size: 2.7rem;
  }

  .esc-footer-cards-stack {
    margin-left: 0;
    max-width: 100%;
  }

  .esc-footer-skyline-wrap {
    height: 130px;
  }

  .esc-nav-logo-img {
    height: 42px;
    width: auto;
    max-width: 210px;
  }
}

@media (max-width: 767.98px) {

  .esc-hero-title-bar {
    width: 50px;
    height: 5px;
    margin-top: 14px;
    margin-bottom: 18px;
  }

  .esc-hero-stamp-badge {
    width: 130px;
    height: 130px;
  }

  .esc-hero-slide-row {
    min-height: 460px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .esc-bridge-title,
  .esc-countries-heading,
  .esc-inclusions-heading,
  .esc-leg-heading,
  .esc-about-heading,
  .esc-visa-heading,
  .esc-network-heading,
  .esc-faq-heading,
  .esc-cta-heading {
    font-size: 1.9rem;
  }

  .esc-ticket-card {
    flex-direction: column;
  }

  .esc-ticket-perforation {
    width: 100%;
    border-left: none;
    border-top: 2px dashed #cbd5e1;
    margin: 0;
  }

  .esc-ticket-notch-top,
  .esc-ticket-notch-bottom {
    display: none;
  }

  .esc-ticket-stub {
    width: 100%;
    flex-direction: row;
    padding: 14px 20px;
  }

  .esc-cta-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .esc-cta-banner-card {
    padding: 44px 24px 38px 24px;
    border-radius: 20px;
  }

  .esc-cta-heading {
    font-size: 2.15rem;
    line-height: 1.1;
    margin-bottom: 22px;
  }

  .esc-cta-pretext {
    font-size: 0.7rem;
    letter-spacing: 1.6px;
  }

  .esc-cta-watermark-29 {
    font-size: 10rem;
    right: -10px;
    top: 35%;
  }

  .esc-cta-skyline-wrap {
    width: 95%;
    height: 130px;
  }

  .esc-cta-flight-wrap {
    opacity: 0.85;
  }

  .esc-footer-top-nav {
    gap: 18px;
    margin-bottom: 32px;
  }

  .esc-footer-nav-list {
    gap: 16px;
  }

  .esc-footer-heading {
    font-size: 2.15rem;
  }

  .esc-footer-card {
    padding: 14px 18px;
    border-radius: 16px;
  }

  .esc-footer-card-main {
    font-size: 1rem;
  }

  .esc-footer-skyline-wrap {
    height: 95px;
  }

  .esc-footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .esc-nav-brand {
    gap: 0;
  }

  .esc-nav-logo-img {
    height: 60px;
    width: auto;
    max-width: 250px;
  }

  .esc-navbar-toggler {
    width: 40px;
    height: 40px;
  }

  .esc-toggler-bar {
    width: 20px;
  }
}

/* --------------------------------------------------------------------------
   Fixed Floating WhatsApp Button (Desktop & Mobile)
   -------------------------------------------------------------------------- */
.esc-floating-whatsapp {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 58px;
  height: 58px;
  background-color: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.95rem;
  text-decoration: none !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1050;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.esc-floating-whatsapp:hover {
  background-color: #20ba5a;
  color: #ffffff !important;
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.esc-floating-whatsapp:active {
  transform: scale(0.95);
}

/* Pulsing aura effect */
.esc-floating-whatsapp-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0.75;
  animation: escWaPulse 2.4s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

@keyframes escWaPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@media (max-width: 767.98px) {
  .esc-floating-whatsapp {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
    font-size: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   Mobile Contact Bar (inside the sticky header, phones and tablets only)
   Transparent: the navbar paints the navy behind it, so there is no seam and
   no second colour to keep in sync. Hidden >=992px by d-lg-none, where the
   navbar shows the same controls inline.
   -------------------------------------------------------------------------- */
.esc-mobile-contact-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 10px 2px;
}

/* Under 768px the logo, toggler and these controls cannot share a line, so the
   bar takes its own. Bootstrap's flex-nowrap on the row would stop it wrapping,
   hence the override; col-12 supplies the full width that forces the break. */
@media (max-width: 767.98px) {
  .esc-nav-row {
    flex-wrap: wrap !important;
  }
}

/* 768px and up (but still below lg, where the desktop nav takes over) there is
   room for one line, so the controls sit beside the toggler instead of adding a
   second row. order puts them left of it; col-md-auto has already dropped the
   full width. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .esc-mobile-contact-bar {
    order: 1;
    margin-left: auto;
    margin-right: 16px;
    padding-block: 0;
  }
  .esc-nav-toggle-col {
    order: 2;
  }
}

@media (max-width: 420px) {
  .esc-mobile-contact-bar {
    gap: 10px;
    padding-block: 8px 2px;
  }
  .esc-mobile-contact-bar .esc-btn-phone-display {
    font-size: 1rem;
    padding: 7px 18px;
  }
}

/* --------------------------------------------------------------------------
   Start-Date Badge on an Internship Card (esc-intern-card-badge)
   Overlays the card image at the top right, so adding it to a card never
   changes that card's body height and never breaks the row's alignment.
   -------------------------------------------------------------------------- */
.esc-intern-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: calc(100% - 20px);
  background-color: #ffc72c;
  color: #121212;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.1px;
  text-align: center;
  padding: 7px 13px 8px 13px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  animation: escBadgeBlink 1s ease-in-out infinite;
}

/* "Starts on" and the dates are the whole badge now. */
.esc-intern-card-badge-lead,
.esc-intern-card-badge-date {
  font-size: 1.15rem;
  font-weight: 900;
  white-space: nowrap;
}

/* A slow, soft fade rather than a hard on/off: it still reads as blinking,
   but stays legible the whole cycle and sits far under the 3-flashes-per-
   second ceiling a hard strobe risks crossing. Full opacity is held across
   the first and last fifth of the cycle, so the date sits still and readable
   at each end rather than always being mid-fade. */
@keyframes escBadgeBlink {
  0%, 20% {
    opacity: 1;
  }
  50% {
    opacity: 0.32;
  }
  80%, 100% {
    opacity: 1;
  }
}

/* Holds still - fully opaque, so the date is never lost - for anyone who has
   asked their system to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .esc-intern-card-badge {
    animation: none;
  }
}

/* Two cards per row here, so each card is wider than at xl and the badge has
   room to stay at full size. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .esc-intern-card-badge-lead,
  .esc-intern-card-badge-date {
    font-size: 1.22rem;
  }
}

@media (max-width: 575px) {
  .esc-intern-card-badge {
    top: 8px;
    right: 8px;
    padding: 6px 11px 7px 11px;
    border-radius: 7px;
  }
  .esc-intern-card-badge-lead,
  .esc-intern-card-badge-date {
    font-size: 1.06rem;
  }
}

/* The caveat line, back for the cards that carry one. Quiet under the dates so
   the date is still what reads first from across the grid. */
.esc-intern-card-badge-note {
  font-size: 0.7rem;
  font-weight: 600;
  font-style: italic;
  opacity: 0.85;
  margin-top: 1px;
}

/* Streams listed under a card's heading: smaller than the title and bold. It
   sits in the card body above the location, which does not disturb the row -
   the card is height:100% in a flex column with margin-top:auto on the button,
   so a taller body grows the whole row rather than shifting one button. */
.esc-intern-card-streams {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1a56db;
  line-height: 1.3;
  margin: -4px 0 10px 0;
}

@media (min-width: 993px) and (max-width: 1199px) {
  .esc-intern-card-streams {
    font-size: 0.95rem;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .esc-intern-card-streams {
    font-size: 0.88rem;
  }
}

@media (max-width: 767px) {
  .esc-intern-card-streams {
    font-size: 0.85rem;
    margin: -2px 0 8px 0;
  }
  .esc-intern-card-badge-note {
    font-size: 0.64rem;
  }
}

/* "Supercomputing" is one unbreakable word wider than the 258px title box at
   xl, so with overflow-wrap:normal it spilled past the card and looked clipped.
   Allowing a break inside a word fixes that card and leaves every shorter
   title untouched, since the rule only applies when a word cannot otherwise
   fit. */
.esc-intern-card-title {
  overflow-wrap: break-word;
  word-break: normal;
}

/* At xl the title box is 258px and "Internship in Supercomputing" needed 263px
   at 2rem, so the word was breaking mid-way and leaving a stray letter on its
   own line. 1.9rem brings it inside the box on one line. Measured, not guessed:
   hyphens:auto was tried first and did not break the word at all, leaving the
   overflow in place. Below xl the title is already 1.4rem or less, where the
   word fits comfortably. */
@media (min-width: 1400px) {
  .esc-intern-card-title {
    font-size: 1.9rem;
  }
}

/* 1200-1399px is the tight end of xl: four cards to a row leaves the title box
   at 198-218px, where even 1.9rem breaks "Supercomputing" mid-word. The word
   needs the font at or under 24px to sit on one line in a 198px box, measured
   on the live page. It also stops the longer titles running to four and five
   lines at these widths. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .esc-intern-card-title {
    font-size: 1.5rem;
  }
}

/* "For More Details", above Enroll Now on every internship card.

   It takes the margin-top:auto the button used to carry, so the pair sits
   together at the bottom of the card and the free space falls above them both
   instead of between them. The button's own auto margin is zeroed when this
   link precedes it.

   The reference for this is amber on navy; here it sits on a white card body,
   where amber reads at about 1.9:1 and fails WCAG outright. Same treatment -
   uppercase, letter-spaced, trailing arrow - in the card's own navy, which
   clears AA comfortably, with the brand blue kept for the hover. */
.esc-intern-card-more {
  margin-top: auto;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  color: #d81f27;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid rgba(216, 31, 39, 0.22);
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}

.esc-intern-card-more:hover,
.esc-intern-card-more:focus-visible {
  color: #a8141b;
  border-bottom-color: #a8141b;
  gap: 12px;
}

.esc-intern-card-more i {
  font-size: 0.9rem;
  line-height: 1;
}

/* The button no longer needs to claim the free space itself. */
.esc-intern-card-more + .esc-intern-card-btn {
  margin-top: 0;
}

@media (max-width: 1199px) {
  .esc-intern-card-more {
    font-size: 0.76rem;
    letter-spacing: 1.1px;
  }
}

@media (max-width: 575px) {
  .esc-intern-card-more {
    font-size: 0.74rem;
    letter-spacing: 1px;
    margin-bottom: 14px;
  }
}

/* ==========================================================================
   Responsive corrections
   Written against measurements taken at 320, 375, 768, 1024 and 1180px, so
   every rule below answers something that was wrong at one of those widths
   rather than a guess. Appended rather than merged into the breakpoint
   blocks above: these need to win over rules that already set the same
   properties, and keeping them in one place makes them easy to read back.
   ========================================================================== */

/* --- Header, 992-1199px ----------------------------------------------------
   The nav row is flex-nowrap and held 286 + 483 + 317 = 1086px of content in
   937px of space, so every page scrolled 97px sideways on a tablet in
   landscape. The two circular buttons already dial the same number the pill
   prints, so the pill is the part that can go. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .esc-nav-cta .esc-btn-phone-display,
  .esc-nav-divider {
    display: none;
  }
}

/* --- Hero headline ---------------------------------------------------------
   575px and below asked for 3.5rem while 576-767px asked for 2.5rem, so the
   type grew as the screen got smaller and "INTERNSHIP" ran 38px off the side
   of a 320px phone. One ladder for both bands now, capped against the
   viewport so the longest word cannot clip again at any width. */
@media (max-width: 767.98px) {
  .esc-hero-title-free,
  .esc-hero-title-navy {
    font-size: min(3.5rem, 14.5vw);
    letter-spacing: -0.4px;
  }

  .esc-hero-title-badge {
    font-size: min(2.05rem, 8.4vw);
    padding: 3px 10px 4px;
  }
}

/* --- Touch targets ---------------------------------------------------------
   44px is the smallest target a thumb hits reliably. These were 22-39px, and
   the footer links in particular sat close enough together to catch the
   wrong one. Padding rather than height, so nothing reflows. */
@media (max-width: 1199.98px) {
  .esc-btn-circle {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 1199.98px) {
  .esc-footer-nav-list a {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .esc-footer-bottom-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* This one carries a bottom border, so growing the box pulled the rule 14px
     clear of the words it underlines. The hit area is extended with a
     pseudo-element instead: 44px to the thumb, unchanged to the eye. */
  .esc-about-gradient-btn {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

/* --- Small type ------------------------------------------------------------
   Everything here measured under 11px on a phone, where it stops being text
   and starts being texture. The Schengen counter was the worst at 8px with
   3.5px of tracking, which reads as separate letters rather than a word, so
   it gets the tracking cut as well as the size raised. */
@media (max-width: 1199.98px) {
  .esc-visa-stat-lbl {
    font-size: 11.5px;
    letter-spacing: 1.5px;
  }

  .esc-visa-flag-name {
    font-size: 12.5px;
  }

  .esc-about-feature-sub {
    font-size: 12.5px;
  }

  .esc-about-gradient-btn span {
    font-size: 13.5px;
  }

  .esc-footer-pretext {
    font-size: 12px;
  }

  .esc-footer-card-sub {
    font-size: 12.5px;
  }

  .esc-footer-bottom-bar {
    font-size: 12.5px;
  }

  .esc-footer-bottom-links a {
    font-size: 12.5px;
  }
}

/* --- Short viewports -------------------------------------------------------
   A phone held sideways is 375px tall, and the header - logo row plus contact
   bar - took 138px of it, 37% of the screen, on every scroll. It stops being
   sticky below 520px of height and scrolls away with the rest, which is the
   usual trade: the taller the header, the less it can afford to stay. */
@media (max-height: 520px) and (max-width: 991.98px) {
  .esc-navbar-section {
    position: static;
  }

  .esc-nav-logo-img {
    height: 42px;
  }

  .esc-mobile-contact-bar {
    padding-top: 6px;
    padding-bottom: 0;
  }
}

/* --- Narrow phones ---------------------------------------------------------
   At 320px the logo needed 274px and the hamburger 64px in a 312px row, so
   the toggler dropped to a line of its own and the header grew to three
   stacked rows - 181px, a third of a 568px screen, held there by the sticky.
   A shorter logo puts the two back on one line. */
@media (max-width: 350px) {
  .esc-nav-logo-img {
    height: 46px;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   The card is the link
   One transparent layer, owned by the For More Details anchor, covering the
   whole card: image, title, location, the lot. The card is already
   position: relative, so it is what the layer measures itself against.

   The Enroll button is lifted above it, because it goes somewhere else - a
   click there should open the form, not the details page. The eight cards
   with no For More Details link have no layer either, so nothing about them
   changes.

   This also replaces the phone-only overlay that existed to give the link a
   44px target: a card-sized target clears that at every width.
   -------------------------------------------------------------------------- */
.esc-intern-card-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.esc-intern-card-btn {
  position: relative;
  z-index: 2;
}