/* reset */ 
* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
body { background:#000; color:#fff; direction:rtl; line-height:1.7; }

/* ---------------- NAV ---------------- */
nav {
    display:flex; justify-content:space-between; align-items:center;
    padding:15px 40px; position:sticky; top:0; z-index:999;
    background:rgba(10,10,10,0.55); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,255,255,0.12);
    box-shadow:0 4px 20px rgba(0,0,0,0.4);
}

.logo-area { display:flex; align-items:center; gap:10px; }
.logo-area img { width:100px; height:auto; object-fit:contain; }
.logo-text { font-size:36px; color:#B8860B; font-weight:bold; text-shadow:0 0 10px rgba(184,134,11,0.4); }

nav ul { display:flex; list-style:none; gap:18px; }
nav ul li a {
    padding:10px 22px; background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.15); border-radius:10px;
    font-size:17px; color:#fff; text-decoration:none; transition:0.25s ease-in-out;
}
nav ul li a:hover { background:#B8860B; color:#000; transform:translateY(-3px); box-shadow:0 0 12px #B8860B; }
nav ul li a.active { background:#B8860B; color:#000; border-color:#B8860B; box-shadow:0 0 12px #B8860B; }

/* أيقونة الهامبرغر */
.hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; z-index:1001; }
.hamburger div { width:25px; height:3px; background-color:#B8860B; }

/* ---------------- HOME PAGE ---------------- */
.home-video-container { width:100%; height:100vh; position:relative; overflow:hidden; }
.home-video-container video { width:100%; height:100%; object-fit:cover; }

.home-content {
    position:absolute; top:50%; right:50px; transform:translateY(-50%);
    max-width:600px; z-index:2;
}
.home-content h1 { font-size:85px; color:#B8860B; }
.home-content h2 { font-size:40px; color:#B8860B; }
.home-content p { font-size:26px; margin-top:10px; color:#B8860B; }

/* ---------------- FOOTER ---------------- */
footer {
    text-align:center; background:#111; padding:20px; margin-top:50px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
}
footer img { width:100px; height:auto; }

/* =============== HOME PAGE CUSTOM ADJUSTMENTS =============== */
.home-page .home-content { top:58%; right:50px; }
.home-page .home-content h1 { font-size:40px; }
.home-page .home-content h2 { font-size:20px; }
.home-page .home-content p { font-size:34px; margin-top:10px; }

/* ----------- الموبايل ----------- */
@media (max-width:768px) {
    .home-page .home-video-container { height:100vh; width:100%; overflow:hidden; }
    .home-page .home-video-container video { width:100%; height:100%; object-fit:cover; }

    .home-page .home-content {
        top:50%; right:2.5%; transform:translateY(-50%);
        max-width:95%; text-align:center; word-wrap:break-word;
    }
    .home-page .home-content h1 { font-size:44px; line-height:1.2; }
    .home-page .home-content h2 { font-size:24px; line-height:1.3; }
    .home-page .home-content p  { font-size:30px; line-height:1.4; }

    .hamburger { display:flex; position:absolute; top:15px; right:15px; }

    nav ul {
        display:flex; flex-direction:column; gap:12px; position:absolute;
        top:50px; right:15px; width:80px; background-color:rgba(10,10,10,0.9);
        padding:10px 0; border-radius:8px; opacity:0; transform:translateY(-10px);
        pointer-events:none; transition:all 0.3s ease-in-out; box-shadow:0 4px 15px rgba(0,0,0,0.4);
    }
    nav ul.show { opacity:1; transform:translateY(0); pointer-events:auto; }
    nav ul li a { width:100%; text-align:center; padding:10px 8px; font-size:22px; border-radius:8px; background:rgba(255,255,255,0.06); transition:all 0.25s ease; }
    nav ul li a:hover { background:#B8860B; color:#000; }

    footer { flex-direction:column; align-items:center; text-align:center; gap:10px; }
    footer img { width:70px; margin:5px 0; }
}

/* ====================== FADE IN TEXT ====================== */
.fade-in {
    opacity:0; transform:translateY(20px);
    animation: fadeInUp 0.8s forwards;
    animation-delay: calc(var(--i) * 0.4s);
}
@keyframes fadeInUp {
    to { opacity:1; transform:translateY(0); }
}
