#fw-section-image-7edfd96d-8f70-4d10-bfca-9cccf38a902e {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-0e27b869-0565-4b92-b0f9-cef8c062004e {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-aa2dbe00-cc0e-47f7-a4a2-53fe8d56a76b {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-af6bb39d-44e1-4649-8519-72a24e28815b {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-0b678439-40ea-4d16-be1f-a0c8924dd85a {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-2212352d-bb90-41c2-948b-6362fcf5e2af {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-738d2cec-f51e-4e36-bf9d-bc3849e1c058 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}



#fw-section-image-8fd3ef9c-5887-4957-8105-5e5dd8cb52c0 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-0dc941a7-0e16-4c16-a1ce-d0833e974129 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-cc0aa8db-3e38-4f2c-b566-db7d1daf8ab6 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-a89b56c2-353a-4207-a3fe-e200c56985c8 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 40% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}



#fw-section-hero-e124fb46-4c99-45a1-9d31-971e9e6f8fcd {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}


#fw-section-hero-36235957-1268-42df-a57a-8520beacf524 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 40% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}


#fw-section-image-bc0c66bf-dee9-4ce5-a9a5-9307d50a24a7 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}


#fw-section-image-cd397b2b-cce5-4748-a61a-2e4761abddd6 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-e76de017-e9ea-4eb2-bb2a-b25db2d2ab12 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 30%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-014435f0-ce2d-449e-92e5-58d0901a20bb {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-af935860-6e22-407e-9b86-6c0f9779dbe4 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}



#fw-section-hero-39cbbbf9-b745-4f96-9380-a5e48b249586 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
/* --- Background Image Sizing for Hero Section --- */

/* 💻 Desktop Styles (Applies to screens wider than 768px by default) */
.section-background__image {
  /* Set a smaller size for the image on desktop (e.g., 60% of container width) */
  background-size: 80% auto; 
  /* Center the smaller image */
  background-position: center center;
  /* Ensure the image doesn't repeat if it's smaller than the container */
  background-repeat: no-repeat;
}

/* 📱 Mobile Styles (Applies to screens 768px and narrower) */
@media (max-width: 768px) {
  .section-background__image {
    /* Set a different size for mobile, typically 100% or 'cover' for better viewing */
    background-size: 100% auto; 
    /* Ensures the image fills the screen on mobile */
  }
}
}



#fw-section-hero-196332bc-2846-4ead-8a07-5f4325d7fa45 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 40% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-4586c570-264c-42c1-903a-351c8216c276 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-7d5f22f2-32f7-41c8-aff2-7d9840c5eb94 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-6a8a7d6e-04a8-4f54-8da2-7fdbe0624910 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-rich-text-2f083118-06eb-4df0-985d-486b0666429e {

/* This rule only applies to screens 768px wide or wider (desktop) */
@media (min-width: 768px) {
  
  /* Target the heading text */
  h1 {
    font-size: 4rem; /* <-- Adjust this value to get the size you want! */
  }

}
}
#fw-section-image-712349d6-8563-4da8-af93-c0ee8ecd8bc6 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}












#fw-section-hero-8a22d5bd-ccbb-414a-af2b-e56f1e2e08eb {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */

/* This is the main style for the button */



.hero__inner a {

  /* --- 1. Resetting Your Global Styles --- */

  background-color: transparent !important;

  text-shadow: none !important;

  margin: 0 !important; /* CRITICAL: Resets global margins */

  

  /* --- 2. The New Ghost Button Style --- */

  display: inline-block !important; 

  border: 2px solid #FFFFFF !important;

  color: #FFFFFF !important;

  

  /* --- 3. Sizing & Spacing --- */

  padding: 10px 25px !important;

  font-size: 1.2rem !important;

  

  /* --- 4. Clean-up --- */

  text-decoration: none !important;

  border-radius: 8px !important;

  

  /* --- 5. Hover Effect --- */

  transition: all 0.2s ease-in-out;

}



/* --- 6. Hover Style --- */

.hero__inner a:hover {

  background-color: #FFFFFF !important;

  color: #000000 !important;

}



/* === 7. NEW BUTTON POSITIONING === */

/* This section adds the margins back for both desktop and mobile */



/* --- Desktop Position --- */

@media (min-width: 601px) {

  .hero__inner a {

    /* You can change 175px to a larger number to move it lower */

    margin-top: 175px !important;

  }

}



/* --- Mobile Position --- */

@media (max-width: 600px) {

  .hero__inner a {

    /* You can change 50px to a larger number to move it lower */

    margin-top: 50px !important;

  }

}
}

#fw-section-image-74b8a250-5dad-4863-98cc-485a6bf885c3 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}


#fw-section-image-45a9c3db-1a27-473f-9eb2-dc1f771d28cd {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-1806bbbd-3704-4e1f-a80e-435d118ac867 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-8aa77343-657c-443a-ae73-7a0ae595dcc6 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}


#fw-section-hero-f9c9936c-4828-4d64-b668-b292c6822ca2 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}










#fw-section-image-28f39bfd-dee9-4abe-bee3-c1ea9ac6b086 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}


#fw-section-image-976c50db-bc88-42ed-afe9-ec82e16b0d7e {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 70%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-05dc09ac-627b-4254-a123-d4f4e55e1d3e {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 70%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-bf9d9c21-d805-4b6c-b8b1-2555a84d7535 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 70%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}




#fw-section-hero-53566b56-ce99-4eda-82fd-9869a16af2b4 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
/* --- Background Image Sizing for Hero Section --- */

/* 💻 Desktop Styles (Applies to screens wider than 768px by default) */
.section-background__image {
  /* Set a smaller size for the image on desktop (e.g., 60% of container width) */
  background-size: 50% auto; 
  /* Center the smaller image */
  background-position: center center;
  /* Ensure the image doesn't repeat if it's smaller than the container */
  background-repeat: no-repeat;
}

/* 📱 Mobile Styles (Applies to screens 768px and narrower) */
@media (max-width: 768px) {
  .section-background__image {
    /* Set a different size for mobile, typically 100% or 'cover' for better viewing */
    background-size: cover; 
    /* Ensures the image fills the screen on mobile */
  }
}
}



#fw-section-hero-ca403cdd-9946-4725-9fd4-0721f9a22f0a {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
/* --- Background Image Sizing for Hero Section --- */

/* 💻 Desktop Styles (Applies to screens wider than 768px by default) */
.section-background__image {
  /* Set a smaller size for the image on desktop (e.g., 60% of container width) */
  background-size: 70% auto; 
  /* Center the smaller image */
  background-position: center center;
  /* Ensure the image doesn't repeat if it's smaller than the container */
  background-repeat: no-repeat;
}

/* 📱 Mobile Styles (Applies to screens 768px and narrower) */
@media (max-width: 768px) {
  .section-background__image {
    /* Set a different size for mobile, typically 100% or 'cover' for better viewing */
    background-size: 100% auto; 
    /* Ensures the image fills the screen on mobile */
  }
}
}




#fw-section-hero-bb134055-4ea8-4463-876f-33ba04307f15 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}
#fw-section-hero-00965e5a-6640-4299-ba87-467a6abdd971 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 40% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}

#fw-section-image-35feefbd-f669-49db-abec-16a405da1f8f {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}


#fw-section-image-c1890d63-3b8c-4225-9d7e-fd09971f6dd7 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 30%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-5c6454d9-e6f3-4ffa-8fc5-24ef9d562c70 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 30%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-9a633d3d-12c7-4b9c-9c91-da61c34b6524 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 30%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-6c749390-6494-4fea-8d83-4dc5da1a6e7e {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}



#fw-section-hero-e9227052-dabb-4d90-87f2-646728258324 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}

#fw-section-hero-6b6f64e5-a8da-4c38-bc8b-dffcc2adf8e1 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}






#fw-section-hero-8a62d6f3-c79a-4976-b5af-a560b4f1e1ca {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}

#fw-section-hero-955da9af-76e3-406b-a6f1-69efbb309117 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}


#fw-section-hero-01d6316b-c785-4d98-ae52-22dfbb141065 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}

#fw-section-hero-accb1bd9-7581-4d9e-94fd-0f7aecf455b5 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}

#fw-section-hero-33c766d5-e614-4970-aa31-6bc3aadaeef3 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}

#fw-section-hero-c6fb5d69-8b91-42fb-9a17-4c2e50ba15f9 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}

#fw-section-hero-9dc5c40e-8fe7-4bc6-b27a-8a20681eeec7 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}


#fw-section-hero-f1ec58c0-da2e-4882-9e26-c415366fd39d {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}


#fw-section-hero-e3310286-aced-4156-99e0-47f5e73a4c93 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}

#fw-section-hero-28519e86-f51b-4c63-9f7d-1a17e8dabd72 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
}
#fw-section-image-56b89ac0-6a5e-415c-9eca-eefab614cc3a {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-43e38f14-afc6-4cee-afd8-10ccca5a1ca5 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-3e7ce515-96bb-4e5c-bc53-c1e38b8da334 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-1edf5c94-28ed-48d3-b302-6b7fa3dbdfd5 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-433e0a2d-6daf-42b4-bc2b-7827defd2606 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-93831c34-1372-474d-911f-fd5c59a9d05b {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-7d051d71-638d-47c1-8643-993fe1550763 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-8148d875-b39d-4a30-8bce-e257c64dffe5 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-ffb29273-96c2-4886-b157-ca06c60f7b4a {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-94fa3901-8906-4733-a88b-75351af377f1 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-578dabd1-cc08-4047-904c-2c522d09aae1 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-fde25d67-5dc9-4b7c-ae60-4f384f887ac4 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-9352c5d6-8c8a-4fd1-9012-2b2d8bb011a8 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-013c3054-b381-4e81-9a62-f0930d58ecaa {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-840d4a24-90f1-497f-8256-e2cb3995a455 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}



#fw-section-image-90eed820-b8f1-4ad2-aecd-d65de62035e1 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-42646ad7-9064-4720-b252-f16b345d6151 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-96109ffd-0dfb-4cb9-a269-7777b6ca625a {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-5d3415d8-db20-448b-a8ab-05ebcf571a70 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}



#fw-section-hero-0aaa4754-5b19-4867-8cfd-6263f4581325 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}

#fw-section-custom-html-d1100b1b-0662-4e93-9297-83e9756dc424 {

@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

.nutrition-card {
  border: 4px solid #9b185d;
  background: #fffdf5; /* G8 Cream */
  padding: 20px;
  margin: 40px auto;
  width: 90%;
  max-width: 500px;
  color: #9b185d;
  font-family: 'Suisse Intl', sans-serif !important;
  box-shadow: 8px 8px 0 #d4a017; /* G8 Sepia Shadow */
  box-sizing: border-box;
}

.nutrition-header {
  font-family: 'Archivo Black', sans-serif;
  font-size: 2.5rem; 
  line-height: 0.95; 
  border-bottom: 8px solid #d4a017; /* G8 Sepia Border */
  margin-bottom: 15px;
  padding-bottom: 5px;
  text-transform: uppercase;
  /* CRITICAL FIX: Forces browser to keep words whole */
  word-break: keep-all; 
  overflow-wrap: normal;
}

.serving-size {
  font-size: 1rem;
  border-bottom: 4px solid #d4a017;
  padding-bottom: 10px;
  margin-bottom: 15px;
  font-weight: 700;
}

.sustenance-row {
  border-bottom: 1px solid #9b185d; 
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline; 
  font-size: 1.1rem;
}

.last-row { 
  border-bottom: 8px solid #d4a017; 
  margin-bottom: 10px;
}

/* EXACT G7 SPACING */
.sus-label { 
  font-weight: 900; 
  text-transform: uppercase; 
  width: 35%; 
  flex-shrink: 0;
}
  
.sus-value { 
  font-style: italic; 
  text-align: right; 
  width: 65%; 
  line-height: 1.2;
  padding-left: 5px;
}
  
.highlight-sepia { 
  color: #9b185d; 
  font-weight: 800; 
  text-shadow: 2px 2px 0 #d4a017; 
}

/* MOBILE OPTIMIZATION */
@media (max-width: 480px) {
  .nutrition-header { 
      font-size: 2.1rem; 
  }
  .sustenance-row { 
      font-size: 0.95rem; 
  }
}
}

#fw-section-hero-dd1fb085-c4e0-4c0b-a142-51739fe119b2 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}


#fw-section-image-72dd729a-9f2b-4d31-a1d1-b02ef4cb042f {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-33461fb6-fb55-4e5f-8eb0-f64e38a7860d {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-243a0fc8-d663-4786-81b2-932dea726747 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-3c385e42-6fb9-4b2d-ab88-c152100ca377 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 80%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-c17ec28d-f844-49d6-8cea-c21648febaf8 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-6b9e3798-90cb-479f-a798-688b4f5fb293 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-c4cfabeb-97dc-4b6b-b4dd-e28d2ad45ec2 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}



#fw-section-image-920568b4-fc01-49dc-bd74-fb3eb949c1c3 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-271a94b1-6853-43d0-8a38-677ce21876aa {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-b3f3a43d-e8f9-4ca3-9a56-ad82acf76a9a {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}


#fw-section-hero-eb8b88ee-5133-46aa-b16d-040abba0c51e {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}



#fw-section-hero-ffab702e-123f-44e3-9467-7f96548cbec4 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}




#fw-section-hero-f00153aa-79f3-432e-8c29-49930dafc6de {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}

#fw-section-image-8ed96041-8db8-4dfd-9116-70c80e7ee985 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-9f0ad6c1-a737-49e4-85b0-93507d72b555 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-3b837599-b076-4c97-848f-01a0dbf61472 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-bca7f6f2-b168-4baa-9dd4-92dba4d3a0b4 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 60%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}







#fw-section-image-4d9044c5-fe1c-4773-94ac-ffc3b7fc4852 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 70%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-88173a69-a5fb-4d17-b3d5-823cdc9c2344 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 70%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-78e16764-48e8-4d51-a875-b95a3ab58cff {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 70%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}



#fw-section-hero-9960af8e-785a-40ee-a198-eabfa2371677 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.6) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 30% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: 90% auto; 
  }
}
}





#fw-section-rich-text-9939cbb1-bef0-41fe-8439-9c7b5b656968 {

h1, h2, h3 {
    font-size: 3rem !important; /* 3rem is roughly 48px */
}
}

#fw-section-hero-24085901-1657-4b86-8fb4-36702dab7df2 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: 100% auto; 
  }
}
}









#fw-section-hero-267a527d-3cbf-4118-b91e-12bfd8a67e32 {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 40% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}
#fw-section-image-2826d494-e512-4784-affd-93a5cd6125b0 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 40%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}



#fw-section-image-89b07990-3dbe-48d5-a166-a283a5257470 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 100%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width:120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-0f0d80da-0f42-435e-9437-07e3602aed45 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 100%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-image-2c13c10b-8d94-4943-951e-00a8eb98c1fb {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}

#fw-section-hero-9d884ac2-0831-49da-b1d5-c94173843cc3 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
/* --- Background Image Sizing for Hero Section --- */

/* 💻 Desktop Styles (Applies to screens wider than 768px by default) */
.section-background__image {
  /* Set a smaller size for the image on desktop (e.g., 60% of container width) */
  background-size: 80% auto; 
  /* Center the smaller image */
  background-position: center center;
  /* Ensure the image doesn't repeat if it's smaller than the container */
  background-repeat: no-repeat;
}

/* 📱 Mobile Styles (Applies to screens 768px and narrower) */
@media (max-width: 768px) {
  .section-background__image {
    /* Set a different size for mobile, typically 100% or 'cover' for better viewing */
    background-size: cover; 
    /* Ensures the image fills the screen on mobile */
  }
}
}



#fw-section-hero-4a1dcd95-3f60-4ad5-aae4-453585be6701 {

/* === GHOST BUTTON FOR CHARACTER SECTIONS === */
/* This is the main style for the button */

.hero__inner a {
  /* --- 1. Resetting Your Global Styles --- */
  background-color: transparent !important;
  text-shadow: none !important;
  margin: 0 !important; /* CRITICAL: Resets global margins */
  
  /* --- 2. The New Ghost Button Style --- */
  display: inline-block !important; 
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
  
  /* --- 3. Sizing & Spacing --- */
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  
  /* --- 4. Clean-up --- */
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* --- 5. Hover Effect --- */
  transition: all 0.2s ease-in-out;
}

/* --- 6. Hover Style --- */
.hero__inner a:hover {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* === 7. NEW BUTTON POSITIONING === */
/* This section adds the margins back for both desktop and mobile */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  .hero__inner a {
    /* You can change 175px to a larger number to move it lower */
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  .hero__inner a {
    /* You can change 50px to a larger number to move it lower */
    margin-top: 50px !important;
  }
}
/* --- Background Image Sizing for Hero Section --- */

/* 💻 Desktop Styles (Applies to screens wider than 768px by default) */
.section-background__image {
  /* Set a smaller size for the image on desktop (e.g., 60% of container width) */
  background-size: 50% auto; 
  /* Center the smaller image */
  background-position: center center;
  /* Ensure the image doesn't repeat if it's smaller than the container */
  background-repeat: no-repeat;
}

/* 📱 Mobile Styles (Applies to screens 768px and narrower) */
@media (max-width: 768px) {
  .section-background__image {
    /* Set a different size for mobile, typically 100% or 'cover' for better viewing */
    background-size: cover; 
    /* Ensures the image fills the screen on mobile */
  }
}
}


#fw-section-hero-1e84a00a-ed9d-4637-91ce-bcb8f513dace {

/* === GHOST BUTTON FIX WITH BORDER === */

/* --- 1. MAIN BUTTON STYLE (Resting) --- */
div.hero__inner a {
  /* Resting State: Translucent Pink (0.8 opacity) */
  background-color: rgba(255, 182, 182, 0.7) !important; 
  
  /* Text Color: Dark Pink */
  color: #9b185d !important;
  
  /* --- BORDER ADDED HERE --- */
  /* 2px wide, Solid line, Dark Pink color (matches text) */
  border: 2px solid #9b185d !important;
  
  /* Resetting Styles */
  text-shadow: none !important;
  margin: 0 !important; 
  display: inline-block !important; 
  padding: 10px 25px !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  
  /* Ensure the button is fully opaque */
  opacity: 1 !important; 

  /* Transition for smooth effect */
  transition: all 0.3s ease-in-out;
} 

/* --- 2. HOVER STYLE (Solid & Inverted) --- */
div.hero__inner a:hover {
  /* Hover State: Solid Dark Pink */
  background-color: #9b185d !important; 
  
  /* Hover Text: Solid Light Pink */
  color: #ffb6b6 !important; 
  
  /* Hover Border: Matches the Background (so it looks like a solid block) */
  border: 2px solid #9b185d !important;
  
  /* Force Opacity */
  opacity: 1 !important; 
  
  cursor: pointer;
}

/* === 3. BUTTON POSITIONING === */

/* --- Desktop Position --- */
@media (min-width: 601px) {
  div.hero__inner a {
    margin-top: 175px !important;
  }
}

/* --- Mobile Position --- */
@media (max-width: 600px) {
  div.hero__inner a {
    margin-top: 50px !important;
  }
}

/* === 4. BACKGROUND IMAGE SIZING === */
.section-background__image {
  background-size: 60% auto; 
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .section-background__image {
    background-size: cover; 
  }
}
}





#fw-section-image-ce5151b4-2363-472f-ae23-e27ddc233638 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 35%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 65%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-6308c41c-8482-4bff-9557-83790493ad39 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 55%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 65%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-rich-text-99d5f5c0-4282-4e77-be46-f71896264a17 {
--font-heading-scale: 0.86;
--font-body-scale: 0.99;
}
#fw-section-rich-text-99d5f5c0-4282-4e77-be46-f71896264a17 {

@media only screen and (max-width: 767px) {
  /* Targets the main heading specifically on mobile screens (767px and smaller) */
  h1 {
    /* Set the new font size for mobile. 
       Adjust '24px' or '1.5em' to your desired size. */
    font-size: 24px; 
  }
}
}



#fw-section-image-f3dbe64b-0be1-45b6-a502-361e5f615f5d {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 50%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 120%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-image-32cc40f4-2a2e-47c4-8a64-d13cf74df8d6 {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 70%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 80%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}
#fw-section-hero-667b6bb2-36ad-45dc-aa8d-32bb5bedbf61 {

/* === GLOBAL BUTTON STYLES === */
/* These rules apply to both desktop and mobile */
a {
  display: inline-block !important; /* This stops it from being 100% wide */
  text-decoration: none !important; /* Removes underline */
  border-radius: 8px !important;    /* Rounds the corners */
  
  /* --- NEW LINE FOR TEXT OUTLINE --- */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* === DESKTOP BUTTON STYLES === */
@media (min-width: 601px) {
  a {
    /* --- 1. Location (Placement) --- */
    margin-top: 175px !important; 
    
    /* --- 2. Button Size --- */
    padding: 20px 50px !important; 
    font-size: 1.7rem !important;
    
    /* --- 3. Button Color (Background) --- */
    background-color: #9B185D !important; 
    
    /* --- 4. Button Text Color --- */
    color: #FFFFFF !important;
  }
}

/* === MOBILE BUTTON STYLES === */
/* *** CRITICAL FIX: Changed from 1800px to 600px *** */
@media (max-width: 600px) {
  a {
    /* --- 1. Location --- */
    margin-top: 50px !important;
    
    /* --- 2. Button Size --- */
    padding: 1px 1px !important;
    font-size: 0.9rem !important;
    
    /* --- 3. Button Color (Background) --- */
    background-color: #f5adad !important;
    
    /* --- 4. Button Text Color --- */
    color: #FFFFFF !important;
  }
}

}
#fw-section-image-5e02e00e-99d6-4bc1-b6e9-e4376253387a {

@media only screen and (min-width: 767px) {
  /* Targets the character image on desktop screens (992px and wider) */
  .image-section__image {
    /* Adjust this percentage (e.g., 75%) to control the new size */
    max-width: 90%; 
    
    /* Centersthe now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (max-width: 767px) {
  /* Targets the character image on mobile screens (767px and smaller) */
  .image-section__image {
    /* Set the new size, for example, 90% of the container width. 
       Use a percentage less than 100% to shrink it. */
    max-width: 130%; 
    
    /* Centers the now-smaller image horizontally */
    margin-left: auto;
    margin-right: auto;
  }
}
}












#fw-section-announcement-bar-abbe223f-57f8-4666-a9bc-28ef86d95c64 {

/* Custom CSS for a Compact, Transparent Announcement Bar with Mobile Wrap */

/* --- GLOBAL STYLES (Applies to all screens) --- */
.announcement-bar {

}

.announcement-bar .wrapper {
    /* Ensures content is centered */
    text-align: center;
}

.announcement-bar__inner {
    /* Reduces vertical padding for a compact look */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px; 
    min-height: auto;
    line-height: 1.2;
}

.announcement-bar__label {
    /* Reduce font size slightly for compactness */
    font-size: 0.85rem; 
    display: block; 
    
    /* On LARGE screens, prevent text wrapping and truncate if necessary */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- MOBILE STYLES (Applies only to screens 600px and smaller) --- */
@media screen and (max-width: 600px) {
    .announcement-bar__label {
        /* OVERRIDE: Allow text to wrap onto multiple lines (2 lines is the goal) */
        white-space: normal;
        overflow: visible;
        text-overflow: clip; /* Disable truncation */
        padding: 0 10px; /* Add slight horizontal padding on mobile */
    }
    
    /* Adjust padding of the inner container for better fit on small screens */
    .announcement-bar__inner {
        padding: 8px 5px; /* Increase vertical padding slightly for multi-line text */
    }
}
}