/* CSS مخصص للخطوط والأسهم */
 .category-line {
    border-right: 2px solid #000;
    position: relative;
  }
  .category-arrow {
    position: absolute;
    top: 50%;
    right: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #000;
  }

 /*قسم البطل*/


.hero {
    background-color: #f0f0f0; /* لون الخلفية */
    padding: 50px 0; /* مساحة داخلية */
    text-align: center; /* توسيط النص */
  }
  
  .hero-content {
    max-width: 800px; /* تحديد عرض المحتوى */
    margin: 0 auto; /* توسيط المحتوى */
  }
  
  .hero h1 {
    font-size: 3rem; /* حجم الخط */
    margin-bottom: 20px; /* مساحة أسفل العنوان */
  }
  
  .hero p {
    font-size: 1.2rem; /* حجم الخط */
    margin-bottom: 30px; /* مساحة أسفل الفقرة */
  }
  
  .hero-button {
    background-color: #007bff; /* لون الخلفية */
    color: white; /* لون النص */
    padding: 10px 20px; /* مساحة داخلية */
    border: none; /* إزالة الحدود */
    border-radius: 5px; /* حواف دائرية */
    cursor: pointer; /* تغيير شكل المؤشر عند المرور */
  }
  
  .hero-images {
    display: flex; /* ترتيب الصور جنبًا إلى جنب */
    justify-content: center; /* توسيط الصور أفقيًا */
    margin-top: 30px; /* مساحة أعلى الصور */
  }
  
  .hero-images img {
    width: 200px; /* عرض الصور */
    margin: 0 10px; /* مسافة بين الصور */
  }
  
  /*قسم الأصناف*/
  .categories {
    padding: 50px 0; /* مساحة داخلية */
  }
  
  .category {
    text-align: center; /* توسيط المحتوى */
    margin-bottom: 30px; /* مساحة أسفل كل صنف */
  }
  
  .category img {
    width: 150px; /* عرض الصور */
    margin-bottom: 20px; /* مساحة أسفل الصور */
  }
  
  .category h3 {
    font-size: 1.5rem; /* حجم الخط */
    margin-bottom: 10px; /* مساحة أسفل العنوان */
  }
  /*قسم المنتجات */
  .products {
    padding: 50px 0; /* مساحة داخلية */
    background-color: #f9f9f9; /* لون الخلفية */
  }
  
  .product {
    text-align: center; /* توسيط المحتوى */
    margin-bottom: 30px; /* مساحة أسفل كل منتج */
  }
  
  .product img {
    width: 200px; /* عرض الصور */
    margin-bottom: 20px; /* مساحة أسفل الصور */
  }
  
  .product h3 {
    font-size: 1.5rem; /* حجم الخط */
    margin-bottom: 10px; /* مساحة أسفل العنوان */
  }
  
  .product p {
    margin-bottom: 20px; /* مساحة أسفل الفقرة */
  }
  
  .product-button {
    background-color: #007bff; /* لون الخلفية */
    color: white; /* لون النص */
    padding: 10px 20px; /* مساحة داخلية */
    border: none; /* إزالة الحدود */
    border-radius: 5px; /* حواف دائرية */
    cursor: pointer; /* تغيير شكل المؤشر عند المرور */
  }
  /*قسم الشهادات*/
  .testimonials {
    padding: 50px 0; /* مساحة داخلية */
  }
  
  .testimonial {
    text-align: center; /* توسيط المحتوى */
    margin-bottom: 30px; /* مساحة أسفل كل شهادة */
  }
  
  .testimonial img {
    width: 100px; /* عرض الصور */
    border-radius: 50%; /* دائرة */
    margin-bottom: 20px; /* مساحة أسفل الصور */
  }
  
  .testimonial p {
    margin-bottom: 10px; /* مساحة أسفل الفقرة */
  }
  
  .testimonial-author {
    font-weight: bold; /* نص غامق */
  }
  /*قسم الفواتير*/
  footer {
    background-color: #333; /* لون الخلفية */
    color: white; /* لون النص */
    padding: 30px 0; /* مساحة داخلية */
    text-align: center; /* توسيط المحتوى */
  }
  
  footer p {
    margin-bottom: 10px; /* مساحة أسفل الفقرة */
  }
  
  .footer-icons a {
    color: white; /* لون الأيقونات */
    margin: 0 10px; /* مسافة بين الأيقونات */
    font-size: 1.5rem; /* حجم الأيقونات */
  }
  
  
  .testimonial-author {
    font-weight: bold; /* نص غامق */
  }