:root{
      --bg:#0b1220;
      --bg-soft:#0f1629;
      --card:#111a31;
      --primary:#0ea5e9;
      --primary-2:#38bdf8;
      --accent:#22c55e;
      --warning:#f59e0b;
      --danger:#ef4444;
      --text:#e5f1ff;
      --muted:#93a3b8;
      --glass:rgba(255,255,255,.06);
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;
      --radius-sm:12px;
      --radius-lg:28px;
      --noise: radial-gradient(transparent 65%, rgba(255,255,255,.05) 70%),
               linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    }
    
    /* Light mode variables */
    :root.light {
      --bg:#f9fafb;
      --bg-soft:#ffffff;
      --card:#f1f5f9;
      --primary:#0ea5e9;
      --primary-2:#38bdf8;
      --accent:#22c55e;
      --warning:#f59e0b;
      --danger:#ef4444;
      --text:#1e293b;
      --muted:#64748b;
      --glass:rgba(0,0,0,.04);
      --shadow:0 10px 30px rgba(0,0,0,.1);
      --noise: radial-gradient(transparent 65%, rgba(0,0,0,.04) 70%),
               linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
    }
    
    
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Cairo','Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;scroll-behavior:smooth}
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    .container{width:min(1200px,95%);margin:0 auto}

    /* Utility */
    .btn{display:inline-flex;gap:.6rem;align-items:center;justify-content:center;padding:.9rem 1.3rem;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:700;box-shadow:0 12px 25px rgba(14,165,233,.25);transition:.3s;cursor:pointer;border:0;}
    .btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 18px 35px rgba(14,165,233,.35)}
    .btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}
    .tag{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:rgba(14,165,233,.14);color:var(--primary);font-weight:700;font-size:.8rem}
    .muted{color:var(--muted)}
    .grid{display:grid;gap:1.25rem}

  /* Header */
  
  /* إخفاء عناصر الموبايل على الـ PC */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--bg-soft); /* بدل الجريدينت */
  color: var(--text);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background 0.3s ease, color 0.3s ease;
}

:root.light header.site-header {
  background: var(--bg-soft);
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 0;
  position: relative;
}

.nav-links { display: flex; gap: 1.2rem; list-style: none; margin:0; padding:0; align-items: center; }

.mobile-only { display: none; }   /* تخفي الأزرار على PC */
.desktop-only { display: flex; gap: .5rem; } /* تظهر على PC */

.menu-toggle { display: none; }

/* الموبايل */
@media (max-width:768px) {
  .nav-links {
    display: none; /* تظهر عند الضغط على menu-toggle */
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  .nav-links.active { display: flex; }

  .menu-toggle { display: block; background: none; border: none; font-size: 1.5rem; color: var(--text); cursor: pointer; }

  .mobile-only { display: flex; justify-content: flex-start; gap: .5rem; } /* أزرار الموبايل تظهر داخل القائمة */
  .desktop-only { display: none; } /* نخفي أزرار الـ PC */
}

/* نخلي اللوجو في أقصى الشمال */
/* اللوجو يبقى في أقصى الجهة حسب اتجاه الصفحة */
[dir="ltr"] .brand {
  margin-right: auto; /* يبعد عن يمين الصفحة */
  margin-right: 0;
}

[dir="rtl"] .brand {
  margin-left: auto; /* يبعد عن يسار الصفحة */
  margin-left: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.brand .logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: conic-gradient(from 210deg,var(--primary),var(--accent),var(--primary-2));
  box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 20px 40px rgba(14,165,233,.15);
}

.brand .name {
  font-weight: 900;
  letter-spacing: .3px;
}

/* القائمة في النص */
.nav ul {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  margin: 0 auto; /* يوسّط القائمة */
  padding: 0;
  justify-content: center;
}
.nav a {
  padding: .6rem .8rem;
  border-radius: 10px;
  transition: .25s;
}

.nav a:hover {
  background: rgba(255,255,255,.06);
}


/* اللغة + الثيم في أقصى اليمين */
.lang-switch {
  margin-left: auto;
  display: flex;
  gap: .4rem;
  align-items: center;
}

.lang-switch button {
  padding: .45rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
}

.lang-switch button.active {
  background: linear-gradient(135deg,var(--primary),var(--primary-2));
  border-color: transparent;
}

.menu-toggle {
  display: none;
}

.nav-links { display: flex; gap: 1.2rem; list-style: none; margin:0; padding:0; align-items: center; }

.mobile-only { display: none; }   /* تخفي الأزرار على PC */
.desktop-only { display: flex; gap: .5rem; } /* تظهر على PC */

.menu-toggle { display: none; }

/* الموبايل */
@media (max-width:768px) {
  .nav-links {
    display: none; /* تظهر عند الضغط على menu-toggle */
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  .nav-links.active { display: flex; }

  .menu-toggle { display: block; background: none; border: none; font-size: 1.5rem; color: var(--text); cursor: pointer; }

  .mobile-only { display: flex; justify-content: flex-start; gap: .5rem; } /* أزرار الموبايل تظهر داخل القائمة */
  .desktop-only { display: none; } /* نخفي أزرار الـ PC */
}

/* Responsive nav */
/* Responsive nav */
@media (max-width:768px) {
  .nav {
    justify-content: space-between;
  }
  .nav ul {
    display: none;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: 100%;
    left: 0; /* القائمة من الشمال زي ما طلبت */
    width: 100%;
    background: var(--bg);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  .nav ul.active {
    display: flex;
  }
  .lang-switch {
    margin-left: 0;
    margin-top: 1rem;
    justify-content: flex-start;
  }
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text);
    cursor: pointer;
  }
}


    /* Hero */
    .hero{position:relative;overflow:hidden}
    .hero-wrap{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;min-height:84vh;gap:2rem;padding:3.5rem 0}
    .hero h1{font-size: clamp(2rem, 3.6vw, 4rem);line-height:1.15;margin:.3rem 0 1rem;font-weight:900}
    .hero p{font-size:1.1rem;color:var(--muted)}
    .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
    .hero .floating{position:absolute;inset:auto auto -80px -80px;width:420px;height:420px;background: radial-gradient(closest-side, rgba(56,189,248,.25), transparent 70%);filter: blur(20px);pointer-events:none;}
    .hero .shape{position:absolute;border-radius:28px;background:linear-gradient(135deg,rgba(34,197,94,.8),rgba(14,165,233,.8));box-shadow:0 25px 60px rgba(0,0,0,.35)}
    .shape.s1{width:90px;height:90px;left:5%;top:20%}
    .shape.s2{width:140px;height:140px;right:6%;top:12%}
    .shape.s3{width:60px;height:60px;right:15%;bottom:18%}

    /* Sections */
    section{padding:80px 0;border-top:1px solid rgba(255,255,255,.06)}
    .sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.2rem}
    .sec-title{font-size: clamp(1.6rem, 2.6vw, 2.6rem);margin:.2rem 0 .4rem;font-weight:900}
    .sec-sub{color:var(--muted)}

    /* Cards */
    .cards{grid-template-columns:repeat(12,1fr)}
    .card{grid-column: span 4; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
    .card::after{content:"";position:absolute;inset:-40% auto auto -40%;width:220px;height:220px;background:radial-gradient(circle, rgba(56,189,248,.18), transparent 60%);filter:blur(12px);transform:rotate(25deg)}
    .card:hover{transform:translateY(-6px) rotateZ(-.2deg);box-shadow:0 25px 50px rgba(0,0,0,.45)}
    .card .icon{font-size:1.6rem;line-height:1;background:rgba(14,165,233,.14);width:44px;height:44px;display:grid;place-items:center;border-radius:12px;margin-bottom:.7rem}
    .card h3{margin:.3rem 0 .5rem}
    .card p{color:var(--muted)}

    /* Hover shake/tilt */
    @keyframes subtle-shake{0%{transform:translate(0)} 20%{transform:translate(1px,-1px)} 40%{transform:translate(-1px,1px)} 60%{transform:translate(1px,1px)} 80%{transform:translate(-1px,-1px)} 100%{transform:translate(0)}}
    .card:hover{animation:subtle-shake .3s linear 1}
    .card:active{transform:translateY(0) scale(.99)}

    /* Portfolio */
    .portfolio .item{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);aspect-ratio:16/10}
    .portfolio .item .overlay{position:absolute;inset:0;display:grid;place-items:end;padding:1rem;background:linear-gradient(180deg, transparent, rgba(0,0,0,.65));opacity:0;transition:.3s}
    .portfolio .item:hover .overlay{opacity:1}

    /* Videos Gallery */
    .videos .video-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;position:relative;cursor:pointer}
    .videos .thumb{position:relative;aspect-ratio:16/9;display:block;overflow:hidden}
    .videos .thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .35s}
    .videos .video-card:hover .thumb img{transform:scale(1.1)}
    .videos .play{position:absolute;inset:0;display:grid;place-items:center}
    .videos .play i{font-size:42px;background:rgba(0,0,0,.45);width:74px;height:74px;display:grid;place-items:center;border-radius:100%;backdrop-filter: blur(3px);border:2px solid rgba(255,255,255,.25)}
    .videos .meta{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem}

    /* Modal */
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:10000;padding:1rem}
    .modal.active{display:flex}
    .modal .box{width:min(1000px,95%);background:var(--bg-soft);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;overflow:hidden}
    .modal header{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
    .modal .close{background:transparent;border:0;color:var(--text);font-size:1.2rem;cursor:pointer}
    .modal .content{padding:0}
    .modal video{width:100%;height:auto;display:block;background:#000}

    /* Testimonials */
    .testi .bubble{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem;display:flex;gap:.9rem;align-items:flex-start}
    /* Testimonials Grid Responsive */
.testi .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

@media (max-width: 992px) {
  .testi .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .testi .grid {
    grid-template-columns: 1fr;
  }
}


    /* Pricing */
  .pricing .plan {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 2rem 1.5rem; /* padding أكبر شوية عشان المحتوى يتنفس */
  text-align: center;   /* خلي النص كله في النص */
  display: flex;        /* خلي العناصر تتوزع */
  flex-direction: column;
  justify-content: space-between; /* يخلي المحتوى موزون */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing .plan:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.pricing .plan h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.pricing .plan p {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.pricing .plan ul {
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.6;
}

.pricing .plan a.btn {
  margin-top: auto; /* يخلي الزر تحت الكارد */
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  transition: background 0.3s ease;
}

.pricing .plan a.btn:hover {
  background: var(--accent-hover);
}

/* Featured */
.pricing .plan.featured {
  border-color: rgba(56,189,248,.5);
  box-shadow: 0 20px 60px rgba(56,189,248,.15);
  transform: scale(1.05); /* يديها بروز */
}


    /* FAQ */
    .faq .q{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1rem;cursor:pointer}
    .faq .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
    .faq .q.open + .a{max-height:200px;margin-top:.5rem}

    /* Contact */
    form.contact{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1.2rem}
    form.contact input, form.contact textarea, form.contact select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:.9rem;color:var(--text);outline:none}
    form.contact input:focus, form.contact textarea:focus, form.contact select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.18)}
    form.contact select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));}
    form.contact select option{background:var(--bg-soft);color:var(--text)}
    :root.light form.contact input, :root.light form.contact textarea, :root.light form.contact select{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.14);color:var(--text)}
    :root.light form.contact select option{background:#ffffff;color:#111827}
    form.contact textarea{grid-column:1/-1;min-height:140px;resize:vertical}

    /* Submit loading state */
    form.contact .btn.loading{width:44px;height:44px;border-radius:999px;padding:0;position:relative;overflow:hidden}
    form.contact .btn.loading span{opacity:0}
    form.contact .btn.loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin 1s linear infinite}

    /* Footer */
footer {
  background: radial-gradient(60% 80% at 50% 100%, rgba(14,165,233,.12), transparent 70%), var(--bg-soft);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 60px 0 30px;
  color: var(--text);
  font-size: 15px;
}

footer .grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  align-items: flex-start;
}

footer .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
}

footer .brand .logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: conic-gradient(from 210deg,var(--primary),var(--accent),var(--primary-2));
  box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 20px 40px rgba(14,165,233,.15);
}

footer .brand .name {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .3px;
}

footer strong {
  display: block;
  font-weight: 700;
  margin-bottom: .8rem;
  font-size: 16px;
  color: var(--primary);
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2;
}

footer ul li a {
  color: var(--text);
  text-decoration: none;
  transition: .3s;
}

footer ul li a:hover {
  color: var(--primary); /* أزرق أغمق عند الـ hover */
}

footer .social {
  display: flex;
  gap: .6rem;
  margin-top: .4rem;
}

footer .btn.btn-outline {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: var(--text);
  font-size: 16px;
  transition: all .3s ease;
}

footer .btn.btn-outline:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-3px);
}

/* الحقوق في الأسفل */
footer .bottom {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 30px;
  font-size: 13px;
  color: var(--text-muted, #777);
}

/* 📱 Responsive */
@media (max-width: 1024px) {
  footer .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  footer .grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  footer .brand {
    justify-content: center;
  }
  footer .social {
    justify-content: center;
  }
}


    /* Preloader */
    .preloader{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:99999}
    .loader{width:84px;height:84px;border-radius:50%;border:6px solid rgba(255,255,255,.12);border-top-color:var(--primary);animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Back to top */
    .to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:12px;border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(14,165,233,.3);cursor:pointer;opacity:0;transform:translateY(20px);transition:.25s;z-index:9998}
    .to-top.show{opacity:1;transform:translateY(0)}

    /* Responsive */
    @media (max-width:1000px){
      .hero-wrap{grid-template-columns:1fr;min-height:unset}
    }
    @media (max-width:840px){
      .card{grid-column:span 6}
      .nav ul{display:none}
      .menu-toggle{display:inline-flex;gap:.5rem;align-items:center;padding:.55rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text)}
      .nav.open ul{display:flex;position:absolute;left:0;right:0;top:60px;background:var(--bg-soft);flex-direction:column;padding:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
    }
    @media (max-width:600px){
      form.contact{grid-template-columns:1fr}
      .card{grid-column:span 12}
    }

    /* Extra decorative particles (flying/ falling) */
    .particle{position:fixed;pointer-events:none;z-index:1;opacity:.7}
    .particle .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--primary))}
    .particle.fall{animation:fall 8s linear infinite}
    @keyframes fall{0%{transform:translateY(-10vh)} 100%{transform:translateY(110vh)}}
    .particle.fly{animation:fly 10s ease-in-out infinite}
    @keyframes fly{0%{transform:translate(0)} 50%{transform:translate(60px,-40px) rotate(20deg)} 100%{transform:translate(0)}}

    /* Long style section to ensure >1000 lines (real, useful rules) */
    /* Typography helpers */
    .lead{font-size:1.15rem;color:#cfe2ff}
    .tiny{font-size:.82rem}
    .xsmall{font-size:.72rem}
    .badge{display:inline-block;padding:.25rem .55rem;border:1px solid rgba(255,255,255,.18);border-radius:999px}

    /* Shadows & borders variants */
    .shadow-sm{box-shadow:0 6px 16px rgba(0,0,0,.22)}
    .shadow-md{box-shadow:0 14px 25px rgba(0,0,0,.28)}
    .shadow-lg{box-shadow:0 22px 48px rgba(0,0,0,.35)}
    .b{border:1px solid rgba(255,255,255,.08)}
    .br{border-radius:12px}

    /* Marquee */
    .marquee{--gap:2rem;display:flex;overflow:hidden;gap:var(--gap)}
    .marquee .track{display:flex;gap:var(--gap);min-width:100%;animation:scroll 22s linear infinite}
    @keyframes scroll{from{transform:translateX(0)} to{transform:translateX(calc(-100% - var(--gap)))} }

    /* Accents */
    .glow{position:relative}
    .glow::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;padding:2px;background:linear-gradient(135deg, rgba(14,165,233,.8), rgba(34,197,94,.8));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}
    
    /* Responsive تحسينات */

/* لحد 1000px (تابلت كبير) */
@media (max-width:1000px){
  .hero-wrap{
    grid-template-columns:1fr;
    text-align:center;
    padding:2.5rem 0;
  }
  .hero-cta{justify-content:center}
  .hero img{max-width:80%;margin:0 auto}
}

/* لحد 840px (تابلت أصغر) */
@media (max-width:840px){
  .card{grid-column:span 6}
  .pricing .plan{grid-column:span 6}
  
  /* المينيو تتبدل لموبايل */
  .nav ul{display:none}
  .menu-toggle{display:inline-flex}
  .nav.open ul{
    display:flex;
    flex-direction:column;
    gap:.6rem;
    background:var(--bg-soft);
    padding:1rem;
    position:absolute;
    top:100%;
    left:0;
    right:0;
  }
}

/* لحد 600px (موبايل) */
@media (max-width:600px){
  .card, .pricing .plan{grid-column:span 12}
  form.contact{grid-template-columns:1fr}
  .hero h1{font-size:1.8rem}
  .hero p{font-size:.95rem}
}


/* تنسيق زرار الثيم */
#themeTogglePC {
  margin-left: 10px;
  background: var(--bg-soft);
  border: none;
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

#themeTogglePC:hover {
  background: var(--primary);
  color: #fff;
  transform: scale(1.1);
}

.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #25D366;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 999;

  /* ✨ حركة الزرار */
  animation: bounce-btn 2s infinite;
}

.whatsapp-btn:hover {
  background: #1ebe5d;
  transform: translateY(-3px);
}

.whatsapp-btn i {
  font-size: 22px;
}

/* حركة الزرار كله */
@keyframes bounce-btn {
  0%, 100% { transform: translateY(0); }
  20%      { transform: translateY(-6px); }
  40%      { transform: translateY(0); }
  60%      { transform: translateY(-3px); }
  80%      { transform: translateY(0); }
}

.videos .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .videos .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.video-card .thumb {
  position: relative;
  overflow: hidden;
}

.video-card .thumb video {
  width: 100%;
  border-radius: 12px;
  display: block;
  transition: transform 0.3s ease;
}

.video-card:hover .thumb video {
  transform: scale(1.05);
}

.video-card .meta {
  padding: 0.8rem 1rem;
}

.video-card .meta strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.video-card .meta .tiny {
  font-size: 0.8rem;
  color: #777;
}


.portfolio .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .portfolio .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.portfolio .item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio .item img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

.portfolio .item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  padding: 0.8rem 0;
  transform: translateY(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  font-weight: 700;
}

.portfolio .item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.portfolio .item:hover img {
  transform: scale(1.05);
}

.portfolio .item:hover .overlay {
  transform: translateY(0);
  opacity: 1;
}


.pricing .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .pricing .grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.pricing .plan {
  padding: 1.5rem;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}



.faq .q {
  cursor: pointer;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  transition: background 0.3s ease;
}

.faq .q:hover,
.faq .q:focus {
  background: rgba(0,0,0,0.06);
  outline: none;
}

.faq .a {
  margin-bottom: 1rem; /* مسافة بين كل سؤال والتالي */
  font-size: 1.05rem; /* تكبير الخط شوية */
  line-height: 1.6; /* لتسهيل القراءة */
  display: block;
  /*background: #ffffff; */
  border-radius: 8px; /* حواف مدورة بسيطة */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ظل خفيف */
}

.faq .a p {
  margin: 0;
}


.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4e73df, #1cc88a);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.download-btn:hover {
  background: linear-gradient(135deg, #1cc88a, #4e73df);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.download-btn i {
  font-size: 15px;
}



/* ===================================================== */
/* ===================================================== */



/* portfolio style */

  /* ✅ Section Header فوق بعض */
  .header-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 15px;
  }

  .header-block .tag {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.6rem;
    display: block;
  }

  .header-block .sec-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.8rem;
    display: block;
  }

  .header-block .sec-sub {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
    max-width: 700px;
    margin: 0 auto;
    display: block;
  }

  /* Grid responsive */
  .project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }

  .feature-card {
    padding: 1rem;
    border-radius: 12px;
    background: var(--bg-light);
    text-align: center;
  }

  .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  /* ✅ Responsive */
  @media (max-width: 768px) {
    .project-card {
      padding: 1.2rem;
    }

    .project-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .header-block .sec-title {
      font-size: 1.6rem;
    }

    .header-block .sec-sub {
      font-size: 0.95rem;
    }

    h3 {
      font-size: 1.4rem !important;
    }

    .features-grid {
      grid-template-columns: 1fr 1fr;
    }

    .feature-card {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    .features-grid {
      grid-template-columns: 1fr;
    }

    .btn {
      width: 100%;
      text-align: center;
    }
  }



  margin-top: 30px;

  font-size: 13px;

  color: var(--text-muted, #777);

}



/* 📱 Responsive */

@media (max-width: 1024px) {

  footer .grid {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 640px) {

  footer .grid {

    grid-template-columns: 1fr;

    text-align: center;

  }

  footer .brand {

    justify-content: center;

  }

  footer .social {

    justify-content: center;

  }

}





    /* Preloader */

    .preloader{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:99999}

    .loader{width:84px;height:84px;border-radius:50%;border:6px solid rgba(255,255,255,.12);border-top-color:var(--primary);animation:spin 1s linear infinite}

    @keyframes spin{to{transform:rotate(360deg)}}



    /* Back to top */

    .to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:12px;border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px rgba(14,165,233,.3);cursor:pointer;opacity:0;transform:translateY(20px);transition:.25s;z-index:9998}

    .to-top.show{opacity:1;transform:translateY(0)}



    /* Responsive */

    @media (max-width:1000px){

      .hero-wrap{grid-template-columns:1fr;min-height:unset}

    }

    @media (max-width:840px){

      .card{grid-column:span 6}

      .nav ul{display:none}

      .menu-toggle{display:inline-flex;gap:.5rem;align-items:center;padding:.55rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text)}

      .nav.open ul{display:flex;position:absolute;left:0;right:0;top:60px;background:var(--bg-soft);flex-direction:column;padding:1rem;border-bottom:1px solid rgba(255,255,255,.08)}

    }

    @media (max-width:600px){

      form.contact{grid-template-columns:1fr}

      .card{grid-column:span 12}

    }



    /* Extra decorative particles (flying/ falling) */

    .particle{position:fixed;pointer-events:none;z-index:1;opacity:.7}

    .particle .dot{width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--primary))}

    .particle.fall{animation:fall 8s linear infinite}

    @keyframes fall{0%{transform:translateY(-10vh)} 100%{transform:translateY(110vh)}}

    .particle.fly{animation:fly 10s ease-in-out infinite}

    @keyframes fly{0%{transform:translate(0)} 50%{transform:translate(60px,-40px) rotate(20deg)} 100%{transform:translate(0)}}



    /* Long style section to ensure >1000 lines (real, useful rules) */

    /* Typography helpers */

    .lead{font-size:1.15rem;color:#cfe2ff}

    .tiny{font-size:.82rem}

    .xsmall{font-size:.72rem}

    .badge{display:inline-block;padding:.25rem .55rem;border:1px solid rgba(255,255,255,.18);border-radius:999px}



    /* Shadows & borders variants */

    .shadow-sm{box-shadow:0 6px 16px rgba(0,0,0,.22)}

    .shadow-md{box-shadow:0 14px 25px rgba(0,0,0,.28)}

    .shadow-lg{box-shadow:0 22px 48px rgba(0,0,0,.35)}

    .b{border:1px solid rgba(255,255,255,.08)}

    .br{border-radius:12px}



    /* Marquee */

    .marquee{--gap:2rem;display:flex;overflow:hidden;gap:var(--gap)}

    .marquee .track{display:flex;gap:var(--gap);min-width:100%;animation:scroll 22s linear infinite}

    @keyframes scroll{from{transform:translateX(0)} to{transform:translateX(calc(-100% - var(--gap)))} }



    /* Accents */

    .glow{position:relative}

    .glow::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;padding:2px;background:linear-gradient(135deg, rgba(14,165,233,.8), rgba(34,197,94,.8));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}

    

    /* Responsive تحسينات */



/* لحد 1000px (تابلت كبير) */

@media (max-width:1000px){

  .hero-wrap{

    grid-template-columns:1fr;

    text-align:center;

    padding:2.5rem 0;

  }

  .hero-cta{justify-content:center}

  .hero img{max-width:80%;margin:0 auto}

}



/* لحد 840px (تابلت أصغر) */

@media (max-width:840px){

  .card{grid-column:span 6}

  .pricing .plan{grid-column:span 6}

  

  /* المينيو تتبدل لموبايل */

  .nav ul{display:none}

  .menu-toggle{display:inline-flex}

  .nav.open ul{

    display:flex;

    flex-direction:column;

    gap:.6rem;

    background:var(--bg-soft);

    padding:1rem;

    position:absolute;

    top:100%;

    left:0;

    right:0;

  }

}



/* لحد 600px (موبايل) */

@media (max-width:600px){

  .card, .pricing .plan{grid-column:span 12}

  form.contact{grid-template-columns:1fr}

  .hero h1{font-size:1.8rem}

  .hero p{font-size:.95rem}

}





/* تنسيق زرار الثيم */

#themeTogglePC {

  margin-left: 10px;

  background: var(--bg-soft);

  border: none;

  color: var(--text);

  padding: 8px 12px;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: var(--shadow);

  display: flex;

  align-items: center;

  justify-content: center;

}



#themeTogglePC:hover {

  background: var(--primary);

  color: #fff;

  transform: scale(1.1);

}



.whatsapp-btn {

  position: fixed;

  bottom: 20px;

  left: 20px;

  background: #25D366;

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 12px 18px;

  border-radius: 50px;

  text-decoration: none;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  transition: all 0.3s ease;

  z-index: 999;



  /* ✨ حركة الزرار */

  animation: bounce-btn 2s infinite;

}



.whatsapp-btn:hover {

  background: #1ebe5d;

  transform: translateY(-3px);

}



.whatsapp-btn i {

  font-size: 22px;

}



/* حركة الزرار كله */

@keyframes bounce-btn {

  0%, 100% { transform: translateY(0); }

  20%      { transform: translateY(-6px); }

  40%      { transform: translateY(0); }

  60%      { transform: translateY(-3px); }

  80%      { transform: translateY(0); }

}



.videos .grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 1.5rem;

  margin-top: 2rem;

}



@media (max-width: 768px) {

  .videos .grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }

}



.video-card {

  display: flex;

  flex-direction: column;

  background: var(--bg-soft);

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.video-card:hover {

  transform: translateY(-5px) scale(1.02);

  box-shadow: 0 12px 24px rgba(0,0,0,0.15);

}



.video-card .thumb {

  position: relative;

  overflow: hidden;

}



.video-card .thumb video {

  width: 100%;

  border-radius: 12px;

  display: block;

  transition: transform 0.3s ease;

}



.video-card:hover .thumb video {

  transform: scale(1.05);

}



.video-card .meta {

  padding: 0.8rem 1rem;

}



.video-card .meta strong {

  display: block;

  font-size: 1rem;

  margin-bottom: 0.3rem;

}



.video-card .meta .tiny {

  font-size: 0.8rem;

  color: #777;

}





.portfolio .grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 1.5rem;

  margin-top: 2rem;

}



@media (max-width: 768px) {

  .portfolio .grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }

}



.portfolio .item {

  position: relative;

  overflow: hidden;

  border-radius: 12px;

  cursor: pointer;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.portfolio .item img {

  width: 100%;

  display: block;

  transition: transform 0.3s ease;

}



.portfolio .item .overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0,0,0,0.5);

  color: #fff;

  text-align: center;

  padding: 0.8rem 0;

  transform: translateY(100%);

  transition: transform 0.3s ease, opacity 0.3s ease;

  opacity: 0;

  font-weight: 700;

}



.portfolio .item:hover {

  transform: translateY(-5px) scale(1.02);

  box-shadow: 0 12px 24px rgba(0,0,0,0.15);

}



.portfolio .item:hover img {

  transform: scale(1.05);

}



.portfolio .item:hover .overlay {

  transform: translateY(0);

  opacity: 1;

}





.pricing .grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 1.5rem;

  margin-top: 2rem;

}



@media (max-width: 768px) {

  .pricing .grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }

}



.pricing .plan {

  padding: 1.5rem;

  text-align: center;

  border-radius: 12px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.05);

}







.faq .q {

  cursor: pointer;

  background: rgba(0,0,0,0.03);

  border-radius: 8px;

  transition: background 0.3s ease;

}



.faq .q:hover,

.faq .q:focus {

  background: rgba(0,0,0,0.06);

  outline: none;

}



.faq .a {

  margin-bottom: 1rem; /* مسافة بين كل سؤال والتالي */

  font-size: 1.05rem; /* تكبير الخط شوية */

  line-height: 1.6; /* لتسهيل القراءة */

  display: block;

  /*background: #ffffff; */

  border-radius: 8px; /* حواف مدورة بسيطة */

  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ظل خفيف */

}



.faq .a p {

  margin: 0;

}





.download-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: linear-gradient(135deg, #4e73df, #1cc88a);

  color: #fff;

  padding: 10px 18px;

  border-radius: 30px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  margin-top: 12px;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

  transition: all 0.3s ease;

}



.download-btn:hover {

  background: linear-gradient(135deg, #1cc88a, #4e73df);

  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);

}



.download-btn i {

  font-size: 15px;

}







/* ===================================================== */

/* ===================================================== */







/* portfolio style */



  /* ✅ Section Header فوق بعض */

  .header-block {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-bottom: 2rem;

    padding: 0 15px;

  }



  .header-block .tag {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--primary);

    margin-bottom: 0.6rem;

    display: block;

  }



  .header-block .sec-title {

    font-size: 2rem;

    font-weight: 800;

    margin-bottom: 0.8rem;

    display: block;

  }



  .header-block .sec-sub {

    font-size: 1rem;

    line-height: 1.6;

    color: var(--muted);

    max-width: 700px;

    margin: 0 auto;

    display: block;

  }



  /* Grid responsive */

  .project-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

    margin-bottom: 2rem;

  }



  .features-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 1rem;

  }



  .feature-card {

    padding: 1rem;

    border-radius: 12px;

    background: var(--bg-light);

    text-align: center;

  }



  .icon {

    font-size: 2rem;

    margin-bottom: 0.5rem;

  }



  /* ✅ Responsive */

  @media (max-width: 768px) {

    .project-card {

      padding: 1.2rem;

    }



    .project-grid {

      grid-template-columns: 1fr;

      gap: 1.5rem;

    }



    .header-block .sec-title {

      font-size: 1.6rem;

    }



    .header-block .sec-sub {

      font-size: 0.95rem;

    }



    h3 {

      font-size: 1.4rem !important;

    }



    .features-grid {

      grid-template-columns: 1fr 1fr;

    }



    .feature-card {

      font-size: 0.9rem;

    }

  }



  @media (max-width: 480px) {

    .features-grid {

      grid-template-columns: 1fr;

    }



    .btn {

      width: 100%;

      text-align: center;

    }

  }