@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Global tap feedback fix — kills Android's default gray/blue tap-highlight
   flash sitewide and speeds up tap response on all cards, buttons, and
   tappable list items (removes the ~300ms double-tap delay). */
a,
button,
input[type="button"],
input[type="submit"],
[class*="btn"],
[class*="-card"],
[class*="card-"],
[class*="card_"],
[class*="chip"],
[class*="pill"],
[class*="tile"],
[class*="-item"],
.mb-uni-cta,
.mobile-nav-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}



body{
	  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


/* Footer Base */
footer{
    position:relative;
    width:100%;
    padding:60px 80px;
    background-image:linear-gradient(180deg, rgba(10,14,10,.55) 0%, rgba(10,14,10,.72) 55%, rgba(10,14,10,.85) 100%), url('footer-banner.webp');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border-top:1px solid #1f2a1f;
    font-family: 'Arial', sans-serif;
    isolation:isolate;
}

/* Grid Layout */
footer .container{
    width:100%;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr 1fr;
    gap:40px;
}

/* Section Titles */
footer .sec h5{
    font-size:18px;
    font-weight:700;
    margin-bottom:15px;
    color:#96D61E;
    position:relative;
}

footer .sec h5::after{
    content:'';
    width:40px;
    height:3px;
    background:#96D61E; /* Brand color */
    display:block;
    margin-top:6px;
    border-radius:2px;
}

/* Paragraphs */
footer .sec p{
    font-size:15px;
    line-height:26px;
    color:#c9d0c8;
    max-width:400px;
}

/* About Us brand row (logo + wordmark) */
footer .footer-about-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

footer .footer-logo{
    width:44px;
    height:44px;
    border-radius:10px;
    flex-shrink:0;
    object-fit:cover;
}

footer .footer-brand-name{
    font-family: Georgia, 'Times New Roman', serif;
    font-size:24px;
    font-weight:700;
    color:#ffffff;
    line-height:1.1;
}

/* Lists */
footer ul{
    padding:0;
    margin:0;
    color:#fff;
}

footer ul li{
    list-style:none;
    margin-bottom:10px;
    color:#fff;
}

/* Footer Links */
footer .container ul li a {
    color: #e8ebe6;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
    display: inline-block;
    position: relative;
}

footer .container ul li a::before {
    content: '›';
    color: #96D61E;
    margin-right: 6px;
    font-weight: 700;
}

footer .container ul li a:hover {
    color: #96D61E;
    padding-left: 5px;
}

footer .container ul li a:active {
    color: #96D61E;
    padding-left: 5px;
    opacity: 0.7;
    transition: 0.1s;
}
/* Contact Section */
.contact li{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:10px;
    margin-bottom:15px;
}

.contact li span{
    font-size:15px;
    color:#444;
}

.contact li i{
    font-size:18px;
    color:#6B9E12; /* Brand color for icons */
}

/* Footer Social Icons */
footer .footer-social{
    display:flex;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}

footer .footer-social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    font-size:15px;
    transition:.2s ease;
    text-decoration:none;
}

footer .footer-social a:hover{
    color:#fff;
    transform:translateY(-2px);
}

footer .footer-social a:active{
    color:#fff;
    transform:scale(0.9);
    transition: background-color 0.12s ease, transform 0.12s ease;
}

footer .footer-social-icon.facebook{ color:#1877F2; }
footer .footer-social-icon.facebook:hover{ background:#1877F2; }
footer .footer-social-icon.facebook:active{ background:#1877F2; }

footer .footer-social-icon.instagram{ color:#C13584; }
footer .footer-social-icon.instagram:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }
footer .footer-social-icon.instagram:active{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); }

footer .footer-social-icon.tiktok{ color:#010101; }
footer .footer-social-icon.tiktok:hover{ background:#010101; }
footer .footer-social-icon.tiktok:active{ background:#010101; }

footer .footer-social-icon.youtube{ color:#FF0000; }
footer .footer-social-icon.youtube:hover{ background:#FF0000; }
footer .footer-social-icon.youtube:active{ background:#FF0000; }

footer .footer-social-icon.twitter{ color:#000000; }
footer .footer-social-icon.twitter:hover{ background:#000000; }
footer .footer-social-icon.twitter:active{ background:#000000; }

footer .footer-social-icon.whatsapp{ color:#25D366; }
footer .footer-social-icon.whatsapp:hover{ background:#25D366; }
footer .footer-social-icon.whatsapp:active{ background:#25D366; }

/* Copyright Bar removed */

.application-status{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 15px;
    background:#eafaf0;
    border-left:4px solid #28a745;
    border-radius:10px;
}

.application-status i{
    color:#28a745;
    font-size:24px;
}

.application-status strong{
    display:block;
    font-size:15px;
    color:#198754;
}

.application-status small{
    color:#666;
}

/* Responsive Design */
@media (max-width:992px){
    footer{
        padding:50px 40px;
    }

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

@media (max-width:600px){
    footer{
        padding:40px 25px;
    }

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

/* ======================================
   MATRICBASE NAVIGATION
====================================== */

:root {
    --nav-primary: #4C7A0E;
    --nav-primary-light: #669E14;
    --nav-background: #fffdf8;
    --nav-surface: #ffffff;
    --nav-text: #171717;
    --nav-muted: #6f7280;
    --nav-border: #e8e5de;
    --nav-accent: #6B9E12;
    --nav-shadow: 0 12px 35px rgba(76, 122, 14, 0.1);
}


/* Prevent horizontal scrolling */
html,
body {
    overflow-x: hidden;
}


/* Add spacing because navbar is fixed */
body {
    padding-top: 86px;
}


/* Main header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 253, 248, 0.97);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 4px 20px rgba(76, 122, 14, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* Navbar content wrapper */
.navbar-container {
    width: min(1450px, calc(100% - 48px));
    min-height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}


/* Brand */
.navbar-brand,
.mobile-brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}

.brand-logo,
.mobile-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
}

.brand-name {
    font-family: Georgia, 'Times New Roman', serif;
    color: #16241C;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.brand-tagline {
    margin-top: 6px;
    color: var(--nav-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}


/* Desktop menu */
.desktop-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}


/* Standard navigation link */
.nav-link {
    position: relative;
    border: 0;
    background: transparent;
    color: var(--nav-text);
    padding: 32px 17px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    right: 17px;
    bottom: 20px;
    left: 17px;
    height: 2px;
    border-radius: 10px;
    background: var(--nav-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--nav-accent);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    transform: scaleX(1);
}

.nav-link:active {
    color: var(--nav-accent);
    background: rgba(107, 158, 18, 0.06);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.nav-link:active::after {
    transform: scaleX(1);
}


/* Dropdown wrapper */
.nav-dropdown {
    position: relative;
}


/* Dropdown button */
.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
}


/* Dropdown arrow */
.dropdown-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown.dropdown-open .dropdown-arrow {
    transform: rotate(225deg) translate(-2px, -2px);
}


/* Dropdown panel */
.mega-menu {
    position: absolute;
    top: calc(100% - 3px);
    right: 0;
    z-index: 20;
    padding: 34px 36px;
    background: var(--nav-background);
    border: 1px solid var(--nav-border);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--nav-shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


/* Universities panel */
.universities-menu {
    width: 620px;
}


/* Resources panel */
.resources-menu {
    width: 420px;
}


/* Open desktop menu */
.nav-dropdown:hover .mega-menu,
.nav-dropdown.dropdown-open .mega-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* Dropdown heading */
.mega-menu-title {
    display: block;
    margin-bottom: 20px;
    color: var(--nav-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* Dropdown grids */
.province-grid,
.resources-grid {
    display: grid;
    gap: 0 34px;
}

.province-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resources-grid {
    grid-template-columns: 1fr;
}


/* Dropdown links */
.province-grid a,
.resources-grid a {
    display: block;
    padding: 12px 0;
    color: var(--nav-text);
    border-bottom: 1px solid var(--nav-border);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}

.province-grid a:hover,
.resources-grid a:hover {
    color: var(--nav-accent);
    padding-left: 5px;
}

.province-grid a:active,
.resources-grid a:active {
    color: var(--nav-accent);
    padding-left: 5px;
    background: rgba(107, 158, 18, 0.08);
    transition: background-color 0.1s ease, color 0.1s ease, padding-left 0.1s ease;
}


/* Navbar actions wrapper (app link + hamburger) */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin-left: auto;
}

.desktop-navigation ~ .navbar-actions {
    margin-left: 0;
}

/* "Get the App" nav link */
.nav-app-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    background: #16241C;
    color: #96D61E;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

.nav-app-link i {
    font-size: 13px;
    color: #96D61E;
}

.nav-app-link:hover {
    background: #263820;
}

.nav-app-link:active {
    transform: scale(0.95);
    background: #263820;
}

/* Mobile menu button */
.mobile-menu-button {
    display: none;
    width: 48px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--nav-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    transition: transform 0.12s ease, background-color 0.12s ease;
}

.mobile-menu-button:active {
    transform: scale(0.93);
    background: var(--nav-accent);
}

.mobile-menu-button span {
    width: 21px;
    height: 2px;
    border-radius: 10px;
    background: #ffffff;
}


/* Mobile overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(76, 122, 14, 0.45);
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    visibility: visible;
    opacity: 1;
}


/* Mobile navigation drawer */
.mobile-navigation {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: min(430px, 100%);
    height: 100dvh;
    background: var(--nav-background);
    box-shadow: -15px 0 40px rgba(76, 122, 14, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
}

.mobile-navigation.active {
    transform: translateX(0);
}


/* Mobile header */
.mobile-navigation-header {
    min-height: 86px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--nav-border);
}


/* Mobile close button */
.mobile-close-button {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mobile-close-button span {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 23px;
    height: 2px;
    border-radius: 10px;
    background: var(--nav-primary);
}

.mobile-close-button span:first-child {
    transform: rotate(45deg);
}

.mobile-close-button span:last-child {
    transform: rotate(-45deg);
}


/* Mobile content */
.mobile-menu-content {
    padding: 6px 20px 32px;
}


/* Mobile nav groups (LEARN / DISCOVER / PLAN) */
.mobile-nav-section {
    margin-top: 24px;
}

.mobile-nav-section:first-child {
    margin-top: 6px;
}

.mobile-nav-group-title {
    display: block;
    margin: 0 4px 10px;
    color: var(--nav-primary);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.mobile-nav-card {
    background: var(--nav-surface);
    border: 1px solid var(--nav-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(22, 36, 28, 0.04);
}

.mobile-menu-content .mobile-nav-item {
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid var(--nav-border);
    background: transparent;
    color: var(--nav-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.mobile-menu-content .mobile-nav-item:last-child {
    border-bottom: 0;
}

.mobile-menu-content .mobile-nav-item:hover {
    background: rgba(107, 158, 18, 0.07);
}

.mobile-menu-content .mobile-nav-item:active {
    transform: scale(0.97);
    background: rgba(107, 158, 18, 0.14);
    transition: background-color 0.1s ease, transform 0.1s ease;
}

.mobile-menu-content .mobile-nav-item.active {
    color: var(--nav-primary);
    background: rgba(107, 158, 18, 0.06);
}

.mobile-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(107, 158, 18, 0.1);
    color: var(--nav-primary);
    font-size: 14px;
}

.mobile-menu-content .mobile-nav-item.active .mobile-nav-icon {
    background: var(--nav-primary);
    color: #ffffff;
}

.mobile-nav-label {
    flex: 1;
}


/* Mobile menu link */
.mobile-menu-link,
.mobile-dropdown-button {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    border: 0;
    border-bottom: 1px solid var(--nav-border);
    background: transparent;
    color: var(--nav-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.1s ease, transform 0.1s ease;
}

.mobile-menu-link:active,
.mobile-dropdown-button:active {
    transform: scale(0.98);
    background: rgba(107, 158, 18, 0.1);
}




/* ======================================
   APP CALLOUT (contextual "in the app" box)
   Sitewide, generic — used on aps.html, bursaries.html,
   prospectus.html, etc. wherever a feature is app-only.
====================================== */

.mb-app-callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #16241C;
    border-radius: 14px;
    padding: 18px 20px;
    margin: 24px 0;
}

.mb-app-callout-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #96D61E;
    color: #16241C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.mb-app-callout-copy {
    flex: 1;
    min-width: 160px;
}

.mb-app-callout-copy strong {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3px;
}

.mb-app-callout-copy span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.72);
}

.mb-app-callout .mb-play-badge {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
    align-self: center;
}

.mb-app-callout .mb-play-badge img {
    height: 42px;
    width: auto;
    display: block;
}

@media (max-width: 560px) {
    .mb-app-callout {
        flex-wrap: wrap;
    }

    .mb-app-callout .mb-play-badge {
        margin-left: 50px;
    }
}


/* ======================================
   FOOTER PLAY BADGE
====================================== */

.footer-play-badge {
    display: inline-flex;
    line-height: 0;
    margin-top: 16px;
}

.footer-play-badge img {
    height: 44px;
    width: auto;
    display: block;
}


/* Prevent page scrolling when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}


/* ======================================
   TABLET AND MOBILE
====================================== */

@media (max-width: 1100px) {

    body {
        padding-top: 76px;
    }

    .navbar-container {
        width: calc(100% - 32px);
        min-height: 76px;
    }

    .desktop-navigation {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .brand-name {
        font-size: 19px;
    }

}


/* ======================================
   SMALL MOBILE
====================================== */

@media (max-width: 480px) {

    .navbar-container {
        width: calc(100% - 24px);
    }

    .brand-name {
        font-size: 17px;
    }

    .brand-tagline {
        font-size: 8px;
    }

    .mobile-menu-button {
        width: 44px;
        height: 42px;
    }

    .navbar-actions {
        gap: 8px;
    }

    .nav-app-link {
        width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 12px;
    }

    .nav-app-link span {
        display: none;
    }

    .mobile-navigation-header {
        padding-right: 16px;
        padding-left: 16px;
    }

    .mobile-menu-content {
        padding-right: 16px;
        padding-left: 16px;
    }

}





/* ======================================
   COOKIE CONSENT BANNER
====================================== */

#mb-cookie-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 10000;
    height: auto;
    max-height: none;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;
}

#mb-cookie-banner.mb-cookie-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mb-cookie-inner {
    width: auto;
    max-width: 380px;
    margin: 0 0 0 auto;
    background: #16241C;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
    padding: 14px;
    display: block;
}

.mb-cookie-text {
    margin: 0 0 10px 0;
    color: rgba(255,255,255,.78);
    font-size: .78rem;
    line-height: 1.4;
}

.mb-cookie-text a {
    color: #F6ECD9;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(246,236,217,.4);
}

.mb-cookie-text a:hover {
    border-bottom-color: #F6ECD9;
}

.mb-cookie-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.mb-cookie-btn {
    font-family: inherit;
    font-size: .76rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: opacity .15s ease, background .15s ease;
    white-space: nowrap;
}

.mb-cookie-decline {
    background: transparent;
    border-color: rgba(255,255,255,.25);
    color: rgba(255,255,255,.75);
}

.mb-cookie-decline:hover {
    background: rgba(255,255,255,.08);
}

.mb-cookie-accept {
    background: #4C7A0E;
    color: #fff;
}

.mb-cookie-accept:hover {
    background: #365607;
}

@media (max-width: 480px) {
    .mb-cookie-inner {
        max-width: none;
        margin: 0;
    }
}


/* ======================================
   SITE COPYRIGHT BAR
====================================== */

.site-copyright {
    background: #0A0E0A;
    border-top: 1px solid #1f2a1f;
    padding: 16px 20px;
    text-align: center;
}

.site-copyright p {
    margin: 0;
    color: rgba(255,255,255,.5);
    font-size: .8rem;
    letter-spacing: .2px;
}