/* ═══════════════════════════════════════════════════════
   Arab Aluminum — Unified Stylesheet
   شركة الألومنيوم العربية — ملف الأنماط الموحد
   ═══════════════════════════════════════════════════════ */

:root {
      --gold:       #B8860B;
      --gold-light: #D4A017;
      --gold-soft:  #F0C040;
      --blue-dark:  #0D2B5E;
      --blue:       #1A4080;
      --blue-mid:   #2A5BA8;
      --blue-light: #4A7FC1;
      --blue-pale:  #D6E4F7;
      --blue-ultra: #EBF3FC;
      --white:      #FFFFFF;
      --off-white:  #F7FAFD;
      --gray-light: #E8EDF4;
      --gray:       #C0CBDA;
      --text-dark:  #0D2B5E;
      --text-mid:   #3A5070;
      --text-muted: #7A90A8;
      --shadow-sm:  0 2px 12px rgba(26,64,128,0.08);
      --shadow-md:  0 6px 30px rgba(26,64,128,0.14);
      --shadow-lg:  0 16px 60px rgba(26,64,128,0.18);
      --transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1);
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { font-family:'Tajawal',sans-serif; background:var(--off-white); color:var(--text-dark); overflow-x:hidden; }
    body.en { font-family:'Inter',sans-serif; direction:ltr; }
    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:var(--gray-light); }
    ::-webkit-scrollbar-thumb { background:var(--blue-mid); border-radius:3px; }

    /* ─── LOADER ─────────────────────────────────── */
    #loader {
      position:fixed; inset:0; z-index:9999;
      background:var(--white);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      transition:opacity 0.8s ease, visibility 0.8s ease;
    }
    #loader.hidden { opacity:0; visibility:hidden; }
    #loader img { width:100px; margin-bottom:24px; animation:loaderPulse 1.5s ease-in-out infinite; }
    .loader-bar { width:180px; height:3px; background:var(--gray-light); border-radius:2px; overflow:hidden; }
    .loader-bar-fill { height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--gold-light)); border-radius:2px; animation:loadFill 2s ease forwards; }
    @keyframes loaderPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(0.96);opacity:0.7;} }
    @keyframes loadFill { to{width:100%;} }

    /* ─── NAVBAR ─────────────────────────────────── */
    nav {
      position:fixed; top:0; width:100%; z-index:1000;
      padding:16px 64px;
      display:flex; align-items:center; justify-content:space-between;
      background:rgba(255,255,255,0.6);
      backdrop-filter:blur(16px);
      transition:var(--transition);
    }
    nav.scrolled {
      background:rgba(255,255,255,0.97);
      padding:10px 64px;
      box-shadow:var(--shadow-md);
      border-bottom:2px solid var(--blue-pale);
    }
    .nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
    .nav-logo img { height:52px; width:auto; object-fit:contain; transition:var(--transition); }
    nav.scrolled .nav-logo img { height:44px; }
    .nav-logo-text { display:flex; flex-direction:column; line-height:1.25; }
    .nav-logo-text .logo-ar { font-size:0.95rem; font-weight:900; color:var(--blue-dark); }
    .nav-logo-text .logo-en { font-size:0.68rem; color:var(--gold); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
    .nav-links { display:flex; align-items:center; gap:4px; list-style:none; }
    .nav-links a {
      color:var(--text-mid); text-decoration:none; font-size:0.88rem;
      font-weight:700; padding:8px 18px; border-radius:8px;
      letter-spacing:0.3px; transition:var(--transition); position:relative;
    }
    .nav-links a::after {
      content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
      width:0; height:2px; background:var(--gold); border-radius:1px; transition:width 0.3s;
    }
    .nav-links a:hover { color:var(--blue-dark); background:var(--blue-ultra); }
    .nav-links a:hover::after, .nav-links a.active::after { width:55%; }
    .nav-links a.active { color:var(--blue-dark); background:var(--blue-ultra); }
    .nav-right { display:flex; align-items:center; gap:10px; }
    .lang-toggle {
      background:var(--blue-dark); color:var(--white);
      border:none; padding:8px 20px; border-radius:20px;
      font-family:inherit; font-size:0.82rem; font-weight:700;
      cursor:pointer; transition:var(--transition); letter-spacing:1px;
      box-shadow:var(--shadow-sm);
    }
    .lang-toggle:hover { background:var(--gold); color:var(--white); }
    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
    .hamburger span { width:24px; height:2px; background:var(--blue-dark); border-radius:2px; transition:var(--transition); }

    /* ─── MOBILE MENU ────────────────────────────── */
    .mobile-menu {
      display:none; position:fixed; top:0; inset-inline-start:-100%;
      width:280px; height:100vh; background:var(--white);
      border-inline-end:1px solid var(--blue-pale); z-index:999;
      padding:80px 24px 30px; flex-direction:column; gap:6px;
      box-shadow:var(--shadow-lg); transition:inset-inline-start 0.4s ease;
    }
    .mobile-menu.open { inset-inline-start:0; display:flex; }
    .mobile-menu a { color:var(--text-mid); text-decoration:none; font-size:0.95rem; font-weight:700; padding:13px 16px; border-radius:8px; border-bottom:1px solid var(--gray-light); transition:var(--transition); }
    .mobile-menu a:hover { color:var(--blue-dark); background:var(--blue-ultra); padding-inline-start:22px; }

    /* ─── HERO ───────────────────────────────────── */
    #home {
      min-height:100vh; position:relative; overflow:hidden;
      display:flex; align-items:center;
      background:linear-gradient(145deg, #EBF3FC 0%, #FFFFFF 40%, #D6E4F7 100%);
    }
    .hero-decor-circle {
      position:absolute; border-radius:50%;
      background:linear-gradient(135deg, rgba(26,64,128,0.06), rgba(184,134,11,0.06));
      animation:floatCircle var(--dur,20s) ease-in-out infinite alternate;
    }
    @keyframes floatCircle { from{transform:translateY(0) scale(1);} to{transform:translateY(-20px) scale(1.03);} }
    .hero-decor-circle:nth-child(1){ width:500px;height:500px;top:-100px;inset-inline-end:-100px;--dur:18s; }
    .hero-decor-circle:nth-child(2){ width:300px;height:300px;bottom:-60px;inset-inline-start:-60px;--dur:14s; }
    .hero-decor-circle:nth-child(3){ width:180px;height:180px;top:30%;inset-inline-end:15%;--dur:22s; background:rgba(212,160,23,0.07); }
    .hero-dots {
      position:absolute; inset:0;
      background-image:radial-gradient(circle, rgba(26,64,128,0.07) 1.5px, transparent 1.5px);
      background-size:36px 36px;
    }
    .hero-content {
      position:relative; z-index:2; max-width:1200px;
      margin:0 auto; padding:0 64px; width:100%;
      display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center;
      padding-top:80px;
    }
    .hero-left { animation:fadeInRight 0.9s ease 0.2s both; }
    body.en .hero-left { animation:fadeInLeft 0.9s ease 0.2s both; }
    .hero-tag {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--blue-ultra); border:1.5px solid var(--blue-pale);
      color:var(--blue-mid); padding:7px 18px; border-radius:20px;
      font-size:0.78rem; font-weight:700; letter-spacing:1.5px;
      text-transform:uppercase; margin-bottom:22px;
    }
    .hero-tag i { color:var(--gold); }
    .hero-title {
      font-size:clamp(2.2rem,4.5vw,3.6rem);
      font-weight:900; line-height:1.15; margin-bottom:18px; color:var(--blue-dark);
    }
    .hero-title .highlight {
      background:linear-gradient(120deg, var(--gold), var(--gold-soft));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .hero-subtitle { font-size:1rem; color:var(--text-mid); line-height:1.85; margin-bottom:34px; max-width:520px; }
    .hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
    .btn-primary {
      background:linear-gradient(135deg,var(--blue),var(--blue-dark));
      color:var(--white); padding:14px 32px; border-radius:10px;
      text-decoration:none; font-weight:700; font-size:0.9rem;
      letter-spacing:0.3px; transition:var(--transition);
      box-shadow:0 6px 24px rgba(26,64,128,0.35); border:none; cursor:pointer;
      display:inline-flex; align-items:center; gap:8px;
    }
    .btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(26,64,128,0.45); background:linear-gradient(135deg,var(--blue-mid),var(--blue)); }
    .btn-outline {
      background:transparent; color:var(--blue-dark);
      border:2px solid var(--blue-pale); padding:14px 32px; border-radius:10px;
      text-decoration:none; font-weight:700; font-size:0.9rem;
      transition:var(--transition); cursor:pointer;
      display:inline-flex; align-items:center; gap:8px;
    }
    .btn-outline:hover { border-color:var(--blue-mid); background:var(--blue-ultra); transform:translateY(-3px); }
    .hero-stats {
      display:flex; gap:36px; margin-top:40px; padding-top:36px;
      border-top:1.5px solid var(--blue-pale);
    }
    .hero-stat .num { font-size:2.2rem; font-weight:900; color:var(--blue-dark); line-height:1; }
    .hero-stat .lbl { font-size:0.72rem; color:var(--text-muted); margin-top:5px; }

    /* ─── HERO RIGHT ─────────────────────────────── */
    .hero-right { animation:fadeInLeft 0.9s ease 0.4s both; display:flex; align-items:center; justify-content:center; }
    body.en .hero-right { animation:fadeInRight 0.9s ease 0.4s both; }
    .hero-card-wrap { position:relative; width:380px; }
    .hero-main-card {
      background:var(--white); border-radius:24px; padding:40px 36px;
      box-shadow:var(--shadow-lg); border:1px solid var(--blue-pale);
      text-align:center; position:relative; overflow:hidden;
    }
    .hero-main-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:4px;
      background:linear-gradient(90deg,var(--blue),var(--gold-light));
    }
    .hero-card-logo { width:120px; height:auto; margin:0 auto 20px; display:block; }
    .hero-card-title { font-size:1.05rem; font-weight:900; color:var(--blue-dark); margin-bottom:6px; }
    .hero-card-sub { font-size:0.78rem; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; }
    .hero-card-divider { width:50px; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); border-radius:1px; margin:16px auto; }
    .hero-mini-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:24px; }
    .hero-mini-stat { text-align:center; padding:12px 6px; background:var(--off-white); border-radius:10px; border:1px solid var(--blue-pale); }
    .hero-mini-stat .n { font-size:1.3rem; font-weight:900; color:var(--blue-dark); line-height:1; }
    .hero-mini-stat .n span { color:var(--gold); }
    .hero-mini-stat .l { font-size:0.65rem; color:var(--text-muted); margin-top:4px; }
    .hero-float-badge {
      position:absolute; bottom:-16px; inset-inline-end:-16px;
      background:linear-gradient(135deg,var(--gold),var(--gold-soft));
      color:var(--white); padding:14px 18px; border-radius:14px;
      font-weight:900; font-size:0.78rem; text-align:center;
      box-shadow:0 8px 24px rgba(184,134,11,0.35); line-height:1.4;
    }
    .hero-float-badge strong { font-size:1.2rem; display:block; }
    .scroll-down {
      position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:6px;
      color:var(--text-muted); font-size:0.68rem; letter-spacing:2px;
      text-transform:uppercase; cursor:pointer; animation:bounce 2s ease infinite;
    }
    .scroll-down i { color:var(--blue-mid); font-size:1rem; }
    @keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(7px);} }

    /* ─── SECTION BASE ───────────────────────────── */
    section { padding:96px 64px; }
    .section-header { text-align:center; margin-bottom:64px; }
    .section-tag { display:inline-block; color:var(--gold); font-size:0.75rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; }
    .section-title { font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:900; color:var(--blue-dark); margin-bottom:14px; line-height:1.2; }
    .section-title span { color:var(--gold); }
    .section-line { width:56px; height:3px; background:linear-gradient(90deg,var(--blue),var(--gold)); border-radius:2px; margin:0 auto; }
    .section-desc { color:var(--text-mid); max-width:580px; margin:18px auto 0; line-height:1.85; font-size:0.93rem; }

    /* ─── ABOUT ──────────────────────────────────── */
    #about { background:var(--white); padding:96px 64px; }
    .about-grid { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
    .about-visual { position:relative; }
    .about-img-card {
      background:linear-gradient(135deg, var(--blue-ultra), var(--blue-pale));
      border-radius:20px; aspect-ratio:4/3;
      border:1.5px solid var(--blue-pale);
      display:flex; align-items:center; justify-content:center;
      position:relative; overflow:hidden;
      box-shadow:var(--shadow-md);
    }
    .about-img-card i { font-size:6rem; color:rgba(26,64,128,0.15); }
    .about-img-card .about-logo-big { width:160px; height:auto; position:absolute; opacity:0.25; }
    .about-badge {
      position:absolute; bottom:-18px; inset-inline-end:-18px;
      background:linear-gradient(135deg,var(--blue-dark),var(--blue));
      color:var(--white); padding:18px 22px; border-radius:14px;
      font-weight:900; text-align:center; box-shadow:var(--shadow-md);
    }
    .about-badge .num { font-size:1.9rem; line-height:1; display:block; color:var(--gold-soft); }
    .about-badge .txt { font-size:0.68rem; letter-spacing:1px; opacity:0.85; margin-top:2px; }
    .about-text .section-tag { text-align:start; }
    .about-text h3 { font-size:1.75rem; font-weight:900; color:var(--blue-dark); margin-bottom:14px; }
    .about-text p { color:var(--text-mid); line-height:1.9; margin-bottom:16px; font-size:0.93rem; }
    .about-features { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
    .about-feat {
      display:flex; align-items:flex-start; gap:10px;
      background:var(--off-white); border:1.5px solid var(--blue-pale);
      padding:13px; border-radius:10px; transition:var(--transition);
    }
    .about-feat:hover { border-color:var(--blue-light); background:var(--blue-ultra); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
    .about-feat i { color:var(--blue-mid); margin-top:2px; flex-shrink:0; }
    .about-feat span { font-size:0.83rem; color:var(--text-mid); font-weight:600; }

    /* ─── STATS ──────────────────────────────────── */
    #stats {
      background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 100%);
      padding:80px 64px; position:relative; overflow:hidden;
    }
    #stats::before {
      content:''; position:absolute; inset:0;
      background-image:radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size:30px 30px;
    }
    .stats-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2px; position:relative; }
    .stat-card {
      text-align:center; padding:48px 24px; background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.08); transition:var(--transition); position:relative;
    }
    .stat-card:hover { background:rgba(255,255,255,0.1); transform:translateY(-4px); }
    .stat-icon { font-size:1.9rem; color:var(--gold-soft); margin-bottom:14px; }
    .stat-num { font-size:2.8rem; font-weight:900; color:var(--white); line-height:1; }
    .stat-num .suffix { color:var(--gold-soft); }
    .stat-label { font-size:0.8rem; color:rgba(255,255,255,0.65); margin-top:8px; letter-spacing:0.3px; }

    /* ─── PRODUCTS ───────────────────────────────── */
    #products { background:var(--off-white); padding:96px 64px; }
    .products-grid { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .product-card {
      background:var(--white); border-radius:18px; overflow:hidden;
      border:1.5px solid var(--blue-pale); transition:var(--transition); cursor:pointer;
      box-shadow:var(--shadow-sm);
    }
    .product-card:hover { transform:translateY(-8px); border-color:var(--blue-light); box-shadow:var(--shadow-lg); }
    .product-thumb {
      height:190px; position:relative; overflow:hidden;
      background:linear-gradient(135deg,var(--blue-ultra),var(--blue-pale));
      display:flex; align-items:center; justify-content:center;
    }
    .product-thumb-icon { font-size:3.8rem; color:rgba(26,64,128,0.2); transition:var(--transition); z-index:1; }
    .product-card:hover .product-thumb-icon { transform:scale(1.12); color:rgba(26,64,128,0.35); }
    .product-thumb-stripe {
      position:absolute; bottom:0; left:0; right:0; height:4px;
      background:linear-gradient(90deg,var(--blue),var(--gold));
      transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
    }
    .product-card:hover .product-thumb-stripe { transform:scaleX(1); }
    .product-num {
      position:absolute; top:14px; inset-inline-start:14px;
      background:rgba(26,64,128,0.12); color:var(--blue-mid);
      font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:12px; letter-spacing:1px;
    }
    .product-body { padding:22px; }
    .product-icon-sm {
      width:40px; height:40px; background:var(--blue-ultra); border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      color:var(--blue-mid); font-size:1rem; margin-bottom:12px; transition:var(--transition);
    }
    .product-card:hover .product-icon-sm { background:var(--blue-mid); color:var(--white); }
    .product-name { font-size:1.05rem; font-weight:800; margin-bottom:7px; color:var(--blue-dark); }
    .product-desc { font-size:0.82rem; color:var(--text-mid); line-height:1.75; margin-bottom:14px; }
    .product-tags { display:flex; flex-wrap:wrap; gap:6px; }
    .product-tag {
      background:var(--blue-ultra); border:1px solid var(--blue-pale);
      color:var(--blue-mid); font-size:0.68rem; font-weight:600;
      padding:3px 10px; border-radius:10px;
    }
    .products-row2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:1160px; margin:22px auto 0; }

    /* ─── FACTORIES ──────────────────────────────── */
    #factories { background:var(--white); padding:96px 64px; }
    .factories-grid { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .factory-card {
      background:var(--off-white); border-radius:16px;
      border:1.5px solid var(--blue-pale); padding:28px;
      transition:var(--transition); position:relative; overflow:hidden;
      box-shadow:var(--shadow-sm);
    }
    .factory-card::after {
      content:''; position:absolute; bottom:0; inset-inline-start:0;
      width:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--gold));
      transition:width 0.4s ease;
    }
    .factory-card:hover::after { width:100%; }
    .factory-card:hover { transform:translateY(-6px); border-color:var(--blue-light); box-shadow:var(--shadow-md); background:var(--white); }
    .factory-icon { width:52px; height:52px; border-radius:12px; background:var(--blue-ultra); display:flex; align-items:center; justify-content:center; color:var(--blue-mid); font-size:1.3rem; margin-bottom:18px; }
    .factory-num { position:absolute; top:18px; inset-inline-end:18px; font-size:2.2rem; font-weight:900; color:rgba(26,64,128,0.06); }
    .factory-name { font-size:1rem; font-weight:800; margin-bottom:6px; color:var(--blue-dark); }
    .factory-location { font-size:0.78rem; color:var(--gold); margin-bottom:10px; display:flex; align-items:center; gap:5px; font-weight:600; }
    .factory-desc { font-size:0.82rem; color:var(--text-mid); line-height:1.75; }
    .factory-specs { margin-top:14px; display:flex; flex-direction:column; gap:5px; }
    .factory-spec { display:flex; align-items:center; gap:8px; font-size:0.76rem; color:var(--text-muted); }
    .factory-spec i { color:var(--blue-mid); width:14px; }

    /* ─── DISCLOSURE ─────────────────────────────── */
    #disclosure { background:var(--off-white); padding:96px 64px; }
    .disclosure-wrap { max-width:880px; margin:0 auto; }
    .accordion-item {
      background:var(--white); border-radius:12px;
      border:1.5px solid var(--blue-pale); margin-bottom:10px;
      overflow:hidden; transition:var(--transition); box-shadow:var(--shadow-sm);
    }
    .accordion-item:hover { border-color:var(--blue-light); }
    .accordion-item.open { border-color:var(--blue-mid); box-shadow:var(--shadow-md); }
    .accordion-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; cursor:pointer; }
    .accordion-title-wrap { display:flex; align-items:center; gap:12px; }
    .accordion-icon { width:36px; height:36px; background:var(--blue-ultra); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--blue-mid); font-size:0.9rem; flex-shrink:0; }
    .accordion-item.open .accordion-icon { background:var(--blue-mid); color:var(--white); }
    .accordion-title { font-size:0.92rem; font-weight:700; color:var(--blue-dark); }
    .accordion-arrow { color:var(--text-muted); transition:transform 0.3s ease; font-size:0.82rem; }
    .accordion-item.open .accordion-arrow { transform:rotate(180deg); color:var(--blue-mid); }
    .accordion-body { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
    .accordion-body-inner { padding:0 22px 20px; padding-inline-start:70px; }
    .accordion-body-inner p { color:var(--text-mid); font-size:0.86rem; line-height:1.85; }
    .accordion-body-inner ul { color:var(--text-mid); font-size:0.86rem; line-height:1.85; padding-inline-start:18px; margin-top:8px; }
    .accordion-body-inner ul li { margin-bottom:4px; }

    /* ─── CONTACT ────────────────────────────────── */
    #contact { background:var(--white); padding:96px 64px; }
    .contact-grid { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1fr 1.5fr; gap:56px; }
    .contact-info h3 { font-size:1.5rem; font-weight:900; color:var(--blue-dark); margin-bottom:10px; }
    .contact-info p { color:var(--text-mid); line-height:1.85; margin-bottom:28px; font-size:0.9rem; }
    .contact-items { display:flex; flex-direction:column; gap:14px; }
    .contact-item { display:flex; align-items:flex-start; gap:12px; background:var(--off-white); border:1.5px solid var(--blue-pale); padding:14px; border-radius:10px; transition:var(--transition); }
    .contact-item:hover { border-color:var(--blue-light); box-shadow:var(--shadow-sm); }
    .contact-item-icon { width:38px; height:38px; background:var(--blue-ultra); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--blue-mid); flex-shrink:0; }
    .contact-item-text strong { display:block; font-size:0.75rem; color:var(--blue-mid); margin-bottom:2px; font-weight:700; }
    .contact-item-text span { font-size:0.83rem; color:var(--text-mid); }
    .contact-form { background:var(--off-white); border-radius:18px; padding:34px; border:1.5px solid var(--blue-pale); box-shadow:var(--shadow-sm); }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
    .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
    .form-group label { font-size:0.78rem; font-weight:700; color:var(--text-mid); letter-spacing:0.3px; }
    .form-group input, .form-group textarea, .form-group select {
      background:var(--white); border:1.5px solid var(--blue-pale);
      color:var(--text-dark); padding:11px 14px; border-radius:8px;
      font-family:inherit; font-size:0.86rem; transition:var(--transition); outline:none;
    }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--blue-mid); box-shadow:0 0 0 3px rgba(26,64,128,0.08); }
    .form-group textarea { min-height:110px; resize:vertical; }
    .form-group select option { background:var(--white); color:var(--text-dark); }
    .form-submit { width:100%; padding:14px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:var(--white); font-family:inherit; font-size:0.9rem; font-weight:700; border:none; border-radius:10px; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:8px; }
    .form-submit:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(26,64,128,0.4); }
    .form-success { display:none; text-align:center; padding:36px; }
    .form-success i { font-size:3rem; color:var(--blue-mid); display:block; margin-bottom:12px; }
    .form-success strong { font-size:1.05rem; color:var(--blue-dark); }

    /* ─── FOOTER ─────────────────────────────────── */
    footer { background:var(--blue-dark); color:rgba(255,255,255,0.85); padding:56px 64px 28px; }
    .footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; max-width:1160px; margin:0 auto 44px; }
    .footer-brand-logo { height:56px; margin-bottom:14px; filter:brightness(0) invert(1) opacity(0.85); }
    .footer-brand p { color:rgba(255,255,255,0.6); font-size:0.83rem; line-height:1.8; }
    .footer-col h4 { font-size:0.8rem; font-weight:700; color:var(--gold-soft); margin-bottom:14px; letter-spacing:1.5px; text-transform:uppercase; }
    .footer-col ul { list-style:none; }
    .footer-col ul li { margin-bottom:9px; }
    .footer-col ul li a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.82rem; transition:var(--transition); }
    .footer-col ul li a:hover { color:var(--white); padding-inline-start:4px; }
    .footer-bottom { max-width:1160px; margin:0 auto; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
    .footer-copy { font-size:0.76rem; color:rgba(255,255,255,0.45); }
    .footer-socials { display:flex; gap:8px; }
    .social-btn { width:34px; height:34px; background:rgba(255,255,255,0.07); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6); font-size:0.82rem; text-decoration:none; transition:var(--transition); }
    .social-btn:hover { background:var(--gold); color:var(--white); }

    /* ─── ANIMATIONS ─────────────────────────────── */
    @keyframes fadeInRight { from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);} }
    @keyframes fadeInLeft  { from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:translateX(0);} }
    .reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s ease, transform 0.65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-delay-1 { transition-delay:0.1s; }
    .reveal-delay-2 { transition-delay:0.2s; }
    .reveal-delay-3 { transition-delay:0.3s; }
    .reveal-delay-4 { transition-delay:0.4s; }

    /* ─── LANG ───────────────────────────────────── */
    .ar-text { display:block; }
    .en-text { display:none; }
    body.en .ar-text { display:none; }
    body.en .en-text { display:block; }

    /* ─── RESPONSIVE ─────────────────────────────── */
    @media(max-width:1024px){
      .hero-content { grid-template-columns:1fr; text-align:center; }
      .hero-subtitle { margin:0 auto 34px; }
      .hero-cta { justify-content:center; }
      .hero-stats { justify-content:center; }
      .hero-right { display:none; }
      .about-grid { grid-template-columns:1fr; }
      .stats-grid { grid-template-columns:repeat(2,1fr); }
      .products-grid, .factories-grid { grid-template-columns:1fr 1fr; }
      .products-row2 { grid-template-columns:1fr 1fr; }
      .contact-grid { grid-template-columns:1fr; }
      .footer-top { grid-template-columns:1fr 1fr; }
    }
    @media(max-width:768px){
      section, footer { padding-left:24px; padding-right:24px; }
      nav, nav.scrolled { padding-left:24px; padding-right:24px; }
      .hero-content { padding:0 24px; padding-top:80px; }
      .nav-links { display:none; }
      .hamburger { display:flex; }
      .stats-grid { grid-template-columns:1fr 1fr; }
      .products-grid { grid-template-columns:1fr; }
      .products-row2 { grid-template-columns:1fr; }
      .factories-grid { grid-template-columns:1fr; }
      .form-row { grid-template-columns:1fr; }
      .footer-top { grid-template-columns:1fr; gap:28px; }
    }

body { padding-top: 70px; }
    section { padding-top: 60px; }

/* ── Homepage Product Cards ── */
.hp-card {
  background:#fff; border:1.5px solid #D6E4F7; border-radius:18px;
  overflow:hidden; transition:all 0.3s;
  box-shadow:0 2px 12px rgba(26,64,128,0.07);
}
.hp-card:hover { transform:translateY(-5px); box-shadow:0 12px 32px rgba(26,64,128,0.14); border-color:var(--accent,#1A4080); }
.hp-card-top {
  height:80px; display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#fff;
}
.hp-card-body { padding:20px 18px; }
.hp-card-body h3 { font-size:1rem; font-weight:800; color:#0D2B5E; margin:0 0 8px; }
.hp-card-body p  { font-size:0.82rem; color:#6b7c99; line-height:1.7; margin-bottom:14px; }
.hp-link {
  display:inline-flex; align-items:center; gap:6px;
  color:#1A4080; font-weight:700; font-size:0.82rem; text-decoration:none;
  transition:gap 0.2s;
}
.hp-link:hover { gap:10px; color:#B8860B; }

/* ── Project Cards ── */
.proj-card {
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 4px 20px rgba(26,64,128,0.09);
  border:1.5px solid #D6E4F7; transition:all 0.3s;
}
.proj-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(26,64,128,0.16); }
.proj-img {
  height:200px; position:relative; overflow:hidden;
}
.proj-img img { position:absolute;inset:0;z-index:2; }
.proj-img-overlay {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:rgba(255,255,255,0.6); font-size:0.75rem;
}
.proj-img-overlay i { font-size:2.5rem; opacity:0.5; }
.proj-img img[style*="display:none"] + .proj-img-overlay { z-index:3; }
.proj-badge {
  position:absolute; top:14px; right:14px; z-index:4;
  background:linear-gradient(135deg,#1A4080,#0D2B5E);
  color:#fff; padding:5px 12px; border-radius:20px;
  font-size:0.72rem; font-weight:800;
}
.proj-body { padding:22px 20px; }
.proj-body h3 { font-size:1.05rem; font-weight:800; color:#0D2B5E; margin:0 0 10px; }
.proj-body p  { font-size:0.83rem; color:#6b7c99; line-height:1.75; margin-bottom:14px; }
.proj-tags { display:flex; flex-wrap:wrap; gap:7px; }
.proj-tag {
  background:#EBF3FC; color:#1A4080; padding:4px 12px;
  border-radius:20px; font-size:0.72rem; font-weight:700;
}

/* ── Marquee ── */
.marquee-wrap {
  width:100%; overflow:hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.marquee-track {
  display:flex; gap:20px; width:max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee-reverse { animation: marqueeReverse 28s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }

@keyframes marqueeScroll  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqueeReverse { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* ── Client Logo Card ── */
.client-logo-card {
  min-width:160px; height:90px;
  background:#fff; border:1.5px solid #D6E4F7; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  padding:14px 18px; position:relative; overflow:hidden;
  transition:all 0.3s; cursor:default; flex-shrink:0;
  box-shadow:0 2px 10px rgba(26,64,128,0.06);
}
.client-logo-card:hover {
  border-color:#D4A017;
  box-shadow:0 6px 20px rgba(212,160,23,0.2);
  transform:translateY(-3px);
}
.client-logo-card img {
  max-width:120px; max-height:55px;
  object-fit:contain; display:block;
}
.client-fallback {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; text-align:center;
  color:#1A4080;
}
.client-fallback i    { font-size:1.5rem; opacity:0.7; }
.client-fallback span { font-size:0.72rem; font-weight:700; color:#4b6a9b; line-height:1.3; }

.lang-en .ar-text{display:none!important;}
.lang-en .en-text{display:block!important;}

/* ══ MOBILE & TABLET COMPLETE FIX ══════════════════════════════ */

/* 1. Fix page visibility — some pages hidden on mobile */
html, body {
  width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 2. Fix sections not showing */
section, main, .hero, footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 3. Mobile menu overlay + backdrop */
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 9999 !important;
}

/* 4. Nav bar fixed on mobile */
#navbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 9998 !important;
  width: 100% !important;
}

/* 5. Push content below navbar */
body { padding-top: 70px; }

/* 6. Mobile menu backdrop */
.menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9997;
}
.menu-backdrop.active { display: block; }

/* 7. Touch-friendly links */
.mobile-menu a {
  display: block !important;
  padding: 16px !important;
  min-height: 48px !important;
  -webkit-tap-highlight-color: transparent;
}

/* 8. Tablet fixes (768px – 1024px) */
@media (max-width: 1024px) {
  .nav-links { display: none !important; }
  .mobile-toggle { display: flex !important; }
  .proj-card, .hp-card { width: 100% !important; }
}

/* 9. Mobile fixes (max 768px) */
@media (max-width: 768px) {
  .hero { min-height: 100svh !important; }
  .section-title { font-size: 1.6rem !important; }
  .proj-img { height: 160px !important; }
  .client-logo-card { min-width: 130px !important; height: 75px !important; }
  .marquee-track { gap: 14px !important; }
  /* Fix grid overflow */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* 10. Small mobile (max 480px) */
@media (max-width: 480px) {
  body { padding-top: 60px; }
  .hero-content h1 { font-size: 1.5rem !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .section-title { font-size: 1.3rem !important; }
}


/* ── Disclosure Page Specific Styles ── */
/* ── PDF Category Buttons ── */
  .pdf-cat-btn {
    padding: 9px 20px; border-radius: 25px; border: 2px solid #D6E4F7;
    background: #fff; color: #1A4080; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s; font-family: inherit;
  }
  .pdf-cat-btn:hover, .pdf-cat-btn.active {
    background: linear-gradient(135deg, #1A4080, #0D2B5E);
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 16px rgba(26,64,128,0.3);
  }

  /* ── PDF Card ── */
  .pdf-card {
    background: #fff; border: 1.5px solid #D6E4F7; border-radius: 16px;
    padding: 22px 18px; display: flex; flex-direction: column; gap: 12px;
    transition: all 0.3s; box-shadow: 0 2px 12px rgba(26,64,128,0.07);
  }
  .pdf-card:hover {
    border-color: #B8860B; box-shadow: 0 8px 28px rgba(184,134,11,0.15);
    transform: translateY(-4px);
  }
  .pdf-icon-wrap {
    width: 52px; height: 52px; background: linear-gradient(135deg,#FFF8E7,#FDEEC5);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #c0392b;
  }
  .pdf-info h4 {
    font-size: 0.92rem; font-weight: 800; color: #0D2B5E;
    margin: 0 0 8px; line-height: 1.4;
  }
  .pdf-meta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.76rem; color: #6b7c99; margin-left: 10px;
  }
  .pdf-download-btn {
    margin-top: auto; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 0; border-radius: 10px;
    background: linear-gradient(135deg, #1A4080, #0D2B5E);
    color: #fff; text-decoration: none; font-weight: 700; font-size: 0.85rem;
    transition: all 0.25s;
  }
  .pdf-download-btn:hover {
    background: linear-gradient(135deg, #B8860B, #D4A017);
    box-shadow: 0 4px 16px rgba(184,134,11,0.35);
  }
  .pdf-card.hidden { display: none; }