:root {
  --fitzy-red: #ed2c28;
  --fitzy-yellow: #fdbf0f;
  --fitzy-purple: #352e89;
  --fitzy-gray: #efefef;
}

@font-face {
  font-family: "GE SS Two Bold";
  src: url("../fonts/GE SS Two Bold.otf") format("opentype");
}

html {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
}
body {
  font-family: "GE SS Two Bold", sans-serif;
  direction: rtl;
  background-color: #fff;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Prevent padding/margin issues */
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.navbar-toggler {
  border: none; /* Remove default border */
  padding: 0.25rem 0.5rem; /* Smaller padding for mobile */
}

.navbar-toggler-icon {
  filter: invert(100%); /* Make icon white to contrast with purple background */
}

.navbar-custom {
  background-color: var(--fitzy-purple) !important;
  z-index: 999;
  position: relative;
  width: 100vw; /* Full width */
  margin: 0; /* Remove any margins */
  padding: 0; /* Remove padding to extend fully */
}

.navbar-custom .container-fluid {
  width: 100%; /* Ensure container spans full width */
  padding: 0.5rem 1rem; /* Controlled padding */
  margin: 0; /* No margins */
}

.navbar-custom .d-flex.gap-3 {
  flex-wrap: nowrap; /* Prevent wrapping to avoid button falling out */
}

.nav-link {
  font-size: 18px;
}

.navbar .btn-warning {
  font-size: 18px;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
}

.nav-cta {
  padding: 0.5rem 1.5rem;
  font-size: 18px;
  border-radius: 999px;
  margin-right: 1rem;
}

.nav-item-align {
  display: flex;
  align-items: center;
  height: 48px; /* or whatever matches your nav height */
  padding: 0 0.1rem;
}

.navbar-collapse {
  flex-direction: column;
  align-items: flex-start;
}
.navbar-collapse .d-flex {
  flex-direction: column !important;
}
.navbar-collapse .d-flex .nav-link,
.navbar-collapse .d-flex .nav-cta {
  width: 100% !important;
  margin-bottom: 0.5rem !important;
  padding: 0.5rem 1rem !important;
}
.navbar-collapse .d-flex .nav-cta:last-child {
  width: 50% !important; /* Shorter width, adjust as needed (e.g., 40%, 60%) */
  margin-right: 0 !important; /* Remove right margin */
  background-color: var(
    --fitzy-yellow
  ) !important; /* Remove yellow background */
  color: var(--fitzy-purple) !important; /* Match other link text color */
  text-align: center !important; /* Center the text */
}

/* Divider bar (|) */
.uvp-pill .uvp-item:not(:last-child) {
  position: relative; /* Establish positioning context for ::after */
  margin-bottom: 0.5rem; /* Space between items */
}
.uvp-pill .uvp-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -0.5rem; /* Place it below the item, adjusted for margin */
  left: 0;
  right: 0;
  height: 2px;
  width: 80%;
  background-color: var(--fitzy-yellow);
  transform: translateY(100%); /* Shift it down to sit between items */
  margin: auto;
}

/* HERO */

#hero {
  position: relative;
  padding: 2rem 1rem;
  text-align: center;
  width: 100%;
}

.hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}

.hero-yellow {
  top: 5.5rem;
}

.hero-purple {
  margin-top: 0rem;
  width: 100%; /* Full width as base */
  height: var(--hero-purple-height, 250px);
}

#hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 150px;
  background-color: var(--fitzy-yellow);
  z-index: -2;
}

.logo-wrapper {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.fitzy-logo {
  width: 150px;
  height: auto;
  display: block;
  margin-top: 3.5rem;
}

.hero-title {
  max-width: 90%;
  width: 100%;
  margin: 3.5rem auto 0.5rem;
  display: block;
}

.hero-subheading {
  font-size: 24px;
  font-weight: bold;
  color: var(--fitzy-purple);
  line-height: 1.2;
  margin: 0.5rem 0;
}

.uvp-pill {
  background-color: var(--fitzy-red);
  color: var(--fitzy-yellow);
  border-radius: 999px; /* Keep cylindrical shape */
  padding: 1rem;
  display: flex;
  flex-direction: column; /* Already vertical, ensure items stack */
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  font-weight: bold;
  margin: 3rem auto;
  width: 60%;
  height: auto; /* Ensure it adjusts to content height */
}

.uvp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
}

.uvp-item img {
  width: 100px;
  height: auto;
  margin: 1rem auto;
}

.fitzy-btn {
  background-color: var(--fitzy-red);
  color: white;
  border: none;
  font-size: 24px;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  display: inline-block;
  margin-top: 0rem;
  text-decoration: none; /* Remove underline */
  transition: background-color 0.3s ease; /* Transition only for color */
}
.fitzy-btn:hover {
  background-color: #c62420; /* Darker shade of fitzy-red */
}
.fitzy-btn:focus,
.fitzy-btn:active {
  background-color: #c62420;
}

/* Testomenial section */

.testimonial-section {
  background-color: var(--fitzy-gray);
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
}

.testimonial-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.5rem;
  direction: ltr;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  position: relative;
  z-index: 2;
}

.testimonial-title-img {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
}

.testimonial-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.floating-quote {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 40px;
  z-index: 3;
}

.testimonial-card {
  flex: 0 0 auto;
  width: 300px;
  height: 220px; /* Your increased height */
  background-color: white;
  border-radius: 20px;
  padding: 1rem;
  margin-right: 1rem;
  box-sizing: border-box;
  scroll-snap-align: start;
  position: relative; /* Enable absolute positioning for footer */
}

.stars {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.stars img {
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.testimonial-text {
  color: var(--fitzy-purple);
  font-weight: bold;
  font-size: 14px;
  line-height: 1.4;
  margin: 1rem 0;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  bottom: 2rem; /* Position 1rem from the bottom */
  left: 1rem;
  right: 1rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.author-name {
  font-weight: bold;
  color: var(--fitzy-red);
  margin: 0;
  font-size: 14px;
}

.author-title {
  font-size: 12px;
  color: #777;
  margin: 0;
}

.testimonial-scroll-hint {
  text-align: center;
  margin: auto;
}

.testimonial-scroll-hint img {
  width: 40px;
  height: auto;
  opacity: 0.6;
}

/* --- COMPARISON SECTION (REVISED) --- */

#fitzy-comparison {
  position: relative;
  padding: 2rem 1rem;
  background-color: transparent;
}

.fitzy-comparison-section::before {
  content: "";
  position: absolute;
  top: -50px;
  right: 0;
  left: 0;
  height: 150px;
  background-color: var(--fitzy-gray);
  z-index: -1;
}

.comp-bg-wrapper {
  position: absolute;
  top: 0;
  left: -14rem;
  width: 250%;
  height: auto;
  pointer-events: none;
  z-index: -2;
}

/* Layer 1: The bottom-most wave */
.comp-bg-yellow-wrapper {
  z-index: 0;
  top: 0;
  height: 200px;
}

/* Layer 2: The wave on top of the yellow one */
.comp-bg-red-wrapper {
  z-index: 1;
  top: 50px;
  height: 150px;
}

.comp-bg-yellow,
.comp-bg-red {
  width: 100%;
  height: auto;
  display: block;
}

.fitzy-comparison-content {
  position: relative;
  z-index: 2;
}

.comp-part-a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
}

.fitzy-guy {
  width: 100%;
  max-width: 350px;
  height: auto;
  margin-bottom: 1rem;
  margin-top: 1rem;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.comp-text {
  text-align: center;
  max-width: 100%;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.comp-headline {
  font-size: 50px;
  font-weight: bold;
  color: var(--fitzy-yellow);
  margin-bottom: 0.5rem;
  line-height: 1.2;
  margin-top: 5rem;
}

.comp-paragraph {
  font-size: 18px;
  line-height: 1.4;
  color: var(--fitzy-purple);
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

.fitzy-btn.yellow {
  background-color: var(--fitzy-yellow);
  color: var(--fitzy-purple);
  font-size: 24px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  transition: background-color 0.3s ease; /* Smooth transition */
  margin-top: 1rem;
}
.fitzy-btn.yellow:active,
.fitzy-btn.yellow:focus {
  background-color: #e0a200; /* Darker yellow shade */
}
#comp-btn {
  text-decoration: none;
  color: #fff;
}
/* COMARISON VS COL */
/* Section wrapper */
.comparison-followup {
  position: relative;
  padding: 2rem 1rem;
  background-color: transparent;
  overflow: hidden;
}

/* Wave background */
.wave-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.wave-bg {
  width: 180%;
  height: auto;
  transform: translateY(-8rem);
}

/* Central wrapper */
.content-wrapper {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Comparison SVG */
.comparison-svg {
  width: 90%;
  height: auto;
  margin: -5rem 0;
}

.comparison-cta {
  margin: 7rem 0;
}

.left-balls,
.right-balls {
  display: none; /* Hide on small screens */
}

.fitzy-btn {
  background-color: var(--fitzy-red);
  color: white;
  border: none;
  font-size: 24px;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.fitzy-btn:active,
.fitzy-btn:focus {
  background-color: #c62420; /* Darker red for press/focus feedback */
}

/* FLAVORS SECTION */

.flavors {
  background-color: white;
  padding: 0rem 1rem;
  text-align: center;
  position: relative;
  margin-top: -3rem;
}

.flavor-section-title {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
}

.flavor-ending-title {
  width: 90%;
  height: auto;
  display: block;
  margin: 3rem auto;
}

.flavor-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 0.5rem;
  margin-bottom: 1.5rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.flavor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flavor-img {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.flavor-cta {
  display: block; /* Hide individual buttons from HTML */
  margin: auto;
}

.flavors .fitzy-btn {
  padding: 0.6rem 1.5rem;
  font-size: 24px;
}

.flavor-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--fitzy-purple);
  margin: 0.5rem 0;
}

#flavor-btn {
  text-decoration: none;
  color: var(--fitzy-purple);
}

/* ABOUT SECTION */
.about-us {
  position: relative;
  background-color: white;
  padding: 0rem 1rem;
  text-align: center;
  overflow: visible;
  z-index: 0; /* Base layer for the section */
}

.about-bg {
  position: absolute;
  top: 1rem; /* Fix at the top of .about-us */
  left: -3rem;
  width: 200%;
  height: 450px; /* Set a fixed height instead of 100% */
  object-fit: cover;
  z-index: -1; /* Bottom layer, below everything */
  pointer-events: none;
}

/* Floating Fitzy logo */

.about-logo {
  top: 23rem;
  width: 200px;
  height: auto;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally at bottom */
  z-index: 4; /* On top of bg and image */
}

/* Main layout */
.about-content {
  position: relative;
  z-index: 2; /* On top of logo and bg */
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-top: 0; /* Push content below logo, adjust as needed */
}

.about-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: 0rem;
  position: relative;
  z-index: 0; /* Above bg, below logo and content */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Right text */
.about-text {
  text-align: center;
  max-width: 100%;
  margin-top: 5rem;
}

.about-title {
  font-size: 50px;
  font-weight: bold;
  color: var(--fitzy-red);
  margin-bottom: 0.5rem;
  /* margin-top: 6rem; */
}

.about-subtitle {
  font-size: 32px;
  font-weight: bold;
  color: var(--fitzy-purple);
  margin-bottom: 0.5rem;
}

.about-paragraph {
  font-size: 18px;
  color: var(--fitzy-purple);
  line-height: 1.4;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/* JOIN US SECTION */
.join-us {
  position: relative;
  background-color: white;
  padding: 2rem 1rem;
  overflow: visible;
  z-index: 0;
}

/* Wavy Background */
.join-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* Main Content */
.join-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

/* Top Horizontal Stack */
.join-top-stack {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Right: Vertical Stack (Title + Logo) */
.join-title-logo {
  margin-bottom: 1rem;
}

.join-title-img {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.join-logo {
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Left: Vertical Stack (Text + Social Media) */
.join-text-social {
  text-align: center;
  margin-bottom: 1rem;
}

.join-text {
  font-size: 18px;
  color: var(--fitzy-purple);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.social-icon-link {
  display: inline-block;
  text-decoration: none;
}

.social-icon {
  width: 30px;
  height: auto;
}

/* Bottom Stack */
.join-bottom-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

/* Left: Girl Image */

.join-image img {
  width: 100%;
  max-width: 250px;
  height: auto;
  margin-bottom: 1rem;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  z-index: 1; /* Below join-strip */
  position: relative; /* Ensure z-index applies */
}

/* Right: Form */
.join-form {
  width: 120%;
  text-align: right;
  margin-bottom: 1rem;
  background-color: white;
  padding: 3rem;
  border-radius: 5%;
  border: 2px solid var(--fitzy-purple);
}

.join-form .form-control {
  border-radius: 12px;
  padding: 0.75rem;
  font-size: 14px;
  margin-bottom: 1rem;
  border: 0.5px solid var(--fitzy-gray);
  width: 100%;
  text-align: right;
}

.join-form .fitzy-btn {
  background-color: var(--fitzy-red);
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  width: 100%;
  transition: background-color 0.3s ease;
}
.join-form .fitzy-btn:active,
.join-form .fitzy-btn:focus {
  background-color: #c62420; /* Darker red for press/focus feedback */
}

/* Bottom Strip */
.join-strip {
  width: 200%;
  height: auto;
  display: block;
  margin-top: -8rem;
  right: -1rem;
  z-index: 2; /* Above join-image */
  position: relative; /* Ensure z-index applies */
}

/* FOOTER SECTION */
.footer {
  padding: 2rem 1rem;
  text-align: center;
  background-color: var(--fitzy-gray);
  color: var(--fitzy-purple);
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.footer-icon-link {
  display: inline-block;
}

.footer-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.footer-subtitle {
  font-size: 14px;
  margin: 0 0 0.5rem;
}

.footer-note {
  font-size: 12px;
  color: #ff9999;
  margin: 0;
}

@media (min-width: 768px) {
  /* Hero – Tablet (768px) */
  #hero {
    padding: 3rem 2rem;
  }

  .hero-title {
    max-width: 80%;
    margin: 2rem auto 0.5rem;
  }

  .hero-subheading {
    font-size: 32px;
    margin-top: 2rem;
  }

  .uvp-pill {
    width: auto;
    padding: 1.5rem 2rem;
    gap: 1rem;
    font-size: 18px;
    flex-direction: row;
    justify-content: center;
    position: relative;
  }

  .uvp-item {
    flex-direction: row;
    align-items: center;
    height: 4rem;
    position: relative;
    padding: 0 0rem;
  }

  .uvp-item:not(:last-child) {
    border-left: 2px solid var(--fitzy-yellow); /* ← VERTICAL BAR */
    padding-left: 0.5rem; /* ← space for bar */
    margin-left: 0.5rem; /* ← gap after bar */
  }

  .uvp-pill .uvp-item:not(:last-child)::after {
    display: none !important;
  }

  .fitzy-btn {
    font-size: 20px;
    padding: 0.75rem 2rem;
    margin-bottom: 1rem;
  }

  /* Testimonials – Tablet (768px) */

  .gray-band {
    background-color: var(--fitzy-gray);
    padding-top: 150px; /* Pulls gray UP into hero */
    padding-bottom: 450px; /* Pushes gray DOWN into comparison */
    margin-top: -250px; /* Pulls entire block UP */
    margin-bottom: -450px; /* Pushes next section DOWN */
    position: relative;
    z-index: -2;
    background-color: var(--fitzy-gray);
  }
  .testimonial-section {
    padding: 4rem 2rem;
    overflow: hidden;
    margin-top: 1rem;
    background-color: transparent !important;
  }

  .testimonial-heading {
    margin-bottom: 3rem;
  }

  .testimonial-title-img {
    width: 70%; /* Scales better on tablet */
    max-width: 600px;
    height: auto;
    margin: -1rem auto 2rem;
  }

  .testimonial-scroll {
    overflow-x: visible; /* No need for scroll on tablet */
    flex-wrap: wrap; /* Allow wrapping if more cards */
    justify-content: center;
    gap: 5rem; /* Space between cards */
    padding: 0 2rem;
    direction: rtl; /* Maintain RTL for consistency */
  }

  .testimonial-wrapper {
    flex: 0 0 calc(33.333% - 1.333rem); /* 3 cards per row with gap */
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .floating-quote {
    width: 50px; /* Slightly larger for tablet */
    top: 15px;
    right: 15px;
  }

  .testimonial-card {
    width: 120%; /* Full width within wrapper */
    height: 110%; /* Auto height to fit content */
    padding: 3.5rem 3rem;
    border-radius: 25px;
    margin-right: 1rem; /* No margin needed in grid */
  }

  .stars img {
    width: 100px; /* Larger stars */
    margin-top: -1rem;
  }

  .testimonial-text {
    font-size: 16px; /* Better readability */
    line-height: 1.5;
  }

  .testimonial-footer {
    bottom: 1rem;
  }

  .author-name {
    font-size: 16px;
  }

  .author-title {
    font-size: 14px;
  }

  .avatar {
    width: 50px;
    height: 50px;
  }

  .testimonial-scroll-hint {
    display: none; /* Hide hint on tablet since no scroll needed */
  }

  /* ========================================
     COMPARISON SECTION – TABLET (768px+)
     ======================================== */
  #fitzy-comparison {
    padding: 3rem 2rem;
    /* overflow: hidden;
    z-index: 5; */
    overflow: visible !important;
    z-index: 10;
  }

  /* Background Waves – Full width, no overflow */
  .comp-bg-yellow-wrapper,
  .comp-bg-red-wrapper {
    width: 150%;
    left: 0;
    transform: none;
    height: auto;
  }

  .comp-bg-yellow-wrapper {
    top: 0px;
    height: 780px;
    z-index: -2;
    width: auto;
  }

  .comp-bg-red-wrapper {
    top: 0px;
    height: 680px;
    z-index: -1;
    width: auto;
  }

  .comp-bg-yellow,
  .comp-bg-red {
    width: 110%;
    height: 110%;
    object-fit: cover;
  }

  /* Content – Side-by-side layout */
  .fitzy-comparison-content {
    max-width: 1100px;
    margin: 0 auto;
  }

  .comp-part-a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 2rem 0;
    flex-wrap: nowrap;
  }

  .fitzy-guy {
    flex: 0 1 auto;
    order: 2;
    width: auto;
    max-width: 350px;
    margin: 0;
    margin-bottom: 4rem;
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }

  .comp-text {
    flex: 1 1 300px; /* ← Minimum 300px, then shrink */
    max-width: 700px;
    order: 1;
    width: 65%;
    text-align: right;
    margin: 0;
  }

  .comp-headline {
    font-size: 42px;
    line-height: 1.3;
    color: var(--fitzy-yellow);
    margin-bottom: 1rem;
  }

  .comp-paragraph {
    font-size: 18px;
    line-height: 1.8;
    color: white;
    margin-bottom: 1.5rem;
  }

  #hide-btn {
    background-color: var(--fitzy-red);
    color: white;
    font-size: 24px;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    display: none;
  }

  /* ========================================
     COMPARISON FOLLOW-UP – TABLET
     ======================================== */

  .comparison-followup {
    background-color: transparent;
    z-index: 1;
    margin-bottom: 3rem;
  }

  /* ========================================
     ABOUT BG – FULL CONTROL (TABLET+)
     ======================================== */
  .about-us {
    overflow: visible !important; /* ← NO CLIPPING */
  }

  .about-bg {
    width: 120%; /* ← SIZE: 120% → 200% */
    left: 50%; /* ← POSITION: center */
    transform: translateX(-50%); /* ← CENTER IT */
    top: -5rem; /* ← MOVE UP/DOWN */
    height: 600px; /* ← HEIGHT: 400px → 800px */
    object-fit: cover;
    z-index: -1;
  }

  .about-paragraph {
    font-size: 20px;
  }

  /* ========================================
     JOIN US – TABLET (768px+) – FIXED ORDER & SIZES
     ======================================== */

  #join-us {
    max-height: 980px;
  }

  .join-logo {
    width: 13rem;
    height: auto;
  }

  .join-text {
    font-size: 24px;
  }

  .join-form {
    width: 100%;
    border-radius: 10%;
    order: 1;
  }

  .join-image img {
    width: 600px;
    height: auto;
    order: 2;
  }

  .join-bottom-stack {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    margin-top: 3rem;
  }

  .join-strip {
    top: -5rem;
  }
}

/* ========================================
   DESKTOP POLISH (1024px+)
   ======================================== */
@media (min-width: 1024px) {
  /* Global */
  .container {
    max-width: 1300px;
  }

  /* Hero */
  .hero-subheading {
    font-size: 48px;
  }
  .uvp-pill {
    font-size: 22px;
    padding: 2rem 3rem;
  }
  .fitzy-btn {
    font-size: 26px;
    padding: 1rem 3rem;
  }

  /* Testimonials */
  .testimonial-title-img {
    width: 800px;
  }
  .testimonial-text {
    font-size: 18px;
  }
  .author-name {
    font-size: 18px;
  }

  /* Comparison */
  .comp-headline {
    font-size: 52px;
  }
  .comp-paragraph {
    font-size: 20px;
  }
  .fitzy-guy {
    max-width: 500px;
  }

  /* About */
  .about-title {
    font-size: 60px;
  }
  .about-subtitle {
    font-size: 40px;
  }
  .about-paragraph {
    font-size: 20px;
  }

  /* Join Us */
  .join-title-img {
    max-width: 600px;
  }
  .join-text {
    font-size: 24px;
  }
  .join-form {
    max-width: 600px;
    padding: 4rem;
  }
  .join-image img {
    max-width: 550px;
  }
}

/* ========================================
   HERO – DESKTOP (1024px+)
   ======================================== */
@media (min-width: 1024px) {
  /* ========================================
     NAVBAR – HORIZONTAL (1024px+)
     ======================================== */
  .navbar-collapse {
    flex-direction: row !important;
    align-items: center;
  }

  .navbar-collapse .d-flex {
    flex-direction: row !important;
    gap: 2rem;
    align-items: center;
  }

  .navbar-collapse .d-flex .nav-link,
  .navbar-collapse .d-flex .nav-cta {
    width: auto !important;
    margin-bottom: 0 !important;
    padding: 0.5rem 1.2rem !important;
    font-size: 20px;
  }

  .navbar-collapse .d-flex .nav-cta {
    background-color: var(--fitzy-yellow) !important;
    color: var(--fitzy-purple) !important;
    margin-right: 0 !important;
  }

  .nav-item-align {
    height: auto;
    padding: 0;
  }

  .nav-cta {
    display: inline-block !important;
    padding: 0.5rem 1.6rem !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #hero {
    padding: 5rem 3rem;
  }

  .fitzy-logo {
    margin-top: 6rem;
    position: fixed;
  }

  .logo-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .hero-title {
    max-width: 1000px;
    margin: 3rem auto 1rem;
  }

  .hero-subheading {
    font-size: 52px;
    margin: 2rem 0;
  }

  .uvp-pill {
    padding: 2.5rem 3.5rem;
    gap: 2.5rem;
    font-size: 24px;
    max-width: 1100px;
  }

  .uvp-item img {
    width: 130px;
  }

  .fitzy-btn {
    font-size: 28px;
    padding: 1.2rem 3.5rem;
  }

  /* Background waves – full bleed */
  .hero-yellow {
    top: 8rem;
    height: 950px;
    width: auto;
  }

  .hero-purple {
    margin-top: -2rem;
    height: 350px;
  }

  .fitzy-guy {
    margin-top: -3rem;
  }

  @media (min-width: 1024px) {
    /* GLOBAL — CONTAINER */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    /* HERO */
    .hero-title {
      max-width: 900px;
    }
    .hero-subheading {
      font-size: 48px;
    }
    .uvp-pill {
      max-width: 1000px;
      padding: 2rem 3rem;
    }

    /* TESTIMONIALS */
    .testimonial-title-img {
      width: 700px;
    }
    .testimonial-card {
      padding: 3rem;
    }

    /* COMPARISON */
    .fitzy-guy {
      max-width: 480px;
    }
    .comp-headline {
      font-size: 50px;
    }
    .comp-paragraph {
      font-size: 20px;
    }

    /* JOIN US */
    .join-form {
      max-width: 550px;
      padding: 3.5rem;
    }
    .join-image img {
      max-width: 500px;
    }

    /* LOGO & NAVBAR */
    .logo-wrapper {
      left: 50%;
      transform: translateX(-50%);
    }
    .navbar-collapse .d-flex {
      gap: 1.5rem;
    }
  }

  /* FLAVORS – CENTER GRID */
  .flavor-grid {
    justify-content: center;
    gap: 3rem;
  }
  .flavor-card {
    flex: 0 0 calc(33.333% - 2rem);
    max-width: 320px;
  }

  /* ABOUT – WAVY BG */
  .about-bg {
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
    top: -5rem;
    height: 700px;
  }

  .about-image {
    width: auto;
    height: 200%;
    margin-bottom: 5rem;
  }

  /* JOIN – GIRL SMALLER */
  .join-image img {
    max-width: 320px;
  }

  .join-text {
    font-size: 34px;
  }

  /* JOIN – STRIP POSITION */
  .join-strip {
    width: 130%;
    left: 0%;
    margin-top: -9rem;
    height: auto;
  }

  .footer {
    margin-top: 0rem;
    /* height: 350%; */
    padding-top: 5rem;
    width: auto;
    background-color: var(--fitzy-gray);
  }
}