/* Add custom CSS styles below */
/*---------------------------------------------------------------
    إعدادات عامة
---------------------------------------------------------------*/

/* صورة اللودينق */
body:after {
    background-image: url("https://u.craffo.com/uploads/msmeeh/compas.gif") !important;
}

/*---------------------------------------------------------------
    إعدادات البحث 
---------------------------------------------------------------*/
.rehla-search {
    /* رابط صورة الخلفية */
    background-image: url('https://krotat.com/search-image.webp');
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px; /* تعديل الارتفاع حسب الحاجة */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* طبقة شفافة فوق الخلفية */
.rehla-search::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* طبقة شفافة */
    z-index: 1; /* يجعل الطبقة أسفل المحتوى */
}

/* لضمان أن النص والعناصر تكون فوق الخلفية */
.rehla-search * {
    position: relative;
    z-index: 2; /* يجعل النص والعناصر فوق الخلفية */
}

/*-----تعديل السلايدر -----------------*/

/* الخلفية*/

.s-block--photos-slider {
    background-color: #f7f3e4 !important;
    margin-top:0px;
    padding-top:100px;
}

/*تعديل السلايدر لاخفاء الصور */
/* Target only this specific slider using its unique ID */
#photos-0-slider .swiper-slide {
  opacity: 0; /* Make all slides invisible */
  visibility: hidden; /* Ensure they don't take up space */
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Smooth transitions */
}

/* Show only the active slide in this specific slider */
#photos-0-slider .swiper-slide-active {
  opacity: 1; /* Make the active slide fully visible */
  visibility: visible; /* Ensure it takes up space */
}

/* Ensure the slider container has proper dimensions */
#photos-0-slider .swiper {
  overflow: hidden; /* Prevent inactive slides from being partially visible */
  position: relative;
}

/* Optional: Add smooth transitions for better UX */
#photos-0-slider .swiper-wrapper {
  transition: transform 0.5s ease-in-out; /* Smooth sliding effect */
}

/* حجم السلايد فقط على الكمبيوتر */
@media (min-width: 768px) {
  salla-slider.photos-slider .swiper-slide {
    width: 65% !important;
  }
}


.s-slider-container {
    margin-top: 100px; /* Adjust to match your navbar height */
        margin-bottom: 5rem;
}

/* حجم السلايدر على الجوال */

@media (max-width: 768px) { /* Mobile view */
  .swiper-container,
  .swiper-wrapper,
  .swiper-slide {
    padding: 0 !important; /* Removes any padding */
    margin: 0 !important; /* Removes any margin */
    width: calc(100vw - 30px) !important; /* Full screen width minus 10px margin on each side */
    margin-left: 10px; /* Adds 10px margin to the left */
    margin-right: 10px; /* Adds 10px margin to the right */
  }

  .swiper-slide img {
    width: 100% !important; /* Makes images full width */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures image covers the space */

  }
}



/*---------------------------------------------------------------
    إعدادات الفوتر
---------------------------------------------------------------*/

/* إخفاء عنوان الفوتر */
footer > div > div > div.grid.md\:grid-cols-3.grid-cols-1.gap-10.justify-between.py-16 > div.flex.justify-start.lg\:justify-center.gap-10.raheeb-main-text-color.text-lg > ul > h3 {
    display: none;
}

/* تنسيق قائمة الروابط في الفوتر */
footer > div > div > div.grid.md\:grid-cols-3.grid-cols-1.gap-10.justify-between.py-16 > div.flex.justify-start.lg\:justify-center.gap-10.raheeb-main-text-color.text-lg > ul {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

/* عند الشاشات الصغيرة تغيير تنسيق القائمة */
@media(max-width:767px) {
  footer > div > div > div.grid.md\:grid-cols-3.grid-cols-1.gap-10.justify-between.py-16 > div.flex.justify-start.lg\:justify-center.gap-10.raheeb-main-text-color.text-lg > ul {
        display: flex;
        gap: 0;
        flex-wrap: wrap;
        flex-direction: column;
    }
}

/* إعدادات الفوتر */
footer > div > div > div.grid.md\:grid-cols-3.grid-cols-1.gap-10.justify-between.py-16 {
    display: flex;
    align-items: stretch; /* يجعل جميع العناصر بنفس الارتفاع */
    justify-content: space-between; /* توزيع العناصر بالتساوي */
    gap: 2px; /* تعديل المسافة بين العناصر */
    flex-wrap: wrap; /* السماح للعناصر بالتوزع في الشاشات الصغيرة */
}

/* ضمان أن كل عنصر يأخذ مساحة متساوية */
footer > div > div > div.grid.md\:grid-cols-3.grid-cols-1.gap-10.justify-between.py-16 > div {
    display: flex;
    align-items: center; /* محاذاة العناصر عمودياً */
    justify-content: center; /* محاذاة العناصر أفقياً */
    flex-grow: 1; /* السماح للعناصر بالنمو بشكل متساوٍ */
}

/* ضبط الفوتر ليتناسب مع الشاشات الصغيرة */
@media (max-width: 768px) {
footer > div > div > div.grid.md\:grid-cols-3.grid-cols-1.gap-10.justify-between.py-16 {
        flex-direction: column; /* ترتيب العناصر عموديًا في الشاشات الصغيرة */
        align-items: center; /* محاذاة العناصر في المنتصف */
    }
}

/* تنسيق خاص لعنصر .store-footer (إذا لزم الأمر) */

.store-footer {
  background-color: #f7f3e4 !important;
}

.store-footer .grid {
    display: flex;
    flex-direction: column !important; /* فرض ترتيب العناصر عموديًا */
    align-items: center !important; /* محاذاة العناصر في المنتصف */
}

/* إخفاء اسم الموقع من الفوتر */
.raheeb-main-text-color h3 {
    display: none;
}

/* إخفاء رقم الجوال في الفوتر */
.raheeb-main-text-color a[href^="tel:"] {
    display: none;
}

/* تقليل الحشوة داخل الفوتر */
.store-footer .py-16 {
    padding-top: 0.5rem;  /* Adjust as needed */
    padding-bottom: 0.5rem; /* Adjust as needed */
}

/* تقليل الحشوة للقسم الخاص بالاتصال */
.raheeb-main-text-color {
    padding-top: 0.5rem;  /* Adjust as needed */
    padding-bottom: 0.5rem; /* Adjust as needed */
}

/*تعديل ايقونات الدفع*/

@media (max-width: 768px) {
    .rehla-payment {
        margin-top: 30px;   /* Adds space above */
        padding-top:30px;
    }
}

/*مساحه للسوشل */

@media (max-width: 768px) {
  .raheeb-main-text-color {
    margin-bottom: 30px;
  }
}
/*مساحة للكوبي رايت*/

@media (max-width: 768px) {
  .w-full.flex.justify-center.mb-2 {
    margin-top: 50px !important; /* Adjust value as needed */
  }
}


/*---------------------------------------------------------------
    إعدادات الأيقونات
---------------------------------------------------------------*/

/* أيقونات الهيدر */
.sicon-receipt:before {
    content: "\e901";
}

/* أيقونة البحث */
.sicon-map-search:before {
    content: "\ef09";
}

/* أيقونة اللغة */
.sicon-lang:before {
    content: "\e96f";
}

/* Mobile view: Resize the icon */
@media (max-width: 768px) {
    .sicon-receipt:before {
        font-size: 16px; /* Adjust the size for mobile view */
    }
    .sicon-map-search:before {
        font-size: 16px; /* Adjust the size for mobile view */
    }
    .sicon-lang:before {
        font-size: 16px; /* Adjust the size for mobile view */
    }
    .sicon-user:before {
        font-size: 16px; /* Adjust the size for mobile view */
    }
}

/*تحريك الناف بار */

.rehla-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white; /* Ensure background remains visible */
    z-index: 1000; /* Ensure it stays above other content */
}

/* الناف بار داخل المنتجات */

.rehla-breadcrumb {
  height: 50px; /* Set height to 50px */
  margin-bottom: 50px; /* Add bottom margin of 50px */
}

.rehla-breadcrumb ol {
  display: flex;
  align-items: center; /* Vertically center the items */
  justify-content: center; /* Horizontally center the items */
  height: 100%; /* Make sure the ol takes the full height of the container */
}

.rehla-breadcrumb li {
  margin: 0 10px; /* Adjust spacing between breadcrumb items */
}


/*---------------------------------------------------------------
اعدادات المربعات المميزه---------------------------------------------------------------*/

/* تغيير لون خلفية المربعات المميزة */
.rehla-component-2 {
    background-color: #f7f3e4;
    width: 100%;
    margin-bottom: 3rem;
    position: relative;
    padding-top: 50px; /* Adds space for the line */
}


/* تعديل حجم المربعات المميزه لتكون بحجم السلايدر*/
@media (min-width: 1024px) { /* Desktop view */
  .rehla-component-2 .container {
    max-width: calc(100% - 520px); /* 260px left + 260px right */
    margin-left: auto;
    margin-right: auto;
  }
}




/*تعديل عنوان ابدأ رحلتك */

h2.text-2xl {
  font-weight: bold;
  margin-bottom: 50px; /* 24px = mb-6 */
}

/* تعديل حجم الخط داخل المربعات*/

/* Base styles for h4 */
h4.lg\:text-4xl.md\:text-2xl.text-xl.font-meduim.py-2 {
  font-weight: light;
  font-size: 0.5rem; /* Base size for smaller screens (equivalent to text-xl) */
  font-weight: 500; /* Medium weight (corrected from 'meduim' to 'medium') */
 

}

/* Responsive adjustments for medium screens */
@media (min-width: 768px) {
  h4.lg\:text-4xl.md\:text-2xl.text-xl.font-meduim.py-2 {
    font-size: 1rem; /* Equivalent to md:text-2xl */
     padding-bottom:80px;
  }
}

/* Responsive adjustments for large screens */
@media (min-width: 1024px) {
  h4.lg\:text-4xl.md\:text-2xl.text-xl.font-meduim.py-2 {
    font-size: 1.5rem; /* Equivalent to lg:text-4xl */
    padding-top:10px;
  }
}

/* اضافة عناوين للخدمات لجعلها تحت- جوال */
.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center {
  padding-bottom: 0px !important; /* Overrides the bottom padding */
}

/*للكمبيوتر */
h4.lg\:text-4xl.md\:text-2xl.text-xl.font-meduim.py-2 {
  padding-top: 0 !important;
  padding-bottom: 30px !important;
  transition: transform 0.3s ease;
}
/* Hover effect on the container */
.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center {
  position: relative; /* Ensure the overlay works correctly */
}

/* Darken the image on hover */
.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center .relative.bg-no-repeat.bg-center.bg-cover {
  transition: opacity 0.3s ease !important; /* Smooth transition for opacity */
}

.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center:hover .relative.bg-no-repeat.bg-center.bg-cover {
  opacity: 0.5; /* Darken the image */
}

/* Optional: Adjust the text size and appearance */
.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center h4,
.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center p {
  z-index: 10; /* Keep text on top */
  transition: transform 0.3s ease; /* Smooth scaling transition */
}

.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center:hover h4,
.flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center:hover p {
  transform: scale(1.1); /* Slightly enlarge the text on hover */
}


/*الجوال -  اضافة بادينق يمين ويسار */

@media (max-width: 768px) {
  .rehla-component-2 .flex.flex-wrap > a {
    width: calc(50% - 10px); /* مربعين في الصف مع فاصل */
  }
}



/*-------------------------------------------------------تعديل داخل صفحة المنتجات -----------------------------*/

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


.s-products-list-wrapper.s-products-list-vertical-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 2rem !important;
  padding: 1rem !important;
}
.rehla-product-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/*للجوال*/

@media (max-width: 768px) {
  .s-products-list-wrapper.s-products-list-vertical-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    padding: 0.5rem !important;
  }
}

/*اخفاء بوكس التاريخ من داخل صفحة المنتج*/

.grid.grid-cols-1 > div.m-1.bg-gray-100, 
.grid.grid-cols-1 > div.md\:m-2.bg-gray-100 {
    display: none !important;
}

/*تعديل ارتفاع الصوره داخل المنتجات*/
.swiper.s-slider-container {
    margin-top: 0 !important;
}
/*تغيير لون وحجم عدد متبقي */

.rtl\:even\:border-r,
.ltr\:even\:border-l,
.even\:border-gray-200 {
    color: red !important;
    font-size: 1.1rem !important;
}




/* إخفاء المربعات في المنتجات */
.grid.grid-cols-1.lg\:grid-cols-1.m\:gap-0.mt-6.text-center {
    display: none;
}

/* تغيير لون خلفية البنر المميز */
.rehla-text-with-image-bg {
    display: grid;
    grid-template-columns: 1fr 1fr; /* تخطيط عمودي مكون من عمودين */
    gap: 4px; /* تعديل المسافة بين الأعمدة */
    padding-top:4rem;
    padding-bottom:5rem;
}

/* حجم الصورة للبنر */
.rehla-with-image img {
    width: 60%; /* حجم الصورة الافتراضي */
    height: auto;
    object-fit: contain;
    display: block;
    margin: 20px auto 0;
}

/* تصميم مخصص للشاشات الصغيرة */
@media (max-width: 768px) {
    .rehla-text-with-image-bg {
        display: flex;
        flex-direction: column-reverse; /* قلب الترتيب: الصورة في الأعلى */
        align-items: center; /* محاذاة العناصر في المنتصف */
        text-align: center; /* محاذاة النص في المنتصف */
    }

    .rehla-with-image img {
        width: 60%; /* ضبط حجم الصورة في الشاشات الصغيرة */
    }
}

/* تغيير لون خلفية البارتنرز */
.rehla-partners {
    position: relative;
    width: 100%;
    max-width: 100%; /* ضبط الحجم بناءً على حجم الحاوية */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #f7f3e4;
}

/* سلايدر المنتجات */
								   
																 
#best-offers-2-slider {
    margin-top: 10px;  /* إضافة مسافة فوق */
    margin-bottom: 30px; /* إضافة مسافة أسفل */
    overflow: hidden; /* إخفاء الفائض */
    width: 100%; /* التأكد من أنه يغطي كامل عرض الحاوية */
}

/* تعديل عنوان السلايدرز*/
.s-slider-block__title-right h2 {
  font-size: 1.5rem; /* يمكنك تعديل الحجم حسب الحاجة */
  font-weight: bold;
  padding-right:0px;
}




/*تحديد ارتفاع اللوقو*/

.w-full.flex.justify-center {
    height: 50px !important; /* تحديد ارتفاع الحاوية (المربع المحيط) */
    display: flex;
    justify-content: center;
    align-items: center; /* محاذاة الصورة في الوسط عموديًا وأفقيًا */
}


/*تحديد ارتفاع ايقونات السوشل*/
.raheeb-main-text-color {
    height: 50px!important; /* تحديد ارتفاع العنصر */
    display: flex;
    justify-content: center; /* محاذاة المحتوى أفقيًا */
    align-items: center; /* محاذاة المحتوى عموديًا */
}

/*حذف عمود تواصل معنا*/
.raheeb-main-text-color:nth-of-type(3) {
    display: none !important;
}

@media (max-width: 768px) {
    .w-full.flex.justify-center {
        height: 10px!important; /* Adjust height for smaller screens */
        margin-top:30px !important;
    }

    .raheeb-main-text-color {
        height: 100px!important; /* Adjust height for smaller screens */
    }
			  
}

												  
				
 



@media (max-width: 768px) {
    .flex.flex-wrap.gap-5.lg\:gap-8.justify-center {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        gap: 10px; /* Adjust spacing between boxes */
    }

    .flex.flex-wrap.gap-5.lg\:gap-8.justify-center a {
        width: 100%; /* Ensure each box takes full width inside its grid cell */
    }

    /* Make the last item stretch if it's alone in the last row */
    .flex.flex-wrap.gap-5.lg\:gap-8.justify-center a:nth-child(odd):last-child {
        grid-column: span 2; /* Stretch across both columns */
    }

    /* Ensure images shrink proportionally */
    .rounded-xl.overflow-hidden.group {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .w-full.h-96.flex.relative {
        height: auto; /* Allow height to adjust */
    }

    .w-full.h-96.flex.relative img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Maintain aspect ratio without cropping */
    }

    /* Hide the paragraph text on mobile */
    .flex.w-full.h-full.justify-end.items-center.flex-col.text-white.p-8.text-center p {
        display: none;
    }
    
}



/* تعديل البنرات المميزه */

/* Mobile View Layout - Two boxes per row and third stretching */
@media (max-width: 768px) {
    .rehla-component-1 .flex.flex-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Two columns */
        gap: 10px !important; /* Adjust spacing between the boxes */
    }

    /* Make the last box stretch to fill the space if it’s alone */
    .rehla-component-1 .flex.flex-wrap > div:nth-child(3) {
        grid-column: span 2 !important; /* Stretch across both columns */
    }

    /* Ensure each box inside the container uses full width and fixed height */
    .rehla-component-1 .rounded-xl {
        width: 100% !important;
        height: 100% !important; /* Fixed height for each box */
        border-radius: 15px !important; /* Add rounded corners to the boxes */
        box-sizing: border-box !important; /* Prevent padding from increasing box size */
        position: relative; /* Allow positioning of the overlay */
    }

/*تعديل للايفون*/
@media (max-width: 768px) {
    .rehla-component-1,
    .s-block {
        width: 100%; /* Ensure it takes the full width */
    }
}


    /* Add transparent black overlay on the images */
    .rehla-component-1 .relative.bg-no-repeat.bg-center.bg-cover::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3); /* Transparent black */
        border-radius: 15px; /* Match the box's border-radius */
        z-index: 1; /* Ensure overlay stays behind the text */
    }

    /* Adjust the box layout from row to column */
    .rehla-component-1 .flex.relative {
        display: flex !important;
        flex-direction: column-reverse !important; /* Reverse column order to place icon above the text */
        justify-content: center !important; /* Center content vertically */
        align-items: center !important; /* Center content horizontally */
        height: 100% !important; /* Make the box fill its fixed height */
        z-index: 2; /* Ensure text and icon are above the overlay */
    }

    /* Ensure the image and background fill correctly within the fixed box height */
    .rehla-component-1 .relative.bg-no-repeat.bg-center.bg-cover {
        width: 100% !important; /* Ensure the image covers the box width */
        height: 100% !important; /* Make the image height match the fixed box height */
        object-fit: cover !important; /* Ensure the image covers the container without stretching */
    }

    /* Adjust the text size and icon size */
    .rehla-component-1 .rehla-component-1-title {
        font-size: 1.25rem !important; /* Adjust text size */
        margin-top: 10px !important; /* Add margin to separate from the icon */
        margin-bottom: 10px !important; /* Add margin for spacing */
        z-index: 2; /* Ensure text is above the overlay */
    }

    .rehla-component-1 .rehla-component-1-icon {
        font-size: 2rem !important; /* Resize the icon */
        margin-bottom: 10px !important; /* Add margin for spacing */
        z-index: 2; /* Ensure icon is above the overlay */
    }

    /* Ensure the icon is above the text */
    .rehla-component-1 .flex.w-full.h-full.justify-between.items-center.text-white.p-8.text-center {
        display: flex !important;
        flex-direction: column-reverse !important; /* Reverse the column order */
        justify-content: center !important; /* Center content vertically */
        align-items: center !important; /* Center content horizontally */
        height: 100% !important; /* Let height adjust automatically */
        top-padding: 5px !important; /* Adjust padding */
        z-index: 2; /* Ensure content is above the overlay */
    }

    /* Adjust the icon and text to fill the container correctly */
    .rehla-component-1 .rehla-component-1-title, 
    .rehla-component-1 .rehla-component-1-icon {
        text-align: center !important; /* Ensure the text and icon are centered */
        margin: 0 auto !important; /* Center content horizontally */
    }
}


/* اخفاء البنرات المميزه عن البي سي */

/* Hide on PC View */

    .rehla-component-1.md\:p-8 {
        display: none !important; /* Hide the entire container */
    }


/*توسيط عنوان المنتجات*/

.s-slider-block__title {
    display: flex;
    justify-content: center; /* Centers the title horizontally */
    align-items: center; /* Centers the title vertically if the container height is fixed */
    width: 100%; /* Make sure the title container takes full width */
}

.s-slider-block__title-right {
    text-align: center; /* Centers the text inside the title container */
    width: 100%; /* Make sure this div takes full width for centering */
    padding-right:0px;
}		 
.s-slider-block__title-left {
    display: none;
    padding-right:0px;
}
								   
					 
 /*تعديل المارجن للسلايدر كارد*/

  .s-products-slider-card {
    margin-bottom: 40px !important; 
  }
  #best-offers-3-slider {
    margin-top: 20px !important;
}

/*اخفاء الوصف للسلايدر كارد*/
  .rehla-product-card .border-t.border-gray-300.py-4.h-28 {
    display: none !important; /* Hide the div with the paragraph */
  }
/*اخفاء العين */
.sicon-eye.text-base {
  display: none; 
}

/* Mobile View - Adjust the specific card */
@media (max-width: 768px) {
  .s-products-slider-card {
    width: 45% !important; /* Adjust width to show two cards per row */
    margin-right: 10px !important; /* Add space between cards */
    margin-left: 10px !important; 
    margin-bottom: 40px !important; 

															 
								 
  }

  .rehla-product-card {
    width: 100% !important; /* Ensure the card takes full width of the swiper-slide */
    height: auto !important; /* Adjust height automatically */
				
  }

  /* Adjust image size inside the card */
  .rehla-product-card img {
    width: 100% !important; /* Ensure the image fills the card */
    height: auto !important; /* Maintain image aspect ratio */
  }
  





  
  
  /* Display the elements as a column inside the container */
@media (max-width: 768px) {
  .rehla-product-card .py-4.flex.justify-between {
    flex-direction: column-reverse !important; /* Change from row to column */
    align-items: center !important; /* Center the items horizontally */
    gap:5px;
  }

  /* Optional: Ensure the button and price are properly spaced in the column layout */
  .rehla-product-card .py-4 .flex.flex-col {
    margin-top: 10px !important; /* Add some spacing between button and price */
  }
  .rehla-product-card .flex.gap-4.text-gray-500.items-center {
    display: none !important; /* Hide the element */
  }
}

}

@media (max-width: 768px) {
  .flex.flex-col.justify-center.items-center {
    gap: 10px !important; /* Adjust the gap size as needed */
  }

}

/*تعديل المربع الجانبي للسلايدر*/

.s-products-slider-card {
    max-width: 430px;
}


/* تعديل حجم الصور داخل المنتجات للجوال */

@media (max-width: 768px) {
    .swiper-slide.homeslider__slide img {
        object-fit: cover !important;
        object-position: center !important;
        height: 100% !important;
        max-width: 1000px !important;
    }
}

/* الايقونات في المربعات*/

/* Target the <h4> element */
.rehla-component-1-title {
  padding-top: 0.5rem; /* Adjust this value to reduce top padding */
  padding-bottom: 0.5rem; /* Adjust this value to reduce bottom padding */
  line-height: 1.2; /* Adjust this value to control the height of the text */
}

/* تعديل حجم النص داخل المنتجات*/
@media (max-width: 767px) {
  .lg\:text-xl.md\:text-lg.text-base.font-bold {
    text-align: center;
    font-size:1.2rem;
    line-height: 1.5;
}
    .text-gray-500.text-base.py-1.flex.items-center.gap-2 {
    justify-content: center; /* Center content horizontally on mobile */
  }
}



.social-links a:after {
    content: unset !important;
}

/* تعديل احمد  */
/* إخفاء أيقونة Instagram في الفوتر */

.sicon-instagram {
    display: none !important;
}

}
/* ========== Rehla cards – v19 ========== */
/*  • Fix: mobile image now truly covers full card (top & bottom)
    • padding‑top للنص داخل البطاقة: 130px Desktop – 100px Tablet – 60px Mobile
    • عنوان البطاقة: 1.5rem (D/T) | 1.15rem (M) مع padding أفقى 12px
    • الفقرة: padding أفقى ثابت 10px، line-height 1.5، margin‑top 8px
*/

/******** 0. عنوان القسم ********/
.rehla-component-2 h2.text-2xl{margin-bottom:50px!important;padding:0 40px!important}

/******** 1. البطاقة – الأساسيات ********/
.rehla-component-2 .flex.flex-wrap>a{position:relative;border-radius:12px;overflow:hidden}
.rehla-component-2 .flex.flex-wrap>a img,
.rehla-component-2 .flex.flex-wrap>a .relative.bg-cover{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover}
.rehla-component-2 .flex.flex-wrap>a::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1}

/******** 2. طبقة النص ********/
.rehla-component-2 .absolute.w-full.h-full.z-50>.flex{justify-content:flex-start!important;align-items:center!important;padding-top:130px!important;color:#fff}

/******** 3‑A. عنوان البطاقة ********/
.rehla-component-2 h4.lg\:text-4xl.md\:text-2xl.text-xl.font-meduim.py-2{font-size:1.5rem;font-weight:500;line-height:1.25;margin:0!important;padding:0 40px;color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance}

/******** 3‑B. الفقرة ********/
.rehla-component-2 p.lg\:text-lg.md\:text-base.text-sm.leading-6{font-size:.875rem;line-height:1.5;margin:8px 0 0!important;padding:0 10px;font-weight:400;color:#fff;display:block!important}

/******** 4. Desktop ≥1024px ********/
@media(min-width:1024px){.rehla-component-2 .container{max-width:100%!important;padding:0 3rem}.rehla-component-2 .flex.flex-wrap{display:flex!important;flex-wrap:nowrap!important;gap:2.5rem;justify-content:center}.rehla-component-2 .flex.flex-wrap>a{flex:0 0 260px!important;min-height:350px}}

/******** 5. Tablet 768 – 1023px ********/
@media(min-width:768px) and (max-width:1023.98px){.rehla-component-2 .container{padding:0 2rem}.rehla-component-2 .flex.flex-wrap{display:grid!important;grid-template-columns:repeat(2,1fr);gap:1.5rem;justify-content:center}.rehla-component-2 .flex.flex-wrap>a{min-height:320px}.rehla-component-2 .absolute.w-full.h-full.z-50>.flex{padding-top:100px!important}}

/******** 6. Mobile <768px ********/
@media(max-width:767.98px){
  .rehla-component-2 .flex.flex-wrap{display:grid!important;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}
  .rehla-component-2 .flex.flex-wrap>a{min-height:300px;border-radius:10px}
  /* إصلاح height:0 فى الموبايل */
  .rehla-component-2 .w-full.h-96.flex.relative{height:100%!important;min-height:300px!important}
  /* اجعل الخلفية والصورة تغطى بالكامل */
  .rehla-component-2 .w-full.h-96.flex.relative>.relative.bg-no-repeat{position:absolute!important;inset:0;width:100%!important;height:100%!important;background-size:cover!important}
  .rehla-component-2 .flex.flex-wrap>a img{width:100%!important;height:100%!important;object-fit:cover!important}
  /* طبقة النص */
  .rehla-component-2 .absolute.w-full.h-full.z-50>.flex{padding-top:60px!important}
  /* عنوان البطاقة */
  .rehla-component-2 h4.lg\:text-4xl.md\:text-2xl.text-xl.font-meduim.py-2{font-size:1.15rem;padding:0 12px}
  /* الفقرة */
  .rehla-component-2 p.lg\:text-lg.md\:text-base.text-sm.leading-6{font-size:.75rem;line-height:1.5;padding:0 10px}
  /* ضمان الظهور */
  .rehla-component-2 .flex.flex-wrap>a *{opacity:1!important;visibility:visible!important}
}