/* استيراد الخط العربي */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&display=swap');


/* =========================
   إعدادات عامة
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    direction: rtl;
    font-family: "Noto Kufi Arabic", sans-serif;
    background-color: #f4eada;
}


/* =========================
   شريط التنقل
========================= */

.navbar {
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    padding: 25px 7%;

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

    z-index: 100;
}

.logo {
    color: #231F20;
    font-size: 21px;
    font-weight: 700;
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    color: #231F20;
    text-decoration: none;
    font-size: 14px;

    transition: 0.3s;
}

.nav-links a:hover {
    color: #6B4E45;
}


/* =========================
   الواجهة الرئيسية
========================= */

.hero {
    width: 100%;
    min-height: 100vh;

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

    text-align: center;
    color: #231F20;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(248, 229, 196, 0.95) 0%,
            transparent 38%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(190, 158, 125, 0.45) 0%,
            transparent 42%
        ),

        linear-gradient(
            135deg,
            #f6e4c7 0%,
            #dcc4a4 45%,
            #CDB295 80%
        );
}

.hero-content {
    padding: 30px;
}


/* 1727 — 2027 */

.year {
color: #6B4E45;
    
    font-size: 20px;
    font-weight: 500;

    letter-spacing: 8px;

    margin-bottom: 18px;
}


/* يوم التأسيس السعودي */

.small-title {
    font-size: 20px;
    margin-bottom: 5px;

    color: #231F20;
}


/* ثلاثة قرون من المجد */

.hero h1 {
    font-size: 65px;
    font-weight: 800;

    color: #231F20;

    margin-bottom: 15px;
}


/* النص */

.description {
    color: #231F20;

    font-size: 17px;

    margin-bottom: 35px;
}


/* الزر */

.hero-button {
    display: inline-block;

    padding: 12px 30px;

    border: 1px solid #231F20;

    color: #231F20;

    text-decoration: none;

    font-size: 14px;

    transition: 0.3s;
}

.hero-button:hover {
    background-color: #231F20;
    color: #CDB295;
}

/* =========================
   زخارف الواجهة الرئيسية
========================= */

.hero {
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 5;
}

.hero-decoration {
    position: absolute;
    bottom: 0;

    z-index: 2;

    pointer-events: none;
}


/* الفنجال والتمر - اليسار */

.hero-left {
    left: 2%;
    width: 330px;
}


/* البيت والنخلة - اليمين */

.hero-right {
    right: 0;
    width: 430px;
}

/* =========================
   حركة زخارف الواجهة
========================= */

/* حركة الفنجال */
/* الفنجال قبل الظهور */

.hero-left {
    opacity: 0;
    transform: translateX(-80px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* البيت والنخلة قبل الظهور */

.hero-right {
    opacity: 0;
    transform: translateX(80px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* عند ظهور الصور */

.hero-left.show,
.hero-right.show {
    opacity: 1;
    transform: translateX(0);
}


/* =========================
   قصة التأسيس
========================= */

.story {
    min-height: 100vh;
    padding: 120px 8%;

    background-color: #f6e4c7;

    color: #231F20;

    display: flex;
    align-items: center;
}


.story-container {
    width: 100%;
    max-width: 1200px;

    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;
}


/* النص */

.story-content {
    text-align: right;
}


.section-label {
    display: inline-block;

    color: #6B4E45;

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

    margin-bottom: 12px;
}


.story-content h2 {
    font-size: 48px;
    font-weight: 800;

    margin-bottom: 15px;
}


.story-year {
    font-size: 70px;
    font-weight: 800;

    color: #6B4E45;

    margin-bottom: 25px;
}


.story-content p {
    font-size: 16px;
    line-height: 2.2;

    margin-bottom: 15px;

    color: #3d3735;
}


/* =========================
   مكان صورة الدرعية
========================= */

.story-image {
    width: 100%;
}


.story-image {
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.story-image img {
    width: 100%;
    height: 480px;

    display: block;

    object-fit: cover;

    border-radius: 6px;

    transition: transform 0.6s ease;
}

/* تكبير بسيط عند مرور الماوس */
.story-image:hover img {
    transform: scale(1.04);
}

/* =========================
   مسيرة ثلاثة قرون
========================= */

.timeline-section {
    padding: 120px 8%;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(107, 78, 69, 0.25) 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(205, 178, 149, 0.08) 0%,
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #231F20 0%,
            #2b2524 50%,
            #231F20 100%
        );

    color: #f6e4c7;
}


/* عنوان القسم */

.timeline-header {
    max-width: 750px;
    margin: 0 auto 80px;
    text-align: center;
}

.timeline-header .section-label {
    color: #CDB295;
}

.timeline-header h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
}

.timeline-header p {
    font-size: 16px;
    line-height: 2;
    color: #dec9b2;
}


/* الخط الزمني */

.timeline {
    position: relative;
    max-width: 1000px;
    margin: auto;
}


/* الخط الموجود في المنتصف */

.timeline::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;

    width: 2px;

    background-color: #6B4E45;

    transform: translateX(50%);
}


/* كل محطة */

.timeline-item {
    position: relative;

    width: 50%;

    padding: 20px 50px;

    margin-bottom: 50px;
}


/* المحطات الفردية */

.timeline-item:nth-child(odd) {
    margin-right: 0;
    text-align: left;
}


/* المحطات الزوجية */

.timeline-item:nth-child(even) {
    margin-right: 50%;
    text-align: right;
}


/* الدائرة على الخط */

.timeline-dot {
    position: absolute;

    top: 30px;

    width: 18px;
    height: 18px;

    background-color: #CDB295;

    border: 4px solid #231F20;

    border-radius: 50%;

    z-index: 2;
}


/* دائرة المحطات الفردية */

.timeline-item:nth-child(odd) .timeline-dot {
    left: -9px;
}


/* دائرة المحطات الزوجية */

.timeline-item:nth-child(even) .timeline-dot {
    right: -9px;
}


/* محتوى المحطة */

.timeline-content {
    padding: 25px;

    border: 1px solid #6B4E45;

    transition: 0.3s;
}


/* حركة عند مرور الماوس */

.timeline-content:hover {
    transform: translateY(-5px);

    border-color: #CDB295;
}


/* السنة */

.timeline-year {
    display: block;

    font-size: 28px;
    font-weight: 800;

    color: #CDB295;

    margin-bottom: 8px;
}


/* عنوان المحطة */

.timeline-content h3 {
    font-size: 20px;

    margin-bottom: 12px;

    color: #f6e4c7;
}


/* وصف المحطة */

.timeline-content p {
    font-size: 14px;

    line-height: 2;

    color: #dec9b2;
}

/* =========================
   رؤية السعودية 2030
========================= */

.vision {
    position: relative;
    overflow: hidden;

    min-height: 100vh;
    padding: 120px 8%;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(205, 178, 149, 0.45) 0%,
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(107, 78, 69, 0.15) 0%,
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #f6e4c7 0%,
            #ead5b8 50%,
            #CDB295 100%
        );

    color: #231F20;
}


/* رقم 2030 الكبير في الخلفية */

.vision-background-number {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 280px;
    font-weight: 800;

    color: rgba(107, 78, 69, 0.07);

    line-height: 1;

    pointer-events: none;
}


/* عنوان القسم */

.vision-header {
    position: relative;
    z-index: 2;

    max-width: 750px;

    margin: 0 auto 70px;

    text-align: center;
}

.vision-header h2 {
    font-size: 48px;
    font-weight: 800;

    margin-bottom: 15px;
}

.vision-header p {
    font-size: 16px;
    line-height: 2;

    color: #6B4E45;
}


/* =========================
   بطاقات الرؤية
========================= */

.vision-cards {
    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: auto;

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

    gap: 25px;
}


/* البطاقة */

.vision-card {
    min-height: 300px;

    padding: 35px;

    background: rgba(246, 228, 199, 0.55);

    border: 1px solid rgba(107, 78, 69, 0.35);

    backdrop-filter: blur(8px);

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}


/* عند مرور الماوس */

.vision-card:hover {
    transform: translateY(-10px);

    background: rgba(246, 228, 199, 0.8);

    border-color: #6B4E45;
}


/* 01 - 02 - 03 */

.vision-number {
    display: block;

    font-size: 45px;
    font-weight: 800;

    color: #6B4E45;

    margin-bottom: 35px;
}


/* عنوان البطاقة */

.vision-card h3 {
    font-size: 24px;
    font-weight: 700;

    margin-bottom: 15px;
}


/* وصف البطاقة */

.vision-card p {
    font-size: 14px;

    line-height: 2;

    color: #4f4541;
}

/* =========================
   حركات الظهور
========================= */

.hero-content,
.story-content,
.story-image,
.timeline-header,
.timeline-item
.vision-header,
.vision-card {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* عند ظهور العنصر */

.hero-content.show,
.story-content.show,
.story-image.show,
.timeline-header.show,
.timeline-item.show
.vision-header.show,
.vision-card.show {
    opacity: 1;
    transform: translateY(0);
}

.vision-card:nth-child(1) {
    transition-delay: 0.1s;
}

.vision-card:nth-child(2) {
    transition-delay: 0.2s;
}

.vision-card:nth-child(3) {
    transition-delay: 0.3s;
}

/* =========================
   حركة عنوان رؤية 2030
========================= */

.vision-header .section-label,
.vision-header h2,
.vision-header p {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


/* نحو المستقبل */

.vision-header.show .section-label {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.1s;
}


/* رؤية السعودية 2030 */

.vision-header.show h2 {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.25s;
}


/* الوصف */

.vision-header.show p {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.4s;
}

/* =========================
   قسم تطور السعودية
========================= */

.development {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 120px 8%;
    background:
        radial-gradient(circle at 15% 20%, rgba(107, 78, 69, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(205, 178, 149, 0.35) 0%, transparent 40%),
        linear-gradient(135deg, #f6e4c7 0%, #ead5b8 55%, #CDB295 100%);
    color: #231F20;
}

.development-header {
    max-width: 750px;
    margin: 0 auto 65px;
    text-align: center;
}

.development-header h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
}

.development-header p {
    font-size: 16px;
    line-height: 2;
    color: #6B4E45;
}


/* بطاقات الأرقام */

.development-stats {
    max-width: 1200px;
    margin: 0 auto 45px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.development-stat {
    min-height: 190px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    background: rgba(246, 228, 199, 0.55);
    border: 1px solid rgba(107, 78, 69, 0.35);
    backdrop-filter: blur(8px);

    transition: transform 0.4s ease, border-color 0.4s ease;
}

.development-stat:hover {
    transform: translateY(-7px);
    border-color: #6B4E45;
}

.stat-number {
    display: block;
    font-size: 38px;
    font-weight: 800;
    color: #6B4E45;
}

.stat-unit {
    display: block;
    margin: 5px 0 18px;
    font-size: 13px;
    font-weight: 600;
    color: #8a6a5e;
}

.development-stat p {
    font-size: 14px;
    color: #4f4541;
}


/* منطقة الرسوم */

.development-charts {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
}

.chart-card {
    min-width: 0;
    min-height: 420px;
    padding: 30px;

    background: rgba(246, 228, 199, 0.6);
    border: 1px solid rgba(107, 78, 69, 0.35);
    backdrop-filter: blur(8px);
}

.chart-title {
    margin-bottom: 30px;
}

.chart-title span {
    font-size: 12px;
    color: #6B4E45;
}

.chart-title h3 {
    margin-top: 5px;
    font-size: 21px;
    font-weight: 700;
}

.chart-card canvas {
    width: 100% !important;
    max-height: 300px;
}


/* مصدر البيانات */

.development-source {
    max-width: 1200px;
    margin: 25px auto 0;
    font-size: 11px;
    color: #6B4E45;
    opacity: 0.8;
}

/* =========================
   حركات قسم تطور السعودية
========================= */

.development-header,
.development-stat,
.chart-card,
.development-source {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.development-header.show,
.development-stat.show,
.chart-card.show,
.development-source.show {
    opacity: 1;
    transform: translateY(0);
}


/* ظهور بطاقات الأرقام بالتتابع */

.development-stat:nth-child(1) {
    transition-delay: 0.1s;
}

.development-stat:nth-child(2) {
    transition-delay: 0.2s;
}

.development-stat:nth-child(3) {
    transition-delay: 0.3s;
}


/* ظهور الرسوم بعد البطاقات */

.chart-card:nth-child(1) {
    transition-delay: 0.15s;
}

.chart-card:nth-child(2) {
    transition-delay: 0.3s;
}

/* زر قائمة الجوال */
.menu-toggle {
    display: none;
    width: 32px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 6px 0;
    background-color: #231F20;
    transition: 0.3s ease;
}

/* =========================
   الجوال
========================= */

@media (max-width: 768px) {

    .nav-links {
        display: none;
    }

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

    .small-title {
        font-size: 16px;
    }

    .description {
        font-size: 14px;
    }

    .year {
        font-size: 15px;
        letter-spacing: 4px;
    }

    .story {
    padding: 80px 25px;
}

.story-container {
    grid-template-columns: 1fr;
    gap: 40px;
}

.story-content h2 {
    font-size: 36px;
}

.story-year {
    font-size: 50px;
}

.story-image img {
    height: 350px;
}

/* مسيرة ثلاثة قرون للجوال */

.timeline-section {
    padding: 80px 25px;
}

.timeline-header {
    margin-bottom: 50px;
}

.timeline-header h2 {
    font-size: 34px;
}

.timeline::before {
    right: 10px;
    transform: none;
}

.timeline-item,
.timeline-item:nth-child(even) {
    width: 100%;

    margin-right: 0;

    padding: 15px 40px 15px 0;

    text-align: right;
}

.timeline-item:nth-child(odd) {
    text-align: right;
}

.timeline-item:nth-child(odd) .timeline-dot,
.timeline-item:nth-child(even) .timeline-dot {
    right: 2px;
    left: auto;
}

/* رؤية 2030 للجوال */

.vision {
    padding: 80px 25px;
}

.vision-header h2 {
    font-size: 34px;
}

.vision-background-number {
    font-size: 120px;
}

.vision-cards {
    grid-template-columns: 1fr;
}

.vision-card {
    min-height: auto;
}

.development {
    padding: 80px 25px;
}

.development-header h2 {
    font-size: 34px;
}

.development-stats,
.development-charts {
    grid-template-columns: 1fr;
}

.development-stat {
    min-height: 160px;
}

.chart-card {
    min-height: 380px;
    padding: 22px;
}

.stat-number {
    font-size: 32px;
}
/* Hero للجوال */
.hero {
    min-height: 100svh;
    padding: 100px 24px 220px;
}

.hero-content {
    width: 100%;
    max-width: 390px;
    position: relative;
    z-index: 3;
}

.hero h1 {
    font-size: 32px;
    line-height: 1.5;
    white-space: nowrap;
}

.hero .description {
    font-size: 13px;
    line-height: 2;
}

.hero-left {
    width: 180px;
    left: -25px;
    bottom: 0;
}

.hero-right {
    width: 230px;
    right: -30px;
    bottom: 0;
}
}
.story-year {
    direction: ltr;
}

.year-number,
.year-letter {
    display: inline-block;
}
.menu-toggle {
    display: block;
    position: relative;
    z-index: 1001;
}
.nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    background: rgba(246, 228, 199, 0.97);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);

    transition: 0.3s ease;
}

.nav-links.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}