/* 1. استيراد خطين من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:...&display=swap');
 



html, body {
  margin: 0;
  padding: 0;
  height: 100%;
} 
html {
  scroll-behavior: smooth;
}

#Perfume_section,#The_discounts_section,#Cosmetics_section,#Cleaning_section {
  scroll-margin-top: 150px; /* يرتفع القسم بمقدار 100px عند التنقل إليه */
}




/* 2. إعدادات عامة لجميع العناصر */
*{
  padding: 0; /* إزالة المسافة الداخلية */
  margin: 0;  /* إزالة المسافة الخارجية */
  box-sizing: border-box; /* يجعل الحواف أسهل في التحكم */
  list-style: none; /* إزالة النقاط من القوائم */
  text-decoration: none; /* إزالة التسطير من الروابط */
  font-family: "inter", sans-serif; /* تحديد الخط الأساسي */
  color: var(--color_heqding);
}

/* 3. تعريف ألوان وثوابت نستخدمها في المشروع */
:root {
  --main_color: #ff8716;          /* اللون الرئيسي */
  --p_color: #7b7b7b;             /* لون النصوص */
  --bg_color: #f3f3f3;            /* لون الخلفيات */
  --white_color: #fff;            /* الأبيض */
  --color_heqding: #121416;       /* لون العناوين */
  --border_color: #e5e5e5d5;      /* لون الحدود */
  --sale_color: #E51A1A;          /* لون التنبيهات أو التخفيض */
}

 

body{
  padding-top: 180px;
}

/* 4. تلوين العنصر span باللون الرئيسي */
span {
  color: var(--main_color);
}

/* 5. كل عنصر <p> (نصوص) يأخذ لون النص */
p {
  color: var(--p_color);
}

/* 6. تنسيق العناوين h1 إلى h6 */
h1, h2, h3, h4, h5, h6 {
  color: var(--color_heqding);  /* تحديد لون موحّد */
  font-family: "DM sans", sans-serif;  /* خط خاص بالعناوين */
}

/* 7. جعل الصور تأخذ عرض العنصر كاملاً */
img {
  width: 100%;
}

/* 8. إزالة الحدود والتركيز عند الضغط على الحقول */
input, select, button {
  border: none;
  outline: none;
}
.btns{
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn{
  padding: 10px 18px ;
  text-transform: capitalize;
  border-radius: 2px;
  cursor: pointer;
  background: var(--main_color);
  color: var(--white_color);
  display: flex;
  gap: 10px;
  align-items: center;
  transition: 0.3s;
  text-decoration: none; /* إزالة الخط السفلي من Link */
}
 .btn i{
color: var(--white_color);
 }

.btn:hover{
  scale: 1.1;
}

/* 9. تنسيق الحاوية العامة */
.container {
  width: 90%;             /* تأخذ 90% من عرض الشاشة */
  margin: auto;           /* توسيط الحاوية */
  max-width: 1350px;      /* لا تزيد عن هذا العرض */
}

/* 🧢 الهيدر */
/* #mainHeader {
  position: relative; /* أو static */
/*  transition: opacity 0.3s ease, visibility 0.3s ease;
}*/

#mainHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}




/* 📱 أيقونة القائمة */
.open_menu {
  transition: transform 0.3s ease-in-out;
}


 

/* منه تفعيل الرابط عند الضغط على ايقونة السلة*/
.product-link-wrapper {
  text-decoration: none;
  color: inherit;
  display: block;
}

.spie{
  width: 50px;
  height: 100px;
  
}

/* 10. جعل الحاوية أصغر إذا كانت الشاشة صغيرة */
@media (max-width: 1350px) {
  .container {
    width: 90%;
  }
}
/* 11. تصميم رأس الصفحة */
header {
  background: #fff;      /* خلفية بيضاء */
  position: fixed;       /* تثبيت الرأس في أعلى الشاشة */
  top: 0; left: 0; right: 0;
  box-shadow: 5px 8px 8px #d1d1d13b;
  z-index: 1000;
}


/* 12. محتوى الترويسة */
header .top_header .container {
  display: flex;                /* ترتيب أفقي */
  align-items: center;          /* محاذاة عمودية للعناصر */
  justify-content: space-between; /* توزيع العناصر بأقصى الأطراف */
  padding: 15px;
}
/* 13. شعار الموقع */
header .top_header .logo {
  width: 180px;
}
/* 14. صندوق البحث */
header .top_header .search_box {
  width: 610px;
  display: flex;
  align-items: center;
  border-radius: 2px;
  background: var(--bg_color); /* لون خلفية */
}
/* 15. حقل البحث */
header .top_header .search_box input {
  height: 55px;
  width: 400px;
  padding: 5px 15px;
  background: var(--bg_color);
}
/* 16. صندوق اختيار الفئة */
header .top_header .search_box .select_box {
  position: relative;
}
/* 17. خط بين قائمة الفئات وحقل البحث */
header .top_header .search_box .select_box::after {
  content: '';            /* عنصر زائف */
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 50%;
  background: #7e7b7b;
}
/* 18. القائمة المنسدلة */
header .top_header .search_box select {
  height: 55px;
  width: 190px;
  background: var(--bg_color);
  font-size: 16px;
  cursor: pointer;
  padding: 0 10px;
}
/* 19. زر البحث */
header .top_header .search_box button {
  height: 55px;
  width: 60px;
  background: var(--main_color);
  font-size: 18px;
  cursor: pointer;
}
/* 20. أيقونة العدسة داخل الزر */
header .top_header .search_box button i {
  color: var(--white_color);
}
/* 21. تنسيق مجموعة الأيقونات */
header .top_header .header_icons {
  display: flex;
  gap: 30px; /* مسافة بين الأيقونات */
}
/* 22. كل أيقونة بشكل منفصل */
header .top_header .header_icons .icon {
  position: relative;
  cursor: pointer;
}
/* 23. شكل الأيقونة */
header .top_header .header_icons .icon i {
  font-size: 24px;
}
/* 24. فقاعات الأرقام بجانب الأيقونات */
header .top_header .header_icons .icon .count {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background: var(--main_color);
  color: var(--white_color);
  font-size: 11px;
  border-radius: 100%; /* دائرة كاملة */
}
   


header .botton_header {
  border-top: 1px solid var(--border_color); /* إضافة خط علوي بلون متغير */
}

header .botton_header .container {
  display: flex; /* عرض العناصر بشكل أفقي (جنبًا إلى جنب) */
  align-items: center; /* محاذاة العناصر عموديًا في المنتصف */
  justify-content: space-between; /* توزيع العناصر بأقصى تباعد بينها */
}

header .botton_header nav {
  display: flex; /* عرض روابط التنقل بجانب بعضها */
  align-items: center; /* توسيطها عموديًا */
  gap: 50px; /* مسافة 50 بكسل بين كل عنصر */
  height: 60px; /* ارتفاع الناف بار */
}

header .botton_header .category_nav {
  width: 220px; /* تحديد العرض بـ 220 بكسل */
  position: relative; /* لتمكين القائمة المنسدلة من التمركز بناءً عليه */
  height: 100%; /* يأخذ كامل ارتفاع العنصر الأب */
}

header .botton_header .category_nav .category_btn {
  height: 100%; /* يأخذ كل الارتفاع */
  width: 100%; /* يأخذ كل العرض */
  border-radius: 0; /* بدون زوايا مستديرة */
  display: flex; /* العناصر داخل الزر بجانب بعضها */
  justify-content: space-between; /* توزيع النص والأيقونة في الطرفين */
  align-items: center; /* محاذاة المحتوى عموديًا */
  background: var(--main_color); /* خلفية بلون رئيسي */
  padding: 0 15px; /* مسافة داخلية يمين ويسار */
  cursor: pointer; /* عند المرور عليه يتغير شكل المؤشر */
}

header .botton_header .category_nav .category_btn p {
  color: var(--white_color); /* لون النص أبيض */
  font-weight: 600; /* سمك الخط متوسط إلى غامق */
  font-size: 15px; /* حجم الخط 15 بكسل */
}

header .botton_header .category_nav .category_btn i {
  color: var(--white_color); /* لون الأيقونة أبيض */
}

header .botton_header .category_nav .category_nav_list {
  position: absolute; /* موقعها يعتمد على الأب النسبي */
  top: 100%; /* تبدأ بعد الزر مباشرة */
  left: 0; /* من جهة اليسار */
  background: var(--white_color); /* خلفية بيضاء */
  width: 100%; /* نفس عرض الزر */
  border: 1px solid #999; /* إطار رمادي خفيف */
  border-top: 0; /* إزالة الإطار من الأعلى */
  display: flex; /* عرض الروابط عموديًا */
  flex-direction: column; /* عمودي */
  clip-path: polygon(0 0 , 100% 0 , 100% 0 , 0 0); /* إخفاء العنصر برسمة مخصصة */
  transition: 0.3s ease-in-out; /* حركة ناعمة عند الفتح */
}

header .botton_header .category_nav .category_nav_list.active {
  clip-path: polygon(0 0 , 100% 0 , 100% 100% , 0 100%); /* إظهار القائمة عند التفعيل */
}

header .botton_header .category_nav .category_nav_list a {
  padding: 14px 10px; /* حشوة داخلية */
  border-bottom: 1px solid var(--border_color); /* خط سفلي يفصل بين الروابط */
  font-size: 14px; /* حجم النص */
}

header .botton_header .category_nav .category_nav_list a:last-child {
  border-bottom: 0; /* إزالة الخط السفلي من آخر عنصر */
}

header .botton_header .category_nav .category_nav_list a:hover {
  background: #d0d0d0; /* عند المرور، تتغير الخلفية للرمادي */
}

header .botton_header .nav_links {
  display: flex; /* عرض الروابط أفقيًا */
  gap: 35px; /* فراغ 35 بكسل بين الروابط */
}

header .botton_header .nav_links li a {
  color: var(--color_heqding); /* لون النص */
  transition: 0.3s; /* انتقال ناعم عند التغيير */
}

header .botton_header .nav_links li:hover a,
header .botton_header .nav_links li.active a {
  color: var(--main_color); /* عند المرور أو التفعيل، يتغير اللون للرئيسي */
}



 /* slide */



.slider {
  position: relative; /* للسماح بوضع عناصر فوقه باستخدام position absolute */
}

.slider .container {
  display: flex; /* جعل العناصر (السلايدر + البانر) جنبًا إلى جنب */
  justify-content: space-between; /* توزيع العناصر بأقصى تباعد بينها */
}

.slider .banner_2 {
  width: 23%; /* تحديد عرض البانر الجانبي */
  height: 100%; /* يأخذ كامل ارتفاع الحاوية */
  object-fit: cover; /* لضمان ملء الصورة بدون تشويه */
}

.slider .banner_2 a {
  height: 100%; /* رابط يغطي كامل الصورة */
  width: 100%;
  display: block; /* يجعله عنصر كتلة يمكن الضغط عليه بالكامل */
}

.slider .container .slide-swp {
  width: 75%; /* عرض السلايدر الرئيسي */
  overflow: hidden; /* إخفاء المحتوى الخارج */
  position: relative; /* للتحكم بالموقع بالنسبة للعنصر الأب */
}


.swiper-wrapper {
  height: auto !important; /* جعل ارتفاع السلايدر تلقائي حسب المحتوى */
}




.slider .container .slide-swp .swiper-pagination span {
  background: #fff; /* لون النقاط غير الفعالة أبيض */
  opacity: 1; /* شفافية كاملة */
}

.swiper-pagination-bullet-active {
  background: var(--main_color) !important; /* لون النقطة الفعالة */
  width: 34px !important; /* جعلها أكبر وأعرض */
  height: 8px !important;
  border-radius: 30px !important; /* أطراف دائرية */
}

   /*banners_4*/


 .banners_4 {
  margin: 40px 0; /* مسافة فوق وتحت */
}

.banners_4 .container {
  display: flex; /* عرض العناصر (البنرات) بجانب بعضها */
  justify-content: space-between; /* توزيع البنرات على كامل العرض */
}

.banners_4 .container .box {
  width: 24%; /* كل بنر يأخذ تقريبًا ربع العرض */
  background: url(../imags/bg_banner3.jpg); /* صورة خلفية */
  background-size: cover; /* تغطية كاملة بدون تكرار */
  background-position: center; /* توسيط الصورة */
  border-radius: 5px; /* تدوير خفيف للأطراف */
  display: flex; /* عرض المحتوى داخل البنر بشكل أفقي */
  align-items: center; /* محاذاة عمودية في الوسط */
  gap: 15px; /* فراغ بين الصورة والنص */
  padding: 12px 10px; /* مسافة داخلية */
  position: relative; /* للسماح بوضع رابط يغطي العنصر بالكامل */
}

.banners_4 .container .box img {
  width: 100px; /* حجم صورة داخل البنر */
  transition: 0.3s; /* حركة ناعمة عند التمرير */
}

.banners_4 .container .box:hover img {
  scale: 1.05; /* تكبير خفيف للصورة عند المرور */
}

.banners_4 .container .box h5 {
  font-size: 16px; /* عنوان */
}

.banners_4 .container .box .sale {
  display: flex; /* عرض العناصر بجانب بعضها */
  align-items: center;
  gap: 5px;
  margin: 7px 0;
}

.banners_4 .container .box .sale span {
  font-size: 25px; /* حجم الرقم */
  font-weight: bold; /* سمكه */
}

.banners_4 .container .box h6 {
  font-size: 14px;
  font-weight: bold;
}

.banners_4 .container .box .link_btn {
  position: absolute; /* يغطي كامل البنر */
  width: 100%;
  height: 100%;
  background: transparent; /* شفاف لكنه يجعل كل البنر قابل للضغط */
}

 /* بداية قسم السلايدر */
.slide {
  margin-bottom: 70px; /* مسافة أسفل السلايدر */
}

.top_slide {
  position: relative; /* لتحديد موقع العناصر بداخله */
  margin-bottom: 20px; /* مسافة بعد العنوان */
  border-bottom: 3px solid var(--main_color); /* خط سفلي بلون رئيسي */
}

.top_slide h2 {
  position: relative; /* للسماح بإضافة شكل زخرفي داخله */
  text-transform: uppercase; /* تحويل النص إلى حروف كبيرة */
  background: var(--main_color); /* خلفية العنوان بلون رئيسي */
  color: var(--white_color); /* النص باللون الأبيض */
  font-size: 18px; /* حجم الخط */
  padding: 10px 40px; /* حشو داخلي */
  display: flex; /* لجعل الأيقونة والنص بجانب بعض */
  align-items: center; /* محاذاة عمودية في المنتصف */
  gap: 10px; /* فراغ بين الأيقونة والنص */
  width: max-content; /* يجعل عرض العنصر على حسب المحتوى */
}

.top_slide h2::before {
  content: ""; /* عنصر زخرفي قبل العنوان */
  position: absolute; /* تحديد موقع العنصر */
  width: 0;
  height: 0;
  top: 0;
  z-index: 9;
  border-left: 20px solid transparent; /* شكل مثلث مائل */
  background: #fff; /* خلفية بيضاء للمثلث */
  left: 0;
  border-bottom: 20px solid #e26e02; /* لون أسفل المثلث */
}

.top_slide h2 i {
  color: var(--white_color); /* لون أيقونة العنوان */
}

.slide .container {
  position: relative; /* لوضع أزرار السلايدر فوقه */
}

.slide .container .mySwiper {
  padding: 10px 0; /* مسافة داخلية أعلى وأسفل السلايدر */
}

.slide .container .mySwiper .btn_Swip {
  position: absolute; /* تحديد موقع زر التمرير */
  top: 30px; /* المسافة من الأعلى */
  right: 0; /* وضع الزر في أقصى اليمين */
  background: var(--bg_color); /* لون خلفية الزر */
  color: var(--color_heqding); /* لون الأيقونة أو السهم */
  font-weight: bold; /* سمك الخط */
  border-radius: 5px; /* زوايا مستديرة */
  height: 35px; /* ارتفاع الزر */
  width: 35px; /* عرض الزر */
  border: 1px solid var(--border_color); /* حافة الزر */
}

.slide .container .mySwiper .btn_Swip::after {
  font-size: 12px; /* حجم أيقونة السهم داخل الزر */
}

.slide .container .mySwiper .btn_Swip.swiper-button-prev {
  left: calc(100% - 80px); /* تحريك الزر السابق من اليسار */
}














  /* proudct cart style */


.mySwiper {
  overflow: hidden; /* إخفاء العناصر الزائدة عن العرض */
}

.product {
  background: #fff; /* خلفية بيضاء للبطاقة */
  padding: 20px 20px; /* مسافة داخلية */
  box-shadow: 5px 5px 10px #94949428; /* ظل خفيف */
  border: 1px solid var(--border_color); /* إطار بلون متغير */
  border-radius: 5px; /* زوايا مستديرة */
   cursor: pointer;
}

.product .sale_present {
  position: absolute; /* وضع مخصص */
  top: 10px;
  right: 10px;
  z-index: 2; /* يظهر فوق الصورة */
  background: #ed0505; /* خلفية حمراء */
  color: var(--white_color); /* النص أبيض */
  padding: 4px 10px; /* مساحة داخلية */
  font-size: 13px; /* حجم النص */
}

.product .img_product {
  position: relative;
  height: 180px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s; /* حركة ناعمة عند التمرير */
   will-change: transform;
}




.product:hover .img_product {
  scale: 1.1; /* تكبير الصورة عند التمرير */
   
}



/* شكل الصورة */
 .product .img_product img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}


.product .name_product {
  margin-bottom: 10px;
  color: var(--color_heqding);
  overflow: hidden;
  text-overflow: ellipsis; /* قطع النص الطويل */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* يظهر سطرين فقط */
  -webkit-box-orient: vertical;
}

.product .name_product a:hover {
  text-decoration: underline; /* تسطير الرابط عند المرور */
}

.stars {
  margin-bottom: 10px;
}

.stars i {
  color: var(--main_color); /* لون النجوم */
  font-size: 14px;
}

.price {
  display: flex;
  align-items: center;
  gap: 12px;
}

.price p {
  color: var(--main_color); /* السعر الجديد */
  font-weight: bold;
  font-size: 18px;
}

.price .old_price {
  color: var(--p_color); /* السعر القديم */
  text-decoration: line-through; /* خط عليه */
  font-size: 13px;
  font-weight: normal;
}

.product .icons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.product .icons .icon_product {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border_color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.product .icons .icon_product:hover {
  background: var(--main_color);
}

.product .icons .icon_product i {
  font-size: 14px;
}

.product .icons .icon_product:hover i {
  color: var(--white_color);
}

.product .icons .btn_add_cart {
  background: var(--main_color);
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--white_color);
  padding: 5px 10px;
  cursor: pointer;
  transition: 0.3s;
  border: 1px solid var(--main_color);
  
}

.product .icons .btn_add_cart i {
  color: var(--white_color);
}

.product .icons .btn_add_cart.active {
  color: var(--color_heqding);
  background: transparent;
  pointer-events: none;
}

.product .icons .btn_add_cart.active i {
  color: var(--main_color);
}

.product .icons .btn_add_cart:hover {
  scale: 1.05;
  background: #f47600;
}

 /*banners banners 3*/
 .banners{
  margin: 50px 0;
 }
 .banners .banners_boxs{
  display: flex;
  justify-content: space-between;
 }
 .banners .banners_boxs .box{
  width: 49%;
 }
 .banners .banners_boxs.banner_3_img .box{
  width: 32%;
 }

  /* start Footer */
  footer{
    background: var(--color_heqding);
  }

  footer .container{
    display: flex;
    justify-content: space-between;
    padding: 40px 0;
  }

  footer .container .big_row{
    width: 30%;
  }

  footer .container .big_row .logo_footer{
    width: 180px;
  }

  footer .container .big_row p{
    width: 90%;
    color:  #b1b1b1;
    font-size: 14px;
    line-height: 1.5;
    margin: 15px 0;
  }
  
  footer .container .big_row .icons_footer{
    display: flex;
    gap: 10px;
  }

  footer .container .big_row .icons_footer a{
  width:40px; 
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
   background: var(--main_color);
   border-radius: 3px;
   position: relative;
   top: 0;
   transition: 0.3s;
}
 footer .container .big_row .icons_footer a:hover{
  top: -5px;
 }

 footer .container .big_row .icons_footer a i{
  color: var(--white_color);
  font-size: 20px;
 }
   


  footer .container .row{
    width: 22%;
  }

  footer .container .row h4 {
    color: var(--white_color);
    font-size: 18px;
    ;margin-bottom: 20px;
  }
  footer .container .row .links{
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  footer .container .row .links a{
    color: #b1b1b1;
    font-size: 14px;
    position: relative;
    left: 0;
    transition: 0.3s;
  }

  footer .container .row .links a i{
    color: var(--main_color);
    font-size: 14px;
    margin-right: 5px;
  }


  footer .container .row .links a:hover{
    left: 8px;
    color: var(--main_color);
  }

  footer .bottom_footer{
    background: #1d1f22;
  }
  footer .bottom_footer .container{
    align-items: center;
    padding: 5px 0;
  }
  footer .bottom_footer p{
    color: var(--white_color);
  }
   footer .bottom_footer .paymentimg{
    width: 350px;
   }
   /* End Footer*/


   /* Start Cart*/


  
   
   .cart{
    position: fixed;
    top: 0;
    right: -350px;
    bottom: 0;
    z-index: 1100;
    background: var(--white_color);
    border-left: 1px solid var(--border_color);
    width: 350px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s ease-in-out ;
   }
 
    .cart.active{
   right: 0;  }
   
   .cart .top_cart{
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
   .cart .top_cart .close_cart i{
    cursor: pointer;
    font-size: 35px;
   }
   .cart .top_cart h3{
    font-size: 18px;
   }
   
  .cart .top_cart h3 span{
    color: var(--color_heqding);
  }
    .cart .items_in_cart{
      padding: 20px 0;
      border-block: 1px solid var(--border_color);
      margin-block:20px ;
      height: 100%;
      overflow-y: auto;
    }

    .cart .items_in_cart .item_cart{
      display: flex;
      gap: 20px;
      align-items: center;
      justify-content: center;
      height: 125px;
      border-bottom: 1px solid var(--border_color);
    }

    .cartr .items_in_cart .item_cart:last-child{
      border-bottom: 0;
      margin-bottom: 0;
    }

    .cart .items_in_cart .item_cart img{
      width: 80px;
    }
    .cart .items_in_cart .item_cart h4{
      margin-bottom: 10px;
      font-weight: 500;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .cart .items_in_cart .item_cart .delete_item i{
      font-size: 22px;
      cursor: pointer;
      transition: 0.3s;
    }
    .cart .items_in_cart .item_cart .delete_item i:hover{
      color: #E51A1A;
    }
    .cart .items_in_cart .item_cart .quantity_control{
      display: flex;
      align-self: center;
      gap: 5px;
      margin-top: 5px;
    }
    .cart .items_in_cart .item_cart .quantity_control span{
      font-size: 18px;
    min-width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .cart .items_in_cart .item_cart .quantity_control button{
      width: 27px;
      height: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 20px;
      border-radius: 2px;
      border: 1px solid var(--border_color);
    }
    .cart .bottom_cart .total{
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    } 
    .cart .bottom_cart .price_cart_toral{
      color: var(--main_color);

    }
    .cart   .button_cart{
      display: flex;
      gap: 20px; 
      
    }
    .cart   .button_cart .btn_cart {
      text-transform: uppercase;
      border: 2px solid var(--main_color);
      cursor: pointer;
      border-radius: 5px;
      transition: 0.3s;
    }
    
      .cart   .button_cart .trans_bg  {
       background: transparent;

      color: var(--color_heqding);
     } 

     .cart p.price_cart_total{
      color: var(--main_color);
      
     }
     
     /* End Cart */
      
 






      
     
/* إخفاء أزرار فتح/إغلاق القائمة بشكل افتراضي على الشاشات الكبيرة */
.close_menu,
.open_menu {
  display: none;
}


/* ===== Start Responsive Design ===== */
@media (max-width: 1100px) {
  body{
    padding-top: 200px;
  }

  /* جعل محتوى الهيدر العلوي يلتف إذا لم يكن هناك مساحة كافية */
  header .top_header .container {
    flex-wrap: wrap;
  }

  /* جعل مربع البحث يظهر في الأسفل ويأخذ عرض أكبر */
  header .top_header .search_box {
    /* order: 3; جعله يظهر بعد العناصر الأخرى */
    /* width: 80%; */
    margin: 20px auto 0;
  }

  /* تصغير حجم الشعار */
  header .top_header .logo {
    width: 140px;
  }

  /* تحديد عرض قائمة الاختيار في مربع البحث */
  header .top_header .search_box select {
    width: 200px;
  }

  /* جعل حقل الإدخال يأخذ ما تبقى من المساحة بجانب الـ select */
  header .top_header .search_box .input {
    width: calc(100% - 200px);
  }

  /* تصميم قائمة الروابط الرئيسية لتظهر كقائمة جانبية عند تصغير الشاشة */
  header .botton_header .nav_links {
    position: fixed;
    top: 0;
    left: -400px;
    bottom: -10000px;
    background: #fff;
    width: 400px; /* عرض القائمة الجانبية */
    flex-direction: column; /* ترتيب العناصر عموديًا */
    align-items: center; /* توسيط العناصر أفقيًا */
    padding-top: 100px; /* مسافة علوية للروابط */
    border: 1px solid #b5b5b596; /* إطار خفيف حول القائمة */
transition: 0.3s ease-in-out;
    
  }

  header .botton_header .nav_links.active{
    left: 0;
  }

  /* تنسيق كل عنصر في القائمة الجانبية */
  header .botton_header .nav_links li {
    font-size: 18px;
    height: auto;
  }

  /* زر إغلاق القائمة (يظهر داخل القائمة نفسها) */
  .close_menu {
    display: block;
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 30px;
   
  }

  /* زر فتح القائمة (يظهر خارج القائمة في مكان مناسب) */
  .open_menu {
    display: block;
    font-size: 25px;
    
  }

  /* تنسيق أيقونة زر فتح القائمة */
  .open_menu i {
    color: var(--main_color);
    border: 1px solid var(--main_color);
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 3px;
  }
  header .botton_header .category_nav{
    width: auto;
  }
   header .botton_header .category_nav .category_btn p{
    font-size: 13px;
    margin: 0 10px;
   }
    header .botton_header nav{
      gap: 20px;
    }

    .banners_4 .container{
      flex-wrap: wrap;
    }
        .banners_4 .container .box{
          width: 49%;
          margin-bottom: 20px;
          justify-content: space-around;
        }
}
/* ===== End Responsive Design ===== */


@media (max-width:1000px) {
  .slider .banner_2{
    display: none;
  }
  .slider .container .slide-swp{
    width: 100%;
  }

   footer .container{
    flex-wrap: wrap;
   }
    
  footer .container .big_row{
    width: 30;
    margin-bottom: 20px;
  }
  footer .container .row{
    width: 30;
    margin-bottom: 20px;
  }
  
}

@media (max-width: 800px) {

  .top_slide h2{
    font-size: 16px;
    padding: 10px 25px;
  }
  .product .name_product{
    font-size: 14px;
  }
  .price p{
    font-size: 16px;
  }
  .price .old_price{
    font-size: 12px;
  }
  .product .icons .btn_add_cart{
    font-size: 14px;
    padding: 3px 5px;
  }
   .banners .banners_boxs{
    flex-wrap: wrap;
   }
   .banners .banners_boxs .box{
    width: 100%;
    margin-bottom: 20px;
   }
   .banners .banners_boxs.banner_3_img .box{
    width: 49%;
   }


  footer .container .big_row {
    width: 50%;
    margin-bottom: 30px;
  }

  footer .container .row {
    width: 50%;
    margin-bottom: 30px;
  }

  footer .bottom_footer .container {
    flex-direction: column;
    gap: 10px;
  }
}




@media (max-width:700px) {
  header .botton_header .category_nav{
    display: none;
  }
   header .botton_header .search_box{
    width: 100%;
   }
    header .botton_header .search_box select{
      width: 140px;
    }
  header .botton_header .search_box input{
    width: calc(100% -140px);
  }
 header .botton_header .nav_links{
    
  width: 100%;
   left: -100%;

}




.cart{
  width: 100%;
  right: -100%;
}
.banners_4 .container .box{
  width: 100%;
}
.banners_4 .container .box h5{
  font-size: 10px;
}
.banners_4 .container .box h6{
  font-size: 13px;
}

.banners .banners_boxs.banner_3_img .box{
  width: 100%;
}





.product .icons .btn_add_cart.active{
  font-size: 13px;
}
.product .icons .btn_add_cart.active i{
  font-size: 14px;
}
footer .container .row{
  width: 100%;
}
footer .container .big_row{
  width: 100%;
} 

.spic{
  width: 50px;
  height: 100px;
  
}
 .spie{
    width: 50px;
  height: 200px;
 }
 .product .img_product {
    position: relative;
    height: 180px;
     padding: 0px; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    will-change: transform;
}
#Perfume_section,#The_discounts_section,#Cosmetics_section,#Cleaning_section {
  scroll-margin-top: 240px; /* يرتفع القسم بمقدار 100px عند التنقل إليه */
}

}



@media (max-width: 500px) {
  body{
    padding-top: 170px;
  }
 
  /* جعل محتوى الهيدر العلوي يلتف إذا لم يكن هناك مساحة كافية */
  header .top_header .container {
    flex-wrap: wrap;
    padding: 15px 15px;
    margin: 10px;
  }

  /* جعل مربع البحث يظهر في الأسفل ويأخذ عرض أكبر */
  header .top_header .search_box {
    order: 3; /* جعله يظهر بعد العناصر الأخرى */
    width: 70%;
    margin: 20px auto 0;
  }

  /* تصغير حجم الشعار */
  header .top_header .logo {
    width: 140px;
  }

  /* تحديد عرض قائمة الاختيار في مربع البحث */
  header .top_header .search_box select {
    width: 100px;
  }

  /* جعل حقل الإدخال يأخذ ما تبقى من المساحة بجانب الـ select */
  header .top_header .search_box .input {
    width: calc(100% - 200px);
    padding-right: 0;
  }
 header .top_header .search_box input {
    height: 55px;
    width: 400px;
    padding: 0px 0px;
    background: var(--bg_color);
    left: 100px;
 }
 .btn{
  padding: 5px 10px;
 }
 #search{
  width: 120px;
 } 

 .spic{
  width: 50px;
  height: 100px;
  
} 

  
 }


 
  /* checkout Page*/



 .checkout{
  margin: 50px 0;
 }
 .checkout .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .checkout .ordersummary{
  width: 45%;
  padding: 0 20px;
  border: 2px solid var(--border_color);
  border-radius: 5px;
  box-shadow: 0px 8px 10px #c0bfbf44;
 }
.checkout .ordersummary h1{
  border-bottom: 1px solid var(--border_color);
  padding: 20px 0;
  margin-bottom: 20px;
  color: var(--main_color);

 }
 .checkout .ordersummary .items{
  height: 350px;
  overflow-y: auto;

 }

 .checkout .ordersummary .item_cart{
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  height: 125px;
  border-bottom: 1px solid var(--border_color);
  padding-right: 20px;
 }

 .checkout .ordersummary .item_cart:last-child{
  border-bottom: 0;
 }

 .checkout .ordersummary .item_cart .image_name{
  display: flex;
  align-items: center;
  gap: 20px;

 }
.checkout .ordersummary .item_cart img{
 width: 80px;
 }

.checkout .ordersummary .item_cart h4{
  margin-bottom: 10px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.checkout .ordersummary .delete_item i{
  font-size: 22px;
  cursor: pointer;
  transform: 0.3s;
}
.checkout .ordersummary .delete_item i:hover{
  color: #E51A1A;
  scale: 1.1;
}

.checkout .ordersummary .quantity_control {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  ;

}
.checkout .ordersummary .quantity_control span{
  font-size: 18px;
  min-width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg_color);
  padding: 3px 0;
}

.checkout .ordersummary .quantity_control button{
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  border-radius: 2px;
  border: 1px solid  var( --border_color );
}

.checkout .ordersummary .bottom_summary{
border-top: 1px solid var(--border_color);
padding-top: 25px;
}
.checkout .ordersummary .shop_table{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between ;
}
.checkout .ordersummary .shop_table p{
  font-size: 20px;
  color: var(--color_heqding);
  text-transform: capitalize;
}
.checkout .ordersummary .shop_table span{
  font-weight: bold;
  font-size: 20px;
}
.checkout .ordersummary .button_div{
  border-top: 1px solid var(--border_color);
  padding: 30px;
}
.checkout .ordersummary .button_div button{
  width: 100%;
  background: var(--main_color);
  color: var(--white_color);
  border: 2px solid var(--main_color);
  padding: 15px;
  outline: none;
  border-radius: 3px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.checkout .ordersummary .button_div button:hover{
  background: transparent;
  color: var(--main_color);
}
.checkout .input_info{
  width: 40%;
}
.checkout .input_info h2{
  padding: 10px 20px;
  background:  var(--main_color);
  text-transform: capitalize;
  color:  var(--white_color);
}
.checkout .input_info .address,
.checkout .input_info .coupon{
  margin-bottom: 25px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border_color);
  box-shadow: 0px 8px 10px #c0bfbf44;
}

.checkout .input_info .coupon .btn_coupon{
  text-align: center;
  padding-bottom: 20px;
}
.checkout .input_info .coupon .btn_coupon button{
  width: 50%;
  background: var(--main_color);
  color: var(--white_color);
  border: 2px solid var(--main_color);
  padding: 12px 0;
  outline: none;
  border-radius: 2px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.checkout .input_info .coupon .btn_coupon button:hover{
  background: transparent;
  color: var(--main_color);
}

.checkout .input_info .inputs{
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
}
.checkout .input_info .inputs label{
  color: var(--color_heqding);
  font-size: 14px;
  text-transform: capitalize;
}
.checkout .input_info .inputs input{
  margin: 8px 0 22px;
  padding: 15px 10px;
  outline: none;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  transition: 0.3s;
}
.checkout .input_info .inputs input:focus{
  border-color: var(--main_color);
}

/* Responsive Check Out Page */
@media  (max-width:1000px) {
  .checkout .container{
    flex-direction: column;
    gap: 50px;
  }  
  .checkout .ordersummary,
  .checkout .input_info{
    width: 80%;
  }
}

@media  (max-width:1000px) {
   .checkout .ordersummary,
  .checkout .input_info{
    width: 80%;
  }
  .checkout .input_info h2{
    font-size: 20px;
  }

}