/*------------------------------------------------------------------
[Webflix Style Overrides - High Fidelity Redesign]
Description: Styling overrides to precisely replicate Webflix.com Layout
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Premium blue gradient matching the Webflix Logo */
  --tw-gradient-header: linear-gradient(135deg, #1e3a8a 0%, #0284c7 100%);
  --tw-gradient-primary: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --tw-gradient-primary-hover: linear-gradient(135deg, #0369a1 0%, #0f172a 100%);
  --tw-gradient-accent: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --tw-gradient-accent-hover: linear-gradient(135deg, #0369a1 0%, #075985 100%);

  /* Theme variables matching the logo blue and high contrast orange */
  --tw-blue-primary: #0284c7;
  --tw-blue-dark: #0369a1;
  --tw-blue-light: #eff6ff;
  --tw-orange: #0284c7;
  --tw-orange-hover: #0369a1;
  --tw-orange-light: #f0f9ff;
  --tw-maroon-banner: #0f172a;
  --tw-maroon-btn: #0284c7;
  --tw-text-primary: #0f172a;
  --tw-text-secondary: #475569;
  --tw-text-light: #64748b;
  --tw-bg-light: #f8fafc;
  --tw-white: #ffffff;
  --tw-border: #e2e8f0;

  /* Radius variables */
  --tw-radius-sm: 4px;
  --tw-radius-md: 8px;
  --tw-radius-lg: 12px;
  --tw-radius-full: 9999px;

  /* Shadows */
  --tw-shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --tw-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --tw-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.03);

  --tw-font: 'Plus Jakarta Sans', sans-serif;
}

/* Reset baseline fonts to Open Sans for Webflix exact layout */
body, p, a, h1, h2, h3, h4, h5, h6, input, select, textarea, button {
  font-family: var(--tw-font) !important;
}

body {
  color: var(--tw-text-primary);
  background-color: var(--tw-bg-light);
  overflow-x: hidden;
}

/* --- TOP REGISTRATION BANNER (LINEAR GRADIENT) --- */
.tw-top-reg-banner {
  background: linear-gradient(90deg, #071527 0%, #0f3056 32%, #035382 68%, #0284c7 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25);
  color: #f8fafc;
  padding: 6px 15px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.tw-top-cta-btn {
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tw-top-cta-btn:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.1);
}

.tw-nav-link-item {
  color: #f8fafc !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tw-nav-link-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #38bdf8 !important;
  transform: translateY(-1px);
}

.tw-nav-link-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tw-nav-link-btn:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.08);
}

.tw-top-reg-title {
  font-weight: 700;
  font-size: 13.5px;
  margin: 0;
  color: #f1f5f9;
}

.tw-top-reg-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tw-top-reg-form input {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--tw-white) !important;
  padding: 6px 12px !important;
  font-size: 12px;
  border-radius: 20px !important;
  width: 140px;
  outline: none;
  transition: all 0.2s ease;
}

.tw-top-reg-form input::placeholder {
  color: #cbd5e1;
}

.tw-top-reg-form input:focus {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

.tw-top-reg-btn {
  background: var(--tw-gradient-primary) !important;
  border: none !important;
  color: var(--tw-white) !important;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.15);
}

.tw-top-reg-btn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

/* --- MAIN HEADER --- */
#header {
  background: #f7f7f7 !important;
  border-bottom: 1px solid var(--tw-border);
  padding: 1px 0 !important;
  z-index: 9999 !important;
}

/* Ensure flex row container and disable float bugs on desktop */
#header .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Reset Bootstrap 3 floats inside the flex row */
#header .row > div {
  float: none !important;
  position: relative !important;
  padding: 0 !important;
}

/* Reset legacy logo styles */
#header .logo {
  flex: 0 0 22% !important; /* Take 22% width */
  max-width: 22% !important;
  width: 22% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

#header .logo h1 {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
}

#header .logo a {
  display: block !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#header .logo img {
  max-height: 70px;
  height: 70px;
  width: auto;
  object-fit: contain;
  display: block !important;
  float: none !important;
  margin: 0 !important;
  filter: none !important;
}

/* Center search box */
#header .search-wrapper {
  flex: 0 0 55% !important; /* Take exactly 55% width */
  max-width: 55% !important;
  width: 55% !important;
  padding: 0 15px !important;
}

/* Right user icons */
#header .text-right {
  flex: 0 0 25% !important; /* Take exactly 25% width */
  max-width: 25% !important;
  width: 25% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  #header .row {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  #header .logo {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
  }
  #header .search-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }
  #header .text-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Rounded Pill Search Bar */
.tw-search-container {
  display: flex;
  background-color: var(--tw-white) !important;
  border: 1px solid #cbd5e1;
  border-radius: 30px; /* Rounded pill style */
  overflow: hidden;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: none !important;
  height: 40px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tw-search-container:focus-within {
  border-color: var(--tw-blue-dark) !important;
  box-shadow: 0 0 0 3px rgba(53, 99, 182, 0.15) !important;
  background-color: var(--tw-white) !important;
}

.tw-search-select {
  border: none;
  background-color: #f8fafc;
  color: var(--tw-text-primary);
  padding: 0 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  border-right: 1px solid #cbd5e1;
}

.tw-search-input {
  flex: 1;
  border: none;
  background: transparent !important;
  padding: 5px 15px;
  font-size: 13.5px;
  outline: none;
  color: var(--tw-text-primary);
}

.tw-search-btn {
  background: var(--tw-gradient-primary) !important;
  border: none;
  color: var(--tw-white) !important;
  padding: 0 25px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.tw-search-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Right Header Icons block */
.tw-header-right-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.tw-header-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--tw-white) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.tw-header-icon-item i {
  font-size: 20px;
  margin-bottom: 2px;
  color: var(--tw-white);
  transition: color 0.2s;
}

.tw-header-icon-item:hover, .tw-header-icon-item:hover i {
  color: #cbd5e1 !important;
  text-decoration: none;
}

/* --- PREMIUM NAVIGATION BAR REDESIGN --- */
.tw-nav-bar {
  background-color: #ffffff !important; /* Pure modern white background */
  border-top: 1px solid #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
  padding: 6px 0 !important;
  min-height: 52px;
  margin-bottom: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important; /* Premium light shadow */
}

.tw-nav-bar .menu {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: center !important;
  width: 100% !important;
}

.tw-nav-bar .menu > li {
  display: inline-block !important;
  position: relative !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  float: none !important;
}

.tw-nav-bar .menu > li > a {
  color: #475569 !important; /* Elegant slate gray text */
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 8px 16px !important;
  margin: 0 4px !important;
  display: block !important;
  border-radius: 30px !important; /* Smooth pill hover container */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-right: none !important; /* Remove outdated dividers */
  border-left: none !important;
}

/* Hover effect on regular links */
.tw-nav-bar .menu > li:not(.tw-nav-premium-services):not(.tw-nav-post-rfq) > a:hover {
  color: var(--tw-blue-primary) !important; /* Theme blue text */
  background-color: #f1f5f9 !important; /* Light slate background */
  text-decoration: none !important;
}

/* 1. Premium Services Link - Soft Glowing Blue */
.tw-nav-premium-services a {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #0369a1 !important; /* Deep Royal Blue */
  font-weight: 700 !important;
  border: 1px solid #bfdbfe !important;
  box-shadow: 0 2px 4px rgba(29, 78, 216, 0.05) !important;
}

.tw-nav-premium-services a:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  color: #1e40af !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.15) !important;
  text-decoration: none !important;
}

/* 2. Post RFQ Link - Soft Gold/Orange Accent */
.tw-nav-post-rfq a {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffedd5 100%) !important;
  color: #d97706 !important; /* Dark Gold/Amber */
  font-weight: 700 !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 2px 4px rgba(217, 119, 6, 0.05) !important;
}

.tw-nav-post-rfq a:hover {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
  color: #b45309 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15) !important;
  text-decoration: none !important;
}

/* Right-side Auth Buttons */
.tw-navbar-right-links {
  margin-left: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important; /* Clean space separator */
  width: max-content !important;
  min-width: max-content !important;
  flex-shrink: 0 !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  float: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  height: 100% !important;
}

/* Login - Elegant Outline Button */
.tw-nav-bar .menu > li.tw-navbar-right-links > a.tw-nav-login {
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  display: inline-block !important;
  float: none !important;
  line-height: normal !important;
  margin: 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.tw-nav-bar .menu > li.tw-navbar-right-links > a.tw-nav-login:hover {
  color: #1e293b !important;
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
  text-decoration: none !important;
}

/* Join Free - Dynamic Brand Accent Button */
.tw-nav-bar .menu > li.tw-navbar-right-links > a.tw-nav-join {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; /* Vivid Orange Gradient */
  padding: 7px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 30px !important;
  border: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.2) !important;
  display: inline-block !important;
  float: none !important;
  line-height: normal !important;
  margin: 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.tw-nav-bar .menu > li.tw-navbar-right-links > a.tw-nav-join:hover {
  background: linear-gradient(135deg, #0369a1 0%, #d97706 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 15px rgba(234, 88, 12, 0.35) !important;
  text-decoration: none !important;
}

/* --- HERO GRID LAYOUT --- */
.category-contant {
  background: var(--tw-white) !important;
  border: 1px solid var(--tw-border);
  box-shadow: none;
}

.col-md-3.category .category-contant .heading {
  display: block !important;
  background: var(--tw-gradient-primary) !important;
  color: var(--tw-white) !important;
  padding: 12px 15px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  margin: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#category-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--tw-border);
  border-top: none !important;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

#category-menu > li > a {
  display: block !important;
  line-height: 20px !important;
  padding: 10px 40px 10px 15px !important; /* Total height: 10px + 10px + 20px = 40px */
  color: #444444;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #eeeeee;
  transition: all 0.2s ease;
  position: relative !important;
}

#category-menu > li > a i {
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 13px !important;
  float: none !important;
  display: inline-block !important;
  color: #444444 !important;
}

#category-menu > li > a:hover {
  background: linear-gradient(90deg, var(--tw-blue-light) 0%, #ffffff 100%);
  color: var(--tw-blue-primary) !important;
  padding-left: 20px !important;
  text-decoration: none;
}

#category-menu > li:hover > a i {
  color: var(--tw-blue-primary) !important;
}

/* Side Sub Menu / Hover Drawer */
.side-sub-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 580px;
  background-color: var(--tw-white);
  border: 1px solid var(--tw-border);
  box-shadow: var(--tw-shadow-lg);
  z-index: 999;
  padding: 20px;
}

#category-menu > li:hover > .side-sub-menu {
  display: block !important;
}

/* Hero Section Grid Layout - side-by-side placement of slider and join widget */
.tw-hero-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 15px !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

/* Middle Slider */
.tw-hero-slider {
  flex: 0 0 65% !important;
  max-width: 65% !important;
  width: 65% !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid #e2e8f0 !important;
  background-color: var(--tw-white);
  overflow: hidden !important;
}

.tw-hero-slider .slider {
  max-height: none !important;
  height: 460px !important;
  margin-bottom: 0 !important;
}

.tw-hero-slider .owl-wrapper-outer,
.tw-hero-slider .owl-wrapper,
.tw-hero-slider .owl-item,
.tw-hero-slider .item {
  height: 100% !important;
}

.tw-hero-slider img {
  height: 460px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* --- Premium Slide Overlays & Captions --- */
.tw-hero-slide-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.2) 100%) !important;
  z-index: 2 !important;
}

.tw-hero-slide-content {
  position: absolute !important;
  bottom: 45px !important;
  left: 40px !important;
  right: 40px !important;
  z-index: 3 !important;
  color: #ffffff !important;
  max-width: 500px !important;
  text-align: left !important;
}

.tw-hero-slide-content .tw-badge {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}

.tw-hero-slide-content .tw-badge.orange {
  background: rgba(249, 115, 22, 0.2) !important;
  color: #fdba74 !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

.tw-hero-slide-content h2 {
  font-size: 32px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.tw-hero-slide-content p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #e2e8f0 !important;
  margin: 0 0 20px 0 !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.tw-hero-slide-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.tw-hero-slide-btn.orange {
  background: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3) !important;
}

.tw-hero-slide-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.tw-hero-slide-btn.orange:hover {
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5) !important;
}

/* --- HERO RIGHT JOIN FORM WIDGET --- */
.tw-hero-join-widget {
  flex: 0 0 35% !important;
  max-width: 35% !important;
  width: 35% !important;
  height: 460px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: none !important;
  padding: 22px 20px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 15px !important;
  color: #1e293b !important;
}

.tw-hero-join-widget h3 {
  font-weight: 800;
  font-size: 13.5px;
  color: #1e293b !important;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  line-height: 1.4;
}

.tw-form-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
}

.tw-form-tabs input[type="radio"] {
  display: none !important;
}

.tw-form-tabs label {
  cursor: pointer;
  display: block !important;
  text-align: center !important;
  padding: 5px 15px !important;
  border-radius: 20px !important;
  transition: all 0.2s ease;
  color: #475569 !important;
  flex: 1;
}

.tw-form-tabs label:has(input:checked) {
  background: var(--tw-gradient-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
}

.tw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tw-form-grid input, .tw-form-grid select {
  width: 100%;
  padding: 7px 10px;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-size: 11.5px;
  outline: none;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tw-form-grid select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2012%2012%27%3E%3Cpath%20fill%3D%27%23475569%27%20d%3D%27M10.293%203.293L6%207.586%201.707%203.293A1%201%200%2000.293%204.707l5%205a1%201%200%20001.414%200l5-5a1%201%200%2010-1.414-1.414z%27%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px !important;
  padding-right: 25px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.tw-form-grid input:focus, .tw-form-grid select:focus {
  border-color: #0369a1 !important;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15) !important;
  background-color: #ffffff !important;
}

.tw-form-grid select option {
  background: #ffffff;
  color: #1e293b;
}

.tw-form-full-row {
  grid-column: span 2;
}

.tw-form-terms {
  font-size: 9px;
  color: #64748b;
  line-height: 1.3;
  margin: 6px 0;
}

.tw-form-join-btn {
  background: var(--tw-gradient-primary) !important;
  color: var(--tw-white) !important;
  border: none;
  width: 100%;
  padding: 8px;
  font-weight: 800;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.2);
}

.tw-form-join-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* --- REACH IN CITIES CIRCLE IMAGES FIXES --- */
.cities {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  text-align: center !important;
  padding: 15px 0 !important;
}

.cities .city-img {
  width: 140px !important;
  height: 140px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 4px solid #ffffff !important;
  outline: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04) !important;
  margin: 0 auto 16px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.cities .city-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  transition: transform 0.4s ease !important;
}

.cities .city-name p {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #475569 !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

/* --- SECTIONS COMMON --- */
.tw-section-header {
  margin-top: 15px;
  margin-bottom: 20px;
  border-bottom: none !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 0 !important;
}

.tw-section-title {
  font-size: 20px !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px !important;
  position: relative !important;
  display: inline-block !important;
}

/* Accent bar under common section titles */
.tw-section-title::after {
  content: '';
  display: block;
  width: 45px;
  height: 3.5px;
  background: linear-gradient(90deg, var(--tw-blue-primary) 0%, #06b6d4 100%);
  margin-top: 8px;
  border-radius: 10px;
}

.tw-section-title i {
  background: var(--tw-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-right: 6px !important;
}

/* --- TESTIMONIALS CHAT BADGE --- */
.tw-chat-badge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--tw-gradient-primary) !important;
  color: var(--tw-white) !important;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}

.tw-chat-badge:hover {
  transform: translateY(-2px);
  opacity: 0.95;
  color: var(--tw-white) !important;
  text-decoration: none;
}

/* Responsive grid layout overrides for hero components */
@media (max-width: 991px) {
  .tw-hero-grid {
    flex-wrap: wrap !important;
  }
  .tw-hero-slider {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .tw-hero-slider .slider {
    height: 300px !important;
  }
  .tw-hero-slider img {
    height: 300px !important;
  }
  .tw-hero-join-widget {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 15px !important;
  }
}

/* --- SECTION BACKGROUND COLOR CORRECTION --- */
.pq-bg-grey {
  background-color: #f8fafc !important; /* Premium light grey background */
  padding: 15px 0 25px 0 !important;
}

/* --- PREMIUM CARD DESIGN SYSTEMS --- */

/* 1. Live Buy Leads Cards (Modern B2B Card System) */
.tw-buy-lead-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: auto !important;
  min-height: auto !important;
  box-sizing: border-box !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.tw-buy-lead-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.15) !important;
  border-color: #38bdf8 !important;
}

.tw-buy-lead-card-body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.tw-lead-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
}

.tw-lead-country {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

.tw-lead-flag {
  width: 16px !important;
  height: auto !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

.tw-lead-title {
  font-size: 15px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  margin: 4px 0 8px 0 !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

.tw-buy-lead-card:hover .tw-lead-title {
  color: var(--tw-blue-primary) !important;
}

.tw-lead-details {
  font-size: 12.5px !important;
  color: #334155 !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.45 !important;
  background: #f8fafc !important;
  border: 1px solid #edf2f7 !important;
  border-left: 3px solid #0284c7 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-height: 54px !important;
}

.tw-lead-specs-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  background: #f1f5f9 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
}

.tw-lead-spec-pill {
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
}

.tw-lead-spec-pill strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.tw-lead-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 2px !important;
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 10px !important;
}

.tw-lead-qty {
  font-size: 12px !important;
  color: #475569 !important;
}

.tw-lead-qty strong {
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.tw-lead-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.tw-lead-btn:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
  filter: brightness(1.08) !important;
}

/* 2. Featured / Global Products Cards (Modern Grid Showcase) */
.tw-product-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: auto !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tw-product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 25px rgba(2, 132, 199, 0.15) !important;
  border-color: #38bdf8 !important;
}

.tw-product-card .tw-product-img-wrapper {
  height: 190px !important;
  width: 100% !important;
  background: #f8fafc !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 0 !important;
}

.tw-prod-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

.tw-product-img {
  width: 100% !important;
  height: 100% !important;
  max-height: 190px !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}

.tw-product-card:hover .tw-product-img {
  transform: scale(1.06) !important;
}

.tw-product-content {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex-grow: 1 !important;
}

.tw-product-title {
  font-size: 14.5px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.35 !important;
  height: 38px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.tw-product-title a {
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.tw-product-title a:hover {
  color: #0284c7 !important;
}

.tw-product-price {
  font-size: 16px !important;
  font-weight: 850 !important;
  color: #0284c7 !important;
  margin-bottom: 6px !important;
}

.tw-product-moq-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f1f5f9 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  width: fit-content !important;
  margin-bottom: 8px !important;
}

.tw-product-moq-pill strong {
  color: #1e293b !important;
  font-weight: 700 !important;
}

.tw-product-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid #f1f5f9 !important;
  padding-top: 10px !important;
  margin-top: auto !important;
}

.tw-supplier-country {
  font-size: 11.5px !important;
  color: #334155 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.tw-contact-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 6px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
}

.tw-contact-btn:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.4) !important;
  filter: brightness(1.08) !important;
  color: #ffffff !important;
}

/* 3. Industries We Serve Cards */
.tw-industry-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  text-align: center !important;
  height: 220px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.tw-industry-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.04) !important;
  border-color: #cbd5e1 !important;
}

.tw-industry-icon {
  font-size: 26px !important;
  color: var(--tw-orange) !important;
  margin-bottom: 12px !important;
  height: 35px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tw-industry-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--tw-blue-primary) !important;
  margin: 0 0 12px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.tw-industry-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.tw-industry-links li {
  margin-bottom: 6px !important;
  border: none !important; /* Overriding default border-left from style.css */
}

.tw-industry-links li:last-child {
  border: none !important;
}

.tw-industry-links a {
  font-size: 12px !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.tw-industry-links a:hover {
  color: var(--tw-orange) !important;
  text-decoration: underline !important;
}

/* --- PARTNER LOGOS SEAMLESS WHITE BACKGROUND OVERRIDE --- */
.brand-wrapper {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 25px 0 !important;
}

.brand-main {
  border: none !important;
  padding: 0 50px !important;
}

.brand-main img {
  max-height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  opacity: 0.8 !important;
  transition: opacity 0.2s, transform 0.2s !important;
  display: block !important;
}

.brand-main img:hover {
  opacity: 1 !important;
  transform: scale(1.03) !important;
}

/* --- Missing Button and Text Styles --- */
.btn-rfq-orange {
  display: inline-block;
  background: var(--tw-gradient-primary) !important;
  color: var(--tw-white) !important;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
  border: none;
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25);
  transition: all 0.2s ease;
}
.btn-rfq-orange:hover {
  opacity: 0.95;
  color: var(--tw-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}
.btn-rfq-orange:active {
  transform: translateY(0);
}

.btn-listing-blue {
  display: inline-block;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  border-radius: 30px;
  box-shadow: var(--tw-shadow-sm);
  transition: all 0.2s ease;
}
.btn-listing-blue:hover {
  background: #f8fafc !important;
  color: #4f46e5 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px);
}
.btn-listing-blue:active {
  transform: translateY(0);
}

.text-orange {
  color: #4f46e5 !important; /* Redirect to Indigo */
}

.text-blue {
  color: #4f46e5 !important;
}
.text-blue:hover {
  color: #06b6d4 !important;
}

.tw-rfq-submit-btn {
  background: var(--tw-gradient-primary) !important;
  color: var(--tw-white) !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}
.tw-rfq-submit-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(6, 182, 212, 0.35);
}
.tw-rfq-submit-btn:active {
  transform: translateY(0);
}

/* --- Supplier Badge & Profile styling --- */
.tw-supplier-badge {
  display: inline-block !important;
  background-color: #22c55e !important; /* Premium Green */
  color: var(--tw-white) !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* --- Trust Section & Card Styling Redesign --- */
.tw-trust-section {
  background-color: #f8fafc !important; /* Soft modern backdrop */
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 60px 0 !important;
}

.tw-trust-card {
  text-align: center;
  padding: 40px 30px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Accent top lines on hover */
.tw-trust-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: center;
}

.tw-trust-card.c-secure::before {
  background: #00b074;
}
.tw-trust-card.c-support::before {
  background: #0052cc;
}
.tw-trust-card.c-sourcing::before {
  background: #0284c7;
}

.tw-trust-card:hover::before {
  transform: scaleX(1);
}

.tw-trust-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06) !important;
}

.tw-trust-card.c-secure:hover {
  border-color: #00b074 !important;
}
.tw-trust-card.c-support:hover {
  border-color: #0052cc !important;
}
.tw-trust-card.c-sourcing:hover {
  border-color: #0284c7 !important;
}

/* Icon Circular Wrappers */
.tw-trust-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px auto;
  transition: all 0.3s ease;
  font-size: 32px !important;
}

.tw-trust-icon-wrapper.secure {
  background: rgba(0, 176, 116, 0.08) !important;
  color: #00b074 !important;
}
.tw-trust-icon-wrapper.support {
  background: rgba(0, 82, 204, 0.08) !important;
  color: #0052cc !important;
}
.tw-trust-icon-wrapper.sourcing {
  background: rgba(249, 115, 22, 0.08) !important;
  color: #0284c7 !important;
}

/* Icon spin & glow hover effect */
.tw-trust-card:hover .tw-trust-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}
.tw-trust-card.c-secure:hover .tw-trust-icon-wrapper {
  background: #00b074 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 176, 116, 0.3) !important;
}
.tw-trust-card.c-support:hover .tw-trust-icon-wrapper {
  background: #0052cc !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0, 82, 204, 0.3) !important;
}
.tw-trust-card.c-sourcing:hover .tw-trust-icon-wrapper {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3) !important;
}

.tw-trust-card h4 {
  font-weight: 800 !important;
  margin-bottom: 12px;
  font-size: 17px !important;
  transition: all 0.3s ease;
}
.tw-trust-card.c-secure h4 {
  color: #1e293b !important;
}
.tw-trust-card.c-secure:hover h4 {
  color: #00b074 !important;
}
.tw-trust-card.c-support h4 {
  color: #1e293b !important;
}
.tw-trust-card.c-support:hover h4 {
  color: #0052cc !important;
}
.tw-trust-card.c-sourcing h4 {
  color: #1e293b !important;
}
.tw-trust-card.c-sourcing:hover h4 {
  color: #0284c7 !important;
}

.tw-trust-card p {
  color: #64748b !important; /* Muted modern slate description */
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 0;
}

/* --- Testimonial Card Styling Redesign --- */
.tw-testi-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px 22px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 20px !important;
}

.tw-testi-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #0284c7, #06b6d4) !important;
  opacity: 0.9 !important;
}

.tw-testi-card::after {
  content: '\f10d' !important;
  font-family: 'FontAwesome' !important;
  position: absolute !important;
  bottom: 12px !important;
  right: 18px !important;
  font-size: 52px !important;
  color: #f1f5f9 !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
  z-index: 0 !important;
}

.tw-testi-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.tw-testi-card:hover::after {
  color: #e2e8f0 !important;
  transform: scale(1.08) !important;
}

.tw-testi-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}

.tw-testi-user {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.tw-testi-avatar-box {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.tw-testi-avatar-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2.5px solid #0284c7 !important;
}

.tw-testi-verified-dot {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

.tw-testi-meta {
  display: flex !important;
  flex-direction: column !important;
}

.tw-testi-name {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 2px 0 !important;
}

.tw-testi-role {
  font-size: 12px !important;
  color: #64748b !important;
  margin: 0 0 4px 0 !important;
  font-weight: 500 !important;
}

.tw-testi-stars {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #f59e0b !important;
  font-size: 11px !important;
}

.tw-testi-score {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-left: 4px !important;
}

.tw-testi-badge {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #059669 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.tw-testi-quote {
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 16px !important;
  flex: 1 !important;
}

.tw-testi-quote p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  font-style: italic !important;
  margin: 0 !important;
}

.tw-testi-footer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px dashed #e2e8f0 !important;
  padding-top: 12px !important;
  position: relative !important;
  z-index: 1 !important;
  flex-wrap: wrap !important;
}

.tw-testi-pill {
  font-size: 11px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.tw-testi-pill.trade {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

/* --- Brand Partner Marquee Redesign --- */
.brand-wrapper {
  background-color: #ffffff !important;
  padding: 40px 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.tw-brand-marquee-track {
  display: flex !important;
  width: max-content !important;
  animation: brand-scroll 25s linear infinite !important;
}

.tw-brand-marquee-group {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 60px !important; /* Space between logos */
  padding-right: 60px !important;
}

.tw-brand-logo-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  transition: all 0.3s ease !important;
}

.tw-brand-logo-item img {
  height: 38px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  filter: grayscale(100%) !important; /* Clean gray logo standard */
  opacity: 0.65 !important;
  transition: all 0.3s ease !important;
}

.tw-brand-logo-item:hover img {
  filter: grayscale(0%) !important; /* Vibrant color on hover */
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

@keyframes brand-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Interactive Hover Effects --- */
.cities:hover {
  transform: translateY(-6px) !important;
}

.cities:hover .city-img {
  outline-color: #0284c7 !important; /* Theme orange border ring on hover */
  box-shadow: 0 15px 30px rgba(249, 115, 22, 0.15) !important; /* Subtle colored glow shadow */
}

.cities:hover .city-img img {
  transform: scale(1.1) !important; /* Premium zoom inside circle */
}

.cities:hover .city-name p {
  color: #0284c7 !important; /* Active text color matching */
}

/* --- Amazon Services Dropdown --- */
.tw-nav-bar .menu > li.dropdown {
  position: relative !important;
}
.tw-nav-bar .menu > li.dropdown .dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  margin-top: 8px !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  z-index: 1000 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.tw-nav-bar .menu > li.dropdown:hover .dropdown-menu {
  display: block !important; /* Native CSS fallback hover dropdown */
  animation: tw-fade-in-down 0.2s forwards !important;
}
.tw-nav-bar .menu > li.dropdown .dropdown-menu > li {
  display: block !important;
  width: 100% !important;
  border: none !important;
}
.tw-nav-bar .menu > li.dropdown .dropdown-menu > li > a {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  display: block !important;
  transition: all 0.2s ease !important;
  border: none !important;
  text-align: left !important;
  border-radius: 0 !important;
}
.tw-nav-bar .menu > li.dropdown .dropdown-menu > li > a:hover {
  background-color: #f1f5f9 !important;
  color: var(--tw-blue-primary) !important;
  text-decoration: none !important;
}

@keyframes tw-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Owl Carousel Main Slider Custom Navigation --- */
.tw-hero-slider {
  position: relative;
}
.tw-hero-slider .owl-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 100;
}
.tw-hero-slider:hover .owl-buttons {
  opacity: 1;
}
.tw-hero-slider .owl-buttons .owl-prev,
.tw-hero-slider .owl-buttons .owl-next {
  background: rgba(27, 46, 75, 0.75) !important;
  color: var(--tw-white) !important;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 36px !important;
}
.tw-hero-slider .owl-buttons .owl-prev:hover,
.tw-hero-slider .owl-buttons .owl-next:hover {
  background: var(--tw-orange) !important;
  transform: scale(1.05);
}

/* --- Responsive Slider Caption --- */
@media (max-width: 768px) {
  .tw-hero-slider .carousel-caption {
    left: 5% !important;
    right: 5% !important;
    bottom: 10% !important;
    padding: 10px !important;
    background: rgba(0, 0, 0, 0.6) !important;
  }
  .tw-hero-slider .carousel-caption h2 {
    font-size: 20px !important;
    margin-bottom: 5px !important;
  }
  .tw-hero-slider .carousel-caption p {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
  .tw-hero-slider .carousel-caption a {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
}

/* --- Form Select Adjustment --- */
.tw-form-grid select {
  height: 28px !important;
  padding: 4px 8px !important;
}

/* --- B2B Buy Lead Transaction Grid --- */
.tw-lead-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 12px 0 !important;
  padding: 10px 0 !important;
  border-top: 1px dashed #cbd5e1 !important;
  border-bottom: 1px dashed #cbd5e1 !important;
  font-size: 11.5px !important;
  color: #475569 !important;
  height: 62px !important; /* Fixed height for consistency */
}

.tw-lead-info-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tw-lead-info-item i {
  color: var(--tw-orange) !important;
  font-size: 12px !important;
  width: 14px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.tw-lead-info-item span {
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-right: 2px !important;
}

/* --- Live Activity Card Perfect Sizing --- */
.pq-bg-grey .col-md-3 .category-contant {
  height: 390px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.pq-bg-grey .col-md-3 .category-contant .heading {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.pq-bg-grey .col-md-3 #liveActivityFeed {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 15px !important;
}

/* --- MODERN CIRCULAR CATEGORY & SECTOR SHOWCASE --- */
.tw-circle-cat-grid {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  margin: 20px 0 35px 0 !important;
}

.tw-circle-cat-item {
  flex: 0 0 calc(12.5% - 15px) !important;
  max-width: calc(12.5% - 15px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  text-decoration: none !important;
  group: true;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tw-circle-cat-img-box {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 3px solid #e2e8f0 !important;
  padding: 3px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.tw-circle-cat-img-box img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.4s ease !important;
}

.tw-circle-cat-item:hover .tw-circle-cat-img-box {
  border-color: #0284c7 !important;
  transform: translateY(-5px) scale(1.06) !important;
  box-shadow: 0 10px 22px rgba(2, 132, 199, 0.25) !important;
}

.tw-circle-cat-item:hover .tw-circle-cat-img-box img {
  transform: scale(1.1) !important;
}

.tw-circle-cat-title {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  margin-top: 10px !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease !important;
}

.tw-circle-cat-item:hover .tw-circle-cat-title {
  color: #0284c7 !important;
}

.tw-circle-cat-count {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

/* 4-Hub Spotlight Showcase Grid */
.tw-hubs-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 25px !important;
}

.tw-hub-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tw-hub-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 28px rgba(2, 132, 199, 0.15) !important;
  border-color: #38bdf8 !important;
}

.tw-hub-header {
  height: 115px !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.tw-hub-header-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  transition: transform 0.5s ease !important;
}

.tw-hub-card:hover .tw-hub-header-bg {
  transform: scale(1.08) !important;
}

.tw-hub-header-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(7, 23, 44, 0.4) 0%, rgba(7, 23, 44, 0.9) 100%) !important;
  z-index: 2 !important;
}

.tw-hub-badge {
  position: relative !important;
  z-index: 3 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  width: fit-content !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

.tw-hub-title {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

.tw-hub-products-list {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-grow: 1 !important;
}

.tw-hub-item-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}

.tw-hub-item-row:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.tw-hub-item-row:hover {
  transform: translateX(3px) !important;
}

.tw-hub-item-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid #e2e8f0 !important;
}

.tw-hub-item-info {
  flex-grow: 1 !important;
  min-width: 0 !important;
}

.tw-hub-item-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 2px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tw-hub-item-row:hover .tw-hub-item-name {
  color: #0284c7 !important;
}

.tw-hub-item-price {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  margin: 0 !important;
}

.tw-hub-item-moq {
  font-size: 10.5px !important;
  color: #64748b !important;
  margin: 0 !important;
}

.tw-hub-footer {
  padding: 10px 14px 14px 14px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.tw-hub-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  padding: 7px 12px !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.tw-hub-btn:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3) !important;
}

@media (max-width: 1200px) {
  .tw-circle-cat-item {
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
  }
  .tw-hubs-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .tw-circle-cat-item {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
  .tw-hubs-container {
    grid-template-columns: 1fr !important;
  }
}
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
}

.tw-subcat-links li {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.tw-subcat-links li a {
  font-size: 11.5px !important;
  color: #64748b !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.tw-subcat-links li a:hover {
  color: var(--tw-blue-primary) !important;
  text-decoration: underline !important;
  background: transparent !important;
  transform: none !important;
}

/* Add bullet points in between links */
.tw-subcat-links li:not(:last-child)::after {
  content: "\2022" !important; /* Bullet point symbol */
  color: #cbd5e1 !important;
  margin-left: 10px !important;
  font-size: 10px !important;
  pointer-events: none !important;
}

.tw-subcat-img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s ease !important;
}

.tw-subcat-card:hover .tw-subcat-img {
  transform: scale(1.08) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 1200px) {
  .tw-cat-block-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 991px) {
  .tw-cat-block-body {
    flex-direction: column !important;
  }
  .tw-cat-block-banner {
    width: 100% !important;
    height: 160px !important;
  }
}

@media (max-width: 767px) {
  .tw-cat-block-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- DUAL-MODE AUTHENTICATION MODAL & CTA STYLES --- */
.tw-top-cta-btn {
  background: var(--tw-gradient-primary) !important;
  color: var(--tw-white) !important;
  border: none !important;
  padding: 4px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-block;
  box-shadow: var(--tw-shadow-sm);
}

.tw-top-cta-btn:hover {
  background: var(--tw-gradient-primary-hover) !important;
  transform: translateY(-1px);
}

.tw-top-cta-btn.buyer {
  background: var(--tw-gradient-accent) !important;
}
.tw-top-cta-btn.buyer:hover {
  background: var(--tw-gradient-accent-hover) !important;
}

/* Modal Overlay Backdrop */
.tw-auth-overlay {
  display: none;
  position: fixed;
  z-index: 10500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(15, 23, 42, 0.6); /* Modern slate backdrop */
  backdrop-filter: blur(4px); /* Premium glass blur */
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease-out;
}

/* Modal Card */
.tw-auth-card {
  background-color: var(--tw-white);
  padding: 30px;
  border-radius: 12px;
  width: 95%;
  max-width: 480px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  position: relative;
  border: 1px solid var(--tw-border);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.tw-auth-close {
  position: absolute;
  right: 20px;
  top: 18px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  color: #94a3b8;
  transition: color 0.2s ease;
  line-height: 1;
}

.tw-auth-close:hover {
  color: #475569;
}

/* Tabs */
.tw-auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--tw-border);
  margin-bottom: 20px;
}

.tw-auth-tab-btn {
  flex: 1;
  background: none !important;
  border: none !important;
  padding: 12px 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tw-text-secondary) !important;
  cursor: pointer !important;
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  outline: none !important;
}

.tw-auth-tab-btn:hover {
  color: var(--tw-blue-primary) !important;
}

.tw-auth-tab-btn.active {
  color: var(--tw-blue-primary) !important;
}

.tw-auth-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: var(--tw-gradient-primary);
  border-radius: 2px;
}

/* Form Styles */
.tw-auth-form-group {
  margin-bottom: 15px;
}

.tw-auth-form-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tw-auth-input, .tw-auth-select {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  color: var(--tw-text-primary) !important;
  background-color: #ffffff !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  height: auto !important;
}

.tw-auth-input:focus, .tw-auth-select:focus {
  border-color: var(--tw-blue-primary) !important;
  box-shadow: 0 0 0 3px rgba(53, 99, 182, 0.15) !important;
}

/* Segmented Control User Type Tab */
.tw-auth-type-container {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 15px;
  gap: 4px;
}

.tw-auth-type-label {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.tw-auth-type-label input[type="radio"] {
  display: none;
}

.tw-auth-type-label.active {
  background: #ffffff;
  color: var(--tw-blue-primary);
  box-shadow: var(--tw-shadow-sm);
}

/* 2-Column Grid Layout for registration fields */
.tw-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tw-auth-span-2 {
  grid-column: span 2;
}

@media (max-width: 480px) {
  .tw-auth-grid {
    grid-template-columns: 1fr;
  }
  .tw-auth-span-2 {
    grid-column: span 1;
  }
}

.tw-auth-submit {
  width: 100%;
  padding: 12px !important;
  background: var(--tw-gradient-primary) !important;
  color: var(--tw-white) !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 6px -1px rgba(53, 99, 182, 0.1), 0 2px 4px -1px rgba(53, 99, 182, 0.06);
  margin-top: 10px;
}

.tw-auth-submit:hover {
  background: var(--tw-gradient-primary-hover) !important;
  opacity: 0.95;
  transform: translateY(-1px);
}

.tw-auth-switch-text {
  text-align: center;
  font-size: 12.5px;
  color: var(--tw-text-secondary);
  margin-top: 15px;
}

.tw-auth-switch-text a {
  color: var(--tw-blue-primary);
  font-weight: 700;
  text-decoration: none;
}

.tw-auth-switch-text a:hover {
  text-decoration: underline;
}

/* Toast Notifications System */
.tw-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  width: 90%;
}

.tw-toast {
  background: #ffffff;
  border-left: 4px solid var(--tw-blue-primary);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.tw-toast.success {
  border-left-color: #10b981; /* Green */
}

.tw-toast.error {
  border-left-color: #ef4444; /* Red */
}

.tw-toast-icon {
  font-size: 18px;
}

.tw-toast.success .tw-toast-icon {
  color: #10b981;
}

.tw-toast.error .tw-toast-icon {
  color: #ef4444;
}

.tw-toast-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--tw-text-primary);
  line-height: 1.4;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Thin custom scrollbar for buy leads specs boxes */
.tw-buy-lead-card div::-webkit-scrollbar {
  width: 4px !important;
}
.tw-buy-lead-card div::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}
.tw-buy-lead-card div::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 2px !important;
}

/* --- PREMIUM FOOTER STYLING OVERRIDES --- */
.wrapper-footer {
  background-color: #0b0f19 !important; /* Deep elegant dark slate/navy */
  color: #94a3b8 !important; /* Soft grey text */
  padding: 50px 0 20px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.wrapper-footer h4 {
  color: #ffffff !important; /* Crisp white titles */
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 20px !important;
  border-bottom: 2px solid var(--tw-blue-primary) !important;
  padding-bottom: 8px !important;
  display: inline-block !important;
}

.wrapper-footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wrapper-footer ul li {
  margin-bottom: 10px !important;
}

.wrapper-footer ul li a {
  color: #94a3b8 !important; /* Slate grey links */
  font-size: 13.5px !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.wrapper-footer ul li a:hover {
  color: var(--tw-orange) !important; /* Vibrant orange on hover */
  transform: translateX(4px) !important; /* Interactive slide effect */
}

/* Social links hover overrides */
.wrapper-footer .social-links a {
  background: #1e293b !important;
  color: #94a3b8 !important;
  transition: all 0.3s ease !important;
}

.wrapper-footer .social-links a:hover {
  background: var(--tw-orange) !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3) !important;
}

/* Copyright Bar Redesign */
.wrapper-copy {
  background-color: #020617 !important; /* Extremely clean dark background */
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 15px 0 !important;
  color: #64748b !important; /* Muted text */
  font-size: 12.5px !important;
}

.wrapper-copy p {
  margin: 0 !important;
  color: #64748b !important;
}

/* --- PREMIUM ROLLING MARQUEE TICKER (cellcommnext.com inspired) --- */
.tw-ticker-section {
  padding: 40px 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.marquee-rows-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
}

.marquee-row-item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-radius: 50px !important;
  padding: 6px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid #f1f5f9 !important;
}

.marquee-row-item.row-align-left {
  padding-left: 6px !important;
}

.marquee-row-item.row-align-right {
  padding-right: 6px !important;
}

.marquee-badge-wrapper {
  z-index: 5 !important;
  flex-shrink: 0 !important;
}

.marquee-badge {
  display: inline-block !important;
  padding: 10px 24px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

.badge-green .marquee-badge {
  background: #00b074 !important;
}

.badge-pink .marquee-badge {
  background: #db2777 !important;
}

.badge-blue .marquee-badge {
  background: #0052cc !important;
}

.marquee-track-wrapper {
  flex-grow: 1 !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  padding: 6px 0 !important;
  mask-image: linear-gradient(to right, transparent, #000 50px, #000 calc(100% - 50px), transparent) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 50px, #000 calc(100% - 50px), transparent) !important;
}

.marquee-track-scroll {
  display: flex !important;
  width: max-content !important;
  animation-duration: 25s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  will-change: transform !important;
}

.marquee-track-scroll.scroll-normal {
  animation-name: marquee-left-scroll !important;
}

.marquee-track-scroll.scroll-reverse {
  animation-name: marquee-right-scroll !important;
}

.marquee-track-scroll:hover {
  animation-play-state: paused !important;
}

.marquee-group {
  display: flex !important;
  gap: 15px !important;
  padding-right: 15px !important;
  align-items: center !important;
}

.marquee-pill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.2s ease !important;
}

.marquee-pill:hover {
  border-color: var(--tw-blue-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  cursor: pointer !important;
}

.icon-green {
  color: #00b074 !important;
}

.icon-pink {
  color: #db2777 !important;
}

.icon-blue {
  color: #0052cc !important;
}

@keyframes marquee-left-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right-scroll {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* --- PREMIUM SIDE BAR ACTIVITY WIDGET --- */
.tw-activity-widget {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01) !important;
  height: 335px !important; /* Perfect pixel alignment with Buy Leads cards */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.tw-activity-widget:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05) !important;
  border-color: #cbd5e1 !important;
}

.tw-activity-title {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.live-buy-leads-container {
  padding: 15px 20px !important;
  flex-grow: 1 !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.tw-activity-item {
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  transition: transform 0.25s ease !important;
}

.tw-activity-item:hover {
  transform: translateX(3px) !important;
}

.tw-activity-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.tw-activity-flag {
  width: 18px !important;
  height: auto !important;
  border-radius: 2px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}

.tw-activity-info {
  font-size: 12px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.tw-activity-time {
  color: #94a3b8 !important;
  font-size: 10.5px !important;
  display: block !important;
  margin-top: 3px !important;
}

/* ============================================================
   SLIDER BANNER HEIGHT - BALANCED PREMIUM 540px FIT
   ============================================================ */

.slider-main,
#heroExportCarousel,
#heroExportCarousel .carousel-inner,
#heroExportCarousel .carousel-inner > .item {
  height: 540px !important;
  min-height: 540px !important;
  max-height: 540px !important;
  border-radius: 0px !important;
  background: #0f172a !important;
  position: relative !important;
  overflow: hidden !important;
}

.tw-slide-img {
  width: 100% !important;
  height: 540px !important;
  max-height: 540px !important;
  min-height: 540px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0px !important;
}

.tw-hero-slide-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.6) 48%, rgba(15, 23, 42, 0.15) 100%) !important;
  z-index: 2 !important;
}

.tw-hero-slide-content {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  left: 60px !important;
  right: auto !important;
  z-index: 5 !important;
  color: #ffffff !important;
  max-width: 620px !important;
  text-align: left !important;
}

.tw-hero-slide-content .tw-badge {
  background: rgba(37, 99, 235, 0.25) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  padding: 5px 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  display: inline-block !important;
  margin-bottom: 10px !important;
}

.tw-hero-slide-content .tw-badge.gold {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #facc15 !important;
  border-color: rgba(250, 204, 21, 0.4) !important;
}

.tw-hero-slide-content .tw-badge.orange {
  background: rgba(249, 115, 22, 0.2) !important;
  color: #fdba74 !important;
  border-color: rgba(253, 186, 116, 0.4) !important;
}

.tw-hero-slide-content h2 {
  font-size: 32px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.tw-hero-slide-content p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #cbd5e1 !important;
  margin: 0 0 16px 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.tw-hero-slide-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-radius: 25px !important;
  padding: 9px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3) !important;
}

.tw-hero-slide-btn.gold {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3) !important;
}

.tw-hero-slide-btn.orange {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.3) !important;
}

.tw-hero-slide-btn:hover {
  transform: translateY(-2px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .slider-main,
  #heroExportCarousel,
  #heroExportCarousel .carousel-inner,
  #heroExportCarousel .carousel-inner > .item,
  .tw-slide-img {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
  }
  .tw-hero-slide-content {
    left: 20px !important;
    right: 20px !important;
    max-width: 100% !important;
  }
  .tw-hero-slide-content h2 {
    font-size: 20px !important;
  }
  .tw-hero-slide-content p {
    font-size: 12px !important;
  }
}

/* Pure Image-to-Image Crossfade */
#heroExportCarousel.carousel-fade .carousel-inner .item {
  opacity: 0 !important;
  transition: opacity 0.7s ease-in-out !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  display: block !important;
  z-index: 1 !important;
}

#heroExportCarousel.carousel-fade .carousel-inner .item.active {
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

#heroExportCarousel.carousel-fade .carousel-inner .item.next,
#heroExportCarousel.carousel-fade .carousel-inner .item.prev,
#heroExportCarousel.carousel-fade .carousel-inner .item.next.left,
#heroExportCarousel.carousel-fade .carousel-inner .item.prev.right {
  opacity: 1 !important;
  z-index: 3 !important;
  transform: none !important;
  left: 0 !important;
}

#heroExportCarousel.carousel-fade .carousel-inner .active.left,
#heroExportCarousel.carousel-fade .carousel-inner .active.right {
  opacity: 0 !important;
  z-index: 1 !important;
  transform: none !important;
  left: 0 !important;
}

#heroExportCarousel.carousel-fade .carousel-control,
#heroExportCarousel.carousel-fade .carousel-indicators {
  z-index: 30 !important;
}

/* ==========================================================================
   Circle Category Exploration & Industry Hub Showcases
   ========================================================================== */

.tw-circle-cat-section {
  background: #ffffff !important;
  padding: 30px 0 25px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.tw-circle-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  gap: 16px !important;
  padding: 10px 0 !important;
}

@media (max-width: 1200px) {
  .tw-circle-cat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px) {
  .tw-circle-cat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 480px) {
  .tw-circle-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.tw-circle-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 12px 8px !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.tw-circle-cat-card:hover {
  transform: translateY(-5px) !important;
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.12) !important;
  text-decoration: none !important;
}

.tw-circle-cat-thumb-box {
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  background: #0f172a !important;
  transition: all 0.3s ease !important;
}

.tw-circle-cat-card:hover .tw-circle-cat-thumb-box {
  border-color: #0284c7 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25) !important;
}

.tw-circle-cat-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.tw-circle-cat-card:hover .tw-circle-cat-thumb {
  transform: scale(1.12) !important;
}

.tw-circle-cat-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  transition: color 0.2s ease !important;
}

.tw-circle-cat-card:hover .tw-circle-cat-name {
  color: #0284c7 !important;
}

.tw-circle-cat-count {
  font-size: 11px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* --- Industry Showcase Hubs Grid --- */
.tw-hubs-section {
  background: #f1f5f9 !important;
  padding: 36px 0 !important;
}

.tw-hubs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1200px) {
  .tw-hubs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .tw-hubs-grid {
    grid-template-columns: 1fr !important;
  }
}

.tw-hub-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s ease !important;
}

.tw-hub-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-3px) !important;
}

.tw-hub-header {
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #071527 0%, #0f3056 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.tw-hub-header.agro {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
}

.tw-hub-header.packaging {
  background: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%) !important;
}

.tw-hub-header.apparel {
  background: linear-gradient(135deg, #581c87 0%, #6b21a8 100%) !important;
}

.tw-hub-header.machinery {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

.tw-hub-header h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tw-hub-header a {
  font-size: 11.5px !important;
  color: #bae6fd !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.tw-hub-header a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.tw-hub-body {
  padding: 12px 14px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.tw-hub-item-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.tw-hub-item-row:hover {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  text-decoration: none !important;
  transform: translateX(3px) !important;
}

.tw-hub-item-thumb {
  width: 58px !important;
  height: 58px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  border: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}

.tw-hub-item-details {
  flex: 1 !important;
  min-width: 0 !important;
}

.tw-hub-item-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 4px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tw-hub-item-price {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  margin-bottom: 3px !important;
}

.tw-hub-item-moq {
  font-size: 10.5px !important;
  color: #64748b !important;
  background: #e2e8f0 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  font-weight: 600 !important;
}

.tw-hub-footer {
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  text-align: center !important;
}

.tw-hub-footer a {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.tw-hub-footer a:hover {
  color: #0369a1 !important;
}

/* ==========================================================================
   Global Buyer Regions & Corridors Section Redesign
   ========================================================================== */

.tw-regions-section {
  padding: 38px 0 32px 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.tw-regions-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 1200px) {
  .tw-regions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  .tw-regions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .tw-regions-grid {
    grid-template-columns: 1fr !important;
  }
}

.tw-region-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative !important;
}

.tw-region-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 26px rgba(2, 132, 199, 0.15) !important;
  border-color: #0284c7 !important;
  background: #ffffff !important;
  text-decoration: none !important;
}

.tw-region-banner {
  position: relative !important;
  height: 110px !important;
  width: 100% !important;
  overflow: hidden !important;
}

.tw-region-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.tw-region-card:hover .tw-region-banner img {
  transform: scale(1.1) !important;
}

.tw-region-banner-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
}

.tw-region-flag {
  position: absolute !important;
  bottom: 8px !important;
  left: 10px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
}

.tw-region-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  color: #38bdf8 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.tw-region-body {
  padding: 12px 12px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.tw-region-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  transition: color 0.2s ease !important;
}

.tw-region-card:hover .tw-region-title {
  color: #0284c7 !important;
}

.tw-region-buyers {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
}

.tw-region-tags {
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
  margin-top: auto !important;
  border-top: 1px dashed #e2e8f0 !important;
  padding-top: 8px !important;
}

.tw-region-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  margin-top: 8px !important;
  padding-top: 6px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.tw-region-card:hover .tw-region-cta {
  color: #0369a1 !important;
}

/* ==========================================================================
   Enterprise Trust & Assurance Section Redesign
   ========================================================================== */

.tw-trust-section {
  padding: 42px 0 46px 0 !important;
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.tw-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 991px) {
  .tw-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

.tw-trust-box {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  padding: 26px 22px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}

.tw-trust-box::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #0284c7, #06b6d4) !important;
  opacity: 0.9 !important;
}

.tw-trust-box.secure::before {
  background: linear-gradient(90deg, #10b981, #059669) !important;
}

.tw-trust-box.support::before {
  background: linear-gradient(90deg, #0284c7, #3b82f6) !important;
}

.tw-trust-box.sourcing::before {
  background: linear-gradient(90deg, #f59e0b, #ea580c) !important;
}

.tw-trust-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1) !important;
  border-color: #cbd5e1 !important;
}

.tw-trust-box-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
}

.tw-trust-medallion {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.tw-trust-medallion.green {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
}

.tw-trust-medallion.blue {
  background: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%) !important;
}

.tw-trust-medallion.orange {
  background: linear-gradient(135deg, #f59e0b 0%, #c2410c 100%) !important;
}

.tw-trust-box-title {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.tw-trust-box-desc {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin-bottom: 16px !important;
}

.tw-trust-bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  border-top: 1px dashed #e2e8f0 !important;
  padding-top: 14px !important;
}

.tw-trust-bullets li {
  font-size: 12.5px !important;
  color: #334155 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tw-trust-bullets li i {
  color: #10b981 !important;
  font-size: 13px !important;
}

/* ==========================================================================
   Header Logo & Responsive Header System (Mobile, Tablet, Desktop)
   ========================================================================== */

.tw-main-header {
  background: #f7f7f7 !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  position: relative;
  z-index: 100;
}

.tw-header-container {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Desktop Header Only (>= 992px) */
@media (min-width: 992px) {
  .tw-desktop-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .tw-desk-logo-col {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .tw-desk-logo-img {
    height: 68px !important;
    max-height: 68px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .tw-desk-search-col {
    flex: 1 !important;
    max-width: 680px !important;
    margin: 0 auto !important;
  }

  .tw-desk-icons-col {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .tw-mob-header-wrap {
    display: none !important;
  }
}

.tw-search-container {
  display: flex !important;
  background: #ffffff !important;
  border: 2px solid #0284c7 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  height: 42px !important;
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.12) !important;
  width: 100% !important;
}

.tw-search-select {
  border: none !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  outline: none !important;
  border-right: 1px solid #e2e8f0 !important;
}

.tw-search-input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 6px 16px !important;
  font-size: 13.5px !important;
  outline: none !important;
  color: #0f172a !important;
  min-width: 0 !important;
}

.tw-search-btn {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 0 24px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.tw-search-btn:hover {
  filter: brightness(1.1) !important;
}

.tw-desktop-icons {
  display: flex !important;
  gap: 22px !important;
  align-items: center !important;
}

.tw-header-icon-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.tw-header-icon-item i {
  color: #0284c7 !important;
  font-size: 21px !important;
  margin-bottom: 2px !important;
  transition: transform 0.2s ease !important;
}

.tw-header-icon-item:hover i {
  transform: translateY(-2px) scale(1.1) !important;
}

/* Nav Bar Desktop Layout (>= 992px) */
@media (min-width: 992px) {
  .tw-nav-bar {
    display: block !important;
    background: linear-gradient(90deg, #07172c 0%, #0e2b4d 20%, #163f73 50%, #0e2b4d 80%, #07172c 100%) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-bottom: 2px solid #0284c7 !important;
    box-shadow: 0 4px 15px rgba(7, 23, 44, 0.25) !important;
    padding: 4px 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 99 !important;
  }
}

.tw-nav-flex-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.tw-menu-list {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  gap: 8px !important;
}

.tw-nav-link-btn {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s ease !important;
}

.tw-nav-link-btn.rfq {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}

.tw-nav-link-btn:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

.tw-nav-link-item {
  color: #f8fafc !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  display: inline-block !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.tw-nav-link-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #38bdf8 !important;
}

.tw-nav-auth-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tw-nav-user-label {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tw-nav-btn-logout {
  color: #fca5a5 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  padding: 5px 12px !important;
  border-radius: 15px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.tw-nav-btn-login {
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
}

.tw-nav-btn-join {
  background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  padding: 7px 20px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4) !important;
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   Mobile & Tablet Responsive System (<= 991px)
   ========================================================================== */

@media (max-width: 991px) {
  .tw-desktop-header-row {
    display: none !important;
  }
  
  .tw-top-reg-banner {
    display: none !important;
  }
  
  .tw-nav-bar {
    display: none !important;
  }
  
  .tw-header-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  
  .tw-mob-header-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 6px 0 8px 0 !important;
  }
  
  /* Row 1: Left Spacer (balanced), Center Logo, Right Hamburger */
  .tw-mob-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
  }
  
  .tw-mob-left-spacer {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  
  .tw-mob-center-logo {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .tw-mob-logo-img {
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
  }
  
  .tw-mob-right-menu {
    width: 44px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  
  .tw-mob-hamburger-btn {
    background: #ffffff !important;
    border: 1.5px solid #0284c7 !important;
    border-radius: 8px !important;
    color: #0284c7 !important;
    font-size: 20px !important;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
    transition: all 0.2s ease !important;
  }
  
  .tw-mob-hamburger-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
  }
  
  /* Row 2: Search Bar */
  .tw-mob-search-row {
    margin-top: 8px !important;
    width: 100% !important;
  }
  
  .tw-mob-search-wrap {
    display: flex !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 2px solid #0284c7 !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    height: 40px !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
    box-sizing: border-box !important;
  }
  
  .tw-mob-search-select {
    border: none !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 0 10px !important;
    outline: none !important;
    border-right: 1px solid #e2e8f0 !important;
    width: 85px !important;
    flex-shrink: 0 !important;
  }
  
  .tw-mob-search-input {
    flex: 1 !important;
    border: none !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    color: #0f172a !important;
    outline: none !important;
    min-width: 0 !important;
    background: transparent !important;
  }
  
  .tw-mob-search-submit {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   Mobile & Tablet Slide-Out Drawer Menu
   ========================================================================== */

.tw-drawer-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.65) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(4px) !important;
}

.tw-drawer-backdrop.show {
  opacity: 1 !important;
  visibility: visible !important;
}

.tw-mobile-drawer-menu {
  position: fixed !important;
  top: 0 !important;
  right: -320px !important; /* Opens from right side */
  left: auto !important;
  width: 300px !important;
  max-width: 85vw !important;
  height: 100% !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.25) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.tw-mobile-drawer-menu.open {
  right: 0 !important;
}

.tw-drawer-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
}

.tw-drawer-logo {
  height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
}

.tw-drawer-close-btn {
  background: none !important;
  border: none !important;
  font-size: 28px !important;
  color: #64748b !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.tw-drawer-auth-box {
  padding: 16px 18px !important;
  background: linear-gradient(135deg, #071527 0%, #035382 100%) !important;
  color: #ffffff !important;
}

.tw-drawer-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.tw-drawer-user-info i {
  font-size: 32px !important;
  color: #38bdf8 !important;
}

.tw-drawer-user-info h4 {
  margin: 0 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.tw-drawer-user-info p {
  margin: 0 !important;
  font-size: 11.5px !important;
  color: #94a3b8 !important;
}

.tw-drawer-auth-actions {
  display: flex !important;
  gap: 8px !important;
}

.tw-drawer-btn-primary {
  flex: 1 !important;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
}

.tw-drawer-btn-secondary {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
}

.tw-drawer-btn-danger {
  display: inline-block !important;
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

/* Quick Strip inside drawer for Member Area, Messages, Need Help */
.tw-drawer-quick-strip {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  padding: 12px 10px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.tw-drawer-quick-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  gap: 3px !important;
  transition: all 0.2s ease !important;
}

.tw-drawer-quick-item i {
  font-size: 18px !important;
  color: #0284c7 !important;
}

.tw-drawer-quick-item:hover {
  color: #0284c7 !important;
}

.tw-drawer-links {
  list-style: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  flex: 1 !important;
}

.tw-drawer-links li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

.tw-drawer-links li a i {
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  color: #64748b !important;
}

.tw-drawer-links li a:hover,
.tw-drawer-links li a.active {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border-left-color: #0284c7 !important;
}

.tw-drawer-links li a:hover i,
.tw-drawer-links li a.active i {
  color: #0284c7 !important;
}

.tw-drawer-links li a.highlight-premium {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.tw-drawer-links li a.highlight-rfq {
  color: #d97706 !important;
  font-weight: 700 !important;
}

.tw-drawer-trust-banner {
  padding: 14px 18px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  font-size: 11.5px !important;
  color: #64748b !important;
}

.tw-drawer-trust-banner p {
  margin: 4px 0 !important;
}