/* RESET */
:root{
  --main: #ff00aa;
  --dark: #0b0010;
  --dark2: #14001f;
  --gold: #ffcc66;
  --text: #ffffff;
  --glass: rgba(255,255,255,0.06);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 body {
  font-family: 'Cairo', sans-serif;

  /* خلفية فوشيا ناعمة متدرجة */
  background: radial-gradient(circle at top, #1a0022, #0b0010 70%);
  color: var(--text);
  background-size: 300% 300%;
  animation: softPinkWave 18s ease infinite; /* حركة ناعمة */
  padding-top: 65px; /* نفس ارتفاع الهيدر */
  
}

/* 
  ===== HEADER =====
  بيعمل: شريط تنقل ثابت مع خلفية وردية فاخرة + هامبرجر للموبايل
  الغرض: التنقل + تجربة مستخدم احترافية
  خاص بـ: Header
*/


  header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 9999;
  
  background: rgba(10,0,20,0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(255,0,170,0.35);
}

.nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;                        /* ← تم إصلاحه = centered */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: 100%;
  padding: 0 10px;                       /* تعديل بسيط عشان الـ centering */
}


/* البراند */
.brand {
  display: flex;
  align-items: center;
   gap: 10px; 
  height: 100%;
  flex-direction: row; /* مهم جدًا */
  margin-left: 20px; /* يبعد البراند عن القائمة */
}

/* اللوجو */
.logo-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  
  /* display: block; مهم */
  
  box-shadow: 0 0 10px #ff00aa88;
  transition: 0.3s;
}


.logo-img:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow:
    0 0 20px #fff,
    0 0 40px #ff66cc,
    0 0 80px #ff00aa;
}

@keyframes pulseGlow {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* اسم البراند */
.brand-name {
  font-family: 'Cinzel', serif;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 1px;
  position: relative;
white-space: nowrap; /* يمنع الكسر */
text-shadow:
    0 0 8px #fff,
    0 0 15px #ff66cc,
    0 0 25px #ff00aa;
  }

/* لمعة بتعدي على الاسم */
.brand-name::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.9),
    transparent
  );

  transform: skewX(-20deg);
  animation: shineMove 3s infinite;
}

/* Glow خارجي */
.brand-name {
  text-shadow:
    0 0 10px rgba(255,255,255,0.8),
    0 0 20px #ff66cc,
    0 0 40px #ff00aa,
    0 0 80px #ff00aa;
}

@keyframes luxuryGradient {
  0% { background-position: 0% }
  50% { background-position: 100% }
  100% { background-position: 0% }
}

@keyframes shineMove {
  0% { left: -60%; }
  100% { left: 120%; }
}

.brand-text {
  display: flex;
  align-items: center;
}

/* ===== القائمة ===== */
.nav-links {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px; /* قللنا المسافات */
  list-style: none;
  margin-right: 25px; /* مسافة من البراند */
}

/* اللينكات */
.nav-links a {
  font-family: 'Baloo 2', cursive;
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.5px;

  padding: 8px 14px;
  border-radius: 15px;

  text-decoration: none;
  position: relative;

  /* 🔥 أهم تعديل */
  background: rgba(0, 0, 0, 0.35); /* خلفية خفيفة */
  backdrop-filter: blur(10px);

  /* يخلي الكلام يبان مهما الخلفية */
  text-shadow:
    0 0 8px #000,
    0 0 15px rgba(255,0,170,0.8),
    0 0 25px #ff00aa;

  transition: 0.3s;
}

/* Hover و Active (محسن) */
.nav-links a:hover,
.nav-links .active {
  background: linear-gradient(45deg, #ff00aa, #ff66cc);
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 15px #ff00aa, 0 0 30px #ff66cc;
  text-shadow: 0 0 10px #fff, 0 0 20px #ff00aa;
}

/* الخط المتحرك (نفس القديم) */
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #fff, #ff00aa);
  transition: 0.4s;
}
.nav-links a:hover::after { width: 100%; }

 
/* ===== الموبايل (media query واحدة نظيفة - مفيش تعارض) ===== */
/* ===== MOBILE MENU ULTRA ===== */
.hamburger {
  display: none;
}

@media (max-width: 768px){

  @media (max-width: 768px){

@media (max-width: 768px){

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(10,0,20,0.75);
    backdrop-filter: blur(30px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;

    direction: rtl;

    /* ===== 3D START STATE ===== */
    transform: perspective(900px) rotateX(-18deg) scale(0.85);
    opacity: 0;

    pointer-events: none;

    transition: transform 0.6s cubic-bezier(.2,.8,.2,1),
                opacity 0.4s ease;

    transform-origin: top center;

    z-index: 10001;
  }

  .nav-links.active {
    transform: perspective(900px) rotateX(0deg) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

}

  /* اللينكات */
  .nav-links a{
    position: relative;
    overflow: hidden;

    font-size: 1.7rem;
    padding: 16px 38px;
    border-radius: 40px;

    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);

    transition: 0.3s ease;
  }

  .nav-links a:hover{
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 0 25px #ff00aa;
    background: linear-gradient(45deg,#ff00aa,#ff66cc);
  }

}


  /* 🌟 دخول العناصر واحدة واحدة */
  .nav-links li{
    opacity: 0;
    transform: translateY(30px) rotateX(-20deg);
  }

  .nav-links.active li{
    animation: floatIn3D 0.6s ease forwards;
  }

  .nav-links.active li:nth-child(1){ animation-delay: .1s; }
  .nav-links.active li:nth-child(2){ animation-delay: .2s; }
  .nav-links.active li:nth-child(3){ animation-delay: .3s; }
  .nav-links.active li:nth-child(4){ animation-delay: .4s; }
  .nav-links.active li:nth-child(5){ animation-delay: .5s; }
  .nav-links.active li:nth-child(6){ animation-delay: .6s; }
  .nav-links.active li:nth-child(7){ animation-delay: .7s; }

}

@keyframes floatIn3D {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}
  .logo-img {
    width: 40px;
    height: 40px;
  }

  .brand-name {
    font-size: 1.1rem;
  }
  
  .logo-img {
    width: 40px;
    height: 40px;
  }

  .brand-name {
    font-size: 1.1rem;
  }


/* 
  ===== HERO SPLIT =====
  بيعمل: قسم البطل بـ 3 أعمدة (slider + نص + فيديو)
  الغرض: عرض جذاب جداً للبرند
  خاص بـ: Hero Section
*/
.hero-split {
  margin-top: 65px; /* نفس ارتفاع الهيدر */
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  min-height: 100vh;
  gap: 0px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, #120018, #07000d 70%);
}

.hero-slider, .hero-video {
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 1s ease;
}

.slide.active {
  opacity: 1;
}

.slide img, .hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) contrast(1.1);
  transition: 0.8s;
}

.hero-center {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px;

  color:#fff;
  z-index:2;

  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);

  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
  
}

.hero-split::after{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,0,170,0.08),
    transparent
  );

  animation: luxLight 6s linear infinite;
}

@keyframes luxLight{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}


.hero-center h1 {
  font-size:3rem;
  font-family: 'Playfair Display', serif;
  background: linear-gradient(45deg,#fff,#ff4da6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 0 20px rgba(255,0,170,0.3);
  
}

.btn {
  background: #ff69b4;
  color: white;
  padding: 14px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 20px;
  transition: 0.3s;
}

.btn:hover {
  transform: scale(1.05);
}


.slider{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider img{
  position: absolute;
  top: 0;
  right: 0;   /* مهم عشان RTL */
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease-in-out;

  z-index: 1;
}


.slider img.active{
  opacity: 1;
  z-index: 2;
}


/* 
  ===== SERVICES SECTION =====
  بيعمل: كروت الخدمات (3 أعمدة في الديسكتوب)
  الغرض: عرض الخدمات بشكل جذاب
  خاص بـ: قسم الخدمات
*/
.services {
  padding: 80px 20px;
}

.section-title {
  text-align: center;
  color: #ff00aa;
  margin-bottom: 40px;
  font-size: 2.2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1300px;
  margin: 0 auto;
}

.card {
  background: #ff66cc;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: 0.3s;
}

.card:hover {
  transform: translateY(-10px);
}

.card h3 {
  font-family: 'Playfair Display', serif;
  letter-spacing: 1px;
  background: #ff66cc;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 1.3rem;
}

.card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card p {
  padding: 15px;
  text-align: center;
  color: #555;
}

/* 
  ===== WELCOME OVERLAY =====
  بيعمل: تنسيق الشاشة الترحيبية مع فيديو خلفي
  الغرض: Splash Screen فاخر
  خاص بـ: Welcome Overlay
*/
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay-bg {
  position: absolute;
  inset: 0;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-content {
  position: relative;
  text-align: center;
  z-index: 2;
  max-width: 700px;
  padding: 20px;
}

.overlay-text h2 {
  font-family: 'Playfair Display', serif;
  letter-spacing: 1px;
  font-size: 2.8rem;
  background: linear-gradient(45deg, #ff00aa, #ff66cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#closeWelcome {
  margin-top: 25px;
  padding: 14px 40px;
  border: none;
  background: linear-gradient(45deg, #ff00aa, #ff66cc);
  color: #fff;
  border-radius: 50px;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 0 20px #ff00aa88;
  transition: 0.4s;
}

#closeWelcome:hover {
  transform: scale(1.1);
}


.hearts {      /* قلوووووب طالعة من النص */
  position: relative;
  display: inline-block;
}

.hearts::after {
  content: "💖 💕 💗";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;

  animation: heartsUp 3s infinite;
}

@keyframes heartsUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -20px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40px);
  }
}
 
 .hearts-bg {
  position: relative;
  overflow: hidden;
}

/* قلوب طالعة بشكل ناعم */
.hearts-bg::before {
  content: "💖 💕 ✨ 💖 💕";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 18px;
  opacity: 0.7;
  animation: floatHearts 4s infinite ease-in-out;

  pointer-events: none;
  z-index: 2;
}

@keyframes floatHearts {
  0%   { transform: translateX(-50%) translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-30px); opacity: 0; }
}

 .flowers::before {      /* ورود بتطير */
  content: "🌸 🌺 🌷";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  animation: floatFlowers 4s infinite linear;
}

@keyframes floatFlowers {
  0% { transform: translate(-50%, 0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -60px); opacity: 0; }
}
 
 .sparkle {    /* لمعة نجوووووم */
  position: relative;
}

.sparkle::before,
.sparkle::after {
  content: "✨";
  position: absolute;
  font-size: 20px;
  animation: sparkleMove 2s infinite alternate;
}

.sparkle::before {
  left: -20px;
  top: -10px;
}

.sparkle::after {
  right: -20px;
  bottom: -10px;
}

@keyframes sparkleMove {
  from { transform: scale(0.8); opacity: 0.5; }
  to { transform: scale(1.5); opacity: 1; }
}

 /* ===== WHATSAPP ===== */
.whatsapp-btn{
  position:fixed;
  bottom:20px;
  left:20px;
  background:#25D366;
  color:white;
  padding:12px 18px;
  border-radius:50px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  box-shadow:0 0 15px #25D366;
  z-index:9999;
  animation:pulse 1.5s infinite;
}

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

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 #25D366; }
  70%{ box-shadow:0 0 0 15px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}


 
 
/* الفــــــوتر */
footer {
  background: linear-gradient(135deg, #120016, #1a0d24, #2a0033);
  color: #e1bee7;
  padding: 18px 20px;
  text-align: center;
  margin-top: 40px;
  font-size: 1.05rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 105, 180, 0.3);
}

/* ✨ Glow line فوق الفوتر */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff69b4, transparent);
  box-shadow: 0 0 15px #ff69b4;
}

/* Container */
footer .container {
  padding: 0 !important;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Text spacing */
footer div {
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

/* 💎 Hover effect للأرقام والسوشيال */
footer a {
  text-decoration: none;
  transition: 0.3s;
}

footer a:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 8px #ff69b4);
}

/* 🔥 Social icons glow */
footer i {
  transition: 0.3s;
}

footer i:hover {
  color: #ff69b4;
  text-shadow: 0 0 10px #ff69b4;
}

/* تقليل الفراغات */
footer * {
  margin: 0;
}

/* إخفاء الكيرسور الافتراضي */
body {
  cursor: default;
}

body {
  position: relative;
  z-index: 1;
}

/* شكل القلب */
.heart-cursor {
  position: fixed;
  pointer-events: none;
  font-size: 18px;
  color: #ff4da6;
  animation: floatUp 1s linear forwards;
  z-index: 9999;
}

/* حركة القلب */
@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.5);
  }
}

/* ===============================
   LUXURY HEARTS SYSTEM
================================= */

#lux-hearts-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998; /* تحت المودال وفوق الخلفية */
}

.lux-heart {
  position: absolute;
  bottom: -40px;
  opacity: 0;
  will-change: transform, opacity;
  animation: luxFloat linear forwards;
  filter: drop-shadow(0 0 8px rgba(255, 105, 180, 0.35));
}

/* شكل القلب */
.lux-heart::before {
  content: "❤";
}

/* الحركة الأساسية */
@keyframes luxFloat {
  0% {
    transform: translateY(0) scale(0.7) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.6;
  }

  50% {
    transform: translateY(-50vh) scale(1) rotate(180deg);
  }

  100% {
    transform: translateY(-110vh) scale(1.3) rotate(360deg);
    opacity: 0;
  }
}

.rain-heart {
  position: fixed;
  bottom: -40px;
  pointer-events: none;
  z-index: 9999;

  opacity: 1;

  transition: transform linear, opacity linear;
  will-change: transform, opacity;

  filter: drop-shadow(0 0 6px rgba(255,105,180,0.7));
}