/*==================================================
 AL FAJR FOUNDATION
 PREMIUM HEADER 4.0
 Part 1
==================================================*/

/*==============================
 GOOGLE FONTS
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

/*==============================
 DESIGN TOKENS
==============================*/
:root{
    --header-height:84px;
    --header-height-scroll:68px;

    --container-width:1400px;
    --navy:#071A36;
    --navy-dark:#041225;

    --gold:#C9A227;
    --gold-light:#E5C768;

    --white:#ffffff;
    --cream:#FFFDF8;

    --text:#213347;
    --muted:#728095;

    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-xl:999px;

    --transition:.35s cubic-bezier(.4,0,.2,1);

    --shadow-sm:
        0 6px 18px rgba(0,0,0,.08);

    --shadow-md:
        0 18px 50px rgba(0,0,0,.12);

    --shadow-lg:
        0 30px 80px rgba(0,0,0,.18);

}

/*==============================
 RESET
==============================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    color:var(--text);

    background:#fff;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}

ul{

    list-style:none;

}

/*==============================
 GLOBAL CONTAINER
==============================*/

.container{

    width:min(94%,var(--container-width));

    margin-inline:auto;

}

/*==============================
 HEADER
==============================*/

.site-header{

    position:fixed;

    inset:0 0 auto 0;

    z-index:5000;

    height:var(--header-height);

    display:flex;

    align-items:center;

    background:

        rgba(7,26,54,.82);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom: 1px solid rgba(201, 162, 39, 0.12);

    transition:

        all var(--transition);

}

.site-header.sticky,
.site-header.scrolled{

    height:var(--header-height-scroll);

    background:

        rgba(7,26,54,.94);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

}

/*==============================
 INNER
==============================*/

.header-inner{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

/*==============================
 LOGO, NAVIGATION & ACTION AREAS
==============================*/
.logo-area {
    display: flex;
    align-items: center;
    flex: 1 0 260px; /* logo area left aligned */
}

.main-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 260px; /* action area right aligned */
}

/*==============================
 BRAND
==============================*/

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

/*==============================
 LOGO HOLDER
==============================*/

.brand-mark{

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.04)
        );

    border:

        1px solid rgba(255,255,255,.10);

    box-shadow:

        0 12px 28px rgba(0,0,0,.22);

    transition:all var(--transition);

}

.site-header.sticky .brand-mark,
.site-header.scrolled .brand-mark{

    width:60px;

    height:60px;

}

/*==============================
 LOGO IMAGE
==============================*/

.brand-mark img{

    width:84%;

    height:84%;

    object-fit:contain;

    object-position:center;

    filter:

        drop-shadow(
            0 4px 10px rgba(0,0,0,.18)
        );

    transition:all var(--transition);

}

.brand:hover .brand-mark{

    transform:

        translateY(-2px)
        scale(1.04);

}

/*==============================
 BRAND TEXT
==============================*/

.brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.brand-text strong{

    font-family:

        'Playfair Display',
        serif;

    font-size:1.55rem;

    font-weight:700;

    color:#fff;

    letter-spacing:.04em;

    line-height:1;

}

.brand-text small{

    margin-top:6px;

    color:

        rgba(255,255,255,.72);

    font-size:.74rem;

    letter-spacing:.34em;

    text-transform:uppercase;

}
/*==================================================
 PART 2
 PREMIUM NAVIGATION
==================================================*/

/*==============================
 DESKTOP NAVIGATION
==============================*/

.site-nav{

    display:flex;

    align-items:center;

    margin-inline:auto;

    gap:44px;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:34px;

}

/*==============================
 NAV LINKS
==============================*/

.nav-links a{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 0;

    color:rgba(255,255,255,.92);

    font-size:.97rem;

    font-weight:600;

    letter-spacing:.03em;

    transition:all var(--transition);

}

.nav-links a:hover{

    color:var(--gold);

}

/*==============================
 PREMIUM UNDERLINE
==============================*/

.nav-links a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-4px;

    transform:translateX(-50%) scaleX(0);

    width:28px;

    height:3px;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        var(--gold-light),

        var(--gold)

    );

    transition:transform 0.35s cubic-bezier(.4, 0, .2, 1);

    transform-origin:center;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    transform:translateX(-50%) scaleX(1);

}

.nav-links a.active{

    color:var(--gold);

}

/*==============================
 DONATE BUTTON
==============================*/

.nav-donate{

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:180px;

    height:52px;

    padding:0 32px;

    border-radius:999px;

    background:

        linear-gradient(
            135deg,
            #d8b54a,
            #c49b22
        );

    color:#08203d;

    font-size:.94rem;

    font-weight:700;

    letter-spacing:.04em;

    box-shadow: 0 10px 25px rgba(201, 162, 39, 0.25);

    transition:all .35s ease;

}

/*==============================
 GOLD SHINE
==============================*/

.nav-donate::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-25deg);

    transition:.7s;

}

.nav-donate:hover::before{

    left:150%;

}

/*==============================
 DONATE HOVER
==============================*/

.nav-donate:hover{

    transform:

        translateY(-2px);

    box-shadow: 0 15px 35px rgba(201, 162, 39, 0.4);

}

/*==============================
 DONATE ACTIVE
==============================*/

.nav-donate:active{

    transform:translateY(-1px);

}

/*==============================
 FOCUS STATES
==============================*/

.nav-links a:focus-visible,

.nav-donate:focus-visible{

    outline:3px solid rgba(255,255,255,.25);

    outline-offset:5px;

}

/*==============================
 HOVER MICRO ANIMATION
==============================*/

.nav-links li{

    transition:transform .25s ease;

}

.nav-links li:hover{

    transform:translateY(-2px);

}
/*==================================================
 PART 3
 MOBILE NAVIGATION
==================================================*/

/*==============================
 MENU TOGGLE
==============================*/

.menu-toggle{

    display:none;

    width:52px;

    height:52px;

    border-radius:14px;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    transition:all var(--transition);

}

.menu-toggle:hover{

    background:rgba(255,255,255,.10);

}

.menu-toggle span{

    width:24px;

    height:2px;

    border-radius:20px;

    background:#ffffff;

    transition:all .35s ease;

}

/*==============================
 HAMBURGER ANIMATION
==============================*/

.menu-toggle.active span:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:
        translateY(-8px)
        rotate(-45deg);

}

/*==============================
 TABLET
==============================*/

@media(max-width:1100px){

.site-nav{

    gap:28px;

}

.nav-links{

    gap:24px;

}

}

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

@media(max-width:980px){

.menu-toggle{

    display:flex;

}

.site-nav{

    position:fixed;

    top:92px;

    left:0;

    right:0;

    background:rgba(7,26,54,.98);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border-top:1px solid rgba(255,255,255,.08);

    box-shadow:0 20px 50px rgba(0,0,0,.25);

    padding:30px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:26px;

    transform:translateY(-20px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:all .35s ease;

}

.site-nav.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}

.nav-links{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:22px;

}

.nav-links li{

    width:100%;

}

.nav-links a{

    width:100%;

    font-size:1.05rem;

    padding:10px 0;

}

.nav-links a::after{

    left:0;

    transform:none;

}

.nav-links a:hover::after{

    width:70px;

}

.header-actions .nav-donate {
    width: auto;
    min-width: 140px;
    height: 46px;
    padding: 0 20px;
    font-size: 0.88rem;
}

.header-actions {
    margin-left: auto;
    margin-right: 15px;
    display: flex;
    align-items: center;
}



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

@media(max-width:640px){

.site-header{

    height:80px;

}

.site-nav{

    top:80px;

}

.brand-mark{

    width:58px;

    height:58px;

}

.brand-text strong{

    font-size:1.20rem;

}

.brand-text small{

    font-size:.65rem;

    letter-spacing:.25em;

}

.container{

    width:min(94%,100%);

}

}
/*==================================================
 PART 4
 FINAL POLISH
==================================================*/

/*==============================
 SCROLL EFFECT
==============================*/

.site-header{

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease,
        height .35s ease;

}

.site-header.sticky,
.site-header.scrolled{

    background:rgba(7,26,54,.97);

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.05);

}

/*==============================
 BRAND ANIMATION
==============================*/

.brand,
.brand-mark,
.brand-mark img,
.brand-text,
.brand-text strong,
.brand-text small{

    transition:all .35s ease;

}

.site-header.sticky .brand-mark,
.site-header.scrolled .brand-mark{

    width:56px;

    height:56px;

}

.site-header.sticky .brand-text strong,
.site-header.scrolled .brand-text strong{

    font-size:1.25rem;

}

.site-header.sticky .brand-text small,
.site-header.scrolled .brand-text small{

    font-size:.66rem;

}

/*==============================
 LINK MICRO ANIMATION
==============================*/

.nav-links a{

    overflow:hidden;

}

.nav-links a::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    background:rgba(255,255,255,.04);

    border-radius:8px;

    transition:opacity .30s ease;

}

.nav-links a:hover::before{

    opacity:1;

}

/*==============================
 DONATE BUTTON
==============================*/

.nav-donate{

    position:relative;

    isolation:isolate;

}

.nav-donate span{

    transition:transform .30s ease;

}

.nav-donate:hover span{

    transform:translateX(4px);

}

/*==============================
 KEYBOARD ACCESSIBILITY
==============================*/

a:focus-visible,
button:focus-visible{

    outline:3px solid rgba(201,162,39,.55);

    outline-offset:4px;

}

/*==============================
 REDUCE MOTION
==============================*/

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/*==============================
 HIGH DPI LOGO
==============================*/

.brand-mark img{

    image-rendering:auto;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}

/*==============================
 FINAL RESPONSIVE
==============================*/

@media(max-width:480px){

.header-inner{

    gap:12px;

}

.brand{

    gap:12px;

}

.brand-mark{

    width:52px;

    height:52px;

}

.brand-text strong{

    font-size:1.05rem;

}

.brand-text small{

    display:none;

}

.menu-toggle{

    width:46px;

    height:46px;

}

.nav-donate{

    font-size:.90rem;

}

}

/*==============================
 GLOBAL BUTTON SYSTEM
==============================*/
.btn,
.btn-primary,
.btn-secondary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 58px;
    padding: 0 34px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    transition: all .35s cubic-bezier(.4, 0, .2, 1);
    text-align: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--navy), #0b2b56);
    color: #fff;
    box-shadow: 0 18px 40px rgba(7, 26, 54, 0.25);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(7, 26, 54, 0.3);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    border: 2px solid var(--gold);
    color: var(--navy);
}

.btn-secondary:hover {
    background: #fff8ec;
    transform: translateY(-4px);
    color: var(--navy);
}

.btn-outline {
    background: transparent;
    border: 2px dashed rgba(7, 26, 54, 0.18);
    color: var(--navy);
}

.btn-outline:hover {
    border-color: var(--gold);
    background: #fffdf8;
    transform: translateY(-4px);
}

/*==================================================
 END OF HEADER.CSS
==================================================*/