:root {
  --bg:#0b0f1a;
  --text:#e6eefc;
  --accent1:linear-gradient(135deg,#6b8cff,#7a5cff);
}

body {
  margin:0;
  font-family:'Cairo',sans-serif;
  color:var(--text);
  line-height:1.5;
  background:radial-gradient(circle at 10% 10%,#08102a 0%,#050616 35%,#020312 100%);
}

.container {width:92%;max-width:1200px;margin:0 auto;}

/* NAV */
.nav {padding:18px 0;position:sticky;top:0;z-index:30;background:transparent;}
.nav-inner {display:flex;align-items:center;justify-content:space-between;}
.brand {display:flex;align-items:center;gap:12px;}
.logo {width:42px;height:42px;object-fit:contain;}
.brand-name {font-weight:750;color:#fff;}
.nav-actions {display:flex;gap:12px;align-items:center;}
.nav-link {color:rgba(255,255,255,0.85);text-decoration:none;font-weight:500;}
.btn {background:var(--accent1);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;}
.btn.ghost {background:transparent;border:1px solid rgba(255,255,255,0.06);}
.btn.small {padding:8px 12px;font-size:0.9rem;}

/* HERO */
.hero {padding:60px 0;position:relative;overflow:hidden;border-radius: 20px;}
.hero-left {position:relative;z-index:2;padding-right: 20px;}
.hero-ctas {display:flex;gap:10px;margin-bottom:20px;padding-right: 20px;}
.hero-stats {display:flex;gap:18px;margin-top:18px;list-style:none;padding:0;}
.hero-stats li {background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));padding:10px 14px;border-radius:12px;text-align:center;}
.hero-stats strong {display:block;font-size:1.1rem;}

/* Hero Background Image */
.hero-bg-image {
  border-radius: 20px;
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background:url('imagesAzraq/الوقت.png') center/cover no-repeat;
  opacity:0.25;
  animation: bgFloat 30s ease-in-out infinite alternate;
  z-index:1;
}
@keyframes bgFloat {
  0%{transform:translate(0,0);}
  25%{transform:translate(20px,-10px);}
  50%{transform:translate(0,20px);}
  75%{transform:translate(-20px,-10px);}
  100%{transform:translate(0,0);}
}

/* SERVICES */
.section {padding:60px 0;}
.section-title {font-size:1.6rem;margin-bottom:10px;color:#fff;}
.services-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px;}
.service {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 14px;
  padding: 0px;
  text-align: right;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
  opacity: 1; /* نخليها ظاهرة عشان hover يشتغل مباشرة */
  cursor: pointer;
}

.service:hover {
  transform: translateY(-10px); /* يرفع البطاقة */
  box-shadow: 0 22px 50px rgba(1,1,132,0.65); /* ظل أكبر عند الرفع */
  opacity: 0.95; /* fade خفيف */
}

.service img {width:100%;height:140px;object-fit:cover;border-radius:10px;margin-bottom:10px;}
.service h3 {margin:0 0 6px;color:#eaf1ff;}
.service p {opacity:0.85;color:rgba(255,255,255,0.8);}

/* PACKAGES */
.dark-section {background:linear-gradient(180deg,#061026,#041025);padding:40px 0;}
.section-sub {opacity:0.8;margin-bottom:18px;}
.package-list {display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.package-card {background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(7,10,20,0.5);transition:transform .28s ease;}
.package-card:hover {transform:translateY(-10px);box-shadow:0 22px 50px rgba(1,1,132,0.65);}
.package-card h3 {color:#fbfbfb;margin-bottom:6px;}
.package-row {display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.price {font-weight:700;color:#0b7a73;}
.duration {font-style:italic;color:#3b93ff;}
.features {margin-top:10px;padding-left:18px;color:#abaaaa;}
.select-package-btn {width:100%;margin-top:12px;padding:12px;border-radius:12px;border:none;background:linear-gradient(90deg,#2b6ef6,#7a5cff);color:#fff;cursor:pointer;font-weight:700;}

/* CONTACT */
.contact-grid {display:grid;grid-template-columns:1fr 420px;gap:20px;}
.form {background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);}
.form label {display:block;margin-bottom:12px;font-weight:600;}
.form input,.form textarea {width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);}
.form textarea {min-height:120px;resize:vertical;}
.success {display:none;color:#8ef5b6;font-weight:700;margin-top:10px;}

/* CTA & Footer */
.cta-section {
  background: linear-gradient(90deg,#08112b,#0b1630);
  padding: 28px;
  border-radius: 16px;
  margin: 30px 0;
}

.cta-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer {
  padding: 30px 0;
  margin-top: 30px;
  display: flex;
  flex-direction: column; /* ترتيب العناصر فوق بعض */
  justify-content: center;
  align-items: center; /* يركّز كل شيء في الوسط */
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: 12px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.footer-left p {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}

.footer-right {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-right a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 500;
  transition: color .3s;
}

.footer-right a:hover {
  color: #6b8cff;
}

/* Fade In Sections */
.fade-in {opacity:1;transition:opacity 1s ease-in-out;}

/* Responsive */
@media(max-width:980px){
  .hero-left{text-align:center;}
  .services-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .package-list{grid-template-columns:1fr;}
}
/* ----------------------------
   Service Dialog
---------------------------- */




/* Dialog CSS */
.service-dialog {
  display: none;
  position: fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index:1000;
}
.dialog-content {
  background:#0b1630;
  padding:20px;
  border-radius:12px;
  max-width:500px;
  width:90%;
  text-align:right;
  position: relative;
}
.dialog-content img {
  width: 80%;       /* بدل 100% */
  height: auto;     /* يحافظ على النسبة */
  margin: 0 auto 10px auto; /* يوسّط الصورة */
  display: block;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.dialog-content img.fade {
  opacity:1;
}
.close-btn {
  position:absolute;
  top:10px;
  left:10px;
  font-size:24px;
  cursor:pointer;
  color:#fff;
}
.dialog-content ul {
  list-style: disc;
  margin:0;
  padding-left:20px;
}


.close-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #fff;
  transition: color 0.3s;
}
.close-btn:hover { color: #6b8cff; }

/* Animations */
@keyframes fadeOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInList {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}