/*
Theme Name: Zeppard Theme
Theme URI: https://zeppard.com/
Author: Muleme Richard
Author URI: https://zeppard.com/
Description: Custom Theme for Zepard website
Version: 2.0.0
Text Domain: zeppard-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root{
      --zp-bg: #050607;
      --zp-card: rgba(255,255,255,.06);
      --zp-stroke: rgba(255,255,255,.12);
      --zp-text: rgba(255,255,255,.92);
      --zp-muted: rgba(255,255,255,.55);
      --zp-accent: #21d7c6; /* teal-ish */
      --zp-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
      --zp-font-inter: "Inter", var(--zp-font-sans);
      --primary-light: rgba(101, 172, 162, 0.25);
      --primary-lighter: rgba(193, 222, 218, 0.8);
      --glass-border: rgba(255,255,255,0.10);
      --glass-shadow: 0 20px 55px rgba(0,0,0,0.65);
      --muted-text: rgba(255,255,255,0.75);
      --border: rgba(255,255,255,0.12);
      --bg: #000;
      --text: #fcfcfc;
    }

:root{
    --bg-panel:
    /* 1. Vertical deep-teal → charcoal → black fade */
    linear-gradient(
      to bottom,
      #176465 0%,     /* dark teal */
      #15494d 18%,
      #152f31 45%,    /* charcoal mid */
      #011c1e 70%,
      #030f16 100%
    ),

    /* 2. Vertical panel bodies */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.035) 0 96px,
      rgba(255,255,255,0.0)   96px 140px
    ),

    /* 3. Panel edge highlights + shadow */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.12) 0 1px,     /* highlight edge */
      rgba(0,0,0,0.0) 1px 94px,
      rgba(0,0,0,0.45) 94px 96px,        /* shadow edge */
      rgba(0,0,0,0.0) 96px 140px
    );

  background-blend-mode: normal, overlay, normal;
}

:root{
   --btn-accent:
    /* highlight sheen */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.02)
    ),
    /* accent body */
    linear-gradient(
      120deg,
      #0b2f31 0%,
      #14797f 25%,
      #0ee3e3 50%,
      #14797f 75%,
      #0b2f31 100%
    );
}

:root{
   --card-accent:
    /* highlight sheen */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.02)
    ),
    /* accent body */
    linear-gradient(
      120deg,
      #0b2f31 0%,
      #14797f 25%,
      #096e6e 50%,
      #14797f 75%,
      #0b2f31 100%
    );
}

/*When applying the above variables Use background-image, not background.*/

html[data-theme="dark"]{
  --bg: #000;
  --text: #fcfcfc;
  --muted-text: rgba(255,255,255,0.75);
  --border: rgba(255,255,255,0.12);
}

body{
    background: var(--zp-bg);
    font-family: "Bai Jamjuree", sans-serif !important;
    color: var(--zp-text);
    font-family: var(--zp-font-sans);
}

.site {
    min-height: 100vh;   /* Full viewport height */
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1 0 auto;             /* Take up remaining space, pushes footer down */
}

ul{list-style: none;}

a {
text-decoration: none;
color: inherit;
}

button {
border: none;
background: none;
cursor: pointer;
font: inherit;
}

    /* -----------------------------
   Floating Navbar (desktop + mobile bar)
------------------------------ */
.floating-nav{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, calc(100% - 48px));
  padding: 12px 18px;
  border-radius: 15px;
  z-index: 9999;

  /* Cinematic glass */
  background: linear-gradient(
    360deg,
    rgba(83, 85, 91, 0.35) 0%,
    rgba(52, 56, 61, 0.68) 40%,
    rgba(65, 69, 73, 0.55) 60%,
    rgba(132, 137, 143, 0.44) 100%
  );

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    var(--glass-shadow);

  border: 1px solid var(--glass-border);

  transition: transform 220ms ease, opacity 220ms ease;
}

.floating-nav::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.035) 0%,
    rgba(0,0,0,0.22) 70%,
    rgba(0,0,0,0.40) 100%
  );
}

.floating-nav.is-hidden{
  transform: translateX(-50%) translateY(-22px);
  opacity: 0;
  pointer-events: none;
}

.floating-nav__inner{ width: 100%; }

/* Logo */
.floating-nav__logo img{
  height: 40px;
  width: auto;
  display: block;
}

@media (max-width: 1025px){
  .floating-nav__logo img{ height: 50px; }
}

/* Mobile centered logo */
.floating-nav__logo--mobile img{
  height: 44px;
  width: auto;
}

/* Nav links */
.nav-linkish{
  color: var(--muted-text);
  text-decoration: none;
  transition: color 150ms ease;
  white-space: nowrap;
}

.nav-linkish:hover{
  color: rgba(255,255,255,0.95);
}

.floating-nav__menu .nav-linkish{
  padding: 2px 12px;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .02em;
}

.floating-nav__menu .nav-linkish.is-active{
  color: #eaffff;
  background: rgba(0, 180, 160, 0.25);
  border: 1px solid rgba(0, 180, 160, 0.25);
}

/* Icon buttons (plain) */
.icon-btn--plain{
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  padding: 6px;
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
}

.icon-btn--plain i{ font-size: 25px; }

.icon-btn--plain:hover{
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Right icon row: keep icons aligned */
#floatingNav .floating-nav__icons,
#floatingNav .d-flex.align-items-center.gap-3{
  display: flex;
  align-items: center;
  gap: 12px;            /* match your design */
  position: relative;
  z-index: 5;
}

/* Normalize icon buttons */
#floatingNav .icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;          /* same hit area */
  height: 42px;
  padding: 0;
  line-height: 1;
}

/* Make sure the fontawesome icons sit centered */
#floatingNav .icon-btn i{
  display: block;
  line-height: 1;
}

/* GTranslate wrapper must behave like an icon */
#floatingNav .gtranslate_wrapper{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;          /* same as icon-btn */
  height: 42px;
  overflow: visible;
}

/* Kill "floating" positioning from widget content */
#floatingNav .gtranslate_wrapper *{
  position: static !important;
  float: none !important;
}

/* If the widget outputs an <img> flag, keep it sized */
#floatingNav .gtranslate_wrapper img{
  width: 22px !important;
  height: 22px !important;
  display: block;
  border-radius: 999px;
}

/* If it outputs a <select> dropdown, keep it neat */
#floatingNav .gtranslate_wrapper select{
  height: 34px;
  border-radius: 999px;
}


/* Accessibility helper */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* WP menu output inside floating nav */
#floatingNav .primary-menu,
#floatingNav .floating-nav__menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem; /* match your design */
  align-items: center;
}

#floatingNav .primary-menu li,
#floatingNav .floating-nav__menu .menu li {
  margin: 0;
  padding: 0;
}

#floatingNav .primary-menu a,
#floatingNav .floating-nav__menu .menu a {
  text-decoration: none;
  font-size: 18px;
  /* apply what you used on .nav-linkish */
}

/*------- Constrain the WP custom logo size ---------*/
#floatingNav .custom-logo-link,
#floatingNav .floating-nav__logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

#floatingNav img.custom-logo {
  width: auto;
  height: 34px;   /* choose your header height */
  max-height: 34px;
}

/* MOBILE preference: show language, hide mobile search icon */
@media (max-width: 991.98px){
  #floatingNav #search-open-mobile{ 
    display: none !important;
  }

  #floatingNav .floating-nav__lang{
    display: inline-flex !important;
    align-items: center;
  }
}

/* DESKTOP: keep both search + language visible */
@media (min-width: 992px){
  #floatingNav .floating-nav__lang{
    display: inline-flex !important;
    margin-top: 8px;
  }
}



    /* -----------------------------
       Hero Video Section
    ------------------------------ */
    .hero-video{
      position: relative;
      min-height: 100vh;
      width: 100%;
      overflow: hidden;
      background: #000;
      display: flex;
      align-items: center;
    }

    .hero-video__media{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .hero-video__overlay{
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.30)
      );
    }

    .hero-video__content{
      position: relative;
      z-index: 2;
      padding-top: 140px;
      padding-bottom: 80px;
      color: #fff;
    }

    /* If you keep a main wrapper below hero */
    .page-content{ padding-top: 0; }

 /* ==================================================
               SEARCH OVERLAY 
====================================================== */
    .search-overlay {
      position: fixed;
      inset: 0;                      /* full screen */
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 65px;             /* drop a bit below header */

      background: rgba(0, 0, 0, 0.7);/* darker backdrop */

      opacity: 0;
      visibility: hidden;
      transform: translateY(-20px);  /* slide from top */
      transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s linear 0.35s;  /* hide after animation */
      z-index: 999;
    }

    .search-overlay.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0s;              /* show immediately */
    }

    .search-overlay-inner {
      position: relative;
      width: 70%;
      margin-top: 55px;
      /*max-width: 1200px;
      padding: 0 20px;*/
    }
    
    @media(max-width: 1025px){
      .search-overlay-inner{
        margin-top: 40px;
      }
    }

    /* Red panel that looks like your screenshot */
    .search-panel {
      width: 100%;
      background-image: var(--bg-panel);
      padding: 40px 24px 60px;
      border-bottom-left-radius: 32px;
      border-bottom-right-radius: 32px;
    }

    /* Close button – far top-right, away from the bar */
    .search-close {
      position: absolute;
      top: 10px;
      right: 8px;

      background: none;
      border: none;
      font-size: 22px;
      color: #bcbcbc;
      cursor: pointer;
    }

    /* Search box wrapper */
    .search-box {
      width: 100%;
      margin-top: 20px;

      background: rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 16px 20px;

      display: flex;
      align-items: center;
    }

    /* Make the form fill the search-box and behave like an input + icon bar */
    .search-overlay-form {
      display: flex;
      align-items: center;
      width: 100%;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      padding: 0 0 0 1.25rem;  /* left padding for text, none on right (button touches edge) */
      box-sizing: border-box;
    }

    /* Input */
    .search-overlay-form .search-input {
      flex: 1;
      border: none;
      background: transparent;
      color: #fff;
      font-size: 16px;
      font-weight: 300;
      outline: none;
    }

    /* Placeholder color tweak (optional) */
    .search-input::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

    /* Search icon button */
    .search-overlay-form .search-submit {
      background: none;
      border: none;
      width: 45px;
      height: 45px;
      color: #fff;
      cursor: pointer;
    }

    /* =========================================================
   MOBILE MENU OVERLAY (NEW LAYOUT)
   - #mobileMenu is a fixed full-viewport wrapper
   - #mobileMenuBackdrop is absolute inset:0 INSIDE wrapper
   - Panel is positioned above backdrop
   ========================================================= */

/* Overlay wrapper controls visibility */
#mobileMenu{
  position: fixed;
  inset: 0;
  z-index: 10000;

  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

#mobileMenu.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop fills wrapper (example-site pattern) */
#mobileMenuBackdrop{
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(1.2px) saturate(180%);
  -webkit-backdrop-filter: blur(1.2px) saturate(180%);
}

/* Panel above backdrop */
.mobile-menu__panel{
  position: relative;
  z-index: 1;

  width: min(520px, calc(100% - 28px));
  margin: 18px auto 0;
  padding: 18px 16px 20px;
  border-radius: 22px;

  background: linear-gradient(
    180deg,
    rgba(7,10,14,0.92),
    rgba(7,10,14,0.88)
  );

  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);

  box-shadow: 0 24px 70px rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Search row */
.mobile-menu__search{
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  gap: 10px;
  align-items: center;

  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 0 10px;
  background: rgba(255,255,255,0.04);
}

.mobile-menu__close,
.mobile-menu__searchBtn{
  height: 40px;
  width: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,0.85);
}

.mobile-menu__input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font-size: 16px;
}

.mobile-menu__input::placeholder{
  color: rgba(255,255,255,0.35);
}

/* Big stacked links */
.mobile-menu__links{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-menu__links a{
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  font-size: 25px;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mobile-menu__links i{
  margin-top: 10px;
  font-size: 18px;
  color: rgba(255,255,255,0.35);
}

/* Image section at bottom of mobile menu */
.mobile-menu__image{
  margin-top: 26px;
  /*padding-top: 18px;*/
  background: #000;
  height: 280px;
  overflow: hidden;
  display: flex;
  justify-content: center;

  /* subtle separation from links */
  border-top: 1px solid rgba(255,255,255,0.25);
}

.mobile-menu__image img{
  width: 100%;
  max-width: 360px;
  height: 100%;
  object-fit: cover;
  object-position: center top;

  /* slight lift like reference */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.65));
}

/* Brand logo strip under mobile menu image */
.mobile-menu__brands{
  /*margin-top: 18px;*/
  padding-top: 14px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.mobile-menu__brands img{
  width: 100%;
  max-width: 420px;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transform: scale(1.5);
  opacity: 0.85;
  filter: brightness(1.3) contrast(1.8)
          drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}



      /* HERO VIDEO SECTION */
      .hero-video {
        position: relative;
        min-height: 100vh;
        width: 100%;
        overflow: hidden;
        background: #000; /* fallback */
        display: flex;
        align-items: center;
      }

      /* Video fills hero */
      .hero-video__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
      }

      /* Dark overlay for readability */
      .hero-video__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.25),
          rgba(0, 0, 0, 0.3)
        );
      }

      /* Content on top */
      .hero-video__content {
        position: relative;
        z-index: 2;
        padding-top: 140px; /* space for floating nav */
        padding-bottom: 80px;
        color: #fff;
      }

      /* Ensure navbar is always above the video */
      .floating-nav {
        z-index: 9999;
      }

      /* Optional: remove the old top padding if you previously used it */
      .page-content {
        padding-top: 0; /* hero handles spacing now */
      }


/*==========================================================================================
                   GTRANSLATE LANGUAGE SWITCHER
============================================================================================*/
/* Position the floating wrapper in the header */
#gt_float_wrapper {
    position: fixed !important;
    top: 19px !important;
    right: 50px !important;   /* tweak this to move left/right */
    z-index: 1100 !important;
    margin: 0 !important;
}

/* Remove default pill styling */
#gt_float_wrapper .gt_float_switcher {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
}

/* circular flag ONLY on the main button (not on dropdown rows) */
#gt_float_wrapper .gt_float_switcher > .gt-selected {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 2px solid #ffffff !important;
    padding: 0 !important;
}

/* flag inside the circle */
#gt_float_wrapper .gt_float_switcher > .gt-selected img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* hide text + arrow only inside the main button */
#gt_float_wrapper .gt_float_switcher > .gt-selected .gt-current-lang span,
#gt_float_wrapper .gt_float_switcher > .gt-selected .gt-lang-code,
#gt_float_wrapper .gt_float_switcher > .gt-selected .gt_float_switcher-arrow {
    display: none !important;
}

/* Position the dropdown list under the circle */
#gt_float_wrapper .gt_float_switcher .gt_options .gt-open {
    right: 0 !important;
    margin-top: 6px !important;
}

/* Slightly reduce logo to give breathing room */
.hellper-logo img {
    width: 220px;
}

/* dropdown panel: solid background, shadow, etc. */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open {
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25) !important;
    padding: 4px 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* each language row */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 12px !important;
    color: #051d36 !important;          /* Hellper navy-ish */
    font-size: 13px !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* flags inside dropdown list */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl img {
    width: 20px !important;
    height: 14px !important;
    border-radius: 2px !important;
    object-fit: cover !important;
}

/* show text again inside dropdown rows (override any "display:none") */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl span {
    display: inline !important;
}

/* hover / active state */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl:hover {
    background: rgba(5, 29, 54, 0.06) !important;
}

@media(max-width:1025px){
  #gt_float_wrapper{
    right: 100px !important;
  }
}

@media(max-width:768px){
  #gt_float_wrapper{
    right: 80px !important;
  }
}
@media(max-width:550px){
  #gt_float_wrapper{
    right: 70px !important;
  }
}

/* ========= Zeppard-themed overrides (minimal changes) ========= */

/* Main circle button: darker glass + accent border 
#gt_float_wrapper .gt_float_switcher > .gt-selected{
  background: rgba(3, 22, 24, 0.55) !important;
  border: 1px solid rgba(0, 210, 190, 0.55) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}*/

#gt_float_wrapper .gt_float_switcher .gt_options{
  max-height: 350px !important;
}

/* Dropdown panel: dark glass + accent border */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open{
    margin-top: 350px;
  background: rgba(32, 97, 87, 0.95) !important;
  border: 1px solid rgba(0, 210, 190, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 6px 0 !important;
}

/* Language rows: light text, slightly bolder, cleaner spacing */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl{
  color: rgba(235, 250, 248, 0.92) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  padding: 8px 12px !important;
}

/* Divider between language rows */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl {
  position: relative;
}

/* Subtle divider line */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: rgba(195, 226, 221, .25);
}

/* Remove divider on last item */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl:last-child::after {
  display: none;
}

/* Hover: subtle teal glow background */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl:hover{
  background: rgba(0, 210, 190, 0.14) !important;
}

/* Current/active language row (nice “selected” state if plugin adds gt-current) */
#gt_float_wrapper .gt_float_switcher .gt_options a.gt-current,
#gt_float_wrapper .gt_float_switcher .gt_options .gt-current{
  background: rgba(0, 210, 190, 0.22) !important;
}

/* Dropdown flags: slightly cleaner + consistent */
#gt_float_wrapper .gt_float_switcher .gt_options.gt-open .nturl img{
  border-radius: 3px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
}


/*==========================================================================================
                         STICKY SOCIAL MEDIA ICONS(Desktop)
============================================================================================*/  
/* Sticky social bar (desktop) */
.hb-social-bar {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .hb-social-bar {
    top: 40%;
  }
}

/* Hide on tablets/phones 
@media (max-width: 991.98px) {
  .hb-social-bar {
    display: none;
  }
}*/

/* Base icon style */
.hb-social-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  border-radius: 0 999px 999px 0;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.25s ease;
}

/* On hover → background turns white, icon turns to brand color */
.hb-social-link:hover {
  background: #ffffff;
  transform: translateX(4px);
}

/* ===== Brand Colors (default) & Hover Icon Colors ===== */

/* Facebook */
.hb-social-facebook { background-color: #1877f2; }
.hb-social-facebook:hover i { color: #1877f2; }

/* Instagram */
.hb-social-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.hb-social-instagram:hover i { color: #d6249f; }

/* LinkedIn */
.hb-social-linkedin { background-color: #0a66c2; }
.hb-social-linkedin:hover i { color: #0a66c2; }

/* WhatsApp */
.hb-social-whatsapp { background-color: #25d366; }
.hb-social-whatsapp:hover i { color: #25d366; }

/* YouTube */
.hb-social-youtube { background-color: #ff0000; }
.hb-social-youtube:hover i { color: #ff0000; }

/* TikTok */
.hb-social-tiktok {
  background-color: #000000;
}
.hb-social-tiktok:hover i {
  color: #000000;
}
/*==========================================================================================
                         FLOATING BUTTONS (WhatsApp & WeChat)
============================================================================================*/ 
/* Floating Buttons Wrapper */
.hb-floating-contacts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

/* Button Base Style */
.hb-contact-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* WhatsApp Styling */
.hb-whatsapp {
    background: #25D366;
}
.hb-whatsapp:hover {
    background: #fff;
    color: #25D366;
}

/* WeChat Styling */
.hb-wechat {
    background: #09b83e;
}
.hb-wechat:hover {
    background: #fff;
    color: #09b83e;
}

/* WeChat Modal */
.hb-wechat-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.hb-wechat-modal.active {
    display: flex;
}

.hb-wechat-content {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    animation: fadeUp .3s ease;
}

.hb-wechat-content img {
    width: 200px;
    height: 200px;
}

/* Popup animation */
@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* =============================================================================== 
                                CONTACT US PAGE
================================================================================= */
/* HEADER (already styled in your main CSS) */
.hb-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.hb-header .navbar-brand span {
    font-weight: 700;
    letter-spacing: 0.05em;
}

.hb-header .nav-link {
    font-weight: 500;
    color: #f9fafb;
}

.hb-header .nav-link:hover,
.hb-header .nav-link.active {
    color: var(--hb-red);
}

/* HERO / BANNER */
.contact-hero {
    position: relative;
    margin-top: 2rem;
    height: 300px;
    color: #ffffff;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
    overflow: hidden;
}

.contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("./assets/images/contact-us-banner.jpeg");
    background-size: cover;
    background-position: center;
    filter: brightness(0.4);
    transform: scale(1.03);
}

.contact-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.15)
    );
}

.contact-hero-content {
    position: relative;
    z-index: 1;
}

.contact-hero-title {
    font-size: clamp(2.4rem, 3vw, 3rem);
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.contact-hero-breadcrumb a {
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.9rem;
}

.contact-hero-breadcrumb i {
    font-size: 0.75rem;
    margin: 0 0.35rem;
}

.contact-hero-breadcrumb a:hover {
    color: #ffffff;
}

/* MAIN SECTION */
.contact-section {
    padding: 60px 0 80px;
    background-image: var(--bg-panel);
    color: #ffffff;
}

.section-label {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-lighter);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.section-title {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

.section-lead {
    color:  rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    max-width: 480px;
}

.contact-info-item {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    align-items: flex-start;
}

.contact-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    flex-shrink: 0;
}

.contact-info-title {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 4px;
}

.contact-info-text {
    font-size: 0.95rem;
    color: var(--primary-lighter);
}

.contact-info-text a {
    color: #ffffff;
    text-decoration: none;
}

.contact-info-text a:hover {
    color: #ffe5e9;
}

.social-links {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.social-links a {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
}

.social-links a:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--primary);
    transform: translateY(-1px);
}

/* SIMPLE QUOTE FORM CARD (new design) */
.contact-form-card {
    background-image: var(--card-accent);
    border-radius: 24px;
    padding: 32px 28px 28px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    text-align: center;
}

.quote-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
}

.quote-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.quote-subtitle {
    font-size: 0.9rem;
    color: var(--primary-light);
    margin-bottom: 24px;
}

.quote-form-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.simple-input,
.simple-textarea {
    width: 100%;
    background: var(--primary-lighter);
    border-radius: 15px;
    border: none;
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    color: #385351;
    outline: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.simple-textarea {
    border-radius: 18px;
    resize: vertical;
    min-height: 120px;
}

.simple-input::placeholder,
.simple-textarea::placeholder {
    color: #385351;
}

.simple-input:focus,
.simple-textarea:focus {
    background: #e1f7f6;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.btn-quote {
    border-radius: 15px;
    border: none;
    padding: 0.85rem 1.2rem;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.06em;
    text-transform: none;
    background: #ffffff;
    color: var(--primary);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.btn-quote:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.btn-quote span.arrow {
    font-size: 1rem;
}

.quote-note {
    font-size: 0.78rem;
    color: var(--primary-lighter);
    margin-top: 6px;
    text-align: left;
}

@media (max-width: 991.98px) {
    .contact-section {
    padding: 40px 0 60px;
    }

    .contact-form-card {
    margin-top: 20px;
    }
}

@media (max-width: 575.98px) {
    .contact-hero {
    height: 220px;
    padding-bottom: 30px;
    }

    .contact-form-card {
    padding: 24px 20px 22px;
    }
}

/* =============================================================================== 
                                FOOTER
================================================================================= */
.cta-section{
    background-image: var(--bg-panel);
    color:#fff;
    padding: 54px 0;
}
.kpi-card{
    background-image: var(--btn-accent);
    border:1px solid #caeae5;
    border-radius:1rem;
}
/*.kpi-card i{color: #23897a;}*/
.testimonial-cta{
    background-image: var(--bg-panel);
    /*box-shadow: 0 16px 40px rgba(67,172,156,.35);*/
}

/* ====== FOOTER ====== */
.footer-logo{
    height:48px; width:auto;
}
.footer-link{
    color: rgba(255,255,255,.7);
    text-decoration:none;
    transition: color .15s ease;
}
.footer-link:hover{ color:#fff }
.border-white-10{ border-color: rgba(255,255,255,.12)!important }
.footer-socials {
    flex-wrap: wrap;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-social-link img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.footer-social-link:hover {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transform: translateY(-1px);
}
.footer-contact-icon {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    margin-top: 3px; /* aligns icon with text baseline */
}
.footer-icon-box {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all .2s ease;
}

.footer-icon-box i {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.footer-icon-box:hover {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transform: translateY(-1px);
}

.footer-icon-box:hover i {
    color: #0b0d12; /* dark background color so icon stays visible */
}

@media(max-width: 1025px){
    .footer-logo{ height: 32px;}
}


/* ============================================
****                                  ****
             FRONT PAGE STYLING 
****                                  ****
============================================ */

/* === CORE VALUE PROPOSITION === */
    .zp-core{
      position: relative;
      padding: 56px 0 44px;
      color: rgba(255,255,255,.92);
      overflow: hidden;

      /* Background image */
      background-image: url("assets/images/bg-img.png");
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
    }
/* Head */
    .zp-core-head{
      position: relative;
      padding-right: 62px; /* room for corner button */
    }

    /* Base title */
    .zp-core-title{
      margin: 0;
      font-family: var(--zp-font-inter);
      font-weight: 700;
      letter-spacing: -0.5px;
      line-height: 1.05;
      font-size: clamp(30px, 3.2vw, 54px);
      text-transform: uppercase;
      color: #ffffff;
      text-shadow: 0 26px 70px rgba(0,0,0,.55);
    }

    /* Gradient line (matches original) */
    .zp-core-title-gradient{
      display: inline-block;

      background: linear-gradient(
        90deg,
        #2ee6d6 0%,     /* bright teal (left) */
        #21d7c6 35%,    /* Zeppard teal */
        #7fbdb6 70%,    /* muted green-teal */
        #a6c9c5 100%    /* soft fade */
      );

      -webkit-background-clip: text;
      background-clip: text;

      -webkit-text-fill-color: transparent;
      color: transparent;

      text-shadow: none; /* gradient stays crisp */
    }

    .zp-core-title-gradient{
      filter: drop-shadow(0 6px 18px rgba(33,215,198,.25));
    }


    .zp-core-title-accent{
      color: rgba(33,215,198,.75);
    }

    /* Divider under title */
    .zp-core-divider{
      margin-top: 18px;
      height: 1px;
      background: linear-gradient(90deg, rgba(33,215,198,0), rgba(33,215,198,.35), rgba(33,215,198,0));
      opacity: .7;
    }

    /* Rows container */
    .zp-core-rows{
      margin-top: 18px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    /* Each row */
    .zp-core-row{
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
      gap: 24px;
      padding: 26px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
      align-items: center;
    }

    /* Left (icon + label) */
    .zp-core-left{
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .zp-core-label{
      font-family: var(--zp-font-sans); /* matches body look in mock */
      font-weight: 400;
      letter-spacing: .02em;
      text-transform: uppercase;
      font-size: 22px;
      line-height: 1.15;
    }

    /* Right description */
    .zp-core-right{
      font-family: var(--zp-font-sans);
      color: rgba(255,255,255,.62);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.5;
    }

    /* Icon container */
    .zp-core-ico{
      width: 56px;
      height: 56px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(33,215,198,.12);
      border: 1px solid rgba(33,215,198,.22);
      box-shadow:
        0 18px 50px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.05) inset;
    }

    /* Simple placeholder shapes (swap with SVG icons later) */
    .zp-ico-shape{
      display: block;
      width: 26px;
      height: 26px;
      background: rgba(33,215,198,.65);
      filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
      opacity: .85;
      border-radius: 6px;
    }

    .zp-ico-grid{
      mask: radial-gradient(circle at 25% 25%, #000 52%, transparent 54%) 0 0/50% 50%,
            radial-gradient(circle at 75% 25%, #000 52%, transparent 54%) 0 0/50% 50%,
            radial-gradient(circle at 25% 75%, #000 52%, transparent 54%) 0 0/50% 50%,
            radial-gradient(circle at 75% 75%, #000 52%, transparent 54%) 0 0/50% 50%;
      -webkit-mask: radial-gradient(circle at 25% 25%, #000 52%, transparent 54%) 0 0/50% 50%,
            radial-gradient(circle at 75% 25%, #000 52%, transparent 54%) 0 0/50% 50%,
            radial-gradient(circle at 25% 75%, #000 52%, transparent 54%) 0 0/50% 50%,
            radial-gradient(circle at 75% 75%, #000 52%, transparent 54%) 0 0/50% 50%;
    }

    .zp-ico-diamond{
      transform: rotate(45deg);
      border-radius: 5px;
    }

    .zp-ico-lock{
      width: 22px;
      height: 22px;
      border-radius: 6px;
      position: relative;
    }

    .zp-ico-lock::before{
      content:"";
      position:absolute;
      width: 16px;
      height: 12px;
      left: 50%;
      top: -8px;
      transform: translateX(-50%);
      border: 3px solid rgba(33,215,198,.65);
      border-bottom: none;
      border-radius: 10px 10px 0 0;
    }

    .zp-ico-card{
      border-radius: 8px;
      position: relative;
    }

    .zp-ico-card::before{
      content:"";
      position:absolute;
      left: 4px;
      right: 4px;
      top: 7px;
      height: 3px;
      background: rgba(0,0,0,.25);
      border-radius: 999px;
    }

    /* Responsive */
    @media (max-width: 992px){
      .zp-core-row{
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .zp-core-label{
        font-size: 18px;
      }
      .zp-core-right{
        font-size: 14px;
      }
    }

    @media (max-width: 576px){
      .zp-core{
        padding: 44px 0 34px;
      }
      .zp-core-title{
        font-size: 28px;
      }
      .zp-core-corner{
        top: 0;
      }
      .zp-core-ico{
        width: 52px;
        height: 52px;
      }
    }

    /* Headings */
    .zp-showcase-title,
    .zp-feature-name,
    h1, h2, h3{
      font-family: var(--zp-font-sans);
      font-weight: 600;
      letter-spacing: 0.14em;
    }

    /* Body copy */
    .zp-showcase-text,
    p{
      font-family: var(--zp-font-sans);
      font-weight: 300;
      letter-spacing: 0;
    }
/* ============================================
   TEAM SECTION 
   ============================================ */

.zp-team-section{
  position: relative;
  padding: 10px 0 72px;
  overflow: hidden;
}

.zp-team-row{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 2.5vw, 30px);

  /* KEY: reserve max height so expanding doesn’t push content below */
  min-height: 520px; /* 480 active height + 40px translateY */
}

/* Base portrait pill (small state) */
.zp-portrait{
  position: relative;
  width: 150px;
  height: 410px; /*Acts as height of featured image when not in active stste */
  border-radius: 999px;
  overflow: hidden;

  background: var(--zp-card);
  border: 1px solid var(--zp-stroke);
  box-shadow: 0 14px 30px rgba(0,0,0,.55);

  filter: saturate(0);
  opacity: .45;

  cursor: pointer;

  transition-property: width, height, transform, opacity, filter, box-shadow, border-color;
  transition-duration: 600ms, 600ms, 600ms, 260ms, 260ms, 360ms, 360ms;
  transition-timing-function: cubic-bezier(.18,.9,.18,1);
  
  will-change: width, height, transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.zp-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* glass highlight */
.zp-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,0) 35%, rgba(0,0,0,.25));
  pointer-events:none;
}

/* Accent line */
.zp-accent-line{
  position: relative;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(33,215,198,0), rgba(33,215,198,.35), rgba(33,215,198,0));
  margin-top: 72px;
  opacity: .7;
}

/* ACTIVE (big pill) — the ONLY rule that makes it big */
.zp-portrait.is-active{
  width: 330px;
  height: 480px;
  transform: translateY(40px);

  opacity: 1;
  filter: saturate(1);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 26px 60px rgba(0,0,0,.70),
    0 0 0 1px rgba(255,255,255,.06) inset;
  z-index: 2;
}

/* Glow ring only for active */
.zp-portrait.is-active::before{
  content:"";
  position:absolute;
  inset:-22%;
  background: radial-gradient(circle at 50% 55%, rgba(33,215,198,.20), rgba(33,215,198,0) 55%);
  filter: blur(18px);
  z-index: 0;
  pointer-events:none;
}

.zp-portrait.is-active img{
  position: relative;
  z-index: 1;
}

/* Dim others while interacting */
.zp-team-row.has-active .zp-portrait:not(.is-active){
  opacity: .35;
  filter: saturate(0);
  transform: translateY(0);
  transition-property: opacity, filter, transform;
  transition-duration: 0ms, 0ms, 40ms;
  transition-timing-function: cubic-bezier(.18,.9,.18,1);
}

/* Show overlay only on active */
.zp-feature-meta{
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%) translateY(10px);
  width: min(85%, 320px);
  text-align: center;
  z-index: 2;

  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.zp-portrait.is-active .zp-feature-meta{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Stagger heights ONLY when not active (keeps your original look) */
.zp-portrait.sm1:not(.is-active){ height: 285px; margin-bottom: 60px; }
.zp-portrait.sm2:not(.is-active){ height: 350px; margin-bottom: 26px; }
.zp-portrait.sm3:not(.is-active){ height: 350px; margin-bottom: 26px; }
.zp-portrait.sm4:not(.is-active){ height: 285px; margin-bottom: 60px; }

/* When a staggered one becomes active, remove the margin-bottom so baseline matches */
.zp-portrait.is-active.sm1,
.zp-portrait.is-active.sm2,
.zp-portrait.is-active.sm3,
.zp-portrait.is-active.sm4{
  margin-bottom: 0;
}


/* ============================================
   MOBILE/TABLET: turn row into horizontal snap carousel
   ============================================ */
/* ============================================
   MOBILE: 3-visible carousel like Figma
   - big centered active
   - side neighbors visible
   - outer items appear on scroll
   ============================================ */
@media (max-width: 900px){
  .zp-team-row{
    position: relative;
    z-index: 1;
    height: 400px;
    /* sizing variables */
    --activeW: min(72vw, 160px);
    --activeH: min(92vw, 300px);
    --inactiveW: 104px;
    --inactiveH: 190px;

    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 14px;

    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* THIS is the key: create equal “gutters” so center snap is true center */
    padding-block: 10px 18px;
    padding-inline: calc((100vw - var(--activeW)) / 2);
    scroll-padding-inline: calc((100vw - var(--activeW)) / 2);

    min-height: 0;

    /* optional: nicer edge fade so it looks intentional */
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 8%,
      #000 92%,
      transparent 100%
    );
    scrollbar-width: none;
  }
  .zp-team-row::-webkit-scrollbar{ display:none; }

  /* base (inactive) */
  .zp-portrait{
    flex: 0 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;

    width: var(--inactiveW);
    height: var(--inactiveH);

    margin-bottom: 0;   /* kill stagger on mobile */
    transform: none;
  }

  /* kill stagger heights on mobile */
  .zp-portrait.sm1:not(.is-active),
  .zp-portrait.sm2:not(.is-active),
  .zp-portrait.sm3:not(.is-active),
  .zp-portrait.sm4:not(.is-active){
    height: var(--inactiveH);
    margin-bottom: 0;
  }

  /* active (big center) */
  .zp-portrait.is-active{
    width: var(--activeW);
    height: var(--activeH);
    transform: none;
  }

  .zp-feature-meta{
    bottom: 22px;
    width: min(88%, 320px);
  }

  .zp-accent-line{ margin-top: 34px; }
}

@media (max-width: 480px){
  .zp-team-row{
    --activeW: min(78vw, 180px);
    --activeH: min(108vw, 300px);
    --inactiveW: 96px;
    --inactiveH: 175px;

    gap: 12px;
    padding-inline: calc((100vw - var(--activeW)) / 2);
    scroll-padding-inline: calc((100vw - var(--activeW)) / 2);
  }
}


/* ============================================
   SMALL PHONES: slightly smaller pills + tighter padding
   ============================================ */
@media (max-width: 480px){
  .zp-team-row{
    gap: 12px;
    padding: 6px 14px 16px;
    scroll-padding-inline: 14px;
  }

  .zp-portrait{
    width: 108px;
    height: 200px;
  }

  .zp-portrait.is-active{
    width: min(80vw, 150px);
    height: min(110vw, 300px);
  }
}


@media (prefers-reduced-motion: reduce){
  .zp-portrait, .zp-feature-meta { transition: none !important; }
}



  /*================================================
                 PRODUCT SLIDER SECTION 
  ==================================================*/
    /* === SHOWCASE (Image Top, Text + Controls Bottom) === */
  .zp-showcase{
    padding: 40px 0 0px;
    background: #050607;
  }



  .zp-showcase-card{
    position: relative;
    background: transparent;
  }

  /* Top image area */
  .zp-showcase-carousel{
    position: relative;
  }

  .zp-showcase-img{
    width: 100%;
    height: clamp(320px, 45vw, 520px); /* similar to mock */
    object-fit: cover;
    display: block;
    border-radius: 0; /* mock looks square */
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
  }
  
  /* Bottom block: title + controls on same line, text full width below */
    .zp-showcase-bottom{
      padding-top: 18px; /* tight like mock */
    }

    .zp-showcase-topline{
      display: flex;
      align-items: center; /* same line */
      justify-content: space-between;
      gap: 18px;
    }

    /* Title */
    .zp-showcase-title{
      margin: 0;
      font-size: 25px;
      letter-spacing: .12em;
      font-weight: 600;
      color: rgba(255,255,255,.92);
      text-transform: uppercase;
    }

    /* Full width paragraph below */
    .zp-showcase-text{
      margin: 12px 0 0;  /* small gap under topline */
      font-size: 16px;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,.55);
      max-width: none;  /* IMPORTANT: allow full width */
    }

/* ================================
   ZP SHOWCASE – GLASS CONTROLS CSS
================================== */
.zp-showcase{
  padding: 70px 0;
}

.zp-showcase-card{
  border-radius: 22px;
  overflow: hidden;
  /*background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);*/
}

.zp-showcase-carousel{
  width: 100%;
}

.zp-showcase-img{
  width: 100%;
  height: 520px;            /* adjust */
  object-fit: cover;
}

.zp-showcase-bottom{
  padding: 22px 22px 26px;
}

.zp-showcase-topline{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}

.zp-showcase-title{
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
}

.zp-showcase-text{
  margin: 14px 0 0;
  max-width: 100%;
  opacity: 0.9;
}

/* ===== Glass pill (your exact control style) ===== */
.glass-pill{
  width: 150px;
  height: 43px;
  border-radius: 999px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  overflow: hidden;

  background: rgba(27, 58, 61, 0.39);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -10px 20px rgba(0,0,0,0.22),
    0 10px 25px rgba(0,0,0,0.25);
}

/* Center fog / shine */
.glass-pill::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(90px 60px at 50% 50%,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.18) 28%,
      rgba(255,255,255,0.06) 45%,
      rgba(255,255,255,0.00) 62%);
  filter: blur(1px);
  opacity: .9;
  pointer-events:none;
}

/* Top sweep */
.glass-pill::after{
  content:"";
  position:absolute;
  left:-30%;
  top:-60%;
  width:160%;
  height:160%;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.00) 60%);
  transform: rotate(8deg);
  pointer-events:none;
}

.glass-pill > *{
  position: relative;
  z-index: 1;
}

/* Arrows */
.glass-arrow{
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
  opacity: .85;
  cursor: pointer;
}

.glass-arrow img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

.glass-arrow:hover{
  background: rgba(255,255,255,0.06);
  opacity: 1;
  transform: translateY(-1px);
}

.glass-arrow:active{
  transform: translateY(0) scale(0.98);
}

.glass-arrow:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.20);
}

/* Optional: disabled at ends if you want */
.glass-arrow:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* Dots */
.glass-dots{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 6px;
}

.glass-dot{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 2px rgba(0,0,0,0.20);
}

.glass-dot.active{
  background: rgba(255,255,255,0.98);
  box-shadow:
    0 0 10px rgba(255,255,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 2px rgba(0,0,0,0.22);
}

@media(max-width: 768px){
   .glass-pill {
    width: 110px;
    height: 33px;
    position: absolute;
    bottom: 35%;
    right: 5px;
   }
   .glass-arrow img{
    width: 12px;
    height: 12px;
   }
   .glass-dot{
    width: 12px;
    height: 12px;
   }
}

/* Mobile */
@media (max-width: 576px){
  .zp-showcase-topline{
    flex-wrap: wrap;
    row-gap: 12px;
  }
}


  /* === BRAND LOGOS STRIP === */
  .zp-brand-strip{
    padding: 26px 0;
    background: #050607;
  }

  .hero-brand-strip{
    padding: 0;
    background: #000;
  }

  /* thin glowing separators */
  .zp-brand-line{
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(33,215,198,0),
      rgba(33,215,198,.35),
      rgba(33,215,198,0)
    );
    opacity: .6;
  }

  /* logo container */
  .zp-brand-logos{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 0;
  }

  .hero-brand-logos{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  /* single image styling */
  .zp-brand-logos img,
  .hero-brand-logos img{
    max-width: 100%;
    height: auto;
    opacity: .85;
    filter:
      grayscale(1)
      brightness(1.05)
      contrast(1.05);
    transition: opacity .25s ease, filter .25s ease;
  }

  /* subtle hover lift (optional, still premium) */
  .zp-brand-logos img:hover{
    opacity: 1;
    filter:
      grayscale(0)
      brightness(1.1)
      contrast(1.1);
  }

  /* responsive tightening */
  @media (max-width: 768px){
    .zp-brand-strip{
      padding: 20px 0;
    }

    .zp-brand-logos{
      padding: 14px 0;
    }
  }

  /* ===== SECTION WRAPPER ===== */
    /* Left card overlay typography = Inter (per Figma) */
    .zp-card-content .zp-eyebrow,
    .zp-card-content .zp-title,
    .zp-card-content .zp-subtitle,
    .zp-card-content .zp-mini-btn{
      font-family: var(--zp-font-inter);
    }

    .zp-feature-top{
      padding: 64px 0 24px;
      background: radial-gradient(70% 55% at 30% 0%, rgba(33,215,198,.10), transparent 60%),
                  radial-gradient(60% 45% at 75% 15%, rgba(255,255,255,.06), transparent 60%),
                  #050607;
    }

    /* ===== CARD BASE ===== */
    .zp-card{
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 30px 80px rgba(0,0,0,.65);
      background: rgba(255,255,255,.02);
      min-height: 480px; /* desktop square-ish */
      isolation: isolate; /* keep overlays clean */
    }

    .zp-card::after{
      /* subtle vignette like the mock */
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.65));
      pointer-events:none;
      z-index: 1;
    }

    .zp-card img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: cover;
      transform: scale(1.02);
      filter: saturate(1.05) contrast(1.05);
    }

    /* ===== OVERLAY CONTENT (LEFT CARD) ===== */
    .zp-card-content{
      position: relative;
      z-index: 2;
      height: 100%;
      padding: 34px 34px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 14px;
    }

    .zp-eyebrow{
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
    }

    .zp-title{
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: .2px;
      margin: 0;
      max-width: 380px;
      text-shadow: 0 18px 40px rgba(0,0,0,.55);
    }

    .zp-subtitle{
      margin: 0;
      max-width: 350px;
      font-size: 12px;
      line-height: 1.6;
      color: rgba(255,255,255,.62);
      text-shadow: 0 18px 40px rgba(0,0,0,.55);
    }

    .zp-mini-btn{
      align-self: flex-start;
      margin-top: 6px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.35);
      color: rgba(255,255,255,.85);
      font-size: 12px;
      text-decoration: none;
      box-shadow: 0 18px 40px rgba(0,0,0,.45);
    }

    .zp-mini-btn:hover{
      color: #fff;
      border-color: rgba(255,255,255,.22);
    }

    /* ===== RIGHT FEATURE CARD (SF font + centered like mock) ===== */
    .zp-card-right{
      border: 1px solid rgba(255,255,255,.22);
    }

    /* Center block */
    .zp-right-center{
      position: relative;
      z-index: 2;
      height: 100%;
      padding: 150px 34px 34px;

      display: flex;
      flex-direction: column;
      justify-content: center;   /* vertical center */
      align-items: center;       /* horizontal center */
      text-align: center;
      gap: 14px;

      font-family: var(--zp-font-sf); /* San Francisco stack */
    }

    /* Title */
    .zp-right-title{
      margin: 0;
      font-size: 30px;
      line-height: 1.15;
      font-weight: 500; /* SF-style */
      color: rgba(255,255,255,.92);
      text-shadow: 0 18px 40px rgba(0,0,0,.55);
    }

    /* Body */
    .zp-right-text{
      margin: 0;
      max-width: 420px;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 400;
      color: rgba(255,255,255,.70);
      text-shadow: 0 18px 40px rgba(0,0,0,.55);
    }

    /* CTA pill (centered) */
    .zp-right-cta{
      margin-top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 14px;

      padding: 1px 0px 1px 5px;
      border-radius: 10px;
      text-decoration: none;

      background: rgba(0,0,0,.30);
      border: 1px solid rgba(33,215,198,.40);

      box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.05) inset;

      font-family: var(--zp-font-sf);
    }

    /* CTA label */
    .zp-right-cta-label{
      font-size: 35px;
      line-height: 1;
      font-weight: 400;
      letter-spacing: .02em;
      color: rgba(255,255,255,.92);
    }

    /* CTA icon capsule (the little rounded square in the pill) */
    .zp-right-cta-icon{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: grid;
      place-items: center;

      background: rgba(33,215,198,.18);
      border: 1px solid rgba(33,215,198,.35);

      color: rgba(255,255,255,.92);
      font-size: 22px;
      /*transform: translateY(-1px);*/
    }

    .zp-right-cta:hover{
      border-color: rgba(33,215,198,.60);
    }

    .zp-right-cta:hover .zp-right-cta-icon{
      background: rgba(33,215,198,.24);
    }

    /* Responsive tuning */
    @media (max-width: 576px){
      .zp-right-title{ font-size: 26px; }
      .zp-right-text{ font-size: 13px; }
      .zp-right-cta-label{ font-size: 18px; }
      .zp-right-cta-icon{ width: 40px; height: 40px; border-radius: 12px; }
    }


    /* ===== RESPONSIVE: keep squares on desktop, stack on mobile ===== */
    @media (max-width: 992px){
      .zp-card{ min-height: 420px; }
      .zp-card-content{ padding: 28px; }
      .zp-card-center{ padding: 34px 24px; }
      .zp-title{ max-width: 100%; }
    }

    @media (max-width: 576px){
      .zp-feature-top{ padding: 44px 0 18px; }
      .zp-card{ border-radius: 22px; min-height: 360px; }
      .zp-cta{ font-size: 18px; }
      .zp-cta .zp-cta-icon{ width: 40px; height: 40px; border-radius: 12px; }
    }
  
  /* === 3-UP FEATURE CARDS === */
  .zp-feature-3up{
    padding: 28px 0 34px;
    background: #050607;
  }

  /* Card base */
  .zp-fcard{
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    min-height: 400px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    box-shadow: 0 26px 70px rgba(0,0,0,.65);
    text-decoration: none;
    isolation: isolate;
  }

  .zp-fcard img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    filter: contrast(1.05) brightness(.95);
  }

  /* Overlay/vignette (base) */
  .zp-fcard-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(65% 60% at 25% 30%, rgba(255,255,255,.08), transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.72));
    pointer-events: none;
  }

  /* Middle card is brighter, softer dark */
  .zp-fcard-overlay--mid{
    background:
      radial-gradient(60% 55% at 30% 20%, rgba(255,255,255,.10), transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.18) 55%, rgba(0,0,0,.55));
  }

  /* Right card teal tint */
  .zp-fcard-overlay--teal{
    background:
      radial-gradient(55% 55% at 70% 75%, rgba(33,215,198,.18), transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.78));
  }

  /* Generic content container (used by card 1 & 2) */
  .zp-fcard-content{
    position: absolute;
    z-index: 2;
    height: 100%;
    padding: 22px;
    color: rgba(255,255,255,.92);
    font-family: var(--zp-font-sf);

    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Eyebrow */
  .zp-fcard-eyebrow,
  .zp-fcard-eyebrow-top{
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.60);
  }

  /* Titles */
  .zp-fcard-title{
    font-size: 26px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-shadow: 0 18px 40px rgba(0,0,0,.55);
  }

  .zp-fcard-title--lg{
    font-size: 28px;
    font-weight: 600;
  }

  /* Subtitle */
  .zp-fcard-sub{
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.62);
    max-width: 280px;
    text-shadow: 0 18px 40px rgba(0,0,0,.55);
  }

  /* Button */
  .zp-fcard-btn{
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.30);
    color: rgba(255,255,255,.85);
    font-size: 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,.45);
    width: fit-content;
  }

  /* ===== Alignment Rules (per your spec) ===== */

  /* Card 1: title bottom */
  .zp-fcard--title-bottom .zp-fcard-content{
    justify-content: flex-end;
    padding: 22px 22px 26px;
  }

  /* Card 2: everything top */
  .zp-fcard--all-top .zp-fcard-content{
    justify-content: flex-start;
    padding-top: 26px;
  }

  /* Card 3: split layout */
  .zp-fcard--split .zp-fcard-eyebrow-top{
    position: relative;
    z-index: 2;
    padding: 22px;
    padding-top: 24px;
  }

  .zp-fcard--split .zp-fcard-bottom{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--zp-font-sf);
    color: rgba(255,255,255,.92);
  }

  /* Hover polish */
  .zp-fcard:hover{
    border-color: rgba(255,255,255,.18);
  }
  .zp-fcard:hover img{
    transform: scale(1.05);
    transition: transform .35s ease;
  }

  /* Responsive */
  @media (max-width: 991px){
    .zp-fcard{ min-height: 320px; }
    .zp-fcard-title{ font-size: 24px; }
  }

  @media (max-width: 576px){
    .zp-fcard{ border-radius: 22px; min-height: 300px; }
    .zp-fcard-title{ font-size: 22px; }
  }

  /* === 2 WIDE FEATURE CARDS === */
  .zp-feature-2wide{
    padding: 10px 0 60px;
    background: #050607;
  }

  /* Base wide card */
  .zp-widecard{
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    min-height: 270px;
    border: 1px solid rgba(33,215,198,.28); /* subtle teal stroke like mock */
    background: rgba(255,255,255,.02);
    box-shadow: 0 24px 65px rgba(0,0,0,.65);
    text-decoration: none;
    isolation: isolate;
  }

  .zp-widecard img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.02);
    filter: contrast(1.05) brightness(.92);
  }

  /* Overlay: keep left side readable */
  .zp-widecard-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(65% 75% at 18% 50%, rgba(0,0,0,.75), transparent 58%),
      linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.10) 55%, rgba(0,0,0,.25));
    pointer-events: none;
  }

  /* Slight teal atmosphere on right card */
  .zp-widecard-overlay--teal{
    background:
      radial-gradient(65% 75% at 18% 50%, rgba(0,0,0,.75), transparent 58%),
      radial-gradient(55% 70% at 85% 50%, rgba(33,215,198,.10), transparent 60%),
      linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.08) 55%, rgba(0,0,0,.30));
  }

  /* Content: aligned left, vertically centered like mock */
  .zp-widecard-content{
    position: relative;
    z-index: 2;
    max-width: 320px;
    height: 100%;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--zp-font-sf);
    color: rgba(255,255,255,.92);
  }

  /* Eyebrow */
  .zp-widecard-eyebrow{
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }

  /* Title */
  .zp-widecard-title{
    font-size: 22px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.2px;
    text-shadow: 0 18px 40px rgba(0,0,0,.55);
  }

  /* Sub */
  .zp-widecard-sub{
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255,255,255,.62);
  }

  /* Button */
  .zp-widecard-btn{
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.92);
    color: rgba(0,0,0,.85);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
  }

  /* Hover polish */
  .zp-widecard:hover{
    border-color: rgba(33,215,198,.40);
  }
  .zp-widecard:hover img{
    transform: scale(1.05);
    transition: transform .35s ease;
  }

  /* Responsive */
  @media (max-width: 991px){
    .zp-widecard{ min-height: 210px; }
    .zp-widecard-title{ font-size: 20px; }
  }

  @media (max-width: 576px){
    .zp-widecard{ border-radius: 18px; }
    .zp-widecard-content{ padding: 16px 18px; }
  }
/* ===================================================
                        Newsletter Subscription
  ====================================================== */

  .cta-section{
      background: #097567;
      color:#fff;
      padding: 54px 0;
    }

/* ========================================================
                      ZEPPARD COMMUNITY SECTION
   ======================================================== */

.zp-community-cta{
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  color: #f4f6f7;
  overflow: hidden;

  /* Background image */
  background: url("assets/images/newsletter-bg-img.png") center/cover no-repeat;
  background-color: #050606; /* fallback */
}

.zp-community-cta__overlay{
  position: absolute;
  inset: 0;
  /* dark glass overlay + subtle vignette */
  background:
    radial-gradient(60% 80% at 70% 40%, rgba(0, 190, 170, 0.18) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(70% 90% at 20% 50%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.78));
  pointer-events: none;
}

.zp-community-panel,
.zp-qr-panel{
  position: relative;
  z-index: 1;
  justify-items: center;
}

.zp-community-panel{
  max-width: 680px;
}

.zp-community-title{
  font-weight: 650;
  letter-spacing: 0.2px;
  font-size: clamp(22px, 2.2vw, 34px);
}

.zp-accent{
  color: #39e6d0;
}

.zp-community-sub{
  color: rgba(244,246,247,0.75);
  font-size: 14px;
}

.zp-link{
  color: #39e6d0;
  text-decoration: none;
  border-bottom: 1px solid rgba(57,230,208,0.35);
}
.zp-link:hover{
  color: #7ff3e6;
  border-bottom-color: rgba(127,243,230,0.6);
}

.zp-label{
  color: rgba(244,246,247,0.82);
  font-size: 13px;
  margin-bottom: 8px;
}

.zp-input{
  background: rgba(6, 8, 8, 0.55);
  border: 1px solid rgba(255,255,255,0.16);
  color: #f4f6f7;
  border-radius: 12px;
  height: 46px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.zp-input:focus{
  background: rgba(6, 8, 8, 0.60);
  color: #fff;
  border-color: rgba(57,230,208,0.55);
  box-shadow: 0 0 0 .25rem rgba(57,230,208,0.12);
}

.zp-pass-toggle{
  border: 0;
  background: transparent;
  color: rgba(244,246,247,0.75);
  font-size: 13px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.zp-pass-toggle:hover{
  color: rgba(244,246,247,0.95);
}

.zp-rules{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
  color: rgba(244,246,247,0.70);
  font-size: 12.5px;
}
.zp-rules li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.zp-dot{
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(244,246,247,0.55);
  display: inline-block;
}

.zp-check{
  border-color: rgba(255,255,255,0.25);
  background-color: rgba(6,8,8,0.55);
}
.zp-check:checked{
  background-color: #39e6d0;
  border-color: #39e6d0;
}
.zp-check-label{
  color: rgba(244,246,247,0.74);
  font-size: 13px;
}

.zp-legal{
  color: rgba(244,246,247,0.60);
  font-size: 13px;
}

.zp-btn{
  height: 48px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: rgba(57,230,208,0.16);
  border: 1px solid rgba(57,230,208,0.22);
  color: rgba(244,246,247,0.55);
  cursor: not-allowed;
}
.zp-btn:disabled{
  opacity: 0.9;
}

/* QR side */
.zp-qr-wrap{
  width: min(280px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  padding: 18px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}
.zp-qr-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: #fff; /* makes QR pop on dark bg */
}

.zp-qr-title{
  font-weight: 650;
  font-size: clamp(18px, 1.7vw, 24px);
}
.zp-qr-sub{
  color: rgba(244,246,247,0.70);
  margin: 0;
}

.zp-store-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #eaf7f5;
  background: rgba(57,230,208,0.18);
  border: 1px solid rgba(57,230,208,0.25);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.zp-store-btn:hover{
  transform: translateY(-1px);
  background: rgba(57,230,208,0.24);
  border-color: rgba(57,230,208,0.35);
  color: #ffffff;
}

.zp-store-btn__mini{
  font-size: 10px;
  opacity: .85;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.zp-store-btn__big{
  font-size: 14px;
  letter-spacing: .2px;
}

/* Mobile tweaks */
@media (max-width: 991.98px){
  .zp-community-panel{ max-width: 100%; }
  .zp-rules li{ white-space: normal; }
  .zp-qr-panel{ display:none; }
}

/* Active primary CTA button */
.zp-btn--active{
  cursor: pointer;
  color: #041615;
  background: #007768;
  border: none;
  box-shadow:
    0 14px 40px rgba(57,230,208,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.15);
}

.zp-btn--active:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 50px rgba(57,230,208,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.2);
}


/* =============================================================================== 
                                 PRODUCTS PAGE
    ================================================================================= */
    :root {
      --hb-primary: #c8102e;   /* Hailebang red */
      --header-height: 72px;
    }

    /* Products banner */
    .products-hero {
      position: relative;
      overflow: hidden;
      margin-top: var(--header-height);
    }

    .products-hero-img {
      width: 100%;
      height: min(480px, 65vh);
      object-fit: cover;
      display: block;
    }

    .products-hero-overlay {
      position: absolute;
      inset: 0;
      /* subtle dark overlay so text is readable */
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.3),
        rgba(0, 0, 0, 0.1),
        transparent
      );
    }

    .products-hero-content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
    }

    .products-hero-text {
      max-width: 640px;
      color: #fff;
    }

    .products-hero-label {
      font-size: 0.9rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.9;
    }

    .products-hero-offer {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      text-decoration: underline;
    }

    .products-hero-heading {
      font-weight: 800;
      line-height: 1.05;
      font-size: clamp(2.2rem, 3.2vw + 1.2rem, 3.8rem);
      margin-bottom: 1.25rem;
    }

    .products-hero-subtext {
      font-size: 1rem;
      margin-bottom: 1.75rem;
      opacity: 0.95;
    }

    .products-hero-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.9rem 2.3rem;
      border-radius: 0.25rem;
      border: none;
      background-color: #fff;
      color: #000;
      font-weight: 700;
      font-size: 0.95rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      cursor: pointer;
    }

    .products-hero-btn span.arrow {
      font-size: 1.1rem;
      color: var(--hb-primary);
    }

    @media (max-width: 768px) {
      .products-hero-content {
        align-items: flex-end;
        padding-bottom: 2.5rem;
      }

      .products-hero-text {
        max-width: 100%;
      }
    }

  /* ------------------------------------------------------- */
  /*              Products content and sidebar               */
  /* ------------------------------------------------------- */

.products-wrapper {
      border-radius: 12px;
      padding: 2rem;
      margin-top: 2.5rem;
      margin-bottom: 3rem;
    }

    .products-search-panel {
      /*background-color: rgba(135, 41, 41, .5);*/
      background-color: #872929;
      border-radius: 10px;
      padding: 1.75rem 1.75rem 1.25rem;
    }

    .products-search-panel h6 {
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .products-search-panel .form-control {
      border-radius: 999px 0 0 999px;
      border: none;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }

    .products-search-panel .btn-search {
      border-radius: 0 999px 999px 0;
      font-weight: 600;
      padding-inline: 1.75rem;
    }

    .products-section{
      margin: 2.5rem 5%;
    }

    /* Sidebar / filter list */
    .filter-card {
      background-color: #872929;
      border-radius: 12px;
      border: 1px solid #344c69;
      overflow: hidden;
    }

    .filter-card-header {
      padding: 1rem 1.25rem;
      border-bottom: 1px solid #344c69;
      font-weight: 700;
      letter-spacing: 0.05em;
      font-size: 0.9rem;
      text-transform: uppercase;
    }

    .filter-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .filter-list li {
      border-bottom: 1px solid #314666;
    }

    .filter-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.85rem 1.25rem;
      color: #f5f7fb;
      text-decoration: none;
      font-size: 0.9rem;
    }

    .filter-link small {
      opacity: 0.7;
      font-size: 0.8rem;
    }

    .filter-link:hover,
    .filter-link.active {
      background-color: #1f3551;
      color: #39c4a5;
    }

    /* Products */
    .results-header {
      font-size: 0.9rem;
      color: #000;
      margin-bottom: 1rem;
      opacity: 0.85;
    }

    .product-card {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #872929;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      height: 100%;
    }

    .product-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.35);
    }

    .product-card-img {
      padding: 1.5rem 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 180px;
    }

    .product-card-img img {
      max-height: 150px;
      max-width: 100%;
      object-fit: contain;
    }

    .product-card-body {
      background-color: #872929;
      color: #f7f7f7;
      padding: 0.9rem 1rem 1.1rem;
      text-align: center;
    }

    .product-title {
      font-size: 0.95rem;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 0.2rem;
    }

    .product-oem {
      font-size: 0.8rem;
      opacity: 0.85;
    }

    /* Pagination */
    .pagination .page-link {
      background-color: #152842;
      border-color: #1f3551;
      color: #f5f7fb;
    }

    .pagination .page-link:hover {
      background-color: #243a5a;
      border-color: #243a5a;
    }

    .pagination .page-item.active .page-link {
      background-color: #f04b3e;
      border-color: #f04b3e;
      color: #ffffff;
    }

    /* MOBILE OFFCANVAS FOR SPARE-PART TYPES */
    .offcanvas-spareparts {
      --bs-offcanvas-width: 85vw;    /* 85% of viewport width */
    }

    .offcanvas-spareparts .offcanvas-header {
      border-bottom: 1px solid #e5e5e5;
    }

    .offcanvas-spareparts .offcanvas-title {
      font-weight: 600;
    }

    .offcanvas-spareparts .btn-close {
      filter: none;
      opacity: 1;
    }

    /* make filter card flush to offcanvas edges on mobile */
    .offcanvas-spareparts .filter-card {
      border-radius: 0;
      border: 0;
    }

    @media (max-width: 767.98px) {
      .products-wrapper {
        padding: 1.5rem 1rem;
      }
      .products-section{margin: 0}

      .products-search-panel {
        padding: 1.25rem;
      }
    }

/* =============================================================================== 
                               BRAKE PADS ARCHIVE
================================================================================= */
.brake-pads-section{ 
  background-image: var(--bg-panel);
  padding: 3rem 2rem; 
}

.pads-wrapper {
  max-width: 1100px;
  margin: 5rem auto;
}

/* Search bar */
.pad-search {
  border-radius: 999px;
  background-color: var(--primary-lighter);
  border: none;
  padding-left: 20px;
  padding-right: 40px;
  height: 50px;
  color: #333;
}
.pad-search::placeholder { color:#ffffff; opacity:0.9; }

.search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 0.9rem;
  pointer-events: none;
}

/* Card */
.pad-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius: 18px;
  overflow:hidden;
  background:var(--card-bg);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.pad-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
}

.pad-card__media{
  background: rgba(245, 212, 212, 0.35);
  padding: 18px;
  aspect-ratio: 4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pad-card__media img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

.pad-card__body{
  padding: 16px 16px 18px;
}
.pad-card__title{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: #111;
}

/* Meta */
.pad-card__meta{
  display:grid;
  gap: 6px;
  font-size: .92rem;
  color: #222;
}
.pad-meta-row span{
  font-weight: 700;
  color: #000;
  margin-right: 6px;
}
.pad-oem{
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Badges */
.pad-card__badges{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.pad-badge{
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color:#111;
  border: 1px solid rgba(0,0,0,.08);
}

/* Pagination styling */
.navigation.pagination .page-numbers {
  display:inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: 4px;
  border: 1px solid #ddd;
  color: #777;
  background:#fff;
}
.navigation.pagination .page-numbers.current {
  background-color: #e53935;
  border-color: #e53935;
  color: #fff;
}


/* =============================================================================== 
                               SINGLE BRAKE PAD
================================================================================= */
.zp-pad-single{
  background-image: var(--bg-panel);
  margin-top: 2rem;
  padding: 3rem 0 4rem;
}

.zp-pad-container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.zp-pad-header{
  margin-bottom: 2rem;
}

.zp-pad-title{
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 .35rem;
  color: var(--primary-lighter);
}

.zp-pad-subtitle{
  margin: 0 0 1rem;
  color: rgba(0,0,0,.72);
}

.zp-pad-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

/* Layout */
.zp-pad-body{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 2rem;
}

.zp-pad-main,
.zp-pad-sidebar{
  background: var(--primary);
  border: 1px solid rgba(241, 241, 241, 0.25);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 18px 45px rgba(0,0,0,.05);
}

.zp-pad-section-title{
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .9rem;
  color: #111;
}

.zp-pad-subhead{
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.2rem 0 .6rem;
  color: #111;
}

/* Specs */
.zp-pad-specs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.zp-spec{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: .9rem 1rem;
}
.zp-spec span{
  display:block;
  font-size: .82rem;
  color: rgba(0,0,0,.65);
  margin-bottom: .25rem;
}
.zp-spec strong{
  font-size: .98rem;
  color: #111;
}
.zp-spec--full{
  grid-column: 1 / -1;
}
.zp-spec small{
  display:block;
  margin-top: .4rem;
  color: rgba(0,0,0,.62);
  font-size: .82rem;
}

/* Certs */
.zp-pad-certs__badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

/* Badges & Buttons */
.zp-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  font-size: .82rem;
  font-weight: 700;
  color: #111;
}
.zp-badge--soft{
  background: rgba(0,0,0,.06);
}

/* Content */
.zp-pad-text{
  font-size: .98rem;
  line-height: 1.85;
  color: #222;
}

/* Sidebar image */
.zp-pad-image img{
  width: 100%;
  border-radius: 18px;
  display:block;
  background:#fff;
}

/* CTA */
.zp-pad-cta-card h3{
  font-size: 1.05rem;
  margin: 1.25rem 0 .5rem;
  color:#111;
}

.zp-pad-cta-card p{
  color: rgba(0,0,0,.75);
  line-height: 1.7;
}

.zp-pad-cta-actions{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-top: 1rem;
}

.zp-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  border-radius: 999px;
  padding: .7rem 1rem;
  font-weight: 800;
  font-size: .95rem;
  transition: transform .15s ease, opacity .15s ease;
}
.zp-btn:hover{ transform: translateY(-1px); opacity:.95; }

.zp-btn--primary{
  background: var(--primary, #c8102e);
  color:#fff;
  border: 1px solid rgba(241,241,241,.25);
}
.zp-btn--outline{
  background: transparent;
  color:#111;
  border: 1px solid rgba(0,0,0,.18);
}
.zp-btn--ghost{
  background: rgba(255,255,255,.55);
  color:#111;
  border: 1px solid rgba(0,0,0,.08);
}

/* Related */
.zp-pad-related{
  margin-top: 3rem;
}
.zp-pad-related-title{
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
}

.zp-pad-related-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
}

.zp-related-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  padding: 1.1rem 1rem;
  border-radius: 18px;
  background: var(--primary);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.zp-related-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(0,0,0,.3);
  background: rgba(0,0,0,.12);
}

.zp-related-img{
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom: .75rem;
}
.zp-related-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.zp-related-name{color: var(--primary-lighter);}

/* Responsive */
@media (max-width: 992px){
  .zp-pad-body{ grid-template-columns: 1fr; }
  .zp-pad-specs{ grid-template-columns: 1fr; }
}

/* =============================================================================== 
                            COMPLIANCE PAGES
================================================================================= */
.compliance-wrapper{
  background: linear-gradient(to bottom, var(--primary) 0%, var(--primary-dark) 100%);
  color: #ffffff;
  padding: 2rem 0;
}

.compliance-page {
  background:  linear-gradient(to bottom, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 6rem 0 5rem;
}

/* Card-style container for the article */
.compliance-page .compliance-wrapper .container {
  max-width: 960px;
}

.compliance-page .compliance-article {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.5rem 2.75rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  color: #111827; /* override global white text */
}

/* -----------------------------
   Hero area
   ----------------------------- */
.compliance-page .compliance-hero {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.compliance-page .compliance-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e53935; /* brand red */
  margin-bottom: 0.6rem;
}

.compliance-page .compliance-title {
  font-size: clamp(2rem, 2.5vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.compliance-page .compliance-updated {
  font-size: 0.9rem;
  color: #6b7280;
}

/* -----------------------------
   Body typography
   ----------------------------- */
.compliance-page .compliance-body {
  font-size: 1rem;
  line-height: 1.8;
}

.compliance-page .compliance-content p {
  margin-bottom: 1rem;
  color: #111827;
}

/* First intro paragraph block */
.compliance-page .compliance-content p:first-of-type {
  margin-top: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  background: rgba(229, 57, 53, 0.04);
}

/* Headings inside the content (Gutenberg blocks) */
.compliance-page .compliance-content h2,
.compliance-page .compliance-content h3 {
  font-weight: 600;
  margin-top: 2.4rem;
  margin-bottom: 0.85rem;
  color: #111827;
  scroll-margin-top: 120px; /* nicer anchor jump if you ever link to sections */
}

/* Fancy left accent for main sections (h2) */
.compliance-page .compliance-content h2 {
  font-size: 1.4rem;
  position: relative;
  padding-left: 0.9rem;
}

.compliance-page .compliance-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 4px;
  height: 1.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #e53935, #ff9800);
}

/* Sub-section headings (h3) */
.compliance-page .compliance-content h3 {
  font-size: 1.1rem;
}

/* Lists */
.compliance-page .compliance-content ul,
.compliance-page .compliance-content ol {
  padding-left: 1.2rem;
  margin-bottom: 1.1rem;
}

.compliance-page .compliance-content li {
  margin-bottom: 0.35rem;
}

/* Gutenberg separators */
.compliance-page .compliance-content hr.wp-block-separator {
  border: 0;
  height: 1px;
  margin: 2rem 0 1.75rem;
  background: linear-gradient(
    90deg,
    rgba(229, 57, 53, 0.7),
    rgba(229, 57, 53, 0)
  );
}

/* Links */
.compliance-page .compliance-content a {
  color: #e53935;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.compliance-page .compliance-content a:hover {
  text-decoration-thickness: 2px;
}

/* -----------------------------
   Responsive tweaks
   ----------------------------- */
@media (max-width: 991.98px) {
  .compliance-page {
    padding-top: 5rem;
    padding-bottom: 4rem;
  }

  .compliance-page .compliance-article {
    padding: 2rem 1.75rem;
    border-radius: 14px;
  }
}

@media (max-width: 575.98px) {
  .compliance-page .compliance-article {
    padding: 1.75rem 1.3rem;
  }

  .compliance-page .compliance-title {
    font-size: 1.7rem;
  }
}

/* =============================
   Back To Top Button (Compliance Pages)
   ============================= */
.back-to-top {
  position: fixed;
  /*right: 25px;*/  /*Move button to right corner*/
  left:2%;
  bottom: 25px;
  width: 48px;
  height: 48px;
  background: #e53935;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease;
  z-index: 9999;
}

/* Show when active */
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* Hover effect */
.back-to-top:hover {
  background: #c62828;
  transform: translateY(-3px);
}

/* ==============================================================================
                                    TRUST 
=============================================================================== */
    .home-trust-section{
      padding: 2rem 0;
    }
   

  /* ====== BRANDS ====== */
    .home-brands-section{
      padding: 2rem 0;
    }
    .brand-card{
      background:#fff;
      border:1px solid #eef1f6;
      transition:box-shadow .2s ease, transform .2s ease;
      border-radius:1rem;
    }
    .brand-card:hover{
      box-shadow:0 12px 30px rgba(16,24,40,.08);
      transform:translateY(-2px);
    }

/*===================================================================
                NEWS AND INSIGHTS
=====================================================================*/

:root {
  /* Adjust these if you already have brand variables */
  --hb-brand-red: #f0525a;
  --hb-brand-red-soft: #ffe7ea;
  --hb-brand-dark: #0b0d12;
  --hb-text-main: #b8e6d;
}

/* Page wrapper */
.hb-news-archive {
  background-image: var(--bg-panel);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.hb-news-archive .container{margin-top: 2rem;}

/* Header / intro */
.hb-news-header .hb-eyebrow {
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--hb-brand-red);
}

.hb-news-header .hb-news-title {
  color: var(--hb-text-main);
}

.hb-news-header .hb-news-intro {
  color: rgba(11, 13, 18, 0.7);
}

/* Cards */
.hb-news-card .card {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(11, 13, 18, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease;
  background: var(--card-bg);
}

.hb-news-card .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 35px rgba(11, 13, 18, 0.13);
  border-color: rgba(240, 82, 90, 0.4);
}

/* Thumbnail area */
.hb-news-thumb img {
  display: block;
  object-fit: cover;
  max-height: 220px;
}

/* Category badge */
.hb-news-badge {
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* Meta */
.hb-news-meta {
  color: rgba(11, 13, 18, 0.5);
}

/* Title + excerpt */
.hb-news-title a {
  color: var(--hb-text-main);
  text-decoration: none;
}

.hb-news-title a:hover {
  color: var(--hb-brand-red);
}

.hb-news-excerpt {
  font-size: 0.9rem;
  color: rgba(11, 13, 18, 0.75);
}

/* Read more button */
.hb-btn-readmore {
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
  padding-inline: 1.25rem;
  padding-block: 0.4rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}

.hb-btn-readmore:hover,
.hb-btn-readmore:focus {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 20px rgba(240, 82, 90, 0.4);
  transform: translateY(-1px);
}

/* Pagination */
.hb-news-pagination .pagination {
  gap: 0.25rem;
}

.hb-news-pagination .page-item .page-link {
  border-radius: 999px;
  min-width: 2.5rem;
  text-align: center;
  border: 1px solid rgba(11, 13, 18, 0.12);
  color: var(--hb-text-main);
  background: #ffffff;
  transition: background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
}

.hb-news-pagination .page-item .page-link:hover {
  border-color: var(--hb-brand-red);
  color: var(--hb-brand-red);
  box-shadow: 0 6px 14px rgba(11, 13, 18, 0.08);
}

.hb-news-pagination .page-item.active .page-link {
  background: var(--hb-brand-red);
  border-color: var(--hb-brand-red);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(240, 82, 90, 0.45);
}

/* Make prev/next icons align nicely */
.hb-news-pagination .page-link i {
  font-size: 0.8rem;
}

/* Small screen tweaks */
@media (max-width: 767.98px) {
  .hb-news-header .hb-news-title {
    font-size: 1.75rem;
  }

  .hb-news-archive {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ----------------------------------------------------------
   Hailebang – Single Post Styling
   ------------------------------------------------------- */

:root {
  /* If these already exist in your CSS, keep only one set */
  --hb-brand-red: #f0525a;
  --hb-brand-red-soft: #ffe7ea;
  --hb-brand-dark: #0b0d12;
}

/* Wrapper */
.hb-single-post {
  margin-top: 2rem;
  background: var(--primary-dark);
}

.hb-single-article {
  background: var(--primary);
  border-radius: 1.5rem;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 18px 40px rgba(11, 13, 18, 0.08);
}

/* Header */
.hb-single-header {
  border-bottom: 1px solid rgba(11, 13, 18, 0.06);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

/* Category chips */
.hb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  text-decoration: none;
}

.hb-chip--category {
  background: var(--primary-lighter);
  border-color: var(--primary);
  color: var(--primary);
}

.hb-chip--category:hover {
  background: var(--primary);
  color: #fff;
}

/* Tag chips (used bottom + sidebar) */
.hb-chip--tag {
  background: #7cc0b6;
  border-color: transparent;
  color: var(--hb-text-main);
  font-weight: 500;
}

.hb-chip--tag:hover {
  background: var(--primary);
  color: #fff;
}

/* Title + meta */
.hb-single-title {
  font-weight: 700;
  color: var(--hb-text-main);
}

.hb-single-meta {
  color: rgba(11, 13, 18, 0.6);
}

.hb-single-meta a {
  color: inherit;
  text-decoration: none;
}

.hb-single-meta a:hover {
  color: var(--primary);
}

/* Featured image */
.hb-single-thumb img {
  max-height: 460px;
  object-fit: cover;
}

/* Content body */
.hb-single-content {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(11, 13, 18, 0.9);
}

.hb-single-content p {
  margin-bottom: 1.1rem;
}

.hb-single-content h2,
.hb-single-content h3,
.hb-single-content h4 {
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--hb-text-main);
}

.hb-single-content a {
  color: var(--hb-brand-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.hb-single-content a:hover {
  color: var(--hb-brand-dark);
}

/* Tags + share row */
.hb-single-bottom {
  border-top: 1px solid rgba(11, 13, 18, 0.06);
  border-bottom: 1px solid rgba(11, 13, 18, 0.06);
  padding: 1.5rem 0;
}

.hb-single-label {
  color: rgba(11, 13, 18, 0.6);
}

/* Share buttons */
.hb-share-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(11, 13, 18, 0.08);
  color: rgba(11, 13, 18, 0.75);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.hb-share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(11, 13, 18, 0.16);
}

/* Individual network accents */
.hb-share-btn--x:hover        { background: #000; color: #fff; }
.hb-share-btn--facebook:hover { background: #1877f2; color: #fff; }
.hb-share-btn--linkedin:hover { background: #0a66c2; color: #fff; }
.hb-share-btn--pinterest:hover{ background: #e60023; color: #fff; }

/* Prev/next navigation */
.hb-single-nav {
  padding-top: 2rem;
}

.hb-single-nav-item {
  max-width: 48%;
}

.hb-single-nav-label {
  display: block;
  margin-bottom: 0.25rem;
}

.hb-single-nav-title a {
  color: var(--hb-text-main);
  text-decoration: none;
}

.hb-single-nav-title a:hover {
  color: var(--hb-brand-red);
}

/* Sidebar */
.hb-single-sidebar {
  position: sticky;
  top: 6rem;
}

.hb-widget {
  background: var(--primary);
  border-radius: 1.25rem;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 14px 30px rgba(11, 13, 18, 0.06);
}

.hb-widget + .hb-widget {
  margin-top: 1.25rem;
}

.hb-widget-title {
  font-weight: 600;
  margin-bottom: 1.1rem;
  color: var(--hb-text-main);
}

/* Search form inside widget 
.hb-widget--search .search-form,
.hb-widget--search form {
  display: flex;
  gap: 0.4rem;
}

.hb-widget--search input[type="search"] {
  flex: 1;
  border-radius: 999px;
  border: 1px solid rgba(11, 13, 18, 0.14);
  padding: 0.5rem 0.9rem;
}

.hb-widget--search input[type="submit"] {
  border-radius: 999px;
  border: none;
  padding: 0.5rem 0.95rem;
  background: var(--hb-brand-red);
  color: #fff;
  font-weight: 500;
}*/
/* ================================
   Sidebar Search (Zeppard Premium)
================================== */
.hb-widget--search{
  margin-bottom: 18px;
}

.hb-widget--search .hb-widget-title{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: .2px;
}

/* Outer form spacing */
.hb-widget--search .hb-search-form-global{
  width: 100%;
}

/* The pill container you highlighted */
.hb-widget--search .hb-search-form-inner{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;

  /* premium pill */
  background: #fff;
  border: 1px solid rgba(16, 24, 40, .10);
  border-radius: 14px;
  /*padding: 8px 10px;*/
  box-shadow: 0 10px 24px rgba(16, 24, 40, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* nice hover lift */
.hb-widget--search .hb-search-form-inner:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(16, 24, 40, .08);
}

/* focus ring when input is focused */
.hb-widget--search .hb-search-form-inner:focus-within{
  border-color: rgba(0, 166, 81, .45);          /* Zeppard green */
  box-shadow: 0 0 0 4px rgba(0, 166, 81, .14), 0 14px 30px rgba(16, 24, 40, .08);
}

/* Input */
.hb-widget--search #hb-search-field{
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent;
  padding: 10px 44px 10px 10px; /* room for the button */
  font-size: 14px;
  line-height: 1.2;
  color: #101828;
}

.hb-widget--search #hb-search-field::placeholder{
  color: rgba(16, 24, 40, .45);
}

/* Button (icon) */
.hb-widget--search .hb-search-submit-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 10px;

  border: 1px solid rgba(0, 166, 81, .22);
  background: rgba(0, 166, 81, .10);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

/* If your button uses an icon font/svg inside */
.hb-widget--search .hb-search-submit-btn i,
.hb-widget--search .hb-search-submit-btn svg{
  color: #00A651; /* Zeppard green */
}

.hb-widget--search .hb-search-submit-btn:hover{
  background: rgba(0, 166, 81, .16);
  border-color: rgba(0, 166, 81, .34);
  transform: translateY(-50%) scale(1.03);
}

.hb-widget--search .hb-search-submit-btn:active{
  transform: translateY(-50%) scale(.98);
}

/* Remove default focus outlines (we already show a focus ring on the wrapper) */
.hb-widget--search .hb-search-submit-btn:focus{
  outline: none;
}

/* Tighter on very small screens */
@media (max-width: 420px){
  .hb-widget--search .hb-search-form-inner{
    border-radius: 12px;
    padding: 7px 9px;
  }
  .hb-widget--search .hb-search-submit-btn{
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
}


/* Latest posts */
.hb-widget-post {
  align-items: center;
}

.hb-widget-post-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.hb-widget-post-title a {
  color: var(--hb-text-main);
  text-decoration: none;
}

.hb-widget-post-title a:hover {
  color: var(--hb-brand-red);
}

/* Categories list */
.hb-widget--categories .hb-widget-list li + li {
  margin-top: 0.35rem;
}

.hb-widget--categories a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  font-size: 0.92rem;
  color: rgba(11, 13, 18, 0.8);
}

.hb-widget--categories a:hover {
  color: var(--hb-brand-red);
}

.hb-cat-count {
  color: rgba(11, 13, 18, 0.5);
}

/* Tags cloud */
.hb-widget-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Comments (optional but makes the area look modern) */
#comments {
  margin-top: 3rem;
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 14px 30px rgba(11, 13, 18, 0.06);
}

#comments h2,
#comments h3 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.comment-list {
  list-style: none;
  padding-left: 0;
}

.comment-list .comment {
  border-bottom: 1px solid rgba(11, 13, 18, 0.06);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
}

.comment-meta a {
  color: rgba(11, 13, 18, 0.6);
  font-size: 0.85rem;
}

/* Comment form */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid rgba(11, 13, 18, 0.14);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
}

.comment-form input[type="submit"] {
  border-radius: 999px;
  border: none;
  padding: 0.6rem 1.5rem;
  background: var(--hb-brand-red);
  color: #fff;
  font-weight: 600;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .hb-single-article {
    padding: 1.75rem 1.5rem;
  }

  .hb-single-sidebar {
    position: static;
    margin-top: 2rem;
  }

  .hb-single-nav-item {
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .hb-single-article {
    padding: 1.5rem 1.2rem;
  }

  .hb-single-title {
    font-size: 1.6rem;
  }
}