:root{--main:#963C00;--black:#000;--white:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Lenxed,Almarai;background:#fff;color:#000}

/* NAV */
.nav{
  position:sticky;
  top:0;
  background:var(--main);
  padding:8px 32px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  z-index:10;
}

/* top-left logo (horizontal) */
.nav-logo{
  width:140px; /* ~1.75 × height */
  height:80px;
  object-fit:contain;
}

/* center links */
.nav nav{
  display:flex;
  justify-content:center;
  gap:28px;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}

/* language button */
#langBtn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #fff;
  background:none;
  color:#fff;
  cursor:pointer;
  font-size:18px;
  font-family:"Almarai",system-ui;
}

/* HERO */
.hero{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.hero-logo{
  width:80vw;
  max-width:900px;
  height:auto;
  margin-bottom:30px;
  transition:opacity .5s ease;
}
.hero p{opacity:.7}

/* SECTIONS */
.section{padding:100px 20px;max-width:1100px;margin:auto}
.dark{background:#000;color:#fff}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  margin-top:40px;
}
.card{
  border:2px solid var(--main);
  padding:30px;
  border-radius:16px;
  background:#fff;
  color:#000;
  transition:.3s;
}
.dark .card{background:#000;color:#fff}
.card:hover{transform:translateY(-6px)}

/* IMAGES */
.img-box,.img-wide{
  width:100%;
  margin-top:30px;
  border-radius:16px;
  object-fit:contain;
}
.img-box{max-height:none}
.img-wide{max-height:none}

/* FOOTER */
footer{padding:40px;text-align:center;background:#000;color:#fff}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:1s}
.reveal.active{opacity:1;transform:none}

/* RTL */
html[dir="rtl"]{font-family:"Almarai",system-ui}