#about-4 {
    direction: ltr; /* Right-to-left text direction */
    the right */
}
#about-6 {
    direction: ltr; /* Right-to-left text direction */
    the right */
}

body {
    font-size:20px;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light grey background for the entire page */
}

/* Add a border around the entire #details_table */
#details_table {
    border: 2px solid #E2741A; /* Orange border around the container */
    padding: 20px; /* Padding inside the container */
    background-color: #ffffff; /* White background for the container */
    border-radius: 8px; /* Rounded corners for modern look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for a floating effect */
    transition: all 0.3s ease; /* Smooth transition on hover */
}@media (prefers-reduced-motion: no-preference) {
  ul {
    & > li {
      animation: var(--_animation) linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 200%;
    }
  }
}

/* Hover effect for the container */
#details_table:hover {
    border-color: #E2741A; /* Border color stays the same, but can add effects */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
    background-color: #fafafa;
    /* Slightly lighter
     background on hover */
}

/* Style for paragraphs inside #details_table */
#details_table p {
text-align: center;
    padding: 15px; /* Padding inside paragraphs */
    margin-bottom: 15px; /* Space between paragraphs */
    border-radius: 6px; /* Rounded corners for each paragraph */
    border: 1px solid #ddd; /* Light border around each paragraph */
    background-color: #ffffff; /* White background */
    color: #333333; /* Dark text color for better readability */
    transition: background-color 0.3s ease; /* Smooth transition for background on hover */
}

/* Style for odd paragraphs (striped effect) */
#details_table p:nth-of-type(odd) {
    background-color: #f8f8f8; /* Light gray background for odd paragraphs */
}

/* Style for even paragraphs */
#details_table p:nth-of-type(even) {
    background-color: #ffffff; /* White background for even paragraphs */
    border: 1px solid #E2741A; /* Orange border for even paragraphs */
}

/* Hover effect for paragraphs */
#details_table p:hover {
    background-color: #f1f1f1; /* Light grey background color on hover */
}

/* Style for unordered list (ul) inside #details_table */
#details_table ul {
    padding-left: 20px; /* Add padding to list items for better indentation */
    list-style-type: none; /* Remove default bullet points */
    margin: 20px 0; /* Add margin to separate the list from paragraphs */
}

/* Style for list items (li) inside the unordered list */
#details_table ul li {
    padding: 10px 0; /* Padding for list items */
    border-bottom: 1px solid #E2741A; /* Orange border below each list item */
    color: #333333; /* Dark text color for better readability */
    font-size: 14px; /* Slightly smaller text size for list items */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect for list items */
#details_table ul li:hover {
    background-color: #f7f7f7; /* Light background on hover for list items */
}

/* Optional: Add subtle hover effect for links */
#details_table a:hover {
    text-decoration: underline; /* Underline on hover for links */
    color: #E2741A; /* Orange color on hover for links */
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* General reset and body styling */
body {
  margin: 0;
/* font-family: Arial, sans-serif; */
  background-color: #f4f4f4;
}

/* Navbar Styling */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
}

.navbar .logo a {
  color: #fff;
  font-size: 24px;
  text-decoration: none;
}

/* Search Field Input Styling */
.search-field input {
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  width: 0;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
}

.search-field input.active {
  width: 200px;
  opacity: 1;
}

/* Menu Links Styling */
.navbar .menu {
  list-style: none;
  display: flex;
  margin: 0;
}

.navbar .menu li {
  margin-left: 20px;
}

.navbar .menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 15px;
}

.navbar .menu a:hover {
  background-color: #555;
}

/* Mobile view (search field visible) */
@media (max-width: 768px) {
  .menu {
    display: none;
    width: 100%;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 20px;
  }

  .menu.active {
    display: flex;
  }
}
#best-offers-2-slider{
width: 100%;
height:50%;

}
/*----------------------------------------------------
*/
#magnify-image{
    border: 2px solid rgba(0, 0, 0, 0.1); /* Light subtle border */
    border-radius: 12px; /* Smooth rounded corners */
    padding: 8px; /* Adds space inside the border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Soft shadow for depth */
    transition: all 0.3s ease-in-out; /* Smooth animation */
}

/* Hover effect */
#magnify-image img:hover {
    border-color: rgba(0, 0, 0, 0.3); /* Darker border on hover */
    transform: scale(1.03); /* Slight zoom effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}
/*----------------------------------------------------
*/
#karzoun-widget-send-button {
    position: relative; 
    bottom: 150px; /* Moves the button up slightly */
}
#karzoun-widget-send-button {
    margin-bottom: 150px; /* Moves it up */
}

/* OR using transform (for better responsiveness) */
#karzoun-widget-send-button {
    transform: translateY(150px); /* Moves it up smoothly */
}


a[aria-label="Selia Whatsapp"] span {
    display: none !important;
}

ul.selia-bottom-nav-items {
    gap: 1rem !important;
    justify-content: space-evenly !important;
}

.selia-bottom-nav-icon span , .selia-bottom-nav-button.selia-bottom-nav-user span{
    font-size: 15px !important;
}
img[data-selia="home-special-products-slider-image"] {
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: unset !important;
    background: transparent !important;
}
.special-products-slider__button.anime-item{
  display: none !important;
}
.s-block--special-products-slider > div > .lg\:w-1\/3 {
    background: transparent !important;
}

/*----------------------------------------------------
*//*----------------------------------------------------
*//*----------------------------------------------------
*//*----------------------------------------------------
*//*----------------------------------------------------
*//*----------------------------------------------------
*//*----------------------------------------------------
*/
/* Display the burger menu icon on desktop screens */