/* ==========================================================================
   Modern Blue Theme — Polymers Bazaar
   Overrides the dark/black theme with a consistent blue design system,
   redesigns the Buyer/Seller home section, fixes the Buyer Login layout
   and hardens the mobile device mockup. Loaded AFTER style.css so every
   rule here wins via natural cascade (no !important unless necessary).
   ========================================================================== */

/* ---------- 1. Design Tokens -------------------------------------------- */
:root {
  --pb-primary: #3b82f6;
  --pb-primary-600: #2563eb;
  --pb-primary-700: #1d4ed8;
  --pb-primary-800: #1e40af;
  --pb-primary-900: #1e3a8a;
  --pb-primary-50:  #eff6ff;
  --pb-primary-100: #dbeafe;
  --pb-primary-200: #bfdbfe;
  --pb-accent: #60a5fa;
  --pb-ink: #0f172a;
  --pb-ink-2: #1e293b;
  --pb-muted: #64748b;
  --pb-border: #e2e8f0;
  --pb-surface: #ffffff;
  --pb-surface-alt: #f8fafc;
  --pb-radius-sm: 10px;
  --pb-radius-md: 14px;
  --pb-radius-lg: 20px;
  --pb-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --pb-shadow-md: 0 8px 24px rgba(30, 64, 175, 0.10);
  --pb-shadow-lg: 0 18px 40px rgba(30, 64, 175, 0.18);
  --pb-transition: 0.25s cubic-bezier(.4,0,.2,1);

  /* Override legacy variables so every existing reference shifts to blue */
  --main-color: #3b82f6;
  --dark-blue: #1e3a8a;
  --heading-color: #0f172a;
  --text-color: #1e293b;
}

/* ---------- 2. Global Typography + Base --------------------------------- */
html, body {
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--pb-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--pb-ink);
  letter-spacing: -0.01em;
}
a { transition: color var(--pb-transition); }

/* ---------- 3. Header / Navbar / Footer — dark → blue ------------------- */
.main_menu_hdr,
.main_manu,
.footer_sec {
  background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
}
.footer_sec {
  border-top: 1px solid rgba(255,255,255,0.12);
}
.bor_right,
.find_us,
.footer_sec .quick_links h5,
.footer_sec .find_us h4,
.footer_sec .add_text h4 {
  color: #ffffff !important;
}
.bor_right { border-right-color: rgba(255,255,255,0.15) !important; }
.find_us  { border-left-color: rgba(255,255,255,0.15) !important;
            border-bottom-color: rgba(255,255,255,0.15) !important; }

.add-icon span,
ul.ftr_social li a {
  background: var(--pb-primary);
  box-shadow: 0 6px 14px rgba(59, 130, 246, 0.35);
  transition: background var(--pb-transition), transform var(--pb-transition);
}
ul.ftr_social li a:hover {
  background: var(--pb-primary-700);
  transform: translateY(-2px);
}

/* ---------- 4. Buttons — unify on blue ---------------------------------- */
.red_btn,
.sign_btn,
.site-btn,
.buyers-login .site-btn {
  background: var(--pb-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
  transition: transform var(--pb-transition),
              box-shadow var(--pb-transition),
              background var(--pb-transition);
}
.red_btn span { color: #fff; }
.red_btn:before { background: var(--pb-primary-700); }

.red_btn:hover,
.sign_btn:hover,
.site-btn:hover,
.buyers-login .site-btn:hover {
  background: var(--pb-primary-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
}
.red_btn:hover span { color: #fff; }
.red_btn:focus-visible,
.site-btn:focus-visible,
.sign_btn:focus-visible {
  outline: 3px solid var(--pb-primary-200);
  outline-offset: 2px;
}
.red_btn:active,
.site-btn:active { transform: translateY(0); box-shadow: var(--pb-shadow-sm); }

.red_btn.black_bg,
.sign_btn {
  background: var(--pb-primary-900);
}
.red_btn.black_bg:before { background: var(--pb-primary); }
.red_btn.white_bg {
  background: #fff;
  color: var(--pb-primary);
  border: 1.5px solid var(--pb-primary-200);
}
.red_btn.white_bg:hover { background: var(--pb-primary-50); }

/* ---------- 5. Mobile Device Mockup — crisp + responsive ---------------- */
.banner_sec { padding-top: 48px; }
.mobile_box {
  width: 100%;
  height: auto;
  min-height: 540px;
  aspect-ratio: 9 / 16;
  padding: 28px 18px 20px;
  border-radius: var(--pb-radius-lg);
  background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pb-shadow-md);
}
.mobile_box::before {
  content: "";
  position: absolute;
  inset: auto -30% -30% -30%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(59,130,246,0.25), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.mobile_box img,
.mobile_box video {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.18));
  position: relative;
  z-index: 1;
}
.mobile_box .dummy_text,
.mobile_box > .dummy_text {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  font-weight: 600;
  color: var(--pb-primary-900);
  letter-spacing: 0.4px;
}

/* ---------- 6. "Interested in Buying/Selling Polymers" — REDESIGN ------- */
.after_banner_sec { padding: 64px 0 24px; }
.after_banner_sec .bggra {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.after_banner_sec .bggra > .row {
  gap: 24px 0;
}
.after_banner_sec .padding_box {
  position: relative;
  padding: 56px 40px;
  background: #fff !important;           /* override inline bg image */
  background-image: none !important;
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-md);
  border: 1px solid var(--pb-border);
  overflow: hidden;
  transition: transform var(--pb-transition),
              box-shadow var(--pb-transition);
}
.after_banner_sec .padding_box:hover {
  transform: translateY(-6px);
  box-shadow: var(--pb-shadow-lg);
}
.after_banner_sec .padding_box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--pb-primary) 0%, var(--pb-accent) 100%);
}
.after_banner_sec .padding_box::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -110px; bottom: -110px;
  background: radial-gradient(closest-side, rgba(59,130,246,0.18), transparent 70%);
  pointer-events: none;
}
.after_banner_sec .padding_box + .padding_box::after {
  background: radial-gradient(closest-side, rgba(30,58,138,0.14), transparent 70%);
}

/* Optional icon badge if markup adds .buyer-seller-icon */
.buyer-seller-icon {
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-bottom: 20px;
  border-radius: 18px;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.30);
}
.after_banner_sec .padding_box + .padding_box .buyer-seller-icon {
  background: linear-gradient(135deg, var(--pb-primary-800) 0%, var(--pb-primary-900) 100%);
}
.buying_polymer_online .heading_hp h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--pb-ink);
  margin-bottom: 12px;
}
.buying_polymer_online .heading_hp p {
  color: var(--pb-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto 28px;
}

.after_banner_sec .red_btn.line_height_text {
  background: var(--pb-primary-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 14px;
  margin-bottom: 8px;
}
.after_banner_sec .red_btn.line_height_text:hover {
  background: var(--pb-primary-700);
}
.after_banner_sec .red_btn.line_height_text span,
.after_banner_sec .red_btn.line_height_text .available_line { color: #fff; }
.after_banner_sec .red_btn.line_height_text::before { display: none; }

/* Desktop: side-by-side; Mobile: stacked — Bootstrap handles col-md-6
   but we need proper spacing on stack */
@media (max-width: 767.98px) {
  .after_banner_sec .bggra > .row > [class*="col-"] { margin-bottom: 20px; }
  .after_banner_sec .padding_box { padding: 40px 24px; }
}

/* ---------- 7. Buyer Login Page — layout fix --------------------------- */
.buyers-login {
  min-height: 100vh;
  height: auto;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  overflow: hidden;
}
.buyers-login > .container-fluid {
  width: 100%;
  padding: 0;
}
.buyers-login > .container-fluid > .row {
  min-height: 100vh;
  align-items: stretch;
  margin: 0;
}
.buyers-login .col-lg-6 { padding: 0; }

/* LEFT: image panel — fill viewport, clipped to panel */
.buyers-login .buyers-img {
  height: 100vh;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.buyers-login .buyers-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.buyers-login .buyers-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(30, 58, 138, 0.25) 0%,
              rgba(30, 64, 175, 0.45) 100%);
}
.buyers-login .buyers-img p {
  left: -140px;
  top: auto;
  bottom: 40px;
  font-size: clamp(90px, 12vw, 180px);
  color: rgba(255,255,255,0.92);
  letter-spacing: 6px;
  z-index: 2;
}

/* RIGHT: form — vertically centered inside viewport */
.buyers-login .login-fields {
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  padding: 48px 24px;
  background: transparent;
}
.buyers-login .form-bx {
  width: 100%;
  max-width: 440px;
  padding: 44px 38px;
  background: #fff;
  border-radius: var(--pb-radius-lg);
  box-shadow: 0 20px 50px rgba(30, 64, 175, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.08);
}
.buyers-login .login-logo { margin-bottom: 20px; }
.buyers-login .login-logo img { max-width: 180px; margin-bottom: 18px; }
.buyers-login .form-bx h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--pb-ink);
  margin-bottom: 26px;
}
.buyers-login .contact__form { width: 100%; }
.buyers-login .contact__form .form-group { margin-bottom: 18px; text-align: left; }
.buyers-login .contact__form input {
  padding: 14px 18px 14px 46px;
  border: 1.5px solid var(--pb-border);
  background: var(--pb-surface-alt);
  border-radius: 12px;
  font-size: 14px;
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition), background var(--pb-transition);
}
.buyers-login .contact__form input:focus {
  border-color: var(--pb-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  outline: none;
}
.buyers-login .contact__form .form-group i,
.buyers-login .form-group i { color: var(--pb-primary); bottom: auto; top: 50%; transform: translateY(-50%); }
.buyers-login .forgot-text { margin-bottom: 22px; text-align: right; }
.buyers-login .forgot { color: var(--pb-primary); font-weight: 500; font-size: 13px; }
.buyers-login .forgot:hover { color: var(--pb-primary-700); text-decoration: underline; }
.buyers-login .site-btn {
  background: var(--pb-primary);
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 600;
}
.buyers-login .site-btn:hover { background: var(--pb-primary-700); }
.buyers-login .no-account { color: var(--pb-muted); }
.buyers-login .signup { color: var(--pb-primary); font-weight: 700; }
.buyers-login .signup:hover { color: var(--pb-primary-700); }

/* Mobile: stack image above form, no overflow */
@media (max-width: 991.98px) {
  .buyers-login { min-height: auto; }
  .buyers-login > .container-fluid > .row { min-height: auto; }
  .buyers-login .buyers-img {
    height: 260px;
    min-height: 260px;
  }
  .buyers-login .buyers-img img { height: 260px; }
  .buyers-login .buyers-img p { display: none; }
  .buyers-login .login-fields {
    min-height: auto;
    padding: 36px 18px 48px;
  }
  .buyers-login .form-bx { padding: 32px 22px; }
  .buyers-login .form-bx h3 { font-size: 22px; margin-bottom: 20px; }
}

/* ---------- 8. Login reCAPTCHA / misc ---------------------------------- */
.buyers-login .recaptcha-wrap { justify-content: center; margin-bottom: 18px; }
.buyers-login .alert { border-radius: 12px; }

/* ---------- 9. Small utility & polish ---------------------------------- */
.site-btn:focus-visible,
.buyers-login .site-btn:focus-visible {
  outline: 3px solid rgba(59,130,246,0.35);
  outline-offset: 2px;
}
.toggle-password:focus-visible {
  outline: 2px solid var(--pb-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   10. Header — clean white design (Polymers Bazaar reference)
   ========================================================================== */
.pb-header.main_menu_hdr {
  background: #ffffff;
  border-bottom: 1px solid rgba(30, 58, 138, 0.08);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  padding: 8px 0;
  position: fixed;
}
.pb-header .container-fluid { padding: 0 4%; }
.pb-header .main_menu { background: transparent; }
.pb-header .navigation.navbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 0;
}

/* Logo — image + optional text wordmark */
.pb-header .pb-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.pb-header .pb-logo img {
  max-height: 40px;
  width: auto;
  display: block;
}
.pb-logo-text {
  display: none;           /* Hidden by default; image logo is primary */
  font-weight: 700;
  font-size: 18px;
  color: var(--pb-primary-900);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* If brand decides to show wordmark only, toggle .pb-logo--text on the anchor */
.pb-logo.pb-logo--text img { display: none; }
.pb-logo.pb-logo--text .pb-logo-text { display: inline-block; }

/* Nav links — center, dark text, blue active */
.pb-header #cssmenu > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pb-header #cssmenu > ul > li > a {
  color: var(--pb-ink-2);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  padding: 10px 14px;
  border-radius: 8px;
  position: relative;
  transition: color var(--pb-transition), background var(--pb-transition);
}
.pb-header #cssmenu > ul > li > a:hover {
  color: var(--pb-primary);
  background: var(--pb-primary-50);
}
.pb-header #cssmenu > ul > li.active > a {
  color: var(--pb-primary);
  font-weight: 600;
}
.pb-header #cssmenu > ul > li.active > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--pb-primary);
  border-radius: 2px;
}

/* Right side actions cluster */
.pb-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Post Inquiry pill button */
.pb-post-inquiry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--pb-primary-800);
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background var(--pb-transition), transform var(--pb-transition), box-shadow var(--pb-transition);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.25);
}
.pb-post-inquiry-btn:hover {
  background: var(--pb-primary-900);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.35);
}
.pb-post-inquiry-btn:focus-visible {
  outline: 3px solid var(--pb-primary-200);
  outline-offset: 2px;
}

/* Circular icon button (bell) */
.pb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--pb-ink-2);
  background: transparent;
  border: 1px solid var(--pb-border);
  transition: color var(--pb-transition), background var(--pb-transition), border-color var(--pb-transition);
  text-decoration: none;
  font-size: 15px;
}
.pb-icon-btn:hover {
  color: var(--pb-primary);
  background: var(--pb-primary-50);
  border-color: var(--pb-primary-200);
}
.pb-icon-btn:focus-visible {
  outline: 2px solid var(--pb-primary);
  outline-offset: 2px;
}

/* User avatar dropdown trigger */
.pb-header .pb-user-dropdown .pb-avatar-btn.sign_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  height: 40px;
  background: #fff;
  color: var(--pb-ink-2);
  border: 1px solid var(--pb-border);
  border-radius: 999px;
  box-shadow: none;
  font-weight: 500;
  font-size: 14px;
  transition: border-color var(--pb-transition), background var(--pb-transition);
}
.pb-header .pb-user-dropdown .pb-avatar-btn.sign_btn:hover,
.pb-header .pb-user-dropdown .pb-avatar-btn.sign_btn:focus {
  background: var(--pb-primary-50);
  color: var(--pb-ink-2);
  border-color: var(--pb-primary-200);
}
.pb-header .pb-user-dropdown .pb-avatar-btn.sign_btn::after { display: none; }
.pb-avatar-initials,
.pb-avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.pb-user-name { line-height: 1; }

/* Dropdown menu polish */
.pb-header .dropdown-menu {
  border: 1px solid var(--pb-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  padding: 8px;
  margin-top: 8px;
}
.pb-header .dropdown-menu li a {
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--pb-ink-2);
  transition: background var(--pb-transition), color var(--pb-transition);
  font-size: 12px;
}
.pb-header .dropdown-menu li a:hover {
  background: var(--pb-primary-50);
  color: var(--pb-primary);
}

/* Mobile header adjustments */
@media (max-width: 991.98px) {
  .pb-header .navigation.navbar { flex-wrap: wrap; gap: 12px; }
  .pb-header-actions { gap: 8px; }
  .pb-post-inquiry-btn { height: 36px; padding: 0 14px; font-size: 13px; }
  .pb-icon-btn { width: 36px; height: 36px; }
  .pb-header .pb-user-dropdown .pb-avatar-btn.sign_btn { height: 36px; padding: 3px 10px 3px 3px; }
  .pb-avatar-initials, .pb-avatar-icon { width: 28px; height: 28px; font-size: 12px; }
  .pb-user-name { display: none !important; }
}
@media (max-width: 575.98px) {
  .pb-post-inquiry-btn { padding: 0 12px; }
  .pb-icon-btn { display: none; }   /* Save horizontal room on tiny screens */
}

/* ==========================================================================
   11. Newsletter — "Stay Ahead of the Market" (every page)
   ========================================================================== */
.pb-newsletter {
  padding: 60px 0;
  background: #fff;
}
.pb-newsletter__card {
  background: #f1f5f9;
  border-radius: 20px;
  padding: 48px 56px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.pb-newsletter__title {
  color: var(--pb-primary-900);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.pb-newsletter__text {
  color: var(--pb-muted);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 440px;
}
.pb-newsletter__text strong { color: var(--pb-ink-2); font-weight: 600; }

.pb-newsletter__form { width: 100%; }
.pb-newsletter__input-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pb-newsletter__input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--pb-border);
  background: #ffffff;
  font-size: 15px;
  color: var(--pb-ink-2);
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}
.pb-newsletter__input::placeholder { color: #94a3b8; }
.pb-newsletter__input:focus {
  outline: none;
  border-color: var(--pb-primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.pb-newsletter__btn {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: var(--pb-primary-800);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background var(--pb-transition), transform var(--pb-transition), box-shadow var(--pb-transition);
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.25);
}
.pb-newsletter__btn:hover {
  background: var(--pb-primary-900);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30, 64, 175, 0.35);
}
.pb-newsletter__btn:active { transform: translateY(0); }
.pb-newsletter__btn:focus-visible {
  outline: 3px solid var(--pb-primary-200);
  outline-offset: 2px;
}

.pb-newsletter__note {
  text-align: center;
  color: var(--pb-muted);
  font-size: 12px;
  margin: 8px 0 0;
}

@media (max-width: 991.98px) {
  .pb-newsletter { padding: 40px 0; }
  .pb-newsletter__card { padding: 36px 24px; }
  .pb-newsletter__title { margin-bottom: 10px; }
  .pb-newsletter__text  { margin-bottom: 24px; }
}

/* ==========================================================================
   12. Home page — Blue theme polish across all sections
   ========================================================================== */

/* --- 12.1 Shared heading look --- */
.heading_hp h2 {
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  color: var(--pb-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.heading_hp h2 span { color: var(--pb-primary); }
.heading_hp p {
  color: var(--pb-muted);
  font-size: 15px;
  line-height: 1.7;
}
.border_h2 h2::before {
  background: linear-gradient(90deg, var(--pb-primary), var(--pb-accent));
  width: 64px;
  height: 4px;
  border-radius: 2px;
}

/* --- 12.2 Banner hero — modernized slider content --- */
.banner_sec {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.banner_sec .slide__content .slide__content--headings .title {
  color: var(--pb-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.banner_sec .slide__content .slide__content--headings .title span {
  background: linear-gradient(90deg, var(--pb-primary) 0%, var(--pb-primary-800) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.banner_sec .slide__content .slide__content--headings h3,
.banner_sec .slide__content .slide__content--headings .top-title {
  color: var(--pb-ink-2);
}
.banner_sec .slide__content .slide__content--headings .top-title { color: var(--pb-muted); }

/* --- 12.3 About section --- */
.about_sec {
  padding: 72px 0 48px;
}
.about_sec .about_sec_wrap {
  background: #fff;
  border-radius: var(--pb-radius-lg);
  padding: 40px;
  box-shadow: var(--pb-shadow-sm);
  border: 1px solid var(--pb-border);
}
@media (max-width: 767.98px) {
  .about_sec .about_sec_wrap { padding: 28px 20px; }
}

/* --- 12.4 Counter (google_review) --- */
.google_review {
  padding: 48px 0;
}
.google_review .counter_js {
  background: #fff;
  border-radius: var(--pb-radius-lg);
  padding: 36px 24px;
  box-shadow: var(--pb-shadow-md);
  border: 1px solid var(--pb-border);
}
.google_review #counter li {
  border-right: 1px solid rgba(30, 64, 175, 0.12) !important;
  padding: 12px 8px;
  transition: transform var(--pb-transition);
}
.google_review #counter li:hover { transform: translateY(-3px); }
.google_review #counter li:last-child { border-right: 0 !important; }
.google_review .active_buyers_img {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pb-primary-50) 0%, var(--pb-primary-100) 100%);
  padding: 12px;
}
.google_review .count,
.google_review .plus_count {
  background: linear-gradient(90deg, var(--pb-primary) 0%, var(--pb-primary-800) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 38px;
  font-weight: 800;
}
.google_review #counter li > span:last-child {
  color: var(--pb-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
@media (max-width: 767.98px) {
  .google_review #counter li { border-right: 0 !important; border-bottom: 1px solid rgba(30, 64, 175, 0.10) !important; padding-bottom: 20px; margin-bottom: 12px; }
  .google_review #counter li:last-child { border-bottom: 0 !important; }
}

/* --- 12.5 Why Us section — cost_box cards --- */
.why_us_sec .bg_wy { padding: 64px 0; }
.why_us_sec .cost_box {
  background: #fff !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: var(--pb-radius-lg) !important;
  box-shadow: var(--pb-shadow-sm);
  padding: 32px !important;
  min-height: auto;
  transition: transform var(--pb-transition), box-shadow var(--pb-transition), border-color var(--pb-transition);
}
.why_us_sec .cost_box:hover {
  transform: translateY(-6px);
  box-shadow: var(--pb-shadow-md);
  border-color: var(--pb-primary-200) !important;
}
.why_us_sec .first_box_bg {
  background: linear-gradient(135deg, var(--pb-primary-50) 0%, var(--pb-primary-100) 100%) !important;
  border-color: var(--pb-primary-200) !important;
}
.why_us_sec .same_color,
.why_us_sec .last_bg,
.why_us_sec .secend_color_bg {
  background: #fff !important;
}
.why_us_sec .cost_number span {
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
  width: 48px;
  height: 48px;
  font-weight: 700;
}
.why_us_sec .cost_img span {
  width: 52px;
  height: 52px;
  padding: 10px;
  border-radius: 14px;
  background: var(--pb-primary-50);
}
.why_us_sec .cost_box h4 {
  color: var(--pb-ink);
  font-size: 20px;
  font-weight: 700;
  margin: 16px 0 10px;
  letter-spacing: -0.01em;
}
.why_us_sec .cost_box p {
  color: var(--pb-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* --- 12.6 Our Mission timeline (dor_ber / box_sec / box_year) --- */
.our_mission {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.our_mis::before {
  border-left: 2px dashed var(--pb-primary-200) !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.our_mis .dor_ber::before {
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%) !important;
  width: 18px; height: 18px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--pb-primary-200);
}
.our_mission .box_sec {
  background: #fff !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: var(--pb-radius-md) !important;
  box-shadow: var(--pb-shadow-sm);
  padding: 24px 26px !important;
  transition: transform var(--pb-transition), box-shadow var(--pb-transition);
}
.our_mission .box_sec:hover {
  transform: translateY(-4px);
  box-shadow: var(--pb-shadow-md);
}
.our_mission .box_sec h4 {
  color: var(--pb-primary-900);
  font-weight: 700;
  margin-bottom: 8px;
}
.our_mission .box_sec p {
  color: var(--pb-muted);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 0;
}
.our_mission .box_before_after::before {
  border-left-color: var(--pb-primary-200) !important;
}
.our_mission .box_before_after.left_before::before {
  border-right-color: var(--pb-primary-200) !important;
  border-left-color: transparent !important;
}
.our_mission .box_year h2 {
  color: var(--pb-primary) !important;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --- 12.7 Call to action --- */
.call_to_action { padding: 40px 0; }
.call_to_action .bg_call_to {
  background: linear-gradient(135deg, var(--pb-primary-50) 0%, var(--pb-primary-100) 100%) !important;
  border-radius: var(--pb-radius-lg) !important;
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pb-primary-200);
}
.call_to_action .bg_call_to::before {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  right: -120px; top: -120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59,130,246,0.18), transparent 70%);
  pointer-events: none;
}
.call_to_action .heading_hp h2 { color: var(--pb-ink); }
.call_to_action .heading_hp p { color: var(--pb-ink-2); }

/* --- 12.8 News section (marquee) --- */
.news_sec { padding: 72px 0; }
.marque_sec::-webkit-scrollbar-thumb { background-color: var(--pb-primary) !important; }
.marque_news {
  border: 1px solid var(--pb-border) !important;
  border-radius: var(--pb-radius-md) !important;
  padding: 18px 20px !important;
  background: #fff !important;
  margin-bottom: 12px !important;
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition), transform var(--pb-transition);
}
.marque_news:hover {
  border-color: var(--pb-primary-200) !important;
  box-shadow: 0 10px 24px rgba(30, 64, 175, 0.12);
  transform: translateX(4px);
}
.pb_news_img span {
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-800) 100%) !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
  font-weight: 700;
  font-size: 13px;
}
.pb_news_sii h5 { color: var(--pb-ink); font-weight: 700; }
.pb_news_sii span { color: var(--pb-muted); font-size: 12px; }
.marque_news p { color: var(--pb-muted); font-size: 14px; line-height: 1.6; }

/* --- 12.9 FAQ --- */
.faq {
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%) !important;
  padding: 72px 0;
}
.faq .accordion-item {
  border: 1px solid var(--pb-border) !important;
  border-radius: var(--pb-radius-md) !important;
  margin-bottom: 14px !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
}
.faq .accordion-button {
  background: #fff !important;
  color: var(--pb-ink) !important;
  font-weight: 600;
  font-size: 16px;
  padding: 18px 22px;
  border: 0 !important;
  border-radius: var(--pb-radius-md) !important;
  transition: background var(--pb-transition), color var(--pb-transition);
}
.faq .accordion-button:hover { color: var(--pb-primary) !important; }
.faq .accordion-button:not(.collapsed) {
  background: var(--pb-primary-50) !important;
  color: var(--pb-primary-900) !important;
  border-radius: var(--pb-radius-md) var(--pb-radius-md) 0 0 !important;
}
.faq .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12) !important;
  outline: 0;
}
.faq .accordion-button::after {
  content: "\2B" !important;
  font-size: 22px !important;
  color: var(--pb-primary) !important;
  transition: transform var(--pb-transition);
}
.faq .accordion-button:not(.collapsed)::after {
  content: "\2212" !important;
  transform: rotate(0deg);
}
.faq .accordion-body {
  background: #fff !important;
  color: var(--pb-muted);
  font-size: 14.5px;
  line-height: 1.75;
  padding: 4px 22px 20px !important;
}

/* --- 12.10 Stock ticker above the fold — blue accents --- */
.stock-ticker {
  background: #fff;
  border-bottom: 1px solid var(--pb-border);
}
.stock-ticker li.plus  .change,
.stock-ticker li .plus  { color: #059669; }
.stock-ticker li.minus .change,
.stock-ticker li .minus { color: #dc2626; }
.stock-ticker .company { color: var(--pb-primary-900); font-weight: 600; }
.stock-ticker .price   { color: var(--pb-ink-2); font-weight: 500; }

/* ==========================================================================
   13. Footer — white/clean, matches the header
   ========================================================================== */
.footer_sec {
  background: #ffffff !important;
  border-top: 1px solid var(--pb-border);
  padding: 64px 0 0 !important;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
  color: var(--pb-ink-2);
}
.footer_sec .copyright { padding-bottom: 0; }

/* Footer logo + tagline */
.footer_sec .ftr_logo {
  max-width: 200px;
  display: inline-block;
  margin-bottom: 18px;
}
.footer_sec .ftr_logo img { width: 100%; }
.footer_sec .follyw {
  color: var(--pb-muted);
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
}

/* Social icons — blue pill circles */
.footer_sec ul.ftr_social {
  display: flex;
  gap: 8px;
  padding-left: 0;
  margin: 0;
}
.footer_sec ul.ftr_social li { padding: 0; }
.footer_sec ul.ftr_social li a {
  background: var(--pb-primary-50) !important;
  color: var(--pb-primary) !important;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pb-primary-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--pb-transition), color var(--pb-transition), transform var(--pb-transition);
  box-shadow: none !important;
}
.footer_sec ul.ftr_social li a:hover {
  background: var(--pb-primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Contact cards row */
.footer_sec .find_us {
  border: 0 !important;
  padding: 0 !important;
}
.footer_sec .find_us .row { gap: 0; }
.footer_sec .find_us .add {
  padding: 14px 18px;
  margin: 0 6px 12px;
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-md);
  transition: border-color var(--pb-transition), box-shadow var(--pb-transition);
}
.footer_sec .find_us .add:hover {
  border-color: var(--pb-primary-200);
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.08);
}
.footer_sec .bor_right { border-right: 0 !important; }

.footer_sec .add-icon span {
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%) !important;
  color: #fff !important;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}
.footer_sec .add_text span,
.footer_sec .add_text h4 {
  color: var(--pb-muted) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.footer_sec .add_text p,
.footer_sec .add_text a {
  color: var(--pb-ink) !important;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}
.footer_sec .add_text a:hover { color: var(--pb-primary) !important; }

/* Quick links row */
.footer_sec .quick_links_ul {
  padding: 18px 6px 4px;
}
.footer_sec .quick_links_ul ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding: 0;
  list-style: none;
  margin: 0;
}
.footer_sec .quick_links_ul ul li { margin: 0; }
.footer_sec .quick_links_ul ul li a {
  color: var(--pb-ink-2) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background var(--pb-transition), color var(--pb-transition);
  text-decoration: none;
}
.footer_sec .quick_links_ul ul li a:hover {
  background: var(--pb-primary-50) !important;
  color: var(--pb-primary) !important;
}

/* Divider line after the main grid, before copyright row */
.footer_sec .col-xxl-12.col-xl-12 {
  border-top: 1px solid var(--pb-border);
  margin-top: 24px;
  padding-top: 18px;
}
.footer_sec .col-xxl-12.col-xl-12 .row {
  align-items: center;
  padding-bottom: 18px;
}
.footer_sec .copy_1 p {
  color: var(--pb-muted);
  font-size: 13.5px;
  margin: 0;
}
.footer_sec .col-xxl-9 .quick_links_ul,
.footer_sec .col-xl-8 .quick_links_ul { padding: 0; }
.footer_sec .col-xxl-9 .quick_links_ul ul,
.footer_sec .col-xl-8 .quick_links_ul ul {
  justify-content: flex-end;
  gap: 4px 4px;
}
.footer_sec .col-xxl-9 .quick_links_ul ul li a,
.footer_sec .col-xl-8 .quick_links_ul ul li a {
  color: var(--pb-muted) !important;
  font-size: 13px;
}

/* Kill legacy nested borders that came from the old dark theme */
.footer_sec .find_us.d-block,
.footer_sec .find_us + .find_us {
  border-left: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 991.98px) {
  .footer_sec { padding: 48px 0 0 !important; }
  .footer_sec .find_us .add { margin: 0 0 10px; }
  .footer_sec .col-xxl-9 .quick_links_ul ul,
  .footer_sec .col-xl-8 .quick_links_ul ul { justify-content: center; margin-top: 10px; }
  .footer_sec .copy_1 p { text-align: center; }
}

/* ==========================================================================
   14. News section — rich card feed
   ========================================================================== */
.news_sec {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 80px 0 !important;
}

.pb-news-wrap {
  background: #fff;
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-lg);
  box-shadow: var(--pb-shadow-md);
  padding: 36px 36px 28px;
  position: relative;
  overflow: hidden;
}
.pb-news-wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pb-primary) 0%, var(--pb-accent) 100%);
}

/* Header row */
.pb-news-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--pb-border);
}
.pb-news-header__left { flex: 1; min-width: 0; }
.pb-news-wrap .heading_hp h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--pb-ink);
  margin-bottom: 6px;
}
.pb-news-subtitle {
  color: var(--pb-muted);
  font-size: 14px;
  margin: 0;
}

/* Live badge with pulsing dot */
.pb-news-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.pb-news-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  position: relative;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: pbLivePulse 1.8s ease-out infinite;
}
@keyframes pbLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Scroll container — fix top clipping via inner padding + fade masks */
.pb-news-feed {
  position: relative;
}
.pb-news-feed::before,
.pb-news-feed::after {
  content: "";
  position: absolute;
  left: 0; right: 12px;
  height: 24px;
  pointer-events: none;
  z-index: 2;
}
.pb-news-feed::before {
  top: 0;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.pb-news-feed::after {
  bottom: 0;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.pb-news-scroll {
  height: 460px !important;
  overflow-y: auto;
  padding: 8px 14px 8px 0 !important;
  scroll-behavior: smooth;
}
.pb-news-scroll::-webkit-scrollbar { width: 6px; }
.pb-news-scroll::-webkit-scrollbar-track { background: var(--pb-primary-50); border-radius: 6px; }
.pb-news-scroll::-webkit-scrollbar-thumb {
  background: var(--pb-primary);
  border-radius: 6px;
}
.pb-news-scroll::-webkit-scrollbar-thumb:hover { background: var(--pb-primary-700); }

/* News card */
.pb-news-card {
  background: #fff !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: var(--pb-radius-md) !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
  transition: border-color var(--pb-transition),
              box-shadow var(--pb-transition),
              transform var(--pb-transition);
  cursor: pointer;
  position: relative;
}
.pb-news-card::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: transparent;
  border-radius: 3px;
  transition: background var(--pb-transition);
}
.pb-news-card:hover {
  border-color: var(--pb-primary-200) !important;
  box-shadow: 0 12px 26px rgba(30, 64, 175, 0.10) !important;
  transform: none !important;  /* override earlier translateX */
}
.pb-news-card:hover::before { background: var(--pb-primary); }

.pb-news-card .pb_news_img { margin-right: 14px; flex-shrink: 0; }
.pb-news-card .pb_news_img span {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-800) 100%) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  border-radius: 12px !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
  margin-right: 0 !important;
}
.pb-news-card .pb_news_sii { min-width: 0; flex: 1; }

/* Card meta row (source + date) */
.pb-news-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pb-muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.pb-news-card__meta .pb-news-source {
  color: var(--pb-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 11px;
}
.pb-news-card__meta .pb-news-dot { color: var(--pb-border); }

.pb-news-card h5 {
  color: var(--pb-ink) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.4;
  margin: 0 0 6px !important;
}
.pb-news-card p {
  color: var(--pb-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .pb-news-wrap { padding: 24px 18px 18px; }
  .pb-news-header { flex-direction: column; margin-bottom: 16px; padding-bottom: 16px; }
  .pb-news-scroll { height: 380px !important; }
  .pb-news-card { padding: 14px 16px !important; }
  .pb-news-card .pb_news_img span { width: 38px; height: 38px; border-radius: 10px !important; }
}

/* ==========================================================================
   15. FAQ — refined 2-column cards
   ========================================================================== */
.pb-faq.faq {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
  padding: 80px 0 !important;
}

.pb-faq__header { max-width: 680px; margin: 0 auto 42px; }
.pb-faq__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--pb-primary-200);
  color: var(--pb-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 14px;
}
.pb-faq__header .heading_hp h2 {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  color: var(--pb-ink);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.pb-faq__lead {
  color: var(--pb-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.pb-faq__accordion .row { align-items: flex-start; }

.pb-faq__item {
  background: #fff !important;
  border: 1px solid var(--pb-border) !important;
  border-radius: var(--pb-radius-md) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  transition: border-color var(--pb-transition),
              box-shadow var(--pb-transition);
}
.pb-faq__item:hover {
  border-color: var(--pb-primary-200) !important;
  box-shadow: 0 10px 26px rgba(30, 64, 175, 0.08) !important;
}
.pb-faq__item .accordion-button {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px !important;
  background: #fff !important;
  color: var(--pb-ink) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  border: 0 !important;
  border-radius: var(--pb-radius-md) !important;
  text-align: left;
  transition: background var(--pb-transition), color var(--pb-transition);
}
.pb-faq__item .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, var(--pb-primary-50) 0%, #ffffff 100%) !important;
  color: var(--pb-primary-900) !important;
  border-radius: var(--pb-radius-md) var(--pb-radius-md) 0 0 !important;
}
.pb-faq__item .accordion-button:hover .pb-faq__q { color: var(--pb-primary); }

.pb-faq__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 800;
  color: var(--pb-primary);
  background: var(--pb-primary-50);
  border: 1px solid var(--pb-primary-200);
  border-radius: 8px;
  letter-spacing: 0.5px;
  transition: all var(--pb-transition);
}
.pb-faq__item .accordion-button:not(.collapsed) .pb-faq__num {
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.30);
}
.pb-faq__q {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  transition: color var(--pb-transition);
}

/* Circular +/- toggle */
.pb-faq__item .accordion-button::after {
  content: "" !important;
  flex-shrink: 0;
  width: 32px !important;
  height: 32px !important;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--pb-primary-50) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233b82f6'%3E%3Cpath d='M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z'/%3E%3C/svg%3E") center/16px no-repeat !important;
  border: 1px solid var(--pb-primary-200);
  transition: transform var(--pb-transition), background-color var(--pb-transition);
}
.pb-faq__item .accordion-button:not(.collapsed)::after {
  background: var(--pb-primary) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath d='M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z'/%3E%3C/svg%3E") center/16px no-repeat !important;
  border-color: transparent;
  transform: rotate(180deg);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.32);
}
.pb-faq__item .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14) !important;
  outline: 0;
}

.pb-faq__item .accordion-body {
  background: #fff !important;
  color: var(--pb-muted) !important;
  font-size: 14.5px;
  line-height: 1.75;
  padding: 4px 24px 22px !important;
  border-top: 1px dashed var(--pb-primary-100);
  margin: 0 16px;
}

@media (max-width: 991.98px) {
  .pb-faq.faq { padding: 56px 0 !important; }
  .pb-faq__header { margin-bottom: 28px; }
  .pb-faq__item .accordion-button { padding: 16px 18px !important; font-size: 14.5px !important; }
  .pb-faq__item .accordion-body { padding: 4px 18px 18px !important; margin: 0 12px; }
  .pb-faq__num { width: 28px; height: 28px; font-size: 11px; }
  .pb-faq__item .accordion-button::after {
    width: 28px !important; height: 28px !important;
    background-size: 14px !important;
  }
}

/* ==========================================================================
   16. Buyer/Seller CTA cards — enhanced look + animations
   ========================================================================== */
.after_banner_sec { padding: 72px 0 40px; }

/* Override Bootstrap's col-md-6 behavior with flex + gap so the two cards
   sit side-by-side on desktop with a real gap, and stack cleanly on mobile. */
.after_banner_sec .bggra > .row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 !important;
  padding: 0;
}
.after_banner_sec .padding_box {
  position: relative;
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
  width: auto;
  margin: 0 !important;
  padding: 64px 40px 56px !important;
  background: #fff !important;
  background-image: none !important;
  border-radius: 24px !important;
  border: 1px solid var(--pb-border) !important;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.2,.65,.3,1),
              box-shadow 0.5s cubic-bezier(.2,.65,.3,1),
              border-color 0.3s ease;
  box-shadow: 0 10px 30px rgba(30, 64, 175, 0.08);
}
@media (max-width: 767.98px) {
  .after_banner_sec .bggra > .row { gap: 16px; }
  .after_banner_sec .padding_box {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Two-tone treatment: Buy vs Sell */
.padding_box--buy {
  background: linear-gradient(160deg, #ffffff 0%, #eff6ff 100%) !important;
}
.padding_box--sell {
  background: linear-gradient(160deg, #eef2ff 0%, #dbeafe 100%) !important;
}

/* Top gradient bar stays, with animated shimmer */
.after_banner_sec .padding_box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg,
              var(--pb-primary) 0%,
              var(--pb-accent) 40%,
              var(--pb-primary-800) 80%,
              var(--pb-primary) 100%);
  background-size: 200% 100%;
  animation: pbShimmer 4s linear infinite;
  z-index: 3;
}
@keyframes pbShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Corner glow */
.after_banner_sec .padding_box::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  right: -140px; bottom: -140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.22), transparent 70%);
  pointer-events: none;
  transition: transform 0.6s ease;
}
.padding_box--sell::after {
  background: radial-gradient(closest-side, rgba(30, 64, 175, 0.22), transparent 70%);
}
.after_banner_sec .padding_box:hover::after {
  transform: scale(1.25);
}

/* Decorative dots / rings / squares (hidden on mobile) */
.pb-card-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.pb-deco {
  position: absolute;
  display: block;
  opacity: 0.55;
}
.pb-deco--1 {
  top: 30px; left: 30px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pb-primary);
  animation: pbFloatA 6s ease-in-out infinite;
}
.pb-deco--2 {
  top: 110px; right: 60px;
  width: 28px; height: 28px;
  border: 2px solid var(--pb-primary-200);
  border-radius: 50%;
  animation: pbFloatB 8s ease-in-out infinite;
}
.pb-deco--3 {
  bottom: 80px; left: 40px;
  width: 18px; height: 18px;
  background: var(--pb-primary-200);
  border-radius: 5px;
  transform: rotate(25deg);
  animation: pbFloatC 7s ease-in-out infinite;
}
@keyframes pbFloatA {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-14px) scale(1.15); }
}
@keyframes pbFloatB {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-10px, 12px); }
}
@keyframes pbFloatC {
  0%, 100% { transform: rotate(25deg) translateY(0); }
  50%      { transform: rotate(35deg) translateY(-10px); }
}
@media (max-width: 767.98px) {
  .pb-deco { display: none; }
}

/* Hover lift */
.after_banner_sec .padding_box:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(30, 64, 175, 0.20);
  border-color: var(--pb-primary-200) !important;
}

/* Category tag at top corner */
.pb-card-tag {
  position: absolute;
  top: 20px;
  right: 24px;
  padding: 6px 14px;
  background: #fff;
  color: var(--pb-primary);
  border: 1px solid var(--pb-primary-200);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(30, 64, 175, 0.08);
  z-index: 3;
}
.padding_box--sell .pb-card-tag {
  background: var(--pb-primary-900);
  color: #fff;
  border-color: transparent;
}

/* Content sits above decorations */
.after_banner_sec .buying_polymer_online { position: relative; z-index: 2; }

/* Animated icon badge */
.after_banner_sec .buyer-seller-icon {
  position: relative;
  width: 88px;
  height: 88px;
  font-size: 34px;
  border-radius: 24px;
  margin-bottom: 26px;
  background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%);
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.32);
  animation: pbIconFloat 4s ease-in-out infinite;
}
.padding_box--sell .buyer-seller-icon {
  background: linear-gradient(135deg, var(--pb-primary-800) 0%, var(--pb-primary-900) 100%);
  box-shadow: 0 18px 36px rgba(30, 58, 138, 0.40);
}
@keyframes pbIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* Pulse ring behind the icon */
.buyer-seller-icon .pb-icon-pulse {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 2px solid rgba(59, 130, 246, 0.45);
  opacity: 0;
  animation: pbIconPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pbIconPulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%  { transform: scale(1.45); opacity: 0;   }
  100% { transform: scale(1.45); opacity: 0;   }
}
/* Icon reacts to card hover */
.after_banner_sec .padding_box:hover .buyer-seller-icon {
  transform: translateY(-10px) scale(1.05) rotate(-4deg);
  transition: transform 0.4s cubic-bezier(.2,.65,.3,1);
  animation-play-state: paused;
}

/* Heading polish */
.after_banner_sec .buying_polymer_online .heading_hp h2 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  color: var(--pb-ink);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.25;
}
.after_banner_sec .buying_polymer_online .heading_hp p {
  color: var(--pb-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 440px;
  margin: 0 auto 30px;
}

/* App store buttons */
.pb-store-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.after_banner_sec .pb-store-btn {
  display: inline-flex;
  align-items: center;
  background: var(--pb-primary-900) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease,
              background 0.3s ease,
              box-shadow 0.3s ease;
  box-shadow: 0 8px 18px rgba(30, 58, 138, 0.25);
}
.after_banner_sec .pb-store-btn::before { display: none !important; }
.after_banner_sec .pb-store-btn span { color: #fff !important; position: relative; z-index: 2; }
.after_banner_sec .pb-store-btn .available_line,
.after_banner_sec .pb-store-btn .available_line b { color: #fff; }

.after_banner_sec .pb-store-btn:hover {
  background: var(--pb-primary) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.38);
}
/* Shimmer sweep on hover */
.after_banner_sec .pb-store-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255, 255, 255, 0.35) 50%,
              transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  z-index: 1;
}
.after_banner_sec .pb-store-btn:hover::after { left: 120%; }

/* Mobile tightening */
@media (max-width: 767.98px) {
  .after_banner_sec .padding_box { padding: 48px 24px 40px !important; border-radius: 20px !important; }
  .after_banner_sec .buyer-seller-icon { width: 72px; height: 72px; font-size: 28px; border-radius: 20px; margin-bottom: 20px; }
  .pb-card-tag { top: 14px; right: 16px; font-size: 10px; padding: 5px 11px; }
  .after_banner_sec .buying_polymer_online .heading_hp p { margin-bottom: 22px; }
  .pb-store-btns { gap: 10px; }
}

/* ==========================================================================
   17. Responsive alignment pass — fixes header/hero/timeline/footer/etc
   ========================================================================== */

/* --- 17.1 Global page flow --- */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Kill container-fluid over-padding on small screens (it was 4% each side) */
@media (max-width: 991.98px) {
  .container-fluid { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (max-width: 575.98px) {
  .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
}

/* --- 17.2 Header — mobile hamburger + flex reflow --- */
/* The existing jQuery menumaker injects <div id="menu-button">MENU</div>
   inside #cssmenu when the viewport is under 1200px. Style it to match
   the new white theme and make the nav expand below the header row.     */
.pb-header .navigation.navbar { flex-wrap: nowrap; }
.pb-header .right_btm { flex: 1; min-width: 0; }

/* Below xl (1200px) = mobile/tablet off-canvas sidebar */
@media (max-width: 1199.98px) {
  /* Keep the header on a single row — menu trigger sits inline with actions */
  .pb-header .navigation.navbar { flex-wrap: nowrap; column-gap: 10px; }

  /* The "middle" slot (menu container) shrinks to just the hamburger button */
  .pb-header .right_top.order-xl-2 {
    order: 4 !important;
    flex: 0 0 auto;
    width: auto;
    margin-left: 6px;
  }
  .pb-header .right_top.order-xl-2 .right_btm { display: block; }

  /* #cssmenu becomes transparent — only the button is visible outside the sidebar */
  .pb-header #cssmenu {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    position: static;
    padding: 0;
  }

  /* Compact 42×42 circular hamburger button */
  .pb-header #cssmenu #menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 0;                          /* hide "Menu" text label */
    background: #fff;
    color: var(--pb-ink);
    border: 1px solid var(--pb-border);
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background var(--pb-transition),
                border-color var(--pb-transition),
                color var(--pb-transition),
                transform var(--pb-transition);
  }
  .pb-header #cssmenu #menu-button:hover,
  .pb-header #cssmenu #menu-button:focus-visible {
    background: var(--pb-primary-50);
    border-color: var(--pb-primary-200);
    outline: none;
  }
  .pb-header #cssmenu #menu-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  }
  /* Font Awesome bars icon via ::before (overrides legacy positioned bar) */
  .pb-header #cssmenu #menu-button::before {
    content: "\f0c9" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 17px;
    color: var(--pb-primary) !important;
    position: static !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    transition: transform var(--pb-transition);
  }
  /* Hide legacy ::after line drawing */
  .pb-header #cssmenu #menu-button::after { display: none !important; }
  /* Open state — switches to X */
  .pb-header #cssmenu #menu-button.menu-opened {
    background: var(--pb-primary);
    border-color: transparent;
  }
  .pb-header #cssmenu #menu-button.menu-opened::before {
    content: "\f00d" !important;           /* fa-xmark */
    color: #fff !important;
    transform: rotate(90deg);
  }

  /* ---------- Off-canvas sidebar ---------- */
  .pb-header #cssmenu > ul {
    display: flex !important;              /* always present in DOM, slide controls visibility */
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 86vw);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    padding: 84px 16px 24px;                /* top leaves room for close button */
    margin: 0;
    gap: 2px;
    z-index: 1050;
    overflow-y: auto;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.35s cubic-bezier(.2, .65, .3, 1);
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    border-left: 1px solid var(--pb-border);
  }
  /* Open — slide in */
  .pb-header #cssmenu > ul.open {
    transform: translate3d(0, 0, 0);
  }
  /* Decorative top band + close pseudo-button (visual only — real close is the
     existing hamburger which flips to X) */
  .pb-header #cssmenu > ul::before {
    content: "Menu";
    position: absolute;
    top: 24px; left: 24px;
    color: var(--pb-ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .pb-header #cssmenu > ul::after {
    content: "";
    position: absolute;
    top: 70px; left: 24px; right: 24px;
    height: 1px;
    background: var(--pb-border);
  }

  /* Menu items — 48px tall, pill hover */
  .pb-header #cssmenu > ul > li {
    width: 100%;
    display: block;
    float: none;
    margin: 0;
  }
  .pb-header #cssmenu > ul > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    width: 100%;
    padding: 12px 14px !important;
    margin: 2px 0;
    color: var(--pb-ink-2) !important;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    text-align: left;
    letter-spacing: 0;
    transition: background var(--pb-transition), color var(--pb-transition);
  }
  .pb-header #cssmenu > ul > li > a:hover,
  .pb-header #cssmenu > ul > li > a:focus-visible {
    background: var(--pb-primary-50);
    color: var(--pb-primary) !important;
    outline: none;
  }
  .pb-header #cssmenu > ul > li.active > a {
    background: var(--pb-primary);
    color: #fff !important;
    font-weight: 600;
  }
  .pb-header #cssmenu > ul > li.active > a::after { display: none; }

  /* Sub-menu plus/minus button inside the sidebar */
  .pb-header #cssmenu .submenu-button {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: var(--pb-primary-50);
    border-radius: 8px;
  }
  .pb-header #cssmenu .submenu-button::before,
  .pb-header #cssmenu .submenu-button::after {
    background: var(--pb-primary) !important;
  }

  /* Elevate header above backdrop when menu is open on mobile */
  .pb-header {
    z-index: 1050 !important;
  }
  /* Backdrop (injected by JS as .pb-menu-backdrop on <body>) */
  .pb-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1040;
  }
  .pb-menu-backdrop.is-visible {
    /* opacity: 1; */
    visibility: visible;
  }
}

/* Sidebar close (X) button — injected to <body>, fixed to the viewport.
   Becomes visible only when body.pb-menu-open is set. */
.pb-sidebar-close {
  display: none;
}
@media (max-width: 1199.98px) {
  .pb-sidebar-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    background: var(--pb-primary-50);
    color: var(--pb-primary);
    border: 1px solid var(--pb-primary-200);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity 0.25s ease,
                visibility 0.25s ease,
                transform 0.25s cubic-bezier(.2,.65,.3,1),
                background-color var(--pb-transition),
                color var(--pb-transition);
    z-index: 1060;                         /* above sidebar (1050) and backdrop (1040) */
  }
  .pb-sidebar-close.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
  }
  .pb-sidebar-close:hover {
    background: var(--pb-primary);
    color: #fff;
  }
  .pb-sidebar-close.is-visible:hover {
    transform: scale(1) rotate(90deg);
  }
  .pb-sidebar-close:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.3);
    outline-offset: 2px;
  }
}

/* Backdrop never shows on desktop */
@media (min-width: 1200px) {
  .pb-menu-backdrop { display: none !important; }
}

/* Phone-width: wrap logo/actions into 2 rows cleanly */
@media (max-width: 575.98px) {
  .pb-header .navigation.navbar { gap: 8px; }
  .pb-header .logo a img { max-height: 34px; }
  .pb-post-inquiry-btn { height: 34px; padding: 0 12px; font-size: 12px; }
  .pb-header .pb-user-dropdown .pb-avatar-btn.sign_btn { height: 34px; padding: 2px 10px 2px 2px; }
  .pb-avatar-initials, .pb-avatar-icon { width: 28px; height: 28px; font-size: 12px; }
}

/* --- 17.3 Banner hero --- */
@media (max-width: 991.98px) {
  .banner_sec { padding-top: 24px !important; }
  .banner_sec .container-fluid { padding: 0 14px !important; }
  .banner_sec .slider, .banner_sec .slide { height: auto !important; min-height: 420px; }
  .banner_sec .slide__content__left { position: relative !important; left: 0 !important; transform: none !important; width: 100% !important; padding: 24px 8px; }
  .banner_sec .slide__img img { height: 420px; object-fit: cover; }
  .mobile_box {
    max-width: 320px;
    margin: 24px auto 0;
    min-height: auto;
    height: 480px;
    aspect-ratio: auto;
  }
}
@media (max-width: 575.98px) {
  .banner_sec .slide__content--headings .title { font-size: 32px !important; line-height: 1.1 !important; }
  .banner_sec .slide__content--headings .top-title { font-size: 13px !important; }
  .mobile_box { height: 420px; max-width: 280px; padding: 20px 14px; }
}

/* --- 17.4 Counter strip --- */
@media (max-width: 991.98px) {
  .google_review .counter_js { padding: 24px 16px; }
  .google_review .count, .google_review .plus_count { font-size: 30px; }
  .google_review .active_buyers_img { width: 54px; height: 54px; padding: 10px; }
}
@media (max-width: 575.98px) {
  .google_review .counter_js { padding: 18px 10px; }
  .google_review #counter { flex-wrap: wrap; }
  .google_review #counter li { flex: 1 1 50%; max-width: 50%; padding: 14px 6px !important; }
  .google_review #counter li:nth-child(odd)  { border-right: 1px solid rgba(30, 64, 175, 0.10) !important; }
  .google_review #counter li:nth-child(even) { border-right: 0 !important; }
  .google_review #counter li:nth-child(-n+2) { border-bottom: 1px solid rgba(30, 64, 175, 0.10) !important; }
  .google_review .count, .google_review .plus_count { font-size: 24px; }
  .google_review #counter li > span:last-child { font-size: 12px; }
}

/* --- 17.5 Why Us — card grid reflow --- */
@media (max-width: 1199.98px) {
  .why_us_sec .cost_box { min-height: auto; }
  .why_us_sec .first_box_bg .row > [class*="col-"] { margin-bottom: 16px; }
}
@media (max-width: 767.98px) {
  .why_us_sec .bg_wy { padding: 40px 0; }
  .why_us_sec .cost_box { padding: 24px !important; margin-bottom: 14px; }
  .why_us_sec .cost_box h4 { font-size: 18px; }
}

/* --- 17.6 Our Mission timeline — clean single-column on mobile --- */
@media (max-width: 767.98px) {
  .our_mission { padding: 48px 0; }
  .our_mis { position: relative; padding-left: 26px; }
  /* Single continuous vertical line on the left */
  .our_mis::before {
    left: 10px !important;
    border-left: 2px dashed var(--pb-primary-200) !important;
  }
  /* Hide center-column dots — use row-level markers instead */
  .our_mis .dor_ber { display: none !important; }
  .our_mis .col-md-2 { display: none !important; }

  /* Each row stacks: heading -> description card */
  .our_mis .row {
    display: block !important;
    margin: 0 0 22px !important;
    position: relative;
  }
  .our_mis .row::before {
    content: "";
    position: absolute;
    left: -22px; top: 8px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pb-primary) 0%, var(--pb-primary-700) 100%);
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--pb-primary-200);
    z-index: 1;
  }
  .our_mis .col-md-5 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: initial !important;
    padding: 0 !important;
    margin-bottom: 8px;
  }
  .our_mis .box_year { text-align: left !important; margin-bottom: 10px; }
  .our_mis .box_year h2 {
    font-size: 20px !important;
    color: var(--pb-primary) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .our_mis .box_sec {
    padding: 18px 20px !important;
    text-align: left !important;
  }
  .our_mis .box_sec h4 { font-size: 16px !important; }
  .our_mis .box_sec p  { font-size: 13.5px !important; }
  /* Kill the old arrow tails — they don't fit a vertical list */
  .our_mis .box_before_after::before,
  .our_mis .box_before_after.left_before::before { display: none !important; }
}

/* --- 17.7 Call to action --- */
@media (max-width: 767.98px) {
  .call_to_action .bg_call_to { padding: 32px 20px; }
  .call_to_action_img { margin-bottom: 20px; }
}

/* --- 17.8 News feed — keep card hover restrained on touch --- */
@media (hover: none) {
  .pb-news-card:hover { transform: none !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important; }
}

/* --- 17.9 FAQ grid — avoid uneven heights at md (tablet) --- */
@media (min-width: 992px) {
  .pb-faq__accordion .row { align-items: stretch; }
}

/* --- 17.10 Newsletter --- */
@media (max-width: 767.98px) {
  .pb-newsletter { padding: 32px 0; }
  .pb-newsletter__card { padding: 28px 20px; }
  .pb-newsletter__title { font-size: 22px; }
  .pb-newsletter__text { font-size: 14px; }
  .pb-newsletter__input, .pb-newsletter__btn { height: 46px; }
}

/* --- 17.11 Footer — reflow for tablet + mobile --- */
@media (max-width: 991.98px) {
  .footer_sec { padding-top: 40px !important; }
  .footer_sec .copyright .row { --bs-gutter-y: 16px; }
  .footer_sec .find_us .row > [class*="col-"] { margin-bottom: 8px; }
  .footer_sec .ftr_logo { max-width: 170px; margin: 0 auto 14px; display: block; }
  .footer_sec .col-lg-3 { text-align: center; }
  .footer_sec .follyw { text-align: center; }
  .footer_sec ul.ftr_social { justify-content: center; }
  .footer_sec .quick_links_ul ul { justify-content: center !important; }
}
@media (max-width: 575.98px) {
  .footer_sec .find_us .add { flex-direction: row !important; padding: 12px 14px; }
  .footer_sec .add-icon span { width: 36px; height: 36px; }
  .footer_sec .add_text p,
  .footer_sec .add_text a { font-size: 13.5px; word-break: break-word; }
  .footer_sec .quick_links_ul ul li a { padding: 6px 10px; font-size: 13px; }
  .footer_sec .copy_1 p { font-size: 12.5px; }
}

/* --- 17.12 Stock ticker — prevent horizontal scroll --- */
.stock-ticker { overflow: hidden; }
@media (max-width: 767.98px) {
  .stock-ticker ul li { padding: 0 14px; }
  .stock-ticker .company, .stock-ticker .price, .stock-ticker .change { font-size: 13px; }
}

/* --- 17.13 Safety: prevent any section from forcing horizontal scroll --- */
section { max-width: 100vw; }
.slick-slider, .swiper { max-width: 100%; }

/* ==========================================================================
   18. Final responsive pass — header & footer edge cases
   ========================================================================== */

/* --- 18.1 Header: flex safety + vertical padding + navbar reset --- */
.pb-header .main_menu { width: 100%; padding: 0; }
.pb-header .navigation.navbar {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 64px;
  column-gap: 16px;
}
/* Bootstrap's .navbar has padding-left/right set — neutralize so our container controls it */
.pb-header .navigation.navbar { padding-left: 0; padding-right: 0; }
.pb-header .left_top { min-width: 0; }
.pb-header .logo a img { max-height: 44px; width: auto; }

/* Desktop sweet-spot: 1200px–1399px — avoid nav item wrap */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .pb-header #cssmenu > ul > li > a { padding: 10px 10px; font-size: 14.5px; }
  .pb-header-actions { gap: 8px; }
  .pb-post-inquiry-btn { padding: 0 16px; font-size: 13.5px; }
}

/* Tablet: make sure hamburger row has enough room for actions */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pb-header .navigation.navbar { flex-wrap: wrap; }
  .pb-header .left_top { flex: 0 1 auto; }
  .pb-header-actions { flex: 0 0 auto; margin-left: auto; }
}

/* Phone: keep logo + actions on one row, menu on row two */
@media (max-width: 575.98px) {
  .pb-header .navigation.navbar { column-gap: 8px; min-height: auto; padding: 8px 0; }
  .pb-header .logo a img { max-height: 32px; }
  .pb-header-actions { gap: 6px; }
  .pb-post-inquiry-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 11.5px;
    letter-spacing: 0;
  }
  .pb-header .pb-user-dropdown .pb-avatar-btn.sign_btn {
    height: 32px;
    padding: 2px;
    width: 32px;
    border-radius: 50%;
    justify-content: center;
  }
  .pb-avatar-initials, .pb-avatar-icon { width: 26px; height: 26px; font-size: 11px; }
}
/* Very narrow (<380px): condense "Post Inquiry" to icon only (via CSS abbr) */
@media (max-width: 379.98px) {
  .pb-post-inquiry-btn { font-size: 0; padding: 0 12px; gap: 0; }
  .pb-post-inquiry-btn::before {
    content: "\f1d8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
  }
}

/* Stock ticker — seat it against the white header cleanly */
.stock-ticker {
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  border-bottom: 1px solid var(--pb-border);
  border-top: 0;
  padding: 8px 0;
}
.stock-ticker ul li {
  padding: 0 20px;
  font-size: 14px;
  letter-spacing: 0.2px;
}
@media (max-width: 767.98px) {
  .stock-ticker { padding: 6px 0; }
  .stock-ticker ul li { padding: 0 14px; font-size: 12.5px; }
}

/* --- 18.2 Banner hero: force stacking below lg (fix the mockup-too-big bug) --- */
@media (max-width: 991.98px) {
  .banner_sec .row > .col-lg-9,
  .banner_sec .row > .col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .banner_sec .row > .col-lg-3 { display: flex; justify-content: center; }
}

/* --- 18.3 Footer: grid reflow at lg and down --- */
/* At <1200px the copyright row cols become full-width — center contents */
@media (max-width: 1199.98px) {
  .footer_sec .col-xxl-3.col-xl-4,
  .footer_sec .col-xxl-9.col-xl-8 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .footer_sec .col-xxl-9 .quick_links_ul ul,
  .footer_sec .col-xl-8  .quick_links_ul ul {
    justify-content: center !important;
  }
}

/* Force a clean grid for the footer contact cards at every size */
.footer_sec .find_us > .row { --bs-gutter-x: 12px; margin: 0 -6px; }
.footer_sec .find_us > .row > [class*="col-"] { padding: 0 6px; }
@media (max-width: 767.98px) {
  .footer_sec .find_us > .row > .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Override legacy responsive.css columns on quick_links_ul that breaks flex */
@media (max-width: 767.98px) {
  .footer_sec .quick_links_ul ul {
    display: flex !important;
    columns: auto !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 2px;
  }
  .footer_sec .quick_links_ul { padding: 12px 0 4px; }
}

/* Footer top grid columns: force proper stacking at md */
@media (max-width: 991.98px) {
  .footer_sec .copyright > .row > .col-lg-3,
  .footer_sec .copyright > .row > .col-lg-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .footer_sec .col-lg-3 { margin-bottom: 8px; }
}

/* --- 18.4 Footer copyright row — vertical rhythm on tablet/phone --- */
@media (max-width: 1199.98px) {
  .footer_sec .col-xxl-12.col-xl-12 { margin-top: 16px; padding-top: 16px; }
  .footer_sec .col-xxl-12.col-xl-12 .row { gap: 8px 0; padding-bottom: 14px; }
  .footer_sec .copy_1 p { text-align: center; margin-bottom: 4px; }
}

/* --- 18.5 Defensive: kill residual rounded wrapper padding that clips shadows --- */
.after_banner_sec .bggra { border-radius: 0 !important; overflow: visible !important; }

/* --- 18.6 Ensure dropdown menu doesn't overflow viewport on mobile --- */
@media (max-width: 575.98px) {
  .pb-header .dropdown-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    transform: none !important;
    inset: auto 12px auto auto !important;
    width: auto !important;
    max-width: calc(100vw - 24px);
  }
}