/* Add custom CSS styles below */ 
.s-product-card-sale-price h4
{
 color:rgb(56, 174, 4)!important;
 font-size:1rem}
.s-count-down-item
{
color:rgba(0, 12, 3, 0.82)
}
.text-red-800
{
color:rgb(56, 174, 4)
}
a.inline-block {
  color: white; /* Text color */
  outline: none; /* Remove outline */
  border: 2px solid transparent; /* Initially transparent border */
  font-weight: 700; /* Bold text */
  border-radius: 5px; /* Rounded corners */
  padding: 0.5rem 2rem; /* Padding */
  background-color: rgba(51, 51, 51, 0.5); /* Semi-transparent background */
  cursor: pointer; /* Pointer cursor on hover */
  margin-right: 1rem; /* Right margin */
  transition: all 0.3s ease; /* Smooth transition */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow */
  display: inline-block; /* Display as inline block */
}

a.inline-block:hover {
  color: black; /* Change text color on hover */
  background-color: white; /* Change background on hover */
  border-color: black; /* Change border color on hover */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
}

/* Default styles for larger screens */
.s-block--full-banner .full-banner-entry {
  width: 100%;              /* Set width to 80% */
  margin: 0 auto;          /* Center the banner */
  padding: 20px 0;         /* Optional: Add vertical padding */
  background-size: cover;  /* Ensure the background image covers the entire div */
}


/* Styles for mobile screens */
/* Styles for mobile screens */
@media (max-width: 768px) {
  .s-block--full-banner .full-banner-entry {
    width: 100%;            /* Increase width for mobile */
    padding: 10px 0;      /* Adjust padding for mobile */
    background-size: contain; /* Make sure the image fits inside */
    background-repeat: no-repeat; /* Prevent image repetition */
  }
}
/* For desktop screens: Increase the size of the round menus */
.s-block--categories .swiper-slide .slide--cat-entry img {
  width: 96px; /* Set uniform width */
  height: 96px; /* Set uniform height */
  border-radius: 50%; /* Keep the images round */
  display: block; /* Ensure proper alignment */
  margin: 0 auto; /* Center the images */
}

.s-block--categories .swiper-slide {
  flex: 0 0 16.66%; /* Show 6 items per row on larger screens (100% / 6) */
  text-align: center; /* Center-align the text */
}

/* Ensure uniform heading size for menu items */
.s-block--categories .swiper-slide h2 {
  font-size: 16px; /* Adjust as needed */
  margin-top: 8px; /* Space between image and text */
  margin-bottom: 0; /* Keep consistent spacing */
  line-height: 1.2; /* Ensure text doesn't overflow */
  text-align: center; /* Center-align the heading */
  white-space: nowrap; /* Prevent the text from wrapping */
  overflow: hidden; /* Hide overflow */
  text-overflow: ellipsis; /* Add ellipsis for long titles */
}

/* For mobile screens: Show 3 round menus */
@media (max-width: 768px) {
  .s-block--categories .swiper-slide {
    flex: 0 0 33.33%; /* Show 3 items per row (100% / 3) on mobile */
  }

  .s-block--categories .swiper-slide .slide--cat-entry img {
    width: 80px; /* Slightly smaller width on mobile */
    height: 80px; /* Slightly smaller height on mobile */
  }

  .s-block--categories .swiper-slide h2 {
    font-size: 10px; /* Decreased text size on mobile */
    white-space: normal; /* Allow wrapping for two-word titles */
    word-break: break-word; /* Ensure proper word wrapping */
    line-height: 1.1; /* Adjust line height */
  }
}

.s-block--full-banner .full-banner-entry {
    height: 450px; /* Increased height for desktop */
    background-size: cover; /* Ensures the image covers the area */
    background-position: center; /* Center the image */
    overflow: hidden; /* Prevent overflow issues */
}

.s-block--full-banner .flex {
    padding: 2rem; /* Adjust padding as needed for content alignment */
}

/* Mobile styles */
@media (max-width: 768px) {
    .s-block--full-banner .full-banner-entry {
        height: 250px; /* Increased height for mobile */
        background-size: contain; /* Adjusts image to fit within the banner */
    }

    .s-block--full-banner .flex {
        padding: 1rem; /* Adjust padding for mobile */
    }
}

/* Optional: Adjust the overlay height if needed */
.s-block--full-banner .overlay {
    height: 100%; /* Ensure the overlay covers the entire height */
}
/* Decrease margins only for the first .s-block--photos-slider section */
.s-block--photos-slider:first-of-type {
    margin-top: 10px;    /* Adjust the top margin */
    margin-bottom: -3rem; /* Adjust the bottom margin */
    margin-left: -3rem;    /* Adjust the left margin */
    margin-right: -3rem;   /* Adjust the right margin */
}

/* Mobile-specific margin adjustments for the first section */
@media (max-width: 767px) {
    .s-block--photos-slider:first-of-type {
        margin-top: 5px;    /* Smaller top margin for mobile */
        margin-bottom: -3rem; /* Smaller bottom margin for mobile */
        margin-left: 0;     /* Remove left margin for mobile */
        margin-right: 0;    /* Remove right margin for mobile */
        
    }
    
}
.swiper-pagination {
    display: none;
}
.container {
    padding-left: 10px; /* Adjust as needed */
    padding-right: 10px; /* Adjust as needed */
}
.s-block--categories  {
    margin-top: 1rem;  /* Adjust the value as needed */
    margin-bottom: 0rem; /* Adjust the value as needed */
}
.slide--cat-entry {
    background: none !important; /* Removes any background that may create a square look */
    border: none !important;     /* Removes any border that may create a square look */
    padding: 0 !important;       /* Adjusts padding to remove square spacing */
    margin: 0 !important;        /* Removes any margin that may add to the square appearance */
    display: inline-block;       /* Makes the elements inline, allowing them to adjust dynamically */
}

.slide--cat-entry img {
    border-radius: 50%;           /* Ensures the images are perfectly round */
    width: 80px !important;       /* Set a fixed width for all images */
    height: 80px !important;      /* Set a fixed height for all images */
    object-fit: cover !important; /* Ensures the image scales to fit within the circle without distortion */
}

.slide--cat-entry {
    text-align: center;           /* Ensures that the text and image are centered */
    margin: 10px;                 /* Adds some margin around each slide for spacing */
}

.slide--cat-entry h2 {
    margin-top: 10px;             /* Space between the image and the text */
    font-size: 14px;              /* Adjusts the text size */
    color: #000;                  /* Sets the text color */
}
.slide--cat-entry img {
    border-radius: 50%;           /* Ensures the images are perfectly round */
    width: 80px !important;       /* Set a fixed width for all images */
    height: 80px !important;      /* Set a fixed height for all images */
    object-fit: cover !important; /* Ensures the image scales to fit within the circle without distortion */
}

.slide--cat-entry {
    text-align: center;           /* Ensures that the text and image are centered */
    margin: 10px;                 /* Adds some margin around each slide for spacing */
}

.slide--cat-entry h2 {
    margin-top: 10px;             /* Space between the image and the text */
    font-size: 14px;              /* Adjusts the text size */
    color: #000;                  /* Sets the text color */
}
/* Decrease bottom margin of the entire section for desktop */
.s-block--categories {
    margin-bottom: -2rem; /* Adjust this value as needed */
}

/* Optional: Decrease the bottom margin for individual slides on desktop */
.slide--cat-entry {
    margin-bottom: 0; /* Adjust this value to control vertical spacing between entries */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Decrease bottom margin of the entire section for mobile */
    .s-block--categories {
        margin-bottom: -3rem; /* Adjust this value for mobile */
    }

    /* Decrease the bottom margin for individual slides on mobile */
    .slide--cat-entry {
        margin-bottom: 0; /* Adjust this value for mobile */
    }
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .s-block--fixed-banner {
        margin-top: 15px; /* Adjust this value for mobile */
    }
}
@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    .s-products-slider-card {
        width: calc(50% - 5px); /* Slightly increase width by reducing margin */
        margin-right: 5px; /* Add space between products */
        box-sizing: border-box; /* Ensures padding and borders are included in the width */
        overflow: hidden; /* Prevent overflow issues */
    }

    /* Remove right margin from the last product in each row */
    .s-products-slider-card:nth-child(2n) {
        margin-right: 0; /* No margin on the right side of every second item */
    }

    /* Adjust title font size */
    .s-products-slider-card .s-product-card-content-title a { /* Updated to target the title correctly */
        font-size: 12px; /* Decrease the title size as needed */
        line-height: 1.2; /* Adjust line height for better spacing */
        overflow: hidden; /* Prevent overflow issues */
        text-overflow: ellipsis; /* Add ellipsis for long titles */
        white-space: nowrap; /* Prevent text from wrapping */
    }

    /* Adjust spacing between title and price */
    .s-product-card-content-main {
        margin-bottom: 0; /* Add margin below the title */
    }

    /* Adjust price and button alignment */
    .s-product-card-content-footer {
        display: flex; /* Use flexbox for alignment */
        justify-content: space-between; /* Align items */
        align-items: center; /* Center align items vertically */
    }

}
/* Hover Effect for Menu Items */
#mobile-menu .main-menu li a:hover span {
    color: #ff6600;  /* Change text color on hover */
}

/* Hover effect for icons */
#mobile-menu .main-menu li a:hover img {
    transform: scale(1.1);  /* Slightly enlarge icon on hover */
    transition: transform 0.2s ease;  /* Smooth transition */
}
/* Add to Cart button - Lightest dark color, shadow, reduced height, and text size */
.s-product-card-content-footer .s-button-wrap .s-button-element {
    background-color: #444; /* Lightest dark background */
    color: white; /* White text color */
    border: 2px solid transparent; /* No border, to preserve original shape */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Light shadow */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    padding: 6px 16px; /* Reduced height (smaller padding) */
    font-size: 14px; /* Smaller text size */
    line-height: 1.2; /* Adjust line height for a more compact button */
}

/* Add to Cart button hover effect */
.s-product-card-content-footer .s-button-wrap .s-button-element:hover {
    background-color: #f5f5f5; /* Light background on hover */
    color: #444; /* Dark text on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow on hover */
}
/* For devices like iPhone 15 Pro */
@media (max-width: 768px) { /* Targeting small screen sizes */
    .s-product-card-entry {
        width: 100% !important; /* Increase the width for small screens */
        max-width: 350px; /* Adjust the max-width as needed */
        margin: 0 auto; /* Center the card */
    }

    /* Optionally, adjust padding and spacing */
    .s-product-card-content {
        padding: 10px;
    }

    .s-product-card-content-title {
        font-size: 16px; /* Adjust the font size of the title */
    }

    .s-product-card-sale-price h4 {
        font-size: 18px; /* Adjust the font size of the price */
    }
}
/* Adjust "Add to Cart" button text size for mobile screens */
@media only screen and (max-width: 768px) {
    .s-button-wrap .s-button-element .s-button-text {
        font-size: 12px; /* Decrease text size */
    }
}
@media (max-width: 768px) {
    .s-product-card-sale-price h4 {
        font-size: 1rem; /* Adjust font size for mobile if needed */
    }
}
.s-metadata-row-value a {
    visibility: hidden; /* Hide the original link */
}

.s-metadata-row {
    display: flex;
    align-items: center;
}

.s-metadata-row-name {
    margin-right: 10px; /* Space between '2 year warranty' and 'Learn More' */
    white-space: nowrap; /* Prevent wrapping of '2 year warranty' */
}

.s-metadata-row-value a::before {
    content: "Learn More"; /* Add 'Learn More' text */
    visibility: visible; /* Ensure 'Learn More' is visible */
    color: #007bff; /* Blue color for the text */
    text-decoration: underline; /* Underline the 'Learn More' text */
    cursor: pointer; /* Make the 'Learn More' text look clickable */
    white-space: nowrap; /* Prevent 'Learn More' from wrapping */
    margin-left: 10px; /* Space between 'Learn More' and warranty text */
}
/* Targeting mobile screens */
@media (max-width: 767px) {
    /* Reducing bottom margin of the brand image */
    .product-brand {
        margin-bottom: 0px !important; /* Adjust as needed */
    }
}