/*
Theme Name: Haal Webflow Theme
Theme URI: https://haal.in
Author: Haal / BookGentl Innovations
Description: Webflow export converted into a WordPress theme for haal.in
Version: 1.3
Text Domain: haal-webflow
*/

/* ═══════════════════════════════════════════════════════════
   BASE RESETS
═══════════════════════════════════════════════════════════ */
html, body {
    background-color: #000000;
    color: #ffffff;
    margin: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ── WordPress admin bar fix ── */
@media screen {
    html.wp-toolbar { padding-top: 0 !important; }
    #wpadminbar { position: fixed !important; }
}
body.admin-bar .page-wrapper { margin-top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .page-wrapper { margin-top: 46px; }
}

/* ── WordPress interference fixes ── */
body.body { margin: 0 !important; padding: 0 !important; overflow-x: hidden; }
#page, .site, .site-content, .content-area { background-color: transparent; }
h1,h2,h3,h4,h5,h6,p,span,label { color: inherit; }
a { color: inherit; }
.page-wrapper p { margin-bottom: 0; }
.w-nav-overlay { overflow: hidden; }
.alignnone,.aligncenter,.alignright,.alignleft { display: initial; }

/* ── CSS variables ── */
:root {
    --haal-primary: #1a9a8a;
    --haal-bg: #000000;
    --haal-bg-muted: #0d0d0d;
    --haal-bg-card: #111111;
    --haal-border: rgba(255,255,255,0.08);
    --haal-text-muted: rgba(255,255,255,0.55);
    --global-colors--background-muted-2: #111111;
    --global-colors--background-muted: #111111;
    --global-colors--background-default: #000000;
}

/* ── CTA base ── */
.section-cta { margin-top: 4rem; margin-bottom: 0; }

/* ── Stat card: icon + value inline layout (all screen sizes) ── */
.stat-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.6rem;
}

.stat-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 14px;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 32px;
  height: 32px;
  color: #1a9a8a;
  fill: #1a9a8a;
}


/* ═══════════════════════════════════════════════════════════
   ██  TABLET  (max 991px)
═══════════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {

  /* ── Global padding tighten ── */
  .padding-global {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── Navbar logo: crisp & right-sized ── */
  .navbar-logo-image {
    width: 120px !important;
    height: auto !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    object-fit: contain;
    mix-blend-mode: screen; /* removes black background from JPEG logo */
    filter: brightness(1.05);
  }

  .navbar-logo {
    display: flex !important;
    align-items: center !important;
  }

  .header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .navbar {
    min-height: 56px !important;
    align-items: center !important;
  }

  /* ── Hide desktop nav items on mobile/tablet, show only hamburger ── */
  .navbar-right > .navbar-menu-item,
  .navbar-right > .navbar-right-button {
    display: none !important;
  }

  .navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  /* ── Hero section ── */
  .section-home-hero .padding-top { padding-top: 2rem !important; }

  .home-hero-content { text-align: center !important; }

  .heading-style-large {
    font-size: 26px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
  }

  .text-size-large {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Hero buttons: stack on very small, row otherwise */
  .home-hero-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 1.25rem !important;
  }

  .home-hero-buttons .button {
    min-width: 140px !important;
  }

  /* ── App grid (desktop scroll section) - Stack on mobile ── */
  .home-hero-app-grid { 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .home-hero-app-grid-left,
  .home-hero-app-grid-right {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: center !important;
    text-align: center !important;
  }

  .home-hero-app-card {
    padding: 1.5rem !important;
    width: 100% !important;
    max-width: 450px !important;
  }

  /* Hide the fallback mobile section as we're restoring the hero mockup */
  .home-hereo-about-mobile {
    display: none !important;
  }

  /* ── Swipe slider core ── */
  .haal-swipe-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .haal-swipe-track {
    display: flex !important;
    flex-direction: row !important;
    transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  .haal-swipe-slide {
    flex: 0 0 100%;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 20px 1.5rem !important;
    gap: 1.25rem !important;
  }

  .haal-swipe-slide .features-about-grid-even,
  .haal-swipe-slide .features-about-grid-odd {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .haal-swipe-slide .features-about-grid-even-right,
  .haal-swipe-slide .features-about-grid-odd-left {
    margin: 0 !important;
    width: 100% !important;
  }

  .haal-swipe-slide img,
  .haal-swipe-slide .features-about-grid-inner-image {
    width: 72vw !important;
    max-width: 260px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }

  .haal-swipe-slide .card {
    width: 100% !important;
    border-radius: 16px !important;
  }

  .haal-swipe-slide .card-padding.large {
    padding: 1.25rem !important;
  }

  .haal-swipe-slide .heading-style-h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  /* Dots */
  .haal-swipe-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0.75rem 0 0.5rem !important;
  }

  .haal-swipe-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .haal-swipe-dot.active {
    background: #1a9a8a;
    transform: scale(1.4);
  }

  /* Prev/Next arrow buttons */
  .haal-swipe-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(26,154,138,0.5);
    color: #1a9a8a;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
  }

  .haal-swipe-arrow.prev { left: 8px; }
  .haal-swipe-arrow.next { right: 8px; }
  .haal-swipe-arrow:active { background: rgba(26,154,138,0.35); }

  /* ── Stats section ── */
  .section-home-stats .padding-global { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  .home-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .home-stats-grid > * {
    padding: 1rem 0.9rem !important;
    border-radius: 14px !important;
  }

  /* Stat card: icon + value on same row */
  .stat-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 0.5rem !important;
  }

  /* Icon: transparent bg, bigger */
  .stat-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 12px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .stat-icon svg {
    width: 30px !important;
    height: 30px !important;
    color: #1a9a8a !important;
    fill: #1a9a8a !important;
  }

  .home-stats-grid .heading-style-h2 {
    font-size: 26px !important;
    margin: 0 !important;
  }

  .home-stats-grid .heading-style-h4 {
    font-size: 13px !important;
    margin-bottom: 0.3rem !important;
  }

  .home-stats-grid .text-color-muted {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  /* ── Clients logo strip — bigger scrolling icons on tablet/mobile ── */
  .home-clients-logos { overflow: hidden !important; }
  .home-clients-logo-image { height: 40px !important; width: auto !important; }

  /* ── Features section ── */
  .section-features .heading-style-h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .features-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .features-grid-top,
  .features-grid-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: unset !important;
  }

  .features-grid .card {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .features-grid .card-padding {
    padding: 1.25rem !important;
  }

  .features-grid .heading-style-h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .features-grid .heading-style-h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .features-grid img {
    width: 100% !important;
    border-radius: 10px !important;
    margin-top: 0.5rem !important;
  }

  /* ── Testimonials ── */
  .section-home-testimonials .heading-style-h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  .home-testimonials-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    grid-template-columns: unset !important;
  }

  .home-testimonials-grid > * {
    border-radius: 14px !important;
    padding: 1.25rem !important;
  }

  .home-testimonials-grid .heading-style-h3 {
    font-size: 16px !important;
  }

  .home-testimonials-logos {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }

  /* ── FAQ section ── */
  .section-faq .heading-style-h1,
  .section-faq .heading-style-h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .faq-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    grid-template-columns: unset !important;
  }

  .accordion {
    border-radius: 12px !important;
    padding: 1rem 1.25rem !important;
  }

  .accordion-title { font-size: 15px !important; line-height: 1.4 !important; }

  .faq-support {
    border-radius: 14px !important;
    padding: 1.25rem !important;
    margin-top: 1.5rem !important;
  }

  /* ── CTA section ── */
  .section-cta { margin-top: 2rem !important; }

  .section-cta .heading-style-medium {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .section-cta .text-size-large {
    font-size: 14px !important;
  }

  .cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .cta-image-left, .cta-image-right { display: none !important; }

  /* ── Footer ── */
  .footer > .padding-global > .container-xlarge > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.75rem !important;
  }

  .footer > .padding-global > .container-xlarge > div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
    align-items: center !important;
  }

  /* ── Footer brand "Haal Salon" h4 — force white ── */
  footer h4[style*="color"] {
    color: #ffffff !important;
  }

  /* ── Footer: reduce indent/padding on tablet ── */
  footer .padding-global {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer div[style*="padding-bottom: 3rem"] {
    padding-bottom: 1.5rem !important;
  }

  /* ── Generic headings on tablet ── */
  h1, .heading-style-h1 { font-size: 24px !important; }
  h2, .heading-style-h2 { font-size: 20px !important; }
  h3, .heading-style-h3 { font-size: 18px !important; }
  h4, .heading-style-h4 { font-size: 15px !important; }

  /* ── Prevent horizontal scroll WITHOUT blocking vertical scroll ── */
  .main-wrapper, section, .padding-global, .container-large, .container-xlarge, .container-small {
    max-width: 100% !important;
  }
  /* Only clip horizontal on the root wrapper — never on scroll containers */
  .page-wrapper {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ██  MOBILE  (max 767px)
═══════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {

  /* ── Navbar ── */
  .navbar-logo-image {
    width: 110px !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.05) !important;
  }

  .header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* ── Hero ── */
  .heading-style-large {
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
  }

  .section-home-hero .padding-top.padding-huge {
    padding-top: 1.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .home-hero-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 4px !important;
  }

  .home-hero-buttons .button,
  .home-hero-buttons a.button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.85rem 1rem !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  /* ── label badge ── */
  .label-link-icon { font-size: 12px !important; }

  /* ── Stats: 2 col ── */
  .home-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .home-stats-grid > * {
    padding: 0.85rem 0.75rem !important;
    border-radius: 12px !important;
  }

  /* Stat card header: icon + value side by side */
  .stat-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0.35rem !important;
  }

  /* Icon: larger, transparent background */
  .stat-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }

  .stat-icon svg {
    width: 26px !important;
    height: 26px !important;
    color: #1a9a8a !important;
    fill: #1a9a8a !important;
  }

  .home-stats-grid .heading-style-h2 {
    font-size: 22px !important;
    margin: 0 !important;
  }

  .home-stats-grid .heading-style-h4 {
    font-size: 12px !important;
    margin-bottom: 0.2rem !important;
  }

  .home-stats-grid .text-color-muted {
    font-size: 0.75rem !important;
    line-height: 1.45 !important;
  }

  /* ── Features ── */
  .section-features .heading-style-h1 { font-size: 22px !important; }

  .features-grid .card-padding { padding: 1.1rem !important; }
  .features-grid .heading-style-h2 { font-size: 18px !important; }
  .features-grid .heading-style-h3 { font-size: 16px !important; }

  /* ── Testimonials ── */
  .section-home-testimonials .heading-style-h1 { font-size: 22px !important; }

  .home-testimonials-grid > * {
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  .home-testimonials-grid .heading-style-h3 { font-size: 15px !important; }

  /* ── FAQ ── */
  .accordion-title { font-size: 14px !important; }

  /* ── CTA ── */
  .section-cta .heading-style-medium { font-size: 22px !important; }
  .section-cta .padding-vertical.padding-huge {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* ── Generic body text ── */
  .text-color-muted, .text-size-medium, p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* ── Section padding reduction ── */
  .padding-vertical.padding-xhuge { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .padding-vertical.padding-huge  { padding-top: 2rem   !important; padding-bottom: 2rem   !important; }
  .padding-vertical.padding-large { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .padding-top.padding-huge       { padding-top: 1.75rem !important; }
  .padding-top.padding-xxhuge     { padding-top: 2rem   !important; }

  /* ── Margin utilities tighten ── */
  .margin-bottom.margin-xlarge { margin-bottom: 1.25rem !important; }
  .margin-bottom.margin-large  { margin-bottom: 1rem    !important; }
  .margin-bottom.margin-medium { margin-bottom: 0.75rem !important; }

  /* ── Heading generic ── */
  h1, .heading-style-h1 { font-size: 22px !important; line-height: 1.25 !important; }
  h2, .heading-style-h2 { font-size: 18px !important; line-height: 1.25 !important; }
  h3, .heading-style-h3 { font-size: 16px !important; line-height: 1.3  !important; }
  h4, .heading-style-h4 { font-size: 14px !important; }
}


/* ═══════════════════════════════════════════════════════════
   ██  SMALL MOBILE  (max 479px)
═══════════════════════════════════════════════════════════ */
@media screen and (max-width: 479px) {

  .padding-global {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .navbar-logo-image { width: 100px !important; mix-blend-mode: screen !important; filter: brightness(1.05) !important; }

  .heading-style-large { font-size: 20px !important; }

  /* Stats: still 2 col but tighter */
  .home-stats-grid { gap: 8px !important; }
  .home-stats-grid > * { padding: 0.75rem 0.6rem !important; }
  .stat-icon { width: 38px !important; height: 38px !important; min-width: 38px !important; }
  .stat-icon svg { width: 22px !important; height: 22px !important; }
  .home-stats-grid .heading-style-h2 { font-size: 20px !important; }

  /* Scrolling logo strip: slightly smaller on phones than tablet */
  .home-clients-logo-image { height: 34px !important; width: auto !important; }

  /* Swipe slide: tighter image */
  .haal-swipe-slide img,
  .haal-swipe-slide .features-about-grid-inner-image {
    width: 68vw !important;
    max-width: 230px !important;
  }

  .section-cta { margin-top: 1rem !important; }
  .section-cta .heading-style-medium { font-size: 20px !important; }
}

/* ═══════════════════════════════════════════════════════════
   HAAL SCROLL FIX v2 — Mobile vertical scroll unblock
   Overrides Webflow CSS scroll-blocking rules
═══════════════════════════════════════════════════════════ */

/* ── 1. Kill background-attachment:fixed on mobile (iOS scroll killer) ── */
@media screen and (max-width: 991px) {
  .body, body {
    background-attachment: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }

  html, body, .page-wrapper, .main-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
  }

  /* ── 2. Unblock the sticky scroll-hijack section on mobile ── */
  .home-hero-app-grid-center-inner {
    position: relative !important;
    height: auto !important;
    top: auto !important;
  }

  .home-hero-app-grid-left,
  .home-hero-app-grid-right {
    position: relative !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 2rem !important;
  }

  /* ── 3. Touch action: allow vertical pan on all sections ── */
  section,
  .main-wrapper,
  .padding-global,
  .container-large,
  .container-small,
  .container-xlarge,
  .home-hereo-about-mobile,
  .haal-swipe-slider {
    touch-action: pan-y !important;
  }

  /* ── 4. Allow the swipe slider track to handle horizontal swipes
         without blocking page scroll ── */
  .haal-swipe-track {
    touch-action: pan-y pinch-zoom !important;
  }

  /* ── 5. Section CTA: was locking scroll with overflow:hidden ── */
  .section-cta {
    overflow: visible !important;
  }

  /* ── 6. Testimonials: remove horizontal overflow clip ── */
  .home-testimonials-logos {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* ── 7. Remove any height:100vh locks on mobile ── */
  .home-hero-app-phone {
    height: auto !important;
    width: 80vw !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .home-hero-app-image {
    transition: opacity 0.6s ease-in-out !important;
    opacity: 0;
  }

  .home-hero-app-image._01 {
    opacity: 1;
  }

  /* ── 8. Features grid: ensure natural document flow (no overflow locks) ── */
  .features-grid,
  .features-grid-top,
  .features-grid-bottom {
    overflow: visible !important;
  }
}

/* ── iOS Safari momentum scrolling ── */
@media screen and (max-width: 991px) {
  html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Ensure no element intercepts touch events that should scroll the page */
  .haal-swipe-slide > * {
    pointer-events: auto;
  }
}

/* ── Extra: very small mobile ── */
@media screen and (max-width: 479px) {
  .body, body {
    background-attachment: scroll !important;
  }
  /* Prevent oversized padding from creating phantom scroll width */
  .padding-top.padding-huge,
  .padding-top.padding-xxhuge,
  .padding-vertical.padding-xhuge,
  .padding-vertical.padding-huge {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ██  HAAL MOBILE FIX v3 — Blog cards, swipe slider, spacing
   Applied: 2026-04-20
═══════════════════════════════════════════════════════════ */

/* ── Blog page: force single column on mobile ── */
@media screen and (max-width: 767px) {
  /* Override inline grid style on #blog-grid */
  #blog-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .blog-card {
    border-radius: 14px !important;
  }

  .blog-card-content {
    padding: 18px !important;
  }

  .blog-card-title {
    font-size: 1.05rem !important;
    margin-bottom: 8px !important;
  }

  .blog-card-description {
    font-size: 0.875rem !important;
    margin-bottom: 14px !important;
  }

  .blog-card-image {
    aspect-ratio: 16/9 !important;
  }

  .blog-read-more {
    font-size: 0.875rem !important;
  }

  /* Featured blog section spacing */
  .featured-blog-section {
    padding: 40px 0 !important;
  }

  /* Blog page header text */
  .section-blog-grid .heading-style-h1,
  .section-blog-grid h1 {
    font-size: 22px !important;
  }

  /* Category pills: allow wrapping */
  .category-pill {
    font-size: 12px !important;
    padding: 6px 14px !important;
    white-space: nowrap;
  }
}

@media screen and (max-width: 479px) {
  #blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .blog-card-content {
    padding: 14px !important;
  }

  .blog-card-title {
    font-size: 0.975rem !important;
    color: #ffffff !important;
  }
  .blog-card-category {
    color: #22d3bb !important;
  }
  .blog-card-description {
    color: rgba(255,255,255,0.82) !important;
  }
  .blog-read-more {
    color: #22d3bb !important;
    font-weight: 700 !important;
  }
}

/* ── Blog brightness base: ensure cards always show bright text ── */
.blog-card-title {
  color: #ffffff !important;
}
.blog-card-category {
  color: #22d3bb !important;
}
.blog-card-description {
  color: rgba(255,255,255,0.82) !important;
}
.blog-read-more {
  color: #22d3bb !important;
  font-weight: 700 !important;
}

/* ── Swipe slider: smooth touch handling ── */
@media screen and (max-width: 991px) {

  /* Track: no touch-action restriction — JS handles axis locking */
  .haal-swipe-track {
    touch-action: none !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .haal-swipe-track:active {
    cursor: grabbing;
  }

  /* Each slide: full width, no shrink */
  .haal-swipe-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Slider wrapper must clip overflow */
  .haal-swipe-slider {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Dots: centered, with comfortable tap area */
  .haal-swipe-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 0 8px !important;
  }

  .haal-swipe-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.25) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.2s !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .haal-swipe-dot::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.2s, transform 0.2s;
  }

  .haal-swipe-dot.active::after {
    background: #1a9a8a !important;
    transform: scale(1.4);
  }

  /* Arrow buttons: clearly tappable */
  .haal-swipe-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(26,154,138,0.18) !important;
    border: 1px solid rgba(26,154,138,0.35) !important;
    color: #fff !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .haal-swipe-arrow.prev { left: 6px !important; }
  .haal-swipe-arrow.next { right: 6px !important; }
  .haal-swipe-arrow:active { background: rgba(26,154,138,0.45) !important; }

  /* Phone images inside swipe slides */
  .haal-swipe-slide .features-about-grid-inner-image,
  .haal-swipe-slide img.features-about-grid-inner-image {
    width: 65vw !important;
    max-width: 240px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 1rem !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
  }

  /* Text inside slides */
  .haal-swipe-slide .heading-style-h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }

  .haal-swipe-slide .text-color-muted,
  .haal-swipe-slide p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  /* Card inside swipe slide */
  .haal-swipe-slide .card {
    border-radius: 14px !important;
    overflow: hidden !important;
  }
}

/* ── Global card/section overlap fix ── */
@media screen and (max-width: 767px) {

  /* Prevent cards from overflowing their containers */
  .card, [class*="-card"], [class*="card-"] {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Remove any negative margins that cause overlap */
  .features-grid,
  .features-grid-top,
  .features-grid-bottom,
  .home-testimonials-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  /* Ensure grid children don't overflow */
  .features-grid > *,
  .home-testimonials-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Fix any absolutely-positioned elements that might overlap */
  .section-home-hero,
  .section-features,
  .section-home-testimonials,
  .section-cta,
  .section-blog-grid {
    position: relative !important;
    overflow: visible !important;
  }

  /* Heading in sections */
  .section-home-hero .heading-style-large {
    font-size: 22px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
  }

  /* Stat cards: ensure 2-col doesn't overflow */
  .home-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .home-stats-grid > * {
    min-width: 0 !important;
    padding: 0.85rem 0.6rem !important;
  }

  /* Testimonial logos row: clip without scrollbar */
  .home-testimonials-logos {
    overflow: hidden !important;
    width: 100% !important;
  }

  /* Navbar: prevent menu overflow */
  .w-nav-overlay {
    overflow-y: auto !important;
    max-height: calc(100vh - 60px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ██  HAAL FULL-SITE MOBILE FIX v4
   Covers: index, blog, features, about, pricing, contact, support
   All inline grids, footer, cards, forms, sections
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   SHARED FOOTER — 5-column → 2-col → 1-col
   selector: div with grid-template-columns: 2fr 0.8fr 0.8fr 1.6fr 1.2fr
   We target the footer element itself
───────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* Footer top grid: 5 col → 2 col */
  footer .padding-global > div[style*="grid-template-columns: 2fr"],
  .footer-wrapper [style*="grid-template-columns: 2fr"],
  [style*="grid-template-columns: 2fr 0.8fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
}

@media screen and (max-width: 767px) {
  /* Footer top grid: 1 col on phones */
  footer .padding-global > div[style*="grid-template-columns: 2fr"],
  .footer-wrapper [style*="grid-template-columns: 2fr"],
  [style*="grid-template-columns: 2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding-bottom: 2rem !important;
  }

  /* Footer bottom row */
  footer [style*="display: flex"][style*="justify-content: space-between"],
  .footer-bottom-row {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }

  /* ── Footer brand "Haal Salon" h4 — force white on mobile ── */
  footer h4,
  footer h4[style*="color"] {
    color: #ffffff !important;
  }

  /* ── Footer padding: reduce horizontal indentation on mobile ── */
  footer .padding-global {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Reduce the large gap between footer columns on mobile */
  footer div[style*="padding-bottom: 3rem"],
  footer div[style*="padding-bottom:3rem"] {
    padding-bottom: 1.25rem !important;
  }
}


/* ─────────────────────────────────────────────
   PRICING PAGE
───────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* Hero padding */
  [style*="padding: 120px 0 80px"] {
    padding: 60px 0 40px !important;
  }

  /* 4-step cards: 4-col → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* App preview: 2-col → 1-col */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* FAQ 2-col → 1-col */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 40px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media screen and (max-width: 767px) {
  /* 4-step cards: → 1-col on small phones */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Step card inner big number: reduce */
  [style*="font-size: 4rem"][style*="color: rgba(26, 154, 138, 0.08)"] {
    font-size: 2.5rem !important;
  }

  /* Pricing hero text */
  [style*="padding: 120px 0 80px"] h1,
  [style*="padding: 60px 0 40px"] h1 {
    font-size: 24px !important;
  }
}


/* ─────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* Contact form + info: 1.5fr 1fr → 1-col */
  [style*="grid-template-columns: 1.5fr 1fr"][style*="gap: 60px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Name/email split form row: 1fr 1fr → 1-col */
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 20px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

@media screen and (max-width: 767px) {
  /* Contact form fields */
  .form-input,
  input[type="text"],
  input[type="email"],
  textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    padding: 12px 16px !important;
  }

  /* Contact info grid */
  [style*="grid-template-columns: 1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}


/* ─────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* Services feature grid: minmax(280px) → always 1-col */
  .features-grid[style*="minmax(280px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Mission section: 2-col → 1-col */
  .features-about-grid-odd[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Remove border-left on stacked layout */
  [style*="border-left: 1px solid rgba(255,255,255,0.1)"][style*="padding-left: 40px"] {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
  }
}

@media screen and (max-width: 767px) {
  /* Services grid → 1-col */
  .features-grid[style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Badge row: wrap */
  [style*="padding: 6px 16px"][style*="border-radius: 20px"] {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }
}


/* ─────────────────────────────────────────────
   FEATURES PAGE
───────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .features-about-grid-even,
  .features-about-grid-odd {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .features-about-grid-even-right,
  .features-about-grid-odd-left {
    order: 2 !important;
  }

  .features-about-grid-even > div:first-child,
  .features-about-grid-odd > div:last-child {
    order: 1 !important;
  }

  .features-about-grid-inner-image {
    width: 70% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  .features-about-grid-inner-image {
    width: 60vw !important;
    max-width: 220px !important;
  }

  /* Features grid top/bottom cards */
  .features-grid-top,
  .features-grid-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .features-grid-top > *,
  .features-grid-bottom > * {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ─────────────────────────────────────────────
   SUPPORT / FAQ PAGE
───────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* FAQ category grid: minmax(300px) → 1-col */
  #faq-container,
  [style*="minmax(300px, 1fr)"][style*="gap: 3rem"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Contact cards below FAQ: minmax(280px) → 1-col */
  [style*="minmax(280px, 1fr)"][style*="gap: 2rem"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Search bar */
  .search-form-wrapper {
    max-width: 100% !important;
  }

  #faq-search {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  #faq-search-btn {
    position: static !important;
    width: 100% !important;
    margin-top: 10px !important;
    border-radius: 10px !important;
    padding: 0.75rem !important;
  }
}

@media screen and (max-width: 767px) {
  /* FAQ accordion items */
  .accordion-item {
    border-radius: 12px !important;
  }

  .accordion-title {
    font-size: 14px !important;
    padding: 16px !important;
    line-height: 1.4 !important;
  }

  .accordion-body {
    padding: 0 16px 16px !important;
    font-size: 13px !important;
  }

  /* Support contact info row */
  [style*="min-width: 80px"] {
    min-width: 60px !important;
    font-size: 0.8rem !important;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE — ADDITIONAL SECTIONS
───────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* Testimonials grid: force single col */
  .home-testimonials-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Logos marquee row */
  .home-testimonials-logos {
    overflow: hidden !important;
  }

  /* Stats grid: 2-col always */
  .home-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero download buttons */
  .home-hero-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}

@media screen and (max-width: 767px) {
  /* CTA section */
  .section-cta {
    padding: 0 !important;
  }

  .section-cta .heading-style-medium {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  /* FAQ accordion on homepage */
  .home-faq .accordion-title {
    font-size: 14px !important;
  }

  /* Testimonial cards */
  .home-testimonials-grid > * {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
}


/* ─────────────────────────────────────────────
   GLOBAL: All inline grid overrides via class
   We inject utility classes via JS (see below)
───────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Any element with an inline multi-col grid that wasn't caught above */
  .haal-grid-auto {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Padding on padded sections */
  [style*="padding: 80px 0"],
  [style*="padding: 100px 0"],
  [style*="padding: 120px 0 80px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  [style*="padding: 60px"] {
    padding: 24px !important;
  }

  /* Featured blog card inner padding */
  .featured-blog-grid > div[style*="padding: 60px"] {
    padding: 20px !important;
  }

  /* Featured blog image min-height */
  .featured-blog-grid img[style*="min-height: 400px"] {
    min-height: 200px !important;
    max-height: 240px !important;
    object-fit: cover !important;
  }

  /* Section headings */
  h1, .heading-style-h1 { font-size: 22px !important; line-height: 1.25 !important; }
  h2, .heading-style-h2 { font-size: 19px !important; line-height: 1.3  !important; }
  h3, .heading-style-h3 { font-size: 16px !important; }
  p, .text-size-medium, .text-size-large { font-size: 14px !important; line-height: 1.65 !important; }

  /* All images: never exceed viewport */
  img { max-width: 100% !important; height: auto !important; }

  /* Prevent any element from being wider than screen */
  section, .section, .padding-global,
  .container-large, .container-small, .container-xlarge {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* ─────────────────────────────────────────────
   GLOBAL INLINE GRID COLLAPSE via JS-injected
   data attribute — applied by inline-grid-fix.js
   (We inject this via wp_footer below in functions.php)
───────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  [data-mobile-stack="true"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-mobile-stack="2col"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ██  HAAL FIX v5 — Swipe smooth, logo bigger, cards compact,
                      footer "haal" text white
   Applied: 2026-04-24
═══════════════════════════════════════════════════════════ */

/* ── FIX 1: Smooth swipe on Homepage + Features page ──────
   The sticky scroll-hijack center panel causes "double-swipe"
   friction on mobile. Override it to natural document flow.  */
@media screen and (max-width: 991px) {
  /* Kill the sticky height-lock on the phone mockup column */
  .home-hero-app-grid-center-inner {
    position: relative !important;
    height: auto !important;
    top: auto !important;
    min-height: unset !important;
    margin-top: 0 !important;
  }

  /* Remove the huge padding-top/gap that Webflow uses to
     create the scroll-hijack illusion */
  .home-hero-app-grid-left {
    grid-row-gap: 2rem !important;
    gap: 2rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-right: 0 !important;
  }

  .home-hero-app-grid-right {
    grid-row-gap: 2rem !important;
    gap: 2rem !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-left: 0 !important;
  }

  /* Features page: ensure smooth vertical scroll on all sections.
     Use 'auto' not 'pan-y' so a horizontal swipe on the page is
     NOT pre-emptively eaten by the browser before direction is known */
  .section-features-about,
  .section-features-comparison,
  .section-features {
    position: relative !important;
    overflow: visible !important;
    touch-action: auto !important;
  }

  /* Swipe slider: smooth first-touch registration */
  .haal-swipe-slider,
  .haal-swipe-track,
  .haal-swipe-slide {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Slider wrapper: pan-y so the page can still scroll vertically
     when the user is NOT swiping horizontally inside it */
  .haal-swipe-slider {
    touch-action: pan-y !important;
  }

  /* Track: pan-x pan-y — lets browser AND JS both see the gesture
     immediately on the very first swipe. JS preventDefault() on
     touchmove blocks page-scroll only after axis is confirmed as
     horizontal. This eliminates the "double-swipe" lag. */
  .haal-swipe-track {
    touch-action: pan-x pan-y !important;
  }

  /* While dragging horizontally the JS adds .is-dragging;
     lock axis completely so there's no stutter */
  .haal-swipe-track.is-dragging {
    touch-action: none !important;
  }

  /* Animate features page scroll sections smoothly */
  .animate-on-scroll {
    transition: opacity 0.45s ease, transform 0.45s ease !important;
    will-change: opacity, transform !important;
  }
}

/* ── FIX 2: Logo icon bigger on mobile & tablet ────────── */
@media screen and (max-width: 991px) {
  .navbar-logo-image {
    width: 170px !important;
    height: auto !important;
    object-fit: contain !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.08) !important;
  }
}

@media screen and (max-width: 767px) {
  .navbar-logo-image {
    width: 155px !important;
    height: auto !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.08) !important;
  }
}

@media screen and (max-width: 479px) {
  .navbar-logo-image {
    width: 140px !important;
    height: auto !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.08) !important;
  }
}

/* ── FIX 3: Stats cards — compact, remove extra inner space ─
   Target: the 4 stat cards in .home-stats-grid on homepage   */
@media screen and (max-width: 991px) {
  /* Tighter outer padding on each card cell */
  .home-stats-grid > * {
    padding: 0 !important;
    border-radius: 14px !important;
  }

  /* Tighter inner padding */
  .home-stats-grid .card-padding {
    padding: 0.9rem 0.85rem !important;
  }

  /* Tighten the icon↔value gap */
  .home-stats-grid .stat-card-header {
    gap: 8px !important;
    margin-bottom: 0.3rem !important;
  }

  /* Reduce icon box size */
  .home-stats-grid .stat-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .home-stats-grid .stat-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Compact the number */
  .home-stats-grid .heading-style-h2 {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* Compact the label */
  .home-stats-grid .heading-style-h4 {
    font-size: 11px !important;
    margin-bottom: 0.15rem !important;
    margin-top: 0 !important;
  }

  /* Compact the description text */
  .home-stats-grid .text-color-muted {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* Remove any margin-bottom wrappers inside stat cards */
  .home-stats-grid .margin-bottom {
    margin-bottom: 0.2rem !important;
  }

  .home-stats-grid .margin-bottom.margin-xsmall {
    margin-bottom: 0.15rem !important;
  }
}

@media screen and (max-width: 767px) {
  .home-stats-grid > * {
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .home-stats-grid .card-padding {
    padding: 0.75rem 0.7rem !important;
  }

  .home-stats-grid .stat-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .home-stats-grid .stat-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .home-stats-grid .heading-style-h2 {
    font-size: 20px !important;
  }

  .home-stats-grid .heading-style-h4 {
    font-size: 10.5px !important;
  }

  .home-stats-grid .text-color-muted {
    font-size: 0.68rem !important;
    line-height: 1.38 !important;
  }
}

@media screen and (max-width: 479px) {
  .home-stats-grid .card-padding {
    padding: 0.65rem 0.6rem !important;
  }
}

/* ── FIX 4: Footer "haal" text → pure white everywhere ────
   Targets: h4 "Haal Salon" brand name and any span/text
   next to the logo icon in all footer sections             */

/* Desktop + all sizes */
footer h4,
footer h4[style],
footer h4[style*="color"],
.footer h4,
.footer h4[style],
footer .brand-name,
footer [class*="brand"] h4 {
  color: #ffffff !important;
}

/* The anchor wrapping logo + text in footer brand column */
footer a h4,
footer .w-inline-block + h4,
footer div > h4 {
  color: #ffffff !important;
}

/* Catch any span or div with "haal" branding text near logo in footer */
footer .footer-brand-text,
footer .navbar-brand-text,
footer [class*="logo"] + *,
footer [class*="logo"] ~ h4,
footer [class*="logo"] ~ span {
  color: #ffffff !important;
}

/* Mobile explicit override */
@media screen and (max-width: 991px) {
  footer h4,
  footer h4[style],
  footer h4[style*="color"],
  .footer h4,
  footer div > h4 {
    color: #ffffff !important;
  }
}

@media screen and (max-width: 767px) {
  footer h4,
  footer h4[style],
  footer h4[style*="color"],
  .footer h4 {
    color: #ffffff !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ██  FIX 5 — Footer brand: icon + "haal" white wordmark
                Navbar logo: larger on mobile & tablet
   Applied: 2026-04-24
══════════════════════════════════════════════════════════════ */

/* ── Footer brand: icon ── */
.footer-brand-icon {
  width: 136px !important;
  height: 136px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  mix-blend-mode: screen !important;
}

/* ── Footer brand: "haal" white wordmark text ── */
.footer-brand-wordmark {
  color: #ffffff !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  font-family: inherit !important;
}

/* ── Footer brand link: flex row, no gap between icon and text ── */
.footer-brand-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
}

/* ── Tablet: icon size ── */
@media screen and (max-width: 991px) {
  .footer-brand-icon {
    width: 110px !important;
    height: 110px !important;
  }
  .footer-brand-wordmark {
    font-size: 1.75rem !important;
  }
}

/* ── Mobile: keep it clean ── */
@media screen and (max-width: 767px) {
  .footer-brand-icon {
    width: 90px !important;
    height: 90px !important;
  }
  .footer-brand-wordmark {
    font-size: 1.6rem !important;
  }
}

/* ── Navbar logo: remove black background on all screen sizes ── */
.navbar-logo-image {
  mix-blend-mode: screen !important;
  filter: brightness(1.08) !important;
}

/* ── Navbar logo: final authoritative sizes on mobile & tablet ──
   These declarations come last so they win over all earlier rules */
@media screen and (max-width: 991px) {
  .navbar-logo-image {
    width: 170px !important;
    height: auto !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.08) !important;
  }
}
@media screen and (max-width: 767px) {
  .navbar-logo-image {
    width: 155px !important;
    height: auto !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.08) !important;
  }
}
@media screen and (max-width: 479px) {
  .navbar-logo-image {
    width: 140px !important;
    height: auto !important;
    mix-blend-mode: screen !important;
    filter: brightness(1.08) !important;
  }
}

/* ── Footer logo image: white "haal" text, original icon colors ──
   brightness(1.6) makes the white/light text read as bright white
   via mix-blend-mode:screen. NO saturate() so the colorful
   pinwheel icon retains its original green/teal colors.          */
footer img[alt="Haal Salon Logo"],
footer .w-inline-block > img[src*="logo.png"],
.footer img[alt="Haal Salon Logo"],
.footer .w-inline-block > img[src*="logo.png"] {
  mix-blend-mode: screen !important;
  filter: brightness(1.6) !important;
}

/* ══════════════════════════════════════════════════════════════
   ██  FIX 6 — Seamless infinite marquee + bigger logos
   Applied: 2026-04-24
══════════════════════════════════════════════════════════════ */

/* Wrapper: clips overflow so logos scroll off the edge cleanly */
.haal-marquee-wrapper {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
}

/* Track: two copies side by side — first scrolls out, second seamlessly follows */
.haal-marquee-track {
  display: flex !important;
  width: max-content !important;
  animation: haal-marquee-scroll 30s linear infinite !important;
  will-change: transform !important;
}

/* Each inner row holds one full set of logos */
.haal-marquee-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 10px !important;
  flex-shrink: 0 !important;
}

/* Individual logo image — desktop: big, matching reference */
.haal-marquee-logo {
  height: 130px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* The scroll animation: translate exactly one inner width to the left */
@keyframes haal-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover (desktop only) */
@media (hover: hover) {
  .haal-marquee-wrapper:hover .haal-marquee-track {
    animation-play-state: paused !important;
  }
}

/* Mobile: smaller logos */
@media screen and (max-width: 767px) {
  .haal-marquee-logo {
    height: 68px !important;
  }
  .haal-marquee-inner {
    gap: 6px !important;
    padding-right: 6px !important;
  }
  .haal-marquee-track {
    animation-duration: 18s !important;
  }
}

@media screen and (max-width: 479px) {
  .haal-marquee-logo {
    height: 58px !important;
  }
  .haal-marquee-inner {
    gap: 4px !important;
    padding-right: 4px !important;
  }
  .haal-marquee-track {
    animation-duration: 16s !important;
  }
}