:root{
  --pilotus-accent:#12313d;   /* CTA */
  --pilotus-dark:#12313d;     /* deep footer/hero overlay */
  --pilotus-ink:#17181a;      /* headings */
  --pilotus-muted:#667085;    /* body muted */
  --pilotus-surface:#f7f7f8;  /* light panels */
  --pilotus-stroke:#e6e7ea;   /* borders */
  --pilotus-musturd:#d9a936;   /* borders */
  --pilotus-musturd-light:#d7a01c;   /* borders */
  --pliotus-font-family: HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
}
body{font-family:var(--pliotus-font-family);color:#121212;background:#fff}
a{text-decoration:none}
/* .container, .container-lg, .container-md, .container-sm, .container-xl{ max-width: 1024px !important; } */
/* Base */
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  width: 100%;
  margin-inline: auto;
  padding-left: 12px;
  padding-right: 12px;
  max-width: 100%;
}

/* Breakpoints */
@media (min-width: 576px){
  .container, .container-sm{ max-width: 540px; }
}
@media (min-width: 768px){
  .container, .container-sm, .container-md{ max-width: 720px; }
}
@media (min-width: 992px){
  .container, .container-sm, .container-md, .container-lg{ max-width: 960px; }
}
@media (min-width: 1200px){
  .container, .container-sm, .container-md, .container-lg, .container-xl{ max-width: 1140px; }
}
@media (min-width: 1400px){
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{ max-width: 1320px; }
}
.btn.pilotus-btn.px-3.login-btn {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

/* Navbar */
.pilotus-navbar { background: transparent; transition: background-color .28s ease, box-shadow .28s ease, padding .2s ease; box-shadow: none; }
.pilotus-navbar.scrolled { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding-top: .6rem !important; padding-bottom: .6rem !important; }
.pilotus-navbar.sticky-fix { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding-top: .6rem !important; padding-bottom: .6rem !important; }
.navbar-container { position: relative; }
.navbar-expand-lg .navbar-nav .nav-link { padding-left: 0rem; padding-right: 0rem; }

/* Logo swap */
.pilotus-logo { display: block; height: 28px;}
.pilotus-logo--dark { display: none; }
.pilotus-navbar.scrolled .pilotus-logo--light { display: none !important; }
.pilotus-navbar.scrolled .pilotus-logo--dark { display: block !important; }
.pilotus-navbar.sticky-fix .pilotus-logo--light { display: none !important; }
.pilotus-navbar.sticky-fix .pilotus-logo--dark { display: block !important; }

/* Nav links */
.pilotus-navbar .nav-link { color: #ffffff !important; font-weight: 500; position: relative; transition: color 0.3s ease, text-shadow 0.3s ease; text-shadow: none; }
.pilotus-navbar .nav-link:hover { text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.6); font-weight: 500; }
.pilotus-navbar.scrolled .nav-link { color: #000000 !important; font-weight: 500; }
.pilotus-navbar.scrolled .nav-link:hover { text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); font-weight: 500; }
.pilotus-navbar.sticky-fix .nav-link { color: #000000 !important; font-weight: 500; }
.pilotus-navbar.sticky-fix .nav-link:hover { text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); font-weight: 500; }

/* Dropdown menu styling (desktop & mobile) */
.pilotus-navbar .dropdown-menu { border-radius: 10px; border: 1px solid var(--pilotus-stroke); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
/* default hidden; Bootstrap shows .show */
.pilotus-navbar .dropdown-menu { display: none; }
.pilotus-navbar .dropdown-menu.show { display: block; }
.pilotus-navbar .dropdown-item { padding:.55rem 1rem; }
.pilotus-navbar .dropdown-item:active { background: #f1f3f5; color:#111; }

.pilotus-btn { background-color: var(--pilotus-musturd); color: #fff; border-radius: 4px; font-weight: 500; text-decoration: none; }
.pilotus-btn:hover { background-color: var(--pilotus-musturd-light); color: #fff; }

/* Hero */
header.pilotus-hero { height: 83vh; position: relative; }
header.pilotus-hero .content { position: absolute; bottom: 40%; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; }

/* container for navbar use */
.academy-logo { display: inline-block; text-decoration: none; position: absolute; top: 0%; }
.logo-box { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 13vw; border-radius: 4px; }
/* .pilotus-navbar.scrolled .logo-box { box-shadow: 0 4px 6px -1px #000; }
.pilotus-navbar.sticky-fix .logo-box { box-shadow: 0 4px 6px -1px #000; } */
.logo-box img { width: 100%; height: auto; }
.logo-text { font-size: 10px; line-height: 1.5; text-align: center; }

/* Fullscreen Hero */
.pilotus-hero { position: relative; width: 100%; height: 100vh; overflow: hidden; }
#heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item { width: 100%; height: 100%; }
#heroCarousel .carousel-item > video, #heroCarousel .carousel-item > img { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.pilotus-hero .overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pilotus-hero .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; color: #fff; }

/* Sections */
.pilotus-intro{background:#f2f2f2}
.pilotus-stats{background:#f8f8f8;border-top:1px solid var(--pilotus-stroke);border-bottom:1px solid var(--pilotus-stroke)}
.pilotus-stat h3{font-size:2.3rem;margin:0}
.pilotus-stat p{margin:0;color:#666}

/* .pilotus-block{padding:3.5rem 0} */
.pilotus-block .img-wrap{position:relative;}
.pilotus-block img{width:100%;height:100%;object-fit:cover;max-height:250px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.pilotus-kicker{letter-spacing:.15em;text-transform:uppercase;color:#03151c;font-weight:700;font-size:.85rem}
.pilotus-block h3{color:var(--pilotus-ink)}
.pilotus-block p{color:#333}

.special-heading{ font-family:var(--pliotus-font-family); font-weight:700; letter-spacing:.5px; }
.special-heading-space{ font-family:var(--pliotus-font-family); font-weight:700; letter-spacing:9px; }
.pilotus-stat h3{ font-family:var(--pliotus-font-family); font-weight:700; letter-spacing:5px; font-size: 15; color:#03151c; }
.pilotus-stats-value .pilotus-stats-num,
.pilotus-stats-value .pilotus-stats-unit{ display:inline; }
@media (max-width: 767.98px){
  .pilotus-stat .pilotus-stats-value:not(.pilotus-stats-single-line){
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    line-height:1.15;
    letter-spacing:5px;
  }
  .pilotus-stats-value:not(.pilotus-stats-single-line) .pilotus-stats-num,
  .pilotus-stats-value:not(.pilotus-stats-single-line) .pilotus-stats-unit{
    display:block;
  }
  .pilotus-stats-value:not(.pilotus-stats-single-line) .pilotus-stats-unit{
    margin-top:.2rem;
  }
}

.pilotus-highlight{background:var(--pilotus-dark);color:#fff;padding:4rem 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.pilotus-badge{display:inline-block;background:var(--pilotus-musturd);border:1px solid var(--pilotus-musturd-light);color:#fff;border-radius:999px;padding:.25rem .65rem;font-size:.85rem;letter-spacing:.15em}
.pilotus-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:#fff}
.pilotus-play::after{content:"";display:block;border-left:22px solid var(--pilotus-accent);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:5px}
.pilotus-highlight .img-frame{position:relative;width:100%;height:100%;object-fit:cover;max-height:320px;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.3)}

.btn-outline-dark:hover{ background-color:var(--pilotus-dark); }
.btn-outline-dark{ border-color:#03151c; }
.btn-outline-yellow:hover{ background-color:var(--pilotus-musturd); color:#fff; }
.btn-outline-yellow{ border-color:var(--pilotus-musturd); }

.pilotus-cta{background:#fff;border:1px solid var(--pilotus-stroke);border-radius:20px}

.pilotus-faq .accordion-button{font-weight:600; background-color:var(--pilotus-dark); color:#fff;}
.pilotus-faq .accordion-button:not(.collapsed){background:#f6f7f9; color:#03151c;}
.pilotus-faq .accordion-button {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.faq-heading-block { border-left: 2px solid #03151c; padding-left: 10px;}

.pilotus-insta img{aspect-ratio:1/1;object-fit:cover;border-radius:10px}

.pilotus-footer{background:var(--pilotus-dark);color:#d9d9d9}
.pilotus-footer a{color:#ececec}
.pilotus-footer a:hover{text-decoration:underline}
/* Touch targets: min size + spacing (a11y); no color changes */
.pilotus-footer .list-unstyled li > a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0.3rem 0;
  box-sizing:border-box;
}
.pilotus-footer .list-unstyled li + li{ /*! margin-top:4px; */ }
.pilotus-footer .d-flex.gap-3 a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0.3rem 0.5rem;
  margin:-0.1rem;
}
.pilotus-footer .d-flex.gap-3{ gap:0.85rem !important; flex-wrap:wrap; }
.pilotus-footer .d-flex.gap-3.flex-wrap a[aria-label]{
  min-width:48px;
  min-height:48px;
  justify-content:center;
  padding:0.4rem;
  margin:0;
}

/* Toggler + mobile menu — white icon only on dark hero; dark icon when bar is light or on mobile (avoids invisible hamburger) */
.navbar-toggler{
  position:absolute;
  top:0%;
  z-index: 1055; /* above logo / absolute children */
  border-color:#fff !important;
}
.pilotus-navbar.scrolled .navbar-toggler{ border-color:#03151c !important; }
.pilotus-navbar.scrolled .navbar-toggler-icon{ --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2303151c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
.pilotus-navbar.sticky-fix .navbar-toggler{ border-color:#03151c !important; }
.pilotus-navbar.sticky-fix .navbar-toggler-icon{ --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2303151c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
/* Default (over dark hero / video): light strokes */
.pilotus-navbar:not(.scrolled):not(.sticky-fix) .navbar-toggler-icon{ --bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }

/* Course CSS */
    /* Hero */
    .course-hero{ position:relative; min-height: 52vh; background:#000; display:grid; place-items:end center; }
    .course-hero .bg-media{ position:absolute; inset:0; background: url('/images/unsplash/photo-1529070538774-w1400.jpg') center/cover no-repeat; }
    .course-hero .overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75)); }
    .course-hero .content{ position:relative; z-index:2; color:#fff; padding:4rem 0 2.75rem; width:100%; }
    .course-hero h1{ font-family:var(--pliotus-font-family); font-weight:700; }
    .crumbs{ color:#e9ecef; opacity:.9; }
    .crumbs a{ color:#fff; text-decoration:underline; }

    /* Sections */
    .section{ padding:3.25rem 0; }
    .section-muted{ background:#f8f9fb; border-top:1px solid var(--pilotus-stroke); border-bottom:1px solid var(--pilotus-stroke); }

    .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border:1px solid var(--pilotus-stroke); border-radius:999px; font-size:.8rem; color:#333; background:#fff; }
    .chip i{ font-size:1rem; }
    .note{ background:#fff; border:1px solid var(--pilotus-stroke); border-left:4px solid #0d6efd; border-radius:10px; padding:1rem 1rem 1rem 1.1rem; }

    .panel{ background:#fff; border:1px solid var(--pilotus-stroke); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.05); }
    .panel .panel-body{ padding:1.25rem; }
    .syllabus-list{ columns:2; column-gap:1.25rem; padding-left:1.1rem; }
    .syllabus-list li{ margin:.25rem 0; break-inside:avoid; }

    .band-dark{ background:var(--pilotus-dark); color:#fff; }
    .img-frame{ position:relative; width:100%; max-height:320px; overflow:hidden; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.25); }
    .img-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
    .play-pill{ position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:.55rem; background:#fff; color:#000; padding:.45rem .75rem; border-radius:999px; font-weight:600; }
    .apply-band{ background:#886a16; color:#fff; }

    /* Course detail page content: timeline, info-cards, syllabus, why-choose, cta */
    .course-detail-page{ font-size: 1.05rem; }
    .course-detail-page .section{ padding:3.25rem 0; }
    .course-detail-page .section.section-lg{ padding:4rem 0; }

    /* Title typography (Emirates-like hierarchy) */
    .course-detail-page .header-block-update{
      background: rgba(18, 21, 24, .72); /* charcoal */
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      border-radius: 0px 12px 0px 0px;
    }
    .course-detail-page .header-block-update .hero-title{
      font-family: 'Merriweather', serif;
      font-weight: 700;
      font-size: clamp(22px, 4vw, 48px);
      line-height: 1.08;
      letter-spacing: .2px;
      margin: 0;
      text-align: right;
    }
    .course-detail-page h2{
      font-size: clamp(22px, 2.2vw, 34px);
      font-weight: 800;
      color: var(--pilotus-ink);
      margin-bottom: 1rem;
      letter-spacing: .1px;
    }
    .course-detail-page .timeline h2{
      font-size: clamp(18px, 1.9vw, 26px);
      margin-bottom: .65rem;
    }
    .course-detail-page h3{
      font-size: clamp(20px, 2vw, 28px);
      font-weight: 900;
      color: var(--pilotus-ink);
    }
    .course-detail-page h5{
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--pilotus-ink);
    }

    /* Timeline (clean + premium, no heavy cards) */
    .course-detail-page .timeline{ position:relative; padding-left:60px; }
    .course-detail-page .timeline::before{
      content:"";
      position:absolute;
      left:24px;
      top:10px;
      bottom:10px;
      width:3px;
      border-radius:999px;
      background: linear-gradient(180deg, rgba(217,169,54,.95), rgba(215,160,28,.25));
      opacity: .95;
    }
    .course-detail-page .timeline-block{
      position:relative;
      margin-bottom:22px;
      padding: 2px 0;
      transition: transform .2s ease;
    }
    .course-detail-page .timeline-block:hover{
      transform: translateY(-1px);
    }
    .course-detail-page .timeline-dot{
      position:absolute;
      left:-43px;
      top:6px;
      width:16px;
      height:16px;
      border-radius:50%;
      background: var(--pilotus-musturd);
      box-shadow: 0 0 0 5px rgba(217,169,54,.18);
    }
    .course-detail-page .timeline-block h2{
      display:inline-block;
      position:relative;
      padding-bottom:10px;
    }
    .course-detail-page .timeline-block h2::after{
      content:"";
      position:absolute;
      left:0;
      bottom:2px;
      width:120px;
      height:3px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(217,169,54,.95), rgba(217,169,54,.0));
    }
    .course-detail-page .timeline p{
      color:#1f2937;
      line-height:1.85;
      margin: 10px 0 0;
      padding-right: 14px;
    }
    .course-detail-page .timeline ul{
      margin: 10px 0 0;
      padding-left: 1.2rem;
      line-height:1.9;
    }
    .course-detail-page .timeline li{
      margin: .15rem 0;
      color:#111;
    }
    .course-detail-page .info-card{ background:#fff; border:1px solid var(--pilotus-stroke); border-radius:14px; padding:30px; text-align:center; transition:.3s; }
    .course-detail-page .duration-grid > [class*="col-"]{ display:flex; }
    .course-detail-page .info-card{ width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
    .course-detail-page .info-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.08); }
    .course-detail-page .info-card h4{ color:var(--pilotus-musturd); font-weight:700; }
    .course-detail-page .info-card h4{ font-size: clamp(22px, 2vw, 30px); margin: 8px 0 0; }
    .course-detail-page .info-card h6{ color:var(--pilotus-muted); font-weight:700; font-size:.95rem; }
    .course-detail-page .syllabus h5{ border-left:4px solid var(--pilotus-musturd); padding-left:10px; margin-top:35px; font-weight:700; }
    .course-detail-page .syllabus h5:first-of-type{ margin-top:25px; }
    .course-detail-page .syllabus ul{ margin-bottom:0; }

    /* Interactive syllabus using native details/summary */
    .course-detail-page .syllabus-topic{
      background:#fff;
      border:1px solid var(--pilotus-stroke);
      border-radius:14px;
      padding: 0;
      margin: 14px 0;
      overflow:hidden;
      box-shadow: 0 10px 24px rgba(0,0,0,.04);
      position:relative;
    }
    .course-detail-page .syllabus-topic::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:4px;
      background: linear-gradient(180deg, rgba(217,169,54,.95), rgba(215,160,28,.35));
      opacity:.9;
      pointer-events:none;
    }
    .course-detail-page .syllabus-topic summary{
      cursor:pointer;
      padding: 20px 26px;
      font-weight: 900;
      color: var(--pilotus-ink);
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 0;
      list-style: none;
      user-select:none;
      background: #fbfbfd;
      position: relative;
    }
    .course-detail-page .syllabus-topic summary:hover{
      background: #fff;
    }
    .course-detail-page .syllabus-topic[open] summary{
      background: #fff;
    }
    .course-detail-page .syllabus-topic summary::after{
      content:"+";
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(217,169,54,.12);
      color: var(--pilotus-musturd);
      font-size: 16px;
      font-weight: 900;
      flex: 0 0 auto;
      border: 1px solid rgba(217,169,54,.18);
      transition: transform .15s ease, background .15s ease;
      position: relative;
      z-index: 2;
    }
    .course-detail-page .syllabus-topic summary:hover::after{
      transform: scale(1.04);
    }
    .course-detail-page .syllabus-topic[open] summary::after{ content:"-"; }
    .course-detail-page .syllabus-topic summary::-webkit-details-marker{ display:none; }
    .course-detail-page .syllabus-no{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 34px;
      height: 30px;
      border-radius: 8px;
      background: rgba(217,169,54,.12);
      color: var(--pilotus-musturd);
      font-weight: 900;
      font-size: .95rem;
      flex: 0 0 auto;
    }
    .course-detail-page .syllabus-topic[open] summary{ background: rgba(217,169,54,.06); }
    .course-detail-page .syllabus-topic p{ padding: 0 26px 14px 26px; margin: 0; line-height: 1.7; }
    .course-detail-page .syllabus-topic ul{ padding: 0 26px 22px 40px; margin: 0; }
    .course-detail-page .syllabus-topic ul li{
      margin: 7px 0;
      line-height: 1.7;
      color: #111;
    }

    .course-detail-page .why-list{ list-style:none; padding:0; }
    .course-detail-page .why-list li{ display:flex; gap:12px; margin-bottom:12px; font-size:1.05rem; }
    .course-detail-page .why-list .check-icon{
      background:#1bb31b;
      color:#fff;
      width:22px;
      height:22px;
      min-width:22px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:4px;
      margin-top: 2px;
    }
    .course-detail-page .why-list .check-icon svg{ display:block; }

    /* Duration band: charcoal background + white text outside the cards */
    .course-detail-page .duration-band{
      background: var(--pilotus-dark) !important;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .course-detail-page .duration-band h2{ color:#fff; margin-bottom:.75rem; }
.course-detail-page .duration-band h2{
  color: #f8fbff !important;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
    .course-detail-page .duration-band p{ color:#fff; }
    .course-detail-page .duration-band strong{ color:#fff; font-weight: 800; }
.course-detail-page .duration-band p,
.course-detail-page .duration-band li,
.course-detail-page .duration-band span,
.course-detail-page .duration-band div {
  color: #e9f2ff !important;
}
.course-detail-page .duration-band strong,
.course-detail-page .duration-band b {
  color: #ffffff !important;
}
    .course-detail-page .duration-band .info-card{
      background:#fff;
      border-color: rgba(255,255,255,.2);
    }
    .course-detail-page .duration-band .info-card p{ color:#17181a; }
.course-detail-page .duration-band .info-card p,
.course-detail-page .duration-band .info-card li,
.course-detail-page .duration-band .info-card span,
.course-detail-page .duration-band .info-card div {
  color: #17181a !important;
}
.course-detail-page .duration-band .info-card h6{
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  font-weight: 600;
  color: #1f2937;
}
.course-detail-page .duration-band .info-card h4{
  font-size: clamp(1.35rem, 1.45vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  color: #22324a;
}
    .course-detail-page .duration-accent{
      height:3px;
      background: linear-gradient(90deg, rgba(217,169,54,.12), rgba(217,169,54,.95), rgba(217,169,54,.12));
      border-radius: 999px;
      margin: 22px 0 8px;
      opacity: .9;
    }
    .course-detail-page .cta-band{ background:var(--pilotus-dark); color:#fff; text-align:center; padding:70px 0; }
    .course-detail-page .cta-band h3{ margin-bottom:24px; }    
    .course-detail-page .cta-band .pilotus-btn{ background:var(--pilotus-musturd); border:none; padding:14px 35px; color:#fff; font-weight:600; border-radius:4px; }
    .course-detail-page .cta-band .pilotus-btn:hover{ background:var(--pilotus-musturd-light); color:#fff; }
    .course-detail-page .panel h5{ border-left:4px solid var(--pilotus-musturd); padding-left:10px; margin-top:1rem; font-weight:700; }

    /* Why Choose (match screenshot tile list) */
    .course-detail-page .why-choose-cards{
      background: transparent;
      color: var(--pilotus-musturd);  
      padding: 2.6rem 0;
      margin-top: 1.5rem;
      border-top: none;
      border-bottom: none;
    }
    .course-detail-page .why-cards-panel{
      background: transparent;
    }
    .course-detail-page .why-cards-panel h3{
      color:var(--pilotus-ink);
      font-weight: 900;
      font-size: clamp(20px, 2vw, 28px);
      margin-bottom: 1rem;
      letter-spacing: .2px;
    }
    .course-detail-page .why-cards{
      display:grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    @media (min-width: 992px){
      .course-detail-page .why-cards{ grid-template-columns: 1fr; }
    }
    .course-detail-page .why-card{
      display:flex;
      gap: 14px;
      align-items:flex-start;
      padding: 9px 12px;
      border-radius: 14px;
      border: 1px solid rgba(18,49,61,.14);
      background: rgba(18,49,61,.04);
      box-shadow: 0 10px 24px rgba(16,24,40,.06);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .course-detail-page .why-card:hover{
      transform: translateY(-2px);
      background: rgba(18,49,61,.06);
      box-shadow: 0 16px 32px rgba(16,24,40,.10);
    }
    .course-detail-page .why-card-ico{
      width: 28px;
      height: 28px;
      border-radius: 10px;
      display:grid;
      place-items:center;
      background: rgba(217,169,54,.10);
      border: 1px solid rgba(217,169,54,.25);
      flex: 0 0 auto;
      margin-top: 2px;
    }
    .course-detail-page .why-card-ico i{
      color: #12313d;
      font-size: 14px;
      line-height: 1;
    }
    .course-detail-page .why-card span:last-child{
      font-weight: 700;
      line-height: 1.4;
      font-size: .98rem;
      color: var(--pilotus-ink);
    }

    /* Fallback icons when CMS sanitization strips the inner <span>/<i> markup.
       This will show icons using ::before + nth-child (8 tiles). */
    .course-detail-page .why-card::before{
      content:'';
      width: 28px;
      height: 28px;
      border-radius: 10px;
      display:grid;
      place-items:center;
      background: rgba(217,169,54,.10);
      border: 1px solid rgba(217,169,54,.25);
      flex: 0 0 auto;
      margin-top: 2px;
      font-size: 16px;
      margin-right: 14px;
    }
    .course-detail-page .why-card:nth-child(1)::before{ content:'🎓'; }
    .course-detail-page .why-card:nth-child(2)::before{ content:'🧑‍🏫'; }
    .course-detail-page .why-card:nth-child(3)::before{ content:'📱'; }
    .course-detail-page .why-card:nth-child(4)::before{ content:'⚡'; }
    .course-detail-page .why-card:nth-child(5)::before{ content:'📝'; }
    .course-detail-page .why-card:nth-child(6)::before{ content:'🙂'; }
    .course-detail-page .why-card:nth-child(7)::before{ content:'💻'; }
    .course-detail-page .why-card:nth-child(8)::before{ content:'👥'; }
    /* If icon markup exists, hide fallback to avoid double icons */
    .course-detail-page .why-card:has(.why-card-ico)::before{
      display:none;
    }

    /* tiny inner polish: divider line on left */
    .course-detail-page .why-card{
      position: relative;
    }
    .course-detail-page .why-card::after{
      content:"";
      position:absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 99px;
      background: linear-gradient(180deg, rgba(217,169,54,.35), rgba(217,169,54,.75));
      opacity: .55;
      pointer-events:none;
    }
/* Course CSS */

/*About Training Facilities*/
/* === Training Facilities page (scoped, non-breaking) === */
.tf-intro{position:relative; padding:3rem 0 2rem;}
.tf-intro .tf-rule{position:absolute; left:0; top:0; width:2px; height:100%; background:var(--pilotus-accent);}
.tf-intro .tf-wrap{position:relative; padding-left:1.2rem;}

.tf-stats{background:#f8f8f8; border-top:1px solid var(--pilotus-stroke); border-bottom:1px solid var(--pilotus-stroke); padding:1.75rem 0;}
.tf-stat{display:flex; gap:.9rem; align-items:flex-start;}
.tf-stat .ico{width:42px; height:42px; border-radius:999px; background:#f1f3f5; display:grid; place-items:center; flex:0 0 42px;}
.tf-stat .val{font-size:2.2rem; line-height:1; font-weight:800; color:var(--bs-secondary-color) !important;}
.tf-stat .note{font-size:.85rem; color:#444; margin:0;}

.tf-band{padding:3rem 0;}

/* KPI cards */
.tf-stats{background:#f8f8f8;border-top:1px solid var(--pilotus-stroke);border-bottom:1px solid var(--pilotus-stroke);padding:2.75rem 0}
.tf-kpi{min-height: 150px;background:#fff;border:1px solid var(--pilotus-stroke);border-radius:16px;display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;box-shadow:0 4px 14px rgba(0,0,0,.04);transition:transform .18s ease, box-shadow .18s ease}
.tf-kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.tf-kpi .ico{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:#eef2f6;color:#0c2d3c;font-size:1.1rem;flex:0 0 44px}
.tf-kpi .num{font-size:2.4rem;line-height:1;font-weight:800;margin:0;
  background:linear-gradient(90deg,#0f3b4f,#6aa2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tf-kpi .text{margin:0;color:#4a4f56;font-size:.92rem}
@media (max-width: 767.98px){
  .tf-kpi{padding:.9rem 1rem}
  .tf-kpi .num{font-size:2rem}
  .logo-box{ width: 20vw; }
}
/* uses existing .img-frame from your Course CSS, and .apply-band already defined */
/* =================== PilotUs: Team Section (scoped) =================== */
.pfta-team{position:relative; padding:4rem 0; background:#ffffff; overflow:hidden;}
.pfta-team.section-dark .eyebrow{letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:700;font-size:.8rem}

/* decorative arcs like the dribbble shot */
.pfta-arc{position:absolute; inset:auto 0 0 0; height:480px; pointer-events:none; background:conic-gradient(from 180deg at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0)); mask-image:radial-gradient(70% 100% at 50% 0%, #000 20%, transparent 70%);}
.pfta-arc--top{top:-320px; bottom:auto; opacity:.55; filter:blur(1px);}
.pfta-arc--bottom{bottom:-420px; opacity:.28;}

/* group header + arrows */
.pfta-team__group{position:relative}
.pfta-team__title{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.pfta-team__title h3{font-weight:700; letter-spacing:.3px}
.pfta-team__arrows{display:flex; gap:.5rem}
.pfta-arrow{width:40px; height:40px; border-radius:999px; background:var(--pilotus-musturd); border:1px solid rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; transition:all .2s ease}
.pfta-arrow:hover{transform:translateY(-2px); background:var(--pilotus-musturd-light)}

/* horizontal, snap scrolling track */
.pfta-track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 280px); gap:18px; overflow-x:auto; padding:10px; scroll-snap-type:x mandatory; scrollbar-width:none; background: #bfbfbfd9;border-radius: 5px;}
.pfta-track::-webkit-scrollbar{display:none}

/* card shells */
.pfta-card{position:relative; height:360px; border-radius:22px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 60px rgba(0,0,0,.35); scroll-snap-align:start; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.pfta-card:hover{transform:translateY(-4px); box-shadow:0 28px 80px rgba(0,0,0,.5); border-color:rgba(255,255,255,.14)}

/* portrait card */
.pfta-card__img{position:absolute; inset:0}
.pfta-card__img img{width:100%; height:100%; object-fit:cover; filter:saturate(1.03) contrast(1.02)}
.pfta-card__body{position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(180deg, rgba(5,7,11,0) 0%, rgba(5,7,11,.85) 65%, rgba(5,7,11,.98) 100%); color:#fff;}
.pfta-card__name{margin:0; font-weight:800}
.pfta-card__role{margin:2px 0 0; opacity:.85}

/* hover-reveal panel */
.pfta-card__reveal{position:absolute; inset:auto 12px 12px 12px; background:rgba(9,13,20,.85); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:12px 14px; opacity:0; transform:translateY(10px); transition:all .25s ease; backdrop-filter:blur(4px); color: #fff;}
.pfta-card:hover .pfta-card__reveal{opacity:1; transform:translateY(0)}

/* center “grid” card like the middle one in the shot */
.pfta-card--focus{display:grid; place-items:center; background:
  radial-gradient(120% 120% at 20% 0%, rgba(101,125,255,.18), transparent 40%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
.pfta-card__grid{position:relative; width:85%; height:85%; border-radius:18px; border:1px solid rgba(255,255,255,.12); background-image:
  linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px, 40px 40px; display:flex; flex-direction:column; gap:.4rem; justify-content:center; padding:18px; text-align:left}
.pfta-card__blurb{opacity:.85; font-size:.92rem; margin:0}
.pfta-card--focus .pointer{position:absolute; top:10px; right:12px; opacity:.6}

/* responsiveness */
@media (max-width: 575.98px){
  .pfta-track{grid-auto-columns:85%}
  .pfta-card{height:330px}
}
/* ===== Testimonials page (scoped: .tst-*) ===== */
:root{ --tst-blue1:#886a16d9; --tst-blue2:#886a16; }

.tst-hero{
  position:relative; padding:84px 0 110px; overflow:hidden;
  background:linear-gradient(180deg, var(--pilotus-musturd) 0%, var(--pilotus-musturd-light) 56%, #fff 57%, #fff 100%);
}
.tst-hero__faces{
  position:absolute; inset:0 0 auto 0; height:320px; opacity:.20;
  filter:contrast(1.05) blur(1.2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 82%, #fff 100%),
    url("/images/unsplash/photo-1512436991641-w1280.jpg") center/cover no-repeat;
  pointer-events:none;
}

/* white board */
.tst-board{
  position:relative; z-index:2; background:#fff; border:1px solid #eceef3; border-radius:14px;
  padding:54px 86px 40px; box-shadow:0 28px 80px rgba(16,24,40,.18);
}
.tst-head{text-align:center; margin:-6px 0 28px;}
.tst-dash{width:48px;height:6px;background:#f6c046;border-radius:999px;display:block;margin:0 auto 14px;}
.tst-title{margin:0;font-weight:900;letter-spacing:.2px;}
.tst-sub{margin:6px 0 0;color:#667085}

/* slider core */
.tst-viewport{position:relative; overflow:hidden;}
.tst-track{display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1); margin-top:30px;}
.tst-slide{flex:0 0 100%; position:relative; min-height:220px;}

/* avatar + blue blobs (exact ref look) */
.tst-avatar-wrap{
  position:absolute; left:40%; top:40px; transform:translate(calc(-50% - 265px), -26%);
  width:126px; height:126px; border-radius:50%; overflow:hidden; border:6px solid #fff;
  box-shadow:0 18px 46px rgba(0,0,0,.18); z-index:2;
}
@media (min-width: 1100px) {
  .tst-avatar-wrap {
    transform: translate(calc(-100% - 175px), -24%);
    width: 110px;
    height: 110px;
  }
}
@media (min-width: 1250px) {
  .tst-avatar-wrap {
    transform: translate(calc(-100% - 230px), -24%);
    width: 110px;
    height: 110px;
  }
}
.tst-blob{position:absolute; border-radius:50%; z-index:1; pointer-events:none;}
.tst-blob--big{width:168px;height:168px;left:-33px;top:-25px;background:radial-gradient(circle at 36% 36%, transparent 46%, var(--pilotus-musturd) 47%);}
.tst-blob--small{width:136px;height:136px;left:-25px;top:65px;background:radial-gradient(circle at 55% 45%, transparent 36%, var(--pilotus-musturd-light) 37%);}
.tst-avatar{width:100%;height:100%;object-fit:cover;display:block;}

/* quote right side */
.tst-quote-area{margin-left:50px; padding-left:110px; position:relative;}
.tst-quote-area::before{
  content:"\201C"; position:absolute; left:48px; top:-18px; font-size:66px; color:#e9edf2; line-height:1; font-family:var(--pliotus-font-family);
}
.tst-quote{margin:0 0 16px; color:#5b6674; font-style:italic; line-height:1.8;}
.tst-name{margin:0; font-weight:800; font-size:1.22rem; color:var(--pilotus-musturd);}
.tst-place{margin:2px 0 0; font-size:.9rem; color:#9aa3af;}

/* arrows — placed higher than text + clickable */
.tst-arrow{
  position:absolute; top:42%; transform:translateY(-50%); /* << higher than text */
  width:44px; height:44px; border-radius:50%; border:1px solid #e6e7ea; background:#fff; color:#111;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.12);
  z-index:5; /* << above text so always clickable */
}
.tst-arrow--left{ left:16px; color:#9aa3af; }
.tst-arrow--right{ right:16px; background:var(--tst-blue1); color:#fff; border-color:var(--tst-blue2); }
.tst-arrow:hover{ transform:translateY(-50%) scale(1.05); }

/* pager */
.tst-pager{display:flex;justify-content:center;gap:8px;margin-top:18px;}
.tst-dot{width:28px;height:3px;background:#e5e7eb;border-radius:6px;transition:width .25s,background .25s;}
.tst-dot--active{width:42px;background:linear-gradient(90deg,var(--pilotus-musturd),var(--pilotus-musturd-light));}
.tst-arrow{ line-height: 40px; }

/* responsive */
@media (max-width:1100px){
  .tst-board{padding:46px 32px 36px;}
  .tst-avatar-wrap{transform:translate(calc(-50% - 200px), -24%); width:110px;height:110px;}
  .tst-quote-area{margin-left:50px; padding-left:90px;}
}
@media (max-width:720px){
  .tst-avatar-wrap{position:relative;left:auto;top:auto;transform:none;margin:0 auto 12px;}
  .tst-blob--big,.tst-blob--small{display:none;}
  .tst-quote-area{margin:0;padding:0;}
  .tst-quote-area::before{display:none;}
  .tst-arrow{ top:30%; } /* mobile */
}

/*About Training Facilities*/

@media screen and (max-width: 1024px) {
  /* min-height avoids clipping the toggler (was height:40px — hamburger clipped / invisible) */
  .navbar-container{ min-height:52px; }
  /* Keep header logo compact (global .logo-box{width:20vw} at 767px was widening the nav logo) */
  .pilotus-navbar .academy-logo .logo-box{ width: auto; max-width: 56px; }
  .pilotus-navbar .academy-logo .logo-box img{ max-height: 44px; width: 100%; object-fit: contain; }
  .navbar-collapse { background-color:#fff !important; max-height:70vh; width: 270px; position:absolute; top:50px; right:2%; text-align:left; border-radius:10px; padding:10px; overflow:auto; box-shadow:0 20px 40px rgba(0,0,0,.18); z-index: 1040; }
  .pilotus-navbar .nav-link{ color:#000 !important; font-weight:500; border-bottom:1px solid #eee; margin:.25rem 0; }
  .pilotus-navbar .nav-link:hover{ color:#7b7575 !important; }
  /* make dropdown expand full width inside the mobile panel */
  .pilotus-navbar .dropdown-menu{ position: static; float:none; transform:none; display:block; border:none; box-shadow:none; padding-left:.5rem; }
  .pilotus-navbar .dropdown-toggle::after{ float:right; margin-top:.6rem; }
}
/* Mobile dropdown: inline, neat, and scrollable */
@media (max-width: 1024px) {
  .pilotus-navbar .dropdown-menu {
    position: static;
    float: none;
    transform: none;
    border: none;
    box-shadow: none;
    padding-left: .5rem;
    max-height: 55vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
  }
  .pilotus-navbar .dropdown-menu.show { display: block; }
}

@media screen and (min-width: 769px) { .navbar-toggler{ right: 2% !important; } .navbar-collapse { right: 2% !important; } }
@media screen and (max-width: 768px) { .navbar-toggler{ right: 4% !important; } .navbar-collapse { right: 4% !important; } .header.pilotus-hero{ height: 75vh; } }


/* === FAQ page (scoped: .faq-*) === */
.faq-hero .bg-media{
  background: url('/images/unsplash/photo-1517404215738-w1400.jpg') center/cover no-repeat;
}
.faq-hero .overlay{
  background: linear-gradient(180deg, rgba(3,21,28,.55), rgba(3,21,28,.85));
}
.faq-hero .content{ padding:4rem 0 2.75rem; }
.faq-hero .crumbs{ color:#e9ecef; opacity:.9; }
.faq-hero .crumbs a{ color:#fff; text-decoration:underline; }

/* Section wrapper uses your .section + .section-muted already.
   Minor tweaks only for faq page */
.faq-wrap h4{
  color: var(--pilotus-ink);
  margin-bottom: .75rem;
}

/* Accordion look binds to your existing .pilotus-faq rules;
   Only small spacings/edges for this page */
.faq-acc .accordion-item{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--pilotus-stroke);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  margin-bottom: .75rem;
}
.faq-acc .accordion-button{
  /* your global .pilotus-faq .accordion-button colors will apply */
  padding: .85rem 1rem;
}
.faq-acc .accordion-body{
  background: #fff;
}

/* Optional left TOC panel (kept minimal) */
.faq-toc .list-group-item{
  border: none;
  padding-left: 0;
  padding-right: 0;
}
.faq-toc .list-group-item:hover{
  text-decoration: underline;
}

/* Responsive niceties */
@media (max-width: 992px){
  .faq-toc .panel{ position: static !important; }
}

/* === Careers page (scoped) === */
.career-section .lead{ color:#3a3a3a; }
.career-figure img{ aspect-ratio: 4 / 3; object-fit: cover; display:block; }

/* simple checklist */
.career-list{ list-style:none; padding-left:0; margin:0; }
.career-list li{ display:flex; align-items:flex-start; gap:.5rem; margin:.35rem 0; color:#333; }
.career-list i{ color: var(--pilotus-accent); line-height:1.4; }

/* subtle highlight panel for contact line */
.career-note{ border-left:4px solid var(--pilotus-accent); }

/* === Terms & Conditions page (scoped) === */
.terms-section h2 {
  font-family:var(--pliotus-font-family);
  font-weight: 700;
  color: var(--pilotus-ink);
  padding-top:20px;
}
.terms-block h5 {
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--pilotus-accent);
}
.terms-block p {
  margin-bottom: 0;
  color: #333;
  line-height: 1.7;
}
.terms-section a {
  color: var(--pilotus-accent);
  text-decoration: underline;
}

/* Privacy Policy Page */
.policy-page {
  padding: 4rem 0;
}
.policy-page h1 {
  font-family:var(--pliotus-font-family);
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.policy-page h5 {
  font-weight: 600;
  margin-top: 2rem;
  color: var(--pilotus-ink);
}
.policy-page p {
  color: #333;
  line-height: 1.65;
}

/* ===== Applications page (scoped) ===== */
.apply-section .panel { border-radius: 16px; }
.apply-section h1 { padding-top: 20px; }
.apply-panel .panel-body { padding: 1.5rem; }

.apply-intro{
  position: relative;
  padding: .5rem 0 .75rem 1rem;
  margin: .25rem 0 1rem;
  border-left: 2px solid var(--pilotus-accent);
  background-color: #667085d1; 
}
.apply-eyebrow{
  display: inline-block;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .8rem;
  color: #fff;
  margin-bottom: .25rem;
}
.apply-intro p{ color:#fff; font-weight: 500; }

.apply-card{
  background:#fff;
  border:1px solid var(--pilotus-stroke);
  border-radius:14px;
  padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.apply-h3{
  font-family:var(--pliotus-font-family);
  font-weight: 700;
  color: var(--pilotus-ink);
  font-size: 1.6rem;
}
.apply-note{
  color:#667085;
  margin-bottom: .9rem;
}

/* icons tone */
.apply-card i{ color: var(--pilotus-accent); }

/* responsive niceties */
@media (max-width: 575.98px){
  .apply-h3{ font-size: 1.4rem; }
}
/* Applications hero background (scoped) */
/* ===== Applications (scoped) ===== */
.apply-hero{
  background-image: url('/images/unsplash/photo-1531973576160-w960.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border-radius: 16px; overflow: hidden;
}
.apply-hero__overlay{ background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.12)); }

.apply-intro{
  position: relative; padding: .6rem 1rem; margin: .25rem 0 1rem;
  border-left: 2px solid var(--pilotus-accent); color: #fff;
  background: rgba(3,21,28,.35); border-radius: 8px;
}
.apply-eyebrow{
  display:inline-block; letter-spacing:.25em; text-transform:uppercase; font-weight:700; font-size:.8rem; opacity:.9;
}

.apply-card{ background:#fff; border:1px solid var(--pilotus-stroke); border-radius:14px; padding:1rem; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.apply-card i{ color: var(--pilotus-accent); }
.apply-h3{ font-family:var(--pliotus-font-family); font-weight:700; color:var(--pilotus-ink); font-size:1.6rem; }
.apply-note{ color:#667085; margin-bottom:.9rem; }

.apply-form{ border:1px solid var(--pilotus-stroke); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.05); background:#fff; }

/* === WhatsApp FAB (scoped) === */
.wa-fab{
  position: fixed;
  right: 18px;                  /* desktop: right side */
  bottom: 144px;                 /* sits above footer on scroll */
  z-index: 1050;                /* above page content, below modals if needed */
  width: 54px; height: 54px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: #25D366;          /* WhatsApp green */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s;
  text-decoration: none;
}
.wa-fab i{ font-size: 1.6rem; line-height: 1; }
.wa-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
  color:#fff;
}

/* Optional: move higher on small screens / safe area */
@media (max-width: 768px){
  .wa-fab{
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 125px));
    width: 52px; height: 52px;
  }
}
/* === WhatsApp FAB Two with Call Dialer === */
.wac-contact-fab {
  position: fixed;
  bottom: 144px;
  right: 20px;
  z-index: 9999;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.wac-fab-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  border: none;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
.wac-fab-options {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.wac-fab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  animation: slideUp 0.3s ease;
}
.wac-fab img {
  width: 22px;
  height: 22px;
}
.wac-whatsapp {
  background: #25D366;
}
.wac-call {
  background: #0b5ed7;
}
.wac-contact-fab.hide {
  transform: translateY(120px);
  opacity: 0;
}
.wac-fab-phone-icon {
  width: 26px;
  height: 26px;
  fill: #fff; /* WHITE ICON */
}
.wac-pilot-widget-btn{
    position:fixed;
    right:20px;
    bottom: 110px;

    background: linear-gradient(135deg,#0d6efd,#0047b3);
    color: #fff;
    border: none;
    padding: 16px 22px;
    border-radius: 50px;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    z-index: 9999;

    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    transition: .3s;
}
.wac-pilot-widget-btn:hover{
    transform: translateY(-2px);
}
.wac-pilot-modal{
    position:fixed;
    right:20px;
    bottom:180px;
    width:360px;
    background:#fff;
    border-radius:20px;
    padding:24px;
    display:none;
    z-index:99999;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);

    animation: wacSlideUp .25s ease;

    max-height: 85vh;
    overflow-y: auto;
}
.wac-modal-close{
    position:absolute;
    top:15px;
    right:15px;

    border:none;
    background:none;

    font-size:22px;

    cursor:pointer;
}

.wac-pilot-step{
    display: none !important;
}

.wac-pilot-step.active{
   display: block !important;
}

.wac-pilot-header h3{
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 1.3;
    color: #111;
}

.wac-pilot-header p{
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.wac-pilot-options{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.wac-pilot-options button{
    border:1px solid #ddd;
    background:#fff;
    padding: 15px;
    border-radius:12px;
    text-align:left;
    cursor:pointer;
    transition: .25s;

    font-size: 15px;
    font-weight: 500;
}

.wac-pilot-options button:hover{
    border-color:#0d6efd;
    background:#f5f9ff;
}

.wac-job-option{
    color: #d60000 !important;
}

.wac-pilot-modal input{
    width: 100%;

    margin-bottom: 14px;

    padding: 15px;

    border-radius: 14px;

    border: 1px solid #ddd;

    font-size: 15px;

    outline: none;

    box-sizing: border-box;
}
.wac-pilot-modal input:focus{
    border-color: #0d6efd;
}

.wac-pilot-next-btn,
.wac-pilot-close-btn{
    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 14px;

    background: #0d6efd;

    color: #fff;

    cursor: pointer;

    font-size: 15px;
    font-weight: 600;

    transition: .3s;
}
.wac-pilot-next-btn:hover,
.wac-pilot-close-btn:hover{
    opacity: .92;
}
.wac-pilot-action{
    display: block;

    text-align: center;

    padding: 15px;

    border-radius: 14px;

    text-decoration: none;

    color: #fff;

    margin-top: 12px;

    font-weight: 600;

    transition: .3s;
}
.wac-pilot-action:hover{
    transform: translateY(-1px);
}

@keyframes wacSlideUp{
    from{
        transform: translateY(20px);
        opacity: 0;
    }

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

#apply{
  background-color: #fff;
}
#apply .apply_block{
  margin-top: 0px !important;  
}

#apply h3{
  color: var(--pilotus-musturd);
}

/* Container ko positioning context do */
.pilotus-footer .container{ position: relative; }

/* Emirates-style transparent logo, container ke andar right-bottom */
.footer-stamp{
  position: absolute;
  right: 0;                 /* container ke right edge par */
  bottom: 12px;             /* footer ke andar bottom se thoda upar */
  width: 86px;
  height: 86px;
  z-index: 1040;            /* WA FAB (1050) se kam */
  display: block;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.footer-stamp img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.32)); /* halka lift */
}

/* Links ko stamp se takraane na do — thoda right padding */
.pilotus-footer .d-flex.gap-3:last-child{
  padding-right: 100px;     /* copyright row me space so stamp clear */
}

/* Small screens: chhota karo aur WA FAB se overlap avoid */
@media (max-width: 576px){
  .footer-stamp{ width: 70px; height: 70px; bottom: 14px; right: 0; }
  .pilotus-footer .d-flex.gap-3:last-child{ padding-right: 84px; }
}

/* Optional: agar WhatsApp FAB page par ho, to stamp ko thoda upar kar do */
@media (max-width: 768px){
  .wa-fab + .pilotus-footer .container .footer-stamp,
  .pilotus-footer .container .footer-stamp{
    bottom: 0px;           /* FAB se upar; agar zyada gap chahiye to badha lo */
    right: 12px
  }
    .wac-pilot-widget-btn{
        left: 12px;
        bottom: 18px;

        font-size: 14px;

        padding: 14px 18px;
    }

    .wac-pilot-modal{
        left: 12px;
        right: 12px;

        width: auto;

        bottom: 80px;

        padding: 20px;
    }

    .wac-pilot-header h3{
        font-size: 20px;
    }
}

/* ===== REUSABLE HERO CONTENT CLASSES ===== */
.hero-content-bottom-left {
  position: relative;
  height: 100%;
  padding-bottom: 60px;
}

.hero-content-bottom-left .hero-text {
  margin-bottom: 0;
}

.hero-content-bottom-left .hero-title {
  margin-bottom: 1rem;
}

.hero-content-bottom-left .hero-description {
  margin-bottom: 0;
}

/* ===== PASSWORD STRENGTH INDICATOR ===== */
.password-strength .progress {
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.password-strength .progress-bar {
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 4px;
}

.password-strength .progress-bar.bg-danger {
  background-color: #dc3545 !important;
}

.password-strength .progress-bar.bg-warning {
  background-color: #ffc107 !important;
}

.password-strength .progress-bar.bg-success {
  background-color: #198754 !important;
}

.password-strength-text {
  font-size: 0.875rem;
  font-weight: 500;
}

.pagination-block svg.w-5.h-5 {
  width: 16px;
}

.header-block-parent {
  overflow: visible;
}

.header-block-update {
	background: #000000d4;
	width: 50%;
	position: absolute;
	top: 69%;
	height: 35%;
	padding-right: 25px;
  border-radius: 0px 10px 10px 0px;
}

.header-block-update h1 {
	color: #fff;
	text-align: right;
	font-size: 45px;
	margin-top: 1.5rem;
}

.header-block-update p {
  color: #fff;
  text-align: right;
}

.header-block-upgrade {
	top: 20%;
  height: 100%;
}

.header-block-upgrade-text {
	top: 20%;
  height: 100%;
}

.header-block-upgrade-text h1 {
  font-size: 30px;
}

.header-block-course {
	background: #000000d4;
	width: 50% !important;
	position: absolute !important;
	top: 69%;
	height: 36%;
	padding: 21px 25px !important;
	border-radius: 0px 10px 10px 0px;
  padding-top: 20px !important;
}

.header-block-course h1 {
  font-size: 30px;
}

.header-block-course p {
  font-size: 16px;
}

@media (max-width: 768px){
  .header-block-course, .header-block-update, .header-block-upgrade {
    width: 100% !important;
    padding-left: 30px !important; 
   }
  .header-block-course h1, .header-block-update h1, .header-block-upgrade h1 {
    font-size: 30px !important;
    text-align: left !important;
  }
  .header-block-course p, .header-block-update p, .header-block-upgrade p {
    font-size: 16px !important;
    text-align: left !important;
  }
}

@media (max-width: 450px){
 .header-block-course, .header-block-update, .header-block-upgrade {
	  width: 100% !important;
  }
  .header-block-course h1, .header-block-update h1, .header-block-upgrade h1 {
    font-size: 20px !important;
    text-align: left !important;
  }
  .header-block-course p, .header-block-update p, .header-block-upgrade p {
    font-size: 12px !important;
    text-align: left !important;
  }
}

/* PilotUs custom v5 — minimal hero/video styles */

/* Fullscreen hero container */
.pilotus-hero{
  position: relative;
  width: 100%;
  height: 100vh;         /* occupy full viewport height */
  overflow: hidden;      /* hide overflow while we scale media */
}

/* Ensure the carousel and its slides inherit full height */
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item{
  width: 100%;
  height: 100%;
}

/* Video/Image inside hero: fill container elegantly */
#heroCarousel .carousel-item > video,
#heroCarousel .carousel-item > img{
  width: 100%;
  height: 100%;
  object-fit: fill;     /* fill without distortion; crops evenly */
  display: block;
  background: #000;      /* safe background for letterboxing cases */
}

/* Optional: if a direct <video> is used without carousel */
.pilotus-hero > video,
.pilotus-hero > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark title card variant used on some banners */
.hero-title-card{
  position: absolute;
  left: 0;
  bottom: 12%;
  background: rgba(15,17,19,.92);
  color:#fff;
  padding: 22px 28px;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  max-width: 560px;
}
.hero-heading{ line-height: 1.08; }
.hero-sub{ opacity:.9; }

/* Basic responsive tweaks */
@media (max-width: 992px){
  .pilotus-hero{ height: 80vh; }
  .hero-title-card{ bottom: 8%; max-width: 86%; padding: 18px 22px; }
}
@media (max-width: 576px){
  .pilotus-hero{ height: 70vh; }
  .hero-title-card{ bottom: 6%; left: 12px; right: 12px; max-width: none; }
}

.yt-clean-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
}

#yt-player iframe {
    pointer-events: none; /* disable click, prevents YT UI */
}

.yt-btn {
    position: absolute;
    bottom: 15px;
    left: 15px;
    padding: 8px 14px;
    background: black;
    color: white;
    border-radius: 6px;
    border: none;
    z-index: 99999;
    cursor: pointer;
}

/* New header block style to match screenshot */
.header-block-update {
	background: rgba(9,11,12,0.95);
	color: #fff;
	width: 48%;
	position: absolute;
	left: 0;
	top: 88%;
	transform: translateY(-50%);
	height: 25%;
	padding: 20px;
	border-radius: 0 12px 0px 0;
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
	z-index: 5;
	text-align: right;
}

/* Heading: stacked two-line style (big) */
.header-block-update .hero-title {
  margin: 0;
  font-family:var(--pliotus-font-family); /* you already loaded this font */
  font-size: clamp(16px, 2.5vw, 20px);   /* responsive large text */
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: right;
  color: #ffffff;
  display: block;
}

/* Smaller subtitle / lead */
.header-block-update .hero-sub {
  margin: 0px;
  font-size: clamp(13px, 1.2vw, 16px);
  color: rgba(255,255,255,0.85);
  text-align: right;
  line-height: 1.7;
}

/* Make panel full-width on small screens and left->center text */
@media (max-width: 1024px){
  .header-block-update {
    width: 100% !important;
  }
  .header-block-update .hero-title { font-size: clamp(18px, 2.5vw, 20px) !important; text-align: left; }
  .header-block-update .hero-sub { text-align: left; }
}
@media (max-width: 768px){
  .header-block-update {
    width: 100% !important;
  }
  .header-block-update .hero-title { font-size: clamp(16px, 2vw, 18px)!important; text-align: left; }
  .header-block-update .hero-sub { text-align: left; font-size: 15px !important; }
}
@media (max-width: 576px){
  .header-block-update {
    width: 100% !important;
    top: 89.5% !important;
    height: 21%;
  }
  .header-block-update .hero-title { font-size: clamp(16px, 1.5vw, 16px)!important; text-align: left; }
  .header-block-update .hero-sub { text-align: left; font-size: 15px !important;}
}

/* Question Bank Popup Styles */
.course-page .header-block-update .hero-title {
  font-family: var(--pliotus-font-family) !important;
  font-size: clamp(16px, 2.5vw, 20px) !important;
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.course-page .header-block-update .hero-sub {
  font-size: clamp(14px, 1.1vw, 17px);
  color: rgba(255, 255, 255, 0.92);
}

/* ── Course page: Emirates-style hero (large banner + bottom-left title strip) ── */
.course-page .efta-hero {
  --course-hero-body: clamp(1.05rem, 0.45vw + 0.88rem, 1.2rem);
  --course-hero-title: clamp(2rem, 2.8vw + 0.75rem, 3rem);
  position: relative;
  display: block;
  overflow: visible;
  margin-top: 0;
}

/* Large hero — min 80vh viewport coverage */
.course-page .efta-hero .course-hero__banner {
  position: relative;
  width: 100%;
  height: clamp(480px, 80vh, 920px);
  min-height: 80vh;
  overflow: hidden;
  background: #0a0c0e;
}

.course-page .efta-hero .course-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-page .efta-hero .course-hero__media--image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.course-page .efta-hero .course-hero__banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
}

/* Strip aligned to site .container (same as nav + page content) */
.course-page .efta-hero .course-hero__strip-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.course-page .efta-hero .course-hero__strip-wrap > .container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

/* Black bar: full bleed to viewport left; text stays container-aligned */
.course-page .efta-hero .course-hero__strip {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  background: transparent;
  overflow: visible;
}

.course-page .efta-hero .course-hero__strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(50% - 50vw);
  background: rgba(15, 15, 15, 0.88);
  z-index: 0;
}

.course-page .efta-hero .course-hero__strip-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.course-page .efta-hero .course-hero__strip-deco::before,
.course-page .efta-hero .course-hero__strip-deco::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Arcs anchored from bottom so they stay inside the black strip */
.course-page .efta-hero .course-hero__strip-deco::before {
  left: -18%;
  bottom: -72%;
  top: auto;
  width: clamp(200px, 28vw, 380px);
  height: clamp(200px, 28vw, 380px);
}

.course-page .efta-hero .course-hero__strip-deco::after {
  left: 8%;
  bottom: -85%;
  top: auto;
  width: clamp(140px, 18vw, 260px);
  height: clamp(140px, 18vw, 260px);
  border-color: rgba(255, 255, 255, 0.1);
}

.course-page .efta-hero .course-hero__strip-inner {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.65rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.1rem, 2.2vw, 1.65rem) 0;
}

/* Largest text on the page — above section headings */
.course-page .efta-hero .course-hero__title {
  margin: 0;
  font-family: var(--pliotus-font-family);
  font-size: var(--course-hero-title);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  display: block;
  white-space: nowrap;
}

.course-page .efta-hero .course-hero__title::after {
  content: "";
  display: block;
  width: clamp(36px, 4vw, 48px);
  height: 3px;
  background: var(--pilotus-musturd);
  margin-top: 0.5rem;
}

/* Subtitle / meta inside black strip (was below banner) */
.course-page .efta-hero .course-hero__strip-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.75rem;
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
}

.course-page .efta-hero .course-hero__strip-meta li {
  font-family: var(--pliotus-font-family);
  font-size: var(--course-hero-body);
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
}

@media (max-width: 991px) {
  .course-page .efta-hero .course-hero__banner {
    height: clamp(420px, 80vh, 720px);
    min-height: 80vh;
  }
}

@media (max-width: 768px) {
  .course-page .efta-hero {
    --course-hero-title: clamp(1.5rem, 4.5vw + 0.35rem, 2.15rem);
    --course-hero-body: clamp(1rem, 2.2vw + 0.55rem, 1.1rem);
  }

  .course-page .efta-hero .course-hero__banner {
    height: clamp(360px, 75vh, 600px);
    min-height: 75vh;
  }

  .course-page .efta-hero .course-hero__title {
    white-space: normal;
  }

  .course-page .efta-hero .course-hero__strip-inner {
    width: auto;
    padding: 1rem 1.15rem 1.15rem 0;
  }

  .course-page .efta-hero .course-hero__strip-meta {
    gap: 0.35rem 1.25rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .course-page .efta-hero .course-hero__banner {
    min-height: 70vh;
    height: clamp(320px, 70vh, 520px);
  }
}

/* ── Course CMS content: Emirates-inspired typography ── */
.course-page .cms-content {
  font-family: var(--pliotus-font-family);
  color: #444;
}

.course-page .cms-content h1 {
  font-size: clamp(2rem, 2.2vw, 2.4rem);
  line-height: 1.25;
  font-weight: 600;
  color: #0f172a;
}

.course-page .cms-content h2,
.course-page .course-detail-page h2 {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.28;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: 0;
  margin: 0 0 0.94rem;
}

.course-page .course-detail-page .timeline-block h2,
.course-page .course-detail-page .panel h2,
.course-page .course-detail-page .syllabus > h2,
.course-page .course-detail-page .duration-band h2,
.course-page .course-detail-page .why-cards-panel h3 {
  position: relative;
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0;
}

/* Gold accent line — below heading, slightly larger */
.course-page .course-detail-page .timeline-block h2::before,
.course-page .course-detail-page .panel h2::before,
.course-page .course-detail-page .syllabus > h2::before,
.course-page .course-detail-page .duration-band h2::before,
.course-page .course-detail-page .why-cards-panel h3::before {
  display: none;
}

.course-page .course-detail-page .timeline-block h2::after,
.course-page .course-detail-page .panel h2::after,
.course-page .course-detail-page .syllabus > h2::after,
.course-page .course-detail-page .why-cards-panel h3::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--pilotus-musturd);
  margin-top: 0.65rem;
  margin-bottom: 0;
  border-radius: 0;
}

.course-page .course-detail-page .duration-band h2::after {
  margin-top: 0.65rem;
  margin-inline: auto;
  background: var(--pilotus-musturd);
}

/* Lead intro — panel, syllabus intro, and Overview timeline only */
.course-page .course-detail-page .panel > .panel-body > p:first-of-type,
.course-page .course-detail-page .syllabus > p:first-of-type,
.course-page .course-detail-page .timeline-block:first-child > p:first-of-type {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  font-weight: 700;
  line-height: 1.65;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.course-page .course-detail-page .timeline-block:not(:first-child) > p:first-of-type {
  font-family: var(--pliotus-font-family);
  font-size: inherit;
  font-weight: 400;
  color: #555;
}

.course-page .cms-content h3,
.course-page .course-detail-page .why-cards-panel h3 {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  line-height: 1.35;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 0.75rem;
}

.course-page .cms-content h4,
.course-page .cms-content h6 {
  color: #334155;
}

.course-page .course-detail-page h5 {
  font-family: var(--pliotus-font-family);
  font-size: clamp(0.82rem, 0.88vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #777;
  margin: 1.3rem 0 0.5rem;
  padding-left: 0;
  border-left: none;
}

.course-page .course-detail-page .panel h5 {
  position: relative;
  padding-top: 0.375rem;
  margin-top: 1.125rem;
  padding-left: 0;
  border-left: none;
}

.course-page .course-detail-page .panel h5::before {
  display: none;
}

.course-page .course-detail-page .panel h5::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--pilotus-musturd);
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.course-page .cms-content h5 {
  font-size: clamp(0.98rem, 1.02vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #334155;
}

.course-page .cms-content p,
.course-page .cms-content li,
.course-page .course-detail-page p,
.course-page .course-detail-page li {
  font-family: var(--pliotus-font-family);
  font-size: clamp(0.97rem, 1vw, 1.03rem);
  line-height: 1.75;
  font-weight: 400;
  color: #555;
}

.course-page .course-detail-page .duration-band h2 {
  color: #fff !important;
  text-align: center;
  font-weight: 400;
}

.course-page .course-detail-page .why-cards-panel h3 {
  padding-top: 0.375rem;
}

.course-page .course-detail-page .syllabus-topic summary {
  font-family: var(--pliotus-font-family);
  font-size: clamp(1rem, 1.02vw, 1.08rem);
  font-weight: 600;
  color: #1a1a1a;
}

.course-page .course-detail-page .syllabus-topic p,
.course-page .course-detail-page .syllabus-topic li {
  font-size: clamp(0.95rem, 0.98vw, 1rem);
  color: #555;
}

.course-page .course-detail-page .why-card-title {
  font-size: clamp(0.98rem, 1vw, 1.08rem);
  font-weight: 600;
}

.course-page .course-detail-page .why-card p {
  font-size: clamp(0.93rem, 0.96vw, 0.98rem);
  color: #555;
}

.course-page .course-detail-page .info-card {
  border-radius: 0;
}

.course-page .course-detail-page .syllabus-topic {
  border-radius: 0;
}

.course-page .course-detail-page .panel {
  border-radius: 0;
  box-shadow: none;
  border-color: #e8e8e8;
}

.course-page .course-detail-page .why-card {
  border-radius: 0;
}

/* Course page layout polish (non-conflicting supplements) */
.course-page .course-detail-page .section {
  padding: 3rem 0;
}

.course-page .course-detail-page .info-card {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.course-page .course-detail-page .info-card:hover {
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.course-page .course-detail-page .duration-band {
  background: linear-gradient(135deg, #0e3443 0%, #123e52 100%) !important;
}

.course-page .course-detail-page .duration-accent {
  background: linear-gradient(90deg, rgba(216, 173, 71, 0.25), rgba(216, 173, 71, 1), rgba(216, 173, 71, 0.25));
}

.course-page .course-detail-page .syllabus-topic summary {
  background: #fcfdff;
}

.course-page .course-detail-page .syllabus-topic[open] summary {
  background: #f8fbff;
}

.course-page .course-detail-page .why-card {
  border: 1px solid rgba(20, 45, 72, 0.12);
  background: rgba(20, 45, 72, 0.03);
}

.course-page .course-detail-page .why-card span:last-child {
  color: #1a1a1a;
}

/* Clean section layout — drop timeline rail for Emirates-style blocks */
.course-page .course-detail-page .timeline {
  padding-left: 0;
}

.course-page .course-detail-page .timeline::before,
.course-page .course-detail-page .timeline-dot {
  display: none;
}

.course-page .course-detail-page .timeline-block {
  margin-bottom: 2.625rem;
  padding-bottom: 0;
}

.course-page .course-detail-page .timeline p {
  margin-top: 7px;
}

.course-page .course-detail-page .section-muted {
  background: #f7f7f7;
  border-color: #ececec;
}

@media (max-width: 768px) {
  .course-page .course-detail-page .section {
    padding: 2.25rem 0;
  }

  .course-page .cms-content h2,
  .course-page .course-detail-page h2 {
    font-size: clamp(1.45rem, 5.5vw, 1.75rem);
  }

  .course-page .cms-content h3,
  .course-page .course-detail-page .why-cards-panel h3 {
    font-size: clamp(1.2rem, 4.5vw, 1.45rem);
  }

  .course-page .cms-content p,
  .course-page .cms-content li,
  .course-page .course-detail-page p,
  .course-page .course-detail-page li {
    font-size: 0.95rem;
  }
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.popup-container {
    position: relative;
    width: 90%;
    max-width: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    /* overflow: hidden; */
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.popup-close {
    position: absolute;
    bottom: 0px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.popup-close:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: rotate(90deg);
}

.popup-content {
    position: relative;
    padding: 40px 30px;
    min-height: 200px;
}

.popup-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/unsplash/photo-1436491865332-w1280.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

.popup-inner {
    position: relative;
    z-index: 1;
}

.popup-title {
    font-size: 2rem;
    font-weight: 700;
    color: #17181a;
    margin: 0 0 16px 0;
    text-align: center;
}

.popup-description {
    font-size: 1rem;
    color: #667085;
    line-height: 1.6;
    margin: 0 0 28px 0;
    text-align: center;
}

.popup-button {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: #1a4d6e;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.popup-button:hover {
    background: #0d2d3f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 77, 110, 0.3);
    color: #fff;
}

/* DGCA Promotional Popup Styles */
.dgca-popup-container {
    width: 800px;
    max-width: 90%;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    aspect-ratio: 1200 / 675; /* Maintain image aspect ratio */
    max-height: 90vh;
}

.dgca-popup-content {
    position: relative;
    padding: 0;
    min-height: auto;
    width: 100%;
    height: 100%;
    aspect-ratio: 1200 / 675;
}

.popup-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.popup-background-image .popup-background-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.dgca-popup-inner {
    position: relative;
    z-index: 1;
    padding: 20px 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    text-align: center;
    height: 100%;
    width: 87%;
}

.dgca-popup-text {
    margin-bottom: 10px;
    width: 100%;
    padding-top: 0px;
}

.dgca-popup-headline {
    font-size: 1.60rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 15px 0;
    line-height: 1.3;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dgca-popup-headline .highlight-yellow {
    color: #ffd700;
    font-weight: 700;
}

.dgca-popup-subheadline {
    font-size: 1.090rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px 0;
    line-height: 1.4;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dgca-popup-subheadline .highlight-yellow {
    color: #ffd700;
    font-weight: 700;
}

.dgca-popup-description {
    font-size: 1rem;
    color: #fff;
    margin: 0;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.dgca-popup-cta {
    margin-top: 0px;
    width: 100%;
    max-width: 250px;
}

.dgca-popup-button {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    padding: 7px 15px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.dgca-popup-button strong {
    font-weight: 500;
}

/* Close button for DGCA popup – X centered in circle */
.dgca-popup-container .popup-close {
    bottom: -10%;
    right: 48%;
    width: 40px;
    height: 39px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 27px;
    font-weight: 300;
    padding: 0;
    z-index: 100;
    display: flex;
    justify-content: safe;
}

.dgca-popup-container .popup-close:hover {
    background: rgba(255, 255, 255, 1);
    transform: rotate(90deg);
}

@media (max-width: 576px) {
  .dgca-popup-button {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
  }
    .popup-container {
        width: 95%;
        margin: 20px;
    }

    .dgca-popup-cta {
      max-width: 165px !important;
    }

    .popup-content {
        padding: 30px 20px;
    }

    .popup-title {
        font-size: 1.15rem;
    }

    .popup-description {
        font-size: 0.9375rem;
    }
    
    .dgca-popup-container {
        max-width: 95%;
    }
    
    .dgca-popup-inner {
        padding: 40px 30px 30px;
        min-height: 100%;
    }
    
    .dgca-popup-container {
        max-width: 95%;
        aspect-ratio: 4 / 3;
    }
    
    .dgca-popup-content {
        aspect-ratio: 4 / 3;
    }
    
    .dgca-popup-inner {
        padding: 0px;
    }
    
    .dgca-popup-headline {
        font-size: 1rem !important;
        margin-bottom: 5px;
    }
    
    .dgca-popup-subheadline {
      font-size: 0.8rem;
      margin-bottom: 5px;
    }
    
    .dgca-popup-description {
        font-size: 0.875rem;
    }
    
    .dgca-popup-button {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
    .dgca-popup-text {
        margin-bottom: 5px;
    }
  
}

@media (max-width: 400px) {
  .dgca-popup-button {
    display: inline-block;
    width: 100%;
    max-width: 220px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
  }
    .popup-container {
        width: 95%;
        margin: 20px;
        bottom: 5%;
    }

    .dgca-popup-cta {
      max-width: 135px !important;
    }

    .popup-content {
        padding: 20px 10px;
    }

    .popup-title {
        font-size: 1rem;
    }

    .popup-description {
        font-size: 0.8rem;
    }
    
    .dgca-popup-container {
        max-width: 95%;
    }
    
    .dgca-popup-inner {
        padding: 20px 10px 10px;
        min-height: 100%;
    }
    
    .dgca-popup-container {
        max-width: 95%;
        aspect-ratio: 4 / 3;
    }
    
    .dgca-popup-content {
        aspect-ratio: 4 / 3;
    }
    
    .dgca-popup-inner {
        padding: 0px;
    }
    
    .dgca-popup-headline {
        font-size: 0.8rem !important;
        margin-bottom: 5px;
    }
    
    .dgca-popup-subheadline {
      font-size: 0.6rem;
      margin-bottom: 5px;
    }
    
    .dgca-popup-description {
        font-size: 0.5rem;
    }
    
    .dgca-popup-button {
        padding: 5px 10px;
        font-size: 0.65rem;
    }
    .dgca-popup-text {
        margin-bottom: 5px;
    }
    .dgca-popup-container .popup-close {
      bottom: -15% !important;
      right: 45% !important;
    }
  
}
.mt-6 { margin-top: 4rem !important; }

/* --------------------------------------------------------------------------
   Contact lead widget (left tab + modal) — keep with front theme tokens
   -------------------------------------------------------------------------- */

@keyframes contact-fab-enter {
  0% {
    opacity: 0;
    transform: translateY(-50%) translate3d(-135%, 0, 0) scale(0.88);
  }
  62% {
    opacity: 1;
    transform: translateY(-50%) translate3d(10px, 0, 0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translate3d(0, 0, 0) scale(1);
  }
}

@keyframes contact-fab-enter-mobile {
  0% {
    opacity: 0;
    transform: translateY(-50%) translate3d(-135%, 0, 0) scale(0.88);
  }
  62% {
    opacity: 1;
    transform: translateY(-50%) translate3d(10px, 0, 0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translate3d(0, 0, 0) scale(1);
  }
}

/* Runway lights: layered gold halo + depth */
@keyframes contact-fab-runway-glow {
  0%,
  100% {
    filter:
      drop-shadow(0 0 6px rgba(217, 169, 54, 0.28))
      drop-shadow(-2px 0 14px rgba(18, 49, 61, 0.2));
  }
  50% {
    filter:
      drop-shadow(0 0 18px rgba(255, 220, 140, 0.45))
      drop-shadow(0 0 28px rgba(215, 160, 28, 0.35))
      drop-shadow(-3px 0 18px rgba(18, 49, 61, 0.22));
  }
}

/* Occasional “sun on fuselage” sweep (painted before label text) */
@keyframes contact-tab-sheen {
  0%,
  12% {
    transform: translate3d(0, -55%, 0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  48% {
    transform: translate3d(0, 190%, 0);
    opacity: 0.95;
  }
  58%,
  100% {
    transform: translate3d(0, 220%, 0);
    opacity: 0;
  }
}

.contact-left-fab {
  position: fixed;
  left: 0;
  top: 55%;
  transform: translateY(-50%);
  z-index: 1040;
  /* Smooth peek in/out after the entrance keyframes finish */
  transition: transform 0.32s cubic-bezier(0.33, 1, 0.32, 1);
  animation:
    contact-fab-enter 0.88s cubic-bezier(0.33, 1.18, 0.35, 1) both,
    contact-fab-runway-glow 4s ease-in-out 0.95s infinite;
}

/* While scrolling: further off-screen; ~8px strip stays as a handle */
.contact-left-fab.contact-left-fab--peek {
  transform: translateY(-50%) translateX(calc(-100% + 8px)) scale(1) !important;
}

/* Contact modal open: keep tab from sitting above backdrop/dialog (BS modal z-index ~1055) */
.contact-left-fab.contact-left-fab--modal-hidden {
  visibility: hidden;
  pointer-events: none;
}

.contact-tab-btn {
  appearance: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  /* Rounded on viewport (left); dark accent strip on content side (right) */
  border-radius: 12px 0 0 12px;
  box-shadow:
    -4px 0 20px rgba(18, 49, 61, 0.2),
    -1px 0 0 rgba(255, 255, 255, 0.12) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  background: linear-gradient(
    165deg,
    #f0c04a 0%,
    var(--pilotus-musturd-light, #d7a01c) 28%,
    var(--pilotus-musturd, #d9a936) 55%,
    #b8830f 100%
  );
  border: 1px solid rgba(18, 49, 61, 0.14);
  border-right: 3px solid var(--pilotus-dark, #12313d);
  color: #fff;
  /* Flip / reading direction — keep vertical-lr + rotate(180deg); do not change when tuning size/padding */
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  /* Left tab only: all caps (footer / modal stay title case) */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  min-height: 0;
  padding: 10px 12px;
  font-family: var(--pliotus-font-family, inherit);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.18),
    0 0 12px rgba(255, 255, 255, 0.12);
  transition:
    background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.28s ease;
}

.contact-tab-btn::before {
  content: '';
  position: absolute;
  left: 5%;
  width: 90%;
  top: -45%;
  height: 42%;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: contact-tab-sheen 6.2s cubic-bezier(0.45, 0, 0.15, 1) 1.4s infinite;
}

.contact-tab-btn:hover,
.contact-tab-btn:focus {
  /* Taxi in + lift; keep flip */
  transform: rotate(180deg) translate3d(6px, 0, 0) scale(1.04);
  filter: brightness(1.05);
  background: linear-gradient(
    165deg,
    #f5ca58 0%,
    #e4b32e 22%,
    var(--pilotus-musturd-light, #d7a01c) 50%,
    var(--pilotus-musturd, #d9a936) 78%,
    #c89414 100%
  );
  color: #fff;
  box-shadow:
    -6px 0 28px rgba(18, 49, 61, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 22px rgba(217, 169, 54, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.contact-tab-btn:focus-visible {
  outline: 2px solid var(--pilotus-dark, #12313d);
  outline-offset: 2px;
}

.contact-tab-btn:active {
  transform: rotate(180deg) translate3d(4px, 0, 0) scale(0.97);
  filter: brightness(0.98);
  transition-duration: 0.08s;
}

@media (max-width: 991.98px) {
  .contact-left-fab {
    /* Mid-viewport: stays on-screen on tall phones (bottom anchoring hid most of the strip) */
    top: 65%;
    bottom: auto;
    left: max(0px, env(safe-area-inset-left, 0px));
    transform: translateY(-50%);
    /* Stay below Bootstrap modal (1055) and backdrop (1050); do not raise above popup */
    animation:
      contact-fab-enter-mobile 0.88s cubic-bezier(0.33, 1.18, 0.35, 1) both,
      contact-fab-runway-glow 4s ease-in-out 0.95s infinite;
  }

  .contact-tab-btn {
    min-height: 0;
    padding: 11px 12px;
    font-size: 14px;
    letter-spacing: 0.09em;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-left-fab {
    animation: none;
    opacity: 1;
    transform: translateY(-50%);
    filter: none;
    transition: none;
  }

  .contact-tab-btn {
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .contact-tab-btn::before {
    animation: none !important;
    opacity: 0;
  }

  .contact-tab-btn:hover,
  .contact-tab-btn:focus {
    transform: rotate(180deg);
    filter: none;
  }

  .contact-tab-btn:active {
    transform: rotate(180deg);
  }

  @media (max-width: 991.98px) {
    .contact-left-fab {
      transform: translateY(-50%);
    }
  }
}

.contact-lead-modal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.contact-lead-modal .modal-dialog {
  max-width: 560px;
}

.contact-lead-modal .modal-header {
  border-bottom: 0;
  padding: 0;
}

.contact-lead-modal__hero {
  width: 100%;
  background: linear-gradient(
    135deg,
    var(--pilotus-musturd, #d9a936) 0%,
    var(--pilotus-musturd-light, #d7a01c) 100%
  );
  color: #fff;
  padding: 12px 16px 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.contact-lead-modal__title {
  margin: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.contact-lead-modal__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.contact-lead-modal__hero .btn-close {
  margin: 0;
  background-size: 0.9rem;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.contact-lead-modal__hero .btn-close:hover {
  opacity: 1;
}

.contact-lead-modal .modal-body {
  padding: 12px 14px 6px;
}

.contact-lead-modal .modal-footer {
  border-top: 0;
  padding: 6px 14px 12px;
}

.contact-lead-form__card {
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 10px 10px 8px;
  background: #fff;
}

.contact-lead-form__note {
  font-size: 12px;
  color: #657187;
  margin-bottom: 8px;
}

.contact-lead-form__card .form-label {
  font-size: 12px;
  font-weight: 600;
  color: #2f3a45;
  margin-bottom: 4px;
}

.contact-lead-form__card .form-control {
  border-radius: 10px;
  min-height: 40px;
  border-color: #dbe1ea;
  box-shadow: none;
  font-size: 13px;
}

.contact-lead-form__card textarea.form-control {
  min-height: 84px;
  resize: none;
}

.contact-lead-form__card .form-control:focus {
  border-color: var(--pilotus-musturd, #d9a936);
  box-shadow: 0 0 0 0.2rem rgba(217, 169, 54, 0.18);
}

.contact-lead-submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--pilotus-musturd, #d9a936);
  border: none;
  color: #fff;

  font-weight: 600;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  cursor: pointer;
  transition: all 0.25s ease;

  min-width: 180px; /* prevents size jump */
}

/* Hover */
.contact-lead-submit-btn:hover,
.contact-lead-submit-btn:focus {
  background-color: var(--pilotus-musturd-light, #d7a01c);
  color: #fff;
  transform: translateY(-1px);
}

/* Disabled */
.contact-lead-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Text */
.contact-lead-submit-btn .btn-text {
  transition: opacity 0.2s ease;
}

/* Spinner */
.contact-lead-submit-btn .btn-spinner {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
}

/* Spinner size */
.contact-lead-submit-btn .spinner-border {
  width: 18px;
  height: 18px;
  border-width: 2px;
}
.contact-lead-submit-btn.loading {
  box-shadow: 0 0 0 3px rgba(217, 169, 54, 0.2);
}

/* Loading state */
.contact-lead-submit-btn.loading .btn-text {
  opacity: 0;
}

.contact-lead-submit-btn.loading .btn-spinner {
  display: flex;
}