body {
  font-family: 'Roboto', sans-serif;
}


/* CSS Customizations  navbar تنسيق خاص بالناف بار  */

        /* Increase the logo size */
        .navbar-brand img {
          width: 130px; /* Increased logo width */
          height: auto; /* Maintain aspect ratio */
      }

      /* Add padding to navbar items */
      .navbar-nav .nav-link {
          padding: 0.5rem 1rem;
      }

      /* Style for search input */
      .form-control.bd {
          border: 2px solid #dc3545; /* Add red border */
          border-radius: 20px; /* Rounded input box */
      }

      /* Style for search button */
      .btn-outline-danger {
          border-radius: 20px; /* Rounded button */
      }


      /* تنسيق العنصر عند النقر عليه */
.nav-link.active {
  color: #dc3545 !important; /* تغيير لون النص إلى الأحمر */
  font-weight: bold; /* جعل النص بارز */
  border-bottom: 2px solid #dc3545; /* إضافة خط سفلي */
}


/*-----------------------------------------------------------------*/

/*تنسيق خاص بكروت المنتجات الأساسيه*/
/* ضبط حجم الصور */
.card-img-top {
  width:100%;
  height: 250px; /* توحيد ارتفاع الصورة */
  object-fit: contain; /* تناسب الصورة داخل الإطار بدون تشويه */
  padding: 10px;
}

/* توحيد ارتفاع الكروت */
.card {
  min-height: 250px; /* تحديد ارتفاع أدنى للكروت */
  border: 1px solid #ddd; /* حدود خفيفة */
  border-radius: 8px; /* حواف دائرية */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف */
}


/* توسيط النصوص */
.card-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* تحسين الأزرار */
.btn-outline-danger {
  font-weight: bold;
}


/*--------------------------------تنسيق خاص بال ٣ كروت في بدايه الصفحه الرئيسيه-------------------------------------*/
/* إجبار الصورة على تغطية المربع بالكامل */
.img-fit-productcard {
  width: 100%; /* جعل العرض يغطي البطاقة بالكامل */
  height: 100%; /* جعل الارتفاع يغطي البطاقة بالكامل */
  object-fit: contain; /* تغطية كاملة دون تشويه */
  position: absolute; /* تثبيت الصورة داخل البطاقة */
  top: 0;
  left: 0;
}

/* تحسين التصميم العام للبطاقات */
.card-productcard {
  overflow: hidden; /* منع الأجزاء الزائدة من الظهور */
  height: 300px; /* ارتفاع ثابت للبطاقة */
  border-radius: 7px; /* حواف دائرية للبطاقة */
  position: relative; /* لضمان أن الصورة مثبتة داخل البطاقة */
  display: flex; /* محاذاة المحتوى */
  align-items: center; /* مركزية العناصر */
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* تأثير عند التمرير */
  z-index: 1; /* ✅ تأكد إن الصورة خلف النص */
}

/* تأثير عند التمرير فوق البطاقات */
/*
.card:hover {
  transform: scale(1.05); /* تكبير البطاقة قليلاً */
 /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* زيادة الظل */


/*---------------------------------------------------------------------*/
/* تنسيق عنصر التلت دوائر الكارت العام  تصميم التلت كروت  */
/* تصميم الكارت العام */
/* تصميم الكارت الأساسي */
.card-coach {
  background-color: #fff; /* لون خلفية الكارت أبيض */
  padding: 20px; /* مسافة داخلية من كل الجوانب */
  border-radius: 15px; /* زوايا الكارت دائرية */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف حول الكارت */
  transition: transform 0.3s, box-shadow 0.3s; /* تأثير ناعم عند المرور بالماوس */
  text-align: center; /* توسيط المحتوى داخل الكارت */

  height: 100%; /* الكارت ياخد أقصى طول داخل العمود */
  display: flex; /* ترتيب المحتوى داخليًا باستخدام Flexbox */
  flex-direction: column; /* ترتيب عمودي (من فوق لتحت) */
  align-items: center; /* توسيط أفقي للمحتويات */
  justify-content: flex-start; /* المحتوى يبدأ من أعلى الكارت */
}

/* تصميم صورة دائرية داخل الكارت */
.card-coach img {
  width: 180px; /* عرض الصورة */
  height: 180px; /* ارتفاع الصورة */
  border-radius: 50%; /* تحويل الصورة إلى شكل دائري */
  object-fit: cover; /* تقطيع الصورة لتملأ الدائرة دون تشوه */
  margin-bottom: 15px; /* مسافة بين الصورة والعنوان */
}

/* تأثير عند تحريك الماوس على الكارت */
.card-coach:hover {
  transform: translateY(-10px); /* تحريك الكارت لأعلى شوية */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* تكبير الظل لتأثير أوضح */
}

/* تنسيق عنوان الكارت */
.card-coach h5 {
  font-size: 1.2rem; /* حجم الخط للعناوين */
  margin-bottom: 10px; /* مسافة بين العنوان والوصف */
  color: #dc3545; /* لون أحمر مشابه لـ Bootstrap danger */
}

/* تنسيق الفقرة (الوصف) داخل الكارت */
.card-coach p {
  font-size: clamp(0.8rem, 1vw, 1rem); 
  /* شرح:
     - clamp(): يحدد حجم الخط التلقائي حسب المساحة المتاحة
     - الحد الأدنى 0.8rem، والحد الأقصى 1rem
     - 1vw = 1% من عرض الشاشة، يعني يتأقلم مع حجم الكارت */

  color: #555; /* لون رمادي للنص */
  text-align: center; /* توسيط الفقرة داخل الكارت */
  line-height: 1.5; /* تحسين تباعد الأسطر لسهولة القراءة */
}


/*-------------------------------------------------------------------------*/
/*تنسيق الكروت الصغيره الخاصه بالعروض والبانر */
/* تحسين عرض الصور تنسيق البانر الجانبي والكروت الصغيه للعروض المميزه   */
.product-card img {
  width: 200px; /* اجعل الصورة تأخذ العرض الكامل */
  height: 170px; /* اجعل الطول تلقائي لتناسب النسبة */
  border-radius: 10px; /* إضافة حواف مستديرة إذا لزم الأمر */
}

/* تحسين ارتفاع الكروت */
.product-card {
  width: 230px; /* عرض الكارت */
  height: 240px; /* ارتفاع الكارت */
  padding: 10px; /* المسافة الداخلية */
  background-color: #fff; /* لون الخلفية */
  border-radius: 10px; /* الحواف المستديرة */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* الظل */
  text-align: center; /* محاذاة النصوص */
}

.product-card h6 {
  font-size: 13px;
  font-weight: bold;
}

.product-card p {
  margin: 10px 0;
}

.product-price {
  font-size: 14px;
  color: #c03333; /* لون السعر الحالي */
  font-weight: bold;
}

.product-old-price {
  font-size: 14px;
  color: #888;
  text-decoration: line-through;
}

.product-card:hover {
  transform: scale(1.1); /* تكبير الكارت بنسبة 10% */
  transition: transform 0.3s ease; /* حركة سلسة */
}


/* تحسين البانر */
.weekly-discount img {
  height: 600px; /* حجم مخصص للبانر */
  object-fit: cover; /* اجعل الصورة تغطي البانر بشكل متناسب */
  border-radius: 10px 10px 0 0;
}

.weekly-discount .card-body {
  padding: 20px;
}


/*--------------------------------------------------------------------*/

/* تنسيق خاص بكروت المنتجات الشفافه */
 

/* تنسيق عام علي جميع كروت المنتجات الشفافه الحلوه في الصفحه الرئيسيه ويشم الايفون والماك بوك والآيباد  */

.custom-container .card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.custom-container .card img {
  width: 100%;
  height: auto;
  padding: 15px;
}
.custom-container .card h6 {
  font-size: 14px;
  margin: 10px 0;
}


/*---------------------------------------------------------*/

/*--------------------------------------------------------------------*/


/* تنسيق حاص بالبانر الي بالعرض الخاص  بالآيفون iphone   */

 /* لضبط حجم الصورة بناءً على حجم الكونتينر */
/* إعداد الكونتينر */
.iphone-banner-container {
  width: 100%; /* عرض الكونتينر بالكامل */
  max-width: 1200px; /* أقصى عرض للكونتينر */
  margin: 0 auto; /* توسيط الكونتينر */
  border-radius: 15px; /* حواف دائرية */
  overflow: hidden; /* منع أي محتوى زائد من الخروج */
  position: relative; /* لجعل الصورة متناسقة داخله */
  height: 300px; /* تحديد ارتفاع الكونتينر بشكل صريح */
}

/* إعداد الصورة */
.banner-wrapper img {
  width: 100%; /* جعل الصورة تغطي عرض الكونتينر */
  height: 100%; /* جعل الصورة تغطي ارتفاع الكونتينر */
  object-fit: cover; /* تغطية الكونتينر بالكامل دون تشويه */
  display: block; /* إزالة أي مسافات افتراضية للصورة */
}

/* و الخط الفاصل  تنسيقات البانر */
.iphone-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  
}

.iphone-divider::before,
.iphone-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.iphone-divider:not(:empty)::before {
  margin-right: 10px;
}

.iphone-divider:not(:empty)::after {
  margin-left: 10px;
}



/*--------------------------------------------------------------------*/


/* --------------------تنسيق زرار ال more details iphone ------------ */
/* تنسيق الزرار */
.moredetailsiphone-btn {
  padding: 15px 20px;
  border-radius: 20px; /* لتصميم دائري */
  font-weight: bold;
  display: inline-block;
}

.container-moredetailsiphone.text-center {
  text-align: center; /* لضمان تمركز العناصر داخل الحاوية */
}

/* عند تمرير الماوس */
.moredetailsiphone-btn:hover {
  background-color: #dc3545; /* لون الخلفية عند التمرير */
  color: white; /* لون النص أبيض */
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); /* ظل خفيف */
}

/* الآيقونة */
.moredetailsiphone-btn i {
  font-size: 14px; /* حجم الآيقونة */
}

/* ---------------نهايه تنسيق زرازر ال more details iphone ----------------- */


/* تنسيق بانر بالعرض  خاص بالما ك بوك Macbook  */

 /* الحاوية العامة للبانر */

 .macbook-banner-container {
  max-width: 1200px; /* عرض الحاوية */
  margin: 20px auto; /* توسيط الحاوية وإضافة مسافة علوية وسفلية */
  padding: 0; /* إزالة الحشوات */
}
/* الغلاف الداخلي للبانر */
.banner-wrapper {
  overflow: hidden; /* منع خروج المحتوى خارج الحاوية */
  border-radius: 15px; /* حواف دائرية للحاوية */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل لإبراز الحاوية */
  transition: transform 0.3s ease; /* تأثير الحركة عند التفاعل */
}
/* الصورة داخل الحاوية */
.banner-wrapper img {
  width: 100%; /* جعل الصورة تأخذ عرض الحاوية بالكامل */
  height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  object-fit: cover; /* تغطية متناسقة داخل الحاوية */
}
/* و الخط الفاصل  تنسيقات البانر */
.macbook-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  
}

.macbook-divider::before,
.macbook-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.macbook-divider:not(:empty)::before {
  margin-right: 10px;
}

.macbook-divider:not(:empty)::after {
  margin-left: 10px;
}



/*--------------------------------------------------------------------*/


/* --------------------تنسيق زرار ال more details Macbook ------------ */
/* تنسيق الزرار */
.moredetailsMacbook-btn {
  padding: 15px 20px;
  border-radius: 20px; /* لتصميم دائري */
  font-weight: bold;
  display: inline-block;
}

.container-moredetailsMacbook.text-center {
  text-align: center; /* لضمان تمركز العناصر داخل الحاوية */
}

/* عند تمرير الماوس */
.moredetailsMacbook-btn:hover {
  background-color: #dc3545; /* لون الخلفية عند التمرير */
  color: white; /* لون النص أبيض */
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); /* ظل خفيف */
}

/* الآيقونة */
.moredetailsMacbook-btn i {
  font-size: 14px; /* حجم الآيقونة */
}

/* ---------------نهايه تنسيق زرازر ال more details Macbook ----------------- */


/*--------------------------------------------------------------------*/
/*ipad تنسيق خاص بالبانر الي بالعرض لعرض منتجات الايباد  */
/* تنسيق كروت البانر الخاصة بالآيباد */
.ibad-banner-card {
  background-color: #f8f9fa; /* لون الخلفية رمادي فاتح */
  border-radius: 10px; /* زوايا مستديرة للكارت */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ظل خفيف حول الكارت */
  padding: 15px; /* مسافة داخلية للكارت */
  text-align: center; /* محاذاة المحتوى في المنتصف */
}

/* تنسيق صورة البانر داخل كارت البانر */
.ipad-banner-card img {
  border-radius: 10px; /* زوايا الصورة مستديرة */
  width: 100%; /* العرض بالكامل */
  max-height: 520px; /* أقصى ارتفاع للصورة */
  object-fit: cover; /* ملء الكارت مع الحفاظ على الشكل */
}

/* عنوان داخل كارت البانر */
.ipad-banner-card h4 {
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
}

/* وصف داخل كارت البانر */
.ipad-banner-card p {
  font-size: 14px;
  color: #6c757d; /* لون رمادي للنص */
  margin-top: 10px;
}

/* خط فاصل مزخرف */
.ipad-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  width: 100%;
}

/* الخط اللي بيظهر على الجانبين */
.ipad-divider::before,
.ipad-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd; /* خط رفيع رمادي */
}

/* مسافة يمين النص */
.ipad-divider:not(:empty)::before {
  margin-right: 10px;
}

/* مسافة شمال النص */
.ipad-divider:not(:empty)::after {
  margin-left: 10px;
}

/* -------------------------------------------------------------------- */

/* تنسيق صور الآيباد داخل كروت المنتجات (مش البانر) */
.ipad-img {
  height: auto !important; /* خلي الصورة تاخد ارتفاع تلقائي */
  max-height: 280px !important; /* أقصى ارتفاع للصورة */
  width: 100% !important; /* خلي الصورة تاخد كل عرض الكارت */
  object-fit: contain !important; /* عرض الصورة بالكامل بدون قص */
  display: block !important; /* خلي الصورة عنصر بلوك (يبدأ من سطر جديد) */
  margin: 0 auto !important; /* وسّط الصورة داخل الكارت */
}


/* --------------------تنسيق زرار ال more details ipads ------------ */
/* تنسيق الزرار */
.moredetailsipads-btn {
  padding: 15px 20px;
  border-radius: 20px; /* لتصميم دائري */
  font-weight: bold;
  display: inline-block;
}

.container-moredetailsipads.text-center {
  text-align: center; /* لضمان تمركز العناصر داخل الحاوية */
}

/* عند تمرير الماوس */
.moredetailsipads-btn:hover {
  background-color: #dc3545; /* لون الخلفية عند التمرير */
  color: white; /* لون النص أبيض */
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); /* ظل خفيف */
}

/* الآيقونة */
.moredetailsipads-btn i {
  font-size: 14px; /* حجم الآيقونة */
}

/* ---------------نهايه تنسيق زرازر ال more details ipad ----------------- */


/*--------------------------------------------------------------------*/



/*--------------------------------------------------------------------*/


/*  تنسيق بانر بالعرض  خاص بالمنتجات الأكثر مبيعا    Best Selling  */

 /* الحاوية العامة للبانر */
 .bestselling-banner-container {
  max-width: 1200px; /* عرض الحاوية */
  margin: 20px auto; /* توسيط الحاوية وإضافة مسافة علوية وسفلية */
  padding: 0; /* إزالة الحشوات */
}
/* الغلاف الداخلي للبانر */
.banner-wrapper {
  overflow: hidden; /* منع خروج المحتوى خارج الحاوية */
  border-radius: 15px; /* حواف دائرية للحاوية */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل لإبراز الحاوية */
  transition: transform 0.3s ease; /* تأثير الحركة عند التفاعل */
}
/* الصورة داخل الحاوية */
.banner-wrapper img {
  width: 100%; /* جعل الصورة تأخذ عرض الحاوية بالكامل */
  height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  object-fit: cover; /* تغطية متناسقة داخل الحاوية */
}
/* و الخط الفاصل  تنسيقات البانر */
.bestselling-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  
}

.bestselling-divider::before,
.bestselling-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.bestselling-divider:not(:empty)::before {
  margin-right: 10px;
}

.bestselling-divider:not(:empty)::after {
  margin-left: 10px;
}



/*-------------------------------video تنسيق فيديو الكاميرا -------------------------------------*/


/* إعدادات عامة */
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

/* تصميم الكارت */
.card {
  border: none;
  border-radius: 15px; /* الحواف الدائرية */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* تأثير الشادو */
  overflow: hidden; /* لمنع تجاوز المحتوى للحواف */
}

.video-wrapper iframe {
  width: 100%;
  height: 300px; /* ارتفاع الفيديو */
  border-radius: 15px; /* الحواف الدائرية للفيديو */
}

h3 {
  color: #333;
}

p {
  color: #555;
  line-height: 1.6;
}


/*---------------------------------------------------------------------*/

/* تنسيق خاص بكروت البنوك في آخر الصفحه */
.box-img-container {
  display: flex;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.box-img {
  max-height: 60px;
  margin: 0 15px;
  transition: transform 0.3s ease;
}

/*Footer style تنسيق خاص بالفوتير footer*/
  /* Footer Styling */
  .footer {
    background-color: #212529;
    color: #ffffff;
    padding: 60px 0;
}

.footer h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #f8f9fa;
}

.footer p, .footer a {
    color: #adb5bd;
    font-size: 14px;
}

.footer a:hover {
    color: #f8f9fa;
    text-decoration: none;
}

.footer ul {
    list-style: none;
    padding: 0;
}

.footer ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social span {
    margin-right: 10px;
}

.footer-social span a {
    color: #adb5bd;
    font-size: 18px;
    display: inline-block;
}

.footer-social span a:hover {
    color: #f8f9fa;
}

.footer-bottom {
    background-color: #181a1d;
    color: #adb5bd;
    padding: 20px 0;
}

.footer-bottom p {
    margin: 0;
    font-size: 14px;
}

.footer .icon {
    color: rgb(236, 61, 61); /* Add a gold color to icons */
    font-size: 16px;
}

.footer .contact-info {
    font-size: 14px;
}

.footer-widget-item img {
    width: 150px;
    height: auto;
}

/*---------------------    نهايه تنسيق الفوتر  --------*/

/*------------------------------------ تنسيق خاص بالواتس اب whats app --------------------------------*/
 /* زر واتساب ثابت */
/* زر واتساب عائم (منسق) */
.whatsapp-float {
  position: fixed; /* تثبيت في الشاشة */
  bottom: 20px; /* المسافة من الأسفل */
  right: 20px; /* المسافة من اليمين */
  width: 60px; /* العرض */
  height: 60px; /* الطول */
  background-color: #25d366; /* لون واتساب */
  color: white; /* لون الأيقونة */
  border-radius: 50%; /* دائرة كاملة */
  display: flex; /* استخدام flex لتوسيط الأيقونة */
  align-items: center; /* توسيط عمودي */
  justify-content: center; /* توسيط أفقي */
  font-size: 26px; /* حجم الأيقونة */
  z-index: 999; /* فوق كل العناصر */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل خفيف */
  transition: transform 0.3s ease, background-color 0.3s ease; /* تأثيرات ناعمة */
}

.whatsapp-float:hover {
  background-color: #1ebe5d; /* لون أفتح عند المرور */
  transform: scale(1.05); /* تكبير خفيف عند المرور */
  text-decoration: none; /* إزالة أي تأثير روابط */
}

/*---------- whats app end نهايه تنسيق الواتس اب ----*/




/* تنسيقات عربه التسوق مجمعه وكل واحده بتفصيلها  */

/* صفحه سله التسوق  Shopping Cart */ 

.cart-table th, .cart-table td {
  vertical-align: middle;
  text-align: center;
}
.quantity-input {
  width: 60px;
  text-align: center;
}
.cart-summary {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 10px;
}



/* صفحه الخروج Checkout */

.checkout-form label {
  font-weight: bold;
}


/*صفحة تفاصيل الطلب (Order Details):*/

.order-summary {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 10px;
}


/*---------------------------------------------------------*/


/*--------------------- shop تنسيق خاص بصفحه الشوب  -------------*/



/* تنسيقات مخصصة فقط للكروت داخل هذه الصفحة */

/* تنسيقات الحاوية العامة للكروت */
.shop-container-custom {
  margin-top: 20px; /* مسافة أعلى الحاوية */
}

/* تنسيقات الكروت */
.card-custom {
  border: 1px solid #ddd; /* إطار خفيف حول الكارت */
  border-radius: 10px; /* زوايا مستديرة */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف */
  transition: transform 0.3s, box-shadow 0.3s; /* تأثير الحركة عند التمرير */
  width: 100%; /* ملء المساحة المتاحة */
  max-width: 300px; /* تحديد عرض ثابت للكروت */
  margin: auto; /* جعل الكروت في المنتصف */
}

.card-custom:hover {
  transform: translateY(-5px); /* رفع الكارت قليلاً عند التمرير */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ظل أعمق عند التمرير */
}

/* تنسيقات الصور داخل الكروت */
.card-custom img {
  border-top-left-radius: 10px; /* زوايا مستديرة للصور */
  border-top-right-radius: 10px;
  object-fit: contain; /* احتواء الصورة */
  height: 200px; /* ارتفاع الصورة */
  width: 100%; /* عرض الصورة */
  background-color: #f8f8f8; /* خلفية خفيفة */
  padding: 10px; /* مسافة داخلية */
}

/* تنسيقات النصوص داخل الكروت */
.card-body-custom {
  text-align: center; /* توسيط النصوص */
  padding: 15px; /* مسافة داخلية */
}

.card-body-custom h6 {
  font-size: 16px; /* حجم عنوان المنتج */
  font-weight: bold; /* نص غامق */
  margin-bottom: 10px; /* مسافة تحت العنوان */
}

.card-body-custom .price-custom {
  font-size: 14px; /* حجم السعر */
  color: #dc3545; /* لون السعر */
  font-weight: bold; /* نص غامق */
}

/* تنسيقات الجزء السفلي للكارت */
.card-footer-custom {
  text-align: center; /* توسيط الزر */
  padding: 10px; /* مسافة داخلية */
}

.card-footer-custom .btn-custom {
  border-radius: 20px; /* زوايا مستديرة للزر */
  font-size: 14px; /* حجم النص داخل الزر */
  padding: 8px 20px; /* مسافة داخلية للزر */
}