/* =========================================================
   M N ALI MODEL SCHOOL — MODERN DESIGN UPGRADE (v2)
   Load this AFTER webstyle-mnali-theme.css. Purely additive —
   no class was renamed, so removing this one <link> instantly
   reverts to the previous look with zero risk.
   ========================================================= */

/* ---- 1. Global feel: smoother motion + depth ---- */
* {
    transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease, color .2s ease;
}

body {
    background: #fdfefd;
}

/* ---- 2. Glass navbar on scroll ---- */
.navbar {
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(0, 78, 25, .06);
}

.navbar .listItems li a {
    position: relative;
}

.navbar .listItems li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--mna-green), var(--mna-gold));
    transition: width .25s ease;
}

.navbar .listItems li a:hover::after {
    width: 100%;
}

/* ---- 3. Top bar: subtle gradient instead of flat fill ---- */
.topHeader {
    background: linear-gradient(90deg, var(--mna-green-dark), var(--mna-green) 60%, var(--mna-green-dark)) !important;
}

/* ---- 4. Modern gradient buttons with lift + glow ---- */
.commonBtn {
    background: linear-gradient(135deg, var(--mna-green), var(--mna-green-dark)) !important;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 78, 25, .18);
}

.commonBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 78, 25, .28);
}

.commonBtn:active {
    transform: translateY(-1px);
}

.viewAllBtn .commonBtn {
    background: linear-gradient(135deg, var(--mna-gold), #b98a12) !important;
    box-shadow: 0 4px 14px rgba(212, 160, 23, .25);
}

.viewAllBtn .commonBtn:hover {
    box-shadow: 0 14px 28px rgba(212, 160, 23, .35);
}

.mnaCtaBtnWhite {
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.mnaCtaBtnGold {
    background: linear-gradient(135deg, var(--mna-gold), #b98a12) !important;
}

/* ---- 5. Hero — depth + soft vignette ---- */
.heroSection {
    position: relative;
}

.heroSection::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 53, 15, .05) 0%, rgba(0, 53, 15, 0) 20%, rgba(0, 53, 15, .35) 100%);
}

/* ---- 6. Stats strip: glass pills ---- */
.mnaStats {
    background: linear-gradient(120deg, var(--mna-green-dark), var(--mna-green)) !important;
}

.mnaStatItem {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 12px 16px;
}

.mnaStatIcon {
    background: linear-gradient(135deg, var(--mna-gold), #b98a12);
    color: #fff;
    box-shadow: 0 6px 16px rgba(212, 160, 23, .3);
}

/* ---- 7. Why choose us: floating icon cards ---- */
.mnaWhyItem {
    background: #fff;
    border-radius: 16px;
    padding: 22px 14px;
    box-shadow: 0 6px 18px rgba(0, 78, 25, .06);
    border: 1px solid #f0f4f0;
}

.mnaWhyItem:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(0, 78, 25, .14);
}

.mnaWhyIcon {
    background: linear-gradient(135deg, #eaf5ec, #d9ecdd);
    border: none;
    box-shadow: inset 0 0 0 1px rgba(0, 78, 25, .08);
}

.mnaWhyItem:hover .mnaWhyIcon {
    background: linear-gradient(135deg, var(--mna-green), var(--mna-green-dark));
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
}

/* ---- 8. Program & event cards: lift + image zoom ---- */
.programs .programsCardWrapper .card,
.events .eventsCardWrapper .card {
    border-radius: 16px !important;
}

.programs .programsCardWrapper .card {
    overflow: hidden;
}

.programs .programsCardWrapper .card img {
    transition: transform .4s ease;
}

.programs .programsCardWrapper .card:hover img {
    transform: scale(1.08);
}

.programs .programsCardWrapper .card:hover,
.events .eventsCardWrapper .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(0, 78, 25, .16) !important;
}

/* ---- 9. Facilities grid: hover zoom + gradient overlay ---- */
.mnaFacilityItem {
    border-radius: 14px !important;
}

.mnaFacilityItem img {
    transition: transform .4s ease;
}

.mnaFacilityItem:hover img {
    transform: scale(1.1);
}

.mnaFacilityItem span {
    background: linear-gradient(0deg, rgba(0, 78, 25, .88), rgba(0, 78, 25, 0)) !important;
    padding-top: 40px !important;
}

/* ---- 10. Achievements list: gradient icon chips ---- */
.mnaAchievementsList {
    border-radius: 16px;
}

.mnaAchievementIcon {
    background: linear-gradient(135deg, var(--mna-gold), #b98a12) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(212, 160, 23, .3);
}

.mnaAchievementItem:hover {
    padding-left: 6px;
}

/* ---- 11. Message + testimonial cards ---- */
.mnaMessageCard,
.mnaTestimonialCard {
    border-radius: 16px;
}

.mnaMessageCard:hover,
.mnaTestimonialCard:hover {
    box-shadow: 0 18px 34px rgba(0, 78, 25, .1);
    transform: translateY(-4px);
}

.mnaPrincipalPhoto {
    box-shadow: 0 8px 20px rgba(212, 160, 23, .35);
}

/* ---- 12. Admissions CTA: animated gradient sheen ---- */
.mnaCta {
    background: linear-gradient(120deg, var(--mna-green-dark), var(--mna-green), var(--mna-green-dark)) !important;
    background-size: 200% 200%;
    animation: mnaCtaShift 8s ease infinite;
    border-radius: 0;
}

@keyframes mnaCtaShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.mnaCtaIcon {
    background: linear-gradient(135deg, var(--mna-gold), #b98a12);
    color: #fff;
    box-shadow: 0 8px 20px rgba(212, 160, 23, .35);
}

/* ---- 13. Contact section ---- */
.mnaContactIcon {
    background: linear-gradient(135deg, #eaf5ec, #d9ecdd);
    border-radius: 12px;
}

.mnaContactRow:hover .mnaContactIcon {
    background: linear-gradient(135deg, var(--mna-green), var(--mna-green-dark));
    color: #fff;
}

.mnaMapBox {
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 78, 25, .1);
}

/* ---- 14. Footer: deep gradient ---- */
footer {
    background: linear-gradient(160deg, var(--mna-green-dark), #001f09) !important;
}

footer .socialIcons span {
    transition: transform .2s ease, background-color .2s ease;
}

footer .socialIcons span:hover {
    background: var(--mna-gold);
    transform: translateY(-3px);
}

footer .socialIcons span:hover i {
    color: #fff !important;
}

/* ---- 15. Scroll-reveal (paired with the small JS snippet) ---- */
.mna-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.mna-reveal.mna-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- 16. Section rhythm: a touch more breathing room ---- */
.commonMT {
    margin-top: 72px !important;
}

@media screen and (max-width: 575px) {
    .commonMT { margin-top: 48px !important; }
}