:root,
        .color-scheme-1 {
          --color-background: 239,240,245;
        
          --gradient-background: #eff0f5;
        

        

        --color-foreground: 14,27,77;
        --color-background-contrast: 161,166,196;
        --color-shadow: 14,27,77;
        --color-button: 71,112,219;
        --color-button-text: 239,240,245;
        --color-secondary-button: 239,240,245;
        --color-secondary-button-text: 14,27,77;
        --color-link: 14,27,77;
        --color-badge-foreground: 14,27,77;
        --color-badge-background: 239,240,245;
        --color-badge-border: 14,27,77;
        --payment-terms-background-color: rgb(239 240 245);
      }
      
        
        .color-scheme-2 {
          --color-background: 255,255,255;
        
          --gradient-background: #ffffff;
        

        

        --color-foreground: 14,27,77;
        --color-background-contrast: 191,191,191;
        --color-shadow: 14,27,77;
        --color-button: 14,27,77;
        --color-button-text: 255,255,255;
        --color-secondary-button: 255,255,255;
        --color-secondary-button-text: 14,27,77;
        --color-link: 14,27,77;
        --color-badge-foreground: 14,27,77;
        --color-badge-background: 255,255,255;
        --color-badge-border: 14,27,77;
        --payment-terms-background-color: rgb(255 255 255);
      }
      
        
        .color-scheme-3 {
          --color-background: 14,27,77;
        
          --gradient-background: #0e1b4d;
        

        

        --color-foreground: 255,255,255;
        --color-background-contrast: 18,35,99;
        --color-shadow: 14,27,77;
        --color-button: 255,255,255;
        --color-button-text: 14,27,77;
        --color-secondary-button: 14,27,77;
        --color-secondary-button-text: 255,255,255;
        --color-link: 255,255,255;
        --color-badge-foreground: 255,255,255;
        --color-badge-background: 14,27,77;
        --color-badge-border: 255,255,255;
        --payment-terms-background-color: rgb(14 27 77);
      }
      
        
        .color-scheme-4 {
          --color-background: 71,112,219;
        
          --gradient-background: #4770db;
        

        

        --color-foreground: 255,255,255;
        --color-background-contrast: 27,57,136;
        --color-shadow: 14,27,77;
        --color-button: 255,255,255;
        --color-button-text: 71,112,219;
        --color-secondary-button: 71,112,219;
        --color-secondary-button-text: 255,255,255;
        --color-link: 255,255,255;
        --color-badge-foreground: 255,255,255;
        --color-badge-background: 71,112,219;
        --color-badge-border: 255,255,255;
        --payment-terms-background-color: rgb(71 112 219);
      }
      
        
        .color-scheme-5 {
          --color-background: 227,36,2;
        
          --gradient-background: #e32402;
        

        

        --color-foreground: 255,255,255;
        --color-background-contrast: 101,16,1;
        --color-shadow: 14,27,77;
        --color-button: 255,255,255;
        --color-button-text: 227,36,2;
        --color-secondary-button: 227,36,2;
        --color-secondary-button-text: 255,255,255;
        --color-link: 255,255,255;
        --color-badge-foreground: 255,255,255;
        --color-badge-background: 227,36,2;
        --color-badge-border: 255,255,255;
        --payment-terms-background-color: rgb(227 36 2);
      }
      

      body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5 {
        color: rgba(var(--color-foreground), 0.75);
      }

      :root {
        --font-body-family: Questrial, sans-serif;
        --font-body-style: normal;
        --font-body-weight: 400;
        --font-body-weight-bold: 700;

        --font-heading-family: Archivo, serif;
        --font-heading-style: normal;
        --font-heading-weight: 700;

        --font-body-scale: 1.05;
        --font-heading-scale: 1.0476190476190477;

        --media-padding: px;
        --media-border-opacity: 0.1;
        --media-border-width: 0px;
        --media-radius: 20px;
        --media-shadow-opacity: 0.0;
        --media-shadow-horizontal-offset: 0px;
        --media-shadow-vertical-offset: 4px;
        --media-shadow-blur-radius: 5px;
        --media-shadow-visible: 0;

        --page-width: 120rem;
        --page-width-margin: 0rem;

        --product-card-image-padding: 1.6rem;
        --product-card-corner-radius: 1.8rem;
        --product-card-text-alignment: left;
        --product-card-border-width: 0.1rem;
        --product-card-border-opacity: 1.0;
        --product-card-shadow-opacity: 0.0;
        --product-card-shadow-visible: 0;
        --product-card-shadow-horizontal-offset: 0.0rem;
        --product-card-shadow-vertical-offset: 0.4rem;
        --product-card-shadow-blur-radius: 0.5rem;

        --collection-card-image-padding: 1.6rem;
        --collection-card-corner-radius: 1.8rem;
        --collection-card-text-alignment: left;
        --collection-card-border-width: 0.1rem;
        --collection-card-border-opacity: 1.0;
        --collection-card-shadow-opacity: 0.0;
        --collection-card-shadow-visible: 0;
        --collection-card-shadow-horizontal-offset: 0.0rem;
        --collection-card-shadow-vertical-offset: 0.4rem;
        --collection-card-shadow-blur-radius: 0.5rem;

        --blog-card-image-padding: 1.6rem;
        --blog-card-corner-radius: 1.8rem;
        --blog-card-text-alignment: left;
        --blog-card-border-width: 0.1rem;
        --blog-card-border-opacity: 1.0;
        --blog-card-shadow-opacity: 0.0;
        --blog-card-shadow-visible: 0;
        --blog-card-shadow-horizontal-offset: 0.0rem;
        --blog-card-shadow-vertical-offset: 0.4rem;
        --blog-card-shadow-blur-radius: 0.5rem;

        --badge-corner-radius: 0.0rem;

        --popup-border-width: 1px;
        --popup-border-opacity: 0.1;
        --popup-corner-radius: 18px;
        --popup-shadow-opacity: 0.0;
        --popup-shadow-horizontal-offset: 0px;
        --popup-shadow-vertical-offset: 4px;
        --popup-shadow-blur-radius: 5px;

        --drawer-border-width: 0px;
        --drawer-border-opacity: 0.1;
        --drawer-shadow-opacity: 0.0;
        --drawer-shadow-horizontal-offset: 0px;
        --drawer-shadow-vertical-offset: 4px;
        --drawer-shadow-blur-radius: 5px;

        --spacing-sections-desktop: 0px;
        --spacing-sections-mobile: 0px;

        --grid-desktop-vertical-spacing: 28px;
        --grid-desktop-horizontal-spacing: 28px;
        --grid-mobile-vertical-spacing: 14px;
        --grid-mobile-horizontal-spacing: 14px;

        --text-boxes-border-opacity: 0.1;
        --text-boxes-border-width: 0px;
        --text-boxes-radius: 20px;
        --text-boxes-shadow-opacity: 0.0;
        --text-boxes-shadow-visible: 0;
        --text-boxes-shadow-horizontal-offset: 0px;
        --text-boxes-shadow-vertical-offset: 4px;
        --text-boxes-shadow-blur-radius: 5px;

        --buttons-radius: 40px;
        --buttons-radius-outset: 41px;
        --buttons-border-width: 1px;
        --buttons-border-opacity: 1.0;
        --buttons-shadow-opacity: 0.0;
        --buttons-shadow-visible: 0;
        --buttons-shadow-horizontal-offset: 0px;
        --buttons-shadow-vertical-offset: 4px;
        --buttons-shadow-blur-radius: 5px;
        --buttons-border-offset: 0.3px;

        --inputs-radius: 26px;
        --inputs-border-width: 1px;
        --inputs-border-opacity: 0.55;
        --inputs-shadow-opacity: 0.0;
        --inputs-shadow-horizontal-offset: 0px;
        --inputs-margin-offset: 0px;
        --inputs-shadow-vertical-offset: 4px;
        --inputs-shadow-blur-radius: 5px;
        --inputs-radius-outset: 27px;

        --variant-pills-radius: 40px;
        --variant-pills-border-width: 1px;
        --variant-pills-border-opacity: 0.55;
        --variant-pills-shadow-opacity: 0.0;
        --variant-pills-shadow-horizontal-offset: 0px;
        --variant-pills-shadow-vertical-offset: 4px;
        --variant-pills-shadow-blur-radius: 5px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: 0.06rem;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }
       .drawer {
    visibility: hidden;
  }
   header-drawer {
    justify-self: start;
    margin-left: -1.2rem;
  }@media screen and (min-width: 990px) {
      header-drawer {
        display: none;
      }
    }.menu-drawer-container {
    display: flex;
  }

  .list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .list-menu--inline {
    display: inline-flex;
    flex-wrap: wrap;
  }

  summary.list-menu__item {
    padding-right: 2.7rem;
  }

  .list-menu__item {
    display: flex;
    align-items: center;
    line-height: calc(1 + 0.3 / var(--font-body-scale));
  }

  .list-menu__item--link {
    text-decoration: none;
    padding-bottom: 1rem;
    padding-top: 1rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
  }

  @media screen and (min-width: 750px) {
    .list-menu__item--link {
      padding-bottom: 0.5rem;
      padding-top: 0.5rem;
    }
  }
  .header {
    padding: 10px 3rem 10px 3rem;
  }

  .section-header {
    position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
    margin-bottom: 0px;
  }

  @media screen and (min-width: 750px) {
    .section-header {
      margin-bottom: 0px;
    }
  }

  @media screen and (min-width: 990px) {
    .header {
      padding-top: 20px;
      padding-bottom: 20px;
    }
  }
     



      :root {
        --font-body-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        --font-body-style: normal;
        --font-body-weight: 400;
        --font-body-weight-bold: 700;

        --font-heading-family: Poppins, sans-serif;
        --font-heading-style: normal;
        --font-heading-weight: 600;

        --font-body-scale: 1.0;
        --font-heading-scale: 1.0;

        --color-base-text: 0, 0, 0;
        --color-shadow: 0, 0, 0;
        --color-base-background-1: 237, 237, 237;
        --color-base-background-2: 243, 243, 243;
        --color-base-solid-button-labels: 255, 255, 255;
        --color-base-outline-button-labels: 0, 0, 0;
        --color-base-accent-1: 0, 0, 0;
        --color-base-accent-2: 19, 25, 33;
        --payment-terms-background-color: #ededed;

        --gradient-base-background-1: #ededed;
        --gradient-base-background-2: #f3f3f3;
        --gradient-base-accent-1: #000000;
        --gradient-base-accent-2: #131921;

        --media-padding: px;
        --media-border-opacity: 0.05;
        --media-border-width: 1px;
        --media-radius: 0px;
        --media-shadow-opacity: 0.0;
        --media-shadow-horizontal-offset: 0px;
        --media-shadow-vertical-offset: 4px;
        --media-shadow-blur-radius: 5px;
        --media-shadow-visible: 0;

        --page-width: 150rem;
        --page-width-margin: 0rem;

        --product-card-image-padding: 0.0rem;
        --product-card-corner-radius: 0.8rem;
        --product-card-text-alignment: center;
        --product-card-border-width: 0.2rem;
        --product-card-border-opacity: 0.0;
        --product-card-shadow-opacity: 0.0;
        --product-card-shadow-visible: 0;
        --product-card-shadow-horizontal-offset: 1.8rem;
        --product-card-shadow-vertical-offset: 1.8rem;
        --product-card-shadow-blur-radius: 0.5rem;

        --collection-card-image-padding: 0.0rem;
        --collection-card-corner-radius: 0.0rem;
        --collection-card-text-alignment: left;
        --collection-card-border-width: 0.0rem;
        --collection-card-border-opacity: 0.1;
        --collection-card-shadow-opacity: 0.0;
        --collection-card-shadow-visible: 0;
        --collection-card-shadow-horizontal-offset: 0.0rem;
        --collection-card-shadow-vertical-offset: 0.4rem;
        --collection-card-shadow-blur-radius: 0.5rem;

        --blog-card-image-padding: 0.0rem;
        --blog-card-corner-radius: 0.0rem;
        --blog-card-text-alignment: left;
        --blog-card-border-width: 0.0rem;
        --blog-card-border-opacity: 0.1;
        --blog-card-shadow-opacity: 0.0;
        --blog-card-shadow-visible: 0;
        --blog-card-shadow-horizontal-offset: 0.0rem;
        --blog-card-shadow-vertical-offset: 0.4rem;
        --blog-card-shadow-blur-radius: 0.5rem;

        --badge-corner-radius: 4.0rem;

        --popup-border-width: 1px;
        --popup-border-opacity: 0.1;
        --popup-corner-radius: 0px;
        --popup-shadow-opacity: 0.0;
        --popup-shadow-horizontal-offset: 0px;
        --popup-shadow-vertical-offset: 4px;
        --popup-shadow-blur-radius: 5px;

        --drawer-border-width: 1px;
        --drawer-border-opacity: 0.1;
        --drawer-shadow-opacity: 0.0;
        --drawer-shadow-horizontal-offset: 0px;
        --drawer-shadow-vertical-offset: 4px;
        --drawer-shadow-blur-radius: 5px;

        --spacing-sections-desktop: 0px;
        --spacing-sections-mobile: 0px;

        --grid-desktop-vertical-spacing: 20px;
        --grid-desktop-horizontal-spacing: 20px;
        --grid-mobile-vertical-spacing: 10px;
        --grid-mobile-horizontal-spacing: 10px;

        --text-boxes-border-opacity: 0.1;
        --text-boxes-border-width: 0px;
        --text-boxes-radius: 0px;
        --text-boxes-shadow-opacity: 0.0;
        --text-boxes-shadow-visible: 0;
        --text-boxes-shadow-horizontal-offset: 0px;
        --text-boxes-shadow-vertical-offset: 4px;
        --text-boxes-shadow-blur-radius: 5px;

        --buttons-radius: 0px;
        --buttons-radius-outset: 0px;
        --buttons-border-width: 1px;
        --buttons-border-opacity: 1.0;
        --buttons-shadow-opacity: 0.0;
        --buttons-shadow-visible: 0;
        --buttons-shadow-horizontal-offset: 0px;
        --buttons-shadow-vertical-offset: 4px;
        --buttons-shadow-blur-radius: 5px;
        --buttons-border-offset: 0px;

        --inputs-radius: 0px;
        --inputs-border-width: 1px;
        --inputs-border-opacity: 0.55;
        --inputs-shadow-opacity: 0.0;
        --inputs-shadow-horizontal-offset: 0px;
        --inputs-margin-offset: 0px;
        --inputs-shadow-vertical-offset: 4px;
        --inputs-shadow-blur-radius: 5px;
        --inputs-radius-outset: 0px;

        --variant-pills-radius: 40px;
        --variant-pills-border-width: 1px;
        --variant-pills-border-opacity: 0.55;
        --variant-pills-shadow-opacity: 0.0;
        --variant-pills-shadow-horizontal-offset: 0px;
        --variant-pills-shadow-vertical-offset: 4px;
        --variant-pills-shadow-blur-radius: 5px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: 0.06rem;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }
      header-drawer {
    justify-self: start;
    margin-left: -1.2rem;
  }@media screen and (min-width: 990px) {
      header-drawer {
        display: none;
      }
    }.menu-drawer-container {
    display: flex;
  }

  .list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .list-menu--inline {
    display: inline-flex;
    flex-wrap: wrap;
  }

  summary.list-menu__item {
    padding-right: 2.7rem;
  }

  .list-menu__item {
    display: flex;
    align-items: center;
    line-height: calc(1 + 0.3 / var(--font-body-scale));
  }

  .list-menu__item--link {
    text-decoration: none;
    padding-bottom: 1rem;
    padding-top: 1rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
  }

  @media screen and (min-width: 750px) {
    .list-menu__item--link {
      padding-bottom: 0.5rem;
      padding-top: 0.5rem;
    }
  }
  .header {
    padding-top: 6px;
    padding-bottom: 0px;
  }

  .section-header {
    position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
    margin-bottom: 0px;
  }

  @media screen and (min-width: 750px) {
    .section-header {
      margin-bottom: 0px;
    }
  }

  @media screen and (min-width: 990px) {
    .header {
      padding-top: 12px;
      padding-bottom: 0px;
    }
  }
  .footer {
    margin-top: 36px;
  }

  .section-sections--17505942274286__footer-padding {
    padding-top: 21px;
    padding-bottom: 27px;
  }

  @media screen and (min-width: 750px) {
    .footer {
      margin-top: 48px;
    }

    .section-sections--17505942274286__footer-padding {
      padding-top: 28px;
      padding-bottom: 36px;
    }
  }
  .cart-notification {
    display: none;
  }
  .container {
  opacity: 0;
}

.section {
  --cw: 1517px;
}

.slideshow {
  --s-xs: 15px;
  --s-lg: 0px;
}

.slide {
  scroll-snap-stop: always;
}

.image-container {
  display: block;
}

.my-section {
  /* Add your section-specific styles here */
}

.my-slideshow {
  
}
.highlighted {
    background-color: rgba(0, 0, 0, 0.1); /* Light black background color */
    padding: 0.25rem 0.5rem; /* Add some padding for better visibility */
    border-radius: 5px; /* Add rounded corners for a nicer look */
  }
  .section-template--17610193862894__product-grid-padding {
    padding-top: 0px;
    padding-bottom: 45px;
  }

  @media screen and (min-width: 750px) {
    .section-template--17610193862894__product-grid-padding {
      padding-top: 0px;
      padding-bottom: 60px;
    }
  }
  .section-sections--17610195075310__newsletter-padding {
    padding-top: 21px;
    padding-bottom: 0px;
  }

  @media screen and (min-width: 750px) {
    .section-sections--17610195075310__newsletter-padding {
      padding-top: 28px;
      padding-bottom: 0px;
    }
  }
  .footer {
    margin-top: 0px;
  }

  .section-sections--17610195075310__footer-padding {
    padding-top: 33px;
    padding-bottom: 45px;
  }

  @media screen and (min-width: 750px) {
    .footer {
      margin-top: 0px;
    }

    .section-sections--17610195075310__footer-padding {
      padding-top: 44px;
      padding-bottom: 60px;
    }
  }
  #image-preview {
   

  max-width: 100%; /* Ensure the image doesn't exceed its container's width */
  height: 100%; /* Maintain aspect ratio */
}
.pagination-symbol {
    font-size: 24px; /* Adjust the size as needed */
    color: #CCCCCC; /* Light grey color */
    cursor: pointer; /* Show pointer cursor on hover */
    /* Add any additional styling here */
}

.pagination-symbol img {
    width: 24px; /* Adjust the width as needed */
    height: 24px; /* Adjust the height as needed */
}

.pagination-container {
    display: flex;
    justify-content: center;
}

.header__menu-item {
    cursor: pointer;
    text-decoration: inherit;
    color: inherit;
  }

  /* CSS for changing cursor when hovering over the link */
  .header__menu-item:hover {
    cursor: pointer; /* Change cursor to pointer */
    /* You can add additional styling for the link on hover here if needed */
  }
 .header-wrapper--border-bottom {
    border-bottom: .1rem solid rgba(var(--color-foreground), .08);
}
.header-wrapper {
    display: block;
    position: relative;
    background-color: rgb(var(--color-background));
}
body, .color-background-1, .color-background-2, .color-inverse, .color-accent-1, .color-accent-2 {
    color: rgba(var(--color-foreground), .75);
    background-color: rgb(var(--color-background));
}
.color-accent-1, .color-accent-2 {
    --color-card-hover: var(--color-base-solid-button-labels);
}
.color-background-2, .color-inverse, .color-accent-1, .color-accent-2 {
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-background);
    --alpha-badge-border: 1;
}
.color-background-2, .color-inverse, .color-accent-1, .color-accent-2 {
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
}
.color-background-2, .color-inverse, .color-accent-1, .color-accent-2 {
    --color-link: var(--color-foreground);
    --alpha-link: .7;
}
.color-accent-2 {
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-2);
    --gradient-background: var(--gradient-base-accent-2);
}
*, *::before, *::after {
    box-sizing: inherit;
}



.product-grid-container {
      /* Add your styles for the container if needed */
    }

    .product-grid {
      white-space: nowrap; /* Prevent wrapping */
      overflow-x: auto; /* Enable horizontal scrolling if necessary */
    }

    .product-card-wrapper {
      display: inline-block; /* Display products in a single row */
      vertical-align: top; /* Align items at the top */
      margin-right: 10px; /* Adjust margin between products */
    }
    
  
	.long-product-name {
	  display: block;
	  width: 200px; /* You can adjust the width as needed */
	 /* white-space: nowrap;*/
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	
	/*.cart-btn {
	    position: relative;
	    padding-left: 218px;  Adjust this value as needed 
	    padding-top: 5px;  Adjust this value as needed 
	    width: 150px;  Adjust this value as needed 
	    height: 50px;  Adjust this value as needed 
	    font-size: 18px;  Adjust this value as needed 
	}
	
	#addtocarttext {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    font-weight: bold;  Example font weight 
	}


 #addtocart {
        cursor: pointer;
    }
    .full-unstyled-link {
    cursor: pointer;
}

 .sidemenu-wrapper {
     Your default styles for the sidebar 
    position: fixed;
    top: 0;
    right: -250px;  Hide the sidebar off-screen by default 
    width: 250px;
    height: 100%;
    background-color: #fff;
    transition: left 0.3s ease;  Smooth transition for opening/closing the sidebar 
}

.sidemenu-wrapper.show {
    right: 0;  Show the sidebar by moving it to the left 
}*/
#cartCount {
    border: solid;
    border-width: 1px; /* Thinner border */
    min-width: 20px; /* Smaller minimum width */
    height: 20px; /* Adjust height to match width */
    border-radius: 50%; /* Make it a circle */
    background: #FF5722;
    color: rgb(255, 255, 255);
    padding: 0; /* Remove padding for a tighter fit */
    position: absolute;
    top: -10%;
    left: 57%;
    font-weight: 700;
    text-align: center;
    font-size: 12px; /* Smaller font size */
    line-height: 20px; /* Center text vertically */
}


@media only screen and (max-width: 768px) {
    #cartCount {
        font-size: 15px;
        right: 21px;
        top: -10px;
        border-radius: 70%; /* Make it round */
        border: 2px solid rgb(0, 0, 255); /* Add border */
        padding: 0px; /* Adjust padding */
    }
}

.header__search,
.header__cart {
    display: inline-block; /* Ensure elements are displayed on the same line */
}

.header__search {
    margin-right: 50px; /* Add margin to create space between the icons */
}
@media (min-width: 1024px){
				.header-layout5 {
					padding: 25px 0;
				}
			}
			.vs-header {
				background: #fff; 				
			}
			.slick-slide img {
				width:100%;
			}
			.infographics-containerss {
			margin-left: 20px;
			margin-right: 20px;
			background-color: blue;
			}
			.infographics{		
			 width: 97.3%; /* Optional: adjust image size */
			  max-width: 145px; /* Reduced maximum size */
			  display: block; /* Ensure the element behaves like a block-level element */
margin-left: 20px;			

			  }
			/* Media query for tablets */
			@media only screen and (min-width: 600px) and (max-width: 1024px) {
			  .infographic {
			    max-width: 180px; /* Adjust size for tablets */
			  }
			}
			
			/* Media query for mobile phones */
			@media only screen and (max-width: 599px) {
			  .infographic {
			    max-width: 120px; /* Adjust size for mobile phones */
			  }
			}
			
		/*h2{
			padding: 0 60px;
		}*/
		/*	h1{
			padding: 0 60px;
		}	
			
			*/
			.related-products{
				margin-left: 20px;
				margin-right: 20px;
			}
#product-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto the next line if needed */
    gap: 16px; /* Adjust the gap between cards as needed */
    margin: 0 auto; /* Center the container horizontally */
    box-sizing: border-box; /* Include padding in the width */
    justify-content: center; /* Centers the content */
    align-items: stretch; /* Makes all cards the same height */
    max-width: 1480px; /* Adjust as needed for larger screens */
    margin-top: 20px;
    margin-bottom: 30px;
}

.slick-prev1, .slick-next2 {
    position: absolute;
    top: 50%;
    padding: 16px; /* Padding to give some space around the text */
    margin-top: -22px;
    color: #fff; /* Text color */
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px; /* Rounded corners for a more button-like appearance */
    user-select: none;
    background-color: rgb(59, 59, 59); /* Background color for the button */
    z-index: 10;
    cursor: pointer;
    transform: translateY(-50%); /* Centers the buttons vertically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a shadow effect for depth */
    border: 1px solid #fff; /* Optional border to distinguish button edges */
    opacity: 1; /* Ensure the buttons are visible */
    width: 50px; /* Adjust width for a consistent button size */
    height: 50px; /* Adjust height for a consistent button size */
    display: flex; /* Center content within button */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}


/* Hover effect for buttons */
.slick-prev1:hover, .slick-next2:hover {
    background-color: rgb(255, 83, 0); /* Darker background on hover */
    color: #fff; /* Text color remains white */
    border: 1px solid #fff; /* Optional hover effect */
}

/* Position the previous button on the left with some margin */
.slick-prev1 {
    left: -2px; /* Adjust based on your layout */
}

/* Position the next button on the right with some margin */
.slick-next2 {
    right: -2px; /* Adjust based on your layout */
}
.product-item {
    display: flex;
    flex-direction: column; /* Stack cards vertically within their container */
    width: 100%; /* Full width of the container */
    max-width: 250px; /* Max width for the card */
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative;
    margin: 5px; /* Add margin to create space around each card */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    height: 100%; /* Ensure card takes up full height of its container */
}


.product-media {
    width: 100%;
    height: 200px; /* Fixed height for the media container */
    overflow: hidden;
    position: relative;
}

.product-image {
    width: 100%;
    height: 100%; /* Cover the entire media container */
    object-fit: cover; /* Cover the media container without stretching */
}

.product-details {
/*    padding: 16px;
*/    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 20px; /* Adjust spacing as needed */
    margin-right: 20px; /* Adjust spacing as needed */
    flex-grow: 1; /* Allows the details to grow and fill remaining space */
}

.product-title {
    font-size: 1.25rem;
    margin: 0;
}

.product-name {
    font-style: normal;
    font-weight: bolder;
    line-height: 22px;
    color: #000;
    text-align: left;
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 14px;
    margin: 0;
    font-stretch: normal;
    letter-spacing: normal;
    overflow: hidden;
    align-self: center;
    display: -webkit-box;
    height: 57px;
height: auto;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
}
.product-pricing {
    display: flex;
    align-items: center;
    gap: 8px;
}

.price-original {
    text-decoration: line-through;
    color: #888;
}

.price-discounted {
    font-size: 1.5rem;
    color: #d9534f; /* Sale color */
}

.product-badge {
    background-color: #FF5722;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    top: 16px;
    left: 16px;
}
/* Apply a default cursor style */
.product-item, .product-link, .product-image {
    cursor: pointer; /* Set the cursor to pointer for clickable items */
}
.product-item, .product-link, .product-name {
    cursor: pointer; /* Set the cursor to pointer for clickable items */
}

/* Media queries for tablets and mobile devices */
@media (max-width: 1024px) { /* Tablets */
   
    
    .product-item {
        width: calc(50% - 16px); /* Two items per row with gap */
    }
}

@media (max-width: 768px) { /* Mobile devices */
 



    
    .product-item {
        width: calc(50% - 16px); /* Two items per row with gap */
    }
}

@media (max-width: 480px) { /* Very small screens */
    .product-item {
        width: 100%; /* Full width for very small screens */
    }
}
.product-item {
    display: flex;
    flex-direction: column; /* Ensure cards stack vertically within their container */
    width: 100%; /* Ensure full width of the container */
    max-width: 250px; /* Adjust max-width to your desired card width */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}



.product-card:hover {
    transform: scale(1.1); /* More pronounced zoom effect on hover */
    box-shadow: 0 12px 24px rgba(0,0,0,0.3); /* Enhanced shadow effect on hover */
}

.product-media {
    position: relative;
    width: 100%;
    height: 200px; /* Adjust height as needed */
    overflow: hidden;
    transition: opacity 0.3s ease; /* Smooth transition for hover effects */
}

.product-card:hover .product-media {
    opacity: 0.9; /* Slightly reduce opacity of the media on hover for a subtle effect */
}
.product-slider {
    position: relative;
    width: 100%;
}
/*.product-gallery {
    opacity: 0.4;
    position: relative;
}
*/

.product-unavailable #productImages {
    opacity: 0.5;
}
.product-unavailable {
    position: relative; /* This is required for the badge to appear properly */
}


.gallery-disabled {
    opacity: 0.5;
    pointer-events: none; /* disables hover/click */
}

.product-unavailable-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    z-index: 999;
    border-radius: 4px;
}

.disable-hover {
    pointer-events: none;
}