/* assets/styles.css
   Responsive, RTL-friendly, Google fonts (Tajawal + Inter)
   Updated for simple slider + buttons
*/
:root{
  --primary:#0b79d0;
  --bg:#f7f8fb;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:12px;
  --maxw:1200px;
  --gap:18px;
  font-family: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#111}
a{color:var(--primary);text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:20px}

/* Topbar */
.topbar{background:#fff;border-bottom:1px solid #eef2f6;font-size:14px}
.topbar-wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 0;color:var(--muted)}

/* Header */
.header{background:transparent;position:sticky;top:0;z-index:40;backdrop-filter:saturate(120%) blur(6px)}
.header-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:56px;object-fit:contain}
.brand-name{font-weight:800}
.nav{display:block}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:10px;align-items:center}
.nav-list a{padding:8px 12px;border-radius:8px}
.btn-cta{background:var(--primary);color:#fff;padding:8px 12px;border-radius:8px}
.header-actions{display:flex;align-items:center;gap:8px}
.lang-toggle{background:#fff;border:1px solid #e6eef8;padding:8px;border-radius:8px;cursor:pointer}
.hamburger{display:none;background:transparent;border:0;font-size:22px;cursor:pointer}

/* Mobile nav */
.mobile-nav{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);padding:20px;z-index:60}
.mobile-nav > ul{background:#fff;padding:18px;border-radius:10px;list-style:none}
.mobile-close{background:#fff;border:0;padding:6px 10px;border-radius:8px;cursor:pointer}

/* Simple slider */
.simple-slider{position:relative;width:100%;height:420px;overflow:hidden;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.10);margin:20px 0}
.simple-slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease-in-out}
.simple-slider .slide.active{opacity:1;z-index:1}

/* slider text */
.slider-text{position:absolute;bottom:20px;left:20px;background:rgba(255,255,255,0.85);padding:16px 22px;border-radius:12px;max-width:380px;backdrop-filter:blur(6px)}
.slider-text h1{margin:0 0 8px;font-size:26px}
.slider-text p{margin:0;color:#333}

/* buttons */
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.95);border:0;font-size:28px;padding:8px 14px;border-radius:50%;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.15);z-index:10}
.slider-btn.prev{left:15px}
.slider-btn.next{right:15px}
.slider-btn:hover{transform:translateY(-50%) scale(1.05)}

/* Features, cards and layout */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(8,30,50,0.06)}
.card-icon{font-size:22px;margin-bottom:8px}

.about-preview{display:grid;grid-template-columns:1fr 340px;gap:22px;margin-top:22px}
.contact-card{background:#fff;padding:16px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.04)}

.footer{background:linear-gradient(90deg,var(--primary),#0a6fb8);color:#fff;padding:28px 0;margin-top:32px;border-top-left-radius:12px;border-top-right-radius:12px}
.footer-wrap{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}

/* Responsive */
@media(max-width:980px){
  .simple-slider{height:260px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .about-preview{grid-template-columns:1fr}
  .nav-list{display:none}
  .hamburger{display:inline-block}
}
@media(max-width:620px){
  .simple-slider{height:220px}
  .grid-3{grid-template-columns:1fr}
  .logo{height:48px}
  .topbar-wrap{flex-direction:column;gap:8px}
}

/* ===== تحسين تجاوب صفحة "من نحن" للهواتف ===== */
.about-page {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap:22px;
  align-items:start;
}

/* داخل الكاردات: اجعل الصور مرنة */
.about-page img, .contact-card img {
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  object-fit:cover;
}

/* نص داخل الكارد: ضع Padding مناسب */
.about-page .card {
  padding:18px;
}

/* تصغير الهامش للعنوان في شاشات صغيرة */
.about-page h1, .about-card h2 {
  margin-top:0;
  margin-bottom:12px;
}

/* responsive: شاشات أصغر من 980px -> العمود الجانبي تحت المحتوى */
@media (max-width: 980px) {
  .about-page {
    grid-template-columns: 1fr;
    gap:16px;
    padding: 8px;
  }

  .contact-card {
    order: 2; /* لو تريدها أسفل المحتوى */
    width:100%;
    padding:14px;
  }

  .about-page .card {
    padding:14px;
  }

  /* اضبط حجم النصوص لتناسب الشاشات الصغيرة */
  .about-page h1 { font-size:20px; }
  .about-page p { font-size:15px; line-height:1.5; }

  /* لو في صورة جانبية صغيرة في أعلى البطاقة (thumbnail) */
  .contact-card img { height:180px; object-fit:cover; }

  /* قلل عرض الحاوية الداخلية لتجنب الحواف */
  .container { padding-left:12px; padding-right:12px; }
}

/* responsive: شاشات أصغر جدا */
@media (max-width:420px) {
  .about-page h1 { font-size:18px; }
  .about-page p { font-size:14px; }
  .contact-card { padding:12px; }
  .hero-content { padding:14px; }
}