.homebar ul li a {
    padding: 2px 12px 5px;
    font-size: 16px;
    background: #ff87876e;
    margin: 0 5px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    color: #000;
}
.homebar ul li {
    display: inline-block;
}
.promo-item a {
    color: inherit;
    text-decoration: none;
}
.promo-item p.headz {
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 16px;
}

.card {
    width:100%;
    background:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,.1);
    border-radius:10px;
    transition:0.5s;
}
/* Style for the container */
.category-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
  gap: 16px; /* Space between the icon boxes */
  justify-items: center; /* Centers the content inside each grid cell */
  padding: 20px;
}

/* Style for each icon box */
.icon-box {
	width:100%;
	box-shadow: 2.16px 2.16px 15.09px 0px #00000026;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers the text and image */
  text-align: center;
  text-decoration: none; /* Removes the default link styling */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation for hover effect */
}

/* Title under each icon */
.icon-title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 8px;
  color: #333;
}

/* Style for images (icons) */
.icon-box img {
  width: 103px; /* You can adjust the size of the icons */
  height: 70px;
  object-fit: contain; /* Maintains aspect ratio of images */
}

/* Hover effect */
.icon-box:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
}

/* Optional: Media query for smaller screens */
@media (max-width: 768px) {
  .category-icons {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Adjust grid for smaller screens */
  }
}
/* General Tab Container */
#tabs {
  font-family: Arial, sans-serif; /* Set a font for the tabs */
  margin: 20px 0;
}

/* Style for the tab list */
#tabs ul {
  list-style-type: none; /* Removes the default bullet points */
  padding: 0;
  margin: 0;
  display: flex; /* Align the tabs horizontally */
  justify-content: center; /* Centers the tabs within the container */
}

/* Style for each tab item */
#tabs ul li {
  margin-right: 20px; /* Space between the tabs */
}

/* Style for each tab link */
#tabs ul li a {
  text-decoration: none; /* Removes the default link underline */
  color: #333; /* Default color for the tabs */
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px; /* Add padding around the tab text */
  display: inline-block;
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
  border-radius: 5px; /* Rounded corners for the tabs */
  border: 2px solid transparent; /* Add transparent border for hover effect */
}

/* Hover effect for tabs */
#tabs ul li a:hover {
  background-color: #007BFF; /* Background color when hovered */
  color: white; /* Change text color on hover */
  border-color: #0056b3; /* Border color changes on hover */
}

/* Active Tab Styling (when the tab is selected) */
#tabs ul li a.active {
  background-color: #007BFF; /* Background color for active tab */
  color: white; /* White text for active tab */
  border-color: #0056b3; /* Border color for active tab */
}

/* Tab Content Styling */
.tab-content {
  display: none; /* Hide all tab content by default */
  padding: 20px;
  background-color: #f9f9f9; /* Light background for the tab content */
  border: 1px solid #ddd; /* Border around the content */
  border-radius: 5px;
  margin-top: 20px;
}

/* Active Tab Content */
.tab-content.active {
  display: block; /* Show content for active tab */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #tabs ul {
    flex-direction: column; /* Stack tabs vertically on smaller screens */
    align-items: center;
  }

  #tabs ul li {
    margin-bottom: 10px; /* Space between vertically stacked tabs */
  }

  #tabs ul li a {
    padding: 12px 25px; /* Adjust padding for mobile screens */
  }
}
/* Wrapper for the text and links */
.text-with-links-wrapper {
  padding: 20px; /* Add some padding around the container */
  background-color: #f9f9f9; /* Light background color for the wrapper */
  border-radius: 8px; /* Rounded corners for the wrapper */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Add a subtle shadow around the wrapper */
  text-align: center; /* Center align the text and links */
  max-width: 100%; /* Make sure it takes up full width within the parent container */
  margin-bottom: 20px; /* Space below this section */
}

/* Style for the inner content (text and links) */
.text-with-links {
  max-width: 800px; /* Optional: Set a maximum width for the content */
  margin: 0 auto; /* Center the content horizontally */
}

/* Style for the paragraph */
.text-with-links p {
  font-size: 18px; /* Font size for the text */
  font-weight: 600; /* Bold font for the paragraph */
  color: #333; /* Dark text color for readability */
  margin-bottom: 15px; /* Space below the paragraph */
  line-height: 1.5; /* Spacing between lines of text */
}

/* Style for the links */
.text-with-links a {
  color: #068488; /* Blue color for links */
  text-decoration: none; /* Remove underline from links */
  font-size: 16px; /* Font size for the links */
  font-weight: bold; /* Bold font for the links */
  margin: 0 10px; /* Space between the links */
  transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for the links */
.text-with-links a:hover {
  color: #0056b3; /* Darker blue when hovered */
  text-decoration: underline; /* Underline the links on hover */
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
  .text-with-links p {
    font-size: 16px; /* Adjust font size for smaller screens */
  }

  .text-with-links a {
    font-size: 14px; /* Adjust link font size for mobile */
  }

  .text-with-links-wrapper {
    padding: 15px; /* Reduce padding on mobile */
  }
}
/* General Styling for the List Container */
.home-section--content {
  display: grid; /* Grid layout to arrange items */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid with minimum column width of 250px */
  gap: 20px; /* Space between items */
  padding: 20px; /* Padding inside the container */
  list-style: none; /* Remove default list styling */
  margin: 0; /* Remove default margin */
}

/* Styling for Each Collection Item */
.collection__item {
  position: relative; /* Ensures positioning of child elements */
  border-radius: 10px; /* Rounded corners */
  overflow: hidden; /* Hides anything overflowing the item */
  background-color: #ffffff; /* White background for items */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow around the item */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation for hover effect */
}

.collection__item:hover {
  transform: translateY(-5px); /* Slightly raise the item on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
}

/* Image Styling for Each Collection Item */
.collection__item-image img {
  width: 100%; /* Ensure the image fills the item */
  height: 100%; /* Ensure the image fits inside the item */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  object-position: center; /* Centers the image */
  transition: transform 0.3s ease; /* Smooth zoom-in effect on hover */
}

/* Hover Effect for Images */
.collection__item:hover .collection__item-image img {
  transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Title Styling for Each Collection Item */
.collection__item-info {
  position: absolute; /* Position it at the bottom of the image */
  bottom: 10px; /* 10px from the bottom */
  left: 10px; /* 10px from the left */
  right: 10px; /* 10px from the right */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  color: #ffffff; /* White text */
  padding: 10px; /* Padding around the text */
  font-size: 16px; /* Font size for the title */
  font-weight: bold; /* Bold font for the title */
  text-align: center; /* Center the text */
  border-radius: 5px; /* Rounded corners for the title background */
  opacity: 0; /* Start with no visibility */
  transition: opacity 0.3s ease; /* Fade-in effect on hover */
}

/* Show title when hovering over the item */
.collection__item:hover .collection__item-info {
  opacity: 1; /* Make title visible on hover */
}

/* Styling for <noscript> images */
.noscript img {
  display: none; /* Hide the noscript images, they are used for fallback */
}

/* Responsive Layout Adjustments */
@media (max-width: 768px) {
  .home-section--content {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust the column size for smaller screens */
    padding: 10px; /* Less padding for smaller screens */
  }

  .collection__item-info {
    font-size: 14px; /* Smaller font size for the title */
    padding: 8px; /* Less padding for the title */
  }
}

@media (max-width: 480px) {
  .home-section--content {
    grid-template-columns: 1fr; /* Single column layout for very small screens */
  }
}
/* Container for the list of items */
.ingredlisder {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9; /* Light background color for contrast */
}

/* Individual item styling */
.item {
  background-color: #ffffff; /* White background for each item */
  border: 1px solid #e0e0e0; /* Subtle border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  width: 500px; /* Set a consistent width */
  padding: 15px;
  text-align: center; /* Center align text */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item:hover {
  transform: translateY(-5px); /* Lift on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Image styling */
.itmg {
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0; /* Rounded corners for the top edge */
  margin-bottom: 15px;
}

/* Review text styling */
.rev {
  font-size: 16px;
  color: #333333; /* Darker text for readability */
  margin-bottom: 15px;
  font-style: italic; /* Italicized for emphasis */
  line-height: 1.5;
}

/* Review rating container */
.revrating {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

/* Star image styling */
.starz {
  width: 80px; /* Adjust size of star rating image */
  margin-right: 10px;
}

/* Customer name styling */
.cname {
  font-size: 14px;
  color: #777777; /* Subtle gray color */
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ingredlisder {
    flex-direction: column;
    align-items: center;
  }

  .item {
    width: 90%; /* Adjust width for smaller screens */
  }
}
/* General container styling */
.rich-text--container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #f8f9fa; /* Light background for contrast */
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

/* Styling for the rich-text block */
.rich-text-block {
  max-width: 800px;
  margin: 0 auto;
  animation: fadeIn 1s ease-in-out;
}

/* Alignment for text within the block */
.rich-text-alignment-center {
  text-align: center;
}

/* Heading styles */
.rich-text-heading {
  font-family: 'Arial', sans-serif; /* Use a clean, modern font */
  font-weight: bold;
  line-height: 1.4;
  color: #212529; /* Dark text for readability */
}

.rich-text-heading-medium {
  font-size: 2rem; /* Medium heading size */
}

/* Responsive Design */
@media (max-width: 768px) {
  .rich-text-heading-medium {
    font-size: 1.5rem; /* Adjust heading size for smaller screens */
  }

  .rich-text--container {
    padding: 1rem; /* Reduce padding for smaller screens */
  }
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Container for blog posts */
.blogposts--container {
  padding: 20px;
  background-color: #f9f9f9;
}

/* Inner container for blog posts */
.home-section--content.blogposts--inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Space between blog post items */
  justify-content: space-between;
}

/* Individual blog post styling */
.blog__listing__article {
  flex: 1;
  max-width: 30%; /* Ensure 3 columns in desktop view */
  min-width: 280px; /* Prevent items from becoming too small */
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.blog__listing__article:hover {
  transform: scale(1.05); /* Slight hover effect */
}

/* Blog post image */
.article--excerpt-image img {
  width: 100%;
  height: auto;
  border-bottom: 4px solid #ddd; /* Add a small border under the image */
}

/* Blog post content */
.article--excerpt-content {
  padding: 20px;
  font-family: 'Arial', sans-serif;
  color: #333;
}

/* Category tags */
.article--category {
  margin-bottom: 10px;
}

.article--category a {
  font-size: 14px;
  color: #ff6f61; /* A nice color for the tags */
  text-decoration: none;
  font-weight: bold;
}

.article--category a:hover {
  text-decoration: underline;
}

/* Article title styling */
.article--excerpt-title a {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  line-height: 1.4;
  display: block;
  margin-bottom: 10px;
}

.article--excerpt-title a:hover {
  color: #ff6f61; /* Highlight title on hover */
}

/* "Read now" button */
.article--excerpt-readmore {
  font-size: 14px;
  color: #068488;
  text-decoration: none;
  font-weight: bold;
}

.article--excerpt-readmore:hover {
  text-decoration: underline;
}

/* Footer of the blog posts section */
.blogposts--footer {
  text-align: center;
  margin-top: 30px;
}

.blogposts--footer-link {
  font-size: 16px;
  color: #0077cc;
  text-decoration: none;
}

.blogposts--footer-link:hover {
  text-decoration: underline;
}

/* Icon for "See More" link */
.blogposts--footer-icon {
  margin-left: 8px;
  vertical-align: middle;
}

.icon-signpost-arrow {
  fill: #0077cc;
}

/* Responsive design */
@media (max-width: 768px) {
  .home-section--content.blogposts--inner {
    flex-direction: column; /* Stack items vertically on smaller screens */
  }

  .blog__listing__article {
    max-width: 100%;
  }
}
/* General styles for the container */
.highlights-banner__content {
  display: flex;
  gap: 20px; /* Space between blocks */
  justify-content: space-between; /* Even spacing across the blocks */
  padding: 20px 0; /* Padding on top and bottom */
  background-color: #f9f9f9;
}

/* Style for each block inside the highlights banner */
.highlights-banner__block {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow around each block */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden;
  text-align: center;
  padding: 20px;
  transition: transform 0.3s ease; /* Smooth hover effect */
  width: calc(50% - 10px); /* Default to 50% width for desktop */
}

/* Hover effect for the blocks */
.highlights-banner__block:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Centering the icon inside each block */
.highlights-banner__icon {
  margin-bottom: 20px; /* Space below the icon */
}

.highlights-banner__custom-icon {
  width: 80px; /* Set width for icons */
  height: 80px; /* Set height for icons */
  object-fit: cover; /* Ensures the icon is properly scaled */
  object-position: center; /* Centers the image within the container */
  margin: 0 auto; /* Center icon horizontally */
}

/* Styling the heading (title) of each block */
.highlights-banner__heading {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* Paragraph styling inside each block */
.highlights-banner__text p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #555; /* Slightly lighter text for readability */
}

/* Styling the "learn more" links */
.highlights-banner__text a {
  font-size: 14px;
  font-weight: bold;
  color: #0077cc; /* Link color */
  text-decoration: none;
}

.highlights-banner__text a:hover {
  text-decoration: underline; /* Underline on hover for better interactivity */
}

/* Styling the link block (for the whole clickable area) */
.highlights-banner__block-link {
  display: block;
  margin-top: 20px;
  text-decoration: none;
}

/* Accessibility: hiding the links from view while keeping them available for screen readers */
.skip-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  overflow: hidden;
}

/* Media query for mobile and tablet devices */
@media (max-width: 768px) {
  .highlights-banner__block {
    width: 100%; /* Stack blocks vertically on small screens */
  }

  .highlights-banner__content {
    gap: 15px; /* Reduce gap between blocks on smaller screens */
  }

  .highlights-banner__custom-icon {
    width: 60px; /* Smaller icon size on mobile */
    height: 60px; /* Smaller icon size on mobile */
  }

  .highlights-banner__heading {
    font-size: 16px; /* Adjust heading size on smaller screens */
  }

  .highlights-banner__text p {
    font-size: 12px; /* Smaller text on mobile */
  }

  .highlights-banner__text a {
    font-size: 12px; /* Smaller link size on mobile */
  }
}

/* Additional mobile responsiveness for extremely small screens (e.g., phones in portrait) */
@media (max-width: 480px) {
  .highlights-banner__block {
    padding: 15px; /* Reduce padding on very small screens */
  }

  .highlights-banner__text p {
    font-size: 11px; /* Even smaller text on very small screens */
  }

  .highlights-banner__heading {
    font-size: 14px; /* Smaller heading size */
  }
}


.zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}


 .slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;
}
 .slider .logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}
 .slider .logos .fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}


@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.h2, h2 {
    font-size: 24px;
}
.signup-container {
  text-align: center;
  padding: 20px;
}

.signup-container input {
  padding: 10px;
  margin: 5px;
  width: 311px;
  font-size: 16px;
}

.signup-container button {
  padding: 10px 20px;
  background-color: #068488;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.signup-container button:hover {
  background-color: #0056b3;
}