
@font-face{
 font-family:"Alvi Nastaleeq Local";
 src:url("assets/AlviNastaleeq.ttf") format("truetype");
 font-weight:400;font-style:normal;font-display:swap;
}
:root{
 --green:#063f2e;--green2:#0d7653;--deep:#031d16;--gold:#d2ad55;--gold2:#f3dda0;
 --cream:#f7f3e7;--ink:#17261f;--muted:#66756e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0; padding-top:96px; direction:rtl; color:var(--ink);
 font-family:"Alvi Nastaleeq Local","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
 background:linear-gradient(135deg,#fbf8ef,#eaf2ed); overflow-x:hidden; line-height:1.9;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{width:min(1240px,93%);margin:auto}

/* Same premium fixed navigation on every public page */
.site-header{
 position:fixed;top:0;left:0;right:0;z-index:99999;
 background:rgba(255,255,255,.97);backdrop-filter:blur(18px);
 border-bottom:1px solid rgba(166,125,38,.38);
 box-shadow:0 10px 32px rgba(2,29,22,.16);
}
.nav-wrap{min-height:96px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;min-width:245px;flex-shrink:0}
.brand img{
 width:66px;height:66px;object-fit:contain;border-radius:50%;
 background:#fff;border:2px solid var(--gold);
 box-shadow:0 7px 18px rgba(0,0,0,.14)
}
.brand strong{display:block;color:var(--green);font-size:19px;line-height:1.15}
.brand small{display:block;direction:ltr;color:#738079;font:700 9px Georgia,serif;margin-top:2px}
.nav{
 flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;padding:6px;
 border-radius:20px;background:linear-gradient(145deg,#fff,#e3ece7);
 border:1px solid rgba(7,60,43,.14);
 box-shadow:inset 0 2px #fff,0 12px 28px rgba(7,60,43,.10)
}
.nav a{
 min-width:0;height:56px;display:flex;align-items:center;justify-content:center;gap:5px;
 border-radius:14px;border:1px solid rgba(129,97,30,.25);
 background:linear-gradient(145deg,#fff,#e0e9e4);
 color:#173b30;font-weight:900;
 box-shadow:0 5px 0 #b6c6bd,0 8px 16px rgba(0,0,0,.07),inset 0 2px #fff;
 transition:.25s;position:relative;overflow:hidden
}
.nav a:hover,.nav a.active{
 color:#fff;background:linear-gradient(145deg,#13815b,#043c2b);
 border-color:var(--gold);transform:translateY(-4px);
 box-shadow:0 6px 0 #05271e,0 15px 27px rgba(3,47,34,.22)
}
.nav-icon{
 width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
 background:linear-gradient(145deg,#fff0b7,#c79632);color:#18382d;font-size:14px;
 box-shadow:inset 0 2px #fff,0 3px 7px rgba(0,0,0,.14)
}
.nav-copy{display:flex;flex-direction:column;align-items:center;line-height:1}
.nav-copy b{font-size:12px;white-space:nowrap}
.nav-copy small{direction:ltr;font:700 6px Georgia,serif;letter-spacing:.6px;opacity:.58;margin-top:2px}

main{min-height:calc(100vh - 96px)}
section{padding:60px 0}
.page-header,.page-hero{
 position:relative;overflow:hidden;text-align:center;color:#fff;
 padding:65px 20px;background:
 radial-gradient(circle at 50% 0,rgba(213,178,91,.2),transparent 32%),
 linear-gradient(135deg,#031d16,#0b6a4a);
 box-shadow:0 18px 45px rgba(3,35,26,.14)
}
.page-header:before,.page-hero:before{
 content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
 background:repeating-conic-gradient(from 0deg,rgba(245,223,160,.07) 0 3deg,transparent 3deg 15deg)
}
.page-header h1,.page-hero h1{position:relative;color:#f3dda0;font-size:clamp(34px,5vw,52px);margin:0 0 8px}
.page-header p,.page-hero p{position:relative;color:#edf5f1;font-size:18px;margin:auto;max-width:850px}
.bismillah{position:relative;color:var(--gold2);font-size:23px;margin-bottom:8px}

.teachers,.gallery-page,.islami-page,.page-content{position:relative}
.teachers h2,.section-title h2{color:var(--green);text-align:center;font-size:36px;margin:0 0 30px}
.teacher-grid,.gallery-grid,.islami-grid,.page-grid{
 display:grid;grid-template-columns:repeat(3,1fr);gap:24px
}
.teacher-card,.gallery-card,.islami-card,.page-card,.contact-public-card,.premium-panel{
 position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,#edf4ef);
 border:1px solid rgba(197,154,55,.30);border-radius:24px;
 box-shadow:0 16px 38px rgba(3,35,26,.10),inset 0 2px #fff;
 transition:.3s ease
}
.teacher-card:hover,.gallery-card:hover,.islami-card:hover,.page-card:hover,.contact-public-card:hover{
 transform:translateY(-8px) perspective(900px) rotateX(2deg);
 box-shadow:0 27px 55px rgba(3,35,26,.16),0 0 20px rgba(197,154,55,.10)
}
.teacher-photo{width:100%;height:270px;object-fit:cover;background:#e8eee9}
.teacher-card h3,.page-card h3,.islami-card h3{color:var(--green);font-size:23px;margin:16px 20px 8px}
.teacher-card .teacher-subject,.teacher-card p,.page-card p,.islami-card p{color:var(--muted);line-height:2;margin:0 20px 20px}
.teacher-empty{grid-column:1/-1;text-align:center;padding:55px;color:var(--muted)}

.gallery-image{aspect-ratio:4/3;background:#e8e0d1;overflow:hidden}
.gallery-image img{width:100%;height:100%;object-fit:cover;transition:.45s}
.gallery-card:hover .gallery-image img{transform:scale(1.06)}
.gallery-info{padding:16px 20px 20px}
.gallery-info h3{color:var(--green);margin:0 0 5px;font-size:20px}
.gallery-info p{color:var(--muted);margin:0}
.gp-heading,.islami-title{text-align:center;margin:45px 0 28px}
.gp-heading h2,.islami-title h2{color:var(--green);font-size:34px;margin:7px 0}
.gp-heading p,.islami-title p{color:var(--muted)}

.big-icon,.icon,.contact-icon{font-size:45px;text-align:center;margin:24px auto 0}
.simple-actions,.islami-actions{text-align:center;padding:0 0 24px}
.btn,.library-btn{
 display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;
 border-radius:13px;font-weight:900;border:1px solid rgba(129,97,30,.25);
 background:linear-gradient(135deg,#f6e4a6,#c79532);color:#17382c;
 box-shadow:0 6px 0 #8a6a26,0 12px 22px rgba(0,0,0,.12);transition:.23s
}
.btn:hover,.library-btn:hover{transform:translateY(-4px)}
.btn-gold{background:linear-gradient(135deg,#f6e4a6,#c79532)!important;color:#17382c!important}

.contact-public-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.contact-public-card{text-align:center;padding:30px}
.contact-public-card h3{color:var(--green);font-size:24px;margin:10px}
.contact-public-card p{color:var(--muted)}

.site-footer{background:linear-gradient(135deg,#031d16,#063f2e);color:#dcebe4;padding:45px 0 18px;margin-top:20px}
.footer-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.site-footer h3{color:var(--gold2);margin:0 0 10px;font-size:22px}
.site-footer p{margin:5px 0;color:#d0ddd7}
.site-footer a{color:#f3dda0}
.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:16px;color:#bfcfc7;font-size:13px}

@media(max-width:1050px){
 body{padding-top:150px}
 .nav-wrap{flex-direction:column;padding:10px 0}
 .brand{min-width:0}
 .nav{width:100%}
 main{min-height:calc(100vh - 150px)}
}
@media(max-width:760px){
 body{padding-top:225px}
 .nav{grid-template-columns:repeat(4,1fr)}
 .nav a{height:48px}
 .brand img{width:58px;height:58px}
 .brand strong{font-size:17px}
 .teacher-grid,.gallery-grid,.islami-grid,.page-grid,.contact-public-grid,.footer-inner{grid-template-columns:1fr}
 .page-header,.page-hero{padding:48px 18px}
 section{padding:45px 0}
}
@media(max-width:430px){
 body{padding-top:330px}
 .nav{grid-template-columns:repeat(2,1fr)}
 .nav a{height:50px}
 .nav-copy b{font-size:11px}
}
/* =========================================================
   HIFZ PREMIUM 3D BUTTONS
   ========================================================= */

.hifz-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-top:28px;
}

.hifz-actions a{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:210px;
    min-height:56px;
    padding:11px 27px;

    border-radius:15px;

    font-size:18px;
    font-weight:900;
    text-decoration:none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}


/* Gold Admission Button */

.hifz-main-btn{
    color:#17382c !important;

    background:
        linear-gradient(
            145deg,
            #f8e7ad 0%,
            #d2ad55 48%,
            #a87929 100%
        ) !important;

    border:1px solid #f3dda0;

    box-shadow:
        0 7px 0 #806021,
        0 14px 28px rgba(0,0,0,.22),
        inset 0 2px 0 rgba(255,255,255,.65);

}


/* WhatsApp / Contact Button */

.hifz-wa-btn{
    color:#123a2e !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #edf4f0 50%,
            #d8e4df 100%
        ) !important;

    border:1px solid rgba(210,173,85,.45);

    box-shadow:
        0 7px 0 #aebdb6,
        0 14px 28px rgba(0,0,0,.17),
        inset 0 2px 0 #fff;

}


/* Hover */

.hifz-actions a:hover{
    transform:translateY(-6px);
    filter:brightness(1.06);
}


/* Press */

.hifz-actions a:active{
    transform:translateY(2px);

    box-shadow:
        0 3px 0 rgba(0,0,0,.25),
        0 6px 12px rgba(0,0,0,.12);
}


/* Gold shine */

.hifz-main-btn::before,
.hifz-wa-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;

    background:linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-20deg);
    transition:.65s ease;
}

.hifz-actions a:hover::before{
    left:140%;
}


/* Mobile */

@media(max-width:600px){

    .hifz-actions{
        flex-direction:column;
        width:100%;
    }

    .hifz-actions a{
        width:100%;
        max-width:340px;
    }

}