/* ══════════════════════════════════════════
   EVENT ZONE — Custom CSS (on Bootstrap 5 RTL)
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   PALETTE: Deep Midnight Navy + Warm Gold
   ══════════════════════════════════════════ */

/* ── LIGHT MODE ── */
:root {
  /* Surfaces */
  --ez-bg:       #F8F5F0;          /* دفئ كريمي ناعم */
  --ez-bg2:      #FFFFFF;
  --ez-bg3:      #F0EBE1;          /* كريم أغمق قليلاً */

  /* Text */
  --ez-text:     #1A1612;          /* بني داكن دافئ */
  --ez-muted:    #7A6E65;          /* رمادي دافئ */

  /* Brand Gold */
  --ez-gold:     #C9961A;          /* ذهبي دافئ واضح */
  --ez-gold2:    #E8B84B;
  --ez-grad:     linear-gradient(135deg,#C9961A 0%,#E8B84B 100%);

  /* UI */
  --ez-border:   rgba(180,140,40,.15);
  --ez-card:     #FFFFFF;
  --ez-nav-bg:   rgba(248,245,240,.96);
  --ez-shadow:   0 8px 40px rgba(180,130,20,.10);
  --ez-radius:   16px;
  --ez-trans:    all .3s cubic-bezier(.4,0,.2,1);
  --ez-font:     'Tajawal', sans-serif;
}

/* ── DARK MODE (Default) ── */
.dark-mode {
  /* Surfaces — Deep Navy, ليست سوداء صافية */
  --ez-bg:       #0F1420;          /* كحلي داكن ناعم */
  --ez-bg2:      #161D2E;          /* سطح الكروت */
  --ez-bg3:      #1C2438;          /* سطح أعمق */

  /* Text — دافئ مش أبيض صافي */
  --ez-text:     #EDE8DF;          /* كريمي دافئ */
  --ez-muted:    #8C9AB5;          /* رمادي مزرق ناعم */

  /* Brand Gold — أكثر توهجاً في الداكن */
  --ez-gold:     #D4A843;          /* ذهبي دافئ مضيء */
  --ez-gold2:    #F2C96A;
  --ez-grad:     linear-gradient(135deg,#D4A843 0%,#F2C96A 100%);

  /* UI */
  --ez-border:   rgba(212,168,67,.12);
  --ez-card:     rgba(22,29,46,.90);
  --ez-nav-bg:   rgba(12,18,30,.96);
  --ez-shadow:   0 8px 40px rgba(0,0,0,.40);
}

/* ── BASE ── */
body > footer, body > .float-bar, .ez-footer { position:relative; z-index:2; }
.ez-logo-dark  { display:none; }
.ez-logo-light { display:block; }
.dark-mode .ez-logo-light { display:none; }
.dark-mode .ez-logo-dark  { display:block; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; }
body {
  font-family:var(--ez-font); background:var(--ez-bg); color:var(--ez-text);
  direction:rtl; overflow-x:hidden; transition:background .4s,color .4s; line-height:1.75;
}
a { text-decoration:none; color:inherit; transition:var(--ez-trans); }
img { max-width:100%; display:block; }
section { padding:90px 0; }
.dark-mode #particles-js { background:var(--ez-bg); }

/* ── PARTICLES ── */
#particles-js {
  position:fixed; inset:0; z-index:0; background:var(--ez-bg);
  pointer-events:none;
}
.site-wrap { position:relative; z-index:1; }

/* ── GRADIENT TEXT ── */
.grad-text {
  background:var(--ez-grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── SECTION LABEL ── */
.ez-label {
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--ez-gold);
  border:1px solid var(--ez-border); padding:4px 16px; border-radius:50px;
  margin-bottom:14px;
}
.section-title h2 { font-size:clamp(1.9rem,4vw,2.8rem); font-weight:800; }

/* ── BUTTONS ── */
.btn-ez-primary {
  background:var(--ez-grad); color:#fff; border:none;
  padding:13px 32px; border-radius:50px; font-weight:700;
  font-family:var(--ez-font); font-size:.95rem;
  box-shadow:0 8px 25px rgba(184,148,26,.25);
  transition:var(--ez-trans); display:inline-flex; align-items:center; gap:8px;
}
.btn-ez-primary:hover { transform:translateY(-3px); box-shadow:0 14px 35px rgba(184,148,26,.4); color:#fff; }
.btn-ez-outline {
  background:transparent; color:var(--ez-gold); border:2px solid var(--ez-gold);
  padding:11px 30px; border-radius:50px; font-weight:700;
  font-family:var(--ez-font); font-size:.95rem;
  transition:var(--ez-trans); display:inline-flex; align-items:center; gap:8px;
}
.btn-ez-outline:hover { background:var(--ez-gold); color:#fff; transform:translateY(-3px); }

/* ── NAVBAR ── */
.ez-navbar {
  position:fixed; top:0; inset-inline:0; z-index:1000;
  padding:18px 0; transition:var(--ez-trans);
}
.ez-navbar.scrolled {
  background:var(--ez-nav-bg); backdrop-filter:blur(20px);
  box-shadow:var(--ez-shadow); border-bottom:1px solid var(--ez-border);
  padding:10px 0;
}
.nav-logo { font-size:1.6rem; font-weight:900; letter-spacing:2px; }
.nav-logo img { height:60px; width:auto; object-fit:contain; max-width:180px; }
.ez-navbar .nav-link {
  color:var(--ez-muted) !important; font-weight:600; font-size:.9rem;
  position:relative; padding:6px 0 !important; margin:0 4px;
}
.ez-navbar .nav-link::after {
  content:''; position:absolute; bottom:-2px; right:0;
  width:0; height:2px; background:var(--ez-grad); transition:width .3s;
}
.ez-navbar .nav-link:hover, .ez-navbar .nav-link.active { color:var(--ez-text) !important; }
.ez-navbar .nav-link:hover::after, .ez-navbar .nav-link.active::after { width:100%; }
.btn-nav-cta {
  background:var(--ez-grad); color:#fff !important; border-radius:50px;
  padding:8px 22px !important; font-weight:700 !important;
}
.btn-nav-cta::after { display:none !important; }
.theme-toggle {
  width:38px; height:38px; border-radius:50%; border:1px solid var(--ez-border);
  background:var(--ez-card); color:var(--ez-gold); font-size:.9rem;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:var(--ez-trans);
}
.theme-toggle:hover { background:var(--ez-grad); color:#fff; border-color:transparent; }

/* ── HERO ── */
.ez-hero {
  min-height:100vh; display:flex; align-items:center;
  padding-top:120px; padding-bottom:80px; text-align:center;
}
.hero-greeting { font-size:.95rem; letter-spacing:3px; color:var(--ez-gold); font-weight:700; text-transform:uppercase; margin-bottom:12px; }
.hero-name { font-size:clamp(3rem,9vw,6rem); font-weight:900; line-height:1.05; margin-bottom:14px; }
.hero-typing { font-size:clamp(1.1rem,3vw,1.7rem); color:var(--ez-muted); margin-bottom:20px; min-height:2.5rem; }
.hero-desc { color:var(--ez-muted); font-size:1.05rem; max-width:620px; margin:0 auto 40px; line-height:1.9; }
.hero-socials { display:flex; gap:10px; justify-content:center; margin-top:32px; }
.hero-socials a {
  width:42px; height:42px; border-radius:50%; border:1px solid var(--ez-border);
  background:var(--ez-card); display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:var(--ez-trans);
}
.hero-socials a:hover { background:var(--ez-grad); color:#fff; border-color:transparent; transform:translateY(-4px); }

/* ── STATS ── */
.ez-stats {
  background:var(--ez-bg2); border-top:1px solid var(--ez-border);
  border-bottom:1px solid var(--ez-border); padding:50px 0;
}
.stat-box { text-align:center; padding:10px; }
.stat-num { font-size:2.8rem; font-weight:900; }
.stat-suffix { font-size:2.2rem; font-weight:900; }
.stat-label { color:var(--ez-muted); font-size:.95rem; margin-top:4px; }
.stat-box + .stat-box { border-inline-start:1px solid var(--ez-border); }

/* ── ABOUT ── */
.ez-about { background:var(--ez-bg); }
.about-img-wrap { position:relative; border-radius:var(--ez-radius); overflow:hidden; box-shadow:var(--ez-shadow); }
.about-img-wrap img { width:100%; height:480px; object-fit:cover; }
.about-img-placeholder {
  width:100%; height:460px; background:var(--ez-bg3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; border-radius:var(--ez-radius);
}
.about-img-placeholder i { font-size:5rem; color:var(--ez-gold); }
.feature-pill {
  display:flex; align-items:flex-start; gap:12px;
  background:var(--ez-bg2); border:1px solid var(--ez-border);
  border-radius:12px; padding:14px 16px; transition:var(--ez-trans);
}
.feature-pill:hover { border-color:var(--ez-gold); transform:translateY(-2px); box-shadow:var(--ez-shadow); }
.feature-pill i { color:var(--ez-gold); font-size:1.1rem; margin-top:2px; flex-shrink:0; }
.feature-pill h6 { font-size:.88rem; font-weight:700; margin-bottom:2px; }
.feature-pill p { font-size:.8rem; color:var(--ez-muted); line-height:1.5; margin:0; }

/* ── SERVICE BLOCKS ── */
.svc-blocks-wrapper { display:flex; flex-direction:column; gap:0; }
.svc-block {
  background:var(--ez-bg2);
  border:1px solid var(--ez-border);
  border-radius:var(--ez-radius);
  padding:40px 36px;
  margin-bottom:24px;
  transition:var(--ez-trans);
}
.svc-block:hover { border-color:var(--ez-gold); box-shadow:var(--ez-shadow); }
.svc-block-head { margin-bottom:24px; }
.svc-title {
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:800;
  margin-bottom:14px;
  font-style:italic;
}
.svc-points {
  list-style:disc;
  padding-right:24px;
  margin:0;
}
.svc-points li {
  color:var(--ez-text);
  font-size:1.05rem;
  line-height:1.8;
  font-weight:500;
  margin-bottom:6px;
}
.svc-img-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.svc-img-row img {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  transition:transform .4s;
}
/* ── SERVICE IMAGE GRID ── */
.svc-img-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.svc-img-item {
  overflow:hidden;
  border-radius:12px;
  cursor:pointer;
  position:relative;
}
.svc-img-item img {
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
  border-radius:12px;
}
.svc-img-item:hover img { transform:scale(1.05); }
.svc-img-item::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.3),transparent);
  border-radius:12px;
  opacity:0;
  transition:opacity .3s;
}
.svc-img-item:hover::after { opacity:1; }

/* MOBILE: 2-col grid + touch-friendly */
@media(max-width:767px){
  .svc-block { padding:20px 14px; margin-bottom:14px; }
  .svc-title { font-size:1.2rem; }
  .svc-points li { font-size:.9rem; }
  .svc-img-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .svc-img-item img { height:140px; border-radius:10px; }
  /* Touch active state */
  .svc-img-item:active img { transform:scale(0.97); opacity:.85; }
}
@media(min-width:768px) and (max-width:991px){
  .svc-img-grid { grid-template-columns:repeat(3,1fr); }
  .svc-img-item img { height:180px; }
}

/* ── PORTFOLIO MOBILE INTERACTIVE ── */
@media(max-width:576px){
  .port-card { border-radius:12px; }
  .port-img-wrap img { max-height:160px; }
  .port-body { padding:12px 10px; }
  .port-body h6 { font-size:.85rem; }
  .port-body p { font-size:.78rem; }
  /* Touch tap effect */
  .port-card:active { transform:scale(0.97); box-shadow:none; }
}
/* Keep old service card for fallback */
.service-card { background:var(--ez-bg); border:1px solid var(--ez-border); border-radius:var(--ez-radius); padding:36px 28px; text-align:center; transition:var(--ez-trans); height:100%; }
.service-card:hover { border-color:var(--ez-gold); transform:translateY(-8px); box-shadow:var(--ez-shadow); }
.service-icon { font-size:2.8rem; margin-bottom:18px; }
.service-thumb-wrap { width:100%; background:var(--ez-bg3); border-radius:12px; margin:0 0 18px; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:180px; }
.service-thumb { width:100%; height:auto; max-height:240px; object-fit:contain; display:block; }
.service-card h5 { font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.service-card p { color:var(--ez-muted); font-size:.9rem; line-height:1.8; margin:0; }

/* ── PORTFOLIO ── */
.ez-portfolio { background:var(--ez-bg); }
.port-card {
  background:var(--ez-bg2); border:1px solid var(--ez-border);
  border-radius:var(--ez-radius); overflow:hidden; transition:var(--ez-trans); height:100%;
}
.port-card:hover { border-color:var(--ez-gold); transform:translateY(-8px); box-shadow:var(--ez-shadow); }
.port-img-wrap { overflow:hidden; background:var(--ez-bg3); }
.port-img-wrap img { width:100%; height:auto; max-height:320px; object-fit:contain; transition:transform .5s; display:block; margin:0 auto; }
@media(max-width:576px){
  .port-img-wrap img { max-height:260px; }
  .port-card { margin-bottom:0; }
}
.port-card:hover .port-img-wrap img { transform:scale(1.06); }
.port-placeholder { height:200px; background:var(--ez-bg3); display:flex; align-items:center; justify-content:center; font-size:3.5rem; }
.port-body { padding:20px 18px; }
.port-body h6 { font-size:1rem; font-weight:700; margin-bottom:6px; }
.port-body p { color:var(--ez-muted); font-size:.85rem; margin:0; }

/* ── TESTIMONIALS ── */
.ez-testi { background:var(--ez-bg2); }
.testi-card {
  background:var(--ez-bg); border:1px solid var(--ez-border);
  border-radius:var(--ez-radius); padding:32px 28px; transition:var(--ez-trans); height:100%;
}
.testi-card:hover { border-color:var(--ez-gold); box-shadow:var(--ez-shadow); }
.testi-quote { font-size:2rem; color:var(--ez-gold); opacity:.3; margin-bottom:14px; }
.testi-card p { font-size:.97rem; font-style:italic; line-height:1.9; margin-bottom:20px; }
.testi-name { font-weight:700; color:var(--ez-gold); font-size:.95rem; }
.testi-role { font-size:.8rem; color:var(--ez-muted); }

/* ── FAQ ── */
.ez-faq { background:var(--ez-bg); }
.ez-accordion .accordion-item {
  background:var(--ez-bg2); border:1px solid var(--ez-border) !important;
  border-radius:14px !important; margin-bottom:10px; overflow:hidden;
}
.ez-accordion .accordion-button {
  background:var(--ez-bg2) !important; color:var(--ez-text) !important;
  font-family:var(--ez-font); font-weight:700; font-size:1rem;
  box-shadow:none !important;
}
.ez-accordion .accordion-button:not(.collapsed) { color:var(--ez-gold) !important; }
.ez-accordion .accordion-button::after { filter:none; }
.ez-accordion .accordion-body {
  background:var(--ez-bg2); color:var(--ez-muted);
  font-family:var(--ez-font); line-height:1.9;
}

/* ── CONTACT ── */
.ez-contact { background:var(--ez-bg2); }
.info-block {
  display:flex; align-items:center; gap:16px;
  background:var(--ez-bg); border:1px solid var(--ez-border);
  border-radius:14px; padding:18px 22px; transition:var(--ez-trans);
}
.info-block:hover { border-color:var(--ez-gold); transform:translateX(-4px); }
.info-block i { font-size:1.5rem; flex-shrink:0; }
.info-block h6 { font-size:.78rem; color:var(--ez-muted); margin-bottom:2px; font-weight:500; }
.info-block p, .info-block a { font-size:.92rem; font-weight:700; color:var(--ez-text); margin:0; }
.info-block a:hover { color:var(--ez-gold); }
.ez-form { background:var(--ez-bg); border:1px solid var(--ez-border); border-radius:var(--ez-radius); padding:36px; }
.ez-form .form-control, .ez-form .form-select {
  background:var(--ez-bg3) !important; border:1px solid var(--ez-border) !important;
  color:var(--ez-text) !important; font-family:var(--ez-font);
  border-radius:10px !important; padding:13px 16px !important;
}
.ez-form .form-control:focus, .ez-form .form-select:focus {
  border-color:var(--ez-gold) !important; box-shadow:0 0 0 3px rgba(184,148,26,.1) !important;
}
.ez-form .form-control::placeholder { color:var(--ez-muted); }
.ez-map { border-radius:var(--ez-radius); overflow:hidden; border:1px solid var(--ez-border); }
.ez-map iframe { width:100%; height:300px; display:block; border:none; }

/* ── FOOTER ── */
.ez-footer { background:var(--ez-bg); position:relative; z-index:2; }
.footer-heading {
  font-size:.8rem; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--ez-gold); margin-bottom:18px; padding-bottom:10px;
  border-bottom:1px solid var(--ez-border);
}
.footer-links { padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a {
  color:var(--ez-muted); font-size:.9rem; transition:var(--ez-trans);
  display:flex; align-items:center; gap:6px;
}
.footer-links a::before { content:'←'; font-size:.7rem; color:var(--ez-gold); opacity:0; transition:var(--ez-trans); }
.footer-links a:hover { color:var(--ez-gold); padding-right:6px; }
.footer-links a:hover::before { opacity:1; }
.footer-contact-item {
  display:flex; align-items:center; gap:10px;
  color:var(--ez-muted); font-size:.88rem; transition:var(--ez-trans);
}
.footer-contact-item:hover { color:var(--ez-gold); }
.footer-contact-item i { font-size:1rem; flex-shrink:0; width:18px; }
.ez-social-btn {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--ez-border);
  background:var(--ez-bg2); display:flex; align-items:center; justify-content:center;
  font-size:.95rem; color:var(--ez-text); transition:var(--ez-trans);
}
.ez-social-btn:hover { background:var(--ez-grad); color:#fff; border-color:transparent; transform:translateY(-4px); }
.footer-copyright {
  background:var(--ez-bg2); border-top:1px solid var(--ez-border);
  padding:18px 0; font-size:.85rem; color:var(--ez-muted);
  position:relative; z-index:2;
}

/* ── FLOATING PLUGIN (All Devices) ── */
.ez-float-plugin {
  position:fixed;
  bottom:24px;
  left:20px;
  z-index:9999;
  display:flex;
  flex-direction:row;
  gap:10px;
}
.ez-float-btn {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:50px;
  font-size:1rem;
  font-weight:700;
  font-family:var(--ez-font);
  color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:var(--ez-trans);
  text-decoration:none;
  white-space:nowrap;
}
.ez-float-btn:hover { transform:translateY(-4px); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.ez-float-btn.wa   { background:#25D366; }
.ez-float-btn.call { background:var(--ez-gold); }
@media(max-width:480px){
  .ez-float-plugin { left:50%; transform:translateX(-50%); bottom:16px; }
  .ez-float-btn span { display:none; }
  .ez-float-btn { padding:12px; border-radius:50%; font-size:1.2rem; }
}
/* FLOAT BAR (Mobile bottom) */
.float-bar {
  display:none;
  position:fixed; bottom:0; inset-inline:0; z-index:999;
  background:var(--ez-nav-bg); backdrop-filter:blur(20px);
  border-top:1px solid var(--ez-border); padding:10px 16px; gap:10px;
}
.float-bar a {
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:7px; padding:11px; border-radius:12px;
  font-weight:700; font-family:var(--ez-font); font-size:.88rem;
}
.wa-btn { background:#25D366; color:#fff !important; }
.call-btn { background:var(--ez-grad); color:#fff !important; }

/* ── RESPONSIVE ── */
@media(max-width:991px){
  section { padding:70px 0; }
  .stat-box + .stat-box { border-inline-start:none; border-top:1px solid var(--ez-border); }
}
@media(max-width:768px){
  .ez-navbar { padding:12px 0; }
  section { padding:60px 0; }
  .float-bar { display:flex; }
  body { padding-bottom:72px; }
  .ez-form { padding:24px 18px; }
  .hero-name { font-size:clamp(2.4rem,10vw,4rem); }
}
@media(max-width:480px){
  .hero-name { font-size:2.2rem; }
}