@font-face {
  font-family: "ReadexPro";
  src: url("./fonts/ReadexPro-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "ReadexPro";
  src: url("./fonts/ReadexPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "ReadexPro";
  src: url("./fonts/ReadexPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "ReadexPro";
  src: url("./fonts/ReadexPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "ReadexPro";
  src: url("./fonts/ReadexPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "ReadexPro";
  src: url("./fonts/ReadexPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "ReadexPro", sans-serif;
  font-weight: 400;
}

.title-bold {
  font-family: "ReadexPro", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  text-align: center;
}



/* =================================================================
   2. متغيرات الألوان الرئيسية (Root Variables)
   ================================================================= */
:root {
  --pri: #ed293c;
  /* اللون الأساسي */
  --bg2: #ffffff;
  /* اللون الثانوي */
  --t1: #ffffff;
  /* لون النص */
  --t2: #ed293c;
  /* لون النص */
  --bg: #6d0810;
  /* لون الخلفية */
  --bgW: #ffffff;
  --bgB: #CE2232;
  --bgS: #192D40;
  --gry: #e7e7e7;
  --gry2: #7c7c7c;
}

/* =================================================================
   3. التنسيقات الأساسية (Base Styles)
   ================================================================= */

body {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* --- 4. حركة الباترن الجانبي --- */
@keyframes slideDown {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 1000px;
  }
}

@keyframes slideUp {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -1000px;
  }
}

.side-pattern-container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: -1;
  /* خلف كل شيء */
  pointer-events: none;
}

@media (min-width: 768px) {
  .side-pattern-container {
    width: 320px;
  }
}

.side-pattern-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://nexl.fra1.cdn.digitaloceanspaces.com/Branding---Next-Level-Gruop%202.png");
  background-repeat: repeat;
  background-size: 400px;
}

@media (min-width: 768px) {
  .side-pattern-base {
    background-size: 800px;
  }
}

.animate-down {
  animation: slideDown 60s linear infinite;
}

.animate-up {
  animation: slideUp 60s linear infinite;
}

/* الجانب الأيسر */
/* --- 4. حركة الباترن الجانبي مع تلاشي عميق من الأعلى --- */

.side-pattern-container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: -1;
  pointer-events: none;
}

@media (min-width: 768px) {
  .side-pattern-container {
    width: 320px;
  }
}

/* القناع المشترك للتلاشي العمودي (تركيز على الأعلى) */
.mask-deep-top {
  /* التعديل هنا: يبدأ شفافاً من 0% ويصل للأسود الكامل عند 50% من الارتفاع */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 15%,
      black 45%,
      black 85%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.1) 15%,
      black 45%,
      black 85%,
      transparent 100%);
}

/* الجانب الأيسر: دمج التلاشي الجانبي مع العمودي */
.mask-left {
  left: 0;
  -webkit-mask-image:
    linear-gradient(to right, black 20%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 45%, black 85%, transparent 100%);
  mask-image:
    linear-gradient(to right, black 20%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 45%, black 85%, transparent 100%);

  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* الجانب الأيمن: دمج التلاشي الجانبي مع العمودي */
.mask-right {
  right: 0;
  -webkit-mask-image:
    /* التلاشي الأفقي: يبدأ شفاف، يسود في المنتصف، ثم يختفي */
    linear-gradient(to left, transparent 0%, black 30%, black 70%, transparent 100%),
    /* التلاشي العمودي: فيد عميق جداً من الأعلى */
    linear-gradient(to bottom, transparent 0%, black 50%, black 85%, transparent 100%);

  mask-image:
    linear-gradient(to left, transparent 0%, black 30%, black 70%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 50%, black 85%, transparent 100%);

  -webkit-mask-composite: source-in;
  mask-composite: intersect;

  /* عكس الصورة لتعطي تماثلاً مع الجانب الآخر */
  transform: scaleX(-1);
}

/* ... باقي كود الـ Animation والـ Base كما هو في ملفك ... */

/* ضمان بقاء المحتوى فوق الباترن */
main,
nav,
footer {
  position: relative;
  z-index: 1;
}

.t2 {
  color: var(--t2);
}

/* التأكد من أن الخلفية الأساسية لا تحجب الباترن */
body {
  background-color: #000000;
  position: relative;
}

/* ضمان بقاء المحتوى فوق الباترن */
main,
nav,
footer {
  position: relative;
  z-index: 1;
}



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


/* =================================================================
   4. الأدوات المساعدة (Utility Classes)
   ================================================================= */
.t1 {
  color: var(--t1);
}

.bg {
  background-color: var(--bg);
}

.bg2 {
  background-color: var(--bg2);
}

.bgW {
  background: var(--bgW);
}

.bgB {
  background-color: var(--bgB);
  background-color: rgba(0, 0, 0, 0.2);
}

.bgS {
  background-color: var(--bgS);
}

.gry1 {
  background-color: var(--gry);
}

.gry2 {
  color: var(--gry2);
}

.t2 {
  color: var(--t2);
}


/* تم دمج قاعدتي .pri في واحدة لتطبيق لون الخلفية والنص معًا */
.pri {
  background-color: var(--pri);
  color: var(--t1);
  /* افترضنا أنك تريد النص أبيض فوق هذه الخلفية */
}

/* =================================================================
   5. تنسيقات المكونات (Component Styles)
   ================================================================= */
/* --- تنسيقات عامة --- */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 40px;
  color: #f9fafb;
  text-align: center;
  background: #ed293c;
}


.section-header h2 {
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.section-header p {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 2rem;
}

/* --- تنسيقات الفيديو والخلفية --- */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}


/* --- تنسيقات أقسام العلامات التجارية --- */
.brands-list {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.brands-names {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brands-names p {
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  color: #e0e7ff;
}

.brands-names p:hover {
  color: #ffffff;
  transform: translateX(6px);
}

.brands-names p.active {
  color: #ffffff;
  font-weight: 900;
  transform: translateX(8px);
}

.brand-details {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.brand-details h3 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 1rem;
  margin-top: 1rem;
  color: #ffffff;
}

.brand-details p {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.6;
}

/* --- تنسيقات شبكة عرض اللوجوهات --- */
.brand-grid-container {
  width: 100%;
  padding: 2rem;
  display: flex;
  justify-content: center;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
}

.brand-grid2 {
  display: grid;
  grid-template-columns: repeat(4, 3fr);
  gap: 2rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.brand-item {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 9s infinite ease-in-out;
}

.brand-item img {
  max-width: 100px;
  object-fit: contain;
}

.brand-item:hover {
  animation-play-state: paused;
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* --- تنسيقات Swiper --- */
.swiper {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 40px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.swiper-slide.active {
  opacity: 1;
  transform: scale(1.2);
  box-shadow: 0 0 10px #ff3b3b;
  border-radius: 10px;
}

.swiper-slide img {
  height: 100px;
  object-fit: contain;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .swiper {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .brand-grid-container {
    display: none !important;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

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

/* تأخيرات حركة الطفو */
.brand-item:nth-child(1) {
  animation-delay: 0s;
}

.brand-item:nth-child(2) {
  animation-delay: -3s;
}

.brand-item:nth-child(3) {
  animation-delay: -1.5s;
}

.brand-item:nth-child(4) {
  animation-delay: -5s;
}

.brand-item:nth-child(5) {
  animation-delay: -2s;
}

.brand-item:nth-child(6) {
  animation-delay: -4s;
}

.brand-item:nth-child(7) {
  animation-delay: -0.5s;
}


/* =================================================================
   7. تنسيق زر تغيير اللغة
   ================================================================= */
#language-switcher {
  color: #ffffff;
  background: none;
  border: 1px solid;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

#language-switcher:hover {
  background-color: rgba(255, 255, 255, 0.2);
}


#brands2 {
  isolation: isolate;
}

/* Overlay base */
#creative-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, rgba(30, 30, 47, 0.4), rgba(43, 43, 60, 0.4));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* دعم سفاري */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  clip-path: circle(0% at calc(100% - 40px) 40px);
  transition: clip-path 0.8s cubic-bezier(0.7, 0, 0.1, 1);
}

body.menu-open #creative-overlay {
  clip-path: circle(150% at top right);
}

/* Container */
.overlay-container {
  position: relative;
  text-align: center;
  padding: 2rem;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 2rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: #e57373;
}

.icon {
  width: 28px;
  height: 28px;
}

.nav-list {
  display: flex;
  flex-direction: column;
  /* تأكد من العرض العمودي */
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}


.nav-link {
  font-size: 2rem;
  /* يمكن تقليل الحجم قليلًا ليتناسب مع الصف */
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: #ccc;
  transition: color 0.3s ease, transform 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: #ffffff;
  transform: scale(1.1);
}


.fadein {
  mask-image: linear-gradient(90deg, transparent, white 50%);
}

.fadeinb {
  mask-image: linear-gradient(0deg, transparent, rgb(255, 255, 255)1%);
}




/* الحاوية الرئيسية التي ستطبق عليها خاصية الانتقال */
.snap-container {
  scroll-snap-type: y mandatory;
  /* تفعيل الانتقال العمودي الإجباري */
  overflow-y: scroll;
  /* تمكين التمرير العمودي لهذه الحاوية */
  height: 100dvh;
  overflow-x: hidden;

}

/* إخفاء شريط التمرير المخصص للحاوية */
.snap-container::-webkit-scrollbar {
  display: none;
}

/* كل قسم (شريحة) يجب أن يلتصق ببداية الشاشة */
.snap-section {
  scroll-snap-align: start;
  height: 100dvh;
  width: 100dvw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* نقاط التنقل الجانبية */
#side-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 15px;
  opacity: 70%;
}

#side-nav a {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
  position: relative;
}

/* تلميح يظهر عند المرور على النقطة */
#side-nav a .tooltip {
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translate(-100%, -50%);
  background-color: #1e293b;
  color: white;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#side-nav a:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

/* النقطة النشطة */
#side-nav a.active {
  background-color: #ffffff;
  transform: scale(1.2);
}

/* --- التصميم الزجاجي الشفاف المحسن --- */

.service-card {
  /* تأثير الزجاج المصنفر */
  background-color: rgba(166, 165, 165, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  transition: transform 0.4s ease, background 0.4s ease;
  z-index: 1;
}

.service-card2 {
  /* تأثير الزجاج المصنفر */
  background-color: rgba(166, 165, 165, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  transition: transform 0.4s ease, background 0.4s ease;
  z-index: 1;
}

.service-card:hover {
  transform: translateY(-10px);
  /* يصبح أكثر إشراقًا عند المرور */
  background-color: rgba(166, 165, 165, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.service-icon-wrapper {
  /* تم تقليل الحجم والمسافة لجعل البطاقة أقصر */
  width: 100px;
  height: 100px;
  /* تمت إزالة الخلفية والظل والإطار */
  background: transparent;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  /* تقليل الهامش السفلي */
  transition: transform 0.4s ease;
}

.service-card:hover .service-icon-wrapper {
  transform: scale(1.1);
  /* تمت إزالة الظل */
  box-shadow: none;
}



.cusshad {
  box-shadow: 0 20px 150px 0 rgba(0, 0, 0, 0.452);
}

@media (max-width: 768px) {
  .cusshad {
    box-shadow: 0 20px 150px 0 rgba(0, 0, 0, 0.171);

  }
}

/* الحجم الافتراضي */
.small-text-on-mobile p.text-xs {
  font-size: 20px;
}

.small-text-on-mobile h4.text-xl {
  font-size: 20px;
}

/* على شاشات التلفون */
@media (max-width: 600px) {
  .small-text-on-mobile p.text-xs {
    font-size: 8px !important;
  }

  .small-text-on-mobile h4.text-xl {
    font-size: 10px !important;
  }
}

lottie-player {
  pointer-events: none;
}