/* style.css — مُعدّل طبقاً لمتطلبات العميل */

:root{
  --dark:#1a2531;
  --accent:#18b896;
  --accent2:var(--accent);
  --bg:var(--dark);
  --muted: rgba(255,255,255,0.04);
  --text:#ffffff;
  --radius:14px;
  --container:1200px;
  --transition:all .28s cubic-bezier(.2,.9,.3,1);
  --glass: rgba(255,255,255,0.03);
  --card-bg: rgba(255,255,255,0.03);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:"Cairo",system-ui,Arial;
  background:var(--bg);color:var(--text);direction:rtl;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ====== Navbar (central layout) ====== */
header.navbar{
  position:fixed; inset:0 0 auto 0; height:76px;
  background:linear-gradient(180deg, rgba(26,37,49,0.98), rgba(26,37,49,0.98));
  z-index:1100; box-shadow:0 6px 18px rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
}
.navbar-container{
  width:90%; max-width:var(--container);
  display:grid; grid-template-columns: auto 1fr auto;
  align-items:center; gap:18px;
}

/* logo (right column) */
.logo-section{display:flex;align-items:center;gap:12px;justify-self:end}
/* ت.1: تكبير الشعار */
.logo-img{width:68px;height:68px;border-radius:12px;object-fit:cover} 
/* ت.1: تكبير اسم الشركة */
.company-name{color:var(--accent);font-weight:800;font-size:1.4rem; margin:0} 

/* center nav */
.nav-links{display:flex;gap:14px;justify-self:center;align-items:center}
.nav-links a{
  color:#fff;text-decoration:none;font-weight:600;padding:8px 16px;
  border-radius:999px;border:2px solid transparent; transition:var(--transition);
}
.nav-links a.icon-frame{border-color:var(--accent)}
.nav-links a:hover{background:var(--accent); color:#fff; transform:translateY(-3px)}
.nav-links a.active{background:var(--accent); color:#fff}

/* lang btn (left column) */
.lang-switch{justify-self:start}
.lang-switch button{
  border:none;background:var(--accent);color:#fff;padding:8px 14px;border-radius:12px;
  font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(24,184,150,0.12);
}
.lang-switch button:hover{transform:scale(1.03);}

/* responsive navbar for mobile/tablet */
@media (max-width:880px){
  .navbar-container{grid-template-columns: 1fr auto}
  .logo-section{justify-self:center} /* logo centered on mobile */
  .nav-links{grid-column:1/ -1; justify-content:flex-end; margin-top:8px} /* روابط على اليمين */
  header.navbar{height:auto;padding:12px 0}
  /* ت.1: تصغير الشعار على الموبايل */
  .logo-img{width:48px;height:48px;}
  .company-name{font-size:1.2rem;}
}

/* ====== Hero (index) ====== */
.hero-video{
  position:relative;height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.35); transform:scale(1.02)}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,15,20,0.35), rgba(10,15,20,0.6));}
.hero-text{
  position:relative; z-index:3; text-align:center; color:var(--text); padding: 20px; max-width:1100px;
  margin-top:46px; /* navbar spacing */
}
.hero-title{font-size:48px; margin:0 0 10px; color:var(--accent); text-shadow:0 6px 30px rgba(0,0,0,0.45)}
.hero-sub{font-size:20px; opacity:1; margin-bottom:18px; color:#fff}
.hero-cta{display:inline-block;background:var(--accent);color:#fff;padding:12px 26px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 10px 30px rgba(24,184,150,0.12)}
.hero-cta:hover{transform:translateY(-4px);}

/* ====== Sections common ====== */
.container{width:90%;max-width:var(--container);margin:0 auto;padding:0 0 80px}
.section{padding:80px 0}
/* خدماتنا تظهر مركزية أسفل الفيديو */
.section .section-head{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;margin-bottom:24px;text-align:center}
.section .title{font-size:28px;color:var(--accent);margin:0}
.section .subtitle{color:#fff; font-size:15px}

/* ====== About page styling ====== */
.about-hero{padding-top:120px}
.about-grid{display:grid;grid-template-columns: 1fr 420px; gap:34px; align-items:center}
.about-card{
  background:var(--card-bg);
  border:2px solid var(--accent); border-radius:var(--radius); padding:28px; box-shadow:0 12px 30px rgba(0,0,0,0.45)
}
.about-card h3{margin-top:0;color:var(--accent);font-size:20px}
.about-card p{line-height:1.8;color:#fff}

/* image panel */
.about-side{border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.25)}
.about-side img{width:100%;height:100%;display:block;object-fit:cover}

/* features (vision/mission/model) */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.feature{background:rgba(255,255,255,0.02);border-left:6px solid var(--accent);padding:18px;border-radius:12px}
.feature h4{margin:0;color:var(--accent);font-size:16px}
.feature p{color:#fff}

/* mobile about */
@media(max-width:920px){
  .about-grid{grid-template-columns:1fr; padding:0 16px}
  .features{grid-template-columns:1fr}
}

/* ====== Services ====== */
.services-grid{display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.service-card{
  background:rgba(255,255,255,0.02);border-radius:12px;border:2px solid var(--accent); padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25); text-align:center; transition:var(--transition);
}
.service-card:hover{transform:translateY(-8px)}
.service-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:12px}
.service-card h3{color:var(--accent);margin:6px 0}
.service-card p{color:#fff}

/* ====== Contact ====== */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:30px;align-items:start}
.contact-box{
  background:var(--card-bg);
  border:2px solid var(--accent); border-radius:14px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,0.25)
}
.contact-form label{display:block;margin:8px 0 6px;font-weight:600;color:#fff}
.contact-form input,.contact-form textarea{
  width:100%; padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.08); font-size:15px; background:transparent; color:#fff; resize:vertical
}
.contact-form button{
  margin-top:8px;background:var(--accent);color:#fff;padding:12px 18px;border:0;border-radius:10px; cursor:pointer;font-weight:700
}
.map-embed{border-radius:10px;overflow:hidden;border:2px solid var(--accent);margin-top:12px}

/* mobile contact */
@media(max-width:920px){ .contact-grid{grid-template-columns:1fr} }

/* ====== Team Page Styling (New) ====== */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
    text-align: center;
}
.team-member {
    background: var(--card-bg);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: var(--transition);
}
.team-member:hover { transform: translateY(-5px); }
.team-member img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 4px solid var(--accent);
}
.team-member h4 { color: var(--accent); margin: 0 0 5px; font-size: 1.2rem; }
.team-member p { color: #ccc; margin: 0; font-size: 0.9rem; }

/* ====== Footer ====== */
/* قلّل padding الفوتر ليتناسب مع النص */
.site-footer{background:linear-gradient(180deg,var(--dark), #0f1720); color:#fff;padding:12px 0;text-align:center}
.site-footer p{margin:0;color:#d6f2ea;font-size:0.95rem; text-align:center}
/* ت.3: إضافة معلومات التواصل في الفوتر */
.footer-contact-info{margin-top:10px; display:flex; justify-content:center; flex-wrap:wrap; gap:15px; font-size:0.9rem; color:#d6f2ea}
.footer-contact-info span{color:#d6f2ea; margin:0 5px}


/* ====== small helpers ====== */
.center{display:flex;align-items:center;justify-content:center}
.mb-12{margin-bottom:12px}
.round{border-radius:999px}
.shadow-sm{box-shadow:0 6px 18px rgba(0,0,0,0.07)}

/* ====== reveal on scroll ====== */
.reveal{opacity:0; transform:translateY(30px); transition: all .8s cubic-bezier(.2,.9,.3,1)}
.reveal.show{opacity:1; transform:none}

/* ====== animate عند تبديل اللغة — نتحكم بالتحويل عبر JavaScript (see lang.js) ====== */
.slide-anim { transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .5s; transform: none !important; opacity:1 !important; }

/* direction class for EN */
body.en{direction:ltr}
body.en .logo-section{justify-self:start}
body.en .lang-switch{justify-self:end}

/* mobile tweaks for language/layout */
@media (max-width:880px){
  body.en .logo-section{justify-self:center}
  body.en .nav-links{justify-content:flex-start} /* if English on mobile, keep nav on left */
}

/* ensure basic text color */
a, p, li, span { color: #fff; }