body {
   background-color: #fff;
   color: #333;
   font-family: Arial, sans-serif;

 }

 .navbar {
   background-color: black;

 }

 .navbar-brand {
   font-weight: bold;
   justify-content: center;
   text-align: center;


 }

 .header-text {
   padding: 50px 0;
   text-align: center;
   background-color: #e9ecef;
 }

 .product-img {
   width: 100%;
   height: 180px;
   object-fit: cover;
   border-radius: 10px;
 }

 .social-icon {
   width: 24px;
   height: 24px;
   filter: brightness(0) invert(1);
   margin: 0 8px;
   vertical-align: middle;
 }

 nav {
   padding: 40px 0;
   font-size: 18px;

 }

 html {
   scroll-behavior: smooth;
 }

 .shop-now-btn {
   display: inline-block;
   padding: 12px 24px;
   background-color: #111;
   /* لون الزر */
   color: #fff;
   text-decoration: none;
   border-radius: 6px;
   font-size: 16px;
   font-weight: bold;
   transition: 0.3s ease;
   border: 2px solid #111;
 }

 .shop-now-btn:hover {
   background-color: transparent;
   color: white;
   border: 2px solid #113a72;
 }

 .contact-section {
   background: linear-gradient(to bottom right, #f7f7f7, #eaeaea);
   padding: 60px 20px;
   text-align: center;
   border-top: 1px solid #ddd;
 }

 .contact-section h2 {
   font-size: 32px;
   margin-bottom: 30px;
   color: #222;
   font-weight: 600;
   letter-spacing: 1px;
 }

 .contact-form {
   max-width: 500px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 15px;
 }

 .contact-form input,
 .contact-form textarea {
   padding: 14px;
   font-size: 15px;
   border: 1px solid #ccc;
   border-radius: 6px;
   transition: border-color 0.3s;
 }

 .contact-form input:focus,
 .contact-form textarea:focus {
   border-color: #000;
   outline: none;
 }

 .contact-form button {
   background-color: #000;
   color: #fff;
   padding: 14px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-weight: bold;
   transition: background 0.3s ease;
 }

 .contact-form button:hover {
   background-color: #333;
 }

 .product-link {
   text-decoration: none;
   color: inherit;
   display: block;
 }

 .colors-available {
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   gap: 8px;
   margin: 10px 0;
   justify-content: center;
 }

 .label {
   margin-right: 5px;
 }

 .color-dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid #ccc;
 }

 .color-dot.white {
   background-color: #fff;
 }

 .color-dot.blue {
   background-color: #113a72;
 }

 .social-icon {
   width: 25px;
   margin: 0 10px;
 }

 .colors-available {
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   gap: 8px;
   margin: 10px 0;
   justify-content: center;
 }

 .label {
   margin-right: 5px;
 }

 .color-dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid #ccc;
 }

 .color-dot.redblue {
   background-color: #a50044
 }

 .color-dot.pink {
   background-color: pink;
 }

 .payment-icon {
   width: 100px;
 }

 .payment-icon2 {
   width: 100px;
   height: 35px;
 }

 .colors-available {
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   gap: 8px;
   margin: 10px 0;
   justify-content: center;
 }

 .label {
   margin-right: 5px;
 }

 .color-dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid #ccc;
 }

 .color-dot.red {
   background-color: red
 }

 .color-dot.black {
   background-color: black;
 }

 .colors-available {
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   gap: 8px;
   margin: 10px 0;
   justify-content: center;
 }

 .label {
   margin-right: 5px;
 }

 .color-dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid #ccc;
 }

 .color-dot.red {
   background-color: red
 }

 .color-dot.white {
   background-color: white;
 }

 .colors-available {
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: #333;
   gap: 8px;
   margin: 10px 0;
   justify-content: center;
 }

 .label {
   margin-right: 5px;

 }

 .color-dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 1px solid #ccc;
 }

 .color-dot.bluee {
   background-color: #6cabdd
 }

 .color-dot.whitee {
   background-color: #ffffff;
 }

 .product-img {
   width: 100%;
   height: 350px;
   object-fit: cover;
   border-radius: 12px;
 }

 .card {
   background-color: #fff;
   border: 1px solid #ddd;
   box-shadow: 0 0px 10px rgba(0, 0, 0, 0.05);
   transition: transform 0.2s;
   height: 100%;
   max-height: 400px;
   overflow: hidden;
   padding: 10px;
 }

 .card:hover {
   transform: scale(1.03);
 }

 .card-body {
   padding: 5px;
 }

 .colors-available {
   margin-top: 10px;
   margin-bottom: 10px;
 }

 .color-dot {
   display: inline-block;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   margin-left: 5px;
   border: 1px solid #ccc;
 }

 /* الألوان */
 .color-dot.white {
   background-color: white;
 }

 .color-dot.blue {
   background-color: #113a72;
 }

 .color-dot.redblue {
   background: linear-gradient(45deg, #a50044 50%, navy 50%);
 }

 .color-dot.pink {
   background-color: #f4a5c2;
 }

 .color-dot.red {
   background-color: red;
 }

 .color-dot.black {
   background-color: black;
 }

 .color-dot.whitee {
   background-color: white;
 }

 .color-dot.bluee {
   background-color: #50a4f4;
 }












body{
  background-color: white;
}
.product-container{
  gap: 0;
}
.product-card{
  margin: 0;
}





















 #products .card {
   border: none;
   transition: transform 0.3s ease;
   cursor: pointer;
   height: 100%;

 }

 #products .card:hover {
   transform: scale(1.03);
 }

 .product-img {
   width: 100%;
   height: 350px;
   object-fit: cover;
   border-radius: 10px;

 }

 /* المسافات بين الكروت */
 .row.g-4>[class^="col"] {
   display: flex;
   justify-content: center;
 }

 .card-body {
   padding-top: 15px;
 }

 .colors-available {
   margin-top: 10px;
   margin-bottom: 10px;
   white-space: nowrap;
   display: inline-block;
 }

 .color-dot {
   display: inline-block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   margin: 0 3px;
   border: 1px solid #000;
 }

 /* مثال لألوان */
 .color-dot.white {
   background: white;
 }

 .color-dot.blue {
   background: #113a72;
 }

 .color-dot.red {
   background: red;
 }

 .color-dot.black {
   background: black;
 }

 .color-dot.pink {
   background: pink;
 }

 .color-dot.bluee {
   background: #5bc0f8;
 }

 .color-dot.whitee {
   background: #f1f1f1;
 }

 /* لجعل الكروت متساوية الطول */
 .card {
   display: flex;
   flex-direction: column;
   height: 100%;
 }


 @media(max-width:767px) {
   .navbar-brand {
     font-weight: bold;
     justify-content: center;
     text-align: center;


   }
 }

 @media (max-width: 767px) {
   .product-img {
     height: 250px;
   }

   .card-body h5 {
     font-size: 14px;
   }

   .card-body p {
     font-size: 13px;
     margin: 5px 0;
   }

   .btn.btn-dark {
     font-size: 13px;
     padding: 5px 10px;
   }

   .color-dot {
     width: 12px;
     height: 12px;
   }

   .label {
     font-size: 11px;

   }
 }



 /* .container {
   max-width: 90%;

   margin: 0 auto;
   position: relative;
   overflow: hidden;
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 
   font-family: 'Arial', sans-serif;
   color: black;
 } */

 /* Slides wrapper */
 .slides {
   display: flex;
   transition: transform 0.8s ease-in-out;
   will-change: transform;
 }

 /* Each slide */
 /* .slide {
   min-width: 100%;
   height: 100vh;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 } */




 /* The Get It Now button container */
 .btn-container {
   position: absolute;
   top: 70%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   background-color: white;
   padding: 12px 32px;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   font-weight: 600;
   letter-spacing: 0.15em;
   cursor: pointer;
   transition: all 0.3s ease;
   user-select: none;
 }

 .btn-container:hover {
   background-color: #cc1f1f;
   color: white;
   box-shadow: 0 6px 20px rgba(204, 31, 31, 0.6);
 }

 /* Bottom discounted text */

 /* Title below slider */
 .title-text {
   text-align: center;
   margin-top: 25px;
   font-size: 1.35rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   color: #292929;
   padding: 0 10px;
   user-select: none;
   direction: rtl;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 a {
   text-decoration: none;
   color: #000;
 }

 .discount-banner {
   background-color: white;
   /* خلفية بيضاء */
   color: black;
   /* لون الخط */
   font-weight: bold;
   /* خط سميك */
   text-align: center;
   /* في المنتصف */
   padding: 10px 0;
   /* مسافة داخلية */
   font-size: 16px;
   /* حجم الخط */
   border-bottom: 1px solid #ddd;
   justify-content: center;
   /* خط فاصل تحت */
 }
/* .hero-slider .slide{
  width: 100%;
  height: 100vh;
  max-height: 700px;
  object-fit: cover;
} */
 @media (max-width: 767px) {
   .slide img {
     object-fit: contain;
     background-color: #000;
     /* لون خلفية للصورة لو فيه فراغات */
   }
 }

 @media (max-width: 767px) {
   .slide {
     height: 70vh;
   }
 }
  @media (max-width: 767px) {
  .discount-banner {
   background-color: white;
   /* خلفية بيضاء */
   color: black;
   /* لون الخط */
   font-weight: bold;
   /* خط سميك */
   text-align: center;
   /* في المنتصف */
   padding: 10px 0;
   /* مسافة داخلية */
   font-size: 16px;
   /* حجم الخط */
   border-bottom: 1px solid #ddd;
   justify-content: center;
   /* خط فاصل تحت */
   font-size: 16px;
 }
 }

 /* ==== HERO SLIDER - Fix: show ONE slide at a time ==== */
.hero-slider {
  overflow: hidden;
  position: relative;
}

.hero-slider .slides {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.hero-slider .slide {
  flex: 0 0 100%;   /* كل سلايد ياخد 100% من العرض */
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* خلي الصورة بجودة وبدون تمدد مبالغ فيه */
.hero-slider .slide img {
  width: 100%;
  height: auto;           /* مهم: مش 100% عشان ما يطلعش زحمة */
  max-height: 70vh;       /* يمنع الصورة من أن تكون أطول من الشاشة */
  object-fit: cover;      /* يملأ الإطار بدون تشويه (قص معقول) */
  display: block;
}
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 60px 0;
}

.divider-line {
  flex: 1;
  border: none;
  border-top: 2px solid #000; /* ممكن تخليها #FFD700 (أصفر) لو عايز تمشي مع اللوجو */
}

.divider-title {
  margin: 0;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 2px;
  color: #222; /* غامق أنيق */
  text-transform: uppercase;
}
/* ===================== SOLD OUT STYLE ===================== */
.card.sold-out {
  position: relative;
  opacity: 0.6;             /* يخلي الكارت باهت */
  pointer-events: none;     /* يمنع أي ضغط على الكارت أو اللينك */
}

.card.sold-out::after {
  content: "SOLD OUT";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(50, 50, 50, 0.8);
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 5px;
  text-align: center;
}

.product-link.disabled-link {
  pointer-events: none; /* يمنع اللينك نفسه */
}
/* =================== END SOLD OUT STYLE =================== */
/* أقل طول على موبايل (بدون قص مبالغ فيه) */
@media (max-width: 767px) {
  .hero-slider .slide img {
    max-height: 60vh;
    object-fit: cover; /* أو contain لو عايز تشوف الصورة كاملة مع مساحات جانبية */
  }
  .discount-banner{
    font-size: 14px;
  }
}