/** Shopify CDN: Minification failed

Line 402:0 Unexpected "<"
Line 426:0 Unexpected "<"

**/


/* CSS from section stylesheet tags */
.picture-block-content li {
    font-family: "Outfit" !important;
    font-weight: 400;
    font-size: 14px;
  }
  
  .picture-block-content {
    max-width: 90%;
    text-align: center;
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content vertically */
  }
  .decide-width {
    max-width: 96%;
    margin: 60px auto 0;
  }
  @media screen and (max-width: 768px) {
    .decide-width {
      max-width: 100%;
      margin: 40px auto 0;
    }

    /* Set a static height for the text block on mobile and center content */
    .picture-block-content {
      height: 400px; /* Set the height to 300px */
      overflow: hidden; /* Add scroll if content exceeds the height */
    }
  }
.feature-shipping-list {
    display: flex;
    justify-content: space-between;
  }


  .feature-shipping-list h4 {
    /*font-size: 1.5em;*/
    /*padding-bottom: 5px;*/
  }


  .shipping-column {

    /*padding: 20px 0px 0px 30px;*/
    float: left;
    flex: 1;
  }

  .features-border {
    content: "";
    display: table;
    clear: both;
    /*padding: 10px 0px 0px 0px;*/
  }

  .feature-shipping-list h4 {
    font-family: "NunitoSans-SemiBold" !important;
    font-size: 20px;
  }

  .feature-shipping-list li {
    font-family: "NunitoSans-Regular" !important;
    font-size: 17px;
  }


    .height-for-desktop {
      height: 25px;
    }

  @media screen and (max-width: 767px) {
    .feature-shipping-list {
      display: none;
    }
    .height-for-desktop {
      display: none;
    }

  }
.footer-toggle {
  padding: 0;
  margin-bottom: 10px;
  background-color: transparent; 
  width: 100%; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.custom-footer {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap as needed */
  justify-content: center; /* Centers items horizontally inside the container */
  padding: 20px 20px 0 20px;
  margin: 0 auto; /* Centers the .custom-footer div itself horizontally */
  max-width: 80%; /* You can adjust this value based on your design needs */
}

.footer-column {
  flex: 1; /* Allows for flexible growth of each column */
  min-width: 170px; /* Minimum width of a column */
  box-sizing: border-box; /* Ensures padding is included in the width calculation */
  display: flex; /* Apply flex to make inner items align to top */
  flex-direction: column; /* Stack items vertically inside each column */
  align-items: flex-start; /* Aligns items to the top */
}

.footer-column h3 {
  margin-bottom: 15px;
  text-align: left; /* Centers the headings inside each footer column */
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left; /* Centers the list items inside each footer column */
}

.footer-column ul li a {
  text-decoration: none; /* Removes default underline */
  color: #333; /* Text color */
  position: relative; /* Needed for positioning the pseudo-element */
  display: inline-block; /* Ensures the pseudo-element aligns with the text */
  padding-bottom: 2px; /* Adds some space for the underline */
  overflow: hidden; /* Prevents the pseudo-element from extending outside */
}

.footer-column ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0; /* Aligns the pseudo-element at the bottom of the anchor tag */
  width: 100%; /* Ensures the pseudo-element spans the full width of the anchor tag */
  height: 1px; /* Height of the underline */
  background-color: #333; /* Color of the underline */
  transform: scaleX(0); /* Initially, the pseudo-element is scaled to 0 */
  transform-origin: bottom left;
  transition: transform 0.3s ease-in-out; /* Smooth transition for the transform property */
}

.footer-column ul li a:hover::after {
  transform: scaleX(1); /* Scales the pseudo-element to its full width on hover */
}

form .email::placeholder { /* Adjust 'form' to a more specific selector if available */
  color: #888 !important; /* Change '#888' to your desired color */
  opacity: 1 !important;
}

.first.newsletter {
  list-style-type: none;
  margin: 0 80px 0 0;
  padding: 0;
  border: 0; /* Remove any border */
  outline: 0; /* Remove any outline */
  vertical-align: top; /* Align to top */
  line-height: 1;
}

.my-footer-divider {
  height: 1px;
  background-color: #D3D3D3;
  margin: 0px auto 0px auto; /* vertical and horizontal spacing */
  display: none;
}

.my-footer-content {
  font-size: 14px;
  color: #555;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 10px 20px;
}

.my-copyright-section { 
  margin: 0 auto; 
  max-width: 100%;
  text-align: center;
  width: 100%;
}

/* Footer Image Responsive Styles */
.footer-bottom-image {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 5px auto;
  width: 90%;
  /* Remove any height constraints to prevent clipping */
}

.footer-bottom-image img {
  width: auto;
  height: auto;
  max-width: 100%; /* Prevents overflow while maintaining aspect ratio */
  max-height: none; /* Remove any height restrictions */
  display: block;
  margin: 0 auto;
  object-fit: contain; /* Ensures the entire image is visible without clipping */
}

/* Default: Show desktop image, hide mobile (for desktop-first approach) */
.footer-image-desktop {
  display: block !important;
}

.footer-image-mobile {
  display: none !important;
}

@media (min-width: 768px) {
  /* Hide collapsible version on desktop */
  .my-footer-divider {
    display: block;
  }
  .my-copyright-section { 
    margin: 0 auto; 
    max-width: 80%;
  }
  .footer-column-mobile {
    display: none;
  }
  .footer-column-desktop {
    display: flex;
    align-items: flex-start; /* Align all children to the top */
  }
  .footer-column {
    flex-basis: calc(33.333% - 10px); /* Adjust the percentage based on the number of columns you prefer */
    max-width: calc(33.333% - 20px); /* Adjust the percentage based on the number of columns you prefer */
    display: inline-block; /* Ensures columns are displayed inline */
  }

  /* Desktop specific image styles */
  .footer-bottom-image {
    margin: 25px auto;
    max-width: 100%; /* Allow full width on desktop if needed */
  }

  .footer-bottom-image img {
    max-width: 100%; /* Full width available on desktop */
    /* Remove the fixed max-width constraint */
  }

  /* Desktop: Show desktop image, hide mobile */
  .footer-image-desktop {
    display: block !important;
  }
  
  .footer-image-mobile {
    display: none !important;
  }
}

/* Mobile-specific styles */
@media (max-width: 767px) { /* Adjusts styles for screens narrower than 768px */
  .footer-toggle {
    padding: 0 20px 0 0; /* Add 20px padding to the right */
    margin-bottom: 8px;
    background-color: transparent; 
    width: 100%; 
    position: relative;
    display: flex; 
    justify-content: center; /* Keep center alignment for text */
    align-items: center;
    transform: uppercase;
  }
  
  .toggle-arrow {
    position: absolute; /* Position absolutely within the button */
    right: 20px; /* 20px from the right edge */
  }
  
  .first.newsletter {
    list-style-type: none;
    margin: 0; /* Adjust the right margin for mobile */
    width: 90%;
  }
  .custom-footer {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap as needed */
    justify-content: center; /* Centers items horizontally inside the container */
    align-items: start; /* Aligns items to the start of the flex container */
    padding: 0;
    margin: 0 auto; /* Centers the .custom-footer div itself horizontally */
    max-width: 100%; /* You can adjust this value based on your design needs */
  }

  .footer-column h3 {
    margin-bottom: 15px;
    text-align: center; /* Centers the headings inside each footer column */
  }
  
  .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center; /* Centers the list items inside each footer column */
  }

  /* Show collapsible version on mobile */
  .footer-column-mobile {
    display: block;
    margin-top: 20px;
  }
  .footer-column-desktop {
    display: none;
  }
  
  .footer-column {
    flex-basis: 100%; /* Full width for mobile */
    max-width: 100%; /* Full width for mobile */
    min-width: 100%;
  }

  .my-footer-title {
    text-align: center;
  }

  /* Mobile specific image styles */
  .footer-bottom-image {
    margin: 15px auto;
    padding: 0 20px;
    width: calc(100% - 40px); /* Account for padding */
  }
  
  .footer-bottom-image img {
    max-width: 100%; /* Use full available width instead of fixed constraint */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    /* Removed fixed max-width constraint that was causing unnecessary size limitations */
  }

  /* Mobile: Hide desktop image, show mobile */
  .footer-image-desktop {
    display: none !important;
  }
  
  .footer-image-mobile {
    display: block !important;
  }
}

.footer-links {
  display: flex;
  justify-content: center; /* Center align horizontally */
  align-items: center; /* Center align vertically if needed */
  flex-direction: column; /* Ensure list items are displayed in a column */
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px; /* Adjust as needed */
}

/* Add extra bottom padding on product pages to create space above floating cart */
body.template-product {
  padding-bottom: 100px !important; /* Mobile: 100px */
}

@media (min-width: 768px) {
  body.template-product {
    padding-bottom: 150px !important; /* Desktop: 150px */
  }
}
.container {
      display: flex;
      flex-direction: column; /* Stacks children vertically */
      justify-content: center; /* Vertically centers the content */
      /*align-items: flex-start; /* Aligns content to the start (left alignment) */
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 50%;
      padding: 20px;
    line-height: 2 !important;
  }



  @media only screen and (max-width: 767px) {
      .full-image-desktop {
        display: none;
      }

  }
<style>
  .paragraph-section-desktop {
    line-height: 1.8; /* Adjust for larger line spacing */
  }
  .paragraph-section-mobile {
    line-height: 1.8; /* Adjust for larger line spacing */
  }

  .custom-font-p {
    font-family: 'NunitoSans-Regular', sans-serif;
    /* Add any other custom styles here */
  }

  @media (max-width: 768px) {
    .paragraph-section-desktop {
      display: none;
    }
  }
  
  @media (min-width: 768px) {
    .paragraph-section-mobile {
      display: none;
    }
  }
</style>