#fw-section-collections-list-7c1a41b2-8790-49a8-a3fa-56ef3fe0153d {

/* == Remove top padding above Collections section == */
.section-fw-section-collections-list-7c1a41b2-8790-49a8-a3fa-56ef3fe0153d-padding {
  padding-top: 0 !important;
}

/* Also ensure larger screens are cleared */
@media screen and (min-width: 640px) {
  .section-fw-section-collections-list-7c1a41b2-8790-49a8-a3fa-56ef3fe0153d-padding {
    padding-top: 0 !important;
  }
}

}
















#fw-section-custom-html-aab771d6-ee56-461a-8033-9427c35d7867 {

 .slide:nth-child(1) img {
  object-position: 45% 35% !important;
}

.slide:nth-child(2) img {
  object-position: 55% 36% !important;
}

.slide:nth-child(3) img {
  object-position: 50% 38% !important;
}

.slide:nth-child(4) img {
  object-position: 40% 36% !important;
}

.slide:nth-child(5) img {
  object-position: 50% 35% !important;
}

.slide:nth-child(6) img {
  object-position: 50% 37% !important;
}

.slide:nth-child(7) img {
  object-position: 50% 38% !important;
}

.slide:nth-child(8) img {
  object-position: 50% 40% !important;
}


#slideshow-1 .slide:nth-child(1) img {
  object-position: 2% 3% !important; /* Move more right and down */
  object-fit: cover !important;
  transform: scale(1.8); /* Zoom in 20% */
  transition: transform 0.3s ease; /* smooth zoom if you want hover effect */
}

}
#fw-section-custom-html-535c206d-6abc-44c9-bc84-43029b0fdcc1 {

/* Center collection titles on collections list */
.collections-list__item-title h6 {
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
}

}






#fw-section-custom-html-7d181e72-b7cd-4f44-97c0-986a912403ec {

/* Center collection titles on collections list */
.collections-list__item-title h6 {
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
}

}

#fw-section-custom-html-86589a12-370c-4f76-a271-f5095fb383b9 {
--color-primary: #48b3ff;
--color-primary-rgb: 72, 179, 255;
--color-background: #191919;
--color-background-rgb: 25, 25, 25;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #48b3ff;
--color-on-background-rgb: 72, 179, 255;
--color-product-image-background: #e7e7e7;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);

}







#fw-section-featured-collection-60a7fee4-bc8c-454e-96f5-4e2c9ccfc80d {


.featured-collection a {
  pointer-events: auto; /* Ensure links are clickable */
}

.featured-collection::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place it behind the content */
  pointer-events: none; /* Prevent the overlay from blocking clicks */
}


}

#fw-section-rich-text-175251637926822 {

@media (max-width: 768px) {
  .html-formatter,
  .html-formatter--center,
  .rich-text,
  .section-fw-section-rich-text-0b7caf79-8965-45bb-93fd-b6f014a673c7-padding {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 16px !important;
  }

  .html-formatter h1,
  .html-formatter h2,
  .html-formatter h3,
  .rich-text h1,
  .rich-text h2,
  .rich-text h3 {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 0.75em auto !important;
  }

  .html-formatter p,
  .rich-text p {
    text-align: center !important;
    margin: 0 auto 1em auto !important;
  }
}

.html-formatter a,
.html-formatter--center a,
.rich-text a,
.section-fw-section-rich-text-0b7caf79-8965-45bb-93fd-b6f014a673c7-padding a {
  color: #48b3ff !important;
  text-decoration: underline; /* optional, to emphasize links */
}

}
#fw-section-image-with-text-95999cf7-966d-4b28-91e6-8f16432519dc {
--color-primary: #48b3ff;
--color-primary-rgb: 72, 179, 255;
--color-background: #191919;
--color-background-rgb: 25, 25, 25;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #e7e7e7;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
.html-formatter a,
.html-formatter--center a,
.rich-text a,
.section-fw-section-rich-text-0b7caf79-8965-45bb-93fd-b6f014a673c7-padding a {
  color: #48b3ff !important;
  text-decoration: underline; /* optional, to emphasize links */
}

}
#fw-section-donations-0 {

a.button.button--primary.button--expand,
button.button.button--primary.button--expand {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

a.button.button--primary.button--expand:hover,
button.button.button--primary.button--expand:hover {
  background-color: #1e90ff; /* Hover background color */
  color: white;              /* Text color on hover */
  transform: translateY(-10px); /* Bounce up */
}

}









#fw-section-header {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #191919;
--color-background-rgb: 25, 25, 25;
--color-on-primary: #48b3ff;
--color-on-primary-rgb: 72, 179, 255;
--color-on-background: #48b3ff;
--color-on-background-rgb: 72, 179, 255;
--color-product-image-background: #e7e7e7;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-hero-video-4eed2ef9-bde4-4c48-8c27-2966d7f24394 {
--color-primary: #48b3ff;
--color-primary-rgb: 72, 179, 255;
--color-background: #191919;
--color-background-rgb: 25, 25, 25;
--color-on-primary: #48b3ff;
--color-on-primary-rgb: 72, 179, 255;
--color-on-background: #48b3ff;
--color-on-background-rgb: 72, 179, 255;
--color-product-image-background: #e7e7e7;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);
/* Full-width video banner with cropped height, no extra spacing */
.hero__content.hero__content--center.hero__content--large {
  position: relative;
  width: 100%;
  height: 70vh; /* Adjust crop as needed */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin: 0;      /* Remove margin */
  padding: 0;     /* Remove padding */
  border: none;   /* Remove any border */
  box-sizing: border-box; /* Ensure padding/border don't add size */
}

/* Video or iframe inside, fully fill without extra space */
.hero__content.hero__content--center.hero__content--large iframe,
.hero__content.hero__content--center.hero__content--large video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

/* Clickable invisible overlay covering exactly the video area */
.hero__content.hero__content--center.hero__content--large::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;

  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .hero__content.hero__content--center.hero__content--large {
    height: 40vh; /* Reduce height for mobile */
  }

  .hero__content.hero__content--center.hero__content--large iframe,
  .hero__content.hero__content--center.hero__content--large video {
    height: 40vh; /* Match reduced height */
    object-fit: contain; /* So full width/height fits without cropping */
  }
}

}

#fw-section-instagram-feed-0 {

a.button.button--primary.button--expand,
button.button.button--primary.button--expand,
a.button.button--primary:not(.button--expand) {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

a.button.button--primary.button--expand:hover,
button.button.button--primary.button--expand:hover,
a.button.button--primary:not(.button--expand):hover {
  background-color: #1e90ff; /* Hover background color */
  color: white;              /* Text color on hover */
  transform: translateY(-10px); /* Bounce up */
}

/* Capitalize first letter of each word for specific buttons */
a.button,
a.button.button--primary,
.learn-more-button {
  text-transform: capitalize !important;
}

}



























#fw-section-custom-html-19f91027-6b84-43ee-95c4-8db7f16e0671 {

.custom-about__image {
  flex: 1 1 100%;
  max-width: 60%; /* Increase max-width to allow more space */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: visible;
  position: relative;
  left: 3%; /* Shift the image container to the right */
}

@media screen and (min-width: 768px) {
  .custom-about__content {
    max-width: 65%; /* wider than previous 55% */
  }

  .custom-about__image {
    max-width: 50%;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    left: 3%;
  }
}

@media screen and (max-width: 767px) {
  .custom-about {
    flex-direction: column-reverse;
    padding: 32px 16px;
    gap: 2rem;
  }

  .custom-about__content {
    max-width: 100%;
    text-align: left;
  }

  .custom-about__image {
    max-width: 100%;
    justify-content: center;
    margin-bottom: 16px;
  }

  .custom-about__image img {
    width: 100%;
    height: auto;
  }

  .custom-about__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 1.5rem;
  }

  .custom-about__cta a {
    width: 100%;
    text-align: center;
    padding: 14px 20px !important;
    font-size: 16px !important;
  }

  .custom-about__content h2 {
    font-size: 1.8rem;
  }

  .custom-about__content p {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

}



#fw-section-collections-list-e7760599-5a1e-4ab2-8c3d-4c4cbd1709e2 {

/* == Remove top padding above Collections section == */
.section-fw-section-collections-list-7c1a41b2-8790-49a8-a3fa-56ef3fe0153d-padding {
  padding-top: 0 !important;
}

/* Also ensure larger screens are cleared */
@media screen and (min-width: 640px) {
  .section-fw-section-collections-list-7c1a41b2-8790-49a8-a3fa-56ef3fe0153d-padding {
    padding-top: 0 !important;
  }
}


}

#fw-section-custom-html-117756b6-2ecc-43aa-bc4c-65b55dea81a1 {

/* ==== NAVIGATION & DROPDOWN ==== */
/* Ensure dropdown stays on top */
nav, header, .site-header, .main-navigation {
  position: relative;
  z-index: 9999;
}

/* Allow dropdown to overflow from header/video area */
.video-header, .header-wrapper, .fw-section {
  overflow: visible !important;
}

/* Optional: ensure dropdown shows over the video if absolutely needed */
.dropdown-menu, .menu-dropdown, .site-nav__dropdown {
  z-index: 10000;
  position: absolute; /* Changed from relative for proper dropdown overlay */
}

/* ==== RESET & BASE ==== */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: 'Montserrat', sans-serif;
}

/* ==== BUTTON GROUP WRAPPER ==== */
.button-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 0;
  text-align: center;
}

/* ==== BUTTON STYLES ==== */
.learn-more-button,
a.button.button--primary.button--expand,
button.button.button--primary.button--expand,
a.button.button--primary:not(.button--expand) {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  background-color: #48b3ff;
  color: black;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0;
  display: inline-block;
  text-align: center;
  position: relative;

  /* Smooth animation optimizations */
  will-change: transform, background-color, color;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Hover effect */
.learn-more-button:hover,
a.button.button--primary.button--expand:hover,
button.button.button--primary.button--expand:hover,
a.button.button--primary:not(.button--expand):hover {
  background-color: #1e90ff;
  color: white;
  /* Use GPU-accelerated transform */
  transform: translate3d(0, -10px, 0);
}

/* Focus styles */
.learn-more-button:focus,
a.button.button--primary.button--expand:focus,
button.button.button--primary.button--expand:focus,
a.button.button--primary:not(.button--expand):focus {
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
  background-color: #1e90ff;
  color: white;
  transform: translate3d(0, -10px, 0);
}

/* ==== MOBILE STYLES ==== */
@media (max-width: 768px) {
  .button-wrapper {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }

  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    padding: 10px 20px !important;
    font-size: 14px !important;
    width: 80% !important;
    margin-bottom: 10px !important;
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

}
#fw-section-image-with-text-8763e39c-b230-4e1b-a060-d9695d3e9086 {

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

}
#fw-section-image-with-text-618def66-01ee-4133-af9d-9068072a21af {

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

}
#fw-section-image-with-text-8cccf152-1f1c-4719-8e06-706769cf4182 {

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

}
#fw-section-image-with-text-e2c504e4-8d75-47f6-9b4f-03f0034024ba {

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

.image-text-button {
  background-color: #48b3ff;
  color: black;
  font-weight: 700;
  padding: 12px 24px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
}

.image-text-button:hover {
  background-color: #1e90ff;
  color: white;
  transform: translateY(-10px);
}

}
#fw-section-image-with-text-78b9c3e4-6d78-4ec7-b419-d30f9e49f6e1 {

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

}

#fw-section-custom-html-c50e3487-62e6-4bf6-93e1-f01ba366946f {

@media (min-width: 769px) {
  .grid--middle {
    align-items: flex-start !important; /* Top-aligns image and text */
  }
}

/* Match text spacing with .rich-text sections */
.image-with-text__content {
  padding-top: 36px;
  padding-bottom: 36px;
}

.image-with-text__text p {
  margin-bottom: 1.2em; /* same as .rich-text p spacing */
  line-height: 1.6;     /* improves readability */
}

.image-with-text__content h2 {
  margin-bottom: 1em;
  font-size: 2rem; /* match heading sizing if needed */
}

}
#fw-section-custom-html-e30a5a0a-ddca-4b0a-bdcd-bdc1a221c191 {

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

}

#fw-section-custom-html-774f2887-0971-4ead-aa65-0528ce02392c {

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Move slide 1 up as much as possible */
.slide:nth-child(1) img {
  object-position: center 0%;
}

/* Move slide 2 up slightly */
.slide:nth-child(2) img {
  object-position: center 20%;
}

/* Slide 3 stays default (center) — no CSS needed */

}










#fw-section-rich-text-0b7caf79-8965-45bb-93fd-b6f014a673c7 {

@media (max-width: 768px) {
  .html-formatter,
  .html-formatter--center,
  .rich-text,
  .section-fw-section-rich-text-0b7caf79-8965-45bb-93fd-b6f014a673c7-padding {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
  }

  .html-formatter p,
  .rich-text p {
    text-align: center !important;
    margin-bottom: 1em;
  }

  .html-formatter h2,
  .rich-text h2 {
    font-size: 1.4rem !important;
    text-align: center !important;
  }

  .html-formatter ul,
  .rich-text ul {
    display: inline-block;
    text-align: left !important;
  }
}

}
#fw-section-custom-html-67233cb0-5cfc-4dc0-bdbf-619235e55a5a {

@media (max-width: 768px) {
  /* Target the container div wrapping these buttons */
  div[style*="display: flex"][style*="justify-content: center"] {
    flex-direction: column !important; /* stack vertically */
    gap: 10px !important; /* smaller vertical gap */
    align-items: center !important;
  }

  /* Target all direct child anchors in that container */
  div[style*="display: flex"][style*="justify-content: center"] > a {
    width: 90% !important; /* all buttons same width */
    max-width: 320px !important; /* cap max width */
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

}







#fw-section-custom-html-834a414c-7794-471b-a061-e0c7f3f9b402 {

.button-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 0;
  line-height: 1;
  overflow: visible;
  min-height: 0;
}

.learn-more-button {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  background-color: #48b3ff;
  color: black;
  border: none;
  padding: 12px 24px;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  border-radius: 0;
  display: inline-block;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  line-height: 1.2;
  vertical-align: middle;
  min-height: 0;
  min-width: 0;
}

.learn-more-button:hover {
  background-color: #1e90ff;
  color: white;
  transform: translateY(-10px);
}

.learn-more-button:focus {
  outline: none;
}


}








#fw-section-tiers-e9c0906e-ffb0-4f96-a5f3-5f973e004d59 {

/* Fix only for the Become a Member (tiers) section */
.tiers__section {
  overflow: visible !important;
  position: relative;
  z-index: 2; /* Enough to appear over standard content */
}

/* Tooltip parent fix */
.tiers__section .tiers__tier-discount-cta,
.tiers__section .tiers__tier-discount-cta-button {
  position: relative;
  overflow: visible !important;
  z-index: 3;
}

/* Tooltip style fix */
.tiers__section .tiers__tier-discount-tooltip {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: #000;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  max-width: 220px;
  text-align: center;
}

/* Fix wrapper around tooltip if it's causing odd shapes */
.tiers__section .tiers__tier-discount-tooltip-wrapper {
  all: unset;
}

/* Show tooltip on hover */
.tiers__section .tiers__tier-discount-cta-button:hover .tiers__tier-discount-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

}



#fw-section-rich-text-8d97920e-6693-4ee6-89ed-e9beb463764c {

a.button.button--primary.button--expand {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

a.button.button--primary.button--expand:hover {
  background-color: #1e90ff; /* Hover background color */
  color: white;              /* Text color on hover */
  transform: translateY(-10px); /* Bounce up */
}

/* ==== MOBILE LAYOUT FIXES (max-width: 768px) ==== */
@media (max-width: 768px) {

  /* 1. Center all section headers and headings */
  h1, h2, h3, h4, .section-header, .hero-section h1, .fw-section .section-header {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. Increase font sizes for readability */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  p, li, .button, .learn-more-button, a.button.button--primary {
    font-size: 1rem !important;
  }

  /* 3. Ensure wrappers are centered and full-width */
  .button-wrapper, 
  .fw-section, 
  .fw-section-inner, 
  .container, 
  .content, 
  .main, 
  .site-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 4. Make other CTA/buttons match full mobile width and spacing */
  .learn-more-button,
  a.button.button--primary,
  button.button.button--primary {
    width: 100% !important;
    max-width: 480px !important;
    padding: 10px 20px !important;
    margin: 10px 0 !important;
  }

  /* 5. Fix special embed alignment (Instagram or other embeds) */
  .fw-instagram-embed, .fw-section-instagram-feed {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* 6. Reset any unwanted left text alignment */
  [class*="-wrapper"] *, 
  [class*="-header"] *, 
  [class*="section"], 
  [class*="content"] * {
    text-align: center !important;
  }
}

.html-formatter a,
.html-formatter--center a,
.rich-text a,
.section-fw-section-rich-text-0b7caf79-8965-45bb-93fd-b6f014a673c7-padding a {
  color: #48b3ff !important;
  text-decoration: underline; /* optional, to emphasize links */
}

}

#fw-section-rich-text-175280876463646 {
--color-primary: #48b3ff;
--color-primary-rgb: 72, 179, 255;
--color-background: #191919;
--color-background-rgb: 25, 25, 25;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #e7e7e7;
--color-background-brightness: 25;
background-color: var(--color-background);
color: var(--color-on-background);

}