```css :root{ --blue:#0b5796; --blue-2:#163f6d; --cyan:#31bde8; --teal:#05a88d; --teal-2:#35c1b2; --ink:#172333; --muted:#667085; --line:#e6edf5; --bg:#f5f8fb; --white:#fff; --shadow:0 20px 55px rgba(16,42,67,.12); --radius:24px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:Inter,Arial,Helvetica,sans-serif; color:var(--ink); background:#fff; line-height:1.65; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .container{ width:min(1180px,calc(100% - 40px)); margin-inline:auto; } .topbar{ background:linear-gradient(90deg,var(--blue-2),var(--blue)); color:#eaf7ff; font-size:13px; } .topbar .container{ display:flex; gap:22px; justify-content:space-between; align-items:center; padding:8px 0; } .navbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(15px); border-bottom:1px solid var(--line); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; } .brand{ display:flex; gap:13px; align-items:center; font-weight:800; color:var(--blue-2); } .brand-mark{ width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--teal)); display:grid; place-items:center; color:#fff; font-weight:900; box-shadow:0 10px 25px rgba(11,87,150,.22); } .brand small{ display:block; color:var(--teal); font-weight:700; } .nav{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; } .nav a{ padding:9px 12px; border-radius:999px; font-size:14px; color:#23415e; font-weight:700; } .nav a:hover, .nav a.active{ background:#e8f7f6; color:var(--teal); } .btn{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--teal),var(--cyan)); color:#fff; padding:12px 18px; border-radius:999px; font-weight:800; box-shadow:0 14px 30px rgba(5,168,141,.24); border:none; } .btn.secondary{ background:#fff; color:var(--blue); border:1px solid #d4e2ee; box-shadow:none; } .hero{ position:relative; overflow:hidden; background:radial-gradient(circle at 78% 10%,rgba(49,189,232,.18),transparent 32%),linear-gradient(135deg,#eef7fb 0%,#fff 52%,#f2fbfa 100%); } .hero:before{ content:""; position:absolute; right:-80px; top:60px; width:420px; height:560px; background:repeating-linear-gradient(135deg,rgba(22,63,109,.06) 0 12px,transparent 12px 25px); clip-path:polygon(35% 0,100% 15%,65% 100%,0 75%); } .hero-grid{ display:grid; grid-template-columns:1.02fr .88fr; gap:48px; align-items:center; padding:86px 0; } .eyebrow{ color:var(--teal); font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:13px; } .hero h1, .page-title h1{ font-size:clamp(42px,6vw,78px); line-height:1.02; margin:10px 0 22px; color:var(--blue-2); letter-spacing:-.04em; } .hero h1 span, .accent{ color:var(--teal); } .lead{ font-size:19px; color:#475467; max-width:760px; } .hero-card{ position:relative; border-radius:34px; padding:14px; background:#fff; box-shadow:var(--shadow); transform:rotate(1deg); } .hero-card img{ border-radius:26px; } .hero-badge{ position:absolute; left:-25px; bottom:30px; background:#fff; border-left:7px solid var(--teal); box-shadow:var(--shadow); border-radius:18px; padding:16px 20px; font-weight:900; color:var(--blue-2); } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:-44px; position:relative; z-index:2; } .stat{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 12px 30px rgba(16,42,67,.08); } .stat b{ display:block; font-size:30px; color:var(--blue); } .stat span{ font-weight:700; color:var(--muted); font-size:14px; } .section{ padding:82px 0; } .section.alt{ background:var(--bg); } .section-head{ display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; } .section-head h2, .page-title h2{ font-size:clamp(30px,4vw,48px); line-height:1.1; margin:0; color:var(--blue-2); letter-spacing:-.03em; } .section-head p{ max-width:640px; color:var(--muted); margin:10px 0 0; } .grid{ display:grid; gap:22px; } .grid.cols-2{ grid-template-columns:repeat(2,1fr); } .grid.cols-3{ grid-template-columns:repeat(3,1fr); } .grid.cols-4{ grid-template-columns:repeat(4,1fr); } .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:0 10px 30px rgba(16,42,67,.06); } .card h3{ margin:0 0 10px; color:var(--blue-2); font-size:22px; } .card p{ margin:0; color:var(--muted); } .icon{ width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,var(--blue),var(--teal)); display:grid; place-items:center; color:#fff; font-weight:900; font-size:23px; margin-bottom:18px; } .split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; align-items:center; } .image-frame{ border-radius:30px; overflow:hidden; box-shadow:var(--shadow); background:#fff; padding:12px; } .image-frame img{ border-radius:22px; width:100%; height:100%; object-fit:cover; } .pill-list{ display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:18px 0 0; list-style:none; } .pill-list li{ background:#eef7fb; border:1px solid #d7ecf5; color:var(--blue-2); border-radius:999px; padding:8px 13px; font-weight:800; font-size:14px; } .service-card{ position:relative; overflow:hidden; min-height:310px; padding:0; } .service-card img{ height:185px; width:100%; object-fit:cover; } .service-card .body{ padding:22px; } .service-card:after{ content:""; position:absolute; right:-40px; bottom:-50px; width:150px; height:150px; background:rgba(5,168,141,.1); border-radius:50%; } .check-list{ padding:0; margin:0; list-style:none; } .check-list li{ position:relative; padding-left:30px; margin:11px 0; color:#344054; } .check-list li:before{ content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:#e8f7f6; color:var(--teal); display:grid; place-items:center; font-size:12px; font-weight:900; } .page-hero{ background:linear-gradient(135deg,#eef7fb,#fff); border-bottom:1px solid var(--line); } .page-title{ padding:70px 0; } .breadcrumbs{ color:var(--muted); font-weight:700; } .project-card{ overflow:hidden; padding:0; } .project-card img{ height:250px; width:100%; object-fit:cover; } .project-card .body{ padding:21px; } .tag{ display:inline-block; background:#e8f7f6; color:var(--teal); font-weight:900; border-radius:999px; padding:5px 10px; font-size:12px; margin-bottom:10px; } .gallery{ columns:3 280px; column-gap:18px; } .gallery figure{ break-inside:avoid; margin:0 0 18px; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 8px 25px rgba(16,42,67,.06); } .gallery figcaption{ padding:13px 16px; font-weight:800; color:var(--blue-2); } .cta{ background:linear-gradient(135deg,var(--blue-2),var(--blue)); color:#fff; border-radius:34px; padding:52px; position:relative; overflow:hidden; } .cta:after{ content:""; position:absolute; right:-90px; top:-90px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.12); } .cta h2{ font-size:42px; line-height:1.1; margin:0 0 14px; } .cta p{ color:#dcefff; max-width:760px; } .footer{ background:#102033; color:#d6e5f2; padding:54px 0 24px; } .footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; } .footer h4{ color:#fff; margin:0 0 12px; } .footer a{ display:block; color:#cfe0ee; margin:7px 0; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:20px; color:#9fb3c5; font-size:13px; } .table{ width:100%; border-collapse:collapse; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(16,42,67,.06); } .table th, .table td{ padding:15px; border-bottom:1px solid var(--line); text-align:left; } .table th{ background:#eef7fb; color:var(--blue-2); } .form{ display:grid; gap:14px; } .form input, .form textarea, .form select{ width:100%; padding:14px 16px; border:1px solid #d7e4ee; border-radius:14px; font:inherit; } .form textarea{ min-height:140px; } .notice{ background:#fff7e6; border:1px solid #ffe4ae; color:#7a5100; border-radius:18px; padding:18px; } /* Arabic RTL Additions */ html[dir="rtl"]{ direction:rtl; scroll-behavior:smooth; } html[dir="rtl"] body{ font-family:"Cairo","Tahoma","Arial",sans-serif; text-align:right; letter-spacing:0; } html[dir="rtl"] .topbar .container, html[dir="rtl"] .nav-inner, html[dir="rtl"] .section-head, html[dir="rtl"] .brand, html[dir="rtl"] .footer-grid{ direction:rtl; } html[dir="rtl"] .nav{ direction:rtl; justify-content:flex-end; } html[dir="rtl"] .brand{ flex-direction:row; } html[dir="rtl"] .hero:before{ right:auto; left:-80px; transform:scaleX(-1); } html[dir="rtl"] .hero h1, html[dir="rtl"] .page-title h1, html[dir="rtl"] .section-head h2, html[dir="rtl"] .page-title h2{ letter-spacing:0; line-height:1.18; } html[dir="rtl"] .lead{ line-height:1.9; } html[dir="rtl"] .hero-card{ transform:rotate(-1deg); } html[dir="rtl"] .hero-badge{ left:auto; right:-25px; border-left:0; border-right:7px solid var(--teal); } html[dir="rtl"] .check-list li{ padding-left:0; padding-right:30px; } html[dir="rtl"] .check-list li:before{ left:auto; right:0; } html[dir="rtl"] .table th, html[dir="rtl"] .table td{ text-align:right; } html[dir="rtl"] .cta:after{ right:auto; left:-90px; } html[dir="rtl"] .service-card:after{ right:auto; left:-40px; } html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select{ text-align:right; } html[dir="rtl"] .footer a{ display:block; } /* Mobile Menu Button */ .mobile-menu-toggle{ display:none; border:0; background:#08a88a; color:#ffffff; font-size:26px; font-weight:800; width:48px; height:48px; border-radius:14px; cursor:pointer; line-height:1; } .lang-switch{ background:#e9fbf7; color:#08a88a !important; padding:10px 16px; border-radius:999px; font-weight:800; } /* Tablet and Mobile */ @media(max-width:900px){ .hero-grid, .split, .grid.cols-2, .grid.cols-3, .grid.cols-4, .footer-grid{ grid-template-columns:1fr; } .stats{ grid-template-columns:repeat(2,1fr); margin-top:0; } .section-head{ display:block; } .topbar .container{ flex-direction:column; gap:4px; text-align:center; line-height:1.5; } .nav-inner{ position:relative; flex-wrap:wrap; gap:14px; } .brand{ flex:1; } .mobile-menu-toggle{ display:inline-flex; align-items:center; justify-content:center; } .nav{ display:none; width:100%; flex-direction:column; align-items:stretch; background:#ffffff; border:1px solid rgba(20,70,120,0.12); border-radius:18px; padding:12px; box-shadow:0 18px 40px rgba(13,55,96,0.12); } .nav.active{ display:flex; } .nav a{ width:100%; padding:13px 14px; border-radius:12px; background:#f7fbff; text-align:center; } .nav a:hover, .nav a.active{ background:#e9fbf7; color:#08a88a; } .nav-inner > .btn.secondary{ display:none; } .hero-grid{ padding:56px 0; } .hero h1{ font-size:44px; } .hero-badge{ left:10px; } .cta{ padding:32px; } .cta h2{ font-size:30px; } html[dir="rtl"] .hero-badge{ left:auto; right:10px; } html[dir="rtl"] .nav{ align-items:stretch; } html[dir="rtl"] .nav a{ text-align:center; } } /* Small Mobile */ @media(max-width:540px){ .container{ width:min(100% - 24px,1180px); } .stats{ grid-template-columns:1fr; } .topbar .container{ display:block; } .brand div:last-child{ font-size:14px; } .page-title{ padding:46px 0; } .section{ padding:56px 0; } } ``` Use this file here: ```text public_html/pioneer-ar/assets/styles.css ``` Also make sure your Arabic HTML pages use this font link in the `<head>`: ```html <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> ```/* FINAL MOBILE HEADER + MENU FIX */
.mobile-menu-toggle {
  display: none;
  border: 0 !important;
  background: linear-gradient(135deg, #05a88d, #31bde8) !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 14px !important;
  cursor: pointer;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(5,168,141,.22);
  padding: 0 !important;
}

.lang-switch {
  background: #e9fbf7 !important;
  color: #08a88a !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

@media (max-width: 900px) {

  .topbar .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    text-align: center !important;
    line-height: 1.45 !important;
    padding: 10px 0 !important;
  }

  .navbar {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px 0 !important;
  }

  .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .brand-mark {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  .brand span {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .brand small {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 2 !important;
  }

  .nav-inner > .btn.secondary {
    display: none !important;
  }

  .nav {
    display: none !important;
    width: 100% !important;
    order: 5 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(20,70,120,0.12) !important;
    border-radius: 18px !important;
    padding: 12px !important;
    margin-top: 10px !important;
    box-shadow: 0 18px 40px rgba(13,55,96,0.12) !important;
  }

  .nav.active {
    display: flex !important;
  }

  .nav a {
    display: block !important;
    width: 100% !important;
    padding: 13px 14px !important;
    border-radius: 12px !important;
    background: #f7fbff !important;
    color: #163f6d !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .nav a:hover,
  .nav a.active {
    background: #e9fbf7 !important;
    color: #08a88a !important;
  }

  .hero-grid {
    padding-top: 54px !important;
  }
}

@media (max-width: 540px) {

  .container {
    width: calc(100% - 28px) !important;
  }

  .brand span {
    font-size: 17px !important;
  }

  .brand small {
    font-size: 11px !important;
  }

  .mobile-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 22px !important;
  }

  .hero h1 {
    font-size: 43px !important;
  }
}

/* RTL Arabic Mobile Support */
@media (max-width: 900px) {
  html[dir="rtl"] .nav {
    direction: rtl !important;
  }

  html[dir="rtl"] .nav a {
    text-align: center !important;
  }
}