.btn-carousel {
    display: inline-block !important;
    padding: 10px 30px !important;
        text-align: left !important; /* يجعل النص على اليسار داخل الزر */
    padding-left: 20px !important; /* تحريك النص قليلاً من اليسار */
    border-radius: 50px !important; /* شكل بيضاوي */
    font-weight: bold !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-align: left !important;   /* النص ناحية اليسار */
    cursor: pointer !important;
    backdrop-filter: blur(5px) !important;
    transition: 0.3s !important;
}

.btn-carousel span {
    display: inline-block !important;
    transform: translateX(-18px) !important; /* النص يتحرك أكثر ناحية اليسار */
}


/* طبقة خلفية مركزة داخل الزر */
.btn-carousel::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(calc(-50% - 3px), -50%) !important; /* تحريك طفيف للخلفية لليسار */
    width: 100% !important;
    height: 100% !important;
    background: inherit !important;
    z-index: -1 !important;
    border-radius: 50px !important; /* نفس شكل الزر */
}




.btn-carousel:hover {
    background: inherit !important;       /* نفس لون الزر الأساسي */
    backdrop-filter: blur(7px) !important; /* ضبابية أقوى عند الهـوفر */
}
@media (max-width: 768px) {
    .btn-carousel {
        text-align: left !important;   /* الزر على اليسار */
        padding-left: 15px !important; /* مسافة بسيطة من اليسار */
    }

    .btn-carousel span {
        transform: translateX(0) !important; /* النص يبدأ من اليسار مباشرة */
    }

    .btn-carousel::before {
        transform: translate(-50%, -50%) !important; /* الخلفية تبقى مركزة */
    }
}


/* ===== WebKit Browsers (Chrome, Safari, Edge) ===== */
::-webkit-scrollbar {
    width: 8px;  /* أصغر عرض للسكول */
    height: 8px; /* للسكول الأفقي */
}

::-webkit-scrollbar-track {
    background: #000; /* الخلفية السوداء */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #FFD700; /* المقبض الأصفر */
    border-radius: 10px;
    border: 2px solid #000; /* حواف داخلية أقل سمكًا */
}

::-webkit-scrollbar-thumb:hover {
    background: #FFC300; /* عند المرور بالفأرة */
}

/* ===== Firefox ===== */
body {
    scrollbar-width: thin;   /* سكول بار رفيع */
    scrollbar-color: #FFD700 #000; /* لون المقبض / الخلفية */
}

/* ===== تحسين السلاسة ===== */
html {
    scroll-behavior: smooth; /* سلاسة عند التمرير */
}


/* Body Care - 3 منتجات في الصف */
.products-grid.bodycare {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.products-grid.bodycare .product-card {
    width: calc(33.33% - 13.33px);
    text-align: center;
    margin-bottom: 20px;
}

/* New Arrivals - 4 منتجات في الصف */
.products-grid.newarrivals {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.products-grid.newarrivals .product-card {
    width: calc(25% - 15px);
    text-align: center;
    margin-bottom: 20px;
}

/* تجاوب مع الشاشات الصغيرة */
@media (max-width: 1024px){
    .products-grid.bodycare .product-card { width: calc(50% - 10px); }
    .products-grid.newarrivals .product-card { width: calc(33.33% - 13.33px); }
}
@media (max-width: 768px){
    .products-grid.bodycare .product-card,
    .products-grid.newarrivals .product-card { width: calc(50% - 10px); }
}
@media (max-width: 480px){
    .products-grid.bodycare .product-card,
    .products-grid.newarrivals .product-card { width: 100%; }
}

/* Body Care - 3 منتجات في الصف */
.products-grid.bodycare {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.products-grid.bodycare .product-card {
    width: calc(33.33% - 13.33px);
    text-align: center;
    margin-bottom: 20px;
}

/* New Arrivals - 4 منتجات في الصف */
.products-grid.newarrivals {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.products-grid.newarrivals .product-card {
    width: calc(25% - 15px);
    text-align: center;
    margin-bottom: 20px;
}

/* تجاوب مع الشاشات الصغيرة */
@media (max-width: 1024px){
    .products-grid.bodycare .product-card { width: calc(50% - 10px); }
    .products-grid.newarrivals .product-card { width: calc(33.33% - 13.33px); }
}
@media (max-width: 768px){
    .products-grid.bodycare .product-card,
    .products-grid.newarrivals .product-card { width: calc(50% - 10px); }
}
@media (max-width: 480px){
    .products-grid.bodycare .product-card,
    .products-grid.newarrivals .product-card { width: 100%; }
}

.products-section {
    position: relative;
    padding: 40px 0;
    overflow: hidden;
}

.products-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}

.products-section .container {
    position: relative; /* يبقى فوق البلور */
    z-index: 1;
    margin: 0 auto;
}

/* شبكة المنتجات */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-card {
    width: calc(25% - 15px); /* 4 منتجات في الصف */
    text-align: center;
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}
.gtx figure {
    background-color: rgba(0, 0, 0, 0.3); /* أسود شفاف 30% */
    border-radius: 10px; /* اختياري لتحسين الشكل */
    padding: 10px; /* اختياري لتباعد النص عن الحواف */
}

.story-script-regular {
    background: none; /* النص نفسه بدون أي خلفية */
}
@media (max-width: 768px) {
    .carousel {
        position: relative;
        top: 10px; /* يحرك الكاروسيل للأعلى */
        /* أو ممكن تستخدم transform */
        /* transform: translateY(-20px); */
    }
}




/* تجاوب مع الشاشات */
@media (max-width: 1024px) {
    .product-card { width: calc(33.33% - 13.33px); } /* 3 منتجات في الصف */
}
@media (max-width: 768px) {
    .product-card { width: calc(50% - 10px); } /* 2 منتجات في الصف */
}
@media (max-width: 480px) {
    .product-card { width: 100%; } /* 1 في الصف */
}



/* الشبكة الرئيسية للبطاقات */
.categories-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
}

/* كل بطاقة */
.category-card {
    width: 380px;
    text-align: center;
    padding: 15px;
    border-radius: 15px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);

    /* الظل والانيميشن */
    box-shadow: 0 0 0 rgba(0,0,0,0);
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.6s ease;
}

/* عند ظهور البطاقة */
.category-card.show {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25); /* ظل أسفل البطاقة */
}

/* الصورة والفيديو داخل البطاقة */
.category-card img,
.category-card video {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* hover على الصورة */
.category-card img:hover,
.category-card video:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* hover على البطاقة كاملة */
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.3); /* الظل أكبر عند hover */
}

/* Responsive للهواتف */
@media (max-width: 768px) {
    .categories-cards {
        flex-direction: column;
        gap: 15px;
        padding: 0 10px;
        align-items: center;
    }
    .category-card img,
    .category-card video {
        height: 250px;
    }
}

.product-images::-webkit-scrollbar {
    display: none;
}

.product-images {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    scroll-behavior: smooth;
    cursor: grab;

    /* إخفاء الـ scrollbar */
    -ms-overflow-style: none;  /* IE & Edge */
    scrollbar-width: none;      /* Firefox */
}
.product-images::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

/* تنسيق الشبكة */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* يوسّط المنتجات */
    gap: 20px; /* مسافة بين البطاقات */
    padding: 0 20px; /* مسافة من الجوانب */
}

/* بطاقة المنتج */
.product-card {
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 20px;

    /* الانيميشن */
    opacity: 0;               
    transform: translateY(50px); /* يبدأ من الأسفل */
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* سريع وسلس */
    box-shadow: 0 0 0 rgba(0,0,0,0); /* البداية بدون ظل */
}

/* عند دخول العنصر */
.product-card.show {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* الظل يظهر مع الانيميشن */
}

/* الصورة داخل البطاقة */
.product-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* عند hover على الصورة */
.product-card img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* عند hover على البطاقة كاملة */
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.35); /* ظل أقوى عند hover */
}

/* Responsive للهواتف */
@media (max-width: 768px) {
    .products-grid {
        padding: 0 10px;
        gap: 15px;
    }
    .product-card img {
        height: 250px;
    }
}
.libre-baskerville {
  font-family: "Libre Baskerville", serif !important;
  font-optical-sizing: auto !important;
  font-weight: 400 !important;
  font-style: normal !important;
}


/* الصور داخل .gtx figure */
.rtx .gtx figure img {
    border-radius: 15px;            /* الحواف الدائرية */
    transition: transform 0.4s ease; /* الانيميشن */
}

/* عند المرور على الصورة */
.rtx .gtx figure img:hover {
    transform: scale(1.05);         /* تكبير بسيط عند hover */
}


.libre-baskerville-<uniquifier> {
  font-family: "Libre Baskerville", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.blend-section {
    position: relative;
    overflow: hidden;
}

.blend-section::before {
    content: "";
    position: absolute;
    top: -80px;   /* مدى التداخل */
    left: 0;
    width: 100%;
    height: 160px; /* حجم دمج التدرج */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),    /* لون شفاف من السيكشن اللي فوق */
        rgba(0,0,0,0)        /* يختفي في السيكشن الحالي */
    );
    z-index: 5;
    pointer-events: none;
}

/* تأثير انيميشن عند الدخول */
.hero-content .left,
.hero-content .right {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* عند ظهور العنصر */
.hero-content.show .left,
.hero-content.show .right {
    opacity: 1;
    transform: translateY(0);
}

/* تأثير hover على الصورة */
.hero-content .left img {
    border-radius: 15px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.hero-content .left img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* تأثير hover على الزر */
.hero-content button {
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.hero-content button:hover {
    transform: scale(1.05);
    background-color: #0056b3; /* أو أي لون تاني تحبه */
}

/* Responsive للهواتف */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }
  .hero-content .left,
  .hero-content .right {
    flex: 1 1 100%;
    padding-left: 0 !important;
    margin-top: 15px;
  }
  .hero-content .right {
    width: 100%;          
    max-width: none;     
    margin: 15px auto 0 auto; 
    font-size: 1.3rem;    
    line-height: 1.7;    
    padding: 0 15px;     
  }
  .hero-content img {
    width: 120%;          
    height: auto;
    max-width: none;      
    margin: 0 auto;       
  }
}
.boldonse-regular {
  font-family: "Boldonse", system-ui;
  font-weight: 400;
  font-style: normal;
}
.animate-title {
  display: inline-block; /* ضروري للترانزشن */
  transform: translateX(-100px); /* البداية من اليسار */
  opacity: 0; /* مخفي قبل السكورول */
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.5s ease;
  cursor: pointer;
}

/* بعد ما يظهر العنصر عند السكورول */
.animate-title.show {
  transform: translateX(0);
  opacity: 1;
}

/* تأثير hover */
.animate-title:hover {
  transform: translateY(-15px);
}
.animate-title-right {
  opacity: 0;
  transform: translateX(100px); /* جاي من اليمين */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
              opacity 0.7s ease;
  cursor: pointer;
}

/* بعد ظهور العنصر عند السكورول */
.animate-title-right.show {
  transform: translateX(0); /* يرجع لمكانه الطبيعي */
  opacity: 1;
}

/* تأثير hover */
.animate-title-right:hover {
  transform: translateX(0) translateY(-15px);
}

.animate-title-left {
  opacity: 0;
  transform: translateX(-100px); /* جاي من اليسار */
  transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55),
              opacity 0.7s ease;
  cursor: pointer;
}

.animate-title-left.show {
  transform: translateX(0); /* يرجع لمكانه الطبيعي */
  opacity: 1;
}

.animate-title-left:hover {
  transform: translateX(0) translateY(-15px);
}
.readex-pro {
  font-family: "Readex Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "HEXP" 0;
}
.readex-pro {
    font-family: "Readex Pro", sans-serif !important;
    font-weight: 700 !important;
}
.english-title {
    font-size: 0px !important; /* كبّر الرقم براحتك */
    font-weight: 700 !important;
}
@media (max-width: 768px) {

  .hero, 
  .hero-content,
  .hero .right,
  .hero .left {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center; /* يخلي كل المحتوى في النص */
    text-align: center;  /* يخلي النصوص في النص */
  }

  .hero-content .right * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* تعديل العنوان H3 */
  .hero-content h3 {
    margin: 20px 0;       /* مسافة من فوق وتحت */
    text-align: center;   /* في النص */
  }

  /* تعديل الزر */
  .hero-content .btn {  /* لو عندك زر فيه class معين استبدل .btn */
    width: 200px;       /* عرض ثابت */
    height: 50px;       /* ارتفاع ثابت */
    font-size: 16px;    /* حجم الخط */
    padding: 10px 20px; /* مسافة داخل الزر */
  }
}
@media (max-width: 768px) {
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* يوسّط عموديًا */
    align-items: center !important;     /* يوسّط أفقيًا */
    text-align: center !important;
    height: 100% !important;
  }

  .boldonse-regular {
    text-align: center !important;      /* يخلي النص في النص */
    margin: 0 0 20px 0 !important;      /* مسافة من فوق وتحت */
    display: block !important;          /* للتأكد من المركزية */
  }

  /* مثال للزر لو عندك زر تحت العنوان */
  .hero-content .btn {
    width: 50px !important;
    height: 50px !important;
    font-size: 16px !important;
    padding: 10px 20px !important;
  }
}
@media (max-width: 768px) {
  .hero-content .right p.libre-baskerville {
    padding-left: 5px !important;    /* مسافة صغيرة جدًا من اليسار */
    padding-right: 5px !important;   /* مسافة صغيرة جدًا من اليمين */
    text-align: left !important;     /* يفضل يظل نص محاذي يسار */
  }
}

.ubuntu-bold {
  font-family: "Ubuntu", sans-serif;
  font-size: 35px;
  font-weight: 900;
  font-style: normal;
}

  /* اجعل المساحة كلها 3D */
.marquees {
    perspective: 800px; 
}

/* الصفوف الفردية: لقدّام */
.marquee:nth-child(odd) {
    position: relative;
    z-index: 3;
    transform: rotate(-5deg) translateZ(40px);
}

/* الصفوف الزوجية: لورا */
.marquee:nth-child(even) {
    position: relative;
    z-index: 1;
    transform: rotate(5deg) translateZ(-40px);
    opacity: 0.7;
}

/* الأساس */
.marquee {
    --marquee--colour: #f3bb0b;
    --marquee--repeat-count: 6;
    --marquee--base-duration: 1s;
    --marquee--repeat-size: calc(100% / var(--marquee--repeat-count));
    --marquee--double-size: calc(var(--marquee--repeat-size) * 2);
    --marquee--duration: calc(var(--marquee--base-duration) * var(--char-count, 20));

    overflow: hidden;
    width: 110%;
    margin-left: -5%;
    mix-blend-mode: screen;
    background: var(--marquee--colour);
    color: #000;
}

/* الصفوف الزوجية */
.marquee:nth-child(even) {
    --marquee--direction: -1;
    background: #000;
    color: var(--marquee--colour);
}

/* النص */
.marquee p {
    transform: translateY(0.07em);
    font-weight: bold;
    margin: 0;
    display: flex;
    gap: 0.5em;
    line-height: 1.1;
    font-size: clamp(2.5rem, 12vw, 6.2rem);
    font-family: "Bebas Neue", sans-serif;
}

.marquee p::after {
    content: "*";
    transform: translateY(0.175em);
}

.marquee--inner {
    width: max-content;
    display: flex;
    text-transform: uppercase;
    animation: marquee var(--marquee--duration) infinite linear;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* اجعل المساحة كلها 3D وتملى ارتفاع السيكشن */
.marquees {
    perspective: 800px;
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    height: 100%;
    /* هنا التعديل المهم */
    align-content: space-between;  /* توزع الصفوف من فوق لتحت وتملأ الفراغ */
    gap: 2vw;                      /* قلل المسافة بينهم شوية */
    overflow: hidden;
}
@media (max-width: 768px) {
  .products-section {
      min-height: 100vh;
      padding: 40px 0 !important;  /* لو عايز تقلل البادينج شويه */
  }
}


.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* الحركة للأمام (الصفوف الفردية) تبدأ من منتصف النص */
.marquee:nth-child(odd) .marquee--inner {
    animation: marquee-forward var(--marquee--duration) infinite linear;
}

/* الحركة للخلف (الصفوف الزوجية) تبدأ من منتصف النص */
.marquee:nth-child(even) .marquee--inner {
    animation: marquee-backward var(--marquee--duration) infinite linear;
}

/* keyframes للحركة للأمام */
@keyframes marquee-forward {
    from { transform: translateX(-25%); } /* البداية من منتصف النص */
    to { transform: translateX(-75%); }   /* النهاية نصف الحركة للأمام */
}

/* keyframes للحركة للخلف */
@keyframes marquee-backward {
    from { transform: translateX(-75%); } /* البداية من منتصف النص */
    to { transform: translateX(-25%); }   /* النهاية نصف الحركة للخلف */
}
.product-images {
    display: flex;
    overflow-x: hidden !important; /* بدون سكرول */
    gap: 5px;
    scroll-behavior: smooth;
}

.product-images::-webkit-scrollbar {
    display: none !important;  /* إخفاء الشريط */
}
/* إعداد الانيميشن */
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* تبدأ مخفية */
.gtx figure {
    display: inline-block;
    margin: 20px;
    opacity: 0;
    transform: translateX(100%);
}

/* كلاس يظهر عند ظهور العنصر في الشاشة */
.gtx figure.animate {
    animation: slideInRight 0.8s forwards;
}
/* يدخل من أقصى اليسار */
@keyframes textSlideLeft {
    0% {
        transform: translateX(-100vw); /* من آخر الدنيا شمال 😎 */
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.text-scroll-animate {
    opacity: 0; /* بس نخفيه بالبداية */
}

.text-scroll-animate.show {
    animation: textSlideLeft 0.9s ease-out forwards;
}
  @media (max-width: 768px) {
  .hero-content .right {
    display: flex !important;
    flex-direction: column !important;  /* العناصر فوق بعض */
    align-items: center !important;     /* يوسّط العناصر أفقيًا */
    text-align: center !important;      /* يوسّط النصوص */
  }

  .hero-content .right h2.boldonse-regular {
    margin: 0 0 20px 0 !important;      /* مسافة تحت العنوان */
  }

  .hero-content .right .hero-btn {
    display: block !important;
    margin: 0 auto !important;          /* يوسّط الزر أفقيًا */
  }
}