.digital-universe {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 100vh;
  box-sizing: border-box;
}

/* ===============================
   حاوية المدارات (الدوائر)
   =============================== */
.orbits {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50%;
}

/* أحجام المدارات الافتراضية للشاشات الكبيرة */
.o1200 {width: 1200px; height: 1200px;}
.o1100 {width: 1100px; height: 1100px;}
.o1000 {width: 1000px; height: 1000px;}
.o900  {width: 900px;  height: 900px;}
.o800  {width: 800px;  height: 800px;}
.o700  {width: 700px;  height: 700px;}
.o600  {width: 600px;  height: 600px;}
.o500  {width: 500px;  height: 500px;}
.o400  {width: 400px;  height: 400px;}
.o300  {width: 300px;  height: 300px;}
.o200  {width: 200px;  height: 200px;}

/* ===============================
   العنوان الرئيسي
   =============================== */
.universe-title {
  position: absolute;
  z-index: 3;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  font-family: "Teko", sans-serif;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===============================
   حاوية الكواكب
   =============================== */
.planet-container {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.planet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: 
    translate(-50%, -50%) 
    rotate(var(--angle)) 
    translateX(var(--radius)) 
    rotate(calc(-1 * var(--angle)));
  text-align: center;
  transition: all 0.3s ease;
}

.planet img {
  width: 90px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

.planet span {
  display: block;
  font-size: 18px;
  color: #ffffff;
  font-family: "Teko", sans-serif;
  text-transform: capitalize;
  white-space: nowrap;
}

/* توزيع المسافات للشاشات الكبيرة */
.orbit1000 { --radius: 480px; }
.orbit800  { --radius: 380px; }
.orbit600  { --radius: 280px; }

/* توزيع الزوايا الافتراضي */
.p3 { --angle: -90deg;  --radius: 300px; } 
.p4 { --angle: -135deg; --radius: 350px; } 
.p5 { --angle: -55deg;  --radius: 320px; } 
.p6 { --angle: -30deg;  --radius: 450px; } 
.p1 { --angle: -170deg; --radius: 400px; } 
.p2 { --angle: 170deg;  --radius: 400px; } 
.p7 { --angle: -10deg;  --radius: 480px; } 
.p8 { --angle: 105deg;  --radius: 280px; } 
.p9 { --angle: 140deg;  --radius: 400px; } 
.p10{ --angle: 75deg;   --radius: 350px; } 
.p11{ --angle: 10deg;   --radius: 450px; } 
.p12{ --angle: 40deg;   --radius: 380px; }

/* ===============================
   تعديلات وضع الهاتف (Mobile)
   =============================== */
@media (max-width: 768px) {
  .digital-universe {
    min-height: 850px;
    height: 100vh;
  }

  .universe-title {
    font-size: 28px;
    width: 60%;
  }

  /* إظهار المدارات بشكل بيضاوي يتناسب مع طول الشاشة */
  .orbits {
    transform: translate(-50%, -50%) scaleX(0.6) scaleY(0.65);
    opacity: 0.9; /* زيادة الوضوح قليلاً */
  }

  .planet {
    /* استخدام معادلة للتحكم في القطر الأفقي والعمودي بشكل منفصل */
    --r-x: 160px; /* القطر الأفقي (ضيق ليناسب عرض الموبايل) */
    --r-y: 380px; /* القطر الرأسي (طويل ليغطي طول الموبايل) */
    
    transform: 
      translate(-50%, -50%) 
      translate(calc(cos(var(--angle)) * var(--r-x)), calc(sin(var(--angle)) * var(--r-y)));
  }

  /* توزيع الكواكب لتطابق تصميم الـ "Universe" الطولي */
  .p3 { --angle:  -85deg;  --r-y: 380px; --r-x: -40px; }   /* Graphic Design - القمة */
  .p6 { --angle: -120deg;  --r-y: 355px; --r-x: -195px; } /*    Influencer Marketing */
  .p5 { --angle: -120deg;  --r-y: 250px; --r-x: 9px; }  /* Packaging */
  .p4 { --angle: -150deg; --r-y: 590px; --r-x: 150px; } /* Billboards */
  .p1 { --angle: 150deg;  --r-x: 180px; --r-y: -140px; }  /* Brand Development - يسار الوسط */
  .p7 { --angle: -50deg;  --r-x: 120px; --r-y: 150px; }  /* Website & App - يمين الوسط */
  .p11{ --angle: 25deg;   --r-y: 180px; --r-x: 160px; } /* Outdoor Advertising */
  .p12{ --angle: 50deg;   --r-y: 355px; --r-x: 190px; } /*    Brand Management */
  .p10{ --angle: 85deg;   --r-y: 380px; --r-x: 40px; }  /* Digital Marketing - أسفل */
  .p9 { --angle: 150deg;  --r-y: 590px; --r-x: 140px; } /* Social Media */
  .p8 { --angle: 120deg;  --r-y: 250px; --r-x: 10px; }  /* Media Production */
  .p2 { --angle: 155deg;  --r-y: 160px; --r-x: 150px; } /* Digital Displays */

  .planet img {
    width: 65px; /* تصغير الأيقونات للموبايل */
  }

  .planet span {
    font-size: 16px;
    max-width: 90px;
    line-height: 1.7;
  }
}