/* ================================
   HOME HERO – isolated overrides
   File: public/assets/css/home-page-hero.css
   ================================ */

#sliderContainer {
  position: relative;
}

#sliderContainer,
section.home-hero,
section.home-hero .slideshow-container,
section.home-hero .mySlides {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

section.home-hero .mySlides img.image {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Hero starts immediately after header */
#sliderContainer,
section.home-hero {
  margin: 0 !important;
  padding: 0 !important;
}

/* Image wrapper */
section.home-hero .slideshow-container {
  width: 100% !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}


/* Slides area */
section.home-hero .mySlides {
  width: 100% !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;

  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Image */
section.home-hero .mySlides img.image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
}

/* Overlay */
section.home-hero .overlay1 {
  position: absolute !important;
  inset: 0 !important;
}

/* Content card (mobile container) */
section.home-hero .heading {
  position: relative !important;
  z-index: 3 !important;

  flex: 0 0 100% !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  padding: 22px 18px 16px !important;
  border-radius: 22px !important;
  background: rgba(60, 70, 72, 0.72) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16) !important;
}

section.home-hero .heading .hero-text-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

section.home-hero .heading h1 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}

section.home-hero .heading p {
  line-height: 1.45 !important;
  opacity: 0.95 !important;
}





/* Mobile CTA wrapper: keep on one line */
section.home-hero .heading :is(.hero-cta-wrap,
  .hero-cta,
  .hero-buttons,
  .cta-wrap,
  .cta-buttons,
  .home-hero-cta-wrap,
  .home-hero-cta,
  .button-row) {
  flex-wrap: nowrap !important;
}

/* } */

/* =====================================================
   HERO HEADLINE HIGHLIGHT (ALL SIZES)
   ===================================================== */
.home-main-heading .hero-line2 .highlight {
  color: #f4b23f !important;
}

/* =====================================================
   HERO CTA BUTTONS — PERFECT ALIGNMENT (ALL SIZES)
   ===================================================== */
section.home-hero .heading :is(.hero-cta-wrap,
  .hero-cta,
  .hero-buttons,
  .cta-wrap,
  .cta-buttons,
  .home-hero-cta-wrap,
  .home-hero-cta,
  .button-row) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 14px !important;
}

section.home-hero .heading :is(.hero-cta-wrap,
  .hero-cta,
  .hero-buttons,
  .cta-wrap,
  .cta-buttons,
  .home-hero-cta-wrap,
  .home-hero-cta,
  .button-row) :is(a, button, .btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 48px !important;
  min-height: 48px !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  vertical-align: middle !important;
  margin: 0 !important;
}


@media (width: 768px) {


  /* Ensure the hero section itself has no side padding */
  #sliderContainer>section.home-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Heading wrapper must span full width (prevents centered/narrow card) */
  #sliderContainer>section.home-hero>div.heading {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 1) Lock hero image frame */
  #sliderContainer>section.home-hero>div.slideshow-container {
    height: 640px !important;
    min-height: 640px !important;
    max-height: 640px !important;

    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    display: block !important;
    background: transparent !important;
  }

  /* 2) Slide must fill the frame */
  #sliderContainer>section.home-hero>div.slideshow-container>div.mySlides {
    height: 640px !important;
    min-height: 640px !important;
    max-height: 640px !important;

    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    display: block !important;
    background: transparent !important;
  }

  /* 3) Overlay constrained */
  #sliderContainer>section.home-hero>div.slideshow-container>div.mySlides>div.overlay1 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 4) Image crop (KEEP your working values) */
  #sliderContainer>section.home-hero>div.slideshow-container>div.mySlides>img.image {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    display: block !important;

    object-fit: cover !important;
    object-position: 85% 32% !important;
  }

  /* 5) Heading wrapper must NOT create any slab */
  #sliderContainer>section.home-hero>div.heading {
    margin-top: 14px !important;
    padding-top: 0 !important;
  }

  /* 6) HERO CARD: force true full width (no max-width caps) */
  #sliderContainer section.home-hero .heading .hero-text-wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* PUSH UP slightly (768px only) */
    position: relative !important;
    top: -35px !important;

    /* KILL the white gap under the card (styles.css adds ~40px) */
    margin-bottom: 0 !important;

    background: rgba(22, 28, 30, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 24px !important;

    padding: 24px 24px 18px !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 18px 26px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }



  /* 7) CTA row should stretch so button becomes the wide pill */
  #sliderContainer section.home-hero .heading :is(.hero-cta-row, .hero-cta-wrap, .button-row) {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
  }

  #sliderContainer section.home-hero .heading a.home-hero-cta {
    width: 100% !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    border-radius: 18px !important;
  }

}


/* =====================================================
  /* =====================================================
   TABLET (768px–1024px)
   HERO TYPOGRAPHY — READABLE & CONFIDENT
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Main hero headline */
  #sliderContainer .heading .home-main-heading {
    font-size: 42px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.3px !important;
  }

  /* “All profiles and photos are verified” */
  #sliderContainer .heading .home-main-verified {
    font-size: 20px !important;
    line-height: 1.5 !important;
    opacity: 0.96 !important;
    margin-top: 14px !important;
  }

  /* Trust/support line under CTA */
  #sliderContainer .heading .home-main-subheading,
  #sliderContainer section.home-hero .hero-trust,
  #sliderContainer section.home-hero .hero-trust li {
    font-size: 16.5px !important;
    line-height: 1.5 !important;
    opacity: 0.9 !important;
  }

}


/* =====================================================
    TABLET (768px–1024px)
    HERO CTA — Exceptional (premium + clear hierarchy)
    ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Stack already handled — keep spacing clean */
  #sliderContainer section.home-hero .heading .hero-cta-row,
  #sliderContainer section.home-hero .heading :is(.hero-cta-wrap, .button-row) {
    gap: 14px !important;
    margin-top: 22px !important;
  }

  /* PRIMARY: Join Free Today */
  #sliderContainer section.home-hero .heading a.home-hero-cta {
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 16px !important;

    font-size: 19px !important;
    line-height: 1 !important;

    background-color: #1e5a32 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;

    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;

    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    display: grid !important;
    place-items: center !important;

    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease !important;
  }

  #sliderContainer section.home-hero .heading a.home-hero-cta:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.40),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }

  #sliderContainer section.home-hero .heading a.home-hero-cta:active {
    transform: translateY(0) !important;
    filter: brightness(1.02) !important;
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.34),
      inset 0 2px 0 rgba(0, 0, 0, 0.18) !important;
  }

  /* SECONDARY: Terms & Conditions — quiet, supportive */
  #sliderContainer section.home-hero .heading a.home-hero-secondary {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 14px !important;

    font-size: 15.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow: none !important;

    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;

    display: grid !important;
    place-items: center !important;

    transition: background 140ms ease !important;
  }

  #sliderContainer section.home-hero .heading a.home-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.11) !important;
  }

  #sliderContainer section.home-hero .heading a.home-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.13) !important;
    transform: translateY(-1px) !important;
  }

  #sliderContainer section.home-hero .heading a.home-hero-secondary:active {
    transform: translateY(0) !important;
    background: rgba(255, 255, 255, 0.11) !important;
  }

}

/* =====================================================
    TABLET (768px–1024px)
    FORM CTA — align with hero CTA
    ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  #btn-to-join.button {
    height: 56px !important;
    min-height: 56px !important;
    line-height: 1 !important;
    border-radius: 16px !important;
    font-size: 19px !important;
    font-weight: 800 !important;
  }

}

/* =====================================================
    GLOBAL: REMOVE HERO "Terms & Conditions" BUTTON
    (Terms acknowledged under Create My Profile instead)
    ===================================================== */
#sliderContainer section.home-hero .heading a.home-hero-secondary {
  display: none !important;
}

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 1: Calm, low-friction form card styling
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* --- FORM WRAPPER CARD (safe: targets common wrappers) --- */
  #page-home section.home-hero form,
  #page-home section.home-hero .hero-form,
  #page-home section.home-hero .signup-form,
  #page-home section.home-hero .register-form,
  #page-home section.home-hero .home-hero-form,
  #page-home section.home-hero .form-wrap,
  #page-home section.home-hero .form-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    background: rgba(22, 28, 30, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;

    padding: 14px 14px 12px !important;
    margin: 12px 0 0 !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 14px 22px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  /* If the form is already inside a card, avoid double-padding */
  #page-home section.home-hero form form {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* --- FIELD SPACING: reduce visual clutter --- */
  #page-home section.home-hero form .form-group,
  #page-home section.home-hero form .mb-3,
  #page-home section.home-hero form .mb-2,
  #page-home section.home-hero form .row,
  #page-home section.home-hero form .col,
  #page-home section.home-hero form .col-12 {
    margin-bottom: 10px !important;
  }

  /* --- LABELS: calm + readable --- */
  #page-home section.home-hero form label {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
  }

  /* --- INPUTS/SELECTS: modern, low-friction --- */
  #page-home section.home-hero form input[type="text"],
  #page-home section.home-hero form input[type="email"],
  #page-home section.home-hero form input[type="password"],
  #page-home section.home-hero form input[type="tel"],
  #page-home section.home-hero form input[type="number"],
  #page-home section.home-hero form input[type="date"],
  #page-home section.home-hero form select,
  #page-home section.home-hero form textarea {
    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 11px 12px !important;
    border-radius: 12px !important;

    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 16px !important;
    /* prevents iOS zoom */
    line-height: 1.2 !important;

    outline: none !important;
    box-shadow: none !important;

    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Textareas: allow height */
  #page-home section.home-hero form textarea {
    height: auto !important;
    min-height: 88px !important;
    resize: vertical !important;
  }

  /* Placeholder: softer */
  #page-home section.home-hero form input::placeholder,
  #page-home section.home-hero form textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
  }

  /* Focus: calm highlight */
  #page-home section.home-hero form input:focus,
  #page-home section.home-hero form select:focus,
  #page-home section.home-hero form textarea:focus {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
  }

  /* --- RADIO/CHECKBOX rows: tighten + align nicely --- */
  #page-home section.home-hero form .form-check,
  #page-home section.home-hero form .radio,
  #page-home section.home-hero form .checkbox {
    margin: 6px 0 !important;
  }

  #page-home section.home-hero form input[type="radio"],
  #page-home section.home-hero form input[type="checkbox"] {
    transform: translateY(1px) !important;
  }

  /* --- CTA BUTTON inside form: full width + calm --- */
  #page-home section.home-hero form button,
  #page-home section.home-hero form .btn,
  #page-home section.home-hero form input[type="submit"] {
    width: 100% !important;

    height: 46px !important;
    border-radius: 14px !important;

    margin-top: 4px !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;

    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.28) !important;
  }

  /* --- Tiny helper text (terms, hints): quieter --- */
  #page-home section.home-hero form small,
  #page-home section.home-hero form .form-text,
  #page-home section.home-hero form .help-text {
    display: block !important;
    margin-top: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.70) !important;
  }

  /* Remove any harsh dividers */
  #page-home section.home-hero form hr {
    border-color: rgba(255, 255, 255, 0.12) !important;
    opacity: 1 !important;
  }
}

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 2A: Option pills (radio groups) — unified + pro selected state
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* -----------------------------------------------------
     1) Base: normalize common radio wrappers
     ----------------------------------------------------- */
  #page-home section.home-hero form .form-check,
  #page-home section.home-hero form .radio,
  #page-home section.home-hero form .checkbox {
    margin: 8px 0 !important;
    padding: 0 !important;
  }

  /* Ensure radio inputs never push layout around */
  #page-home section.home-hero form input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* -----------------------------------------------------
     2) The “pill” itself:
        Support BOTH patterns:
        A) <input ...> <label ...>
        B) <label> <input ...> Text </label>
        C) <label class="form-check-label">...</label>
     ----------------------------------------------------- */

  /* Pattern A: input + label */
  #page-home section.home-hero form input[type="radio"]+label,
  #page-home section.home-hero form .form-check input[type="radio"]+.form-check-label,
  #page-home section.home-hero form .form-check input[type="radio"]+label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-height: 46px !important;

    padding: 12px 12px !important;

    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    cursor: pointer !important;
    user-select: none !important;

    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
  }

  /* Pattern B: label contains input */
  #page-home section.home-hero form label:has(> input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-height: 46px !important;

    padding: 12px 12px !important;

    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;

    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    cursor: pointer !important;
    user-select: none !important;

    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
  }

  /* Hover/press feedback (subtle, calm) */
  #page-home section.home-hero form input[type="radio"]+label:active,
  #page-home section.home-hero form .form-check input[type="radio"]+.form-check-label:active,
  #page-home section.home-hero form label:has(> input[type="radio"]):active {
    transform: translateY(1px) !important;
  }

  /* -----------------------------------------------------
     3) Radio dot: make it look “designed”
     ----------------------------------------------------- */

  /* If the radio is inside the pill (label contains input) */
  #page-home section.home-hero form label:has(> input[type="radio"])>input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    border: 2px solid rgba(125, 231, 168, 0.85) !important;
    background: transparent !important;

    display: inline-grid !important;
    place-content: center !important;

    transform: translateY(0px) !important;
  }

  #page-home section.home-hero form label:has(> input[type="radio"])>input[type="radio"]::before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;

    transform: scale(0) !important;
    transition: transform 120ms ease !important;

    background: rgba(125, 231, 168, 0.95) !important;
  }

  #page-home section.home-hero form label:has(> input[type="radio"])>input[type="radio"]:checked::before {
    transform: scale(1) !important;
  }

  /* If the radio is outside the pill (input + label), keep the input small/consistent */
  #page-home section.home-hero form input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
  }

  /* -----------------------------------------------------
     4) Selected state: obvious + professional
     ----------------------------------------------------- */

  /* Pattern A: input checked + label */
  #page-home section.home-hero form input[type="radio"]:checked+label,
  #page-home section.home-hero form .form-check input[type="radio"]:checked+.form-check-label,
  #page-home section.home-hero form .form-check input[type="radio"]:checked+label {
    border-color: rgba(125, 231, 168, 0.55) !important;
    background: rgba(125, 231, 168, 0.10) !important;
    box-shadow: 0 0 0 3px rgba(125, 231, 168, 0.14) !important;
  }

  /* Pattern B: label contains checked input (Chrome/Edge support :has) */
  #page-home section.home-hero form label:has(> input[type="radio"]:checked) {
    border-color: rgba(125, 231, 168, 0.55) !important;
    background: rgba(125, 231, 168, 0.10) !important;
    box-shadow: 0 0 0 3px rgba(125, 231, 168, 0.14) !important;
  }

  /* -----------------------------------------------------
     5) Tighten the two-column groups: consistent spacing
     ----------------------------------------------------- */
  #page-home section.home-hero form .row,
  #page-home section.home-hero form .form-row {
    row-gap: 10px !important;
  }

  #page-home section.home-hero form .col,
  #page-home section.home-hero form [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* -----------------------------------------------------
     6) If any option pills currently have their own heavy styles,
        this forces them to match our pill system (safe scope).
     ----------------------------------------------------- */
  #page-home section.home-hero form .option,
  #page-home section.home-hero form .option-card,
  #page-home section.home-hero form .radio-option,
  #page-home section.home-hero form .gender-option,
  #page-home section.home-hero form .lookingfor-option {
    border-radius: 14px !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }
}

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 4B: Collapse input-with-icon into ONE clean field
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* 1) Make the wrapper the ONLY field */
  #homeSignup .input-with-icon {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    height: 48px !important;
    padding: 0 14px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.06) !important;

    box-shadow: none !important;
  }

  /* 2) Kill ALL visual styling on the input itself */
  #homeSignup .input-with-icon .login-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;

    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* 3) Icon: float, no box, lighter weight */
  #homeSignup .input-with-icon>i {
    font-size: 18px !important;
    opacity: 0.65 !important;
    flex: 0 0 auto !important;
  }

  /* 4) Focus state on the wrapper (not the input) */
  #homeSignup .input-with-icon:focus-within {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
  }

  /* 5) Placeholder softer */
  #homeSignup .input-with-icon .login-input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
  }
}

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 4C: FORCE remove inner input box (final override)
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* Kill the exact rule coming from styles.css */
  #homeSignup .input-with-icon .login-input,
  .home-signup-section .input-with-icon .login-input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 5C: FIX invisible text + safe visual polish
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* Wrapper stays clean but visible on white background */
  #homeSignup .input-with-icon,
  .home-signup-section .input-with-icon {
    height: 46px !important;
    padding: 0 12px !important;
    gap: 10px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(15, 23, 42, 0.14) !important;
    background: #ffffff !important;
  }

  /* INPUT TEXT — MUST BE DARK */
  #homeSignup .input-with-icon .login-input,
  .home-signup-section .input-with-icon .login-input {
    height: 46px !important;
    line-height: 46px !important;

    color: #0f172a !important;
    /* FIX */
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;

    font-size: 16px !important;
  }

  /* Placeholder — visible but calm */
  #homeSignup .input-with-icon .login-input::placeholder,
  .home-signup-section .input-with-icon .login-input::placeholder {
    color: rgba(15, 23, 42, 0.55) !important;
  }

  /* Icons — visible, not dominant */
  #homeSignup .input-with-icon>i,
  .home-signup-section .input-with-icon>i {
    color: rgba(15, 23, 42, 0.55) !important;
    opacity: 1 !important;
    font-size: 17px !important;
  }

  /* Focus — subtle, accessible */
  #homeSignup .input-with-icon:focus-within,
  .home-signup-section .input-with-icon:focus-within {
    border-color: rgba(15, 23, 42, 0.35) !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
  }
}

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 6B: FORCE placeholder + input text visibility (white form theme)
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* Force readable text inside these fields */
  #homeSignup .input-with-icon .login-input,
  .home-signup-section .input-with-icon .login-input {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    /* iOS/Chrome autofill edge cases */
    caret-color: #0f172a !important;
  }

  #homeSignup .input-with-icon .login-input::placeholder,
  .home-signup-section .input-with-icon .login-input::placeholder {
    color: rgba(15, 23, 42, 0.60) !important;
    opacity: 1 !important;
    /* some browsers reduce placeholder opacity */
  }

  /* Fix icon overlap safely: pad the wrapper, not the text */
  #homeSignup .input-with-icon,
  .home-signup-section .input-with-icon {
    padding-left: 44px !important;
    /* reserves space for icon */
    position: relative !important;
  }

  #homeSignup .input-with-icon>i,
  .home-signup-section .input-with-icon>i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    text-align: center !important;
  }
}

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 7: Add vertical gap before primary CTA
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* Add breathing room between last input and CTA */
  .home-signup-section .styled-button,
  #homeSignup .styled-button,
  .home-signup-section fieldset.styled-button,
  #homeSignup fieldset.styled-button {
    margin-top: 14px !important;
  }
}

/* 30/12/2025-2 */

/* =====================================================
   Netthub — HERO SIGNUP FORM (Mobile-first, 360px)
   Step 8B: FORCE CTA height (Create My Profile)
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* ONLY target the Create My Profile button */
  #homeSignup button#btn-to-join {
    min-height: 56px !important;
    /* CHANGE THIS (52–64) */
    padding: 14px 16px !important;
    /* CHANGE THIS to fine-tune */
    line-height: 1.2 !important;
  }
}


/* =====================================================
   Netthub — HERO → SIGNUP HAND-OFF (FINAL)
   Mobile-first (≤380px)
   Step 9D: Divider attached to .home-signup-inner
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  /* Create visual separation INSIDE the signup card */
  .home-signup-section .home-signup-inner {
    position: relative !important;
    padding-top: 28px !important;
    /* space for divider */
  }

  /* Visible divider bar */
  .home-signup-section .home-signup-inner::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 72px !important;
    height: 4px !important;

    background: rgba(17, 24, 39, 0.25) !important;
    border-radius: 4px !important;
  }
}

/* =====================================================
   Netthub — HERO → SIGNUP HAND-OFF
   Mobile-first (≤380px)
   Step 9E: Stronger divider (still premium)
   File: public/assets/css/home-page-hero.css
   ===================================================== */

@media (max-width: 380px) {

  .home-signup-section .home-signup-inner::before {
    width: 200px !important;
    height: 6px !important;
    background: rgba(17, 24, 39, 0.18) !important;
    border-radius: 999px !important;
  }
}


/* 19/01/2026 */
/* start of the 1280px x 800 */

/* =====================================================
   DESKTOP AUTHORITY — ≥1200px (1280×800)
   HERO — TRUE FULL-BLEED GLASS CARD
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 1200px) {

  /* HERO IMAGE FRAME */
  #sliderContainer section.home-hero .slideshow-container,
  #sliderContainer section.home-hero .mySlides {
    height: 800px !important;
    min-height: 800px !important;
    max-height: 800px !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  #sliderContainer section.home-hero .mySlides img.image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* HERO STACK (PERMANENT) — place card over image WITHOUT negative margins */
  #sliderContainer>section.home-hero {
    display: grid !important;
    grid-template-rows: 800px auto !important;
    /* image row + overlay row */
    grid-template-columns: 1fr !important;
  }


  #sliderContainer>section.home-hero>div.slideshow-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  #sliderContainer>section.home-hero>div.heading {
    grid-row: 1 !important;
    grid-column: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: 0 !important;
    /* NO hacks */
    padding-left: 0 !important;
    padding-right: 0 !important;

    align-self: flex-end !important;
    /* anchor to bottom of image */
    justify-self: stretch !important;

    padding-bottom: 0 !important;
    /* CHANGE THIS to push UP (40–90) */
  }

  /* HERO GLASS CARD — ACTUAL WIDENING (edge-to-edge look) */
  #sliderContainer section.home-hero .heading .hero-text-wrap {
    width: 100% !important;
    max-width: none !important;

    /* KEY: bleed past container */
    margin-left: -24px !important;
    margin-right: -24px !important;

    padding: 28px 48px 22px !important;

    background: rgba(22, 28, 30, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 24px !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 18px 26px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

}


/* End of the 1280px x 800 */



/* 05/01/2025-2 */
/* =====================================================
   LARGE MOBILE (600px–767px) — Taller image + full-width hero card
   ADD AT BOTTOM of home-page-hero.css
   ===================================================== */
@media (min-width: 600px) and (max-width: 767px) {

  /* Taller hero image */
  #sliderContainer section.home-hero .slideshow-container,
  #sliderContainer section.home-hero .mySlides {
    height: 580px !important;
    min-height: 580px !important;
    max-height: 580px !important;
  }

  /* Override existing heading constraints + remove padding + prevent clipping */
  #sliderContainer>section.home-hero>div.heading {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;

    /* allow the card to extend to image edges */
    overflow: visible !important;
  }

  /* Widen the hero card + lift it up */
  #sliderContainer>section.home-hero>div.heading>div.hero-text-wrap {
    width: 100% !important;
    max-width: none !important;

    /* edge alignment */
    margin-left: -2px !important;
    margin-right: -20px !important;

    /* LIFT UP (this is the correct control) */
    margin-top: -16px !important;

    /* inner comfort padding */
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

}

/* =====================================================
   LARGE MOBILE — 736px ONLY (surgical lock)
   Goal:
   - Finalise hero image frame height
   - Nudge hero text card vertically
   - WITHOUT affecting 360px or 768px+
   ===================================================== */
@media (min-width: 736px) and (max-width: 736px) {

  /* 1) LOCK hero image frame height (crop area) */
  #sliderContainer section.home-hero .slideshow-container,
  #sliderContainer section.home-hero .mySlides {
    height: 520px !important;
    /* CHANGE THIS if needed (eg 500–560) */
    max-height: 520px !important;
    overflow: hidden !important;
  }

  /* Ensure the image fills the locked frame cleanly */
  #sliderContainer section.home-hero .mySlides img,
  #sliderContainer section.home-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 2) NUDGE hero text card vertically WITHOUT pushing layout */
  #sliderContainer section.home-hero .heading .hero-text-wrap {
    transform: translateY(-14px) !important;
    /* CHANGE THIS: -6 to -24 */
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

}


/* 09/01/2025 - 1 */


/* =====================================================
   DESKTOP AUTHORITY — ≥1200px (1280×800)
   SINGLE SOURCE OF TRUTH (DESKTOP)
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 1200px) {

  /* -----------------------------
     HERO IMAGE FRAME (DESKTOP)
     ----------------------------- */
  #sliderContainer section.home-hero .slideshow-container,
  #sliderContainer section.home-hero .mySlides {
    height: 800px !important;
    min-height: 800px !important;
    max-height: 800px !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  #sliderContainer section.home-hero .mySlides img.image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 75% 35% !important;
  }

  /* -----------------------------
     HERO STACK (PERMANENT)
     Image + overlay card
     ----------------------------- */
  #sliderContainer>section.home-hero {
    display: grid !important;
    grid-template-rows: 800px auto !important;
    grid-template-columns: 1fr !important;
  }

  #sliderContainer>section.home-hero>div.slideshow-container {
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  /* -----------------------------
     HERO CARD POSITION (PERMANENT CONTROL)
     This is the ONLY vertical control you change.
     Less negative = DOWN. More negative = UP.
     ----------------------------- */
  #sliderContainer>section.home-hero>div.heading {
    grid-row: 2 !important;
    grid-column: 1 !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: -165px !important;
    /* CONTROL: -40 to -120 */
    padding-left: 0 !important;
    padding-right: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    justify-self: stretch !important;
    box-sizing: border-box !important;
  }

  /* -----------------------------
     HERO GLASS CARD (WIDTH)
     ----------------------------- */
  #sliderContainer section.home-hero .heading .hero-text-wrap {
    width: 100% !important;
    max-width: none !important;

    margin-left: -64px !important;
    margin-right: -24px !important;

    padding: 28px 48px 22px !important;

    background: rgba(22, 28, 30, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 24px !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 18px 26px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  /* -----------------------------
     DESKTOP FINAL CTA (MARKETING)
     ----------------------------- */
  section.home-marketing .home-final-cta .home-hero-cta {
    font-size: 19px !important;
    height: 58px !important;
    min-height: 58px !important;
    line-height: 1 !important;
  }

}

/* 10/01/2025 */

@media (max-width: 380px) {

  /* Hero subline / supporting text (360px only) */
  #sliderContainer section.home-hero p {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }

}


/* CTA helper line (small text under button, if present) */
#sliderContainer section.home-hero .cta-helper,
#sliderContainer section.home-hero small {
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* } */


/* =====================================================
   STEP 7C — FORCE hero subheading paragraph size (MOBILE)
   Absolute final override
   ===================================================== */
@media (max-width: 380px) {

  section.home-hero .hero-text-wrap p.home-main-subheading {
    font-size: 17px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  /* =====================================================
   STEP 10A — HERO 360px FINAL LAYOUT OVERRIDE (SINGLE AUTHORITY)
   Goal: clean alignment + predictable spacing + correct type sizes
   ===================================================== */
  @media (max-width: 380px) {

    /* =====================================================
   A) HERO SLIDER (image + frame) — remove white strip
   ===================================================== */
    html,
    body {
      overflow-x: hidden !important;
    }

    #sliderContainer,
    #sliderContainer section.home-hero,
    #sliderContainer section.home-hero .slideshow-container,
    #sliderContainer section.home-hero .mySlides {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    #sliderContainer section.home-hero .mySlides img.image {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center 60% !important;
    }

    /* =====================================================
   B) HERO TEXT CARD (on slider)
   ===================================================== */
    #sliderContainer section.home-hero .heading {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-top: -45px !important;
      /* keep your working lift */
    }

    #sliderContainer section.home-hero .heading .hero-text-wrap {
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
      box-sizing: border-box !important;
      text-align: left !important;
    }

    #sliderContainer section.home-hero .heading .hero-text-wrap * {
      text-align: left !important;
    }

    /* Typography */
    #sliderContainer section.home-hero .heading h1 {
      margin: 0 0 6px 0 !important;
    }

    #sliderContainer section.home-hero h2.home-main-verified {
      font-size: 20px !important;
      line-height: 1.25 !important;
      font-weight: 600 !important;
      margin: 0 0 6px 0 !important;
      opacity: 0.92 !important;
    }

    #sliderContainer section.home-hero p.home-main-subheading {
      font-size: 17px !important;
      line-height: 1.55 !important;
      margin: 0 0 12px 0 !important;
      opacity: 0.92 !important;
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    #sliderContainer section.home-hero .heading p {
      font-size: 17px !important;
      line-height: 1.55 !important;
      margin-top: 0 !important;
      margin-bottom: 12px !important;
    }

    /* =====================================================
   FINAL AUTHORITY — REMOVE SIGNUP INNER SIDE INSET (360px)
   Allows Email + Relation box to share SAME left edge
   File: public/assets/css/home-page-hero.css
   ===================================================== */
    @media (max-width: 380px) {

      #homeSignup .home-signup-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
      }

    }


    #homeSignup .radio-heading {
      padding-left: 24px !important;
      box-sizing: border-box !important;
    }

    /* ======================== */

    /* =====================================================
   STEP 10A-7 — Gender group: restore safe centered frame (360px)
   ===================================================== */
    #homeSignup .radio-container {
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;

      gap: 12px !important;

      /* SAFE frame: equal inset both sides (prevents right-side clipping) */
      padding-left: 16px !important;
      padding-right: 16px !important;

      box-sizing: border-box !important;
    }



    /* =====================================================
   STEP 10A-2 — Center gender cards INSIDE each column
   ===================================================== */
    #homeSignup .radio-column {
      align-items: center !important;
      /* centers cards horizontally */
    }

    /* Ensure each gender card has the same visual width */
    #homeSignup .radio1 {
      width: 100% !important;
      max-width: 168px !important;
      /* locks visual symmetry */
      margin-left: auto !important;
      margin-right: auto !important;
    }


    /* ======================== */

    #homeSignup .radio-column {
      flex: 0 0 auto !important;
      /* stop forcing half-width */
      max-width: none !important;

      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
    }


    #homeSignup .radio1 {
      margin-left: 8px !important;
      margin-right: 8px !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
    }

    /* =====================================================

    /* no 2 */
    /* =====================================================
   STEP 10A-1 — "What kind..." INNER alignment (360px)
   Goal: make inner content obey the new outer box edges
   ===================================================== */
    #homeSignup .home-pg-relation_type * {
      box-sizing: border-box !important;
    }

    /* Question line */
    #homeSignup .home-pg-relation_type .radio-heading,
    #homeSignup .home-pg-relation_type .home-signup-title,
    #homeSignup .home-pg-relation_type h3,
    #homeSignup .home-pg-relation_type h4 {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      text-align: left !important;
    }

    /* Options wrapper (the row that contains Serious / Casual) */
    #homeSignup .home-pg-relation_type .radio-container,
    #homeSignup .home-pg-relation_type .radio-wrapper,
    #homeSignup .home-pg-relation_type .options,
    #homeSignup .home-pg-relation_type .form-check-group {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      width: 100% !important;
    }

    /* Each option line */
    #homeSignup .home-pg-relation_type .form-check,
    #homeSignup .home-pg-relation_type .form-check-label,
    #homeSignup .home-pg-relation_type label {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* =====================================================
   STEP 10A-3 — "What kind of connection" INNER centering
   Match gender boxes behaviour (360px)
   ===================================================== */

    /* Ensure inner layout behaves predictably */
    #homeSignup .home-pg-relation_type {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      /* center inner content as a group */
    }

    /* Question text */
    #homeSignup .home-pg-relation_type .radio-heading,
    #homeSignup .home-pg-relation_type h3,
    #homeSignup .home-pg-relation_type h4 {
      width: 100% !important;
      max-width: 340px !important;
      /* same visual width logic as gender */
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: left !important;
    }

    /* Options wrapper */
    #homeSignup .home-pg-relation_type .radio-container,
    #homeSignup .home-pg-relation_type .options,
    #homeSignup .home-pg-relation_type .form-check-group {
      width: 100% !important;
      max-width: 340px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Individual option rows (Serious / Casual) */
    #homeSignup .home-pg-relation_type .form-check,
    #homeSignup .home-pg-relation_type label {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* =====================================================
   FINAL AUTHORITY — PUSH SIGNUP FIELDS LEFT (360px)
   Root cause: Bootstrap .container padding inside #homeSignup
   Fix: remove container padding + keep icon-safe input spacing
   File: public/assets/css/home-page-hero.css
   ===================================================== */
    @media (max-width: 380px) {

      /* 1) Remove Bootstrap container side padding inside signup */
      #homeSignup>.container,
      #homeSignup .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
      }

      /* 2) Ensure inner wrapper does NOT re-introduce inset */
      #homeSignup .home-signup-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
      }

      /* 3) Make BOTH boxes sit on the same left edge */
      #homeSignup .home-pg-relation_type,
      #homeSignup .input-with-icon {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
      }

      /* 4) Keep icon spacing so "Your Email" never overlaps */
      #homeSignup .input-with-icon,
      .home-signup-section .input-with-icon {
        position: relative !important;
        padding-left: 44px !important;
        /* space for icon */
        padding-right: 12px !important;
      }

      #homeSignup .input-with-icon>i,
      .home-signup-section .input-with-icon>i {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 18px !important;
        text-align: center !important;
      }

      #homeSignup .input-with-icon .login-input,
      .home-signup-section .input-with-icon .login-input {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

    }


    /* Force each option row to align to the wrapper’s right edge */
    #homeSignup .home-pg-relation_type .form-check,
    #homeSignup .home-pg-relation_type label {
      width: 100% !important;
    }

    /* no 3 */


    /* =====================================================
   STEP 10A-7 — Lock gender group to SAME frame as relation box (360px)
   Goal: gender group edges match ".home-pg-relation_type" exactly
   ===================================================== */

    #homeSignup .radio-container {
      max-width: 348px !important;
      /* SAME as #homeSignup .home-pg-relation_type */
      margin-left: auto !important;
      margin-right: auto !important;

      padding-left: 0 !important;
      /* avoid extra inset that breaks edge match */
      padding-right: 0 !important;

      box-sizing: border-box !important;
    }

    #homeSignup .radio-column {
      flex: 0 0 auto !important;
      max-width: none !important;
    }

    /* 11/01/2025 No 3 */

    /* =====================================================
   FINAL AUTHORITY — Relation Type ↔ Email Vertical Alignment
   Mobile 360px ONLY
   File: home-page-hero.css
   ===================================================== */
    @media (max-width: 380px) {

      /* Relation type block */
      #homeSignup .home-pg-relation_type {
        margin-top: 12px !important;
        margin-bottom: 14px !important;
      }

      /* Email field wrapper */
      #homeSignup .input-with-icon {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
      }

    }

    /* =====================================================


    @media (max-width: 380px) {

      /* FIX: reduce vertical gap between Woman / Man (I am a) */
    #homeSignup .radio-container .form-input {
      margin-bottom: 3px !important;
    }

  }

  /* =====================================================
   HERO — Supporting Copy (Premium Mobile Typography)
   Applies to text under main headline
   File: public/assets/css/home-page-hero.css
   ===================================================== */
  @media (max-width: 380px) {

    #sliderContainer section.home-hero .heading p {
      font-size: 12.5px;
      line-height: 1.25;
      padding: 5px 12px;
      opacity: 0.82;
      text-align: left !important;
    }

  }

  /* =====================================================
/* =====================================================
   HERO — Trust Pill (Premium Editorial Style)
   File: home-page-hero.css
   SINGLE AUTHORITY — overrides hero paragraph rules
   ===================================================== */

  #sliderContainer section.home-hero p.hero-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* Typography lock */
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;

    /* Reset inherited paragraph styles */
    margin: 0 !important;
    opacity: 0.85 !important;

    color: rgba(255, 255, 255, 0.85) !important;

    padding: 6px 14px !important;
    border-radius: 999px !important;

    background: rgba(0, 0, 0, 0.35) !important;
  }

  /* =====================================================
   HERO — Supporting Assurance Copy (Mobile Lock)
   Lines:
   - "Meet genuine people across Australia"
   - "All profiles and photos are verified"
   File: public/assets/css/home-page-hero.css
   ===================================================== */

  @media (max-width: 380px) {

    #sliderContainer section.home-hero .home-main-verified,
    #sliderContainer section.home-hero .home-main-subheading {
      font-size: 14px !important;
      line-height: 1.5 !important;
      font-weight: 400 !important;

      color: rgba(255, 255, 255, 0.85) !important;

      text-align: left !important;
      margin: 0 0 6px 0 !important;
    }

  }

  /* =====================================================
   HERO — Supporting Assurance Copy (FINAL MOBILE AUTHORITY)
   Overrides all previous hero heading styles
   File: public/assets/css/home-page-hero.css
   ===================================================== */

  @media (max-width: 380px) {

    #sliderContainer section.home-hero h2.home-main-verified,
    #sliderContainer section.home-hero p.home-main-subheading {
      font-size: 15px !important;
      line-height: 1.5 !important;
      font-weight: 400 !important;

      color: rgba(255, 255, 255, 0.85) !important;

      text-align: left !important;

      margin-top: 4px !important;
      margin-bottom: 6px !important;
    }

  }

  /* =====================================================
   HERO — Correct Visual Left Alignment (360px)
   Fix inset reassurance copy
   ===================================================== */

  @media (max-width: 380px) {

    #sliderContainer section.home-hero .home-main-verified,
    #sliderContainer section.home-hero .home-main-subheading {
      padding-left: 0 !important;
    }

  }

}

/* =====================================================
   STEP 4 — HERO: REMOVE divider under subheading
   Source is elsewhere (likely styles.css), so we override here
   ===================================================== */
#sliderContainer section.home-hero p.home-main-subheading::after,
#sliderContainer section.home-hero .home-main-subheading::after {
  content: none !important;
  display: none !important;
}

/* =====================================================
   STEP 5 — HERO: tighten spacing (360px only)
   Trust line → CTA
   ===================================================== */
@media (max-width: 380px) {

  /* Reduce gap after: "All profiles and photos are verified" */
  #sliderContainer section.home-hero p.home-main-subheading {
    margin-bottom: 10px !important;
    /* was visually too large */
  }

  /* Optional: keep CTA from drifting down */
  #sliderContainer section.home-hero .hero-cta-row {
    margin-top: 10px !important;
  }
}

/* =====================================================
   STEP 6 — HERO: tighten CTA → trust checks spacing (360px)
   ===================================================== */
@media (max-width: 380px) {

  /* Reduce gap above the trust checks */
  #sliderContainer section.home-hero .hero-trust {
    margin-top: 8px !important;
    /* tighter attachment to CTA */
  }

  /* Optional: tighten line spacing inside the checks */
  #sliderContainer section.home-hero .hero-trust li {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
}

/* =====================================================
   STEP 7 — HERO: hard lock left-edge alignment (360px)
   Fix: remove any paragraph padding inside the hero card
   ===================================================== */
@media (max-width: 380px) {

  /* All paragraphs inside hero card must share the same left edge as the H2 */
  #sliderContainer section.home-hero .heading .hero-text-wrap p {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-indent: 0 !important;
  }

  /* Belt + braces: ensure headline block has no hidden left offset */
  #sliderContainer section.home-hero .heading .hero-text-wrap h2.home-main-heading {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* ******** NEW ********* */

/* =====================================================
   HERO SIGNUP — ultra-tight spacing between inputs
   Email ↔ Password (absolute minimum)
   ===================================================== */
@media (max-width: 380px) {

  /* The actual field wrapper */
  #homeSignup .input-with-icon {
    margin-bottom: 2px !important;
    /* minimum possible */
  }

  /* In case fields are inside stacked rows */
  #homeSignup .input-with-icon+.input-with-icon {
    margin-top: 0 !important;
  }
}

/* ******** NEW ********* */



/* ******** NEW ********* */

/* =====================================================
   FINAL CTA — force button to center
   Applies to Join / Create Profile button
   ===================================================== */

/* Center the button as a block */
#btn-to-join,
#homeSignup #btn-to-join,
.home-final-cta .home-hero-cta {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* If button is inside a flex parent, neutralise it */
#homeSignup fieldset.styled-button {
  display: block !important;
  text-align: center !important;
}

/*********** NEW ***********/

/* =====================================================
   FINAL AUTHORITY — FLUSH LEFT ALIGNMENT (360px)
   Relation Type + Email align to same LEFT edge
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (max-width: 380px) {

  #homeSignup .home-pg-relation_type,
  #homeSignup .input-with-icon {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }

}

/* =====================================================
   360px ONLY — Shrink "What kind of connection..." box
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (max-width: 380px) {

  /* Make the whole relation-type card narrower */
  #homeSignup .home-pg-relation_type {
    max-width: 345px !important;
    /* CHANGE THIS (320–348) */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Optional: slightly reduce inner breathing room */
  #homeSignup .home-pg-relation_type {
    padding-left: 12px !important;
    /* CHANGE THIS if needed */
    padding-right: 12px !important;
  }
}

/* =====================================================
   360px ONLY — Left-align Email field
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (max-width: 380px) {

  #homeSignup .input-with-icon {
    max-width: 340px !important;
    /* keep your chosen width */
    margin-left: 0px !important;
    /* PUSH LEFT */
    margin-right: auto !important;
  }
}

/* 12/01/2025 - starting the TABLET PORTRAIT (800×1024) */

/* =====================================================
   HERO + FORM TRANSITION — TABLET PORTRAIT (800×1024)
   Goal: clear hierarchy drop from hero to form
   Scope: tablet only
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* HERO IMAGE FRAME */
  #sliderContainer section.home-hero .slideshow-container,
  #sliderContainer section.home-hero .mySlides {
    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;
    overflow: hidden !important;
  }

  #sliderContainer section.home-hero .mySlides img.image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 85% 22% !important;
    display: block !important;
  }

  /* HERO CARD POSITION */
  #sliderContainer section.home-hero .heading {
    margin-top: -56px !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #sliderContainer section.home-hero .hero-text-wrap {
    width: calc(100% - 48px) !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px !important;
  }

  /* 👇 KEY CHANGE: PUSH FORM DOWN (HIERARCHY SEPARATION) */
  #homeSignup {
    margin-top: 56px !important;
  }

}


/* =====================================================
   HERO HEADLINE — FINAL SIZE LOCK
   736px → 1024px (tablet + large mobile)
   ===================================================== */
@media (min-width: 736px) and (max-width: 1024px) {

  #sliderContainer section.home-hero .heading h1,
  #sliderContainer section.home-hero .heading h2,
  #sliderContainer section.home-hero .home-main-heading {
    font-size: 40px !important;
    line-height: 1.5 !important;
    Font-weight: 700 letter-spacing: -0.2px !important;
  }

}


#sliderContainer section.home-hero .heading p {
  font-size: 17px !important;
  line-height: 1.6 !important;
}


/* =====================================================
   TABLET (768px–1024px)
   HERO CARD WIDTH — FINAL TABLET OVERRIDE
   Scope: tablet only
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Remove all tablet width caps from heading wrapper */
  #sliderContainer>section.home-hero>div.heading {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ACTUAL hero card — widen decisively for tablet */
  #sliderContainer section.home-hero .hero-text-wrap {
    width: calc(100% - 48px) !important;
    /* 24px gutters */
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

}

/* 13/01/2025-1 */

/* =====================================================
   TABLET (768px–1024px)
   HERO SUPPORTING TEXT — READABILITY FIX
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Supporting line: "All profiles and photos are verified" */
  #sliderContainer section.home-hero .home-main-verified,
  #sliderContainer section.home-hero p.home-main-subheading {
    font-size: 18px !important;
    /* was visually too small */
    line-height: 1.55 !important;
    opacity: 0.92 !important;
  }

  /* Trust checks row */
  #sliderContainer section.home-hero .hero-trust,
  #sliderContainer section.home-hero .hero-trust li {
    font-size: 15px !important;
    /* was too faint */
    line-height: 1.4 !important;
  }

}

/* no2 */

/* =====================================================
   TABLET (768px–1024px)
   HERO SUPPORTING TEXT — MORE OBVIOUS (FINAL AUTHORITY)
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* “All profiles and photos are verified” */
  #sliderContainer section.home-hero .heading .home-main-verified,
  #sliderContainer section.home-hero .heading p.home-main-subheading {
    font-size: 18px !important;
    /* was 18 */
    font-weight: 400 line-height: 1.55 !important;
    opacity: 0.96 !important;
    /* clearer */
    margin-top: 14px !important;
  }

  /* Trust checks row */
  #sliderContainer section.home-hero .heading .hero-trust,
  #sliderContainer section.home-hero .heading .hero-trust li {
    font-size: 16px !important;
    /* was 15 */
    line-height: 1.45 !important;
    opacity: 0.94 !important;
  }

}

/* no3 */
/* =====================================================
   TABLET (768px–1024px)
   HERO CTA — FINAL HIERARCHY LOCK
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* PRIMARY CTA */
  #sliderContainer section.home-hero .heading a.home-hero-cta {
    height: 60px !important;
    /* slightly taller */
    font-size: 18px !important;
    /* clearer label */
    line-height: 22px font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }

  /* SECONDARY TEXT / LINKS — quiet them */
  #sliderContainer section.home-hero .heading small,
  #sliderContainer section.home-hero .heading .cta-helper,
  #sliderContainer section.home-hero .heading a.home-hero-secondary {
    font-size: 14px !important;
    opacity: 0.7 !important;
  }

}

/* 14/01/2025 - No1 */

/* =====================================================
   TABLET (768px–1024px)
   FINAL CTA (below marketing) — "Join Free Today"
   Fix: styles.css forces 16px on .home-hero-cta
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 768px) and (max-width: 1024px) {

  section.home-marketing .home-final-cta a.home-hero-cta,
  section.home-marketing .home-final-cta .home-hero-cta {
    font-size: 18px !important;
    line-height: 1 !important;
    height: 56px !important;
    min-height: 56px !important;
  }

}

/* no 2 */
/* =====================================================
   DESKTOP (≥1200px)
   FINAL CTA — "Join Free Today"
   ===================================================== */
@media (min-width: 1200px) {

  section.home-marketing .home-final-cta .home-hero-cta {
    font-size: 19px !important;
    height: 58px !important;
    min-height: 58px !important;
    line-height: 1 !important;
  }

}

/* =====================================================
   MOBILE (≤380px)
   FINAL CTA — center button label text
   Fix visual inconsistency with hero CTA
   ===================================================== */
@media (max-width: 380px) {

  section.home-marketing .home-final-cta .home-hero-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

}

/* No 3 */

/* =====================================================
   MOBILE (≤380px) — FINAL CTA FONT LOCK
   Join Free Today (hero + final CTA)
   Absolute authority
   ===================================================== */
@media (max-width: 380px) {

  /* Hero CTA */
  #sliderContainer section.home-hero .home-hero-cta,

  /* Bottom / final CTA */
  section.home-marketing .home-final-cta .home-hero-cta {
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

}

/* 20/01/2026 */

/* =====================================================
   MOBILE (iPhone) — STOP HORIZONTAL PAN (overflow-x)
   Scope: <= 480px
   ===================================================== */
@media (max-width: 480px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* Extra safety for common wrappers/sections */
  #sliderContainer,
  section.home-hero,
  section.home-marketing {
    max-width: 100% !important;
    overflow-x: clip !important;
    /* fallback: hidden */
  }

  /* Prevent any child from forcing wider than screen */
  #sliderContainer *,
  section.home-hero *,
  section.home-marketing * {
    max-width: 100% !important;
  }
}

@media (min-width: 389px) and (max-width: 391px) {
  section.home-hero .heading {
    margin-top: -32px !important;
  }
}






/* =====================================================
   FINAL AUTHORITY — MOBILE HERO GLASS CARD WIDTH
   Scope: <=480px
   Goal: ACTUALLY widen card (near edge-to-edge)
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (max-width: 480px) {

  /* GLASS CARD */
  #sliderContainer>section.home-hero>div.heading {
    width: 100% !important;
    /* FULL WIDTH */
    max-width: none !important;

    margin-left: 0 !important;
    /* NO side inset */
    margin-right: 0 !important;

    padding-left: 0 !important;
    /* prevent parent padding limiting width */
    padding-right: 0 !important;

    box-sizing: border-box !important;
  }

  /* INNER CONTENT — keep comfortable inner padding */
  #sliderContainer>section.home-hero>div.heading>div.hero-text-wrap {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding-left: 16px !important;
    /* INNER breathing room */
    padding-right: 16px !important;

    box-sizing: border-box !important;
  }
}


/* =====================================================
   MOBILE 390px ONLY — HERO TEXT TRUE LEFT ALIGN (SINGLE AUTHORITY)
   Fix: remove stray margins on hero-line spans
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (width: 390px) {

  /* Make the text container left-aligned */
  #sliderContainer section.home-hero .heading .hero-text-wrap {
    text-align: left !important;
  }

  /* Force BOTH hero lines to share the same left edge */
  #sliderContainer section.home-hero .heading h2.home-main-heading,
  #sliderContainer section.home-hero .heading .hero-line1,
  #sliderContainer section.home-hero .heading .hero-line2 {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Supporting line: same left edge */
  #sliderContainer section.home-hero .heading p.home-main-subheading,
  #sliderContainer section.home-hero .heading .home-main-verified {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* CTA stays centered */
  #sliderContainer section.home-hero .heading .hero-cta-row,
  #sliderContainer section.home-hero .heading .hero-cta-wrap,
  #sliderContainer section.home-hero .heading .button-row {
    justify-content: center !important;
  }

}

/* =====================================================
   MOBILE 390px ONLY — Hero headline → verified line spacing
   Goal: add vertical gap under “feels right for you”
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (width: 390px) {

  /* Add space after the hero headline */
  #sliderContainer section.home-hero .heading h2.home-main-heading {
    margin-bottom: 20px !important;
    /* CONTROL: 8–14 */
  }

}

/* 22/01/2026 */

/* =====================================================
   DESKTOP (1280×800) — FIT SCREEN UNDER HEADER (NO SCROLL)
   File: public/assets/css/home-page-hero.css
   ===================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {

  /* Hero frame fits within the viewport under the header */
  #sliderContainer section.home-hero .slideshow-container,
  #sliderContainer section.home-hero .mySlides {
    height: calc(100vh - 110px) !important;
    /* CONTROL: 70–120 */
    min-height: 640px !important;
    max-height: 720px !important;
    overflow: hidden !important;
  }

  /* Keep image crop showing face */
  #sliderContainer section.home-hero .mySlides img.image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 50% 28% !important;
  }

}