/* =========================================================
   MyEduBuddies – LIGHT polish (original theme stays the same)
   Load AFTER your original style.css. Only fixes layout and
   adds a bit more colour. Works with the old and new Blade.
   ========================================================= */

:root {
    --c-teal:   #14b8a6;
    --c-teal-d: #0e8f9a;
    --c-orange: #ff7a18;
    --c-amber:  #ffb020;
    --c-purple: #8b5cf6;
    --c-blue:   #3b82f6;
    --c-green:  #22b573;
}

/* ---------- Global rhythm ---------- */
@media (min-width: 992px) {
    section.py-5 { padding-top: 84px !important; padding-bottom: 84px !important; }
}
h2.fw-bold { font-size: 34px; line-height: 1.25; }
@media (max-width: 768px) { h2.fw-bold { font-size: 26px; } }

/* ---------- Hero ---------- */
.hero-section { padding: 90px 0 100px; }

.hero-title {
    font-size: 46px;
    line-height: 1.18;
    text-wrap: balance;
}
.hero-title .block-highlight {
    background: linear-gradient(90deg, var(--primary) 0%, var(--c-teal) 60%, var(--c-orange) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
}
.hero-text { max-width: 560px; }

.hero-image {
    aspect-ratio: 4 / 3.3;
    object-fit: cover;
    display: block;
}

.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary) 0%, var(--c-teal-d) 100%);
    box-shadow: 0 10px 22px rgba(14, 107, 100, .28);
}
.btn-primary-custom:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    transform: translateY(-2px);
}
.btn-outline-custom {
    background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-orange) 100%);
    box-shadow: 0 10px 22px rgba(255, 122, 24, .28);
}
.btn-outline-custom:hover {
    background: linear-gradient(135deg, #f5a300 0%, #f26a08 100%);
    transform: translateY(-2px);
}

.hero-points span::before { background: var(--c-green); }

/* ---------- Audience cards ---------- */
.career-bg .row > [class*="col-"] { display: flex; }
.career-bg .card {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    --accent: var(--c-teal-d);
    --accent-grad: linear-gradient(135deg, var(--c-teal), var(--c-teal-d));
}
.career-bg .card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent-grad);
}
.career-bg .card p { flex: 1 1 auto; }
.career-bg .card > br { display: none; }
.career-bg .card > a { margin-top: auto; padding-top: 6px; color: var(--accent) !important; }

.career-bg .row > div:nth-child(4n+2) .card { --accent: #e8650a; --accent-grad: linear-gradient(135deg, var(--c-amber), var(--c-orange)); }
.career-bg .row > div:nth-child(4n+3) .card { --accent: #6d4ad8; --accent-grad: linear-gradient(135deg, var(--c-purple), #6d4ad8); }
.career-bg .row > div:nth-child(4n+4) .card { --accent: #d9540a; --accent-grad: linear-gradient(135deg, #ff9a4d, #f0570d); }

.career-bg .card .icon-box { background: var(--accent-grad) !important; color: #fff !important; }
.career-bg .card:hover { border-color: transparent; box-shadow: 0 18px 40px rgba(20, 30, 50, .14); }

/* tablets: 2 cards per row instead of 4 cramped ones */
@media (min-width: 768px) and (max-width: 991px) {
    .career-bg .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
}

/* ---------- "Why authentic" band + final CTA (more colour) ---------- */
.career-cta-section {
    background:
        radial-gradient(700px 320px at 90% 0%, rgba(255, 176, 32, .28), transparent 60%),
        radial-gradient(600px 300px at 5% 100%, rgba(139, 92, 246, .22), transparent 60%),
        linear-gradient(135deg, #0e6b64 0%, #0fa5b8 55%, #1b8db5 100%);
    color: #fff;
}
.career-cta-section .cta-desc[style] {
    max-width: 940px !important;
    line-height: 1.85;
    font-size: 16px;
}
.cta-icon { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); }
.cta-features i { color: var(--c-amber); }
@media (max-width: 768px) { .career-cta-section { padding: 64px 0; } }

/* ---------- Why choose ---------- */
.why-bg .row.g-5 > .col-lg-6:first-child img { width: 100%; object-fit: cover; }
.why-bg .position-relative > img.img-fluid { aspect-ratio: 16 / 10.5; }
.why-bg .row.g-3 img {
    height: auto !important;
    aspect-ratio: 1 / .85;
    object-fit: cover;
    width: 100%;
}

.feature-card { align-items: center; }
.feature-icon.bg-info    { background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d)) !important; }
.feature-icon.bg-success { background: linear-gradient(135deg, #34d399, var(--c-green)) !important; }
.feature-icon.bg-warning { background: linear-gradient(135deg, var(--c-amber), var(--c-orange)) !important; }
.feature-icon { color: #fff; }
.feature-icon i { color: #fff; }
.feature-card:hover { border-color: rgba(20, 184, 166, .35); }

/* ---------- 7-step process ---------- */
.career-process .row.g-4 > [class*="col-"] { display: flex; }
.step-card { width: 100%; height: 100%; }

/* 7th card sits alone – let it span the full row */
.career-process .row.g-4 > .col-md-6:last-child { flex: 0 0 100%; max-width: 100%; }

.career-process .row.g-4 > div:nth-child(1) .step-number { background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d)) !important; }
.career-process .row.g-4 > div:nth-child(2) .step-number { background: linear-gradient(135deg, #60a5fa, var(--c-blue)) !important; }
.career-process .row.g-4 > div:nth-child(3) .step-number { background: linear-gradient(135deg, var(--c-amber), var(--c-orange)) !important; }
.career-process .row.g-4 > div:nth-child(4) .step-number { background: linear-gradient(135deg, #34d399, var(--c-green)) !important; }
.career-process .row.g-4 > div:nth-child(5) .step-number { background: linear-gradient(135deg, #a78bfa, var(--c-purple)) !important; }
.career-process .row.g-4 > div:nth-child(6) .step-number { background: linear-gradient(135deg, var(--c-teal), var(--c-blue)) !important; }
.career-process .row.g-4 > div:nth-child(7) .step-number { background: linear-gradient(135deg, #ff9a4d, #f0570d) !important; }
.step-number { color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.step-header { margin-bottom: 0; }

.cta-wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Partners ---------- */
.partner-card { flex: 0 0 220px; }
.partner-card img { max-height: 100px; width: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .hero-section { padding: 44px 0 56px; }
    .hero-title { font-size: 28px; }
    .hero-buttons .btn { width: 100%; margin: 0 !important; }
    .cta-wrap .btn { width: 100%; }
    .career-process .row.g-4 > .col-md-6:last-child { flex: 0 0 100%; }
    .partner-card { flex: 0 0 170px; min-width: 170px; height: 120px; }
    .partner-card img { max-height: 80px; }
}


/* =========================================================
   Heading upgrades (process section + final CTA band)
   ========================================================= */

/* Process section heading */
.career-process h2.process-title {
    font-size: 36px;
    line-height: 1.25;
    max-width: 520px;
    text-wrap: balance;
}
.career-process .hl {
    color: var(--primary);
    background: linear-gradient(transparent 64%, rgba(255, 176, 32, .45) 64%);
    padding: 0 4px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Final CTA heading */
.career-cta-section h2.cta-title {
    font-size: 40px;
    line-height: 1.25;
    max-width: 760px;
    margin: 0 auto 16px;
    text-wrap: balance;
}
.career-cta-section h2.cta-title .hl-gold {
    color: #fff;
    background: linear-gradient(transparent 62%, rgba(255, 176, 32, .55) 62%);
    padding: 0 6px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .career-process h2.process-title { font-size: 26px; }
    .career-cta-section h2.cta-title { font-size: 28px; }
}


/* =========================================================
   NEW SECTION 1: Journey timeline (replaces 7-step section)
   ========================================================= */
.journey-section {
    padding: 90px 0;
    background: linear-gradient(120deg, #f2fbfd 0%, #ffffff 45%, #fff8ee 100%);
}
.journey-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--primary);
    border: 1px solid rgba(14, 107, 100, .2);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 18px;
}
.journey-title {
    font-size: 36px;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 14px;
    text-wrap: balance;
}
.journey-title span {
    background: linear-gradient(90deg, var(--primary), var(--c-teal) 70%, var(--c-orange) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary);
}
.journey-lead { color: #5b6472; font-size: 15px; line-height: 1.8; max-width: 480px; }

.journey-media { position: relative; margin: 28px 0 8px; max-width: 480px; }
.journey-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(20, 30, 50, .16);
    display: block;
}
.journey-stat {
    position: absolute;
    right: -14px;
    bottom: -18px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: 0 16px 32px rgba(20, 30, 50, .16);
    border: 1px solid #e8eef0;
}
.journey-stat b { display: block; font-size: 22px; line-height: 1; color: var(--primary); }
.journey-stat small { font-size: 12px; color: #6b7280; }
.journey-stat .ic {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-amber), var(--c-orange));
    color: #fff; display: grid; place-items: center; font-size: 16px;
}
.journey-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

@media (min-width: 992px) {
    .journey-sticky { position: sticky; top: 110px; }
}

/* timeline */
.journey-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.journey-timeline::before {
    content: "";
    position: absolute;
    left: 27px; top: 28px; bottom: 28px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--c-teal), var(--c-blue), var(--c-amber), var(--c-green), var(--c-purple), var(--c-teal), var(--c-orange));
    opacity: .4;
}
.journey-step { position: relative; display: flex; gap: 20px; margin-bottom: 18px; }
.journey-step:last-child { margin-bottom: 0; }

.journey-num {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0 0 0 6px #f8fcfd, 0 10px 20px rgba(20, 30, 50, .18);
    background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d));
}
.journey-step:nth-child(2) .journey-num { background: linear-gradient(135deg, #60a5fa, var(--c-blue)); }
.journey-step:nth-child(3) .journey-num { background: linear-gradient(135deg, var(--c-amber), var(--c-orange)); }
.journey-step:nth-child(4) .journey-num { background: linear-gradient(135deg, #34d399, var(--c-green)); }
.journey-step:nth-child(5) .journey-num { background: linear-gradient(135deg, #a78bfa, var(--c-purple)); }
.journey-step:nth-child(6) .journey-num { background: linear-gradient(135deg, var(--c-teal), var(--c-blue)); }
.journey-step:nth-child(7) .journey-num { background: linear-gradient(135deg, #ff9a4d, #f0570d); }

.journey-body {
    flex: 1;
    background: #fff;
    border: 1px solid #e6edf0;
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: 0 8px 22px rgba(20, 30, 50, .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.journey-step:hover .journey-body {
    transform: translateX(4px);
    box-shadow: 0 14px 30px rgba(20, 30, 50, .11);
    border-color: rgba(20, 184, 166, .4);
}
.journey-body h3 { font-size: 16px; font-weight: 700; margin: 0 0 4px; color: #14202b; }
.journey-body p { margin: 0; font-size: 14px; line-height: 1.65; color: #5b6472; }

@media (max-width: 768px) {
    .journey-section { padding: 60px 0; }
    .journey-title { font-size: 26px; }
    .journey-num { flex-basis: 44px; width: 44px; height: 44px; font-size: 16px; }
    .journey-timeline::before { left: 21px; }
    .journey-step { gap: 14px; }
    .journey-body { padding: 14px 16px; }
    .journey-stat { right: 10px; }
    .journey-actions .btn { width: 100%; margin: 0 !important; }
}

/* =========================================================
   NEW SECTION 2: Final CTA card (replaces "Start Your Career Journey")
   ========================================================= */
.final-cta { padding: 80px 0; background: #fff; }
.final-cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 64px 56px;
    color: #fff;
    background:
        radial-gradient(520px 300px at 100% 0%, rgba(255, 176, 32, .32), transparent 60%),
        radial-gradient(480px 300px at 0% 100%, rgba(139, 92, 246, .28), transparent 60%),
        linear-gradient(135deg, #0a4f4a 0%, #0e6b64 40%, #0fa5b8 100%);
    box-shadow: 0 30px 70px rgba(14, 107, 100, .28);
}
.final-cta-card::after {
    content: "";
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    right: -90px; bottom: -120px;
    pointer-events: none;
}
.final-cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 48px;
    align-items: center;
}
.final-cta-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
}
.final-cta-card h2 {
    color: #fff;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 16px;
    text-wrap: balance;
}
.final-cta-card h2 span { color: #ffd166; }
.final-cta-card .lead-text { font-size: 16px; line-height: 1.8; opacity: .92; max-width: 520px; margin-bottom: 30px; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.final-cta-note { margin-top: 24px; font-size: 13px; opacity: .9; }
.final-cta-note i { color: #ffd166; margin-right: 6px; }

.trust-list { display: grid; gap: 14px; }
.trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 15px;
    transition: transform .3s ease, background .3s ease;
}
.trust-item:hover { transform: translateX(-4px); background: rgba(255, 255, 255, .18); }
.trust-item .ic {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--c-amber), var(--c-orange));
}
.trust-item:nth-child(2) .ic { background: linear-gradient(135deg, #a78bfa, var(--c-purple)); }
.trust-item:nth-child(3) .ic { background: linear-gradient(135deg, #34d399, var(--c-green)); }

@media (max-width: 991px) {
    .final-cta-card { padding: 44px 28px; border-radius: 22px; }
    .final-cta-grid { grid-template-columns: 1fr; gap: 32px; }
    .final-cta-card h2 { font-size: 30px; }
}
@media (max-width: 575px) {
    .final-cta { padding: 48px 0; }
    .final-cta-actions .btn { width: 100%; }
}


/* =========================================================
   NEW HEADER (top bar + sticky nav + mobile drawer)
   ========================================================= */
.top-bar {
    background: linear-gradient(90deg, #0a4f4a 0%, #0e6b64 50%, #0fa5b8 100%);
    color: #fff;
    font-size: 12.5px;
}
.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.top-bar a, .top-bar span { color: #fff; opacity: .95; text-decoration: none; }
.top-bar a:hover { opacity: 1; text-decoration: underline; }
.top-bar i { color: #ffd166; margin-right: 6px; }
.top-bar .sep { display: inline-block; width: 1px; height: 12px; background: rgba(255,255,255,.35); margin: 0 14px; vertical-align: -1px; }

#global-header.site-header {
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid #e8eef0;
    box-shadow: 0 6px 24px rgba(20, 30, 50, .06) !important;
}
#global-header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
}
#global-header .header-logo { height: 62px; width: auto; object-fit: contain; }

#global-header .main-nav { display: flex; align-items: center; gap: 4px; }
#global-header .nav-item-link {
    position: relative;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}
#global-header .nav-item-link:hover { background: #eef8f8; color: var(--primary); }
#global-header .nav-item-link.active {
    background: linear-gradient(135deg, #e3f6f5 0%, #fff2df 100%);
    color: var(--primary);
    font-weight: 600;
}

#global-header .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, var(--c-amber) 0%, var(--c-orange) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(255, 122, 24, .3);
    transition: transform .25s ease, box-shadow .25s ease;
}
#global-header .header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 122, 24, .38); color: #fff; }

#global-header .nav-toggle {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    border: 1px solid #dfe8ea;
    background: #fff;
    color: var(--primary);
    font-size: 18px;
    padding: 0;
}
#global-header .nav-toggle:hover { background: #eef8f8; }

/* mobile drawer (kept OUTSIDE the header so blur doesn't break fixed position) */
.mobile-drawer { width: 310px !important; border-left: 0; }
.mobile-drawer .offcanvas-header { padding: 18px 20px; border-bottom: 1px solid #edf1f2; }
.mobile-drawer .offcanvas-header img { height: 48px; }
.mobile-drawer .offcanvas-body { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 6px; }

.drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #1f2937;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.drawer-link .ic {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    color: #fff; font-size: 15px;
    background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d));
}
.drawer-link:nth-child(2) .ic { background: linear-gradient(135deg, #60a5fa, var(--c-blue)); }
.drawer-link:nth-child(3) .ic { background: linear-gradient(135deg, var(--c-amber), var(--c-orange)); }
.drawer-link:nth-child(4) .ic { background: linear-gradient(135deg, #34d399, var(--c-green)); }
.drawer-link:nth-child(5) .ic { background: linear-gradient(135deg, #a78bfa, var(--c-purple)); }
.drawer-link:hover, .drawer-link.active { background: #f0f9f9; color: var(--primary); }
.drawer-link.active { font-weight: 600; }

.mobile-drawer .drawer-cta {
    margin-top: auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-amber), var(--c-orange));
    color: #fff; font-weight: 600; text-decoration: none;
    box-shadow: 0 10px 22px rgba(255, 122, 24, .3);
}
.drawer-contact { margin-top: 18px; font-size: 13px; color: #5b6472; display: grid; gap: 6px; }
.drawer-contact i { color: var(--primary); width: 18px; }

@media (max-width: 991px) {
    #global-header .header-inner { min-height: 66px; }
    #global-header .header-logo { height: 48px; }
    .top-bar .top-bar-right { display: none; }
    .top-bar .container { justify-content: center; }
}
@media (max-width: 480px) {
    .top-bar .top-bar-mail, .top-bar .sep { display: none; }
}


/* =========================================================
   Hero: "100+ Counsellors" badge on TOP of the image
   (original CSS had top commented out, so it dropped below the image)
   ========================================================= */
.hero-image-wrapper .badge-experience {
    top: 24px;
    right: -24px;
    bottom: auto;
    left: auto;
}
@media (max-width: 1199px) {
    .hero-image-wrapper .badge-experience { right: 16px; top: 16px; }
}


/* =========================================================
   NEW FOOTER (dark teal, colourful accents)
   ========================================================= */
.site-footer.ft {
    position: relative;
    padding: 0;
    color: #c9dcda;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(255, 176, 32, .14), transparent 60%),
        radial-gradient(500px 300px at 0% 100%, rgba(139, 92, 246, .16), transparent 60%),
        linear-gradient(160deg, #06302d 0%, #0a4f4a 55%, #0e6b64 100%);
}
.site-footer.ft::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-teal), var(--c-blue), var(--c-amber), var(--c-orange), var(--c-purple));
}
.ft-main { padding: 76px 0 44px; }

.ft-logo {
    display: inline-block;
    background: #fff;
    border-radius: 16px;
    padding: 10px 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.ft-logo img { height: 54px; width: auto; display: block; max-width: none; }

.ft-text { color: #b9cfcc; font-size: 14.5px; line-height: 1.85; max-width: 400px; margin: 20px 0 0; }

.ft-social { display: flex; gap: 10px; margin-top: 24px; }
.ft-social a {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid; place-items: center;
    color: #fff; font-size: 16px;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ft-social a:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, .3); color: #fff; }
.ft-social .fb { background: linear-gradient(135deg, #3b82f6, #1d5fd1); }
.ft-social .ig { background: linear-gradient(135deg, #f9a03f, #e1306c 55%, #7c3aed); }
.ft-social .yt { background: linear-gradient(135deg, #ff5b5b, #e0002a); }

.ft-title {
    position: relative;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 24px;
    padding-bottom: 12px;
}
.ft-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 36px; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--c-amber), var(--c-orange));
}

.ft-links, .ft-contact { list-style: none; margin: 0; padding: 0; }
.ft-links li { margin-bottom: 13px; }
.ft-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #c9dcda;
    font-size: 14.5px;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}
.ft-links a::before { content: "›"; color: var(--c-amber); font-size: 18px; line-height: 1; }
.ft-links a:hover { color: #fff; transform: translateX(4px); }

.ft-contact li {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #c9dcda;
}
.ft-contact a { color: #c9dcda; text-decoration: none; }
.ft-contact a:hover { color: #fff; }
.ft-contact .ic {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-size: 14px; color: #fff;
    background: linear-gradient(135deg, var(--c-teal), var(--c-teal-d));
}
.ft-contact li:nth-child(2) .ic { background: linear-gradient(135deg, var(--c-amber), var(--c-orange)); }
.ft-contact li:nth-child(3) .ic { background: linear-gradient(135deg, #a78bfa, var(--c-purple)); }

.ft-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13.5px;
}
.ft-bottom p { margin: 0; font-size: 13.5px; color: #a9c2bf; }
.ft-bottom-links a { color: #c9dcda; text-decoration: none; }
.ft-bottom-links a:hover { color: #fff; }
.ft-bottom-links a + a::before { content: ""; display: inline-block; width: 1px; height: 12px; background: rgba(255,255,255,.3); margin: 0 14px; vertical-align: -1px; }

@media (max-width: 768px) {
    .ft-main { padding: 56px 0 28px; }
    .ft-bottom { flex-direction: column; text-align: center; }
    .ft-logo img { height: 46px; }
}


/* =========================================================
   ABOUT PAGE v2 – simple & clean, close to your original theme
   (classes prefixed abt-). Load after style.css / polish.css.
   ========================================================= */

.abt-hero {
    position: relative;
    isolation: isolate;
    padding: 110px 0 100px;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center right;
}
.abt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 48, 45, .84) 0%, rgba(6, 48, 45, .7) 100%);
}
.abt-hero .inner { max-width: 780px; margin: 0 auto; }
.abt-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(90deg, #2ecdc4, #0fb9b1);
    color: #fff; font-size: 12px; font-weight: 600;
    padding: 9px 18px; border-radius: 999px; margin-bottom: 22px;
}
.abt-hero h1 { color: #fff; font-size: 48px; font-weight: 800; line-height: 1.15; margin: 0; }
.abt-divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 24px; }
.abt-divider span { width: 70px; height: 1px; background: rgba(255,255,255,.45); }
.abt-divider .dot { width: 7px; height: 7px; border-radius: 50%; background: #ffb020; }
.abt-hero p { font-size: 17px; line-height: 1.8; opacity: .95; margin: 0 0 30px; }
.abt-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

.abt-section { padding: 80px 0; }
.abt-title { text-align: center; font-size: 32px; font-weight: 700; margin: 0 0 12px; color: #14202b; }
.abt-sub { text-align: center; color: #6b7280; max-width: 560px; margin: 0 auto 48px; }

/* story */
.abt-story { background: #f8fbfb; }
.abt-photo img { width: 100%; display: block; border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }
.abt-quote {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    border-left: 5px solid var(--primary);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}
.abt-quote p { font-size: 15.5px; line-height: 1.9; color: #4b5563; margin: 0 0 18px; }
.abt-quote p:last-child { margin-bottom: 0; }
.abt-quote strong { color: var(--primary); }
.abt-quote .hl { color: #d9540a; font-weight: 600; }

/* mission + vision */
.abt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.abt-card {
    position: relative; overflow: hidden;
    background: #fff;
    border: 1px solid #e6edf0;
    border-radius: 20px;
    padding: 38px 36px 34px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .06);
}
.abt-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.abt-card.mission::before { background: linear-gradient(90deg, #14b8a6, #0e8f9a); }
.abt-card.vision::before  { background: linear-gradient(90deg, #ffb020, #ff7a18); }
.abt-card .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; }
.abt-card.mission .ic { background: #e3f6f5; }
.abt-card.vision .ic  { background: #fff2df; }
.abt-card h3 { font-size: 24px; font-weight: 700; margin: 0 0 12px; color: #14202b; }
.abt-card p { font-size: 15px; line-height: 1.8; color: #5b6472; margin: 0 0 20px; }
.abt-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.abt-card li { display: flex; gap: 10px; font-size: 14.5px; color: #1f2937; }
.abt-card li::before { content: "✓"; font-weight: 700; }
.abt-card.mission li::before { color: #0e8f9a; }
.abt-card.vision li::before  { color: #e8650a; }

/* counsellors */
.abt-team { background: #fff; }
.abt-person {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: center;
    padding: 44px 0;
    border-top: 1px solid #e6edf0;
}
.abt-person:first-of-type { border-top: 0; padding-top: 0; }
.abt-person:last-of-type { padding-bottom: 0; }
.abt-person img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
    background: #f3f4f6;
    display: block;
}
.abt-name { font-size: 28px; font-weight: 700; color: var(--primary); margin: 0 0 4px; }
.abt-role { font-size: 14px; font-weight: 600; color: #e8650a; margin: 0 0 16px; }
.abt-bio { font-size: 15px; line-height: 1.85; color: #5b6472; margin: 0 0 18px; }
.abt-creds { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.abt-creds li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: #1f2937; }
.abt-creds li::before { content: "✓"; color: var(--primary); font-weight: 700; }

@media (max-width: 991px) {
    .abt-section { padding: 60px 0; }
    .abt-cards { grid-template-columns: 1fr; }
    .abt-person { grid-template-columns: 1fr; gap: 24px; }
    .abt-person img { max-width: 320px; }
}
@media (max-width: 768px) {
    .abt-hero { padding: 70px 0 64px; }
    .abt-hero h1 { font-size: 34px; }
    .abt-hero p { font-size: 15px; }
    .abt-actions .btn { width: 100%; }
    .abt-title { font-size: 26px; }
    .abt-quote, .abt-card { padding: 26px 22px; }
    .abt-name { font-size: 24px; }
}