@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@500;600;700;800&display=swap');

:root{
    --olive-950:#34392b;
    --olive-900:#414936;
    --olive-800:#596247;
    --olive-700:#6e7758;
    --olive-600:#818a69;

    --beige-50:#fdfbf7;
    --beige-100:#f7f2e9;
    --beige-200:#eee5d7;
    --beige-300:#e4d6c1;
    --beige-400:#d7c4a7;

    --accent:#c7a66a;
    --accent-light:#e0c794;

    --text:#292d25;
    --muted:#77776f;

    --white:#ffffff;

    --line:rgba(65,73,54,.11);

    --radius-sm:14px;
    --radius:20px;
    --radius-lg:30px;

    --shadow:
        0 18px 50px rgba(63,60,48,.07);

    --shadow-hover:
        0 25px 60px rgba(63,60,48,.12);
}


/* =========================
   BASE
========================= */

*{
    box-sizing:border-box;
}

html{
    direction:rtl;
    scroll-behavior:smooth;
}

body{
    margin:0;

    direction:rtl;
    text-align:right;

    background:var(--beige-50);
    color:var(--text);

    font-family:"IBM Plex Sans Arabic",sans-serif;
    -webkit-font-smoothing:antialiased;
}

body,
input,
textarea,
select,
button{
    font-family:"IBM Plex Sans Arabic",sans-serif;
}

h1,
h2,
h3,
h4,
.hero-kicker,
.kicker,
.btn,
nav a{
    font-family:"Noto Kufi Arabic",sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
}

.wrap{
    width:min(1280px,calc(100% - 70px));
    margin-inline:auto;
}


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

header{
    position:relative;
    z-index:100;

    background:rgba(253,251,247,.97);

    border-bottom:
        1px solid rgba(65,73,54,.08);
}

header .wrap{
    min-height:78px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

nav{
    display:flex;
    align-items:center;

    direction:rtl;

    gap:29px;
}

nav a{
    position:relative;

    padding-block:26px;

    color:var(--olive-950);

    font-size:13px;
    font-weight:600;

    transition:color .25s ease;
}

nav a::after{
    content:"";

    position:absolute;

    right:0;
    bottom:17px;

    width:0;
    height:2px;

    background:var(--olive-700);

    transition:width .3s ease;
}

nav a:hover::after,
nav a.active::after{
    width:100%;
}

nav a:hover{
    color:var(--olive-700);
}


/* =========================
   HERO
========================= */

.hero{
    position:relative;

    min-height:650px;

    display:flex;
    align-items:center;

    overflow:hidden;
    isolation:isolate;

    background-size:cover!important;
    background-position:center 44%!important;
    background-repeat:no-repeat!important;
}

.hero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            270deg,
            rgba(52,57,43,.94) 0%,
            rgba(52,57,43,.73) 31%,
            rgba(52,57,43,.30) 57%,
            rgba(52,57,43,.05) 100%
        );
}

.hero::after{
    content:"";

    position:absolute;

    width:470px;
    height:470px;

    top:-210px;
    right:-165px;

    border-radius:50%;

    border:
        1px solid rgba(224,199,148,.20);

    z-index:1;
}

.hero-shade{
    display:none!important;
}

.hero-grid{
    width:100%;

    position:relative;
    z-index:3;

    display:grid;
    grid-template-columns:1fr 1fr;

    align-items:center;

    padding-block:82px;
}

.hero-content{
    grid-column:1;

    max-width:690px;

    margin-right:0;
    margin-left:auto;

    text-align:right;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:22px;

    padding:9px 17px;

    border:
        1px solid rgba(224,199,148,.34);

    border-radius:999px;

    background:
        rgba(247,242,233,.09);

    backdrop-filter:blur(10px);

    color:var(--accent-light);

    font-size:12px;
    font-weight:600;
}

.hero h1{
    max-width:720px;

    margin:0;

    color:#fff;

    font-size:
        clamp(43px,4.6vw,70px);

    line-height:1.47;

    letter-spacing:-.045em;

    font-weight:800;
}

.hero h1 strong,
.hero h1 span{
    color:var(--accent-light);
}

.hero p{
    max-width:620px;

    margin:23px 0 28px;

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

    font-size:17px;
    line-height:2.05;
}

.hero-actions{
    display:flex;
    flex-direction:row;

    justify-content:flex-start;
    align-items:center;

    gap:12px;
}


/* =========================
   BUTTONS
========================= */

.btn{
    min-height:52px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding-inline:24px;

    border-radius:14px;

    border:1px solid transparent;

    cursor:pointer;

    font-size:13px;
    font-weight:700;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.btn.primary{
    color:var(--olive-950);

    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            var(--accent)
        );

    box-shadow:
        0 12px 28px rgba(199,166,106,.21);
}

.btn.primary:hover{
    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(199,166,106,.29);
}

.hero .btn:not(.primary){
    color:#fff;

    border-color:
        rgba(255,255,255,.36);

    background:
        rgba(255,255,255,.05);
}

.hero .btn:not(.primary):hover{
    background:
        rgba(255,255,255,.12);
}


/* =========================
   SECTIONS
========================= */

.section{
    padding-block:78px;
}

.section-soft{
    background:var(--beige-100);
}

.section-head{
    margin-bottom:32px;
}

.section-head h2,
.split-heading h2{
    margin:7px 0 0;

    color:var(--olive-950);

    font-size:
        clamp(29px,2.7vw,43px);

    line-height:1.55;

    letter-spacing:-.025em;

    font-weight:700;
}

.kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--olive-700);

    font-size:12px;
    font-weight:700;
}

.kicker::before{
    content:"";

    width:31px;
    height:1px;

    background:var(--accent);
}


/* =========================
   FEATURE CARDS
========================= */

.feature-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:16px;
}

.feature-card{
    position:relative;

    min-height:220px;

    padding:27px 26px;

    border:
        1px solid rgba(65,73,54,.09);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #faf7f1
        );

    box-shadow:
        0 13px 36px rgba(63,60,48,.05);

    overflow:hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.feature-card::after{
    content:"";

    position:absolute;

    left:-43px;
    bottom:-55px;

    width:125px;
    height:125px;

    border-radius:50%;

    background:
        rgba(199,166,106,.07);
}

.feature-card:hover{
    transform:translateY(-7px);

    border-color:
        rgba(110,119,88,.24);

    box-shadow:
        var(--shadow-hover);
}

.feature-icon{
    width:57px;
    height:57px;

    display:grid;
    place-items:center;

    margin-bottom:20px;

    border-radius:16px;

    background:
        var(--beige-100);

    color:var(--olive-700);
}

.feature-card h3{
    margin:0 0 8px;

    color:var(--olive-950);

    font-size:17px;
    line-height:1.7;
}

.feature-card p{
    margin:0;

    color:var(--muted);

    font-size:14px;
    line-height:1.9;
}


/* =========================
   IMAGE STORY
========================= */

.image-story{
    margin-block:10px 60px;

    overflow:hidden;

    border-radius:28px;

    background:var(--beige-100);

    box-shadow:
        0 25px 70px rgba(63,60,48,.07);
}

.image-story-grid{
    display:grid;

    grid-template-columns:
        1fr 1.05fr;

    min-height:510px;
}

.image-story-copy{
    order:1;

    padding:60px 58px;

    display:flex;
    flex-direction:column;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #f7f2e9,
            #efe7db
        );

    text-align:right;
}

.image-story-copy h2{
    margin:7px 0 19px;

    color:var(--olive-950);

    font-size:
        clamp(31px,3vw,45px);

    line-height:1.6;
}

.image-story-copy p{
    margin:0;

    color:var(--muted);

    font-size:16px;

    line-height:2.1;
}


/* =========================
   STATS
========================= */

.stats,
.stats-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;

    margin-top:30px;
}

.stat,
.stat-card{
    padding:21px 16px;

    text-align:center;

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

    border:
        1px solid rgba(65,73,54,.08);

    border-radius:15px;
}

.stat strong,
.stat-card strong{
    display:block;

    color:var(--olive-950);

    font-family:
        "Noto Kufi Arabic",sans-serif;

    font-size:25px;
    font-weight:700;
}

.stat span,
.stat-card span{
    color:var(--muted);

    font-size:12px;
}


/* =========================
   CONTENT CARDS
========================= */

.story-grid,
.content-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.story-card,
.content-card{
    overflow:hidden;

    background:#fff;

    border-radius:20px;

    border:
        1px solid rgba(65,73,54,.09);

    box-shadow:
        0 14px 40px rgba(63,60,48,.055);

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

.story-card:hover,
.content-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 24px 54px rgba(63,60,48,.11);
}

.story-card img,
.content-card img{
    display:block;

    width:100%;
    height:235px;

    object-fit:cover;
}

.story-card-body,
.content-card-body{
    padding:22px 24px 26px;

    text-align:right;
}

.story-card h3,
.content-card h3{
    margin:0 0 7px;

    color:var(--olive-950);
}


/* =========================
   FOOTER
========================= */

footer{
    position:relative;

    padding:38px 0 15px;

    overflow:hidden;

    background:
        #454b39;

    color:
        rgba(255,255,255,.75);
}

footer h3,
footer h4{
    margin-top:0;

    color:#fff;

    font-size:15px;
}

footer p,
footer a{
    font-size:12px;

    line-height:1.9;
}

footer a{
    color:
        rgba(255,255,255,.70);
}

footer a:hover{
    color:var(--accent-light);
}

footer::before{
    content:"";

    position:absolute;

    left:-130px;
    bottom:-235px;

    width:360px;
    height:360px;

    border:
        1px solid rgba(224,199,148,.07);

    border-radius:50%;
}


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

.dhab-reveal{
    opacity:0;

    transform:
        translateY(25px);

    transition:
        opacity .7s
        cubic-bezier(.2,.7,.2,1),

        transform .7s
        cubic-bezier(.2,.7,.2,1);

    transition-delay:
        var(--reveal-delay,0ms);
}

.dhab-reveal.is-visible{
    opacity:1;

    transform:none;
}


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

@media(max-width:1100px){

    .wrap{
        width:min(
            100% - 38px,
            1280px
        );
    }

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

    .image-story-grid{
        grid-template-columns:1fr;
    }

    nav{
        gap:17px;
    }
}


@media(max-width:760px){

    .wrap{
        width:min(
            100% - 26px,
            1280px
        );
    }

    header .wrap{
        min-height:68px;
    }

    nav{
        display:none;
    }

    .hero{
        min-height:630px;

        background-position:
            34% center!important;
    }

    .hero::before{
        background:
            linear-gradient(
                0deg,
                rgba(52,57,43,.95),
                rgba(52,57,43,.22)
            );
    }

    .hero-grid{
        display:block;

        padding-top:210px;
        padding-bottom:50px;
    }

    .hero-content{
        width:100%;
        max-width:none;
    }

    .hero h1{
        font-size:36px;
    }

    .hero p{
        font-size:15px;
    }

    .hero-actions{
        flex-direction:column;

        align-items:stretch;
    }

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

    .section{
        padding-block:56px;
    }

    .image-story-copy{
        padding:40px 24px;
    }

    .stats,
    .stats-grid,
    .story-grid,
    .content-grid{
        grid-template-columns:1fr;
    }

    footer{
        padding-top:30px;
    }
}


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

    *,
    *::before,
    *::after{
        transition:none!important;
        animation:none!important;
        scroll-behavior:auto!important;
    }

    .dhab-reveal{
        opacity:1;
        transform:none;
    }
}