/* 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;
}

html,body{
  overflow-x:hidden;
}

 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; /* حركة ناعمة */
  
}

/* ===== HEADER ===== */
 header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 30px;
  z-index: 9999;

  background: linear-gradient(90deg, #ff1493, #ff69b4, #ff00aa) !important;

  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 25px rgba(255,0,170,0.45);
}


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

header, .nav-container{
  max-width:100%;
  overflow:hidden;
}

.left, .right, .center{
  min-width:0;
}


/* البراند */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  flex-direction: row;
}

/* موبايل فقط */
@media (max-width:768px){

  .brand{
    transform:none;
  }

}

/* اللوجو */
.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;
  overflow: hidden;
  display: inline-block;
  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: -150%;
  width: 60%;
  height: 100%;

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

  transform: skewX(-20deg);
  animation: brandShineMove 2.5s 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 brandShineMove {
  0% { left: -100%; }
  100% { left: 100%; }
}

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

/* ===== القائمة ===== */
.nav-links {
  /* height: 100%; */
  display: flex;
  top:0 !important;
  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%; }

 
/* =========================
   HAMBURGER PREMIUM MOBILE
========================= */

.hamburger{
  display: none;
  z-index: 1000002;
}

/* ================= MOBILE MENU FIX ================= */
/* ================= MOBILE MENU FINAL FIX ================= */
@media (max-width:768px){

  html,
  body{
    overflow-x:hidden;
  }

  header{
    z-index:999999;
  }

  /* زر القائمة */
  .hamburger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:6px;

    width:48px;
    height:48px;

    position:absolute;

    left:15px;
    top:50%;

    transform:translateY(-50%);

    z-index:1000001;

    cursor:pointer;
  }

  .hamburger span{
    width:32px;
    height:3px;

    background:#fff;

    border-radius:50px;

    transition:.4s;

    box-shadow:0 0 10px rgba(255,0,170,.7);
  }

  .hamburger.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
  }

  .hamburger.active span:nth-child(2){
    opacity:0;
  }

  .hamburger.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
  }

  /* القائمة */
  .nav-links{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    margin:0;
    padding:100px 20px 40px;

    display:flex;
    flex-direction:column;

    justify-content:flex-start;
    align-items:center;

    gap:20px;

    background:rgba(10,0,20,.97);

    backdrop-filter:blur(20px);

    overflow-y:auto;

    list-style:none;

    z-index:1000000;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(-100%);

    transition:
      transform .6s ease,
      opacity .4s ease,
      visibility .4s ease;
  }

  /* فتح القائمة */
  .nav-links.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);
  }

  /* العناصر */
  .nav-links li{

    width:100%;

    opacity:0;

    transform:translateY(25px);

    transition:
      opacity .5s ease,
      transform .5s ease;
  }

  .nav-links.active li{
    opacity:1;
    transform:translateY(0);
  }

  /* اللينكات */
  .nav-links a{

    width:100%;

    display:block;

    text-align:center;

    font-size:1.25rem;

    padding:16px 20px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(12px);
  }


  /* تأخير */
  .nav-links.active li:nth-child(1){ transition-delay:.1s; }
  .nav-links.active li:nth-child(2){ transition-delay:.2s; }
  .nav-links.active li:nth-child(3){ transition-delay:.3s; }
  .nav-links.active li:nth-child(4){ transition-delay:.4s; }
  .nav-links.active li:nth-child(5){ transition-delay:.5s; }
  .nav-links.active li:nth-child(6){ transition-delay:.6s; }


}

/* 
  ===== HERO SPLIT =====
  بيعمل: قسم البطل بـ 3 أعمدة (slider + نص + فيديو)
  الغرض: عرض جذاب جداً للبرند
  خاص بـ: Hero Section
*/
.hero-split {
  /* margin-top: 65px; نفس ارتفاع الهيدر */
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,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;
}


.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;
}

/* شكل القلب */
.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));
}


/* آخر style.css */

html,
body{
  overflow-x:hidden !important;
  width:100%;
  max-width:100%;
}

/* أي عنصر ميطلعش برا */
*{
  box-sizing:border-box;
  }

/* الصور والفيديو */
img,
video{
  max-width:100%;
  height:auto;
}

/* إصلاح عناصر الهيرو */
.left,
.right,
.center{
  overflow:hidden;
}

/* منع أي transform يعمل سكرول */
.center::before{
  max-width:100vw;
}

/* FIX GLOBAL SAFE LAYOUT */
.main{
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
}

.main,
.hero-split,
header{
  max-width: 100vw;
  overflow-x: hidden;
}