/* =========================================================
   AL MESBAH – FINAL STABLE STYLE (NO CONFLICTS)
========================================================= */

/* ================= Reset ================= */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  font-family:"Cairo", system-ui, Arial, sans-serif;
  background:#f8fafc;
  color:#0f172a;
}

/* ================= Theme ================= */
:root{
  --brand:#22c55e;
  --line:#e5e7eb;
  --shadow:0 16px 40px rgba(2,6,23,.12);
}

/* =========================================================
   GLOBAL CONTAINER (Header / Footer only)
========================================================= */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Links */
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.9; }

/* =========================================================
   HEADER
========================================================= */
.main-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}

.nav{
  display:flex;
  gap:18px;
}
.nav a{
  font-weight:800;
  padding:8px 12px;
  border-radius:10px;
}
.nav a:hover{
  background:rgba(34,197,94,.12);
  color:var(--brand);
}

.lang-switch{
  font-weight:900;
}

/* =========================================================
   SLIDER (ISOLATED – SAFE)
========================================================= */
.slider{
  position:relative;
  width:100%;
  height:75vh;
  min-height:420px;
  overflow:hidden;
  background:#000;
}

.slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
}

.slide.active{
  opacity:1;
  z-index:1;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.caption{
  position:absolute;
  bottom:20%;
  color:#fff;
  z-index:2;
  max-width:720px;
}

html[dir="rtl"] .caption{
  right:8%;
  text-align:right;
}
html[dir="ltr"] .caption{
  left:8%;
  text-align:left;
}

.caption h1{
  margin:0 0 10px;
  font-size:54px;
  font-weight:900;
}
.caption p{
  margin:0;
  font-size:18px;
  opacity:.9;
}

/* =========================================================
   /* =========================================================
   CARDS GRID – 2 TOP / 2 BOTTOM (PRO)
========================================================= */

.stair-cards{
  padding:90px 0;
  background:#f8fafc;
}

/* Grid container */
.cards-grid{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;

  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:40px;
}

/* Card */
.stair-card{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;

  display:flex;
  align-items:stretch;

  transition:.35s ease;
}

/* Hover */
.stair-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 70px rgba(2,6,23,.22);
}

/* Image */
.card-img{
  width:45%;
  min-height:220px;
  overflow:hidden;
}

.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Content */
.card-content{
  width:55%;
  padding:24px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.card-content h3{
  margin:0 0 12px;
  font-size:22px;
  font-weight:900;
}

.card-content p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.8;
  color:#475569;
  font-weight:600;
}

.card-content a{
  font-weight:900;
  color:var(--brand);
}

/* RTL */
html[dir="rtl"] .stair-card{
  flex-direction:row-reverse;
  text-align:right;
}

/* Tablet */
@media (max-width:900px){
  .cards-grid{
    grid-template-columns:1fr;
  }
}

/* Mobile */
@media (max-width:600px){
  .stair-card{
    flex-direction:column;
  }

  .card-img,
  .card-content{
    width:100%;
  }

  .card-img{
    height:220px;
  }
}

/* ===============================
   Clients
=============================== */
.clients{
  padding:80px 0;
  background:#fff;
  text-align:center;
}

.clients h2{
  font-size:34px;
  font-weight:900;
  margin-bottom:40px;
}

.clients-slider{
  display:flex;
  gap:40px;
  overflow:hidden;
  align-items:center;
  justify-content:center;
}

.client{
  flex:0 0 auto;
}

.client img{
  height:70px;
  filter:grayscale(100%);
  opacity:.7;
  transition:.4s ease;
}

.client img:hover{
  filter:none;
  opacity:1;
  transform:scale(1.1);
}

/* =========================================================
   Professional Footer
========================================================= */
.site-footer{
  background:#020617;
  color:#e5e7eb;
  margin-top:0;
}

.footer-top{
  padding:70px 20px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.footer-col h4{
  margin:0 0 16px;
  font-size:20px;
  font-weight:900;
  color:#fff;
}

.footer-col p{
  margin:0 0 10px;
  line-height:1.8;
  font-size:15px;
  color:#cbd5f5;
  font-weight:600;
}

.footer-col a{
  display:block;
  margin:8px 0;
  font-weight:800;
  color:#22c55e;
  transition:.3s ease;
}

.footer-col a:hover{
  transform:translateX(-6px);
}

html[dir="ltr"] .footer-col a:hover{
  transform:translateX(6px);
}

/* Bottom */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px;
  text-align:center;
  font-weight:800;
  font-size:14px;
  color:#94a3b8;
}

/* Mobile */
@media (max-width:900px){
  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }
}
/* =========================================================
   Professional Footer + Animation
========================================================= */
.site-footer{
  background:#020617;
  color:#e5e7eb;
}

.footer-top{
  padding:70px 20px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.footer-col h4{
  margin-bottom:16px;
  font-size:20px;
  font-weight:900;
  color:#fff;
}

.footer-col p{
  margin-bottom:10px;
  font-size:15px;
  line-height:1.8;
  color:#cbd5f5;
  font-weight:600;
}

.footer-col a{
  display:block;
  margin:8px 0;
  color:#22c55e;
  font-weight:800;
}

/* Social Icons */
.footer-social{
  display:flex;
  gap:14px;
  margin-top:16px;
}

.social{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  transition:.35s ease;
}

.social svg{
  width:22px;
  height:22px;
  fill:#fff;
}

.social.fb:hover{
  background:#1877f2;
  transform:translateY(-5px);
}

.social.wa:hover{
  background:#25d366;
  transform:translateY(-5px);
}

/* Footer Bottom */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:16px;
  text-align:center;
  font-size:14px;
  font-weight:800;
  color:#94a3b8;
}

/* Animation */
.fade-up{
  opacity:0;
  transform:translateY(25px);
  animation:fadeUp .8s ease forwards;
}

.delay-1{ animation-delay:.15s }
.delay-2{ animation-delay:.3s }

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Mobile */
@media (max-width:900px){
  .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }
  .footer-social{
    justify-content:center;
  }
}
/* /* =========================================================
   Light Footer – Darker Elegant Variant
========================================================= */
.darkish-footer{
  background:#eef2f6; /* أغمق درجة واحدة */
  color:#0f172a;
  border-top:1px solid #dbe1ea;
}

.darkish-footer .footer-top{
  padding:70px 20px;
}

.darkish-footer .footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.darkish-footer .footer-col h4{
  margin-bottom:16px;
  font-size:20px;
  font-weight:900;
  color:#0f172a;
}

.darkish-footer .footer-col p{
  margin-bottom:10px;
  font-size:15px;
  line-height:1.8;
  color:#475569;
  font-weight:600;
}

.darkish-footer .footer-col a{
  display:block;
  margin:8px 0;
  color:#22c55e;
  font-weight:800;
}

/* Social */
.darkish-footer .footer-social{
  display:flex;
  gap:14px;
  margin-top:16px;
}

.darkish-footer .social{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e2e8f0;
  transition:.35s ease;
}

.darkish-footer .social svg{
  width:22px;
  height:22px;
  fill:#0f172a;
}

.darkish-footer .social.fb:hover{
  background:#1877f2;
}
.darkish-footer .social.wa:hover{
  background:#25d366;
}

.darkish-footer .social:hover svg{
  fill:#fff;
  transform:scale(1.05);
}

/* Bottom */
.darkish-footer .footer-bottom{
  border-top:1px solid #dbe1ea;
  padding:16px;
  text-align:center;
  font-size:14px;
  font-weight:800;
  color:#64748b;
}

/* Animation */
.fade-up{
  opacity:0;
  transform:translateY(18px);
  animation:fadeUp .8s ease forwards;
}

.delay-1{ animation-delay:.15s }
.delay-2{ animation-delay:.3s }

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Mobile */
@media (max-width:900px){
  .darkish-footer .footer-container{
    grid-template-columns:1fr;
    text-align:center;
  }
  .darkish-footer .footer-social{
    justify-content:center;
  }
}
/* ===============================
   FIX Why Us Section Layout
=============================== */
.why-us{
  width:100%;
  padding:80px 20px;
  background:#f9fafb;
}

.why-us h2{
  text-align:center;
  font-size:32px;
  font-weight:900;
  margin-bottom:40px;
}

.why-grid{
  max-width:1200px;
  margin:0 auto;              /* ← ده المهم */
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
}

.why-item{
  background:#fff;
  border-radius:18px;
  padding:28px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  text-align:center;
  transition:.3s;
}

.why-item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.why-item span{
  font-size:42px;
  display:block;
  margin-bottom:12px;
}

.why-item h4{
  font-size:20px;
  font-weight:900;
  margin-bottom:8px;
}

.why-item p{
  font-size:15px;
  line-height:1.8;
  color:#555;
}
/* ===============================
   Bring Why Us Closer to Cards
=============================== */
/* ===============================
   Improve Stair Cards Appearance
=============================== */

.stair-cards{
  padding:70px 20px 40px;
}

.cards-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
  align-items:stretch; /* توحيد الارتفاع */
}

/* الكارت نفسه */
.stair-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.4s ease;
  opacity:0;
  transform:translateY(30px);
  animation:cardIn .8s ease forwards;
}

/* تأخير بسيط لكل كارت */
.stair-card:nth-child(1){ animation-delay:.1s }
.stair-card:nth-child(2){ animation-delay:.25s }
.stair-card:nth-child(3){ animation-delay:.4s }

/* حركة الدخول */
@keyframes cardIn{
  to{
    opacity:1;
    transform:none;
  }
}

.stair-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 55px rgba(0,0,0,.15);
}

/* صورة الكارت */
.card-img{
  padding:24px;
  text-align:center;
}

.card-img img{
  max-width:140px;
  height:auto;
}

/* محتوى الكارت */
.card-content{
  padding:0 28px 28px;
}

.card-content h3{
  font-size:22px;
  font-weight:900;
  margin-bottom:10px;
}

.card-content p{
  font-size:15px;
  line-height:1.9;
  color:#555;
  margin-bottom:16px;
}

/* زر الكارت */
.card-content a{
  font-weight:700;
  color:#22c55e;
  text-decoration:none;
}

.card-content a:hover{
  text-decoration:underline;
}
/* ===============================
   Cards Slider (Image Top)
=============================== */

.cards-slider-section{
  padding:80px 20px 40px;
  background:#f9fafb;
  overflow:hidden;
}

.cards-slider{
  display:flex;
  gap:30px;
  max-width:1200px;
  margin:0 auto;
  scroll-behavior:smooth;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}

.cards-slider::-webkit-scrollbar{
  display:none;
}

/* الكارت */
.slide-card{
  min-width:340px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
  scroll-snap-align:center;
  transition:.4s ease;
}

.slide-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 70px rgba(0,0,0,.18);
}

/* الصورة */
.slide-img img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px 18px 0 0;
}

/* المحتوى */
.slide-content{
  padding:24px 22px 28px;
  text-align:center;
}

.slide-content h3{
  font-size:22px;
  font-weight:900;
  margin-bottom:10px;
}

.slide-content p{
  font-size:15px;
  line-height:1.9;
  color:#444;
  margin-bottom:16px;
}

.slide-content a{
  font-weight:800;
  color:#22c55e;
  text-decoration:none;
}