/* ============================================================
   SV INSTITUTE – SERVICES PAGE CSS
   Module 3: Banner · Quick Nav · Course Blocks · Info Cards ·
             Highlights · Level Tabs · Compare Table
   ============================================================ */


/* ── 1. PAGE BANNER (services variant) ───────────────────── */

/* =========================
   COURSES HERO
========================= */
.svi-courses-hero{
    position:relative;
    overflow:hidden;
    padding:30px 0 30px;
    background:linear-gradient(135deg,#061a33 0%, #0a2a52 100%);
    color:#eaf2ff;
    text-align:center;
}

/* =========================
   BACKGROUND BLUR
========================= */
.svi-courses-hero__blur{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.22;
}

.svi-courses-hero__blur--1{
    width:320px;
    height:320px;
    background:#1e90ff;
    top:-120px;
    left:-120px;
}

.svi-courses-hero__blur--2{
    width:400px;
    height:400px;
    background:#00c6ff;
    bottom:-180px;
    right:-120px;
}

/* =========================
   BADGE
========================= */
.svi-courses-hero__badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    margin-bottom:30px;
    color:#dbe9ff;
    font-size:14px;
}

/* =========================
   TITLE
========================= */
.svi-courses-hero__title{
    font-size:30px;
    font-weight:800;
    line-height:1.1;
    margin-bottom:28px;
    color:#ffffff;
}

.svi-courses-hero__title span{
    color:#5cc0ff;
}

/* =========================
   SUBTITLE
========================= */
.svi-courses-hero__subtitle{
    max-width:850px;
    margin:0 auto 45px;
    color:rgba(234,242,255,.78);
    font-size:18px;
    line-height:1.8;
}

/* =========================
   COURSE TAGS
========================= */
.svi-courses-tags{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:60px;
}

.svi-courses-tags a{
    padding:14px 24px;
    border-radius:50px;
    text-decoration:none;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    color:#eaf2ff;
    font-weight:600;
    transition:.3s ease;
}

.svi-courses-tags a:hover{
    background:#5cc0ff;
    color:#061a33;
    transform:translateY(-3px);
}

/* =========================
   STATS
========================= */
.svi-courses-stats{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.svi-courses-stat{
    min-width:200px;
    padding:28px;
    border-radius:24px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(18px);
}

.svi-courses-stat strong{
    display:block;
    font-size:34px;
    font-weight:800;
    color:#ffffff;
    margin-bottom:10px;
}

.svi-courses-stat span{
    color:rgba(234,242,255,.78);
    font-size:15px;
}

/* =========================
   MOBILE
========================= */
@media(max-width:991px){

    .svi-courses-hero{
        padding:130px 0 80px;
    }

    .svi-courses-hero__title{
        font-size:42px;
    }

    .svi-courses-tags{
        gap:12px;
    }

    .svi-courses-tags a{
        padding:12px 18px;
        font-size:14px;
    }

    .svi-courses-stat{
        width:100%;
        max-width:320px;
    }

}


/* ── 2. COURSE QUICK NAV ──────────────────────────────────── */
.svi-course-quicknav {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.6rem;
  margin-top: 2rem;
}
.svi-course-quicknav__btn {
  display:         inline-flex;
  align-items:     center;
  padding:         0.45rem 1rem;
  font-family:     var(--svi-font-heading);
  font-size:       var(--svi-text-xs);
  font-weight:     600;
  color:           rgba(255,255,255,0.85);
  background:      rgba(255,255,255,0.1);
  border:          1px solid rgba(255,255,255,0.2);
  border-radius:   var(--svi-radius-pill);
  text-decoration: none;
  transition:      var(--svi-transition);
  white-space:     nowrap;
}
.svi-course-quicknav__btn:hover {
  background:  var(--svi-white);
  color:       var(--svi-navy);
  border-color: var(--svi-white);
  transform:   translateY(-2px);
}


/* ── 3. COURSE SECTION WRAPPER ────────────────────────────── */
.svi-course-section { padding: var(--svi-space-2xl) 0; }

.svi-course-divider {
  height:     4px;
  background: var(--svi-gradient-light);
  border:     none;
}


/* ── 4. COURSE BLOCK ──────────────────────────────────────── */
.svi-course-block__header {
  display:     flex;
  align-items: flex-start;
  gap:         1.5rem;
  margin-bottom: var(--svi-space-lg);
}

.svi-course-block__icon-wrap {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           64px;
  height:          64px;
  border-radius:   var(--svi-radius-lg);
  background:      var(--svi-gradient);
  color:           var(--svi-white);
  font-size:       1.75rem;
  flex-shrink:     0;
  box-shadow:      var(--svi-shadow-blue);
}
.svi-course-block__icon-wrap--green  { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,0.3); }
.svi-course-block__icon-wrap--purple { background: linear-gradient(135deg, #7C3AED, #4F46E5); box-shadow: 0 8px 24px rgba(124,58,237,0.3); }
.svi-course-block__icon-wrap--teal   { background: linear-gradient(135deg, #0891B2, #0E7490); box-shadow: 0 8px 24px rgba(8,145,178,0.3); }
.svi-course-block__icon-wrap--orange { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 8px 24px rgba(245,158,11,0.3); }

.svi-course-block__title {
  font-size:     clamp(1.5rem, 3vw, 2rem);
  font-weight:   800;
  color:         var(--svi-navy);
  margin-bottom: 0.5rem;
  line-height:   1.2;
}
.svi-course-block__tagline {
  font-size:   var(--svi-text-base);
  color:       var(--svi-text-muted);
  line-height: 1.75;
  max-width:   640px;
  margin:      0;
}

@media (max-width: 575.98px) {
  .svi-course-block__header { flex-direction: column; gap: 1rem; }
  .svi-course-block__icon-wrap { width: 52px; height: 52px; font-size: 1.4rem; }
}


/* ── 5. COURSE DETAIL PANEL ───────────────────────────────── */
.svi-course-detail {
  background:    var(--svi-white);
  border:        1px solid var(--svi-border);
  border-radius: var(--svi-radius-lg);
  padding:       1.5rem;
}
/* On light bg sections, give slight bg tint */
.svi-section--light .svi-course-detail { background: var(--svi-white); }

.svi-course-detail__heading {
  font-family:   var(--svi-font-heading);
  font-size:     var(--svi-text-sm);
  font-weight:   700;
  color:         var(--svi-navy);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 1.1rem;
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
}
.svi-course-detail__heading i { color: var(--svi-blue); }

.svi-course-detail__list {
  list-style:    none;
  padding:       0;
  margin:        0;
  display:       flex;
  flex-direction: column;
  gap:           0.6rem;
}
.svi-course-detail__list li {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  font-size:   var(--svi-text-sm);
  color:       var(--svi-text);
}
.svi-course-detail__list li i {
  color:     var(--svi-blue);
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Exam badge row */
.svi-exam-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
}

/* Highlight items */
.svi-highlight-item {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  font-size:     var(--svi-text-sm);
  font-weight:   500;
  color:         var(--svi-text);
  background:    var(--svi-bg);
  border:        1px solid var(--svi-border);
  border-radius: var(--svi-radius-sm);
  padding:       0.6rem 0.85rem;
}
.svi-highlight-item i { color: var(--svi-blue); font-size: 1rem; flex-shrink: 0; }


/* ── 6. COURSE INFO CARD ──────────────────────────────────── */
.svi-course-info-card {
  background:    var(--svi-white);
  border:        1px solid var(--svi-border);
  border-radius: var(--svi-radius-xl);
  overflow:      hidden;
  box-shadow:    var(--svi-shadow-sm);
  position:      sticky;
  top:           calc(var(--svi-nav-height) + 1rem);
}
.svi-course-info-card__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0.9rem 1.25rem;
  border-bottom:   1px solid var(--svi-border);
  gap:             0.75rem;
}
.svi-course-info-card__row:last-of-type { border-bottom: none; }
.svi-course-info-card__label {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  font-size:   var(--svi-text-xs);
  font-weight: 600;
  color:       var(--svi-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink:    0;
}
.svi-course-info-card__label i { color: var(--svi-blue); }
.svi-course-info-card__value {
  font-size:   var(--svi-text-sm);
  font-weight: 600;
  color:       var(--svi-navy);
  text-align:  right;
}
.svi-course-info-card__value--highlight {
  font-family: var(--svi-font-heading);
  font-size:   var(--svi-text-xl);
  font-weight: 800;
  color:       var(--svi-blue-dark);
}
.svi-course-info-card__cta {
  padding: 1.25rem;
  background: var(--svi-bg);
  border-top: 1px solid var(--svi-border);
}
.svi-course-info-card__note {
  font-size:   var(--svi-text-xs);
  color:       var(--svi-text-muted);
  margin:      0.75rem 0 0;
  display:     flex;
  align-items: flex-start;
  gap:         0.35rem;
  line-height: 1.5;
}
.svi-course-info-card__note i { flex-shrink: 0; margin-top: 1px; }


/* ── 7. LEVEL TABS (Spoken English) ──────────────────────── */
.svi-level-tabs {
  display:       flex;
  gap:           0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap:     wrap;
}
.svi-level-tab {
  padding:       0.55rem 1.25rem;
  font-family:   var(--svi-font-heading);
  font-size:     var(--svi-text-xs);
  font-weight:   700;
  border:        1.5px solid var(--svi-border);
  border-radius: var(--svi-radius-pill);
  background:    var(--svi-white);
  color:         var(--svi-text-muted);
  cursor:        pointer;
  transition:    var(--svi-transition);
  min-height:    40px;
}
.svi-level-tab:hover {
  border-color: var(--svi-blue);
  color:        var(--svi-blue);
}
.svi-level-tab.is-active {
  background:   var(--svi-gradient);
  color:        var(--svi-white);
  border-color: transparent;
  box-shadow:   var(--svi-shadow-blue);
}


/* ── 8. COMPARISON TABLE ──────────────────────────────────── */
.svi-compare-wrap {
  background:    var(--svi-white);
  border-radius: var(--svi-radius-xl);
  border:        1px solid var(--svi-border);
  overflow:      hidden;
  box-shadow:    var(--svi-shadow-sm);
  margin-top:    var(--svi-space-lg);
}
.svi-compare-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--svi-text-sm);
}
.svi-compare-table thead tr {
  background: var(--svi-gradient-dark);
}
.svi-compare-table thead th {
  padding:        1rem 1.25rem;
  font-family:    var(--svi-font-heading);
  font-size:      var(--svi-text-xs);
  font-weight:    700;
  color:          rgba(255,255,255,0.8);
  text-align:     left;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space:    nowrap;
  border:         none;
}
.svi-compare-table thead th:last-child { text-align: center; }

.svi-compare-table tbody tr {
  border-bottom: 1px solid var(--svi-border);
  transition:    background 0.2s;
}
.svi-compare-table tbody tr:last-child { border-bottom: none; }
.svi-compare-table tbody tr:hover { background: var(--svi-bg); }

.svi-compare-table tbody td {
  padding:     1rem 1.25rem;
  color:       var(--svi-text);
  vertical-align: middle;
  white-space: nowrap;
}
.svi-compare-table tbody td:last-child { text-align: center; }

.svi-compare-table__course {
  display:     inline-flex;
  align-items: center;
  gap:         0.6rem;
  font-weight: 600;
  color:       var(--svi-navy);
}
.svi-compare-table__course i { color: var(--svi-blue); font-size: 1rem; }

.svi-compare-table__rate {
  display:       inline-block;
  font-family:   var(--svi-font-heading);
  font-weight:   800;
  font-size:     var(--svi-text-base);
  padding:       0.25rem 0.75rem;
  border-radius: var(--svi-radius-pill);
}
.svi-compare-table__rate--high { background: #DCFCE7; color: #166534; }
.svi-compare-table__rate--mid  { background: #FEF3C7; color: #92400E; }


/* ── 9. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .svi-page-banner--services {
    padding: calc(var(--svi-nav-height-mobile) + 2.5rem) 0 3rem;
    min-height: auto;
  }
  .svi-course-info-card { position: static; margin-top: 0.5rem; }
}

@media (max-width: 767.98px) {
  .svi-compare-table thead th:nth-child(3),
  .svi-compare-table tbody td:nth-child(3),
  .svi-compare-table thead th:nth-child(4),
  .svi-compare-table tbody td:nth-child(4) { display: none; }
}

@media (max-width: 575.98px) {
  .svi-course-section     { padding: var(--svi-space-xl) 0; }
  .svi-course-quicknav    { gap: 0.4rem; }
  .svi-course-quicknav__btn { font-size: 0.7rem; padding: 0.35rem 0.75rem; }
  .svi-compare-table thead th:nth-child(2),
  .svi-compare-table tbody td:nth-child(2) { display: none; }
}