:root{ 
    --brand:#d5b886;        
    --brand2:#b88a4b;       
    --brand3:#8b6a3b;       
    --brand-soft:#f3eadb;  

    /* الخلفيات */
    --bg:#fbf8f2;                    
    --card:rgba(255,255,255,.94);     

    /* النصوص */
    --text:#121826;
    --muted:#5b6472;

    /* الحدود والظلال */
    --border:rgba(18,24,38,.12);
    --shadow:0 18px 45px rgba(18,24,38,.14);

    --radius:18px;
    --max:1120px;
  }
    
*{box-sizing:border-box}

html, body{
  margin:0;
  width:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

html{scroll-behavior:smooth}

/* Hide scrollbar but keep scrolling */
html, body{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none;
}

  body{
    margin:0;
    font-family:"Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; 
    background:
      radial-gradient(900px 500px at 85% 10%, rgba(213,184,134,.22), transparent 60%),
      radial-gradient(900px 500px at 15% 30%, rgba(184,138,75,.16), transparent 60%),
      linear-gradient(180deg, rgba(243,234,219,.55), transparent 35%),
      var(--bg);

    color:var(--text);
    line-height:1.85;
    overflow-x:hidden;
  }

  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--max); margin:auto; padding:0 18px}

  /* NAVBAR */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    padding: 0 15px;
    backdrop-filter:blur(12px);
    background:rgba(255,255,255,.78);
    border-bottom:1px solid var(--border);
  }

  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
    position:relative;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
  }

  .logo{
    width:56px;
    height:56px;
    border-radius:16px;
    background: linear-gradient(
      135deg,
      rgba(213,184,134,.22) 0%,
      rgba(243,234,219,.75) 55%,
      rgba(184,138,75,.18) 100%
    );
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(18,24,38,.12);
    box-shadow: 0 8px 24px rgba(18,24,38,.10);
    overflow:hidden;
  }
  .logo img{
    width:75%;
    height:75%;
    object-fit:contain;
    display:block;
  }

  .menu{
    display:flex;
    gap:12px;
  }
  .menu a{
    padding:8px 10px;
    border-radius:12px;
    color:var(--muted);
    transition:.2s;
  }
  .menu a:hover{
    color:var(--text);
    background:rgba(213,184,134,.12);
  }

  /* Mobile buttons */
  .nav-actions{
    display:none;
    align-items:center;
    gap:10px;
  }

  .icon-btn{
    width:46px;
    height:46px;
    border-radius:14px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.72);
    display:grid;
    place-items:center;
    box-shadow:0 8px 24px rgba(18,24,38,.10);
    transition:.2s;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .icon-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
  }

  .icon-btn svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:var(--brand3);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Mobile layout */
  @media (max-width: 900px){
    .menu{
      position:absolute;
      top:100%;
      right:0;
      left:0;
      flex-direction:column;
      gap:0;
      background:rgba(255,255,255,.92);
      backdrop-filter: blur(12px);
      border:1px solid var(--border);
      border-top:none;
      border-radius:0 0 18px 18px;
      overflow:hidden;
      max-height:0;
      opacity:0;
      transform:translateY(-6px);
      transition:max-height .35s ease, opacity .25s ease, transform .25s ease;
    }

    .menu a{
      padding:14px 16px;
      border-radius:0;
      border-bottom:1px solid rgba(18,24,38,.08);
    }
    .menu a:last-child{ border-bottom:none; }

    .menu.is-open{
      max-height:420px;
      opacity:1;
      transform:translateY(0);
    }

    .nav-actions{ display:flex; }

    .brand{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      text-align:center;
    }
    .brand-text{
      display:none;
    }

    .brand > div{ line-height:1.2; }
  }

  @media (prefers-reduced-motion: reduce){
    .menu{ transition:none !important; }
    .icon-btn{ transition:none !important; }
  } 

 
  /* HERO  */ 
  .hero{
    width:100%;
    min-height:100vh;
  }
  .hero-slider{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    padding:0 !important;
    border:0;
 
    background:
      radial-gradient(900px 600px at 70% 10%, rgba(213,184,134,.18), transparent 55%),
      radial-gradient(900px 600px at 20% 70%, rgba(184,138,75,.14), transparent 55%),
      #070c16;
  }
  .hero-logo{
    width: 120px;
    height: auto;
    display: block;
    margin: 0 auto 12px;   /* وسط + مسافة تحت */
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  }

  @media (max-width: 600px){
    .hero-logo{ width: 92px; margin-bottom: 10px; }
  }

  .slides,.slide,.overlay{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .slide{
    background-size:cover;
    background-position:center;
    opacity:0;
    transform:scale(1.06);
    transition:opacity 1s ease, transform 8s ease;
  }
  .slide.active{
    opacity:1;
    transform:scale(1);
  }
 
  .overlay{
    background: linear-gradient(to left,
      rgba(7,12,22,.88) 18%,
      rgba(7,12,22,.60) 55%,
      rgba(213,184,134,.12) 100%
    );
  }

  /* HERO CONTENT */
  .hero-content{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:60px 18px;
    max-width:900px;
    margin:auto;
    color:#eef3ff;
  }
 
  .company-name{
    font-size:44px;
    font-weight:900;
    margin:0 0 8px;
    color:var(--brand);
    text-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  @media (max-width:520px){
    .company-name{font-size:34px}
  }

  .badge{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(213,184,134,.12);
    border:1px solid rgba(213,184,134,.22);
    color:#f3f4f6;
    font-weight:800;
    font-size:14px;
    margin-bottom:10px;
  }

  .hero-content h1{
    margin:6px 0 0;
    font-size:38px;
    line-height:1.2;
  }
  @media (max-width:520px){
    .hero-content h1{font-size:30px}
  }

  .lead{
    color:#dbe3f7;
    margin:10px 0 14px;
  }
  .actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
  }
 
  /* SECTIONS */ 
  section{padding:32px 0}
  .section-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:16px;
  }
  .section-title h2{margin:0}
  .section-title p{margin:0;color:var(--muted)}

  .grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
  }
  @media(max-width:900px){
    .grid-3{grid-template-columns:1fr}
  }

  /* CARDS */
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:var(--shadow);
  }
  .lift{transition:.22s}
  .lift:hover{transform:translateY(-6px)}

  .icon{
    width:46px;height:46px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(213,184,134,.14);
    border:1px solid rgba(213,184,134,.22);
    font-size:22px;
    margin-bottom:10px;
  }
  .small{color:var(--muted)}

  .thumb{
    height:150px;
    border-radius:16px;
    border:1px solid var(--border);
    margin-bottom:12px;
    background-size:cover;
    background-position:center;
  }

  /* CONTACT */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  @media(max-width:900px){
    .contact-grid{grid-template-columns:1fr}
  }

  .field{
    display:flex;
    justify-content:space-between;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(213,184,134,.10);
    color:var(--muted);
  }
  .field strong{color:var(--text)}

  iframe{
    width:100%;
    height:320px;
    border-radius:16px;
    border:1px solid var(--border);
  }

  /* FOOTER */
  .footer{
    padding:24px 0 34px;
    border-top:1px solid var(--border);
    color:var(--muted);
    text-align:center;
  }

  .ltr{
    direction:ltr;
    unicode-bidi:embed;
  }
  /* ===== Agencies Section ===== */
  .agencies-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  @media (max-width: 900px){
    .agencies-grid{ grid-template-columns:1fr; }
  }

  .agency-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    text-align:center;
  }

  .agency-logo{
    height:140px;
    border-radius:16px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.75);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .agency-logo img{
    width:100%;
    height:100%;
    object-fit:contain;   
    padding:14px;
  }

  .agency-name{
    margin:12px 0 0;
    font-size:18px;
  }