#employment-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}


/* Reset margins and align RTL content properly */
#employment-form-container dl,
#employment-form-container dd,
#employment-form-container hr,
#employment-form-container figure,
#employment-form-container p,
#employment-form-container pre {
    margin: 0;
    text-align: right !important;
}

/* Form wrapper styling */
#employment-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    direction: rtl;
}

/* Heading */
#employment-form h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

/* Labels */
#employment-form label {
    display: block;
    margin: 10px 0 5px;
    text-align: right;
}

/* Input & Select Fields */
#employment-form input[type="text"],
#employment-form input[type="tel"],
#employment-form input[type="email"],
#employment-form input[type="number"],
#employment-form select,
#employment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 16px;
    direction: rtl;
}

/* Focus effect */
#employment-form input:focus,
#employment-form select:focus,
#employment-form textarea:focus {
    outline: none;
    border-color: #007BFF;
}

/* Submit button */
#employment-form button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #E1C969;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

/* Hover */
#employment-form button:hover {
    background-color: #B79C2F;
}

/* Disabled button */
#employment-form button:disabled {
    background-color: #d3d3d3;
    cursor: not-allowed;
}

/* Error style */
#employment-form .input-error {
    border: 1px solid red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Thank-you message */
#employment-form-container .thank-you-message {
    font-size: 18px;
    color: #2ecc71;
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
    width: 100%;
    max-width: 600px;
    direction: rtl;
}

/* Responsive */
@media (max-width: 600px) {
    #employment-form {
        padding: 15px;
    }

    #employment-form h2 {
        font-size: 20px;
    }

    #employment-form input,
    #employment-form select,
    #employment-form textarea {
        padding: 10px;
        font-size: 14px;
    }

    #employment-form button {
        padding: 12px;
        font-size: 16px;
    }
}


#employment-form,
#employment-form * {
  font-family: var(--font-main) !important;
}


.s-comments-page {
  padding-top: 0rem;
}


















#notify-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* Reset margins and center text within the form container */
#notify-form-container dl, 
#notify-form-container dd, 
#notify-form-container hr, 
#notify-form-container figure, 
#notify-form-container p, 
#notify-form-container pre {
    margin: 0;
    text-align: right !important;
}

/* Styling for the form */
#notify-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Title styling */
#notify-form h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

/* Label styling */
#notify-form label {
    display: block;
    margin: 10px 0 5px;
    text-align: right;
}

/* Input fields styling */
#notify-form input[type="text"],
#notify-form input[type="tel"],
#notify-form input[type="email"],
#notify-form input[type="number"],
#notify-form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Input focus styling */
#notify-form input:focus,
#notify-form select:focus {
    outline: none;
    border-color: #007BFF;
}

/* Submit button styling */
#notify-form button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #E1C969;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

/* Button hover effect */
#notify-form button:hover {
    background-color: #B79C2F;
}

/* Disabled button style */
#notify-form button:disabled {
    background-color: #d3d3d3;
    cursor: not-allowed;
}

/* Red border and glow effect for invalid fields */
#notify-form .input-error {
    border: 1px solid red !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Styling for the thank-you message */
#notify-form-container .thank-you-message {
    font-size: 18px;
    color: #2ecc71;
    background-color: #f1f1f1;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
    width: 100%;
    max-width: 600px;
}

/* Responsive styling for mobile devices */
@media (max-width: 600px) {
    #notify-form {
        padding: 15px;
    }

    #notify-form h2 {
        font-size: 20px;
    }

    #notify-form input,
    #notify-form select {
        padding: 10px;
        font-size: 14px;
    }

    #notify-form button {
        padding: 12px;
        font-size: 16px;
    }
}


.h1 {
  text-align: center;
}

@media (max-width: 768px) {
    #desktop-banner-container img {
        content: url('https://i.imgur.com/VSUx2wF.png?v=2') !important;
    }
}


 



.text-gray-500 {
  display: inline-block;
  color: rgb(56, 107, 208); /* Text color */
  font-size: 13px;
  line-height: 1.2rem;
  position: relative;
}

.text-gray-500::after {
  content: "\2714"; /* Checkmark symbol */
  color: #6FBF79 !important; /* Green color for checkmark */
  font-size: 13px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* Reset content before and after */
::before, ::after {
  --tw-content: '';
}








/* Video container styling */
.video-section {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Horizontally center the video */
    align-items: center; /* Vertically center the video */
    width: 100%;  /* Full width */
    height: 60vh; /* Default height for desktop */
    overflow: hidden; /* Hide any overflow */
    margin-top: 20px; /* Optional: space between sections */
}

/* Video itself */
.video-section video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the video fits within the container without cropping */
    max-width: 100%; /* Prevent video from exceeding the width */
    max-height: 100%; /* Prevent video from exceeding the height */
}
 
/* Mobile-specific styling */
@media (max-width: 767px) {
    .video-section {
        height: 45vh; /* Reduce height for mobile devices */
    }
}

/* Desktop-specific styling */
@media (min-width: 768px) {
    .video-section {
        height: 60vh; /* Increase height slightly for desktop */
    }
}





 












.s-button-btn {
  background-color: #e0e8ff;
    color: #333;
}

.s-button-primary {
  border-width: 0px;
  border-color: #414042;
  border-color: var(--color-primary);
  background-color: #dfe7ff;;
  color: #333;
  color: #333;
}

.s-product-card-sale-price h4 {
  --tw-text-opacity: 1 !important;
  color: rgb(153, 27, 27) !important;
  color: rgb(79, 164, 255) !important;
}


.promotion-title {
  position: absolute;
  top: 1rem;
  z-index: 10;
  --tw-bg-opacity: 1;
  background-color: rgb(153, 27, 27);
  background-color: rgb(211, 221, 251);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255, 255, 255);
  color: rgb(26, 26, 26);
}


.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153, 27, 27);
  color: rgb(56, 159, 251);
}






@media (min-width: 1280px) {
  .s-block--hero-slider .swiper-slide {
    height:600px;
  }
}



@media only screen and (min-width: 1024px) {
  @media (min-width: 1024px) {
    .main-menu {
      display: none;
    }
  }
}


.sicon-menu::before {
  display: none;
}

.main-nav-container {
  position: fixed;
  top: 15px;
  left: 0;
  width: 100%;
  z-index: 900;
  background-color: rgba(0, 0, 0, 0);
  padding: 10px;
  transition: background-color 0.3s ease;
  box-shadow: none;
}


 





.s-product-card-content-subtitle {
  display: inline-block; /* Makes the container adjust to content size */
  background-color: rgba(111, 191, 121, 0.1); /* Light green background */
  color: #6FBF79; /* Text color */
  padding: 4px 24px 4px 8px; /* Extra right padding for the checkmark */
  border-radius: 6px; /* Slightly smaller rounded corners */
  font-size: 13px; /* Text size set to 13px */
  line-height: 1.2rem; /* Line height slightly adjusted for better fit */
  position: relative; /* Needed for ::after positioning */
}

.s-product-card-content-subtitle::after {
  content: "\2714"; /* Unicode for the checkmark */
  color: #6FBF79 !important; /* Force the color to mint green */
  font-size: 13px; /* Checkmark size */
  position: absolute; /* Absolutely positioned */
  right: 8px; /* Moves checkmark to the right */
  top: 50%; /* Vertically centers */
  transform: translateY(-50%); /* Adjust for perfect centering */
  font-family: Arial, sans-serif; /* Ensures consistent rendering */
}






.s-product-card-image-contain {
  -o-object-fit: contain;
  object-fit: cover;
}








.s-product-additional-info {
    padding: 10px;
    background-color: #f9f9f9; /* Light background */
    border-radius: 5px; /* Rounded corners */
    margin-top: 10px; /* Spacing from other content */
    font-size: 14px; /* Font size */
    color: #333; /* Text color */
}

.custom-info {
    margin: 5px 0;
    line-height: 1.5;
}







/* Add custom CSS styles below */ 
.s-slider-v-centered .s-slider-block__title-nav {
    display: none !important;  /* Completely hides the arrow if it's an HTML element */
}


.s-block--hero-slider .swiper-slide .overlay-bg::after {
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

.top-navbar {
  display: none;
}

.s-user-menu-trigger {
  background-color: rgba(255, 255, 255, 0) !important;
}


.py-5 {
  padding-top: 0px;
  padding-bottom: 10px;
}



/* Apply styles to all pages except the index page */
body:not(.index) .NMmenu-list {
    padding-top: 96px !important;
    padding-bottom: 0px;
}


.s-product-card-promotion-title {
  --tw-bg-opacity: 1;
  background-color: rgb(153, 27, 27);
  background-color: rgb(208, 226, 255);
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgb(80, 119, 153);
}





.s-cart-summary-count {
  top: -0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(153, 27, 27);
}



.s-product-card-promotion-title:where([dir="rtl"], [dir="rtl"] *) {
  right: 0px;
  left: auto;
  left: initial;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
/* Main navigation container styling */
.main-nav-container {
    position: fixed; /* Keeps the header fixed at the top */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    z-index: 900; /* Ensure it stays on top of other elements, adjust as needed */
    background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
    padding: 10px; /* Adjust padding as needed */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
        box-shadow: none; /* Remove the shadow */
}

/* Inner element styling */
.main-nav-container .inner {
    /* Default style for inner element, will be overridden when .fixed-header is applied */
}

/* Styling for the fixed header state */
.main-nav-container.fixed-header .inner {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    backdrop-filter: blur(12px); /* Apply blur effect to the background */
    padding: 10px; /* Adjust padding as needed */
}
 
/* Slider or hero section styling */
.slider-hero {
    position: relative; /* Ensure it's positioned relative for z-index to work */
    z-index: 1; /* Make sure it's lower than the header's z-index */
    /* Add other styling for your slider or hero section */
}

/* Ensure the slider content does not overlap with the header */
.slider-hero .slide {
    /* Ensure slide content is properly styled */
}























/* Style for the menu bar */
.NMmenu-bar {
    display: flex; /* Flexbox to center the content */
    justify-content: center; /* Center the menu list horizontally */
    padding: 10px 0; /* Space above and below the menu */
}

/* Style for the menu list */
.NMmenu-list {
    list-style: none;
    display: flex; /* Flexbox for horizontal alignment of items */
    flex-wrap: wrap; /* Allow items to wrap to the next line when needed */
    justify-content: center; /* Center the items horizontally */
    gap: 15px; /* Space between each menu item */
    padding: 0;
    margin: 0;
}

/* Style for each menu item */
.NMmenu-item {
    display: inline-block; /* Each item is displayed inline */
}

/* Style for the links inside the menu items */
.NMmenu-item a {
    display: block;
    padding: 5px 10px; /* Vertical and horizontal padding */
    background-color: #f4f6fc; /* Light background for each item */
    color: #333; /* Text color */
    text-decoration: none; /* Remove underline */
    border-radius: 10px; /* Rounded corners */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center the text inside */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition on hover */
    font-size: 12px;
}

/* Add a hover effect */
.NMmenu-item a:hover {
    background-color: #e9eef9; /* Darker background on hover */
    transform: scale(1.05); /* Slightly enlarge the item */
}

/* Optional: Responsive design for smaller screens */
@media (max-width: 768px) {
    .NMmenu-list {
        /* Stacking vertically or horizontally based on available space */
        flex-direction: row; /* Keep the items in a row if they fit */
        align-items: center; /* Vertically center align the items */
    }

    .NMmenu-item {
        margin-bottom: 10px; /* Add spacing between items */
    }
}







.s-product-card-promotion-title:where([dir="rtl"], [dir="rtl"] *) {
  right: 138px;
  }







.WEC-why-choose-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    padding: 40px 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-family: inherit;
}

.WEC-custom-text-container {
    margin-bottom: 30px;
    text-align: center;
}

.WEC-points-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 30px;
}

.WEC-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 55%;
}

.WEC-point {
    font-size: 14px;
    color: #000;
    padding: 15px;
    margin: 0;
    background-color: transparent;
    border-radius: 10px;
    box-shadow: none;
}

.WEC-point strong {
    display: block;
    margin-bottom: 8px;
}

/* Hide icons if present */
.WEC-point .icon-container {
    display: none !important;
}

.WEC-image-container {
    display: grid;
    grid-template-columns: 150px 300px;  /* small square + wide rectangle */
    grid-template-rows: 150px 150px;
    gap: 8px 8px; /* vertical and horizontal gap */
    width: 45%;
    box-sizing: border-box;
}

.img-wrapper {
    overflow: hidden;
    border-radius: 12px;
    position: relative;
}

.img-wrapper.small {
    width: 150px;
    height: 150px;
}

.img-wrapper.large {
    width: 300px;
    height: 150px;
}

.WEC-image-container > .img-wrapper:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.WEC-image-container > .img-wrapper:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.WEC-image-container > .img-wrapper:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.WEC-image-container > .img-wrapper:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 31px;
}

/* Remove shadows */
.WEC-why-choose-us, .WEC-point, .img-wrapper img {
    box-shadow: none !important;
}

/* Remove numbering */
.WEC-point strong::before {
    content: none !important;
}

/* Responsive: on mobile hide images, style points */
@media (max-width: 767px) {
    .WEC-image-container {
        display: none;
    }
    .WEC-points {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .WEC-why-choose-us {
        padding: 20px 10px;
    }
    .WEC-custom-text-container {
        text-align: center;
    }
    .WEC-points-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

















/* Q&A Section Styles */
.qa-image-text-section {
    display: flex;
    flex-direction: row; /* Side by side for desktop */
    align-items: stretch; /* Stretch to match height */
    padding: 20px; /* Padding around the section */
}

.qa-image-container {
    position: relative; /* For absolute positioning of text */
    border-radius: 21px; /* Rounded corners for the image container */
    overflow: hidden; /* Ensures corners are rounded */
    margin: 0; /* Remove side margins */
    width: 300px; /* Fixed width for desktop */
    flex-shrink: 0; /* Prevent shrinking */
}

.qa-image-container img {
    display: block; /* Block element */
    max-width: 100%; /* Responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 21px; /* Rounded corners for the image */
}

.qa-image-container img {
    display: block; /* Block element */
    max-width: 100%; /* Responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 21px; /* Rounded corners for the image */
}

/* Create the gradient overlay with a softer transition */
.qa-image-container::after {
    content: ''; /* Necessary to create a pseudo-element */
    position: absolute; /* Position the gradient overlay on top of the image */
    bottom: 0; /* Align the gradient at the bottom of the image */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    top: 0; /* Stretch it to the top */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); /* Softer white to transparent gradient */
    border-radius: 21px; /* Match border radius for rounded corners */
    pointer-events: none; /* Allow clicks to pass through the overlay */
}

/* Title and Subtitle */
.qa-text-overlay {
    position: absolute;
    bottom: 20px; /* Positioning */
    right: 10px; /* Align to the right */
    z-index: 1; /* Text above image */
    color: #000; /* Text color */
        max-width: calc(100% - 30px); /* Limit width to avoid overflow */
    word-wrap: break-word; /* Allow words to break to the next line */
}

.qa-text-overlay .qa-title {
    font-size: 24px; /* Title size */
    font-weight: bold; /* Title weight */
    margin: 0; /* No margins */
}

.qa-text-overlay .qa-subtitle {
    font-size: 18px; /* Subtitle size */
    font-weight: normal; /* Subtitle weight */
    margin: 5px 0 0; /* Spacing above */
}

/* Reset margin for direct children */
.qa-questions-container > * {
    margin: 0; /* Reset margin for direct children */
}
/* Questions Container */
.qa-questions-container {
    padding: 0px; /* Padding for mobile */
    flex: 1; /* Remaining space */
}

/* Question Styles */
.qa-question {
    border-radius: 21px; /* Round corners */
    background-color: #f7f7f7; /* Background color */
    color: #000; /* Text color */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Font weight */
    padding: 15px; /* Padding */
    margin: 2px 0; /* Reduced margin */
    cursor: pointer; /* Pointer cursor */
    position: relative; /* For the arrow */
    
}

/* Arrow Styles */
.qa-question::before {
    content: "▼"; /* Down arrow */
    font-size: 12px; /* Arrow size */
    position: absolute; /* Positioning */
    left: 15px; /* Distance from left */
    transition: transform 0.3s; /* Smooth transition */
}

.qa-question.active::before {
    transform: rotate(180deg); /* Up arrow when active */
}

/* Answer Styles */
.qa-answer {
    border-radius: 21px; /* Round corners */
    background-color: #f4f6fc; /* Background color */
    color: #333; /* Text color */
    font-size: 16px; /* Font size */
    opacity: 0; /* Hidden initially */
    transition: max-height 0.3s ease, opacity 0.3s ease; /* Transition */
    overflow: hidden; /* Hide overflow */
    max-height: 0; /* Hide height initially */
        padding: 5px; /* Padding */
    margin: 1px 5px; /* Reduced margin */
}

/* Show answer when active */
.qa-answer.active {
    opacity: 1; /* Fully visible */
    max-height: 200px; /* Adjust as necessary */
}

/* Mobile styles */
@media (max-width: 768px) {
    .qa-image-text-section {
        flex-direction: column; /* Stack items for mobile */
        align-items: center; /* Center align items */
        padding: 10px; /* Less padding */
    }
    .qa-image-container {
        margin: 20px 20px 20px 20px; /* Space below the image */
        width: 100%; /* Full width on mobile */
        max-width: 100%; /* Allow full width */
        display: flex; /* Flexbox to center content */
        justify-content: center; /* Center content */
        align-items: center; /* Center vertically */
    }
    .qa-image-container img {
        border-radius: 21px; /* Rounded corners for the image */
        width: 100%; /* Make the image responsive */
        height: auto; /* Maintain aspect ratio */
        max-height: 400px; /* Adjust max height as needed */
    }
    /* Mobile styles */
@media (max-width: 768px) {
    .qa-text-overlay {
        position: absolute; /* Keep absolute positioning */
        bottom: 0; /* Positioning from the bottom */
        left: 0; /* Align to the left */
        right: 0; /* Align to the right */
        z-index: 1; /* Text above image */
        color: #000; /* Text color */
                text-align: right; /* Align text to the left /*
    background: rgba(255, 255, 255, 0.7); /* Optional: background for better readability */
        padding: 10px 20px; /* Top and bottom padding, and left/right padding */
        box-sizing: border-box; /* Include padding in total width */
        word-wrap: break-word; /* Allow words to break to the next line */
    }
}


}










.s-button-outline {
  border-width: 0px;
  border-color: currentColor;
}



.s-button-btn {
    background-color: #f4f6fc; /* Button background color */
}

/* Hover effect */
.s-button-btn:hover {
 color: #333;
    background-color: #e9eef9; /* Darker background on 
}