#fw-section-header {
--color-primary: #2b4743;
--color-primary-rgb: 43, 71, 67;
--color-background: #2b4743;
--color-background-rgb: 43, 71, 67;
--color-on-primary: #fff254;
--color-on-primary-rgb: 255, 242, 84;
--color-on-background: #ffd3db;
--color-on-background-rgb: 255, 211, 219;
--color-product-image-background: #2b4743;
--color-background-brightness: 62;
background-color: var(--color-background);
color: var(--color-on-background);
* { 
    margin-left: .2rem;
    margin-right: .2rem;
    padding: 0; 
} 

/* Affiliate tracking - TrackDesk */
/*<script async src="//cdn.trackdesk.com/tracking.js"></script>
<script>
(function(t,d,k){(t[k]=t[k]||[]).push(d);t[d]=t[d]||t[k].f||function(){(t[d].q=t[d].q||[]).push(arguments)}})(window,"trackdesk","TrackdeskObject");trackdesk("b-yoot","click");
</script>*/
}
#fw-section-hero-19afd576-7188-4a3f-985c-3d7672848429 {
--color-primary: #c021bb;
--color-primary-rgb: 192, 33, 187;
--color-background: #2b4743;
--color-background-rgb: 43, 71, 67;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffd3db;
--color-on-background-rgb: 255, 211, 219;
--color-product-image-background: #2b4743;
--color-background-brightness: 62;
background-color: var(--color-background);
color: var(--color-on-background);

}





















#fw-section-hero-1738939658 {
--color-primary: #8a05b3;
--color-primary-rgb: 138, 5, 179;
--color-background: #2b4743;
--color-background-rgb: 43, 71, 67;
--color-on-primary: #fff254;
--color-on-primary-rgb: 255, 242, 84;
--color-on-background: #ffd3db;
--color-on-background-rgb: 255, 211, 219;
--color-product-image-background: #2b4743;
--color-background-brightness: 62;
background-color: var(--color-background);
color: var(--color-on-background);
@media (max-width: 768px) {

  /*
    This CSS selector now targets the button on your site.
    It uses the '.button' class from the code you provided.
  */
  .button.button--expand {
    padding-top: 6px !important; /* Reduced vertical padding */
    padding-bottom: 6px !important; /* Reduced vertical padding */
    padding-left: 10px !important; /* Reduced horizontal padding */
    padding-right: 10px !important; /* Reduced horizontal padding */
    font-size: 0.75rem !important; /* This makes the font size smaller */
    width: auto !important; /* This makes the button only as wide as its content */
    max-width: 40% !important; /* Further reduced max-width */
    margin-left: auto !important; /* These two lines center the button */
    margin-right: auto !important;
  }
}


}
#fw-section-custom-html-62c7e5c2-7874-4d68-b7e4-26f945f2ac73 {
--color-primary: #2b4743;
--color-primary-rgb: 43, 71, 67;
--color-background: #2b4743;
--color-background-rgb: 43, 71, 67;
--color-on-primary: #fff254;
--color-on-primary-rgb: 255, 242, 84;
--color-on-background: #ffd3db;
--color-on-background-rgb: 255, 211, 219;
--color-product-image-background: #2b4743;
--color-background-brightness: 62;
background-color: var(--color-background);
color: var(--color-on-background);
* { 
    margin: 30; 
    padding: 0; 
} 
}





#fw-section-instagram-feed-cc316d36-5894-497f-ad4b-efdee3ed9d1c {
--color-primary: #2b4743;
--color-primary-rgb: 43, 71, 67;
--color-background: #cedeeb;
--color-background-rgb: 206, 222, 235;
--color-on-primary: #ffc62a;
--color-on-primary-rgb: 255, 198, 42;
--color-on-background: #ffc62a;
--color-on-background-rgb: 255, 198, 42;
--color-product-image-background: #2b4743;
--color-background-brightness: 219;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-hero-ecc20b1b-fed2-4e8b-84b7-6cd531520fd9 {

h2 {
      font-size: 1.5rem;
      margin-top: 2rem;
      margin-bottom: 1rem;
    }

    p {
      font-size: 1.2rem;
      line-height: 1.5;
      margin-left: 5rem;
      margin-right: 5rem;
      margin-bottom: 1.5rem;
      font-weight: 500;
    }

.section-background__overlay {
  position: absolute !important;
  top: 8rem !important;
  left: 50% !important;
  width: 60% !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  border-radius: 30px !important;
  bottom: 8rem !important;
  transition: all 0.3s ease !important;
}

/* Hover effect on overlay */
.section-background__overlay:hover {
  transform: translateX(-50%) scale(1.02) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Target the content container */
.section-content, .container, .content {
  padding: 2rem 1rem !important;
  transition: all 0.3s ease !important;
}

/* Add transitions to text elements */
h1 {
  transition: all 0.3s ease !important;
}

h1:hover {
  transform: scale(1.05) !important;
  color: #1a3330 !important;
}

h2 {
  transition: all 0.3s ease !important;
}

h2:hover {
  transform: translateX(10px) !important;
}

p {
  transition: all 0.3s ease !important;
}

p:hover {
  transform: scale(1.02) !important;
  opacity: 0.9 !important;
}

/* Alternative: CSS animation that should work */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

.section-background__overlay {
  animation: pulse 3s ease-in-out infinite !important;
}

@media screen and (max-width: 600px) {
  .section-background__overlay {
    width: 95% !important;
    top: 7rem !important;
    bottom: 7rem !important;
    border-radius: 30px !important;
    padding: 0.5rem !important;
    transition: all 0.3s ease !important;
    animation: pulse 3s ease-in-out infinite !important;
  }
 
  .section-background__overlay:hover {
    transform: translateX(-50%) scale(1.01) !important;
  }
 
  h1 {
    font-size: 1.5rem !important;
    margin-top: 2rem !important;
    transition: all 0.3s ease !important;
  }
 
  h2 {
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
  }
 
  p {
    font-size: 1.1rem !important;
    width: 88% !important;
    margin-bottom: 1rem !important;
    padding: 0 0.5rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: all 0.3s ease !important;
  }
}
}
#fw-section-hero-bf242e62-0cdc-436b-baf4-b197f2aeb527 {
--color-primary: #ffd3db;
--color-primary-rgb: 255, 211, 219;
--color-background: #ffd3db;
--color-background-rgb: 255, 211, 219;
--color-on-primary: #2b4743;
--color-on-primary-rgb: 43, 71, 67;
--color-on-background: #ffd3db;
--color-on-background-rgb: 255, 211, 219;
--color-product-image-background: #2b4743;
--color-background-brightness: 225;
background-color: var(--color-background);
color: var(--color-on-background);
@media (max-width: 768px) {

  /*
    This CSS selector now targets the button on your site.
    It uses the '.button' class from the code you provided.
  */
  .button.button--expand {
    padding-top: 6px !important; /* Reduced vertical padding */
    padding-bottom: 6px !important; /* Reduced vertical padding */
    padding-left: 10px !important; /* Reduced horizontal padding */
    padding-right: 10px !important; /* Reduced horizontal padding */
    font-size: 0.75rem !important; /* This makes the font size smaller */
    width: auto !important; /* This makes the button only as wide as its content */
    max-width: 40% !important; /* Further reduced max-width */
    margin-left: auto !important; /* These two lines center the button */
    margin-right: auto !important;
  }
}
@media (min-width: 769px) {

  /*
    IMPORTANT: You will likely need to replace '.product-hero'
    with the specific CSS selector for YOUR large image container.

    HOW TO FIND THE SELECTOR:
    1. Open your live website on a desktop computer.
    2. Right-click on the large sunflower image at the top.
    3. From the menu, click "Inspect".
    4. In the code panel that opens, look for the container element
       that holds the image. It will likely have a class name like
       "hero", "banner", "hero-section", or "product-hero".
    5. Replace '.product-hero' below with that class name,
       making sure to keep the dot (.) at the beginning.
  */
  .product-hero {
    height: 90vh !important; /* Sets the height to 90% of the viewport/screen height */
    max-height: 90vh !important; /* Ensures it doesn't exceed that height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* This targets the actual image inside the container */
  .product-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* This makes the image fill the container without stretching */
  }
}
}

#fw-section-featured-collection-8d028c5e-fb72-4fb0-bb3c-cf7b8ff5c365 {
--color-primary: #2b4743;
--color-primary-rgb: 43, 71, 67;
--color-background: #ffd3db;
--color-background-rgb: 255, 211, 219;
--color-on-primary: #ffc62a;
--color-on-primary-rgb: 255, 198, 42;
--color-on-background: #2b4743;
--color-on-background-rgb: 43, 71, 67;
--color-product-image-background: #2b4743;
--color-background-brightness: 225;
background-color: var(--color-background);
color: var(--color-on-background);

}

#fw-section-custom-html-4d63430c-cd5a-44eb-a1ef-cb3d358a62dd {
--color-primary: #2b4743;
--color-primary-rgb: 43, 71, 67;
--color-background: #d2c9e5;
--color-background-rgb: 210, 201, 229;
--color-on-primary: #ffc62a;
--color-on-primary-rgb: 255, 198, 42;
--color-on-background: #2b4743;
--color-on-background-rgb: 43, 71, 67;
--color-product-image-background: #2b4743;
--color-background-brightness: 207;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-4fbac79d-334c-4888-8737-ef58a0c794e0 {

* { 
    margin: 30; 
    padding: 0; 
} 
.about-background {
  overflow: hidden;
}
}