:root {
  --jb-teal: #009989;
  --jb-teal-dark: #007f72;
  --jb-purple: #291f51;
  --jb-gold: #d5a52c;
  --jb-ink: #1d2630;
  --jb-muted: #66727d;
  --jb-soft: #f4f8f7;
  --jb-border: #dde7e4;
  --jb-white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--jb-ink);
  background: #fff;
  overflow-x: hidden;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}
a { text-decoration: none; }
img { max-width: 100%; }

/* Keep the original teal / purple identity while making the site corporate. */
.jb-topbar {
  background: #f5f8f8;
  border-bottom: 1px solid #e5eceb;
  font-size: 13px;
}
.jb-topbar-inner {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.jb-topbar-points,
.jb-topbar-contact {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.jb-topbar i { color: var(--jb-teal); margin-right: 6px; }
.jb-topbar a { color: #3e4c56; }

.jb-main-header {
  background: #fff;
  position: relative;
  z-index: 1200;
}
.jb-main-header-inner {
  min-height: 90px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(320px, 1.7fr) auto;
  align-items: center;
  gap: 24px;
}
.jb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.jb-brand img { width: 86px; height: auto; object-fit: contain; }
.jb-brand-text { min-width: 0; }
.jb-brand-name {
  display: block;
  color: var(--jb-purple);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}
.jb-brand-tagline {
  display: block;
  margin-top: 5px;
  color: var(--jb-muted);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.jb-header-search {
  position: relative;
  width: 100%;
}
.jb-header-search input {
  width: 100%;
  height: 44px;
  border: 0;
  background: #eef4f4;
  padding: 0 50px 0 20px;
  outline: 0;
}
.jb-header-search button {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--jb-purple);
}
.jb-header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--jb-teal);
  color: #fff;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
}
.jb-header-action:hover { background: var(--jb-teal-dark); color: #fff; }

.jb-nav-wrap {
  background: var(--jb-teal);
  position: relative;
  z-index: 1300;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
}
.jb-nav-inner {
  min-height: 50px;
  display: flex;
  align-items: stretch;
}
.jb-category-menu {
  width: 290px;
  flex: 0 0 290px;
  position: relative;
  z-index: 1500;
}
.jb-category-toggle {
  width: 100%;
  height: 50px;
  border: 0;
  background: var(--jb-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-weight: 700;
  letter-spacing: .3px;
}
.jb-category-toggle span i { margin-right: 10px; }
.jb-category-panel {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: #fff;
  border: 1px solid var(--jb-border);
  box-shadow: 0 16px 35px rgba(20,40,40,.16);
  display: none;
  z-index: 9999;
}
.jb-category-menu.open .jb-category-panel,
.jb-category-menu:hover .jb-category-panel { display: block; }
.jb-category-group { border-bottom: 1px solid #edf1f0; }
.jb-category-group:last-child { border-bottom: 0; }
.jb-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 8px;
  color: var(--jb-purple);
  font-weight: 800;
  font-size: 14px;
}
.jb-category-links { padding: 0 16px 11px 39px; }
.jb-category-links a {
  display: block;
  color: #58656e;
  padding: 5px 0;
  font-size: 13px;
}
.jb-category-links a:hover { color: var(--jb-teal); padding-left: 3px; }

.jb-main-nav {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0 0 0 12px;
  list-style: none;
  flex: 1;
}
.jb-main-nav > li { position: relative; }
.jb-main-nav > li > a {
  height: 50px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
}
.jb-main-nav > li > a:hover,
.jb-main-nav > li.active > a { background: rgba(0,0,0,.09); color: #fff; }
.jb-main-nav .jb-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 270px;
  background: #fff;
  border: 1px solid var(--jb-border);
  box-shadow: 0 18px 40px rgba(21,35,35,.18);
  padding: 10px 0;
  display: none;
  z-index: 9999;
}
.jb-main-nav li:hover > .jb-submenu { display: block; }
.jb-main-nav .jb-submenu li { list-style: none; position: relative; }
.jb-main-nav .jb-submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  color: #314049;
  font-size: 14px;
}
.jb-main-nav .jb-submenu a:hover { background: #f2f8f7; color: var(--jb-teal); }
.jb-mobile-toggle {
  display: none;
  border: 0;
  background: var(--jb-purple);
  color: #fff;
  width: 52px;
  height: 50px;
  margin-left: auto;
}

/* Critical dropdown stacking fix for old theme selectors too. */
.header-area,
.header-bottom-part,
.header-bottom-menu,
.megamenu-part,
.megamenu-content,
.mainwrap,
.main-menu,
.main-menu > li { position: relative; z-index: 1300 !important; }
.main-menu .dropdown-submenu,
.dropdown-submenu,
.sub-menu { z-index: 99999 !important; }

.jb-hero {
  min-height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.jb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,23,39,.87) 0%, rgba(18,23,39,.66) 47%, rgba(18,23,39,.12) 100%);
}
.jb-hero-content { position: relative; z-index: 1; max-width: 720px; padding: 80px 0; }
.jb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jb-gold);
  margin-bottom: 18px;
}
.jb-hero h1 {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -2px;
}
.jb-hero p { font-size: 19px; line-height: 1.75; max-width: 650px; color: rgba(255,255,255,.9); }
.jb-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.jb-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 800;
  transition: .25s ease;
}
.jb-btn-primary { background: var(--jb-teal); color: #fff; }
.jb-btn-primary:hover { background: var(--jb-teal-dark); color: #fff; transform: translateY(-2px); }
.jb-btn-light { background: #fff; color: var(--jb-purple); }
.jb-btn-light:hover { color: var(--jb-teal); transform: translateY(-2px); }
.jb-btn-outline { border-color: var(--jb-teal); color: var(--jb-teal); background: transparent; }
.jb-btn-outline:hover { background: var(--jb-teal); color: #fff; }

.jb-page-hero {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.jb-page-hero::before { content:""; position:absolute; inset:0; background:rgba(18,25,39,.69); }
.jb-page-hero .container { position:relative; z-index:1; }
.jb-page-hero h1 { color:#fff; font-size:clamp(38px,5vw,62px); margin:0 0 12px; font-weight:800; letter-spacing:-1px; }
.jb-breadcrumb { color:rgba(255,255,255,.84); }
.jb-breadcrumb a { color:#fff; }
.jb-breadcrumb span { color:var(--jb-gold); }

.jb-section { padding: 90px 0; }
.jb-section-sm { padding: 65px 0; }
.jb-section-soft { background: var(--jb-soft); }
.jb-section-dark { background: var(--jb-purple); color: #fff; }
.jb-section-dark h2, .jb-section-dark h3, .jb-section-dark p { color: #fff; }
.jb-section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.jb-section-head.left { margin-left:0; text-align:left; }
.jb-section-head h2,
.jb-title {
  color: var(--jb-purple);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 800;
  letter-spacing: -1px;
}
.jb-section-head p,
.jb-lead { color: var(--jb-muted); font-size: 17px; line-height: 1.8; }
.jb-label {
  display: inline-block;
  color: var(--jb-teal);
  text-transform: uppercase;
  letter-spacing: 1.7px;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 12px;
}

.jb-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.jb-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.jb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }

.jb-category-card,
.jb-info-card,
.jb-value-card,
.jb-process-card {
  background: #fff;
  border: 1px solid var(--jb-border);
  box-shadow: 0 10px 30px rgba(29,50,48,.06);
}
.jb-category-card { overflow: hidden; transition: .3s ease; }
.jb-category-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(29,50,48,.12); }
.jb-category-card-media { height: 245px; overflow: hidden; position: relative; }
.jb-category-card-media img { width:100%; height:100%; object-fit:cover; transition:.55s ease; }
.jb-category-card:hover img { transform:scale(1.06); }
.jb-category-badge { position:absolute; left:16px; top:16px; background:var(--jb-purple); color:#fff; padding:7px 11px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.jb-category-card-body { padding: 24px; }
.jb-category-card h3 { color:var(--jb-purple); font-size:23px; margin:0 0 10px; }
.jb-category-card p { color:var(--jb-muted); line-height:1.7; min-height:76px; }
.jb-text-link { color:var(--jb-teal); font-weight:800; display:inline-flex; align-items:center; gap:7px; }

.jb-about-split { display:grid; grid-template-columns: 1.02fr .98fr; gap:60px; align-items:center; }
.jb-image-stack { position:relative; min-height:520px; }
.jb-image-stack .main-img { width:86%; height:470px; object-fit:cover; display:block; }
.jb-image-stack .small-img { position:absolute; right:0; bottom:0; width:46%; height:235px; object-fit:cover; border:9px solid #fff; box-shadow:0 14px 35px rgba(0,0,0,.13); }
.jb-image-stack .stamp { position:absolute; right:8%; top:20px; background:var(--jb-teal); color:#fff; width:130px; height:130px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; line-height:1.3; padding:20px; box-shadow:0 10px 24px rgba(0,153,137,.28); }
.jb-check-list { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:13px; }
.jb-check-list li { position:relative; padding-left:30px; color:#44525b; line-height:1.6; }
.jb-check-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--jb-teal); font-weight:900; }

.jb-stat-strip { background:var(--jb-purple); padding:38px 0; color:#fff; }
.jb-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16); }
.jb-stat { background:var(--jb-purple); padding:20px 28px; text-align:center; }
.jb-stat strong { display:block; font-size:32px; color:#fff; }
.jb-stat span { display:block; margin-top:6px; color:rgba(255,255,255,.74); font-size:13px; }

.jb-process-card { padding:28px; position:relative; min-height:250px; }
.jb-process-number { width:46px; height:46px; border-radius:50%; background:var(--jb-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; margin-bottom:20px; }
.jb-process-card h3 { color:var(--jb-purple); font-size:21px; margin-bottom:10px; }
.jb-process-card p { color:var(--jb-muted); line-height:1.7; margin:0; }

.jb-trade-banner { position:relative; background-size:cover; background-position:center; padding:100px 0; color:#fff; }
.jb-trade-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(41,31,81,.92),rgba(41,31,81,.62)); }
.jb-trade-banner .container { position:relative; z-index:1; }
.jb-trade-banner h2 { color:#fff; font-size:clamp(34px,4.6vw,58px); max-width:780px; line-height:1.12; }
.jb-trade-banner p { max-width:670px; font-size:18px; line-height:1.8; color:rgba(255,255,255,.87); }

.jb-product-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:55px; align-items:start; }
.jb-product-gallery { display:grid; gap:14px; }
.jb-product-gallery .hero-img { width:100%; height:500px; object-fit:cover; }
.jb-product-gallery-row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.jb-product-gallery-row img { width:100%; height:200px; object-fit:cover; }
.jb-product-copy h1 { color:var(--jb-purple); font-size:clamp(38px,4.4vw,60px); line-height:1.06; margin:0 0 18px; font-weight:800; }
.jb-product-copy .intro { color:var(--jb-muted); font-size:17px; line-height:1.85; }
.jb-feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:28px 0; }
.jb-feature { border:1px solid var(--jb-border); background:#fff; padding:16px; min-height:92px; }
.jb-feature strong { display:block; color:var(--jb-purple); margin-bottom:6px; }
.jb-feature span { color:var(--jb-muted); font-size:13px; line-height:1.5; }
.jb-product-note { background:#eff8f6; border-left:4px solid var(--jb-teal); padding:16px 18px; color:#46565e; line-height:1.65; }

.jb-rice-varieties { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.jb-rice-card { background:#fff; border:1px solid var(--jb-border); overflow:hidden; }
.jb-rice-card img { width:100%; height:190px; object-fit:cover; }
.jb-rice-card div { padding:19px; }
.jb-rice-card h3 { color:var(--jb-purple); font-size:19px; margin:0 0 8px; }
.jb-rice-card p { color:var(--jb-muted); font-size:14px; line-height:1.65; margin:0; }

.jb-table-wrap { overflow-x:auto; border:1px solid var(--jb-border); }
.jb-spec-table { width:100%; border-collapse:collapse; min-width:700px; background:#fff; }
.jb-spec-table th, .jb-spec-table td { padding:15px 18px; border-bottom:1px solid var(--jb-border); text-align:left; }
.jb-spec-table th { background:var(--jb-purple); color:#fff; font-size:13px; letter-spacing:.5px; text-transform:uppercase; }
.jb-spec-table td { color:#4d5a63; }

.jb-form-card { background:#fff; border:1px solid var(--jb-border); box-shadow:0 16px 45px rgba(25,48,45,.09); padding:38px; }
.jb-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.jb-form-group.full { grid-column:1/-1; }
.jb-form-group label { display:block; color:var(--jb-purple); font-weight:800; margin-bottom:8px; font-size:13px; }
.jb-form-control { width:100%; min-height:48px; border:1px solid #dbe4e2; padding:10px 14px; outline:none; background:#fff; color:#28343c; }
textarea.jb-form-control { min-height:130px; resize:vertical; }
.jb-form-control:focus { border-color:var(--jb-teal); box-shadow:0 0 0 3px rgba(0,153,137,.09); }
.jb-form-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.jb-form-status { display:none; margin-top:18px; background:#eef8f6; border:1px solid #cfe7e2; padding:16px; color:#38574f; line-height:1.6; }
.jb-form-status.show { display:block; }
.jb-contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; align-items:start; }
.jb-contact-card { background:var(--jb-purple); color:#fff; padding:36px; }
.jb-contact-card h2 { color:#fff; font-size:32px; margin:0 0 15px; }
.jb-contact-item { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.jb-contact-item:last-child { border-bottom:0; }
.jb-contact-item i { width:42px; height:42px; background:rgba(255,255,255,.11); display:flex; align-items:center; justify-content:center; color:var(--jb-gold); flex:0 0 42px; }
.jb-contact-item strong { display:block; color:#fff; margin-bottom:4px; }
.jb-contact-item a, .jb-contact-item span { color:rgba(255,255,255,.78); font-size:14px; line-height:1.6; }

/* About draft selector and four intentionally different design systems. */
.jb-draft-review {
  background:#fff;
  border-bottom:1px solid var(--jb-border);
  position:relative;
  z-index:100;
}
.jb-draft-review-inner { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.jb-draft-review h2 { margin:0; font-size:18px; color:var(--jb-purple); }
.jb-draft-review p { margin:4px 0 0; font-size:12px; color:var(--jb-muted); letter-spacing:1px; }
.jb-draft-tabs { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.jb-draft-tab { border:1px solid #dce5e3; background:#fff; color:#2f3d46; border-radius:25px; min-height:40px; padding:0 17px; font-weight:800; font-size:12px; }
.jb-draft-tab.active { background:var(--jb-teal); color:#fff; border-color:var(--jb-teal); }
.jb-about-draft { display:none; }
.jb-about-draft.active { display:block; }

/* Draft 1: Heritage editorial */
.draft-one { --d1:#17382b; --d1-soft:#f3f0e7; --d1-gold:#c6a25b; background:#fff; }
.d1-hero { min-height:650px; display:grid; grid-template-columns:.95fr 1.05fr; background:var(--d1); }
.d1-copy { padding:90px max(50px,8vw); display:flex; flex-direction:column; justify-content:center; color:#fff; }
.d1-copy h1 { font-family:Georgia,serif; color:#fff; font-size:clamp(48px,6vw,82px); line-height:1.03; font-weight:500; margin:0 0 25px; }
.d1-copy p { color:rgba(255,255,255,.78); font-size:18px; line-height:1.8; }
.d1-hero img { width:100%; height:100%; min-height:650px; object-fit:cover; }
.d1-intro { padding:100px 0; background:var(--d1-soft); }
.d1-editorial { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start; }
.d1-editorial h2 { font-family:Georgia,serif; color:var(--d1); font-size:clamp(36px,4.5vw,58px); font-weight:500; line-height:1.15; }
.d1-editorial p { color:#5c625f; line-height:1.9; font-size:17px; }
.d1-pullquote { border-left:4px solid var(--d1-gold); padding-left:28px; font-family:Georgia,serif; color:var(--d1); font-size:28px; line-height:1.5; margin-top:35px; }
.d1-values { padding:95px 0; }
.d1-values-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d8dfda; border-left:1px solid #d8dfda; }
.d1-value { padding:38px; border-right:1px solid #d8dfda; border-bottom:1px solid #d8dfda; min-height:270px; }
.d1-value span { font-family:Georgia,serif; color:var(--d1-gold); font-size:32px; }
.d1-value h3 { color:var(--d1); margin:20px 0 12px; font-size:23px; }
.d1-value p { color:#68706c; line-height:1.75; }
.d1-story { padding:100px 0; background:var(--d1); color:#fff; }
.d1-story-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.d1-story img { width:100%; height:510px; object-fit:cover; }
.d1-story h2 { font-family:Georgia,serif; color:#fff; font-weight:500; font-size:50px; }
.d1-story p { color:rgba(255,255,255,.78); line-height:1.9; }

/* Draft 2: Quality system / structured corporate */
.draft-two { --d2:#18364b; --d2-cyan:#04a6a3; --d2-pale:#eef5f7; }
.d2-hero { background:var(--d2-pale); padding:90px 0 70px; }
.d2-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
.d2-hero h1 { color:var(--d2); font-size:clamp(48px,6vw,80px); line-height:1; margin:0 0 25px; font-weight:900; letter-spacing:-3px; }
.d2-hero p { color:#536b79; font-size:18px; line-height:1.85; }
.d2-hero img { width:100%; height:500px; object-fit:cover; box-shadow:26px 26px 0 var(--d2-cyan); }
.d2-band { background:var(--d2); color:#fff; padding:30px 0; }
.d2-band-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; }
.d2-band strong { display:block; color:#fff; font-size:17px; }
.d2-band span { display:block; color:rgba(255,255,255,.62); margin-top:5px; font-size:12px; }
.d2-system { padding:100px 0; }
.d2-system-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
.d2-system h2 { color:var(--d2); font-size:48px; line-height:1.14; }
.d2-step { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:27px 0; border-bottom:1px solid #dfe7e9; }
.d2-step:last-child { border-bottom:0; }
.d2-step b { width:58px; height:58px; border-radius:12px; background:var(--d2-cyan); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; }
.d2-step h3 { color:var(--d2); margin:0 0 8px; }
.d2-step p { color:#63747d; line-height:1.7; margin:0; }
.d2-role { padding:95px 0; background:var(--d2-pale); }
.d2-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.d2-role-card { background:#fff; padding:40px; border-top:5px solid var(--d2-cyan); }
.d2-role-card h3 { color:var(--d2); font-size:26px; }
.d2-role-card p { color:#64757f; line-height:1.8; }

/* Draft 3: Cinematic story */
.draft-three { --d3:#6a3e2e; --d3-cream:#f7eee5; --d3-red:#b64e36; font-family:Georgia,serif; }
.d3-hero { min-height:740px; background-size:cover; background-position:center; position:relative; display:flex; align-items:flex-end; }
.d3-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,12,8,.08),rgba(20,12,8,.84)); }
.d3-hero-copy { position:relative; z-index:1; max-width:1000px; padding:0 0 80px; color:#fff; }
.d3-hero h1 { color:#fff; font-size:clamp(52px,7vw,94px); line-height:1.03; font-weight:500; margin:0 0 25px; }
.d3-hero p { font-family:Arial,sans-serif; color:rgba(255,255,255,.85); font-size:18px; line-height:1.8; max-width:760px; }
.d3-chapter { padding:110px 0; background:var(--d3-cream); }
.d3-chapter-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; }
.d3-chapter-label { color:var(--d3-red); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-family:Arial,sans-serif; font-weight:800; }
.d3-chapter h2 { color:var(--d3); font-size:52px; font-weight:500; line-height:1.15; }
.d3-chapter p { color:#705f56; font-family:Arial,sans-serif; line-height:1.95; font-size:17px; }
.d3-mosaic { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; background:#fff; padding:18px; }
.d3-mosaic img:first-child { width:100%; height:570px; object-fit:cover; }
.d3-mosaic-side { display:grid; gap:18px; }
.d3-mosaic-side img { width:100%; height:276px; object-fit:cover; }
.d3-promises { padding:100px 0; background:#fff; }
.d3-promise { display:grid; grid-template-columns:170px 1fr; gap:40px; padding:34px 0; border-bottom:1px solid #eadfd5; }
.d3-promise:last-child { border-bottom:0; }
.d3-promise span { color:var(--d3-red); font-size:12px; letter-spacing:2px; text-transform:uppercase; font-family:Arial,sans-serif; }
.d3-promise h3 { color:var(--d3); font-size:32px; font-weight:500; margin:0 0 12px; }
.d3-promise p { font-family:Arial,sans-serif; color:#74645c; line-height:1.8; }

/* Draft 4: Bold contemporary, responsive and intentionally restrained to prevent overflow. */
.draft-four { --d4:#111717; --d4-lime:#c9e86c; --d4-orange:#f28d52; --d4-off:#f5f3ed; background:var(--d4-off); }
.d4-hero { background:var(--d4); color:#fff; padding:100px 0; overflow:hidden; }
.d4-hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:45px; align-items:center; }
.d4-kicker { color:var(--d4-lime); letter-spacing:3px; text-transform:uppercase; font-size:12px; font-weight:800; }
.d4-hero h1 {
  color:#fff;
  font-size:clamp(46px,7vw,88px);
  line-height:.98;
  font-weight:800;
  letter-spacing:-3px;
  margin:20px 0 25px;
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
}
.d4-hero p { color:rgba(255,255,255,.72); line-height:1.8; font-size:18px; max-width:650px; }
.d4-hero img { width:100%; height:520px; object-fit:cover; border-radius:90px 0 90px 0; }
.d4-bento { padding:90px 0; }
.d4-bento-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; grid-auto-rows:minmax(250px,auto); gap:20px; }
.d4-box { padding:34px; background:#fff; border-radius:24px; overflow:hidden; }
.d4-box.dark { background:var(--d4); color:#fff; }
.d4-box.lime { background:var(--d4-lime); }
.d4-box.orange { background:var(--d4-orange); }
.d4-box.tall { grid-row:span 2; }
.d4-box.wide { grid-column:span 2; }
.d4-box img { width:100%; height:100%; min-height:320px; object-fit:cover; border-radius:16px; }
.d4-box h2 { font-size:clamp(30px,3.8vw,52px); line-height:1.08; margin:0 0 18px; color:inherit; font-weight:800; letter-spacing:-1.5px; overflow-wrap:anywhere; }
.d4-box h3 { font-size:26px; margin:0 0 12px; color:inherit; }
.d4-box p { color:inherit; opacity:.75; line-height:1.8; }
.d4-principles { padding:100px 0; background:#fff; }
.d4-principles-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; }
.d4-principles h2 { color:var(--d4); font-size:clamp(38px,5vw,64px); line-height:1.03; letter-spacing:-2px; }
.d4-principle { display:grid; grid-template-columns:80px 1fr; gap:20px; padding:25px 0; border-bottom:2px solid #edf0ed; }
.d4-principle b { font-size:34px; color:var(--d4-orange); }
.d4-principle h3 { color:var(--d4); margin:0 0 8px; font-size:24px; }
.d4-principle p { color:#66706e; line-height:1.75; margin:0; }

.jb-footer { background:#172331; color:#fff; padding:76px 0 0; }
.jb-footer-grid { display:grid; grid-template-columns:1.25fr .75fr .9fr 1.1fr; gap:42px; }
.jb-footer h3 { color:#fff; font-size:18px; margin-bottom:20px; }
.jb-footer p { color:rgba(255,255,255,.68); line-height:1.75; }
.jb-footer-brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.jb-footer-brand img { width:78px; }
.jb-footer-brand strong { color:#fff; font-size:18px; line-height:1.2; }
.jb-footer-links { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.jb-footer-links a { color:rgba(255,255,255,.67); }
.jb-footer-links a:hover { color:var(--jb-gold); }
.jb-footer-contact { display:grid; gap:13px; }
.jb-footer-contact a, .jb-footer-contact span { color:rgba(255,255,255,.72); display:flex; gap:10px; line-height:1.5; }
.jb-footer-contact i { color:var(--jb-gold); margin-top:4px; }
.jb-footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:55px; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; color:rgba(255,255,255,.6); font-size:13px; }
.jb-footer-bottom a { color:var(--jb-gold); }
.jb-floating-actions { position:fixed; right:18px; bottom:18px; z-index:9000; display:grid; gap:10px; }
.jb-floating-actions a { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.jb-wa { background:#25d366; }
.jb-call { background:var(--jb-purple); }

@media (max-width:1199px) {
  .jb-main-header-inner { grid-template-columns:1fr auto; min-height:78px; }
  .jb-header-search { display:none; }
  .jb-header-action { display:none; }
  .jb-nav-inner { align-items:center; }
  .jb-category-menu { width:calc(100% - 52px); flex-basis:calc(100% - 52px); }
  .jb-category-toggle { justify-content:flex-start; gap:12px; }
  .jb-main-nav { display:none; position:absolute; top:50px; left:0; right:0; background:#fff; padding:10px 0; box-shadow:0 16px 35px rgba(0,0,0,.15); }
  .jb-main-nav.open { display:block; }
  .jb-main-nav > li > a { color:#2f3d46; height:auto; padding:12px 20px; }
  .jb-main-nav > li > a:hover { color:var(--jb-teal); background:#f2f8f7; }
  .jb-main-nav .jb-submenu { position:static; width:100%; display:block; box-shadow:none; border:0; padding:0 0 6px 18px; }
  .jb-main-nav .jb-submenu a { padding:8px 18px; }
  .jb-mobile-toggle { display:block; }
  .jb-grid-4, .jb-rice-varieties { grid-template-columns:repeat(2,1fr); }
  .jb-grid-3 { grid-template-columns:repeat(2,1fr); }
  .jb-footer-grid { grid-template-columns:repeat(2,1fr); }
  .d4-bento-grid { grid-template-columns:1fr 1fr; }
  .d4-box.tall { grid-row:span 1; }
  .d4-box.wide { grid-column:span 2; }
}

@media (max-width:991px) {
  .jb-topbar-points { display:none; }
  .jb-topbar-inner { justify-content:center; }
  .jb-hero { min-height:520px; }
  .jb-about-split, .jb-product-layout, .jb-contact-grid,
  .d1-hero, .d1-editorial, .d1-story-grid, .d2-hero-grid, .d2-system-grid,
  .d3-chapter-grid, .d4-hero-grid, .d4-principles-grid { grid-template-columns:1fr; }
  .jb-image-stack { min-height:480px; }
  .jb-stat-grid, .d2-band-grid { grid-template-columns:repeat(2,1fr); }
  .d1-hero img { min-height:460px; }
  .d1-values-grid { grid-template-columns:1fr 1fr; }
  .d2-hero img { box-shadow:15px 15px 0 var(--d2-cyan); }
  .d3-mosaic { grid-template-columns:1fr; }
  .d3-mosaic img:first-child { height:430px; }
  .d3-mosaic-side { grid-template-columns:1fr 1fr; }
  .d3-mosaic-side img { height:260px; }
  .jb-draft-review-inner { align-items:flex-start; flex-direction:column; padding:18px 0; }
  .jb-draft-tabs { justify-content:flex-start; }
}

@media (max-width:767px) {
  .jb-main-header-inner { min-height:72px; }
  .jb-brand img { width:70px; }
  .jb-brand-name { font-size:15px; }
  .jb-brand-tagline { display:none; }
  .jb-category-menu { width:calc(100% - 50px); flex-basis:calc(100% - 50px); }
  .jb-category-toggle { height:48px; font-size:13px; }
  .jb-mobile-toggle { width:50px; height:48px; }
  .jb-category-panel { width:calc(100vw - 30px); }
  .jb-hero { min-height:500px; }
  .jb-hero-content { padding:65px 0; }
  .jb-hero h1 { font-size:clamp(40px,12vw,58px); letter-spacing:-1px; }
  .jb-hero p { font-size:16px; }
  .jb-section { padding:65px 0; }
  .jb-section-sm { padding:48px 0; }
  .jb-grid-4, .jb-grid-3, .jb-grid-2, .jb-rice-varieties,
  .jb-feature-list, .jb-form-grid, .jb-footer-grid, .d1-values-grid,
  .d2-band-grid, .d2-role-grid, .d4-bento-grid { grid-template-columns:1fr; }
  .jb-form-group.full { grid-column:auto; }
  .jb-image-stack { min-height:390px; }
  .jb-image-stack .main-img { width:92%; height:350px; }
  .jb-image-stack .small-img { height:175px; }
  .jb-image-stack .stamp { width:100px; height:100px; font-size:12px; }
  .jb-stat-grid { grid-template-columns:1fr 1fr; }
  .jb-product-gallery .hero-img { height:360px; }
  .jb-product-gallery-row img { height:150px; }
  .jb-form-card { padding:24px 18px; }
  .jb-contact-card { padding:28px 22px; }
  .jb-footer-bottom { flex-direction:column; text-align:center; }
  .d1-copy { padding:65px 24px; }
  .d1-hero img { min-height:390px; }
  .d1-value { min-height:auto; }
  .d3-promise { grid-template-columns:1fr; gap:10px; }
  .d3-mosaic-side { grid-template-columns:1fr; }
  .d4-hero h1 { font-size:clamp(42px,13vw,62px); letter-spacing:-1.5px; }
  .d4-hero img { height:370px; border-radius:50px 0 50px 0; }
  .d4-box.wide { grid-column:span 1; }
  .d4-principle { grid-template-columns:55px 1fr; }
  .jb-draft-tab { width:100%; text-align:left; border-radius:5px; }
  .jb-draft-tabs { width:100%; display:grid; grid-template-columns:1fr; }
}

/* ========================================================================== 
   Typography refresh and expanded homepage
   ========================================================================== */
body,
button,
input,
select,
textarea,
.jb-main-nav,
.jb-category-panel {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.jb-hero h1,
.jb-page-hero h1,
.jb-section-head h2,
.jb-title,
.jb-product-copy h1,
.jb-trade-banner h2,
.jb-category-card h3,
.jb-process-card h3,
.jb-footer h3 {
  font-family: inherit !important;
  font-weight: 700;
}

body {
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0;
}

.jb-brand-name { font-weight: 700; letter-spacing: -0.2px; }
.jb-brand-tagline { font-weight: 600; letter-spacing: 1.1px; }
.jb-main-nav > li > a,
.jb-category-toggle,
.jb-header-action,
.jb-btn,
.jb-text-link,
.jb-label,
.jb-eyebrow { font-weight: 650; }

.jb-hero h1,
.jb-page-hero h1,
.jb-section-head h2,
.jb-title,
.jb-trade-banner h2 {
  letter-spacing: -0.035em;
}

.jb-hero h1 {
  font-size: clamp(42px, 5vw, 70px);
  line-height: 1.08;
  max-width: 820px;
}

.jb-section-head h2,
.jb-title {
  font-size: clamp(31px, 3.8vw, 47px);
  line-height: 1.18;
}

.jb-section-head p,
.jb-lead {
  font-size: 16px;
}

.jb-body-copy {
  color: var(--jb-muted);
  line-height: 1.85;
  margin: 0;
}

.jb-home-hero {
  min-height: 680px;
  background-position: center 52%;
}

.jb-home-hero::before {
    display: none !important;
}

.jb-home-hero .jb-hero-content { max-width: 790px; }

.jb-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
}

.jb-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jb-hero-trust i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,153,137,.22);
  color: #77e3d7;
  font-size: 10px;
}

.jb-home-snapshot {
  position: relative;
  z-index: 5;
  margin-top: -42px;
}

.jb-home-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  background: #fff;
  border: 1px solid var(--jb-border);
  box-shadow: 0 22px 55px rgba(29, 50, 48, .12);
}

.jb-snapshot-item {
  min-height: 108px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 23px;
  border-right: 1px solid var(--jb-border);
}

.jb-snapshot-item:last-child { border-right: 0; }
.jb-snapshot-item > i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf8f6;
  color: var(--jb-teal);
  font-size: 18px;
  flex: 0 0 44px;
}
.jb-snapshot-item strong {
  display: block;
  color: var(--jb-purple);
  font-size: 21px;
  line-height: 1.1;
  font-weight: 700;
}
.jb-snapshot-item span {
  display: block;
  margin-top: 5px;
  color: var(--jb-muted);
  font-size: 12px;
  line-height: 1.5;
}

.jb-home-section-heading { margin-bottom: 38px; }

.jb-featured-products { overflow: hidden; }
.jb-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

.jb-featured-product {
  background: #fff;
  border: 1px solid var(--jb-border);
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: hidden;
}

.jb-featured-product:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(29,50,48,.11);
}

.jb-featured-product-image {
  display: block;
  height: 250px;
  overflow: hidden;
  background: #eaf1ef;
}

.jb-featured-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.jb-featured-product:hover img { transform: scale(1.055); }

.jb-featured-product-copy { padding: 25px; }
.jb-featured-product-copy > span,
.jb-mini-label {
  display: inline-block;
  color: var(--jb-teal);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 9px;
}
.jb-featured-product-copy h3 {
  color: var(--jb-purple);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}
.jb-featured-product-copy p {
  color: var(--jb-muted);
  line-height: 1.72;
  min-height: 73px;
  margin-bottom: 15px;
}
.jb-featured-product-copy a {
  color: var(--jb-teal);
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jb-trade-capability-section {
  background: var(--jb-purple);
  color: #fff;
}
.jb-trade-capability-section .jb-section-head h2,
.jb-trade-capability-section .jb-section-head p { color: #fff; }
.jb-trade-capability-section .jb-section-head p { opacity: .72; }

.jb-trade-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}

.jb-trade-capability-card {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.jb-trade-capability-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,19,32,.12), rgba(14,19,32,.92));
}
.jb-trade-capability-copy {
  position: relative;
  z-index: 1;
  padding: 42px;
  color: #fff;
}
.jb-trade-capability-copy > span {
  color: var(--jb-gold);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}
.jb-trade-capability-copy h3 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  margin: 10px 0 14px;
}
.jb-trade-capability-copy p {
  color: rgba(255,255,255,.8);
  line-height: 1.75;
}
.jb-trade-capability-copy ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  gap: 9px;
}
.jb-trade-capability-copy li {
  color: rgba(255,255,255,.82);
  position: relative;
  padding-left: 22px;
}
.jb-trade-capability-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #78d9cf;
}
.jb-trade-capability-copy a {
  color: #fff;
  font-weight: 650;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.jb-home-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
.jb-home-benefit {
  background: #fff;
  border: 1px solid var(--jb-border);
  padding: 30px;
  min-height: 225px;
  transition: .25s ease;
}
.jb-home-benefit:hover { transform: translateY(-4px); box-shadow: 0 15px 38px rgba(29,50,48,.08); }
.jb-home-benefit > i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf8f6;
  color: var(--jb-teal);
  font-size: 18px;
  margin-bottom: 20px;
}
.jb-home-benefit h3 {
  color: var(--jb-purple);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}
.jb-home-benefit p { color: var(--jb-muted); line-height: 1.72; margin: 0; }

.jb-home-rice-section { background: #fff; }
.jb-home-rice-heading {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 42px;
}
.jb-home-rice-heading p { color: var(--jb-muted); line-height: 1.8; }
.jb-home-rice-heading .jb-title { margin-bottom: 0; }
.jb-rice-card { transition: transform .25s ease, box-shadow .25s ease; }
.jb-rice-card:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(29,50,48,.1); }
.jb-rice-card div { padding: 22px; }

.jb-home-process-section { background: #f7faf9; }
.jb-home-process-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 0;
  border: 1px solid var(--jb-border);
  background: #fff;
}
.jb-home-process-step {
  padding: 28px 23px;
  border-right: 1px solid var(--jb-border);
  min-height: 255px;
  position: relative;
}
.jb-home-process-step:last-child { border-right: 0; }
.jb-home-process-step > span {
  display: block;
  color: var(--jb-teal);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 30px;
}
.jb-home-process-step > span::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 10px;
  background: var(--jb-teal);
}
.jb-home-process-step h3 {
  color: var(--jb-purple);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
}
.jb-home-process-step p { color: var(--jb-muted); line-height: 1.7; margin: 0; }

.jb-home-logistics-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 60px;
  align-items: center;
}
.jb-home-logistics-image { position: relative; }
.jb-home-logistics-image > img {
  width: 100%;
  height: 620px;
  object-fit: cover;
}
.jb-home-logistics-note {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 30px;
  background: rgba(41,31,81,.92);
  color: #fff;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.55;
}
.jb-home-logistics-note i { color: var(--jb-gold); font-size: 22px; }
.jb-home-logistics-list { display: grid; gap: 15px; margin: 27px 0 30px; }
.jb-home-logistics-list > div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--jb-border);
}
.jb-home-logistics-list > div:last-child { border-bottom: 0; }
.jb-home-logistics-list i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf8f6;
  color: var(--jb-teal);
}
.jb-home-logistics-list span { color: var(--jb-muted); line-height: 1.65; }
.jb-home-logistics-list strong { display: block; color: var(--jb-purple); margin-bottom: 3px; }

.jb-buyer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}
.jb-buyer-grid article {
  border: 1px solid var(--jb-border);
  padding: 28px;
  background: #fff;
  min-height: 205px;
}
.jb-buyer-grid i { color: var(--jb-teal); font-size: 24px; margin-bottom: 18px; }
.jb-buyer-grid h3 { color: var(--jb-purple); font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.jb-buyer-grid p { color: var(--jb-muted); line-height: 1.7; margin: 0; }

.jb-home-faq-grid {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 70px;
  align-items: start;
}
.jb-home-faq-list { background: #fff; border: 1px solid var(--jb-border); }
.jb-home-faq-list details { border-bottom: 1px solid var(--jb-border); padding: 0 22px; }
.jb-home-faq-list details:last-child { border-bottom: 0; }
.jb-home-faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 35px 22px 0;
  color: var(--jb-purple);
  font-weight: 650;
  position: relative;
}
.jb-home-faq-list summary::-webkit-details-marker { display: none; }
.jb-home-faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eaf8f6;
  color: var(--jb-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.jb-home-faq-list details[open] summary::after { content: "−"; }
.jb-home-faq-list p { color: var(--jb-muted); line-height: 1.75; padding: 0 0 22px; margin: 0; }

@media (max-width: 1199px) {
  .jb-home-snapshot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .jb-snapshot-item:nth-child(2) { border-right: 0; }
  .jb-snapshot-item:nth-child(-n+2) { border-bottom: 1px solid var(--jb-border); }
  .jb-featured-grid,
  .jb-home-benefits-grid,
  .jb-buyer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .jb-home-process-line { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .jb-home-process-step:nth-child(3) { border-right: 0; }
  .jb-home-process-step:nth-child(-n+3) { border-bottom: 1px solid var(--jb-border); }
  .jb-home-process-step:nth-child(4) { grid-column: span 1; }
}

@media (max-width: 991px) {
  .jb-home-hero { min-height: 620px; }
  .jb-trade-capability-grid,
  .jb-home-rice-heading,
  .jb-home-logistics-grid,
  .jb-home-faq-grid { grid-template-columns: 1fr; }
  .jb-trade-capability-card { min-height: 480px; }
  .jb-home-rice-heading { gap: 18px; }
  .jb-home-logistics-image > img { height: 500px; }
  .jb-home-faq-grid { gap: 35px; }
}

@media (max-width: 767px) {
  .jb-home-hero { min-height: 590px; }
  .jb-home-snapshot { margin-top: 0; }
  .jb-home-snapshot .container { padding-left: 0; padding-right: 0; }
  .jb-home-snapshot-grid,
  .jb-featured-grid,
  .jb-home-benefits-grid,
  .jb-buyer-grid,
  .jb-home-process-line { grid-template-columns: 1fr; }
  .jb-snapshot-item,
  .jb-snapshot-item:nth-child(2),
  .jb-snapshot-item:nth-child(3) {
    border-right: 0;
    border-bottom: 1px solid var(--jb-border);
  }
  .jb-snapshot-item:last-child { border-bottom: 0; }
  .jb-featured-product-image { height: 230px; }
  .jb-featured-product-copy p { min-height: 0; }
  .jb-trade-capability-card { min-height: 510px; }
  .jb-trade-capability-copy { padding: 28px 24px; }
  .jb-home-process-step,
  .jb-home-process-step:nth-child(3),
  .jb-home-process-step:nth-child(4) {
    border-right: 0;
    border-bottom: 1px solid var(--jb-border);
    min-height: auto;
  }
  .jb-home-process-step:last-child { border-bottom: 0; }
  .jb-home-logistics-image > img { height: 390px; }
  .jb-home-logistics-note { left: 16px; right: 16px; bottom: 16px; padding: 16px; }
  .jb-hero-trust { display: grid; }
}
/* Products page banner — very light overlay */
.jb-page-hero {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;

    overflow: hidden;
}

/* Very light overlay */
.jb-page-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";

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

/* Centered banner content */
.jb-page-hero .container {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.jb-page-hero h1 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.1;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.jb-page-hero .jb-breadcrumb {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    font-weight: 500;

    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
}

.jb-page-hero .jb-breadcrumb a {
    color: #ffffff;
}

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

/* Hide banner description */
.jb-page-hero p {
    display: none !important;
}

@media (max-width: 991px) {
    .jb-page-hero {
        min-height: 380px;
    }
}

@media (max-width: 575px) {
    .jb-page-hero {
        min-height: 310px;
    }

    .jb-page-hero h1 {
        font-size: 38px;
    }

    .jb-page-hero .jb-breadcrumb {
        font-size: 14px;
    }
}

/* =========================================================
   LARGER AND FULL-WIDTH MAIN NAVIGATION
   Add at the bottom of css/jb-export.css
========================================================= */

/* Increase complete navigation bar height */
.jb-nav-wrap {
    position: relative;
    min-height: 68px;
}

/* Make inner navigation occupy the complete container width */
.jb-nav-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 68px;
}

/* Browse Categories section */
.jb-category-menu {
    position: relative;
    display: flex;
    flex: 0 0 300px;
    width: 300px;
    min-height: 68px;
}

/* Increase Browse Categories button height and font */
.jb-category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 68px;
    padding: 0 22px;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

.jb-category-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Make the main menu use all remaining space */
.jb-main-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: space-between;

    width: 100%;
    min-width: 0;
    min-height: 68px;

    margin: 0;
    padding: 0;
}

/* Give equal width to all top-level menu items */
.jb-main-nav > li {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: stretch;
    justify-content: center;

    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Increase menu height and font size */
.jb-main-nav > li > a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 68px;
    padding: 0 12px;

    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.15px;
    text-align: center;
    white-space: nowrap;
}

/* Ensure active and hover backgrounds cover full menu height */
.jb-main-nav > li > a:hover,
.jb-main-nav > li.active > a {
    height: 100%;
}

/* Keep Products dropdown in the correct position */
.jb-main-nav > li .jb-submenu {
    top: 100%;
    left: 0;
    z-index: 9999;

    min-width: 260px;
}

/* Dropdown items must not use equal-width main menu styling */
.jb-main-nav .jb-submenu > li {
    display: block;
    width: 100%;
    margin: 0;
}

.jb-main-nav .jb-submenu > li > a {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 12px 18px;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
}

/* Keep Browse Categories dropdown below the taller bar */
.jb-category-panel {
    top: 100%;
    z-index: 9999;
}

/* Medium desktop adjustment */
@media (max-width: 1199px) and (min-width: 992px) {
    .jb-category-menu {
        flex-basis: 270px;
        width: 270px;
    }

    .jb-category-toggle {
        padding: 0 17px;
        font-size: 14px;
    }

    .jb-main-nav > li > a {
        padding: 0 8px;
        font-size: 13.5px;
    }
}

/* Restore normal mobile navigation behaviour */
@media (max-width: 991px) {
    .jb-nav-wrap,
    .jb-nav-inner {
        min-height: 58px;
    }

    .jb-nav-inner {
        align-items: center;
    }

    .jb-category-menu {
        flex: 1 1 auto;
        width: auto;
        min-height: 58px;
    }

    .jb-category-toggle {
        min-height: 58px;
        padding: 0 16px;
        font-size: 14px;
    }

    .jb-main-nav {
        display: none;
        width: 100%;
        min-height: auto;
    }

    .jb-main-nav.active,
    .jb-main-nav.show,
    .jb-main-nav.open {
        display: block;
    }

    .jb-main-nav > li {
        display: block;
        width: 100%;
    }

    .jb-main-nav > li > a {
        justify-content: flex-start;
        min-height: 48px;
        padding: 12px 18px;

        font-size: 14px;
        text-align: left;
        white-space: normal;
    }

    .jb-main-nav > li .jb-submenu {
        position: static;
        width: 100%;
        min-width: 100%;
    }
}

/* =========================================================
   FOOTER SOCIAL MEDIA ICONS
========================================================= */

.jb-footer-social-wrap {
    margin-top: 25px;
}

.jb-footer-social-wrap h4 {
    position: relative;
    display: inline-block;
    margin: 0 0 16px;
    padding-bottom: 8px;

    color: #101b38;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.jb-footer-social-wrap h4::after {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 32px;
    height: 2px;

    content: "";
    background: #009989;
    border-radius: 10px;
}

.jb-footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.jb-footer-social-icons a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #009989;
    font-size: 16px;
    text-decoration: none;

    background: #ffffff;
    border: 1px solid #dce4ea;
    border-radius: 50%;

    box-shadow: 0 7px 18px rgba(16, 27, 56, 0.06);

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

/* Small animated circle behind icon */

.jb-footer-social-icons a::before {
    position: absolute;
    inset: 5px;

    content: "";
    opacity: 0;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    transform: scale(0.5);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.jb-footer-social-icons a i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

/* Common hover effect */

.jb-footer-social-icons a:hover {
    color: #ffffff;
    border-color: transparent;

    box-shadow:
        0 12px 24px rgba(16, 27, 56, 0.16);

    transform: translateY(-5px);
}

.jb-footer-social-icons a:hover::before {
    opacity: 1;
    transform: scale(1);
}

.jb-footer-social-icons a:hover i {
    transform: scale(1.12);
}

/* Facebook */

.jb-footer-social-icons .jb-social-facebook:hover {
    background: #1877f2;
}

/* Instagram */

.jb-footer-social-icons .jb-social-instagram:hover {
    background:
        radial-gradient(
            circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285aeb 90%
        );
}

/* LinkedIn */

.jb-footer-social-icons .jb-social-linkedin:hover {
    background: #0a66c2;
}

/* Twitter / X */

.jb-footer-social-icons .jb-social-twitter:hover {
    background: #1da1f2;
}

/* YouTube */

.jb-footer-social-icons .jb-social-youtube:hover {
    background: #ff0000;
}

/* WhatsApp */

.jb-footer-social-icons .jb-social-whatsapp:hover {
    background: #25d366;
}

/* Keyboard accessibility */

.jb-footer-social-icons a:focus-visible {
    color: #ffffff;
    background: #009989;
    border-color: #009989;
    outline: 3px solid rgba(0, 153, 137, 0.2);
    outline-offset: 3px;
}

/* Mobile */

@media (max-width: 767px) {
    .jb-footer-social-icons a {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
}

/*==================================================
MARKET UPDATES PAGE
JB GENERAL EXPORTS LLP
Part 1
==================================================*/


/*=========================
PAGE HERO
=========================*/

.market-page-hero{
    background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("../images/home/33.jpg");
    background-size:cover;
    background-position:center;
    padding:130px 0;
    color:#fff;
}

.market-hero-content{
    max-width:760px;
}

.market-badge{
    display:inline-block;
    background:#009989;
    color:#fff;
    padding:10px 22px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    margin-bottom:22px;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.market-page-hero h1{
    font-size:52px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:22px;
    color:#fff;
}

.market-page-hero p{
    font-size:18px;
    line-height:1.9;
    color:#f3f3f3;
}



/*=========================
FEATURED UPDATE
=========================*/

.market-featured{
    padding:90px 0;
    background:#ffffff;
}

.featured-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.featured-image img{
    width:100%;
    border-radius:18px;
    display:block;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.featured-content{
    padding:10px;
}

.featured-date{
    display:inline-block;
    color:#009989;
    font-weight:700;
    text-transform:uppercase;
    font-size:14px;
    margin-bottom:18px;
}

.featured-content h2{
    font-size:38px;
    line-height:1.3;
    color:#023047;
    margin-bottom:25px;
}

.featured-content p{
    color:#666;
    font-size:16px;
    line-height:1.9;
    margin-bottom:18px;
}

.featured-content blockquote{
    margin-top:35px;
    padding:25px;
    background:#f7fafa;
    border-left:5px solid #009989;
    border-radius:8px;
    font-size:18px;
    color:#023047;
    font-style:italic;
}



/*=========================
LATEST ARTICLES
=========================*/

.market-list{
    padding:90px 0;
    background:#f8fafb;
}

.market-update-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:55px;
}

.market-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.market-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.market-card-image{
    overflow:hidden;
}

.market-card-image img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.market-card:hover img{
    transform:scale(1.08);
}

.market-card-body{
    padding:28px;
}

.market-card-body span{
    display:inline-block;
    color:#009989;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:15px;
}

.market-card-body h3{
    font-size:24px;
    line-height:1.4;
    margin-bottom:18px;
    color:#023047;
}

.market-card-body p{
    font-size:15px;
    color:#666;
    line-height:1.8;
    margin-bottom:24px;
}

.market-card-body a{
    color:#009989;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.market-card-body a:hover{
    color:#023047;
}
/*==================================================
MARKET UPDATES PAGE
PART 2
==================================================*/


/*=========================
MARKET HIGHLIGHTS
=========================*/

.market-highlights{
    padding:90px 0;
    background:#ffffff;
}

.highlights-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:55px;
}

.highlight-box{
    background:#fff;
    padding:35px 30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.highlight-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.highlight-box i{
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    background:#e8fbfb;
    color:#009989;
    font-size:34px;
    margin-bottom:25px;
}

.highlight-box h3{
    font-size:24px;
    color:#023047;
    margin-bottom:15px;
}

.highlight-box strong{
    display:block;
    color:#009989;
    font-size:28px;
    font-weight:700;
    margin-bottom:15px;
}

.highlight-box p{
    color:#666;
    font-size:15px;
    line-height:1.8;
}



/*=========================
EXPORT INSIGHTS
=========================*/

.market-insights{
    padding:90px 0;
    background:#f8fafb;
}

.insight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.insight-image img{
    width:100%;
    border-radius:18px;
    display:block;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.insight-content h2{
    font-size:40px;
    line-height:1.3;
    color:#023047;
    margin:18px 0 25px;
}

.insight-content p{
    font-size:16px;
    line-height:1.9;
    color:#666;
    margin-bottom:20px;
}



/*=========================
TIMELINE
=========================*/

.market-timeline{
    padding:90px 0;
    background:#ffffff;
}

.timeline-list{
    max-width:900px;
    margin:55px auto 0;
    position:relative;
}

.timeline-list::before{
    content:"";
    position:absolute;
    left:28px;
    top:0;
    bottom:0;
    width:3px;
    background:#009989;
}

.timeline-item{
    position:relative;
    padding-left:80px;
    margin-bottom:40px;
}

.timeline-item:last-child{
    margin-bottom:0;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:18px;
    top:4px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#009989;
    border:5px solid #e8fbfb;
}

.timeline-item span{
    display:inline-block;
    background:#009989;
    color:#fff;
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:12px;
}

.timeline-item h4{
    font-size:24px;
    color:#023047;
    margin-bottom:10px;
}

.timeline-item p{
    color:#666;
    line-height:1.8;
    font-size:15px;
}



/*=========================
COMMON SECTION SPACING
=========================*/

.market-featured,
.market-list,
.market-highlights,
.market-insights,
.market-timeline{
    position:relative;
}

.market-featured .jb-section-head,
.market-list .jb-section-head,
.market-highlights .jb-section-head,
.market-timeline .jb-section-head{
    margin-bottom:0;
}
/*==================================================
MARKET UPDATES PAGE
PART 3
==================================================*/


/*=========================
NEWSLETTER
=========================*/

.market-newsletter{
    padding:90px 0;
    background:#f8fafb;
}

.newsletter-box{
    max-width:900px;
    margin:auto;
    text-align:center;
    background:#ffffff;
    padding:70px 60px;
    border-radius:20px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.newsletter-box h2{
    font-size:40px;
    color:#023047;
    margin-bottom:20px;
}

.newsletter-box p{
    font-size:17px;
    color:#666;
    line-height:1.8;
    max-width:650px;
    margin:0 auto 35px;
}

.newsletter-box form{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.newsletter-box input{
    width:420px;
    max-width:100%;
    height:58px;
    border:1px solid #d9e3e6;
    border-radius:50px;
    padding:0 25px;
    font-size:16px;
    outline:none;
    transition:.3s;
}

.newsletter-box input:focus{
    border-color:#009989;
}

.newsletter-box button{
    height:58px;
    padding:0 35px;
    border:none;
    border-radius:50px;
    background:#009989;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.newsletter-box button:hover{
    background:#023047;
}



/*=========================
CALL TO ACTION
=========================*/

.market-cta{
    padding:110px 0;
    background:linear-gradient(135deg,#009989,#006f73);
    text-align:center;
    color:#fff;
}

.market-cta h2{
    font-size:46px;
    margin-bottom:20px;
    color:#fff;
}

.market-cta p{
    max-width:760px;
    margin:0 auto 35px;
    font-size:18px;
    line-height:1.9;
    color:rgba(255,255,255,.92);
}

.market-cta .jb-btn-row{
    justify-content:center;
}



/*=========================
SMOOTH TRANSITIONS
=========================*/

.market-card,
.highlight-box,
.timeline-item,
.newsletter-box,
.featured-image img,
.insight-image img{
    transition:all .35s ease;
}

.featured-image img:hover,
.insight-image img:hover{
    transform:scale(1.03);
}



/*=========================
RESPONSIVE
=========================*/

@media(max-width:1200px){

.market-update-grid{
    grid-template-columns:repeat(2,1fr);
}

.highlights-grid{
    grid-template-columns:repeat(2,1fr);
}

}



@media(max-width:991px){

.featured-grid,
.insight-grid{
    grid-template-columns:1fr;
    gap:45px;
}

.market-page-hero{
    padding:90px 0;
}

.market-page-hero h1{
    font-size:42px;
}

.featured-content h2,
.insight-content h2{
    font-size:34px;
}

.newsletter-box{
    padding:50px 35px;
}

.market-cta h2{
    font-size:38px;
}

}



@media(max-width:767px){

.market-update-grid,
.highlights-grid{
    grid-template-columns:1fr;
}

.market-page-hero{
    padding:70px 0;
}

.market-page-hero h1{
    font-size:34px;
}

.market-page-hero p{
    font-size:16px;
}

.featured-content h2,
.insight-content h2{
    font-size:30px;
}

.newsletter-box{
    padding:40px 25px;
}

.newsletter-box h2{
    font-size:30px;
}

.market-cta{
    padding:80px 20px;
}

.market-cta h2{
    font-size:30px;
}

.market-cta p{
    font-size:16px;
}

.timeline-list::before{
    left:18px;
}

.timeline-item{
    padding-left:60px;
}

.timeline-item::before{
    left:8px;
}

}



@media(max-width:575px){

.market-page-hero h1{
    font-size:30px;
}

.featured-content h2,
.insight-content h2{
    font-size:26px;
}

.market-card-body{
    padding:22px;
}

.highlight-box{
    padding:28px 22px;
}

.newsletter-box button,
.newsletter-box input{
    width:100%;
}

.newsletter-box form{
    flex-direction:column;
}

}



/*==================================================
END OF FILE
==================================================*/



/*=========================================
    WHY CHOOSE JB FOODS
==========================================*/

.jb-why-area{
    padding:100px 0;
    background:#ffffff;
}

.jb-why-image{
    position:relative;
}

.jb-why-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:25px;
    display:block;
    box-shadow:0 20px 50px rgba(0,0,0,.10);
}

.jb-floating-card{
    position:absolute;
    left:30px;
    bottom:30px;
    background:#fff;
    padding:25px;
    border-radius:20px;
    max-width:320px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.jb-floating-card h4{
    font-size:24px;
    font-weight:700;
    margin-bottom:10px;
    color:#1d3c34;
}

.jb-floating-card p{
    margin:0;
    color:#666;
    line-height:28px;
    font-size:15px;
}

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

.jb-why-content{
    padding-left:40px;
}

.jb-why-content .sub-title{
    display:inline-block;
    color:#1b8f3d;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.jb-why-content h2{
    font-size:46px;
    line-height:1.2;
    font-weight:700;
    color:#1b1b1b;
    margin-bottom:20px;
}

.jb-why-content>p{
    color:#666;
    line-height:30px;
    margin-bottom:40px;
}

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

.jb-point{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:20px;
    margin-bottom:25px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.07);
    transition:.35s;
    height:100%;
}

.jb-point:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.jb-point i{
    width:55px;
    height:55px;
    background:#0b8f44;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    flex-shrink:0;
}

.jb-point h5{
    margin:0 0 8px;
    font-size:20px;
    font-weight:600;
    color:#222;
}

.jb-point p{
    margin:0;
    color:#666;
    line-height:24px;
    font-size:15px;
}

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

.jb-btn{

    display:inline-block;
    margin-top:20px;
    padding:15px 42px;
    background:#0b8f44;
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.jb-btn:hover{

    background:#066631;
    color:#fff;
    text-decoration:none;

}

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

@media(max-width:1199px){

.jb-why-content h2{

font-size:38px;

}

}

@media(max-width:991px){

.jb-why-area{

padding:80px 0;

}

.jb-why-content{

padding-left:0;
margin-top:50px;

}

.jb-why-image img{

height:500px;

}

}

@media(max-width:767px){

.jb-why-content h2{

font-size:30px;

}

.jb-why-image img{

height:350px;

}

.jb-floating-card{

position:relative;
left:0;
bottom:0;
margin-top:20px;
max-width:100%;

}

.jb-point{

padding:18px;

}

}

.export-process{

    position:relative;

    padding:120px 0;

    background:url("https://images.openai.com/static-rsc-4/aMpUJE4FrByAzqaKvuQj2eh5XdadZ8MuBALUJW20_5GeawOBSlJPa4VkasGPJdP3FVcL1XJWTuAmMJvyioPBgeGVY8ZHoEVr85bjuUdhqRF92eG15KsD12yoxKIDDiOsmQy855jR62tX-dBYumD1auL6WRFcEe0syxFZ9yI_oUw?purpose=inline") center center/cover no-repeat;

}

.export-process .overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

}

.export-process .container{

    position:relative;

    z-index:2;

}

.process-heading{

    text-align:center;

    color:#fff;

    margin-bottom:70px;

}

.process-heading span{

    color:#ffd54f;

    letter-spacing:2px;

    font-weight:700;

}

.process-heading h2{

    font-size:48px;

    margin:15px 0;

    color:#fff;

}

.process-heading p{

    max-width:700px;

    margin:auto;

    color:#ddd;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.process-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.2);

    border-radius:20px;

    padding:35px;

    text-align:center;

    color:#fff;

    transition:.4s;

}

.process-card:hover{

    transform:translateY(-10px);

    background:#0b8f44;

}

.process-card i{

    font-size:45px;

    margin-bottom:20px;

    color:#ffd54f;

}

.process-card h4{

    margin-bottom:15px;

    color:#fff;

}

.process-card p{

    color:#f2f2f2;

    line-height:26px;

}

@media(max-width:991px){

.process-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.process-grid{

grid-template-columns:1fr;

}

.process-heading h2{

font-size:34px;

}

}

.jb-buyer-section{
    padding:120px 0;
    background:#fff;
}

.buyer-image{
    position:relative;
}

.buyer-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:30px;
}

.buyer-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.buyer-card{

    background:#fff;

    padding:28px;

    border-radius:20px;

    border-left:5px solid #15803d;

    transition:.35s;

    display:flex;

    gap:20px;

    align-items:flex-start;

}

.buyer-card:hover{

    transform:translateY(-8px);

    background:#15803d;

    color:#fff;

}

.buyer-card:hover p{

    color:#fff;

}

.buyer-card:hover h4{

    color:#fff;

}

.buyer-card:hover i{

    background:#fff;

    color:#15803d;

}

.buyer-card i{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#15803d;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    transition:.3s;

}

.buyer-card h4{

    font-size:22px;

    margin-bottom:10px;

}

.buyer-card p{

    color:#666;

    line-height:28px;

    margin:0;

}

@media(max-width:991px){

.buyer-list{

grid-template-columns:1fr;

}

.buyer-image img{

height:400px;
margin-bottom:40px;

}

}
/*==========================
SECTION HEADING
==========================*/

.jb-heading{
    max-width:750px;
    margin:0 auto 70px;
    text-align:center;
}

.jb-heading span{
    display:inline-block;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:3px;
    color:#198754;
    margin-bottom:15px;
    position:relative;
}

.jb-heading span::before,
.jb-heading span::after{
    content:"";
    position:absolute;
    top:50%;
    width:45px;
    height:2px;
    background:#198754;
}

.jb-heading span::before{
    right:110%;
}

.jb-heading span::after{
    left:110%;
}

.jb-heading h2{
    font-size:46px;
    font-weight:700;
    line-height:1.2;
    color:#13294B;
    margin-bottom:20px;
}

.jb-heading p{
    font-size:17px;
    color:#666;
    line-height:30px;
    margin:0;
}

@media(max-width:991px){

.jb-heading h2{
    font-size:36px;
}

}

@media(max-width:576px){

.jb-heading{
    margin-bottom:50px;
}

.jb-heading h2{
    font-size:30px;
}

.jb-heading span::before,
.jb-heading span::after{
    display:none;
}

}

/*======================================
        PREMIUM FAQ SECTION
=======================================*/

.jb-section-soft{
    padding:100px 0;
    background:#f8faf8;
}

.jb-home-faq-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:start;
}

.jb-home-faq-grid .jb-label{

    display:inline-block;
    background:#e9f7ef;
    color:#198754;
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:18px;

}

.jb-home-faq-grid .jb-title{

    font-size:46px;
    font-weight:700;
    line-height:1.2;
    color:#13294B;
    margin-bottom:20px;

}

.jb-home-faq-grid .jb-lead{

    color:#666;
    line-height:30px;
    margin-bottom:35px;
    font-size:16px;

}

.jb-home-faq-list{

    display:flex;
    flex-direction:column;
    gap:18px;

}

/* FAQ CARD */

.jb-home-faq-list details{

    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
    transition:.35s;
    border-left:5px solid transparent;

}

.jb-home-faq-list details:hover{

    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.jb-home-faq-list details[open]{

    border-left:5px solid #198754;

}

/* Question */

.jb-home-faq-list summary{

    list-style:none;
    cursor:pointer;
    padding:22px 28px;
    font-size:18px;
    font-weight:600;
    color:#13294B;
    position:relative;
    transition:.3s;

}

.jb-home-faq-list summary::-webkit-details-marker{

    display:none;

}

/* Plus Icon */

.jb-home-faq-list summary::after{

    content:"+";
    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:50%;
    background:#e9f7ef;
    color:#198754;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    transition:.3s;

}

/* Minus */

.jb-home-faq-list details[open] summary::after{

    content:"−";
    background:#198754;
    color:#fff;

}

/* Answer */

.jb-home-faq-list details p{

    padding:0 28px 24px;
    margin:0;
    color:#666;
    line-height:30px;
    font-size:15px;

}

/* Button */

.jb-btn-outline{

    border:2px solid #198754;
    color:#198754;
    padding:14px 34px;
    border-radius:50px;
    font-weight:600;
    transition:.35s;

}

.jb-btn-outline:hover{

    background:#198754;
    color:#fff;

}

/* Mobile */

@media(max-width:991px){

.jb-home-faq-grid{

    grid-template-columns:1fr;
    gap:50px;

}

.jb-home-faq-grid .jb-title{

    font-size:36px;

}

}

@media(max-width:576px){

.jb-section-soft{

    padding:70px 0;

}

.jb-home-faq-grid .jb-title{

    font-size:30px;

}

.jb-home-faq-list summary{

    font-size:16px;
    padding:18px 20px;

}

.jb-home-faq-list details p{

    padding:0 20px 20px;

}

}

.jb-btn-outline{
    display:inline-block;
    padding:14px 34px;
    border:2px solid #198754;
    color:#198754 !important;
    background:#fff;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:all .3s ease;
}

.jb-btn-outline:hover{
    background:#198754;
    color:#fff !important;
    border-color:#198754;
    text-decoration:none;
}

.jb-btn-outline:hover,
.jb-btn-outline:hover *,
.jb-btn-outline:focus{
    color:#fff !important;
}

/*==============================
    TESTIMONIALS
==============================*/

.jb-testimonial-section{
    padding:100px 0;
    background:#f8faf8;
}

.jb-testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.jb-testimonial-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    border-top:4px solid #198754;
}

.jb-testimonial-card:hover{
    transform:translateY(-8px);
}

.jb-stars{
    color:#FFC107;
    font-size:20px;
    margin-bottom:20px;
    letter-spacing:2px;
}

.jb-review{
    color:#666;
    line-height:30px;
    margin-bottom:30px;
    font-style:italic;
}

.jb-client{
    display:flex;
    align-items:center;
    gap:15px;
}

.jb-client img{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
}

.jb-client h4{
    margin:0;
    color:#13294B;
    font-size:18px;
}

.jb-client span{
    color:#777;
    font-size:14px;
}

@media(max-width:991px){

.jb-testimonial-grid{
    grid-template-columns:1fr;
}

}

/*=========================================================
            JB FOODS - PREMIUM FEATURED PRODUCTS
=========================================================*/

.jb-featured-products{
    padding:110px 0;
    background:linear-gradient(180deg,#ffffff 0%,#f7faf8 100%);
}


/*============================
        SECTION HEADING
============================*/

.jb-home-section-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center !important;

}

.jb-home-section-heading.left{

    text-align:center !important;

}

.jb-home-section-heading .jb-label{

    display:inline-block;

    padding:8px 18px;

    background:#edf8f1;

    color:#16863d;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:18px;

}

.jb-home-section-heading h2{

    font-size:46px;

    font-weight:700;

    color:#16345c;

    margin-bottom:18px;

    line-height:1.2;

}

.jb-home-section-heading p{

    color:#666;

    font-size:16px;

    line-height:30px;

    max-width:650px;

    margin:auto;

}


/*============================
            GRID
============================*/

.jb-featured-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}


/*============================
            CARD
============================*/

.jb-featured-product{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:visible;

    transition:.45s;

    box-shadow:
        0 15px 45px rgba(0,0,0,.07);

}

.jb-featured-product:hover{

    transform:translateY(-12px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.14);

}


/*============================
            IMAGE
============================*/

.jb-featured-product-image{

    display:block;

    height:270px;

    overflow:hidden;

    border-radius:24px 24px 0 0;

    position:relative;

}

.jb-featured-product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.18),
    rgba(0,0,0,0));

}

.jb-featured-product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

.jb-featured-product:hover img{

    transform:scale(1.08);

}


/*============================
        CONTENT BOX
============================*/

.jb-featured-product-copy{

    position:relative;

    width:calc(100% - 36px);

    margin:-75px auto 20px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.8);

    border-radius:20px;

    padding:25px;

    z-index:20;

    transition:.35s;

}

.jb-featured-product:hover .jb-featured-product-copy{

    background:#fff;

}


/*============================
            BADGE
============================*/

.jb-featured-product-copy span{

    display:inline-block;

    padding:7px 16px;

    background:#edf8f1;

    color:#16863d;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:14px;

}


/*============================
            TITLE
============================*/

.jb-featured-product-copy h3{

    font-size:25px;

    color:#16345c;

    margin-bottom:14px;

    line-height:1.3;

    transition:.3s;

}

.jb-featured-product:hover h3{

    color:#16863d;

}


/*============================
        DESCRIPTION
============================*/

.jb-featured-product-copy p{

    color:#666;

    line-height:28px;

    margin-bottom:22px;

    font-size:15px;

}


/*============================
        BUTTON
============================*/

.jb-featured-product-copy a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#16345c;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.jb-featured-product-copy a i{

    transition:.3s;

}

.jb-featured-product-copy a:hover{

    color:#16863d;

}

.jb-featured-product-copy a:hover i{

    transform:translateX(8px);

}


/*============================
        RESPONSIVE
============================*/

@media(max-width:1200px){

.jb-featured-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.jb-featured-grid{

grid-template-columns:1fr;

}

.jb-home-section-heading h2{

font-size:34px;

}

.jb-featured-product-image{

height:240px;

}

}

.jb-featured-product-copy{

    position:relative;

    width:calc(100% - 36px);

    margin:-70px auto 22px;

    padding:24px;

    border-radius:22px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.30);

    box-shadow:
        0 15px 35px rgba(0,0,0,.10);

    z-index:10;

    transition:.4s;

}

/*==========================
    PRODUCT GRID
==========================*/

.jb-featured-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.jb-featured-product{

    background:transparent;

    box-shadow:none;

    border:none;

    overflow:hidden;

    transition:.4s;

}

.jb-featured-product:hover{

    transform:translateY(-8px);

}

/*==========================
        IMAGE
==========================*/

.jb-featured-product-image{

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:24px;

}

.jb-featured-product-image img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.7s;

}

.jb-featured-product:hover img{

    transform:scale(1.08);

}

.jb-featured-product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.35),
        rgba(0,0,0,.05)
    );

}

/*==========================
      CONTENT
==========================*/

.jb-featured-product-copy{

    padding:18px 6px 0;

}

.jb-featured-product-copy span{

    display:inline-block;

    padding:5px 14px;

    background:#edf8f1;

    color:#198754;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:12px;

}

.jb-featured-product-copy h3{

    font-size:24px;

    margin:10px 0;

    color:#13294B;

    transition:.3s;

}

.jb-featured-product:hover h3{

    color:#198754;

}

.jb-featured-product-copy p{

    color:#666;

    line-height:27px;

    margin-bottom:18px;

}

.jb-featured-product-copy a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#13294B;

    font-weight:600;

    text-decoration:none;

}

.jb-featured-product-copy a i{

    transition:.3s;

}

.jb-featured-product:hover a{

    color:#198754;

}

.jb-featured-product:hover a i{

    transform:translateX(6px);

}

@media(max-width:991px){

.jb-featured-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:767px){

.jb-featured-grid{

grid-template-columns:1fr;

}

}

.jb-featured-products .jb-home-section-heading,
.jb-featured-products .jb-section-head,
.jb-featured-products .jb-section-head.left{

    width:100%;
    max-width:900px;
    margin:0 auto 70px !important;
    text-align:center !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

}

.jb-featured-products .jb-home-section-heading p,
.jb-featured-products .jb-section-head p{

    max-width:700px;
    margin:0 auto;

}

.jb-featured-products .jb-home-section-heading h2,
.jb-featured-products .jb-section-head h2{

    width:100%;
    text-align:center;

}

.jb-grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
}

.jb-category-card{
    background:transparent;
    border-radius:24px;
    transition:.35s;
}

.jb-category-card:hover{
    transform:translateY(-10px);
}

.jb-category-card-media{
    position:relative;
    overflow:hidden;
    border-radius:24px;
}

.jb-category-card-media img{
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
    transition:.6s;
}

.jb-category-card:hover img{
    transform:scale(1.08);
}

.jb-category-badge{
    position:absolute;
    top:18px;
    left:18px;
    background:#198754;
    color:#fff;
    padding:6px 15px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    z-index:5;
}

.jb-category-card-body{

    position:relative;

    width:88%;

    margin:-70px auto 0;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:20px;

    padding:22px;

    z-index:10;

    box-shadow:0 15px 40px rgba(0,0,0,.10);

}

.jb-category-card-body h3{

    color:#13294B;

    font-size:24px;

    margin-bottom:12px;

}

.jb-category-card-body p{

    color:#555;

    line-height:27px;

    margin-bottom:18px;

}

.jb-text-link{

    color:#198754;

    text-decoration:none;

    font-weight:600;

}

.jb-text-link:hover{

    color:#145c32;

}

/*=========================================
        BUSINESS ENQUIRY CTA
=========================================*/

.jb-trade-banner{
    position:relative;
    padding:120px 0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border-radius:30px;
    overflow:hidden;
    margin:100px 0;
}

/* Dark Overlay */

.jb-trade-banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(8,25,50,.88),
        rgba(8,25,50,.68),
        rgba(25,135,84,.45)
    );
}

/* Glass Box */

.jb-trade-banner .container{
    position:relative;
    z-index:2;
    max-width:900px;
    text-align:center;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:25px;
    padding:70px 60px;
}

/* Small Heading */

.jb-eyebrow{
    display:inline-block;
    padding:8px 18px;
    background:rgba(255,255,255,.15);
    color:#fff;
    border-radius:30px;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:13px;
    font-weight:700;
    margin-bottom:22px;
}

/* Main Heading */

.jb-trade-banner h2{
    color:#fff;
    font-size:52px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:24px;
}

/* Description */

.jb-trade-banner p{
    color:rgba(255,255,255,.92);
    font-size:18px;
    line-height:32px;
    max-width:720px;
    margin:0 auto 40px;
}

/* Buttons */

.jb-btn-row{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.jb-btn-row .jb-btn{
    min-width:220px;
    padding:16px 34px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:.35s;
}

/* Primary Button */

.jb-btn-primary{
    background:#198754;
    color:#fff;
    border:2px solid #198754;
}

.jb-btn-primary:hover{
    background:#157347;
    color:#fff;
    transform:translateY(-3px);
}

/* Light Button */

.jb-btn-light{
    background:rgba(255,255,255,.15);
    color:#fff;
    border:2px solid rgba(255,255,255,.35);
    backdrop-filter:blur(10px);
}

.jb-btn-light:hover{
    background:#fff;
    color:#13294B;
    border-color:#fff;
    transform:translateY(-3px);
}

.jb-btn-light i{
    margin-right:8px;
}

/* Responsive */

@media(max-width:991px){

    .jb-trade-banner{
        padding:90px 0;
    }

    .jb-trade-banner .container{
        padding:50px 30px;
    }

    .jb-trade-banner h2{
        font-size:38px;
    }

    .jb-trade-banner p{
        font-size:16px;
        line-height:28px;
    }

}

@media(max-width:576px){

    .jb-trade-banner h2{
        font-size:30px;
    }

    .jb-btn-row{
        flex-direction:column;
        align-items:center;
    }

    .jb-btn-row .jb-btn{
        width:100%;
        max-width:300px;
    }

}

/* =====================================================
JB GENERAL EXPORTS LLP
ABOUT US DRAFT SYSTEM
PREMIUM CORPORATE STYLING
===================================================== */


/* ===========================
COMMON
=========================== */


.jb-about-draft{
display:none;
overflow:hidden;
}


.jb-about-draft.active{
display:block;
}



.jb-about-section,
.jb-about-light,
.jb-quality-section,
.jb-product-section,
.jb-values-section,
.jb-growth-section,
.jb-partner-section,
.jb-export-capability,
.jb-expertise-section,
.jb-why-section,
.jb-future-section{
padding:90px 0;
}



.jb-section-heading{
max-width:750px;
margin:0 auto 55px;
text-align:center;
}


.jb-section-heading span,
.jb-label,
.jb-eyebrow{
display:inline-block;
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
font-weight:700;
color:#b88a2c;
margin-bottom:15px;
}



.jb-section-heading h2,
.jb-about-text h2,
.jb-about-split h2{

font-size:42px;
line-height:1.2;
font-weight:700;
color:#111;
margin-bottom:25px;

}



.jb-section-heading p,
.jb-about-text p,
.jb-about-split p{

font-size:17px;
line-height:1.8;
color:#666;

}



.container{
max-width:1200px;
}




/* ===========================
DRAFT TABS
=========================== */


.jb-draft-review{

background:#111;
padding:35px 0;

}


.jb-draft-review-inner{

display:flex;
justify-content:space-between;
align-items:center;
gap:30px;

}


.jb-review-title h2{

color:#fff;
font-size:34px;

}


.jb-review-title p{

color:#bbb;

}



.jb-draft-tabs{

display:flex;
gap:10px;
flex-wrap:wrap;

}



.jb-draft-tab{

background:#fff;
border:0;
padding:12px 20px;
border-radius:50px;
cursor:pointer;
font-weight:600;
transition:.3s;

}


.jb-draft-tab.active,
.jb-draft-tab:hover{

background:#b88a2c;
color:#fff;

}







/* ===========================
HERO
=========================== */


.jb-about-hero-large{

height:650px;
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;

}



.jb-about-hero-large:before{

content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.85),
rgba(0,0,0,.35)
);

}



.jb-hero-content{

position:relative;
z-index:2;
max-width:700px;
color:white;
padding:0 15px;

}



.jb-hero-content h1{

font-size:58px;
line-height:1.1;
margin-bottom:25px;
font-weight:800;

}



.jb-hero-content p{

font-size:20px;
line-height:1.8;
color:#eee;

}



.jb-btn-row{

display:flex;
gap:15px;
margin-top:35px;

}



.jb-btn{

padding:14px 32px;
border-radius:40px;
font-weight:600;
display:inline-block;
text-decoration:none;
transition:.3s;

}



.jb-btn-primary{

background:#b88a2c;
color:#fff;

}


.jb-btn-primary:hover{

background:#946d1d;
color:white;

}



.jb-btn-outline{

border:1px solid white;
color:white;

}






/* ===========================
IMAGE + CONTENT
=========================== */


.jb-about-split{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}


.jb-about-image-box img,
.jb-about-split img{

width:100%;
height:500px;
object-fit:cover;
border-radius:20px;

}






/* ===========================
INFO CARDS
=========================== */


.jb-info-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}



.jb-info-card{

padding:35px;
background:white;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.3s;

}


.jb-info-card:hover{

transform:translateY(-8px);

}



.jb-card-icon{

width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
background:#b88a2c;
color:white;
border-radius:50%;
margin-bottom:20px;
font-weight:bold;

}





/* ===========================
PRODUCT GRID
=========================== */


.jb-product-section{

background:#f7f7f7;

}



.jb-product-grid,
.jb-expertise-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}



.jb-product-card,
.jb-expertise-card{

background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.08);

}



.jb-product-card img,
.jb-expertise-card img{

width:100%;
height:240px;
object-fit:cover;

}



.jb-product-card div,
.jb-expertise-card{

padding:25px;

}





/* ===========================
MISSION VISION
=========================== */


.jb-mv-grid,
.jb-premium-mv-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:35px;

}



.jb-mv-card,
.jb-premium-mv-card{

background:white;
border-radius:25px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.1);

}


.jb-mv-card img,
.jb-premium-mv-card img{

width:100%;
height:280px;
object-fit:cover;

}


.jb-mv-card h2,
.jb-mv-card p,
.jb-premium-mv-card div{

padding-left:30px;
padding-right:30px;

}


.jb-mv-card h2{

margin-top:25px;

}


.jb-mv-card p{

padding-bottom:35px;
line-height:1.8;
color:#666;

}







/* ===========================
VALUES
=========================== */


.jb-values-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}



.jb-value-box{

background:#111;
color:white;
padding:35px;
border-radius:20px;

}



.jb-value-box h3{

color:#b88a2c;
font-size:24px;

}



.jb-value-box p{

color:#ddd;
line-height:1.7;

}








/* ===========================
TIMELINE
=========================== */


.jb-timeline{

max-width:800px;
margin:auto;

}


.jb-timeline-item{

display:flex;
gap:25px;
padding:30px;
border-left:3px solid #b88a2c;

}


.timeline-number{

background:#b88a2c;
color:white;
min-width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

}





/* ===========================
PROCESS
=========================== */


.jb-process-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}



.jb-process-card{

padding:35px;
background:#fff;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.jb-process-card span{

font-size:40px;
font-weight:800;
color:#b88a2c;

}








/* ===========================
DARK SECTIONS
=========================== */


.jb-dark-mission{

background:#111;
color:white;
padding:90px 0;

}


.jb-dark-mv-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;

}


.jb-dark-mv-grid h2{

color:#b88a2c;

}


.jb-dark-mv-grid p{

font-size:18px;
line-height:1.8;
color:#ddd;

}








/* ===========================
FUTURE
=========================== */


.jb-future-box,
.jb-final-box{

background:
linear-gradient(
135deg,
#111,
#292929
);

padding:70px;
border-radius:30px;
text-align:center;
color:white;

}


.jb-future-box h2,
.jb-final-box h2{

font-size:42px;

}








/* ===========================
RESPONSIVE
=========================== */


@media(max-width:992px){


.jb-about-split,
.jb-mv-grid,
.jb-premium-mv-grid,
.jb-dark-mv-grid{

grid-template-columns:1fr;

}



.jb-info-grid,
.jb-product-grid,
.jb-expertise-grid,
.jb-values-grid{

grid-template-columns:repeat(2,1fr);

}



.jb-hero-content h1{

font-size:42px;

}



.jb-draft-review-inner{

flex-direction:column;
align-items:flex-start;

}



}




@media(max-width:600px){


.jb-about-hero-large{

height:550px;

}



.jb-hero-content h1{

font-size:32px;

}



.jb-hero-content p{

font-size:16px;

}



.jb-btn-row{

flex-direction:column;

}



.jb-info-grid,
.jb-product-grid,
.jb-expertise-grid,
.jb-values-grid,
.jb-process-grid{

grid-template-columns:1fr;

}



.jb-section-heading h2,
.jb-about-text h2{

font-size:30px;

}



.jb-about-image-box img{

height:350px;

}


}

/* =====================================
ABOUT HERO TEXT FIX
===================================== */

.jb-about-hero-large .jb-hero-content,
.jb-global-hero .jb-hero-content,
.jb-premium-hero .jb-hero-content{
    position:relative;
    z-index:5;
}


.jb-about-hero-large .jb-hero-content h1,
.jb-global-hero .jb-hero-content h1,
.jb-premium-hero .jb-hero-content h1{

    color:#ffffff !important;
    font-size:58px;
    font-weight:800;
    line-height:1.15;
    text-shadow:
        0 3px 15px rgba(0,0,0,0.8);

}



.jb-about-hero-large .jb-hero-content p,
.jb-global-hero .jb-hero-content p,
.jb-premium-hero .jb-hero-content p{

    color:#f5f5f5 !important;
    font-size:19px;
    line-height:1.8;
    max-width:650px;

}



/* Hero overlay stronger */

.jb-about-hero-large:before,
.jb-global-hero:before,
.jb-premium-hero:before{

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.55)
    ) !important;

}



/* Eyebrow badge */

.jb-hero-content .jb-eyebrow{

    background:rgba(184,138,44,0.15);
    border:1px solid #b88a2c;
    padding:10px 20px;
    border-radius:30px;
    color:#e6b85c !important;

}

/* ====================================
PRODUCT PAGE TRADE INFORMATION SECTION
==================================== */


.jb-product-trust-section{

padding:90px 0;
background:#f8f7f3;

}



.jb-product-trust-header{

max-width:750px;
margin:0 auto 55px;
text-align:center;

}



.jb-product-trust-header h2{

font-size:42px;
line-height:1.25;
font-weight:700;
color:#151515;
margin:15px 0;

}



.jb-product-trust-header p{

font-size:17px;
line-height:1.8;
color:#666;

}





.jb-product-trust-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

}



.jb-trust-box{

background:#fff;
padding:35px;
border-radius:22px;
display:flex;
gap:25px;
align-items:flex-start;
box-shadow:0 15px 40px rgba(0,0,0,.08);
border:1px solid rgba(0,0,0,.05);
transition:.35s;

}



.jb-trust-box:hover{

transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,.12);

}



.jb-trust-icon{

min-width:60px;
height:60px;
background:#b88a2c;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;

}



.jb-trust-icon i{

font-size:25px;
color:#fff;

}



.jb-trust-box h3{

font-size:23px;
margin-bottom:12px;
color:#161616;

}



.jb-trust-box p{

font-size:16px;
line-height:1.8;
color:#666;
margin:0;

}





@media(max-width:768px){


.jb-product-trust-grid{

grid-template-columns:1fr;

}



.jb-product-trust-header h2{

font-size:30px;

}



.jb-trust-box{

flex-direction:column;

}


}

.jb-quality-process-section {
  position: relative;
  padding: 90px 0;
  background:
    linear-gradient(
      rgba(5, 18, 35, .88),
      rgba(5, 18, 35, .88)
    ),
    url("https://images.pexels.com/photos/4481327/pexels-photo-4481327.jpeg?auto=compress&cs=tinysrgb&w=1800");

  background-size: cover;
  background-position: center;
}


.jb-quality-heading.light h2,
.jb-quality-heading.light p {
  color: #fff;
}


.jb-quality-process-grid {
  margin-top: 45px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}


.process-card {
  position:relative;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  overflow:hidden;
  padding-bottom:30px;
  transition:.35s ease;
}


.process-card:hover {
  transform:translateY(-10px);
}


.process-image {
  height:180px;
  overflow:hidden;
}


.process-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.5s ease;
}


.process-card:hover img {
  transform:scale(1.08);
}


.process-step {
  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#c9a227;
  color:#fff;
  font-weight:700;
  border-radius:50%;
  margin:-28px auto 20px;
  position:relative;
  z-index:2;
}


.process-card h3 {
  text-align:center;
  color:#fff;
  font-size:22px;
}


.process-card p {
  padding:0 25px;
  text-align:center;
  color:rgba(255,255,255,.8);
  line-height:1.7;
}


@media(max-width:992px){
 .jb-quality-process-grid{
   grid-template-columns:repeat(2,1fr);
 }
}


@media(max-width:576px){
 .jb-quality-process-grid{
   grid-template-columns:1fr;
 }
}

.jb-quality-cta-premium {
  position: relative;
  padding: 90px 0;
  background-image:
    linear-gradient(
      rgba(255,255,255,0.82),
      rgba(255,255,255,0.82)
    ),
    url("https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=1800");

  background-size: cover;
  background-position: center;
}


/* Main CTA Box */

.quality-cta-box {

  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:45px;

  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);

  border:1px solid rgba(10,30,60,.08);

  border-radius:30px;

  padding:45px;

  box-shadow:0 20px 60px rgba(0,0,0,.12);

}


/* Label */

.cta-label {

  display:inline-block;

  color:#b08a18;

  font-size:14px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:1.5px;

  margin-bottom:15px;

}


/* Heading */

.cta-content h2 {

  color:#10233f;

  font-size:38px;

  line-height:1.25;

  margin-bottom:20px;

}


/* Paragraph */

.cta-content p {

  color:#596273;

  font-size:17px;

  line-height:1.8;

}



/* Image */

.cta-image img {

  width:100%;
  height:100%;

  min-height:300px;

  object-fit:cover;

  border-radius:22px;

}


/* Buttons */

.cta-actions {

 display:flex;
 gap:15px;
 margin-top:30px;

}


.jb-btn-outline {

 border:1px solid #10233f;

 color:#10233f;

 padding:14px 28px;

 border-radius:50px;

 transition:.3s;

}


.jb-btn-outline:hover {

 background:#10233f;

 color:#fff;

}



@media(max-width:900px){

.quality-cta-box{

 grid-template-columns:1fr;

 padding:30px;

}


.cta-content h2{

 font-size:30px;

}


}
.jb-quality-process-section {

  position:relative;
  padding:90px 0;

  background:
  linear-gradient(
    rgba(248,250,252,.94),
    rgba(248,250,252,.94)
  ),
  url("https://images.pexels.com/photos/3768131/pexels-photo-3768131.jpeg?auto=compress&cs=tinysrgb&w=1800");

  background-size:cover;
  background-position:center;

}



/* Heading */

.jb-quality-heading.light .jb-quality-label {

  color:#b08a18;

}


.jb-quality-heading.light h2 {

  color:#10233f;

}


.jb-quality-heading.light p {

  color:#64748b;

}



/* Process Grid */

.jb-quality-process-grid {

  margin-top:50px;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:25px;

}



/* Cards */

.process-card {

  position:relative;

  background:#ffffff;

  border-radius:24px;

  overflow:hidden;

  padding-bottom:30px;

  border:1px solid #e5e7eb;

  box-shadow:
  0 15px 40px rgba(15,23,42,.08);

  transition:.35s ease;

}



.process-card:hover {

  transform:translateY(-10px);

  box-shadow:
  0 25px 60px rgba(15,23,42,.15);

}



/* Image */

.process-image {

  height:180px;

  overflow:hidden;

}


.process-image img {

  width:100%;

  height:100%;

  object-fit:cover;

  transition:.5s ease;

}


.process-card:hover img {

 transform:scale(1.08);

}



/* Number Circle */

.process-step {

  width:58px;

  height:58px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#b08a18;

  color:#fff;

  font-size:18px;

  font-weight:700;

  border-radius:50%;

  margin:-30px auto 20px;

  position:relative;

  z-index:2;

  border:5px solid #fff;

}



/* Title */

.process-card h3 {

  text-align:center;

  color:#10233f;

  font-size:22px;

  margin-bottom:12px;

}



/* Description */

.process-card p {

  padding:0 25px;

  text-align:center;

  color:#64748b;

  line-height:1.7;

}



/* Responsive */

@media(max-width:1100px){

.jb-quality-process-grid{

 grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:600px){

.jb-quality-process-grid{

 grid-template-columns:1fr;

}

}
.process-card:hover h3 {
  color: #10233f;
}

.process-card:hover p {
  color: #64748b;
}
.process-card:hover {
    background: #ffffff;
    transform: translateY(-10px);
}


.process-card:hover h3 {
    color: #10233f;
}


.process-card:hover p {
    color: #64748b;
}


.process-card:hover .process-step {
    background: #b08a18;
    color: #fff;
}
.jb-btn-row{
    justify-content: flex-start;
}

/* =========================================================
   JB GENERAL EXPORTS
   TESTIMONIAL SECTION
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.jb-testimonials-section {

    position: relative;

    padding: 90px 0 100px;

    background: #ffffff;

    overflow: hidden;

}


/* =========================================================
   HEADING
========================================================= */

.jb-testimonials-section .jb-heading {

    margin-bottom: 42px;

}


.jb-testimonials-section .jb-heading > span {

    display: inline-block;

    margin-bottom: 10px;

    color: #8b6b2e;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


.jb-testimonials-section .jb-heading h2 {

    margin: 0 0 14px;

    color: #14213d;

}


.jb-testimonials-section .jb-heading p {

    max-width: 680px;

    margin: 0 auto 25px;

    color: #6b7280;

    line-height: 1.8;

}


/* =========================================================
   SHARE EXPERIENCE BUTTON
========================================================= */

.jb-testimonial-add-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 13px 24px;

    border: 0;

    border-radius: 50px;

    background: #14213d;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        all .3s ease;

}


.jb-testimonial-add-btn:hover {

    background: #8b6b2e;

    transform:
        translateY(-2px);

}


/* =========================================================
   LOADING
========================================================= */

.jb-testimonial-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 35px 20px;

    color: #6b7280;

    font-size: 14px;

}


.jb-testimonial-spinner {

    width: 19px;

    height: 19px;

    border: 2px solid #e5e7eb;

    border-top-color: #14213d;

    border-radius: 50%;

    animation:
        jbTestimonialSpin
        .8s linear infinite;

}


@keyframes jbTestimonialSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   MARQUEE CONTAINER
========================================================= */

.jb-testimonial-marquee {

    position: relative;

    width: 100%;

    overflow: hidden;

}


/* =========================================================
   LEFT FADE
========================================================= */

.jb-testimonial-marquee::before {

    content: "";

    position: absolute;

    z-index: 5;

    left: 0;

    top: 0;

    bottom: 0;

    width: 120px;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            #ffffff 0%,
            rgba(255,255,255,0) 100%
        );

}


/* =========================================================
   RIGHT FADE
========================================================= */

.jb-testimonial-marquee::after {

    content: "";

    position: absolute;

    z-index: 5;

    right: 0;

    top: 0;

    bottom: 0;

    width: 120px;

    pointer-events: none;

    background:
        linear-gradient(
            to left,
            #ffffff 0%,
            rgba(255,255,255,0) 100%
        );

}


/* =========================================================
   TRACK
========================================================= */

.jb-testimonial-track {

    display: flex;

    align-items: stretch;

    gap: 24px;

    width: max-content;

    padding: 10px 0 35px;

}


/* =========================================================
   STATIC MODE
   Used for 1 or 2 testimonials.
========================================================= */

.jb-testimonial-track.jb-testimonial-static {

    width: 100%;

    justify-content: center;

    flex-wrap: nowrap;

    animation: none;

}


/* =========================================================
   ANIMATED MODE
   Used for 3+ testimonials.
========================================================= */

.jb-testimonial-track.jb-testimonial-animated {

    width: max-content;

    justify-content: flex-start;

    animation:
        jbTestimonialScroll
        45s
        linear
        infinite;

    will-change: transform;

}


/* =========================================================
   RIGHT → LEFT ANIMATION
========================================================= */

@keyframes jbTestimonialScroll {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

    100% {

        transform:
            translate3d(
                -50%,
                0,
                0
            );

    }

}


/* =========================================================
   PAUSE ON HOVER
========================================================= */

.jb-testimonial-marquee:hover
.jb-testimonial-track.jb-testimonial-animated {

    animation-play-state:
        paused;

}


/* =========================================================
   CARD
========================================================= */

.jb-testimonial-card {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 350px;

    min-width: 350px;

    min-height: 300px;

    box-sizing: border-box;

    padding: 28px;

    background: #ffffff;

    border:
        1px solid #e5e9ef;

    border-radius: 20px;

    box-shadow:
        0 12px 35px
        rgba(20,33,61,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.jb-testimonial-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px
        rgba(20,33,61,.12);

}


/* =========================================================
   STARS
========================================================= */

.jb-stars {

    margin-bottom: 18px;

    color: #c99a3e;

    font-size: 16px;

    line-height: 1;

    letter-spacing: 2px;

}


/* =========================================================
   REVIEW
========================================================= */

.jb-review {

    flex: 1;

    margin: 0;

    color: #596273;

    font-size: 14.5px;

    line-height: 1.75;

}


/* =========================================================
   CLIENT
========================================================= */

.jb-client {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid #edf0f4;

}


/* =========================================================
   CLIENT IMAGE
========================================================= */

.jb-client-image {

    width: 56px;

    height: 56px;

    min-width: 56px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        2px solid #eadcbf;

    border-radius: 50%;

    background: #14213d;

}


.jb-client-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   INITIALS
========================================================= */

.jb-client-initials {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

}


/* =========================================================
   CLIENT DETAILS
========================================================= */

.jb-client-details {

    min-width: 0;

}


.jb-client-details h4 {

    margin: 0 0 4px;

    color: #14213d;

    font-size: 15px;

    font-weight: 700;

}


.jb-client-details span {

    display: block;

    color: #8b6b2e;

    font-size: 11.5px;

    line-height: 1.5;

}


/* =========================================================
   EMPTY
========================================================= */

.jb-testimonial-empty {

    padding: 35px 20px;

    text-align: center;

    color: #6b7280;

}


/* =========================================================
   MODAL
========================================================= */

.jb-testimonial-modal {

    position: fixed;

    z-index: 999999;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


.jb-testimonial-modal.active {

    display: flex;

}


/* =========================================================
   MODAL OVERLAY
========================================================= */

.jb-testimonial-modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(10,20,35,.70);

    backdrop-filter:
        blur(5px);

}


/* =========================================================
   MODAL BOX
========================================================= */

.jb-testimonial-modal-box {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 650px;

    max-height: 90vh;

    overflow-y: auto;

    box-sizing: border-box;

    padding: 35px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.25);

    animation:
        jbTestimonialModalIn
        .3s ease;

}


@keyframes jbTestimonialModalIn {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(.98);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   CLOSE
========================================================= */

.jb-testimonial-modal-close {

    position: absolute;

    top: 15px;

    right: 18px;

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 50%;

    background: #f3f4f6;

    color: #14213d;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    transition:
        all .2s ease;

}


.jb-testimonial-modal-close:hover {

    background: #14213d;

    color: #ffffff;

}


/* =========================================================
   MODAL HEADER
========================================================= */

.jb-testimonial-modal-header {

    margin-bottom: 25px;

    padding-right: 40px;

}


.jb-testimonial-modal-header span {

    color: #8b6b2e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.jb-testimonial-modal-header h3 {

    margin: 7px 0;

    color: #14213d;

    font-size: 27px;

}


.jb-testimonial-modal-header p {

    margin: 0;

    color: #6b7280;

    line-height: 1.7;

}


/* =========================================================
   FORM ROW
========================================================= */

.jb-testimonial-form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

}


/* =========================================================
   FORM GROUP
========================================================= */

.jb-testimonial-form-group {

    margin-bottom: 18px;

}


.jb-testimonial-form-group label {

    display: block;

    margin-bottom: 7px;

    color: #26344d;

    font-size: 13px;

    font-weight: 600;

}


.jb-testimonial-form-group input,
.jb-testimonial-form-group textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border:
        1px solid #dfe4ea;

    border-radius: 10px;

    background: #fafbfc;

    color: #1f2937;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        all .2s ease;

}


.jb-testimonial-form-group input:focus,
.jb-testimonial-form-group textarea:focus {

    border-color: #14213d;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(20,33,61,.08);

}


.jb-testimonial-form-group textarea {

    resize: vertical;

    min-height: 120px;

}


.jb-testimonial-form-group input[type="file"] {

    padding: 10px;

    cursor: pointer;

}


.jb-testimonial-form-group small {

    display: block;

    margin-top: 5px;

    color: #8a94a6;

    font-size: 11px;

}


/* =========================================================
   RATING
========================================================= */

.jb-rating {

    display: flex;

    flex-direction: row-reverse;

    justify-content: flex-end;

    gap: 3px;

}


.jb-rating input {

    display: none;

}


.jb-rating label {

    margin: 0;

    color: #d5d9df;

    font-size: 29px;

    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease;

}


.jb-rating label:hover,
.jb-rating label:hover ~ label,
.jb-rating input:checked ~ label {

    color: #c99a3e;

}


/* =========================================================
   FORM MESSAGE
========================================================= */

.jb-testimonial-form-message {

    display: none;

    margin-bottom: 15px;

    padding: 12px 14px;

    border-radius: 9px;

    font-size: 13px;

    line-height: 1.5;

}


.jb-testimonial-form-message.success {

    display: block;

    background: #ecfdf5;

    color: #047857;

    border:
        1px solid #a7f3d0;

}


.jb-testimonial-form-message.error {

    display: block;

    background: #fef2f2;

    color: #b91c1c;

    border:
        1px solid #fecaca;

}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.jb-testimonial-submit-btn {

    width: 100%;

    padding: 14px;

    border: 0;

    border-radius: 11px;

    background: #14213d;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        all .3s ease;

}


.jb-testimonial-submit-btn:hover {

    background: #8b6b2e;

    transform:
        translateY(-1px);

}


.jb-testimonial-submit-btn:disabled {

    opacity: .6;

    cursor: not-allowed;

    transform: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .jb-testimonial-track.jb-testimonial-static {

        justify-content: flex-start;

        padding-left: 30px;

        padding-right: 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .jb-testimonials-section {

        padding:
            65px 0
            75px;

    }


    .jb-testimonial-card {

        width: 310px;

        min-width: 310px;

        min-height: 285px;

        padding: 24px;

    }


    .jb-testimonial-track {

        gap: 16px;

    }


    .jb-testimonial-track.jb-testimonial-animated {

        animation-duration:
            35s;

    }


    .jb-testimonial-marquee::before,
    .jb-testimonial-marquee::after {

        width: 50px;

    }


    .jb-testimonial-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .jb-testimonial-modal {

        padding: 10px;

    }


    .jb-testimonial-modal-box {

        padding:
            28px 20px;

        max-height: 92vh;

    }


    .jb-testimonial-modal-header h3 {

        font-size: 23px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jb-testimonial-card {

        width: 290px;

        min-width: 290px;

    }


    .jb-testimonial-track.jb-testimonial-animated {

        animation-duration:
            30s;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .jb-testimonial-track.jb-testimonial-animated {

        animation: none;

    }

}
.jb-trade-banner .jb-btn-row {
    justify-content: center;
}
/* ===================== DESKTOP (768px+) ===================== */
@media (min-width: 768px) {

  .jb-topbar { padding: 5px 0; font-size: 12px; }

  .jb-main-header { padding: 8px 0; }
  .jb-main-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
  }
  .jb-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .jb-brand img { height: 44px; width: auto; }
  .jb-brand-text { line-height: 1.2; white-space: nowrap; }
  .jb-brand-name { font-size: 16px; }
  .jb-brand-tagline { font-size: 11px; }

  .jb-header-search {
    flex: 0 1 340px;
    max-width: 340px;
    height: 38px;
    position: relative;
    display: flex;
    align-items: center;
  }
  .jb-header-search input {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 12px;
    box-sizing: border-box;
    font-size: 13px;
  }
  .jb-header-search button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
  }

  .jb-header-action {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 9px 18px;
    font-size: 13px;
  }

  .jb-mobile-toggle { display: none; }

  .jb-nav-wrap { padding: 0; }
  .jb-nav-inner { display: flex; justify-content: center; padding: 0; }
  .jb-main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
  }
  .jb-main-nav > li > a,
  .jb-category-toggle {
    display: flex;
    align-items: center;
    padding: 14px 22px;
    font-size: 15px;
  }
  .jb-category-panel { padding: 14px; }
}

/* ===================== MOBILE (≤767px) ===================== */
@media (max-width: 767px) {

  .jb-topbar { padding: 6px 0; font-size: 11px; }
  .jb-topbar-inner { flex-direction: column; gap: 4px; align-items: flex-start; }
  .jb-topbar-points span { display: block; margin: 0 0 2px; }
  .jb-topbar-contact a { margin: 0 12px 0 0; display: inline-block; }

  .jb-main-header { padding: 8px 0; }
  .jb-main-header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .jb-brand { display: flex; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0; overflow: hidden; }
  .jb-brand img { height: 30px; width: auto; flex-shrink: 0; }
  .jb-brand-text { min-width: 0; overflow: hidden; }
  .jb-brand-name {
    display: block; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .jb-brand-tagline { display: none; }

  .jb-header-search { display: none; }   /* hidden on mobile to save space — search still on products page */

  .jb-header-action { display: none; }   /* hidden on mobile, replaced by call icon in topbar */

  .jb-mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: #0f766e; color: #fff; border: none; border-radius: 4px;
    font-size: 16px; flex-shrink: 0; margin-left: auto;
  }

  .jb-nav-wrap { padding: 0; }
  .jb-nav-inner { padding: 0; }
  .jb-main-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    margin: 0; padding: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  .jb-main-nav.jb-nav-open { display: flex; }

  .jb-main-nav > li { width: 100%; border-bottom: 1px solid rgba(0,0,0,0.08); position: relative; }

  .jb-main-nav > li > a {
    display: block; width: 100%; padding: 12px 16px;
    color: #222; background: #fff; font-size: 14px; box-sizing: border-box;
  }
  .jb-main-nav > li.active > a { color: #0f766e; font-weight: 600; }

  .jb-category-toggle {
    display: flex !important;
    align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 16px;
    color: #222; background: #fff; font-size: 14px; box-sizing: border-box;
  }
  .jb-category-toggle i { transition: transform 0.2s ease; pointer-events: none; }
  .jb-category-menu.jb-submenu-open .jb-category-toggle i { transform: rotate(180deg); }

  .jb-category-panel {
    display: none;
    position: static;
    width: 100%;
    box-shadow: none;
    background: #fafafa;
    padding: 6px 16px 10px;
  }
  .jb-category-menu.jb-submenu-open .jb-category-panel { display: block; }

  .jb-category-group { margin-bottom: 10px; }
  .jb-category-title { font-size: 13px; font-weight: 600; color: #0f766e; display: block; margin-bottom: 4px; }
  .jb-category-links { display: flex; flex-direction: column; }
  .jb-category-links a { padding: 4px 0; font-size: 13px; color: #444; }
}

@media (max-width: 767px) {
  .jb-category-panel {
    display: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    pointer-events: auto !important;
    width: 100% !important;
    background: #fafafa !important;
    padding: 6px 16px 10px !important;
  }
  .jb-category-menu.jb-submenu-open .jb-category-panel {
    display: block !important;
  }
  .jb-category-group { margin-bottom: 10px !important; }
  .jb-category-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f766e !important;
    display: block !important;
    margin-bottom: 4px !important;
  }
  .jb-category-links { display: flex !important; flex-direction: column !important; }
  .jb-category-links a {
    display: block !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
    color: #444 !important;
  }
}
@media (max-width: 767px) {
  .jb-category-panel,
  .jb-category-panel * {
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    clip: auto !important;
  }

  .jb-category-menu.jb-submenu-open .jb-category-panel {
    display: block !important;
  }
  .jb-category-menu:not(.jb-submenu-open) .jb-category-panel {
    display: none !important;
  }

  .jb-category-group { display: block !important; width: 100% !important; margin-bottom: 10px !important; }
  .jb-category-links { display: flex !important; flex-direction: column !important; }
  .jb-category-title { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: #0f766e !important; }
  .jb-category-links a { display: block !important; padding: 4px 0 !important; font-size: 13px !important; color: #444 !important; }
}
@media (max-width: 767px) {
  .jb-category-menu.jb-submenu-open > .jb-category-panel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 768px) {

  /* Remove all breathing room between the three stacked bars */
  .jb-topbar,
  .jb-main-header,
  .jb-nav-wrap {
    margin: 0 !important;
  }

  body {
    margin: 0 !important;
  }

  /* Kill any bottom margin the topbar might have before the header starts */
  .jb-topbar {
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
  }
  .jb-main-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jb-nav-wrap {
    margin-top: 0 !important;
  }

  /* Push Quick quotation firmly to the right edge, no extra gap before it */
  .jb-main-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
  .jb-header-action {
    margin-left: auto !important;
  }
}
@media (min-width: 768px) {
  .jb-header-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 18px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 768px) {

  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }

  .jb-topbar,
  .jb-main-header,
  .jb-nav-wrap {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
  }

  /* In case a wrapping section/div is adding the gap instead */
  .jb-topbar + *,
  .jb-main-header + * {
    margin-top: 0 !important;
  }

  .jb-topbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .jb-main-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .jb-nav-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media (min-width: 768px) {

  /* Reset any spacing on html/body */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Force all three bands and their wrappers to zero out spacing */
  .jb-topbar,
  .jb-main-header,
  .jb-nav-wrap,
  .jb-topbar *,
  .jb-main-header *,
  .jb-nav-wrap * {
    box-sizing: border-box !important;
  }

  .jb-topbar,
  .jb-main-header,
  .jb-nav-wrap {
    display: block !important;
    margin: 0 !important;
    border: 0 !important;
    line-height: normal !important;
    float: none !important;
    position: relative !important;
    top: 0 !important;
    bottom: 0 !important;
  };

  /* Kill gaps from adjacent-sibling combinators */
  .jb-topbar + .jb-main-header,
  .jb-main-header + .jb-nav-wrap,
  .jb-topbar ~ .jb-main-header,
  .jb-main-header ~ .jb-nav-wrap {
    margin-top: 0 !important;
  };

  /* Tight internal padding — this controls the actual visible height */
  .jb-topbar { padding: 5px 0 !important; }
  .jb-main-header { padding: 8px 0 !important; }
  .jb-nav-wrap { padding: 0 !important; }

  /* Neutralize container/inner wrapper spacing */
  .jb-topbar .container,
  .jb-main-header .container,
  .jb-nav-wrap .container {
    margin: 0 auto !important;
    padding-top: 0 !important;
    padding-bottom: 0}
  }
  ```css
/* =========================================
   FORCE RESPONSIVE CATEGORY GRID
   Put this at the VERY END of your CSS
   ========================================= */

.jb-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.jb-grid-4 .jb-category-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Force image responsiveness */
.jb-grid-4 .jb-category-card-media {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.jb-grid-4 .jb-category-card-media img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
}

/* Prevent text/content from making the card wider */
.jb-grid-4 .jb-category-card-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

.jb-grid-4 .jb-category-card-body h3,
.jb-grid-4 .jb-category-card-body p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

/* =========================================
   TABLET
   ========================================= */
@media screen and (max-width: 991px) {
    .jb-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

/* =========================================
   MOBILE
   ========================================= */
@media screen and (max-width: 767px) {
    .jb-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .jb-grid-4 .jb-category-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-grid-4 .jb-category-card-media img {
        width: 100% !important;
        height: auto !important;
    }
}

/* =========================================
   SMALL MOBILE
   ========================================= */
@media screen and (max-width: 480px) {
    .jb-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .jb-grid-4 .jb-category-card-body {
        padding: 16px !important;
    }

    .jb-grid-4 .jb-category-card-body h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .jb-grid-4 .jb-category-card-body p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .jb-grid-4 .jb-text-link {
        display: inline-flex !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
}
```css
/* ============================================================
   JB GENERAL EXPORTS LLP
   COMPLETE RESPONSIVE OVERRIDE
   ============================================================
   IMPORTANT:
   Put this CSS AFTER all other CSS files/rules.
   It is intentionally aggressive and uses !important
   to override existing desktop styles.
   ============================================================ */


/* ============================================================
   1. GLOBAL RESPONSIVE FOUNDATION
   ============================================================ */

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

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

img,
svg,
video,
iframe {
    max-width: 100% !important;
}

img {
    height: auto !important;
}

.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* Prevent long text / links from creating horizontal overflow */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}


/* ============================================================
   2. TOP BAR
   ============================================================ */

.jb-topbar {
    width: 100% !important;
    max-width: 100% !important;
}

.jb-topbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

.jb-topbar-points,
.jb-topbar-contact {
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-topbar-points {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 20px !important;
}

.jb-topbar-contact {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px 18px !important;
}

.jb-topbar a,
.jb-topbar span {
    max-width: 100% !important;
}


/* ============================================================
   3. MAIN HEADER
   ============================================================ */

.jb-main-header {
    width: 100% !important;
    max-width: 100% !important;
}

.jb-main-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.jb-brand {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
}

.jb-brand img {
    max-width: 100% !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.jb-brand-text {
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-brand-name,
.jb-brand-tagline {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

.jb-header-search {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 350px !important;
}

.jb-header-search input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.jb-header-action {
    flex-shrink: 1 !important;
    white-space: nowrap !important;
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

.jb-nav-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

.jb-nav-inner {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

.jb-main-nav {
    max-width: 100% !important;
}

.jb-main-nav li {
    max-width: 100% !important;
}

.jb-main-nav li a {
    max-width: 100% !important;
}

.jb-category-menu {
    position: relative !important;
}

.jb-category-panel {
    max-width: calc(100vw - 30px) !important;
}


/* ============================================================
   5. REVIEW HEADER / TABS
   ============================================================ */

.jb-draft-review,
.jb-draft-review-inner,
.jb-review-title,
.jb-draft-tabs {
    max-width: 100% !important;
}

.jb-draft-review-inner {
    width: 100% !important;
}

.jb-review-title h2 {
    max-width: 100% !important;
}

.jb-draft-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 8px !important;
}

.jb-draft-tab {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}


/* ============================================================
   6. HERO SECTIONS
   ============================================================ */

.jb-about-hero-large {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background-position: center center !important;
    background-size: cover !important;
}

.jb-hero-content {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.jb-hero-content h1 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

.jb-hero-content p {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

.jb-btn-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    max-width: 100% !important;
}

.jb-btn {
    max-width: 100% !important;
    white-space: normal !important;
}


/* ============================================================
   7. ALL MAIN SECTIONS
   ============================================================ */

.jb-about-section,
.jb-about-light,
.jb-quality-section,
.jb-mission-vision,
.jb-values-section,
.jb-growth-section,
.jb-partner-section,
.jb-dark-mission,
.jb-export-capability,
.jb-global-final,
.jb-premium-mv,
.jb-why-section,
.jb-future-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}


/* ============================================================
   8. TWO COLUMN SECTIONS
   ============================================================ */

.jb-about-split {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 50px !important;
    align-items: center !important;
}

.jb-about-split > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-about-image-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.jb-about-image-box img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.jb-about-text {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* ============================================================
   9. SECTION HEADINGS
   ============================================================ */

.jb-section-heading {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.jb-section-heading h2,
.jb-section-heading p {
    max-width: 100% !important;
}


/* ============================================================
   10. INFO GRID
   ============================================================ */

.jb-info-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
}

.jb-info-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.jb-info-card h3,
.jb-info-card p {
    max-width: 100% !important;
}


/* ============================================================
   11. VALUES GRID
   ============================================================ */

.jb-values-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
}

.jb-value-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}


/* ============================================================
   12. MISSION / VISION GRID
   ============================================================ */

.jb-mv-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 30px !important;
}

.jb-mv-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.jb-mv-card img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}


/* ============================================================
   13. DARK MISSION / VISION
   ============================================================ */

.jb-dark-mv-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 40px !important;
}

.jb-dark-mv-grid > div {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* ============================================================
   14. PREMIUM MISSION / VISION
   ============================================================ */

.jb-premium-mv-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 30px !important;
}

.jb-premium-mv-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.jb-premium-mv-card img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.jb-premium-mv-card > div {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* ============================================================
   15. PROCESS GRID - DRAFT 3
   ============================================================ */

.jb-process-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 24px !important;
}

.jb-process-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.jb-process-card h3,
.jb-process-card p {
    max-width: 100% !important;
}


/* ============================================================
   16. TIMELINE
   ============================================================ */

.jb-timeline {
    width: 100% !important;
    max-width: 100% !important;
}

.jb-timeline-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.jb-timeline-item > div:last-child {
    min-width: 0 !important;
    max-width: 100% !important;
}

.timeline-number {
    flex-shrink: 0 !important;
}


/* ============================================================
   17. CHECK LIST
   ============================================================ */

.jb-check-list {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
}

.jb-check-list li {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}


/* ============================================================
   18. FINAL / FUTURE BOXES
   ============================================================ */

.jb-final-box,
.jb-future-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.jb-final-box h2,
.jb-final-box p,
.jb-future-box h2,
.jb-future-box p {
    max-width: 100% !important;
}


/* ============================================================
   19. FOOTER
   ============================================================ */

.jb-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.jb-footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1.3fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 35px !important;
}

.jb-footer-grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-footer-company {
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-footer-brand {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-footer-brand img {
    max-width: 80px !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.jb-footer-brand strong {
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-footer-links {
    max-width: 100% !important;
    padding-left: 0 !important;
}

.jb-footer-links li {
    max-width: 100% !important;
}

.jb-footer-links a {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}

.jb-footer-contact {
    max-width: 100% !important;
}

.jb-footer-contact a,
.jb-footer-business-info {
    display: flex !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.jb-footer-contact span {
    min-width: 0 !important;
    max-width: 100% !important;
}

.jb-footer-social-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.jb-footer-bottom {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 20px !important;
}

.jb-footer-bottom > * {
    max-width: 100% !important;
}


/* ============================================================
   20. FLOATING BUTTONS
   ============================================================ */

.jb-floating-actions {
    max-width: 100vw !important;
}

.jb-floating-actions a {
    flex-shrink: 0 !important;
}


/* ============================================================
   TABLET
   992px AND BELOW
   ============================================================ */

@media screen and (max-width: 991px) {

    .container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Header */

    .jb-main-header-inner {
        flex-wrap: wrap !important;
    }

    .jb-brand {
        flex: 1 1 auto !important;
    }

    .jb-header-search {
        order: 3 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .jb-header-action {
        flex-shrink: 0 !important;
    }

    /* Navigation */

    .jb-main-nav {
        flex-wrap: wrap !important;
    }

    /* Two columns become one */

    .jb-about-split {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    /* Four columns become two */

    .jb-info-grid,
    .jb-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Three process columns become two */

    .jb-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Footer */

    .jb-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 35px 25px !important;
    }

    /* Headings */

    .jb-hero-content h1 {
        font-size: clamp(34px, 6vw, 55px) !important;
        line-height: 1.15 !important;
    }

    .jb-section-heading h2,
    .jb-about-text h2,
    .jb-about-split h2 {
        font-size: clamp(28px, 4vw, 42px) !important;
        line-height: 1.2 !important;
    }
}


/* ============================================================
   MOBILE NAVIGATION
   767px AND BELOW
   ============================================================ */

@media screen and (max-width: 767px) {

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    /* --------------------------------------------------------
       TOP BAR
       -------------------------------------------------------- */

    .jb-topbar-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .jb-topbar-points,
    .jb-topbar-contact {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    .jb-topbar {
        font-size: 12px !important;
    }


    /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

    .jb-main-header-inner {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .jb-brand {
        width: auto !important;
        max-width: calc(100% - 55px) !important;
    }

    .jb-brand img {
        max-width: 55px !important;
    }

    .jb-brand-name {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .jb-brand-tagline {
        font-size: 10px !important;
    }

    .jb-header-action {
        display: none !important;
    }

    .jb-header-search {
        width: 100% !important;
        flex: 1 1 100% !important;
        order: 5 !important;
    }


    /* --------------------------------------------------------
       NAVIGATION
       -------------------------------------------------------- */

    .jb-nav-wrap .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .jb-nav-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .jb-mobile-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /*
       Let the existing JS control whether the menu is open.
       These rules make the menu itself fit mobile screens.
    */

    .jb-main-nav {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .jb-main-nav li {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-main-nav li a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-category-panel {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-shadow: none !important;
    }

    .jb-category-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-category-links {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-category-links a {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }


    /* --------------------------------------------------------
       REVIEW TABS
       -------------------------------------------------------- */

    .jb-review-title {
        text-align: center !important;
    }

    .jb-review-title h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .jb-review-title p {
        font-size: 14px !important;
    }

    .jb-draft-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .jb-draft-tab {
        width: 100% !important;
        min-height: 45px !important;
        text-align: center !important;
    }


    /* --------------------------------------------------------
       HERO
       -------------------------------------------------------- */

    .jb-about-hero-large {
        min-height: 500px !important;
        padding: 70px 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .jb-hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center !important;
    }

    .jb-hero-content h1 {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.15 !important;
        margin-bottom: 18px !important;
    }

    .jb-hero-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .jb-btn-row {
        justify-content: center !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .jb-btn-row .jb-btn {
        width: 100% !important;
        text-align: center !important;
    }


    /* --------------------------------------------------------
       TWO COLUMN SECTIONS
       -------------------------------------------------------- */

    .jb-about-split {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 25px !important;
    }

    .jb-about-split > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-about-image-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-about-image-box img {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* --------------------------------------------------------
       INFO GRID
       -------------------------------------------------------- */

    .jb-info-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .jb-info-card {
        width: 100% !important;
    }


    /* --------------------------------------------------------
       VALUES
       -------------------------------------------------------- */

    .jb-values-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .jb-value-box {
        width: 100% !important;
    }


    /* --------------------------------------------------------
       MISSION / VISION
       -------------------------------------------------------- */

    .jb-mv-grid,
    .jb-dark-mv-grid,
    .jb-premium-mv-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .jb-mv-card,
    .jb-premium-mv-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-premium-mv-card img,
    .jb-mv-card img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }


    /* --------------------------------------------------------
       PROCESS
       -------------------------------------------------------- */

    .jb-process-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .jb-process-card {
        width: 100% !important;
    }


    /* --------------------------------------------------------
       TIMELINE
       -------------------------------------------------------- */

    .jb-timeline-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .timeline-number {
        flex: 0 0 45px !important;
        width: 45px !important;
        height: 45px !important;
    }


    /* --------------------------------------------------------
       SECTION SPACING
       -------------------------------------------------------- */

    .jb-about-section,
    .jb-about-light,
    .jb-quality-section,
    .jb-mission-vision,
    .jb-values-section,
    .jb-growth-section,
    .jb-partner-section,
    .jb-dark-mission,
    .jb-export-capability,
    .jb-global-final,
    .jb-premium-mv,
    .jb-why-section,
    .jb-future-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }


    /* --------------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------------- */

    .jb-section-heading h2,
    .jb-about-text h2,
    .jb-about-split h2,
    .jb-quality-section h2,
    .jb-why-section h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .jb-section-heading p,
    .jb-about-text p,
    .jb-about-split p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    .jb-footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .jb-footer-grid > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    .jb-footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .jb-footer-social-icons {
        flex-wrap: wrap !important;
    }

}


/* ============================================================
   SMALL MOBILE
   480px AND BELOW
   ============================================================ */

@media screen and (max-width: 480px) {

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Header */

    .jb-brand img {
        max-width: 48px !important;
    }

    .jb-brand-name {
        font-size: 14px !important;
    }

    .jb-brand-tagline {
        font-size: 9px !important;
    }


    /* Hero */

    .jb-about-hero-large {
        min-height: 520px !important;
        padding: 60px 0 !important;
    }

    .jb-hero-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .jb-hero-content h1 {
        font-size: 29px !important;
        line-height: 1.15 !important;
    }

    .jb-hero-content p {
        font-size: 14px !important;
    }


    /* Section headings */

    .jb-section-heading h2,
    .jb-about-text h2,
    .jb-about-split h2,
    .jb-quality-section h2,
    .jb-why-section h2 {
        font-size: 25px !important;
    }


    /* Cards */

    .jb-info-card,
    .jb-value-box,
    .jb-process-card,
    .jb-mv-card,
    .jb-premium-mv-card {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* Footer */

    .jb-footer-brand {
        align-items: flex-start !important;
    }

    .jb-footer-brand img {
        max-width: 55px !important;
    }

    .jb-footer-contact a,
    .jb-footer-business-info {
        gap: 8px !important;
    }


    /* Floating buttons */

    .jb-floating-actions {
        right: 12px !important;
        bottom: 12px !important;
    }

}


/* ============================================================
   EXTRA SMALL DEVICES
   360px AND BELOW
   ============================================================ */

@media screen and (max-width: 360px) {

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .jb-brand-name {
        font-size: 13px !important;
    }

    .jb-hero-content h1 {
        font-size: 26px !important;
    }

    .jb-section-heading h2,
    .jb-about-text h2,
    .jb-about-split h2 {
        font-size: 23px !important;
    }

    .jb-topbar {
        font-size: 11px !important;
    }

    .jb-btn {
        font-size: 13px !important;
    }
}

```css
/* ==========================================================
   BUSINESS PARTNERSHIP CTA
   FORCE RESPONSIVE FIX
   Put at VERY END of responsive-fixes.css
   ========================================================== */

.quality-cta-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr) !important;

    align-items: stretch !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

.quality-cta-box *,
.quality-cta-box *::before,
.quality-cta-box *::after {
    box-sizing: border-box !important;
}

.quality-cta-box .cta-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 45px !important;

    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

.quality-cta-box .cta-content h2 {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 10px !important;

    font-size: clamp(28px, 3vw, 44px) !important;
    line-height: 1.2 !important;

    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.quality-cta-box .cta-content p {
    width: 100% !important;
    max-width: 750px !important;

    font-size: 16px !important;
    line-height: 1.7 !important;

    overflow-wrap: break-word !important;
}

.quality-cta-box .cta-label {
    display: inline-block !important;
    max-width: 100% !important;

    overflow-wrap: break-word !important;
}

.quality-cta-box .cta-actions {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 12px !important;

    margin-top: 25px !important;
}

.quality-cta-box .cta-actions .jb-btn {
    max-width: 100% !important;

    white-space: normal !important;
    text-align: center !important;

    overflow-wrap: break-word !important;
}

.quality-cta-box .cta-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;

    overflow: hidden !important;
}

.quality-cta-box .cta-image img {
    display: block !important;

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

    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 991px) {

    .quality-cta-box {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) !important;
    }

    .quality-cta-box .cta-content {
        padding: 35px !important;
    }

    .quality-cta-box .cta-content h2 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .quality-cta-box .cta-content p {
        font-size: 15px !important;
    }

    .quality-cta-box .cta-image {
        min-height: 320px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {

    .quality-cta-box {
        display: flex !important;
        flex-direction: column !important;

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

        margin: 0 !important;
    }

    .quality-cta-box .cta-content {
        width: 100% !important;
        max-width: 100% !important;

        padding: 30px 22px !important;

        order: 1 !important;
    }

    .quality-cta-box .cta-content h2 {
        font-size: 28px !important;
        line-height: 1.25 !important;

        margin: 10px 0 15px !important;
    }

    .quality-cta-box .cta-content p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 14px !important;
        line-height: 1.65 !important;

        margin-bottom: 0 !important;
    }

    .quality-cta-box .cta-actions {
        width: 100% !important;

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

        gap: 10px !important;

        margin-top: 22px !important;
    }

    .quality-cta-box .cta-actions .jb-btn {
        width: 100% !important;
        max-width: 100% !important;

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

        min-height: 48px !important;

        padding: 12px 16px !important;

        white-space: normal !important;
    }

    .quality-cta-box .cta-image {
        order: 2 !important;

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

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

        overflow: hidden !important;
    }

    .quality-cta-box .cta-image img {
        width: 100% !important;
        max-width: 100% !important;

        height: 260px !important;

        object-fit: cover !important;
    }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media screen and (max-width: 480px) {

    .quality-cta-box .cta-content {
        padding: 25px 18px !important;
    }

    .quality-cta-box .cta-content h2 {
        font-size: 25px !important;
        line-height: 1.25 !important;
    }

    .quality-cta-box .cta-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .quality-cta-box .cta-image {
        height: 220px !important;
        min-height: 220px !important;
    }

    .quality-cta-box .cta-image img {
        height: 220px !important;
    }
}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media screen and (max-width: 360px) {

    .quality-cta-box .cta-content {
        padding: 22px 15px !important;
    }

    .quality-cta-box .cta-content h2 {
        font-size: 23px !important;
    }

    .quality-cta-box .cta-content p {
        font-size: 13px !important;
    }

    .quality-cta-box .cta-image {
        height: 190px !important;
        min-height: 190px !important;
    }

    .quality-cta-box .cta-image img {
        height: 190px !important;
    }
}

@media (max-width: 767px) {

    .jb-topbar {
        display: none !important;
    }

    .jb-main-header {
        height: 70px !important;
        min-height: 70px !important;
        background: #fff !important;
    }

    .jb-main-header-inner {
        height: 70px !important;
        display: flex !important;
        align-items: center !important;
        position: relative;
    }

    .jb-brand img {
        width: 48px !important;
    }

    .jb-brand-name {
        font-size: 13px !important;
        white-space: nowrap;
    }

    .jb-brand-tagline,
    .jb-header-search {
        display: none !important;
    }

    /* QUICK QUOTATION */
    .jb-header-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;
        padding: 8px 9px !important;
        margin-left: auto !important;
        margin-right: 52px !important;

        white-space: nowrap !important;
        border-radius: 4px !important;
    }

    /* Navigation container */
    .jb-nav-wrap {
        position: relative !important;
        height: 0 !important;
        background: transparent !important;
        z-index: 9999 !important;
    }

    .jb-nav-inner {
        position: static !important;
        height: 0 !important;
    }

    /* HAMBURGER */
    .jb-mobile-toggle {
        position: absolute !important;
        top: -55px !important;
        right: 15px !important;

        width: 40px !important;
        height: 40px !important;

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

        background: #009f93 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 4px !important;

        z-index: 10001 !important;
    }

    /* MENU PANEL */
    .jb-main-nav {
        position: fixed !important;

        top: 70px !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;

        background: #fff !important;

        display: none !important;

        flex-direction: column !important;

        z-index: 10000 !important;

        box-shadow: 0 8px 25px rgba(0,0,0,.18) !important;
    }

    /* When opened */
    .jb-nav-wrap.menu-open .jb-main-nav {
        display: flex !important;
    }

    .jb-main-nav > li {
        width: 100% !important;
        border-bottom: 1px solid #eee !important;
    }

    .jb-main-nav > li > a {
        display: block !important;
        width: 100% !important;
        padding: 18px 16px !important;
        color: #222 !important;
        background: #fff !important;
    }

    .jb-main-nav > li.active > a {
        color: #008f84 !important;
        background: #f1f1f1 !important;
    }

    /* Products dropdown */
    .jb-category-panel {
        position: static !important;
        width: 100% !important;
    }

    /* X button */
    .jb-mobile-toggle.menu-active {
        background: #008f84 !important;
    }

}
@media (max-width: 767px) {

    /* =========================================
       TOP BAR
    ========================================= */

    .jb-topbar {
        display: none !important;
    }


    /* =========================================
       MAIN HEADER
    ========================================= */

    .jb-main-header {
        height: 70px !important;
        min-height: 70px !important;
        padding: 0 !important;
        background: #fff !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    .jb-main-header .container {
        height: 70px !important;
    }

    .jb-main-header-inner {
        height: 70px !important;

        display: flex !important;
        align-items: center !important;

        position: relative !important;

        padding: 0 10px !important;

        white-space: nowrap !important;
    }


    /* =========================================
       BRAND
    ========================================= */

    .jb-brand {
        display: flex !important;
        align-items: center !important;

        min-width: 0 !important;
        max-width: calc(100% - 155px) !important;

        margin: 0 !important;

        flex-shrink: 1 !important;
    }

    .jb-brand img {
        width: 43px !important;
        height: auto !important;

        flex-shrink: 0 !important;
    }

    .jb-brand-text {
        margin-left: 7px !important;

        min-width: 0 !important;
    }

    .jb-brand-name {
        display: block !important;

        font-size: 13px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }

    .jb-brand-tagline {
        display: none !important;
    }


    /* =========================================
       SEARCH
    ========================================= */

    .jb-header-search {
        display: none !important;
    }


    /* =========================================
       QUICK QUOTATION
    ========================================= */

    .jb-header-action {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        position: absolute !important;

        right: 62px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 105px !important;
        height: 38px !important;

        padding: 0 7px !important;
        margin: 0 !important;

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

        white-space: nowrap !important;

        border-radius: 4px !important;

        z-index: 10002 !important;
    }

    .jb-header-action i {
        margin-right: 3px !important;
    }


    /* =========================================
       NAVIGATION WRAPPER
    ========================================= */

    .jb-nav-wrap {
        position: relative !important;

        height: 0 !important;
        min-height: 0 !important;

        background: transparent !important;

        z-index: 10000 !important;
    }

    .jb-nav-wrap .container {
        height: 0 !important;
    }

    .jb-nav-inner {
        position: static !important;

        height: 0 !important;
    }


    /* =========================================
       HAMBURGER / CLOSE BUTTON
    ========================================= */

    .jb-mobile-toggle {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        position: absolute !important;

        top: -55px !important;
        right: 10px !important;

        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #009f93 !important;
        color: #fff !important;

        border: none !important;
        border-radius: 4px !important;

        z-index: 10005 !important;
    }

    .jb-mobile-toggle i {
        font-size: 16px !important;
    }


    /* =========================================
       MOBILE MAIN MENU
    ========================================= */

    .jb-main-nav {
        display: none !important;

        position: fixed !important;

        top: 70px !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-direction: column !important;

        background: #fff !important;

        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16) !important;

        z-index: 10004 !important;

        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
    }


    /* OPEN MENU */

    .jb-main-nav.open {
        display: flex !important;
    }


    /* =========================================
       MAIN MENU ITEMS
    ========================================= */

    .jb-main-nav > li {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 1px solid #e8e8e8 !important;

        background: #fff !important;
    }

    .jb-main-nav > li > a {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 55px !important;

        padding: 0 16px !important;

        color: #222 !important;

        background: #fff !important;

        font-size: 14px !important;

        font-weight: 600 !important;

        text-decoration: none !important;
    }

    .jb-main-nav > li.active > a {
        color: #008f84 !important;
        background: #f5f5f5 !important;
    }


    /* =========================================
       PRODUCTS
    ========================================= */

    .jb-category-menu {
        position: relative !important;

        display: block !important;
    }

    .jb-category-toggle {
        justify-content: flex-start !important;

        cursor: pointer !important;
    }


    /* =========================================
       PRODUCTS DROPDOWN
    ========================================= */

    .jb-category-panel {
        display: none !important;

        position: static !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        background: #f8f8f8 !important;

        box-shadow: none !important;

        border: none !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: none !important;
    }


    /* SHOW PRODUCTS DROPDOWN */

    .jb-category-menu.open > .jb-category-panel {
        display: block !important;
    }


    /* =========================================
       CATEGORY GROUP
    ========================================= */

    .jb-category-group {
        display: block !important;

        width: 100% !important;

        padding: 0 !important;

        margin: 0 !important;

        border-top: 1px solid #e5e5e5 !important;

        background: #f8f8f8 !important;
    }


    /* CATEGORY TITLE */

    .jb-category-title {
        display: flex !important;

        align-items: center !important;

        min-height: 45px !important;

        padding: 0 25px !important;

        color: #008f84 !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        text-decoration: none !important;
    }


    /* CATEGORY PRODUCT LINKS */

    .jb-category-links {
        display: block !important;

        padding: 0 0 8px !important;
    }

    .jb-category-links a {
        display: block !important;

        padding: 8px 25px 8px 42px !important;

        color: #555 !important;

        font-size: 12px !important;

        text-decoration: none !important;
    }

    .jb-category-links a:hover {
        color: #008f84 !important;
    }


    /* =========================================
       BODY WHEN MENU OPEN
    ========================================= */

    body.jb-menu-open {
        overflow: hidden !important;
    }

}
@media (max-width: 767px) {
    .jb-brand-text {
        display: none !important;
    }

    .jb-brand img {
        width: 48px !important;
    }
}
@media (max-width: 767px) {

    .jb-header-action {
        position: absolute !important;

        right: 62px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        width: 125px !important;
        height: 40px !important;

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

        padding: 0 8px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        font-size: 10px !important;
        letter-spacing: 1px !important;

        white-space: nowrap !important;
        overflow: visible !important;

        border-radius: 4px !important;
    }

    .jb-header-action i {
        flex-shrink: 0 !important;
        margin-right: 4px !important;
    }
}
@media (min-width: 768px) {

    /* Reduce space around logo */
    .jb-main-header {
        height: 82px !important;
        min-height: 82px !important;
        padding: 0 !important;
    }

    .jb-main-header .container,
    .jb-main-header-inner {
        height: 82px !important;
        min-height: 82px !important;
    }

    .jb-main-header-inner {
        display: flex !important;
        align-items: center !important;
    }

    /* Reduce logo size */
    .jb-brand img {
        max-height: 68px !important;
        width: auto !important;
    }

    /* Company text */
    .jb-brand-text {
        margin-left: 10px !important;
    }

    .jb-brand-name {
        font-size: 15px !important;
    }

    .jb-brand-tagline {
        font-size: 10px !important;
        margin-top: 3px !important;
    }

    /* Search */
    .jb-header-search {
        height: 38px !important;
    }

    .jb-header-search input,
    .jb-header-search button {
        height: 38px !important;
    }

    /* Quick quotation */
    .jb-header-action {
        height: 40px !important;
    }

    /* Navigation */
    .jb-nav-wrap {
        height: 55px !important;
        min-height: 55px !important;
    }

    .jb-nav-wrap .container,
    .jb-nav-inner,
    .jb-main-nav {
        height: 55px !important;
    }

    .jb-main-nav > li {
        height: 55px !important;
    }

    .jb-main-nav > li > a {
        height: 55px !important;
    }
}
@media (min-width: 768px) {

    .jb-nav-wrap {
        height: 55px !important;
        min-height: 55px !important;
        padding: 0 !important;
    }

    .jb-nav-wrap .container {
        height: 55px !important;
    }

    .jb-nav-inner {
        height: 55px !important;
        display: flex !important;
        align-items: stretch !important;
        position: relative !important;
    }

    .jb-main-nav {
        height: 55px !important;
        min-height: 55px !important;

        display: flex !important;
        align-items: stretch !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .jb-main-nav > li {
        height: 55px !important;
        min-height: 55px !important;

        display: flex !important;
        align-items: stretch !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .jb-main-nav > li > a {
        height: 55px !important;
        min-height: 55px !important;

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

        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        box-sizing: border-box !important;
    }

    /* Products should have exactly the same height */
    .jb-category-menu > .jb-category-toggle {
        height: 55px !important;
        min-height: 55px !important;
        display: flex !important;
        align-items: center !important;
    }

}
@media (max-width: 767px) {

    .jb-brand img {
        width: 150px !important;
        max-width: 150px !important;
        height: auto !important;
    }

    .jb-brand {
        display: flex !important;
        align-items: center !important;
    }

    .jb-brand-text {
        display: none !important;
    }
}
/* =========================================
   JB TRADE BANNER - CENTER EVERYTHING
   ========================================= */

.jb-trade-banner {
    position: relative !important;
    min-height: 390px !important;

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

    text-align: center !important;

    background-size: cover !important;
    background-position: center !important;
}

/* Dark overlay */
.jb-trade-banner::before {
    content: "";
    position: absolute !important;
    inset: 0 !important;

    background: rgba(10, 25, 35, 0.55) !important;

    z-index: 0 !important;
}

/* RESET CONTAINER LAYOUT */
.jb-trade-banner > .container {
    position: relative !important;
    z-index: 2 !important;

    width: 100% !important;
    max-width: 1140px !important;

    margin: 0 auto !important;
    padding: 60px 30px !important;

    display: block !important;
    flex: none !important;

    text-align: center !important;

    /* IMPORTANT: remove old grid/flex columns */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

/* Eyebrow */
.jb-trade-banner .jb-eyebrow {
    display: inline-block !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 auto 18px !important;

    padding: 9px 18px !important;

    color: #fff !important;
    background: rgba(255,255,255,0.15) !important;

    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 30px !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;

    text-align: center !important;
}

/* Heading */
.jb-trade-banner h2 {
    display: block !important;

    width: 100% !important;
    max-width: 800px !important;

    margin: 0 auto 18px !important;

    color: #fff !important;

    font-size: 42px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    text-align: center !important;
}

/* Paragraph */
.jb-trade-banner p {
    display: block !important;

    width: 100% !important;
    max-width: 720px !important;

    margin: 0 auto 28px !important;

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

    font-size: 16px !important;
    line-height: 1.7 !important;

    text-align: center !important;
}

/* Buttons */
.jb-trade-banner .jb-btn-row {
    width: 100% !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;

    margin: 0 auto !important;
}

/* Buttons */
.jb-trade-banner .jb-btn {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 190px !important;
    height: 48px !important;

    padding: 0 22px !important;

    margin: 0 !important;

    border-radius: 4px !important;

    white-space: nowrap !important;
}
.jb-grid-4 .jb-category-card {
    height: 495px !important;
    min-height: 495px !important;
    max-height: 495px !important;

    display: flex !important;
    flex-direction: column !important;
}

.jb-grid-4 .jb-category-card-media {
    height: 180px !important;
    min-height: 180px !important;
    flex-shrink: 0 !important;
}

.jb-grid-4 .jb-category-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.jb-grid-4 .jb-category-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.jb-grid-4 .jb-text-link {
    margin-top: auto !important;
}
.jb-grid-4 .jb-category-card {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
}

.jb-grid-4 .jb-category-card-media {
    height: 155px !important;
    min-height: 155px !important;
}

.jb-grid-4 .jb-category-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.jb-grid-4 .jb-text-link {
    margin-top: auto !important;
}

.jb-featured-grid {
    align-items: stretch;
}

.jb-featured-product {
    display: flex;
    flex-direction: column;
}

.jb-featured-product-copy {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.jb-featured-product-copy > a {
    margin-top: auto;
}
/* Product listing cards */
.jb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

.jb-grid-3 .jb-category-card {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.jb-grid-3 .jb-category-card-media {
    height: 170px;
    flex-shrink: 0;
}

.jb-grid-3 .jb-category-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jb-grid-3 .jb-category-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.jb-grid-3 .jb-text-link {
    margin-top: auto;
}
.jb-header-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}
.jb-footer .jb-footer-company .jb-footer-brand img {
    width: 160px !important;
    height: auto !important;
    max-width: none !important;
}
/* =========================
   FOOTER - 3 COLUMN LAYOUT
   ========================= */

.jb-footer .jb-footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 60px !important;
    align-items: start !important;
}


/* Company information */
.jb-footer .jb-footer-company {
    min-width: 0 !important;
}


/* Company / Legal columns */
.jb-footer .jb-footer-grid > div {
    min-width: 0 !important;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 991px) {
    .jb-footer .jb-footer-grid {
        grid-template-columns: 1.5fr 1fr !important;
        gap: 40px !important;
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 575px) {
    .jb-footer .jb-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
}/* =========================
   FOOTER - 3 COLUMN LAYOUT
   ========================= */

.jb-footer .jb-footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr !important;
    gap: 60px !important;
    align-items: start !important;
}


/* Company information */
.jb-footer .jb-footer-company {
    min-width: 0 !important;
}


/* Company / Legal columns */
.jb-footer .jb-footer-grid > div {
    min-width: 0 !important;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 991px) {
    .jb-footer .jb-footer-grid {
        grid-template-columns: 1.5fr 1fr !important;
        gap: 40px !important;
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 575px) {
    .jb-footer .jb-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
}
.jb-topbar-contact {
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
}

.jb-topbar-phones {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
/* ================================
   HERO CONTENT - WIDER LAYOUT
================================ */

.jb-home-hero .jb-hero-content {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.jb-home-hero .jb-hero-content h1 {
    max-width: 1050px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.jb-home-hero .jb-hero-content p {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.jb-home-hero .jb-btn-row {
    justify-content: center !important;
}
.jb-home-hero .jb-btn-row {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
}

/* =========================================
   PRODUCT CARDS - FIXED EQUAL HEIGHT
========================================= */

.jb-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
    align-items: stretch !important;
}

/* Every card exactly same height */
.jb-grid-3 .jb-category-card {
    height: 460px !important;
    min-height: 460px !important;
    max-height: 460px !important;

    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
}

/* Image area */
.jb-grid-3 .jb-category-card-media {
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    flex: 0 0 170px !important;
    overflow: hidden !important;
}

.jb-grid-3 .jb-category-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Content area */
.jb-grid-3 .jb-category-card-body {
    height: 290px !important;
    min-height: 290px !important;
    max-height: 290px !important;

    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Product description */
.jb-grid-3 .jb-category-card-body p {
    margin-bottom: 0 !important;
}

/* Button ALWAYS at bottom */
.jb-grid-3 .jb-category-card-body .jb-text-link {
    margin-top: auto !important;
    padding-top: 15px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
/* =========================================
   PRODUCT CARDS - FINAL FIX
========================================= */

.jb-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
    align-items: stretch !important;
}

/* Same height for every card */
.jb-grid-3 .jb-category-card {
    height: 400px !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: 0 !important;
}

/* Image area */
.jb-grid-3 .jb-category-card-media {
    height: 270px !important;
    min-height: 270px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    position: relative !important;
}

.jb-grid-3 .jb-category-card-media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* Content panel overlaps image */
.jb-grid-3 .jb-category-card-body {
    position: relative !important;
    z-index: 2 !important;

    margin: -68px 18px 0 !important;

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

    padding: 18px 20px 16px !important;

    display: flex !important;
    flex-direction: column !important;

    background: rgba(255, 255, 255, 0.96) !important;

    border-radius: 18px !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

/* Category badge */
.jb-grid-3 .jb-category-badge {
    display: inline-flex !important;
    align-items: center !important;

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

    padding: 6px 13px !important;

    border-radius: 20px !important;

    background: #eef9f3 !important;
    color: #008c4a !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* Product title */
.jb-grid-3 .jb-category-card-body h3 {
    margin: 12px 0 8px !important;

    font-size: 22px !important;
    line-height: 1.2 !important;

    color: #062653 !important;
}

/* Description */
.jb-grid-3 .jb-category-card-body p {
    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.7 !important;

    color: #444 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Highlighted button */
.jb-grid-3 .jb-text-link {
    margin-top: auto !important;

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

    align-self: flex-start !important;

    padding: 9px 16px !important;

    border-radius: 20px !important;

    background: #008c4a !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    transition: all 0.25s ease !important;
}

.jb-grid-3 .jb-text-link i {
    margin-left: 7px !important;
}

.jb-grid-3 .jb-text-link:hover {
    background: #006f3a !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .jb-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .jb-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .jb-grid-3 .jb-category-card {
        height: 390px !important;
        min-height: 390px !important;
    }

    .jb-grid-3 .jb-category-card-media {
        height: 255px !important;
        min-height: 255px !important;
    }

    .jb-grid-3 .jb-category-card-body {
        margin: -60px 14px 0 !important;
        height: 195px !important;
        min-height: 195px !important;
        padding: 16px 18px !important;
    }

    .jb-grid-3 .jb-category-card-body h3 {
        font-size: 20px !important;
    }

}
/* ==========================================================================
   PREMIUM POLISH LAYER — Montserrat typography, card alignment,
   overflow protection and full responsive refinement.
   (Appended last so it wins the cascade without touching earlier rules.)
   ========================================================================== */

/* ---- Global typography refinement (Montserrat) ---- */
body { font-size: 15.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; }

.jb-section-head h2,
.jb-title,
.jb-hero h1,
.jb-page-hero h1 { font-weight: 800; }

.jb-main-nav > li > a { font-weight: 600; letter-spacing: 0.02em; }

/* ---- Never let content spill out of its box ---- */
.jb-category-card, .jb-info-card, .jb-value-card, .jb-process-card,
.jb-rice-card, .market-card, .jb-feature, .jb-trade-capability-card,
.jb-form-card, .jb-contact-card, .jb-footer, .jb-stat {
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.row > [class*="col-"] { min-width: 0; }
img, iframe, video, table { max-width: 100%; }
.jb-table-wrap { -webkit-overflow-scrolling: touch; }

/* ---- Equal-height, perfectly aligned cards ---- */
.row { row-gap: 30px; }
.row > [class*="col-"] > .jb-category-card,
.row > [class*="col-"] > .jb-info-card,
.row > [class*="col-"] > .jb-value-card,
.row > [class*="col-"] > .jb-process-card,
.row > [class*="col-"] > .jb-rice-card,
.row > [class*="col-"] > .market-card,
.row > [class*="col-"] > .jb-trade-capability-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.jb-category-card-body,
.jb-rice-card > div,
.market-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.jb-category-card-body .jb-text-link,
.market-card-body a { margin-top: auto; padding-top: 12px; }
.jb-category-card p { min-height: 0; }
.jb-category-card-media { flex: 0 0 auto; }

/* ---- Premium card finish ---- */
.jb-category-card, .jb-info-card, .jb-value-card, .jb-process-card,
.jb-rice-card, .market-card, .jb-trade-capability-card {
  border-radius: 6px;
  border: 1px solid var(--jb-border);
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.jb-category-card:hover, .jb-info-card:hover, .jb-value-card:hover,
.jb-process-card:hover, .jb-rice-card:hover, .market-card:hover,
.jb-trade-capability-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(29, 50, 48, .13);
  border-color: rgba(0, 153, 137, .35);
}
.jb-category-card-media, .market-card-image { border-radius: 6px 6px 0 0; }

/* ---- Buttons ---- */
.jb-header-action, .jb-btn, button[type="submit"] {
  letter-spacing: 0.03em;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.jb-header-action:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,153,137,.28); }

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--jb-teal);
  outline-offset: 2px;
}

/* ---- Responsive: tablets ---- */
@media (max-width: 991px) {
  .jb-main-header-inner { grid-template-columns: 1fr auto; }
  .jb-header-search { grid-column: 1 / -1; grid-row: 2; margin-bottom: 14px; }
  .jb-about-split, .jb-product-layout { grid-template-columns: 1fr; gap: 36px; }
  .jb-image-stack { min-height: 0; }
  .jb-image-stack .main-img { width: 100%; height: 380px; }
  .jb-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .jb-rice-varieties { grid-template-columns: repeat(2, 1fr); }
  .jb-feature-list { grid-template-columns: 1fr 1fr; }
}

/* ---- Responsive: phones ---- */
@media (max-width: 575px) {
  body { font-size: 15px; }
  .jb-topbar-inner { justify-content: center; text-align: center; }
  .jb-topbar-points { display: none; }
  .jb-brand img { width: 62px; }
  .jb-brand-name { font-size: 16px; }
  .jb-rice-varieties { grid-template-columns: 1fr; }
  .jb-feature-list { grid-template-columns: 1fr; }
  .jb-stat-grid { grid-template-columns: 1fr 1fr; }
  .jb-stat strong { font-size: 26px; }
  .jb-category-card-media { height: 200px; }
  .jb-trade-banner { padding: 64px 0; }
  .jb-form-card { padding: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   POLISH LAYER v2 — global Montserrat enforcement + remaining UI fixes
   ========================================================================== */

/* Force Montserrat on every text element (icon fonts excluded), beating any
   earlier !important element rules from legacy stylesheets. */
body, p, span:not([class*="fa"]):not([class^="ti-"]):not([class*=" ti-"]):not([class^="ion"]):not([class^="icon-"]):not([class*=" icon-"]):not([class^="si-"]):not([class^="ri-"]),
a, h1, h2, h3, h4, h5, h6, div, li, td, th, dt, dd, blockquote, figcaption, small,
strong, em:not([class*="fa"]), b, u, label, legend, input, textarea, select, option, button,
.jb-main-nav, .jb-category-panel {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
i, i::before, i::after,
[class^="fa"], [class*=" fa-"],
[class^="ti-"], [class*=" ti-"],
[class^="icon-"], [class*=" icon-"],
[class^="ion-"], [class*=" ion-"],
[class^="ri-"], [class*=" ri-"],
[class^="si-"], [class*=" si-"] {
  font-family: inherit;
}
i[class^="fa"], i[class*=" fa-"] { font-family: "FontAwesome" !important; }
i[class^="ti-"], i[class*=" ti-"] { font-family: "themify" !important; }
i[class^="icon-"], i[class*=" icon-"] { font-family: "simple-line-icons" !important; }
i[class^="ion-"], i[class*=" ion-"] { font-family: "Ionicons" !important; }
i[class^="ri-"], i[class*=" ri-"] { font-family: "remixicon" !important; }

/* Kill leftover wide tracking from legacy sheets that pushed text out of boxes. */
body, p, span, a, div, li { letter-spacing: normal; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.015em; }

/* ---- Homepage circular stamp: text must sit fully inside the circle ---- */
.jb-image-stack .stamp {
  width: 168px;
  height: 168px;
  padding: 22px 18px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  overflow: hidden;
  right: 4%;
  top: 14px;
}
@media (max-width: 991px) {
  .jb-image-stack .stamp { width: 138px; height: 138px; font-size: 12px; padding: 16px 14px; }
}
@media (max-width: 575px) {
  .jb-image-stack .stamp { width: 118px; height: 118px; font-size: 10.5px; padding: 13px 11px; top: 10px; }
}

/* ---- Quality page cards: never clip their own content ---- */
.jb-quality-card { min-height: 275px; height: auto; }
.jb-quality-card > * { position: relative; z-index: 1; }

/* ---- Card descriptions: if a card clamps text, end cleanly with ellipsis ---- */
.jb-grid-3 .jb-category-card-body p,
.jb-grid-4 .jb-category-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Section eyebrows / small labels: tidy tracking that fits their box ---- */
.jb-section-head span, .jb-eyebrow, .story-eyebrow { letter-spacing: 2.5px; }

/* ---- Generic guard: no fixed-height text boxes anywhere ---- */
p, h1, h2, h3, h4, h5, h6, li, span, a { max-height: none; }

/* ==========================================================================
   POLISH LAYER v3 — Section beautification
   1) Product cards  2) Who We Serve  3) FAQ accordion  4) Process cards
   Appended last: these rules intentionally win over all legacy variants.
   ========================================================================== */

/* ---------------------------------------------------------------
   1) PRODUCT / CATEGORY CARDS (homepage dynamic grid + all pages)
   Clean premium card: full-bleed image, badge on image, tidy body,
   no glass overlay, no negative-margin panel, no fixed clipping.
--------------------------------------------------------------- */
.jb-grid-3 .jb-category-card,
.jb-grid-4 .jb-category-card,
.jb-category-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #fff !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 22px rgba(20, 40, 38, .06) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.jb-grid-3 .jb-category-card:hover,
.jb-grid-4 .jb-category-card:hover,
.jb-category-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 24px 50px rgba(20, 40, 38, .14) !important;
  border-color: rgba(0, 153, 137, .4) !important;
}

.jb-grid-3 .jb-category-card-media,
.jb-grid-4 .jb-category-card-media,
.jb-category-card-media {
  position: relative !important;
  height: 235px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.jb-grid-3 .jb-category-card-media img,
.jb-grid-4 .jb-category-card-media img,
.jb-category-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  transition: transform .55s ease !important;
}
.jb-category-card:hover .jb-category-card-media img { transform: scale(1.07) !important; }

/* Badge: compact pill pinned to the image, never full-width */
.jb-grid-3 .jb-category-badge,
.jb-grid-4 .jb-category-badge,
.jb-category-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  background: rgba(255, 255, 255, .94) !important;
  color: var(--jb-teal-dark) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16) !important;
  backdrop-filter: none !important;
  z-index: 3 !important;
}

/* Body: plain white block below the image — no overlap, no blur */
.jb-grid-3 .jb-category-card-body,
.jb-grid-4 .jb-category-card-body,
.jb-category-card-body {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 22px 22px 20px !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.jb-grid-3 .jb-category-card-body h3,
.jb-grid-4 .jb-category-card-body h3,
.jb-category-card-body h3 {
  margin: 0 0 9px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--jb-purple) !important;
}
.jb-grid-3 .jb-category-card-body p,
.jb-grid-4 .jb-category-card-body p,
.jb-category-card-body p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--jb-muted) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.jb-category-card-body .jb-text-link {
  margin-top: auto !important;
  padding-top: 16px !important;
  color: var(--jb-teal) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.jb-category-card-body .jb-text-link i { transition: transform .25s ease; }
.jb-category-card:hover .jb-text-link i { transform: translateX(5px); }

/* Featured products grid (static homepage variant) — same clean look */
.jb-featured-product {
  background: #fff; border: 1px solid var(--jb-border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  box-shadow: 0 6px 22px rgba(20,40,38,.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.jb-featured-product:hover { transform: translateY(-7px); box-shadow: 0 24px 50px rgba(20,40,38,.14); border-color: rgba(0,153,137,.4); }
.jb-featured-product-image { display: block; height: 225px; overflow: hidden; }
.jb-featured-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.jb-featured-product:hover .jb-featured-product-image img { transform: scale(1.07); }
.jb-featured-product-copy { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.jb-featured-product-copy > span { color: var(--jb-teal-dark); font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; }
.jb-featured-product-copy h3 { margin: 0 0 9px; font-size: 20px; font-weight: 800; color: var(--jb-purple); }
.jb-featured-product-copy p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--jb-muted); }
.jb-featured-product-copy > a { margin-top: auto; padding-top: 16px; color: var(--jb-teal); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------
   2) WHO WE SERVE — balanced split, proper cards, no dead space
--------------------------------------------------------------- */
.jb-buyer-section { padding: 100px 0; background: var(--jb-soft); }
.jb-buyer-section .row { align-items: stretch !important; }
.buyer-image { height: 100%; }
.buyer-image img {
  width: 100%; height: 100%; min-height: 480px; max-height: 640px;
  object-fit: cover; border-radius: 18px;
  box-shadow: 0 24px 55px rgba(20, 40, 38, .14);
}
.buyer-list {
  height: 100%;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px !important;
  align-content: center;
  padding-left: 12px;
}
.buyer-card {
  background: #fff !important;
  border: 1px solid var(--jb-border) !important;
  border-left: 1px solid var(--jb-border) !important;
  border-radius: 14px !important;
  padding: 26px 24px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-shadow: 0 6px 20px rgba(20, 40, 38, .05) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.buyer-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 44px rgba(20, 40, 38, .12) !important;
  border-color: rgba(0, 153, 137, .4) !important;
  background: #fff !important;
}
.buyer-card i {
  width: 52px !important; height: 52px !important;
  border-radius: 12px !important;
  background: rgba(0, 153, 137, .1) !important;
  color: var(--jb-teal) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 21px !important;
  margin: 0 0 16px !important;
  transition: .3s ease !important;
}
.buyer-card:hover i { background: var(--jb-teal) !important; color: #fff !important; }
.buyer-card h4 {
  margin: 0 0 8px !important; font-size: 18px !important; font-weight: 800 !important;
  color: var(--jb-purple) !important; line-height: 1.3 !important;
}
.buyer-card:hover h4 { color: var(--jb-purple) !important; }
.buyer-card p { margin: 0 !important; font-size: 14px !important; line-height: 1.75 !important; color: var(--jb-muted) !important; }
.buyer-card:hover p { color: var(--jb-muted) !important; }

@media (max-width: 991px) {
  .jb-buyer-section { padding: 70px 0; }
  .buyer-image { margin-bottom: 30px; }
  .buyer-image img { min-height: 320px; max-height: 420px; }
  .buyer-list { padding-left: 0; }
}
@media (max-width: 575px) {
  .buyer-list { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   3) FAQ ACCORDION — toggle icon never overlaps the question
--------------------------------------------------------------- */
.jb-home-faq-list { border: 0 !important; background: transparent !important; }
.jb-home-faq-list details {
  background: #fff;
  border: 1px solid var(--jb-border) !important;
  border-left: 1px solid var(--jb-border) !important;
  border-radius: 14px !important;
  margin-bottom: 14px;
  padding: 0 !important;
  overflow: hidden;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.jb-home-faq-list details:last-child { margin-bottom: 0; }
.jb-home-faq-list details:hover { border-color: rgba(0, 153, 137, .4) !important; box-shadow: 0 12px 30px rgba(20, 40, 38, .08); }
.jb-home-faq-list details[open] {
  border-left: 1px solid var(--jb-border) !important;
  border-color: rgba(0, 153, 137, .5) !important;
  box-shadow: 0 14px 34px rgba(20, 40, 38, .09);
}
.jb-home-faq-list summary {
  padding: 21px 84px 21px 26px !important;   /* right space reserved for the icon */
  font-size: 16.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--jb-purple) !important;
}
.jb-home-faq-list summary::after {
  right: 22px !important;
  width: 36px !important; height: 36px !important;
  font-size: 19px !important;
  background: rgba(0, 153, 137, .1) !important;
  color: var(--jb-teal) !important;
}
.jb-home-faq-list details[open] summary::after { background: var(--jb-teal) !important; color: #fff !important; }
.jb-home-faq-list details p {
  padding: 0 84px 22px 26px !important;
  margin: 0 !important;
  color: var(--jb-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.85 !important;
}
@media (max-width: 575px) {
  .jb-home-faq-list summary { padding: 18px 66px 18px 18px !important; font-size: 15px !important; }
  .jb-home-faq-list summary::after { right: 14px !important; width: 32px !important; height: 32px !important; }
  .jb-home-faq-list details p { padding: 0 18px 18px 18px !important; }
}

/* ---------------------------------------------------------------
   4) REVIEW PROCESS CARDS (quality page) — full-bleed image,
      gold step number bridging image & body, balanced text
--------------------------------------------------------------- */
.jb-quality-process-grid { gap: 26px !important; }
.jb-quality-process-grid .process-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 0 28px !important;
  background: #fff !important;
  border: 1px solid var(--jb-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .07) !important;
}
.jb-quality-process-grid .process-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 52px rgba(15, 23, 42, .14) !important;
  border-color: rgba(213, 165, 44, .55) !important;
}
.jb-quality-process-grid .process-image {
  width: 100% !important;
  height: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.jb-quality-process-grid .process-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.jb-quality-process-grid .process-step {
  width: 58px !important; height: 58px !important;
  margin: -29px auto 16px !important;
  background: var(--jb-gold) !important;
  color: #241c46 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  border: 5px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 24px rgba(213, 165, 44, .35) !important;
}
.jb-quality-process-grid .process-card h3 {
  margin: 0 0 10px !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--jb-purple) !important;
  text-align: center !important;
}
.jb-quality-process-grid .process-card p {
  margin: 0 !important;
  padding: 0 26px !important;
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  color: var(--jb-muted) !important;
  text-align: center !important;
}

/* ---------------------------------------------------------------
   Site-wide refinements
--------------------------------------------------------------- */
.jb-label, .jb-section-head .jb-label {
  display: inline-flex; align-items: center;
  padding: 7px 18px; border-radius: 100px;
  background: rgba(0, 153, 137, .09);
  color: var(--jb-teal-dark);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 2.2px; text-transform: uppercase;
}
.jb-section-head h2, .jb-title { line-height: 1.2; }
.jb-section-head p, .jb-lead { color: var(--jb-muted); }

/* Home export-process strip: consistent card finish */
.export-process .process-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 30px 22px; text-align: center; height: 100%;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.export-process .process-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); border-color: rgba(213,165,44,.5); }
.export-process .process-card i {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(213,165,44,.16); color: var(--jb-gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
}
.export-process .process-card h4 { color: #fff; font-size: 17.5px; font-weight: 700; margin: 0 0 8px; }
.export-process .process-card p { color: rgba(255,255,255,.72); font-size: 13.5px; line-height: 1.7; margin: 0; }

/* ---- v3.1: neutralise every legacy height cap on product cards ---- */
.jb-grid-3 article.jb-category-card,
.jb-grid-4 article.jb-category-card,
.jb-grid-3 .jb-category-card,
.jb-grid-4 .jb-category-card,
article.jb-category-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}
.jb-grid-3 .jb-category-card .jb-category-card-media,
.jb-grid-4 .jb-category-card .jb-category-card-media,
.jb-category-card .jb-category-card-media {
  height: 235px !important;
  min-height: 235px !important;
  max-height: 235px !important;
  flex: 0 0 235px !important;
}
.jb-grid-3 .jb-category-card .jb-category-card-body,
.jb-grid-4 .jb-category-card .jb-category-card-body,
.jb-category-card .jb-category-card-body {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}
/* Keep the green pill CTA but guarantee clear space above it */
.jb-grid-3 .jb-category-card .jb-text-link,
.jb-grid-4 .jb-category-card .jb-text-link,
.jb-category-card .jb-text-link {
  position: static !important;
  margin-top: 16px !important;
  align-self: flex-start !important;
}
.jb-category-card .jb-category-card-body p { margin-bottom: 0 !important; }
@media (max-width: 575px) {
  .jb-grid-3 .jb-category-card .jb-category-card-media,
  .jb-category-card .jb-category-card-media {
    height: 200px !important; min-height: 200px !important; max-height: 200px !important; flex-basis: 200px !important;
  }
}

/* ==========================================================================
   POLISH LAYER v4 — Brand logo treatment
   Gold logo on a deep-purple chip in the white header; native transparent
   gold logo on the dark footer (no white/black box).
   ========================================================================== */

/* ---- Header: dark chip behind the gold logo ---- */
.jb-brand img {
  width: 128px !important;
  height: auto !important;
  padding: 9px 14px !important;
  background: linear-gradient(135deg, #2e2358 0%, var(--jb-purple) 55%, #1a1238 100%) !important;
  border: 1px solid rgba(213, 165, 44, .35) !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 18px rgba(41, 31, 81, .22) !important;
  object-fit: contain !important;
}
.jb-brand:hover img { box-shadow: 0 10px 26px rgba(41, 31, 81, .32) !important; }

/* ---- Footer: transparent gold logo directly on the dark footer ---- */
.jb-footer .jb-footer-brand img,
.jb-footer .jb-footer-company .jb-footer-brand img {
  width: 158px !important;
  max-width: 158px !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35));
}
/* With the wordmark inside the logo itself, tuck the text version neatly */
.jb-footer-brand { gap: 16px !important; }
.jb-footer-brand strong { font-size: 17px !important; line-height: 1.25 !important; letter-spacing: .2px; }

/* ---- Mobile header: keep the chip compact ---- */
@media (max-width: 991px) {
  .jb-brand img { width: 106px !important; padding: 7px 11px !important; }
}
@media (max-width: 575px) {
  .jb-brand img { width: 118px !important; padding: 7px 11px !important; border-radius: 9px !important; }
}

/* ---- v4.1 micro-fixes ---- */
.jb-header-action i, .jb-header-action .ti-email { margin-right: 8px; }
.jb-footer-social-wrap > span,
.jb-footer .jb-footer-social-wrap span,
.jb-footer h4, .jb-footer h3 { color: #fff !important; }
.jb-footer-social-wrap > span { display: inline-block; font-weight: 700; letter-spacing: .4px; margin-bottom: 12px; opacity: .92; }

/* ==========================================================================
   POLISH LAYER v5 — Dark premium header (logo chip removed), larger logo,
   and a branded page preloader.
   ========================================================================== */

/* ---- Header goes deep purple so the gold logo sits naturally ---- */
.jb-main-header {
  background: linear-gradient(120deg, #241c46 0%, var(--jb-purple) 55%, #1b1340 100%) !important;
  border-bottom: 1px solid rgba(213, 165, 44, .22);
}

/* Logo: no chip, no box — just the gold mark, larger */
.jb-brand img {
  width: 182px !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35));
}
.jb-brand:hover img { box-shadow: none !important; }

/* Brand text on dark */
.jb-brand-name { color: #fff !important; }
.jb-brand-tagline { color: var(--jb-gold) !important; }

/* Search field tuned for the dark header */
.jb-header-search input {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  color: #fff !important;
  transition: background .25s ease, border-color .25s ease;
}
.jb-header-search input::placeholder { color: rgba(255, 255, 255, .62) !important; }
.jb-header-search input:focus {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(213, 165, 44, .55) !important;
}
.jb-header-search button { color: var(--jb-gold) !important; }

/* CTA: gold on purple — ties the header to the logo */
.jb-header-action {
  background: var(--jb-gold) !important;
  color: #241c46 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}
.jb-header-action:hover {
  background: #e6b93e !important;
  color: #241c46 !important;
  box-shadow: 0 10px 24px rgba(213, 165, 44, .35) !important;
}

/* Mobile hamburger on dark header */
.jb-mobile-toggle { background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 8px !important; color: var(--jb-gold) !important; }

@media (max-width: 991px) {
  .jb-brand img { width: 156px !important; }
}
@media (max-width: 575px) {
  .jb-brand img { width: 138px !important; }
  .jb-main-header-inner { min-height: 74px; }
}

/* ==========================================================================
   BRANDED PRELOADER — gold logo on deep purple, soft pulse + gold sweep bar
   ========================================================================== */
#jb-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 480px at 50% 30%, rgba(213, 165, 44, .12), transparent 60%),
    linear-gradient(135deg, #1b1340 0%, #241c46 45%, var(--jb-purple) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility .55s ease;
}
#jb-preloader.jb-preloader-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.jb-preloader-inner { text-align: center; }
.jb-preloader-inner img {
  width: min(250px, 62vw);
  height: auto;
  filter: drop-shadow(0 10px 32px rgba(0, 0, 0, .45));
  animation: jbLogoPulse 1.9s ease-in-out infinite;
}
.jb-preloader-bar {
  width: min(220px, 55vw);
  height: 3px;
  margin: 30px auto 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
  position: relative;
}
.jb-preloader-bar span {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 42%;
  border-radius: 100px;
  background: linear-gradient(90deg, transparent, var(--jb-gold) 35%, #f0cf6e 55%, var(--jb-gold) 70%, transparent);
  animation: jbBarSweep 1.25s cubic-bezier(.45, .05, .55, .95) infinite;
}
.jb-preloader-tag {
  margin-top: 18px;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}
@keyframes jbLogoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.045); opacity: .92; }
}
@keyframes jbBarSweep {
  0%   { left: -45%; }
  100% { left: 103%; }
}
@media (prefers-reduced-motion: reduce) {
  .jb-preloader-inner img, .jb-preloader-bar span { animation: none; }
}

/* =========================================
   PRODUCT DETAILS BUTTON - JB THEME
   ========================================= */

.jb-category-card .jb-text-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 20px !important;
    min-height: 48px;

    background-color: #0aa35c !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 25px;

    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none !important;

    transition: all 0.25s ease;
}

/* Button text + arrow */
.jb-category-card .jb-text-link,
.jb-category-card .jb-text-link i {
    color: #ffffff !important;
}

/* =========================================
   HOVER - WARM YELLOWISH THEME
   ========================================= */

.jb-category-card .jb-text-link:hover,
.jb-category-card .jb-text-link:focus {
    background-color: #d5a928 !important;
    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(213, 169, 40, 0.25);
}

/* Keep text visible on hover */
.jb-category-card .jb-text-link:hover,
.jb-category-card .jb-text-link:hover i,
.jb-category-card .jb-text-link:focus,
.jb-category-card .jb-text-link:focus i {
    color: #ffffff !important;
}

/* Arrow animation */
.jb-category-card .jb-text-link i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.jb-category-card .jb-text-link:hover i {
    transform: translateX(4px);
}
.jb-category-card .jb-text-link {
    padding: 11px 18px !important;
    min-height: 0 !important;
    height: auto !important;

    font-size: 13px !important;
    border-radius: 24px !important;
    gap: 8px !important;
}

/* =========================================
   FEATURED PRODUCT CARDS
   ========================================= */

/* Category label - background only behind text */
.jb-featured-product-copy > span {
    display: inline-block !important;
    width: fit-content !important;

    padding: 5px 10px !important;
    margin: 0 0 9px !important;

    background: #e8f5ee !important;
    color: #078b50 !important;

    border-radius: 5px !important;

    font-family: "Montserrat", sans-serif;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-transform: uppercase;
    letter-spacing: 0.4px;
}


/* =========================================
   VIEW DETAILS BUTTON
   ========================================= */

.jb-featured-product-copy > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 18px !important;
    min-height: 0 !important;
    height: auto !important;

    background-color: #0aa35c !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 24px !important;

    font-family: "Montserrat", sans-serif;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;

    transition: all 0.25s ease;
}


/* Button text and arrow */
.jb-featured-product-copy > a,
.jb-featured-product-copy > a i {
    color: #ffffff !important;
}


/* =========================================
   BUTTON HOVER
   ========================================= */

.jb-featured-product-copy > a:hover,
.jb-featured-product-copy > a:focus {
    background-color: #d5a928 !important;
    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(213, 169, 40, 0.25);
}


/* Keep text visible on hover */
.jb-featured-product-copy > a:hover,
.jb-featured-product-copy > a:hover i,
.jb-featured-product-copy > a:focus,
.jb-featured-product-copy > a:focus i {
    color: #ffffff !important;
}


/* Arrow animation */
.jb-featured-product-copy > a i {
    font-size: 12px !important;
    transition: transform 0.25s ease;
}

.jb-featured-product-copy > a:hover i {
    transform: translateX(4px);
}

/* =========================================================
   JB HERO - BUTTONS + CERTIFICATIONS
========================================================= */

.jb-hero-bottom {
    display: flex;
    align-items: center;
    gap: 35px;
    width: 100%;
    margin-top: 28px;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.jb-hero-bottom .jb-btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin: 0;
}

.jb-hero-bottom .jb-btn {
    white-space: nowrap;
}


/* ---------------------------------------------------------
   CERTIFICATIONS AREA
--------------------------------------------------------- */

.jb-hero-trust {
    flex: 1;
    min-width: 0;
}

.jb-hero-trust-title {
    display: block;
    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.86);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 1;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   CERTIFICATION ITEMS
--------------------------------------------------------- */

.jb-hero-certifications {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}


.jb-cert-item {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 42px;
    padding: 6px 10px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 7px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}


.jb-cert-item:hover {
    background: rgba(255, 255, 255, 0.19);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   CERTIFICATION LOGO PLACEHOLDER
--------------------------------------------------------- */

.jb-cert-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 29px;

    padding: 0 5px;

    color: #291f51;

    background: #ffffff;

    border-radius: 4px;

    font-size: 7px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.2px;

    text-align: center;
}


.jb-cert-item > span {
    color: #ffffff;

    font-size: 8px;
    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.3px;

    white-space: nowrap;
}


/* =========================================================
   LARGE LAPTOP / TABLET
========================================================= */

@media (max-width: 1199px) {

    .jb-hero-bottom {
        gap: 22px;
    }

    .jb-hero-certifications {
        gap: 5px;
    }

    .jb-cert-item {
        padding: 5px 7px;
    }

    .jb-cert-item > span {
        font-size: 7px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jb-hero-bottom {
        align-items: flex-start;
        gap: 22px;
    }

    .jb-hero-bottom .jb-btn-row {
        flex-wrap: wrap;
    }

    .jb-hero-certifications {
        flex-wrap: wrap;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jb-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .jb-hero-bottom .jb-btn-row {
        width: 100%;
        flex-wrap: wrap;
    }

    .jb-hero-trust {
        width: 100%;
    }

    .jb-hero-certifications {
        flex-wrap: wrap;
        gap: 7px;
    }

    .jb-cert-item {
        min-height: 40px;
        padding: 5px 8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .jb-hero-bottom {
        margin-top: 22px;
    }

    .jb-hero-bottom .jb-btn-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .jb-hero-bottom .jb-btn {
        width: 100%;
        justify-content: center;
    }

    .jb-hero-trust-title {
        font-size: 8px;
        margin-bottom: 9px;
    }

    .jb-hero-certifications {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .jb-cert-item {
        width: 100%;
        justify-content: flex-start;
    }

}
/* =========================================================
   HERO BUTTONS + LARGE CERTIFICATIONS
========================================================= */

.jb-hero-bottom {
    display: flex;
    align-items: center;
    gap: 45px;
    width: 100%;
    margin-top: 32px;
}

.jb-hero-bottom .jb-btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin: 0;
}


/* Certifications */
.jb-hero-trust {
    flex: 1;
    min-width: 0;
}

.jb-hero-trust-title {
    display: block;
    margin-bottom: 10px;

    color: rgba(255,255,255,.9);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.2;

    text-transform: uppercase;
}


/* Certification row */
.jb-hero-certifications {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* Large certification card */
.jb-cert-item {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 58px;
    padding: 8px 14px;

    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 10px;

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

    transition: all .25s ease;
}

.jb-cert-item:hover {
    background: rgba(255,255,255,.23);
    border-color: rgba(255,255,255,.5);
    transform: translateY(-3px);
}


/* Large logo box */
.jb-cert-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    min-width: 52px;
    height: 42px;

    color: #291f51;
    background: #fff;

    border-radius: 6px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}


/* Certification name */
.jb-cert-item > span {
    color: #fff;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: .3px;

    white-space: nowrap;
}


/* =========================================================
   1200px
========================================================= */

@media (max-width: 1200px) {

    .jb-hero-bottom {
        gap: 25px;
    }

    .jb-hero-certifications {
        gap: 7px;
    }

    .jb-cert-item {
        padding: 7px 9px;
    }

    .jb-cert-logo {
        width: 45px;
        min-width: 45px;
        height: 38px;
    }

    .jb-cert-item > span {
        font-size: 9px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jb-hero-bottom {
        align-items: flex-start;
    }

    .jb-hero-certifications {
        flex-wrap: wrap;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jb-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .jb-hero-trust {
        width: 100%;
    }

    .jb-hero-certifications {
        flex-wrap: wrap;
    }

    .jb-cert-item {
        min-height: 55px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .jb-hero-bottom .jb-btn-row {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .jb-hero-bottom .jb-btn {
        width: 100%;
    }

    .jb-hero-certifications {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .jb-cert-item {
        width: 100%;
        min-height: 55px;
    }

    .jb-cert-logo {
        width: 45px;
        min-width: 45px;
        height: 37px;
    }

}
/* =========================================================
   HERO BUTTONS + CERTIFICATIONS — PERFECT ALIGNMENT
========================================================= */

.jb-hero-bottom {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 42px;
    margin-top: 32px;
}


/* Buttons */
.jb-hero-bottom .jb-btn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin: 0;
}

.jb-hero-bottom .jb-btn {
    white-space: nowrap;
}


/* Certification wrapper */
.jb-hero-trust {
    position: relative;
    flex: 1;
    min-width: 0;
}


/* Heading sits ABOVE the cards */
.jb-hero-trust-title {
    position: absolute;
    left: 0;
    bottom: calc(100% + 9px);

    display: block;
    margin: 0;

    color: rgba(255,255,255,.92);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 1;

    white-space: nowrap;
    text-transform: uppercase;
}


/* Certification cards */
.jb-hero-certifications {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Individual certification */
.jb-cert-item {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 60px;
    padding: 8px 13px;

    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 10px;

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

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.jb-cert-item:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.5);
    transform: translateY(-2px);
}


/* Logo */
.jb-cert-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    min-width: 50px;
    height: 42px;

    color: #291f51;
    background: #fff;

    border-radius: 6px;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    text-align: center;
}


/* Text */
.jb-cert-item > span {
    color: #fff;

    font-size: 10px;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: .2px;

    white-space: nowrap;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .jb-hero-bottom {
        gap: 25px;
    }

    .jb-hero-certifications {
        gap: 6px;
    }

    .jb-cert-item {
        gap: 7px;
        padding: 7px 9px;
    }

    .jb-cert-logo {
        width: 44px;
        min-width: 44px;
        height: 37px;
    }

    .jb-cert-item > span {
        font-size: 8px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .jb-hero-bottom {
        align-items: center;
        gap: 20px;
    }

    .jb-hero-certifications {
        flex-wrap: wrap;
    }

    .jb-hero-trust-title {
        position: static;
        margin-bottom: 8px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .jb-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .jb-hero-trust {
        width: 100%;
    }

    .jb-hero-trust-title {
        position: static;
        margin-bottom: 9px;
    }

    .jb-hero-certifications {
        flex-wrap: wrap;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .jb-hero-bottom .jb-btn-row {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .jb-hero-bottom .jb-btn {
        width: 100%;
        justify-content: center;
    }

    .jb-hero-certifications {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .jb-cert-item {
        width: 100%;
        min-height: 55px;
    }

}
/* =========================================================
   STICKY NAVIGATION ON SCROLL
========================================================= */

.jb-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}

/* Make sure the header layers don't interfere */
.jb-topbar,
.jb-main-header {
    position: relative;
    z-index: 100;
}
/* =========================================================
   JB STICKY NAVIGATION
========================================================= */

.jb-nav-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 999999 !important;

    margin: 0 !important;
}


/* Keep navigation visible above everything */
.jb-nav-fixed .jb-nav-inner {
    position: relative;
    z-index: 1000000;
}


/* Hide topbar when scrolling */
.jb-topbar-scrolled {
    display: none !important;
}


/* Hide main header when scrolling */
.jb-main-header-scrolled {
    display: none !important;
}


/* Space left behind fixed navigation */
.jb-nav-placeholder {
    display: block;
    width: 100%;
}

/* =========================================================
   FINAL CATEGORY CARD IMAGE FIX
========================================================= */

.jb-grid-4 .jb-category-card {
    overflow: hidden !important;
}

.jb-grid-4 .jb-category-card-media {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    line-height: 0 !important;
}

.jb-grid-4 .jb-category-card-media img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    vertical-align: top !important;
}


/* Badge stays ON the image */
.jb-grid-4 .jb-category-card-media .jb-category-badge {
    position: absolute !important;

    top: 14px !important;
    left: 14px !important;

    z-index: 10 !important;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    padding: 7px 15px !important;
    margin: 0 !important;

    background: #fff !important;
    color: #007c6f !important;

    border-radius: 20px !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: 1px !important;
}


/* Body starts immediately after image */
.jb-grid-4 .jb-category-card-media + .jb-category-card-body {
    margin-top: 0 !important;
}
/* Hero certifications — repositioned above buttons + highlighted styling */

.jb-hero-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

.jb-hero-trust {
  order: -1;
}

.jb-hero-trust-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
}

.jb-hero-certifications {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.jb-cert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.jb-cert-item:hover {
  background: rgba(255, 191, 0, 0.14);
  border-color: rgba(255, 191, 0, 0.55);
  transform: translateY(-2px);
}

.jb-cert-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: #ffbf00;
  color: #1a1330;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.jb-cert-item span {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.jb-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 767px) {
  .jb-hero-certifications {
    gap: 9px;
  }

  .jb-cert-item {
    padding: 7px 12px;
  }

  .jb-cert-logo {
    min-width: 34px;
    height: 22px;
    font-size: 10px;
  }

  .jb-cert-item span {
    font-size: 12px;
  }
}
/* Left-align hero certifications + buttons (override centered theme defaults) */

.jb-hero-content {
  text-align: left !important;
  align-items: flex-start !important;
}

.jb-hero-bottom {
  align-items: flex-start !important;
  text-align: left !important;
}

.jb-hero-trust {
  width: 100%;
  text-align: left !important;
}

.jb-hero-trust-title {
  text-align: left !important;
}

.jb-hero-certifications {
  justify-content: flex-start !important;
  margin: 0 !important;
}

.jb-btn-row {
  justify-content: flex-start !important;
  margin: 0 !important;
}

/* Hero text visibility */
.jb-home-hero .jb-hero-content {
    color: #182033 !important;
}

.jb-home-hero .jb-eyebrow {
    color: #683010 !important;
    font-weight: 700 !important;
}

.jb-home-hero h1 {
    color: #182033 !important;
    text-shadow: none !important;
}

.jb-home-hero p {
    color: #182033 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

.jb-home-hero .jb-hero-trust-title {
    color: #182033 !important;
}

.jb-home-hero .jb-cert-item span {
    color: #182033 !important;
}

/* Hero content visibility */
.jb-home-hero .jb-hero-content {
    color: #182033 !important;
}

/* Main heading */
.jb-home-hero h1 {
    color: #182033 !important;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.35) !important;
}

/* Highlighted heading */
.jb-home-hero .jb-banner-highlight {
    color: #d99b00 !important;
    text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3) !important;
}

/* Description */
.jb-home-hero p {
    color: #182033 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.65) !important;
}

/* Eyebrow */
.jb-home-hero .jb-eyebrow {
    color: #683010 !important;
    font-weight: 700 !important;
}

/* Certification heading */
.jb-home-hero .jb-hero-trust-title {
    color: #182033 !important;
    font-weight: 700 !important;
}

/* Certification names */
.jb-home-hero .jb-cert-item span {
    color: #182033 !important;
    font-weight: 600 !important;
}

.jb-home-hero .jb-hero-content {
    background: rgba(255, 255, 255, 0.18);
    padding: 28px 32px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* =========================================================
   HERO BOTTOM
========================================================= */

.jb-hero-bottom {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 25px;
}


/* =========================================================
   CERTIFICATIONS
========================================================= */

.jb-hero-trust {
    flex: 1 1 auto;
    min-width: 0;
}


.jb-hero-trust-title {
    display: block;
    margin-bottom: 12px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;

    color: #17223b;
}


.jb-hero-certifications {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


/* Certification item */

.jb-cert-item {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 5px 11px 5px 5px;

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 30px;

    background: rgba(255, 255, 255, 0.18);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition: all 0.3s ease;
}


.jb-cert-item:hover {
    transform: translateY(-3px);

    background: rgba(255, 255, 255, 0.3);

    border-color: #d99a00;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}


.jb-cert-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 43px;
    height: 32px;

    padding: 0 7px;

    border-radius: 18px;

    background: #f4b400;

    color: #17223b;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.4px;
}


.jb-cert-item span {
    font-size: 11px;
    font-weight: 600;

    color: #17223b;

    white-space: nowrap;
}


/* =========================================================
   LOGO BOX
========================================================= */

.jb-hero-logo-box {
    position: relative;

    width: 145px;
    height: 105px;

    flex: 0 0 145px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 22px;

    /* Dark glass background */
    background:
        linear-gradient(
            135deg,
            rgba(16, 25, 48, 0.82),
            rgba(16, 25, 48, 0.62)
        );

    border: 1px solid rgba(218, 158, 0, 0.65);

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

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(218, 158, 0, 0.08);

    overflow: hidden;

    z-index: 5;
}


/* Decorative glow inside box */

.jb-hero-logo-box::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    top: -45px;
    right: -25px;

    border-radius: 50%;

    background: rgba(244, 180, 0, 0.18);

    filter: blur(20px);

    z-index: 0;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.jb-hero-logo-box img {
    position: relative;

    z-index: 5;

    width: 82px;
    height: auto;

    object-fit: contain;

    filter:
        brightness(1.15)
        drop-shadow(0 0 5px rgba(255, 193, 7, 0.8))
        drop-shadow(0 0 14px rgba(255, 193, 7, 0.45));

    animation: jbLogoFloat 3s ease-in-out infinite;
}


/* =========================================================
   LOGO GLOW
========================================================= */

.jb-logo-glow {
    position: absolute;

    width: 65px;
    height: 65px;

    border-radius: 50%;

    background: rgba(218, 158, 0, 0.28);

    filter: blur(18px);

    z-index: 1;

    animation: jbLogoGlow 2.5s ease-in-out infinite;
}


/* =========================================================
   ROTATING CIRCLES
========================================================= */

.jb-logo-circle {
    position: absolute;

    border-radius: 50%;

    z-index: 2;

    pointer-events: none;
}


/* Outer */

.jb-logo-circle-1 {
    width: 94px;
    height: 94px;

    border: 1px solid rgba(218, 158, 0, 0.75);

    border-top-color: #f4b400;

    border-right-color: transparent;

    animation:
        jbLogoRotate
        7s
        linear
        infinite;
}


/* Inner */

.jb-logo-circle-2 {
    width: 76px;
    height: 76px;

    border: 1px solid rgba(255, 255, 255, 0.4);

    border-bottom-color: #f4b400;

    border-left-color: transparent;

    animation:
        jbLogoRotateReverse
        5s
        linear
        infinite;
}


/* =========================================================
   PARTICLES
========================================================= */

.jb-logo-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #f4b400;

    box-shadow:
        0 0 6px #f4b400,
        0 0 14px rgba(244, 180, 0, 0.7);

    z-index: 6;
}


.particle-1 {
    top: 7px;
    left: 70px;

    animation:
        jbParticlePulse
        1.8s
        infinite;
}


.particle-2 {
    right: 20px;
    top: 50px;

    animation:
        jbParticlePulse
        1.8s
        0.45s
        infinite;
}


.particle-3 {
    bottom: 7px;
    left: 70px;

    animation:
        jbParticlePulse
        1.8s
        0.9s
        infinite;
}


.particle-4 {
    left: 20px;
    top: 50px;

    animation:
        jbParticlePulse
        1.8s
        1.35s
        infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes jbLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


@keyframes jbLogoGlow {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.15);
    }
}


@keyframes jbLogoRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes jbLogoRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


@keyframes jbParticlePulse {

    0%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}


/* =========================================================
   EXISTING BUTTONS
   DON'T CHANGE THEIR DESIGN
========================================================= */

.jb-btn-row {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 0 0 auto;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .jb-hero-bottom {
        gap: 15px;
    }

    .jb-hero-logo-box {
        width: 125px;
        flex-basis: 125px;
    }

    .jb-hero-logo-box img {
        width: 72px;
    }

}


@media (max-width: 900px) {

    .jb-hero-bottom {
        flex-wrap: wrap;
    }

    .jb-hero-trust {
        flex: 1 1 100%;
    }

    .jb-hero-logo-box {
        margin-left: auto;
    }

    .jb-btn-row {
        flex: 0 0 auto;
    }

}


@media (max-width: 767px) {

    .jb-hero-bottom {
        display: grid;

        grid-template-columns: 1fr 110px;

        gap: 15px;

        align-items: center;
    }

    .jb-hero-trust {
        grid-column: 1;
    }

    .jb-hero-logo-box {
        grid-column: 2;

        grid-row: 1;

        width: 110px;
        height: 95px;

        margin: 0;
    }

    .jb-hero-logo-box img {
        width: 65px;
    }

    .jb-btn-row {
        grid-column: 1 / -1;

        grid-row: 2;

        width: 100%;
    }

}


@media (max-width: 480px) {

    .jb-hero-bottom {
        grid-template-columns: 1fr 90px;
    }

    .jb-hero-logo-box {
        width: 90px;
        height: 85px;
    }

    .jb-hero-logo-box img {
        width: 58px;
    }

}
/* =========================================================
   FINAL FIX
   CERTIFICATIONS LEFT + LOGO RIGHT
   BUTTONS STAY BELOW
========================================================= */

.jb-hero-bottom {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 150px !important;
    grid-template-rows: auto auto !important;

    align-items: center !important;

    column-gap: 25px !important;
    row-gap: 20px !important;

    width: 100% !important;
}


/* Certifications stay on LEFT */

.jb-hero-bottom .jb-hero-trust {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: auto !important;
    min-width: 0 !important;

    flex: none !important;
}


/* Logo goes to RIGHT of certifications */

.jb-hero-bottom .jb-hero-logo-box {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 150px !important;
    height: 105px !important;

    margin: 0 !important;

    justify-self: end !important;

    flex: none !important;
}


/* Buttons stay BELOW */

.jb-hero-bottom .jb-btn-row {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;

    width: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    flex: none !important;
}


/* =========================================================
   TABLET / SMALL SCREEN
========================================================= */

@media (max-width: 800px) {

    .jb-hero-bottom {
        grid-template-columns: minmax(0, 1fr) 125px !important;

        column-gap: 15px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        width: 125px !important;
        height: 100px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 75px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .jb-hero-bottom {
        grid-template-columns: minmax(0, 1fr) 105px !important;

        column-gap: 10px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        width: 105px !important;
        height: 90px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 65px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

    .jb-hero-bottom {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    .jb-hero-bottom .jb-hero-trust {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        grid-column: 1 !important;
        grid-row: 2 !important;

        justify-self: center !important;
    }

    .jb-hero-bottom .jb-btn-row {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

}
/* =========================================================
   BIGGER + BETTER POSITIONED LOGO
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {
    width: 190px !important;
    height: 135px !important;

    flex: 0 0 190px !important;

    /* Pull logo slightly toward the certifications */
    margin-right: 35px !important;
    margin-left: 5px !important;

    justify-self: end !important;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 25, 48, 0.88),
            rgba(16, 25, 48, 0.68)
        );

    border: 1px solid rgba(218, 158, 0, 0.7);

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

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.3),
        inset 0 0 25px rgba(218, 158, 0, 0.1);

    overflow: hidden;
}


/* Bigger actual logo */

.jb-hero-bottom .jb-hero-logo-box img {
    width: 115px !important;
    max-width: 115px !important;
    height: auto;

    position: relative;
    z-index: 5;

    object-fit: contain;

    filter:
        brightness(1.2)
        drop-shadow(0 0 6px rgba(255, 193, 7, 0.9))
        drop-shadow(0 0 18px rgba(255, 193, 7, 0.5));

    animation: jbLogoFloat 3s ease-in-out infinite;
}


/* Bigger outer ring */

.jb-hero-bottom .jb-logo-circle-1 {
    width: 120px !important;
    height: 120px !important;
}


/* Bigger inner ring */

.jb-hero-bottom .jb-logo-circle-2 {
    width: 98px !important;
    height: 98px !important;
}


/* Bigger glow */

.jb-hero-bottom .jb-logo-glow {
    width: 90px !important;
    height: 90px !important;
}


/* =========================================================
   MOVE LOGO SLIGHTLY LEFT
========================================================= */

@media (min-width: 901px) {

    .jb-hero-bottom .jb-hero-logo-box {
        transform: translateX(-20px);
    }

}

/* =========================================================
   FINAL JB LOGO DESIGN
   No animation / Bigger / Better aligned
========================================================= */


/* Main hero bottom layout */

.jb-hero-bottom {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 220px !important;
    grid-template-rows: auto auto !important;

    column-gap: 25px !important;
    row-gap: 20px !important;

    align-items: center !important;
}


/* =========================================================
   CERTIFICATIONS
========================================================= */

.jb-hero-bottom .jb-hero-trust {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: auto !important;
    margin: 0 !important;
}


/* =========================================================
   LOGO
   Spans certification + button height
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;

    width: 190px !important;
    height: 190px !important;

    margin: 0 auto !important;

    position: relative !important;

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

    justify-self: center !important;
    align-self: center !important;

    flex: none !important;

    /* LIGHT GLASS BACKGROUND */
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0.58)
        ) !important;

    border: 1px solid rgba(217, 154, 0, 0.65) !important;

    border-radius: 50% !important;

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

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18),
        inset 0 0 25px rgba(255, 255, 255, 0.4) !important;

    overflow: visible !important;

    transform: none !important;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box img {
    position: relative !important;

    z-index: 10 !important;

    width: 145px !important;
    max-width: 145px !important;

    height: auto !important;

    object-fit: contain !important;

    /* NO ANIMATION */
    animation: none !important;
    transform: none !important;

    /* Make gold logo stronger */
    filter:
        brightness(1.15)
        contrast(1.15)
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) !important;
}


/* =========================================================
   REMOVE OLD GLOW
========================================================= */

.jb-hero-bottom .jb-logo-glow {
    display: none !important;
}


/* =========================================================
   REMOVE OLD ROTATING CIRCLES
========================================================= */

.jb-hero-bottom .jb-logo-circle,
.jb-hero-bottom .jb-logo-ring {
    display: none !important;
}


/* =========================================================
   REMOVE PARTICLES
========================================================= */

.jb-hero-bottom .jb-logo-particle,
.jb-hero-bottom .jb-logo-dot {
    display: none !important;
}


/* =========================================================
   SMALL GOLD BORDER DETAIL
========================================================= */

.jb-hero-bottom .jb-hero-logo-box::before {
    content: "";

    position: absolute;

    inset: 9px;

    border: 1px solid rgba(217, 154, 0, 0.55);

    border-radius: 50%;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   BUTTONS
   KEEP THEM IN THEIR CURRENT POSITION
========================================================= */

.jb-hero-bottom .jb-btn-row {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;

    flex: none !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1101px) {

    .jb-hero-bottom {
        grid-template-columns: minmax(0, 1fr) 220px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        width: 200px !important;
        height: 200px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 155px !important;
        max-width: 155px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .jb-hero-bottom {
        grid-template-columns: minmax(0, 1fr) 190px !important;

        column-gap: 15px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        width: 170px !important;
        height: 170px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 130px !important;
        max-width: 130px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .jb-hero-bottom {
        grid-template-columns: minmax(0, 1fr) 140px !important;

        column-gap: 10px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        width: 125px !important;
        height: 125px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 95px !important;
        max-width: 95px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jb-hero-bottom {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    .jb-hero-bottom .jb-hero-trust {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 135px !important;
        height: 135px !important;

        justify-self: center !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 100px !important;
        max-width: 100px !important;
    }

    .jb-hero-bottom .jb-btn-row {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

}
/* =========================================================
   JB HERO - FINAL LOGO DESIGN
   Large right-side logo + elegant gold animation
========================================================= */


/* ---------------------------------------------------------
   HERO BOTTOM LAYOUT
--------------------------------------------------------- */

.jb-hero-bottom {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 330px !important;
    grid-template-rows: auto auto !important;

    column-gap: 20px !important;
    row-gap: 18px !important;

    align-items: center !important;

    width: 100% !important;
}


/* ---------------------------------------------------------
   CERTIFICATIONS
--------------------------------------------------------- */

.jb-hero-bottom .jb-hero-trust {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: auto !important;
    margin: 0 !important;

    align-self: center !important;
}


/* ---------------------------------------------------------
   LOGO AREA
--------------------------------------------------------- */

.jb-hero-bottom .jb-hero-logo-box {

    grid-column: 2 !important;
    grid-row: 1 / 3 !important;

    width: 285px !important;
    height: 285px !important;

    margin: 0 !important;

    justify-self: center !important;
    align-self: center !important;

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    /* Transparent white glass */
    background:
        radial-gradient(
            circle at 45% 40%,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.78) 45%,
            rgba(255, 255, 255, 0.58) 100%
        ) !important;

    border: 2px solid rgba(214, 157, 0, 0.85) !important;

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

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.22),
        inset 0 0 30px rgba(255, 255, 255, 0.5) !important;

    overflow: visible !important;

    z-index: 5 !important;
}


/* ---------------------------------------------------------
   GOLD OUTER RING
--------------------------------------------------------- */

.jb-hero-logo-box::before {

    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    border: 2px solid rgba(218, 158, 0, 0.65);

    z-index: 1;

    pointer-events: none;
}


/* ---------------------------------------------------------
   SECOND INNER RING
--------------------------------------------------------- */

.jb-hero-logo-box::after {

    content: "";

    position: absolute;

    inset: 23px;

    border-radius: 50%;

    border: 1px solid rgba(218, 158, 0, 0.35);

    box-shadow:
        0 0 15px rgba(218, 158, 0, 0.15);

    z-index: 1;

    pointer-events: none;
}


/* ---------------------------------------------------------
   LOGO IMAGE
--------------------------------------------------------- */

.jb-hero-bottom .jb-hero-logo-box img {

    position: relative !important;

    z-index: 10 !important;

    width: 205px !important;

    max-width: 205px !important;

    height: auto !important;

    object-fit: contain !important;

    animation: jbLogoBreathing 3.5s ease-in-out infinite !important;

    filter:
        brightness(1.08)
        contrast(1.08)
        drop-shadow(0 3px 5px rgba(0, 0, 0, 0.18))
        drop-shadow(0 0 12px rgba(218, 158, 0, 0.28)) !important;
}


/* ---------------------------------------------------------
   SOFT GOLD GLOW
--------------------------------------------------------- */

.jb-hero-logo-box .jb-logo-glow {

    display: block !important;

    position: absolute;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(218, 158, 0, 0.22) 0%,
            rgba(218, 158, 0, 0.08) 45%,
            transparent 72%
        );

    filter: blur(12px);

    z-index: 2;

    animation: jbLogoGlow 3.5s ease-in-out infinite;
}


/* =========================================================
   ANIMATED GOLD LIGHT
   A small highlight moves around the circle
========================================================= */

.jb-hero-logo-box .jb-logo-ring {

    display: block !important;

    position: absolute;

    width: 245px;
    height: 245px;

    border-radius: 50%;

    border: 2px solid transparent;

    border-top-color: rgba(244, 180, 0, 0.95);

    border-right-color: rgba(244, 180, 0, 0.25);

    z-index: 4;

    animation:
        jbGoldRingRotate
        8s
        linear
        infinite;

    pointer-events: none;
}


/* Second animation ring */

.jb-hero-logo-box .jb-logo-ring-two {

    display: block !important;

    position: absolute;

    width: 265px;
    height: 265px;

    border-radius: 50%;

    border: 1px solid transparent;

    border-bottom-color: rgba(218, 158, 0, 0.7);

    border-left-color: rgba(218, 158, 0, 0.25);

    z-index: 3;

    animation:
        jbGoldRingReverse
        11s
        linear
        infinite;

    pointer-events: none;
}


/* =========================================================
   ANIMATED LIGHT DOTS
========================================================= */

.jb-hero-logo-box .jb-logo-dot {

    display: block !important;

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #f4b400;

    box-shadow:
        0 0 7px #f4b400,
        0 0 16px rgba(244, 180, 0, 0.8);

    z-index: 12;

    pointer-events: none;
}


/* Top */

.jb-hero-logo-box .jb-logo-dot-one {

    top: 12px;
    left: 50%;

    transform: translateX(-50%);

    animation: jbDotPulse 2s ease-in-out infinite;
}


/* Right */

.jb-hero-logo-box .jb-logo-dot-two {

    right: 12px;
    top: 50%;

    transform: translateY(-50%);

    animation: jbDotPulse 2s ease-in-out 0.5s infinite;
}


/* Bottom */

.jb-hero-logo-box .jb-logo-dot-three {

    bottom: 12px;
    left: 50%;

    transform: translateX(-50%);

    animation: jbDotPulse 2s ease-in-out 1s infinite;
}


/* Left */

.jb-hero-logo-box .jb-logo-dot-four {

    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    animation: jbDotPulse 2s ease-in-out 1.5s infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */


/* Logo gently breathes */

@keyframes jbLogoBreathing {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }
}


/* Soft glow */

@keyframes jbLogoGlow {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.08);
    }
}


/* Outer ring */

@keyframes jbGoldRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Inner ring */

@keyframes jbGoldRingReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* Dots */

@keyframes jbDotPulse {

    0%,
    100% {
        transform: scale(0.65);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}


/* =========================================================
   BUTTONS
   KEEP EXISTING BUTTON POSITION
========================================================= */

.jb-hero-bottom .jb-btn-row {

    grid-column: 1 !important;
    grid-row: 2 !important;

    width: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    margin: 0 !important;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .jb-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            350px !important;

        column-gap: 20px !important;
    }


    .jb-hero-bottom .jb-hero-logo-box {

        width: 310px !important;
        height: 310px !important;
    }


    .jb-hero-bottom .jb-hero-logo-box img {

        width: 225px !important;
        max-width: 225px !important;
    }


    .jb-hero-logo-box .jb-logo-ring {

        width: 270px;
        height: 270px;
    }


    .jb-hero-logo-box .jb-logo-ring-two {

        width: 290px;
        height: 290px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .jb-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            230px !important;

        column-gap: 10px !important;
    }


    .jb-hero-bottom .jb-hero-logo-box {

        width: 200px !important;
        height: 200px !important;
    }


    .jb-hero-bottom .jb-hero-logo-box img {

        width: 145px !important;
        max-width: 145px !important;
    }


    .jb-hero-logo-box .jb-logo-ring {

        width: 175px;
        height: 175px;
    }


    .jb-hero-logo-box .jb-logo-ring-two {

        width: 190px;
        height: 190px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .jb-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            150px !important;

        column-gap: 8px !important;
    }


    .jb-hero-bottom .jb-hero-logo-box {

        width: 135px !important;
        height: 135px !important;
    }


    .jb-hero-bottom .jb-hero-logo-box img {

        width: 100px !important;
        max-width: 100px !important;
    }


    .jb-hero-logo-box .jb-logo-ring {

        width: 120px;
        height: 120px;
    }


    .jb-hero-logo-box .jb-logo-ring-two {

        width: 130px;
        height: 130px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .jb-hero-bottom {

        grid-template-columns: 1fr !important;

        grid-template-rows:
            auto
            auto
            auto !important;
    }


    .jb-hero-bottom .jb-hero-trust {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    .jb-hero-bottom .jb-hero-logo-box {

        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 160px !important;
        height: 160px !important;

        justify-self: center !important;
    }


    .jb-hero-bottom .jb-hero-logo-box img {

        width: 115px !important;
        max-width: 115px !important;
    }


    .jb-hero-bottom .jb-btn-row {

        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}
/* =========================================================
   FINAL LOGO - SMALLER CIRCLE + VISIBLE ANIMATION
========================================================= */


/* Keep certifications + logo + buttons aligned */
.jb-hero-bottom {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 245px !important;
    grid-template-rows: auto auto !important;

    column-gap: 15px !important;
    row-gap: 18px !important;

    align-items: center !important;
}


/* =========================================================
   LOGO CIRCLE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {

    grid-column: 2 !important;
    grid-row: 1 / 3 !important;

    width: 210px !important;
    height: 210px !important;

    margin: 0 auto !important;

    position: relative !important;

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

    justify-self: center !important;
    align-self: center !important;

    border-radius: 50% !important;

    /* Soft transparent white background */
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.78) 55%,
            rgba(255, 255, 255, 0.55) 100%
        ) !important;

    border: 2px solid rgba(218, 158, 0, 0.85) !important;

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

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.20),
        inset 0 0 25px rgba(255, 255, 255, 0.45) !important;

    overflow: visible !important;

    z-index: 5 !important;
}


/* =========================================================
   INNER GOLD BORDER
========================================================= */

.jb-hero-logo-box::before {

    content: "";

    position: absolute;

    inset: 10px;

    border-radius: 50%;

    border: 1px solid rgba(218, 158, 0, 0.60);

    z-index: 1;

    pointer-events: none;

    animation: jbInnerCirclePulse 3s ease-in-out infinite;
}


/* Remove previous second border */
.jb-hero-logo-box::after {
    display: none !important;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box img {

    position: relative !important;

    z-index: 10 !important;

    width: 150px !important;
    max-width: 150px !important;

    height: auto !important;

    object-fit: contain !important;

    animation: jbLogoFloat 3s ease-in-out infinite !important;

    filter:
        brightness(1.12)
        contrast(1.10)
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18))
        drop-shadow(0 0 10px rgba(218, 158, 0, 0.35)) !important;
}


/* =========================================================
   SOFT GLOW
========================================================= */

.jb-hero-logo-box .jb-logo-glow {

    display: block !important;

    position: absolute;

    width: 145px;
    height: 145px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(218, 158, 0, 0.24) 0%,
            rgba(218, 158, 0, 0.10) 45%,
            transparent 72%
        );

    filter: blur(10px);

    z-index: 2;

    animation: jbGlowPulse 2.8s ease-in-out infinite;
}


/* =========================================================
   ANIMATED OUTER RING
========================================================= */

.jb-hero-logo-box .jb-logo-ring {

    display: block !important;

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    border: 2px solid transparent;

    border-top-color: #f4b400;

    border-right-color: rgba(244, 180, 0, 0.25);

    z-index: 4;

    pointer-events: none;

    animation:
        jbRingRotate
        5s
        linear
        infinite;
}


/* =========================================================
   SECOND RING
========================================================= */

.jb-hero-logo-box .jb-logo-ring-two {

    display: block !important;

    position: absolute;

    width: 228px;
    height: 228px;

    border-radius: 50%;

    border: 1px solid transparent;

    border-bottom-color: rgba(218, 158, 0, 0.8);

    border-left-color: rgba(218, 158, 0, 0.20);

    z-index: 3;

    pointer-events: none;

    animation:
        jbRingReverse
        7s
        linear
        infinite;
}


/* =========================================================
   GOLD MOVING DOTS
========================================================= */

.jb-hero-logo-box .jb-logo-dot {

    display: block !important;

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #f4b400;

    box-shadow:
        0 0 6px #f4b400,
        0 0 12px rgba(244, 180, 0, 0.75);

    z-index: 12;

    pointer-events: none;

    animation: jbDotGlow 1.8s ease-in-out infinite;
}


/* Top */
.jb-hero-logo-box .jb-logo-dot-one {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}


/* Right */
.jb-hero-logo-box .jb-logo-dot-two {
    right: 4px;
    top: 50%;
    transform: translateY(-50%);

    animation-delay: 0.45s;
}


/* Bottom */
.jb-hero-logo-box .jb-logo-dot-three {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);

    animation-delay: 0.9s;
}


/* Left */
.jb-hero-logo-box .jb-logo-dot-four {
    left: 4px;
    top: 50%;
    transform: translateY(-50%);

    animation-delay: 1.35s;
}


/* =========================================================
   ANIMATIONS
========================================================= */


/* Logo gently moves */
@keyframes jbLogoFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.025);
    }
}


/* Glow animation */
@keyframes jbGlowPulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.08);
    }
}


/* Outer ring */
@keyframes jbRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Inner ring */
@keyframes jbRingReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* Inner border pulse */
@keyframes jbInnerCirclePulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}


/* Dots */
@keyframes jbDotGlow {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.65);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }
}


/* =========================================================
   BUTTONS - DO NOT CHANGE
========================================================= */

.jb-hero-bottom .jb-btn-row {

    grid-column: 1 !important;
    grid-row: 2 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    margin: 0 !important;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .jb-hero-bottom {
        grid-template-columns: minmax(0, 1fr) 250px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        width: 215px !important;
        height: 215px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 155px !important;
        max-width: 155px !important;
    }

    .jb-hero-logo-box .jb-logo-ring {
        width: 225px;
        height: 225px;
    }

    .jb-hero-logo-box .jb-logo-ring-two {
        width: 235px;
        height: 235px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .jb-hero-bottom {
        grid-template-columns: minmax(0, 1fr) 190px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        width: 165px !important;
        height: 165px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 120px !important;
        max-width: 120px !important;
    }

    .jb-hero-logo-box .jb-logo-ring {
        width: 175px;
        height: 175px;
    }

    .jb-hero-logo-box .jb-logo-ring-two {
        width: 182px;
        height: 182px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .jb-hero-bottom {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }

    .jb-hero-bottom .jb-hero-trust {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 150px !important;
        height: 150px !important;

        justify-self: center !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 105px !important;
        max-width: 105px !important;
    }

    .jb-hero-logo-box .jb-logo-ring {
        width: 160px;
        height: 160px;
    }

    .jb-hero-logo-box .jb-logo-ring-two {
        width: 168px;
        height: 168px;
    }

    .jb-hero-bottom .jb-btn-row {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}
/* =========================================================
   JB LOGO - FINAL VERSION
   Background: #1C1442
   Smaller circle
   Visible animation
========================================================= */


/* ---------------------------------------------------------
   HERO BOTTOM LAYOUT
--------------------------------------------------------- */

.jb-hero-bottom {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 240px !important;
    grid-template-rows: auto auto !important;

    column-gap: 20px !important;
    row-gap: 18px !important;

    align-items: center !important;
}


/* Certifications */

.jb-hero-bottom .jb-hero-trust {
    grid-column: 1 !important;
    grid-row: 1 !important;

    margin: 0 !important;
}


/* Buttons */

.jb-hero-bottom .jb-btn-row {
    grid-column: 1 !important;
    grid-row: 2 !important;

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

    margin: 0 !important;
}


/* =========================================================
   LOGO CIRCLE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {

    grid-column: 2 !important;
    grid-row: 1 / 3 !important;

    width: 205px !important;
    height: 205px !important;

    margin: 0 auto !important;

    position: relative !important;

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

    justify-self: center !important;
    align-self: center !important;

    flex: none !important;

    border-radius: 50% !important;

    /* YOUR COLOR */
    background: #1C1442 !important;

    border: 2px solid #D9A300 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 0 25px rgba(217, 163, 0, 0.10);

    overflow: visible !important;

    z-index: 5 !important;
}


/* =========================================================
   REAL ANIMATED OUTER RING
   This animation is attached directly to the logo box.
========================================================= */

.jb-hero-bottom .jb-hero-logo-box::before {

    content: "";

    position: absolute;

    width: 222px;
    height: 222px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 35deg,
            #F4B400 65deg,
            #FFD65A 90deg,
            transparent 125deg,
            transparent 190deg,
            rgba(244, 180, 0, 0.8) 220deg,
            transparent 260deg,
            transparent 360deg
        );

    z-index: 0;

    animation: jbLogoOrbit 4s linear infinite;

    pointer-events: none;
}


/* =========================================================
   INNER DARK CIRCLE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box::after {

    content: "";

    position: absolute;

    width: 193px;
    height: 193px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #1C1442;

    border: 1px solid rgba(244, 180, 0, 0.55);

    box-shadow:
        inset 0 0 20px rgba(244, 180, 0, 0.10);

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box img {

    position: relative !important;

    z-index: 10 !important;

    width: 145px !important;
    max-width: 145px !important;

    height: auto !important;

    object-fit: contain !important;

    /* Visible animation */
    animation:
        jbLogoFloat 3s ease-in-out infinite,
        jbLogoGlow 2.5s ease-in-out infinite !important;

    filter:
        brightness(1.2)
        contrast(1.15)
        drop-shadow(0 0 5px rgba(244, 180, 0, 0.75))
        drop-shadow(0 0 14px rgba(244, 180, 0, 0.35)) !important;
}


/* =========================================================
   REMOVE OLD ANIMATION ELEMENTS
   The new animation is handled by ::before / ::after.
========================================================= */

.jb-hero-bottom .jb-logo-glow,
.jb-hero-bottom .jb-logo-ring,
.jb-hero-bottom .jb-logo-circle,
.jb-hero-bottom .jb-logo-particle,
.jb-hero-bottom .jb-logo-dot {

    display: none !important;
}


/* =========================================================
   ANIMATION 1
   Rotating gold light around circle
========================================================= */

@keyframes jbLogoOrbit {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* =========================================================
   ANIMATION 2
   Logo gently moves
========================================================= */

@keyframes jbLogoFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.035);
    }
}


/* =========================================================
   ANIMATION 3
   Gold glow on logo
========================================================= */

@keyframes jbLogoGlow {

    0%,
    100% {
        filter:
            brightness(1.1)
            contrast(1.1)
            drop-shadow(
                0 0 4px
                rgba(244, 180, 0, 0.45)
            );
    }

    50% {
        filter:
            brightness(1.3)
            contrast(1.2)
            drop-shadow(
                0 0 9px
                rgba(244, 180, 0, 0.95)
            )
            drop-shadow(
                0 0 18px
                rgba(244, 180, 0, 0.5)
            );
    }
}


/* =========================================================
   ADD SMALL MOVING GOLD DOT
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {

    --gold: #F4B400;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .jb-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            240px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {

        width: 205px !important;
        height: 205px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {

        width: 145px !important;
        max-width: 145px !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .jb-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            190px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {

        width: 165px !important;
        height: 165px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box::before {

        width: 180px;
        height: 180px;
    }

    .jb-hero-bottom .jb-hero-logo-box::after {

        width: 153px;
        height: 153px;
    }

    .jb-hero-bottom .jb-hero-logo-box img {

        width: 115px !important;
        max-width: 115px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .jb-hero-bottom {

        grid-template-columns: 1fr !important;

        grid-template-rows:
            auto
            auto
            auto !important;
    }

    .jb-hero-bottom .jb-hero-trust {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {

        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 150px !important;
        height: 150px !important;

        justify-self: center !important;
    }

    .jb-hero-bottom .jb-hero-logo-box::before {

        width: 165px;
        height: 165px;
    }

    .jb-hero-bottom .jb-hero-logo-box::after {

        width: 140px;
        height: 140px;
    }

    .jb-hero-bottom .jb-hero-logo-box img {

        width: 105px !important;
        max-width: 105px !important;
    }

    .jb-hero-bottom .jb-btn-row {

        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}

/* =========================================================
   JB LOGO - FINAL VERSION
   Background: #1C1442
   Smaller circle
   Visible animation
========================================================= */


/* ---------------------------------------------------------
   HERO BOTTOM LAYOUT
--------------------------------------------------------- */

.jb-hero-bottom {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 240px !important;
    grid-template-rows: auto auto !important;

    column-gap: 20px !important;
    row-gap: 18px !important;

    align-items: center !important;
}


/* Certifications */

.jb-hero-bottom .jb-hero-trust {
    grid-column: 1 !important;
    grid-row: 1 !important;

    margin: 0 !important;
}


/* Buttons */

.jb-hero-bottom .jb-btn-row {
    grid-column: 1 !important;
    grid-row: 2 !important;

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

    margin: 0 !important;
}


/* =========================================================
   LOGO CIRCLE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {

    grid-column: 2 !important;
    grid-row: 1 / 3 !important;

    width: 205px !important;
    height: 205px !important;

    margin: 0 auto !important;

    position: relative !important;

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

    justify-self: center !important;
    align-self: center !important;

    flex: none !important;

    border-radius: 50% !important;

    /* YOUR COLOR */
    background: #1C1442 !important;

    border: 2px solid #D9A300 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 0 25px rgba(217, 163, 0, 0.10);

    overflow: visible !important;

    z-index: 5 !important;
}


/* =========================================================
   REAL ANIMATED OUTER RING
   This animation is attached directly to the logo box.
========================================================= */

.jb-hero-bottom .jb-hero-logo-box::before {

    content: "";

    position: absolute;

    width: 222px;
    height: 222px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 35deg,
            #F4B400 65deg,
            #FFD65A 90deg,
            transparent 125deg,
            transparent 190deg,
            rgba(244, 180, 0, 0.8) 220deg,
            transparent 260deg,
            transparent 360deg
        );

    z-index: 0;

    animation: jbLogoOrbit 4s linear infinite;

    pointer-events: none;
}


/* =========================================================
   INNER DARK CIRCLE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box::after {

    content: "";

    position: absolute;

    width: 193px;
    height: 193px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #1C1442;

    border: 1px solid rgba(244, 180, 0, 0.55);

    box-shadow:
        inset 0 0 20px rgba(244, 180, 0, 0.10);

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   LOGO IMAGE
========================================================= */

.jb-hero-bottom .jb-hero-logo-box img {

    position: relative !important;

    z-index: 10 !important;

    width: 145px !important;
    max-width: 145px !important;

    height: auto !important;

    object-fit: contain !important;

    /* Visible animation */
    animation:
        jbLogoFloat 3s ease-in-out infinite,
        jbLogoGlow 2.5s ease-in-out infinite !important;

    filter:
        brightness(1.2)
        contrast(1.15)
        drop-shadow(0 0 5px rgba(244, 180, 0, 0.75))
        drop-shadow(0 0 14px rgba(244, 180, 0, 0.35)) !important;
}


/* =========================================================
   REMOVE OLD ANIMATION ELEMENTS
   The new animation is handled by ::before / ::after.
========================================================= */

.jb-hero-bottom .jb-logo-glow,
.jb-hero-bottom .jb-logo-ring,
.jb-hero-bottom .jb-logo-circle,
.jb-hero-bottom .jb-logo-particle,
.jb-hero-bottom .jb-logo-dot {

    display: none !important;
}


/* =========================================================
   ANIMATION 1
   Rotating gold light around circle
========================================================= */

@keyframes jbLogoOrbit {

    0% {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    100% {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* =========================================================
   ANIMATION 2
   Logo gently moves
========================================================= */

@keyframes jbLogoFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.035);
    }
}


/* =========================================================
   ANIMATION 3
   Gold glow on logo
========================================================= */

@keyframes jbLogoGlow {

    0%,
    100% {
        filter:
            brightness(1.1)
            contrast(1.1)
            drop-shadow(
                0 0 4px
                rgba(244, 180, 0, 0.45)
            );
    }

    50% {
        filter:
            brightness(1.3)
            contrast(1.2)
            drop-shadow(
                0 0 9px
                rgba(244, 180, 0, 0.95)
            )
            drop-shadow(
                0 0 18px
                rgba(244, 180, 0, 0.5)
            );
    }
}


/* =========================================================
   ADD SMALL MOVING GOLD DOT
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {

    --gold: #F4B400;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .jb-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            240px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {

        width: 205px !important;
        height: 205px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {

        width: 145px !important;
        max-width: 145px !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .jb-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            190px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {

        width: 165px !important;
        height: 165px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box::before {

        width: 180px;
        height: 180px;
    }

    .jb-hero-bottom .jb-hero-logo-box::after {

        width: 153px;
        height: 153px;
    }

    .jb-hero-bottom .jb-hero-logo-box img {

        width: 115px !important;
        max-width: 115px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .jb-hero-bottom {

        grid-template-columns: 1fr !important;

        grid-template-rows:
            auto
            auto
            auto !important;
    }

    .jb-hero-bottom .jb-hero-trust {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .jb-hero-bottom .jb-hero-logo-box {

        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 150px !important;
        height: 150px !important;

        justify-self: center !important;
    }

    .jb-hero-bottom .jb-hero-logo-box::before {

        width: 165px;
        height: 165px;
    }

    .jb-hero-bottom .jb-hero-logo-box::after {

        width: 140px;
        height: 140px;
    }

    .jb-hero-bottom .jb-hero-logo-box img {

        width: 105px !important;
        max-width: 105px !important;
    }

    .jb-hero-bottom .jb-btn-row {

        grid-column: 1 !important;
        grid-row: 3 !important;
    }
}
/* =========================================================
   JB LOGO - FINAL
   205px CIRCLE + BIG LOGO + SOFT LIGHT ANIMATION
========================================================= */


/* ---------------------------------------------------------
   LOGO CIRCLE
--------------------------------------------------------- */

.jb-hero-bottom .jb-hero-logo-box {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;

    width: 205px !important;
    height: 205px !important;

    margin: 0 auto !important;

    position: relative !important;

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

    justify-self: center !important;
    align-self: center !important;

    border-radius: 50% !important;

    /* YOUR DARK PURPLE */
    background: #1C1442 !important;

    border: 2px solid #D9A300 !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 0 30px rgba(217, 163, 0, 0.12);

    overflow: visible !important;

    z-index: 5 !important;
}


/* =========================================================
   SOFT MOVING LIGHT
   This is NOT a rotating ring.
========================================================= */

.jb-hero-bottom .jb-hero-logo-box::before {

    content: "";

    position: absolute;

    width: 75px;
    height: 75px;

    border-radius: 50%;

    top: -15px;
    left: 20px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(244, 180, 0, 0.55) 18%,
            rgba(244, 180, 0, 0.15) 42%,
            transparent 70%
        );

    filter: blur(5px);

    opacity: 0;

    z-index: 2;

    pointer-events: none;

    animation: jbLightMove 4s ease-in-out infinite;
}


/* =========================================================
   SECOND SOFT LIGHT
========================================================= */

.jb-hero-bottom .jb-hero-logo-box::after {

    content: "";

    position: absolute;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    right: 15px;
    bottom: 20px;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(244, 180, 0, 0.35) 30%,
            transparent 70%
        );

    filter: blur(5px);

    opacity: 0;

    z-index: 2;

    pointer-events: none;

    animation: jbLightMoveTwo 4s ease-in-out 1.8s infinite;
}


/* =========================================================
   BIGGER LOGO
========================================================= */

.jb-hero-bottom .jb-hero-logo-box img {

    position: relative !important;

    z-index: 10 !important;

    /* BIGGER LOGO */
    width: 175px !important;
    max-width: 175px !important;

    height: auto !important;

    object-fit: contain !important;

    animation: jbLogoSoftGlow 3s ease-in-out infinite !important;

    filter:
        brightness(1.2)
        contrast(1.15)
        drop-shadow(
            0 0 5px
            rgba(244, 180, 0, 0.65)
        ) !important;
}


/* =========================================================
   SUBTLE INNER BORDER
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {

    isolation: isolate;
}


.jb-hero-bottom .jb-hero-logo-box img {
    isolation: isolate;
}


/* =========================================================
   REMOVE ALL OLD ANIMATIONS
========================================================= */

.jb-hero-bottom .jb-logo-glow,
.jb-hero-bottom .jb-logo-ring,
.jb-hero-bottom .jb-logo-circle,
.jb-hero-bottom .jb-logo-particle,
.jb-hero-bottom .jb-logo-dot {

    display: none !important;
}


/* =========================================================
   LIGHT ANIMATION 1
   Soft light travels around the logo area
========================================================= */

@keyframes jbLightMove {

    0% {
        top: -15px;
        left: 15px;

        opacity: 0;
        transform: scale(0.7);
    }

    15% {
        opacity: 0.9;
    }

    35% {
        top: 35px;
        left: 125px;

        opacity: 0.65;
        transform: scale(1.15);
    }

    55% {
        top: 125px;
        left: 145px;

        opacity: 0.35;
        transform: scale(0.9);
    }

    75% {
        top: 160px;
        left: 45px;

        opacity: 0.65;
        transform: scale(1.05);
    }

    100% {
        top: -15px;
        left: 15px;

        opacity: 0;
        transform: scale(0.7);
    }
}


/* =========================================================
   LIGHT ANIMATION 2
========================================================= */

@keyframes jbLightMoveTwo {

    0% {
        right: 10px;
        bottom: 15px;

        opacity: 0;
        transform: scale(0.7);
    }

    20% {
        opacity: 0.65;
    }

    50% {
        right: 125px;
        bottom: 125px;

        opacity: 0.35;
        transform: scale(1.2);
    }

    75% {
        right: 145px;
        bottom: 35px;

        opacity: 0.7;
        transform: scale(0.9);
    }

    100% {
        right: 10px;
        bottom: 15px;

        opacity: 0;
        transform: scale(0.7);
    }
}


/* =========================================================
   LOGO SOFT LIGHT
   Very subtle - not movement
========================================================= */

@keyframes jbLogoSoftGlow {

    0%,
    100% {
        filter:
            brightness(1.12)
            contrast(1.12)
            drop-shadow(
                0 0 4px
                rgba(244, 180, 0, 0.45)
            );
    }

    50% {
        filter:
            brightness(1.28)
            contrast(1.18)
            drop-shadow(
                0 0 9px
                rgba(244, 180, 0, 0.85)
            )
            drop-shadow(
                0 0 16px
                rgba(244, 180, 0, 0.35)
            );
    }
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .jb-hero-bottom .jb-hero-logo-box {
        width: 205px !important;
        height: 205px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 175px !important;
        max-width: 175px !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .jb-hero-bottom .jb-hero-logo-box {
        width: 165px !important;
        height: 165px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 140px !important;
        max-width: 140px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .jb-hero-bottom .jb-hero-logo-box {
        width: 150px !important;
        height: 150px !important;
    }

    .jb-hero-bottom .jb-hero-logo-box img {
        width: 125px !important;
        max-width: 125px !important;
    }
}


/* =========================================================
   FINAL LOGO SIZE FIX
   Circle stays 205px
   Actual logo becomes much bigger
========================================================= */

.jb-hero-bottom .jb-hero-logo-box {
    width: 205px !important;
    height: 205px !important;

    background: #1C1442 !important;

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

    overflow: visible !important;
}


/* FORCE THE LOGO TO APPEAR BIGGER */
.jb-hero-bottom .jb-hero-logo-box > img {
    display: block !important;

    width: 180px !important;
    height: 180px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    transform: scale(1.35) !important;
    transform-origin: center center !important;

    position: relative !important;
    z-index: 20 !important;

    /* Keep logo visible on dark purple */
    filter:
        brightness(1.25)
        contrast(1.15)
        drop-shadow(0 0 5px rgba(244, 180, 0, 0.55)) !important;
}


/* Desktop */
@media (min-width: 1200px) {

    .jb-hero-bottom .jb-hero-logo-box > img {
        width: 180px !important;
        height: 180px !important;

        transform: scale(1.35) !important;
    }
}


/* Tablet */
@media (max-width: 900px) {

    .jb-hero-bottom .jb-hero-logo-box > img {
        width: 150px !important;
        height: 150px !important;

        transform: scale(1.25) !important;
    }
}


/* Mobile */
@media (max-width: 600px) {

    .jb-hero-bottom .jb-hero-logo-box > img {
        width: 130px !important;
        height: 130px !important;

        transform: scale(1.2) !important;
    }
}

/* =========================================================
   MOBILE ONLY FIX
   DO NOT CHANGE DESKTOP LAYOUT
========================================================= */

@media (max-width: 600px) {

    /* Keep the hero itself in its original position */
    .jb-home-hero {
        position: relative !important;
    }

    /* Keep hero content within phone screen */
    .jb-home-hero .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Hero bottom
       Don't allow it to create horizontal overflow
    ----------------------------------------------------- */

    .jb-home-hero .jb-hero-bottom {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        gap: 18px !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       Certifications
    ----------------------------------------------------- */

    .jb-home-hero .jb-hero-trust {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        order: 1 !important;
    }


    /* -----------------------------------------------------
       LOGO
       Circle remains visible and centered
    ----------------------------------------------------- */

    .jb-home-hero .jb-hero-logo-box {

        order: 2 !important;

        width: 150px !important;
        height: 150px !important;

        min-width: 150px !important;
        min-height: 150px !important;

        max-width: 150px !important;
        max-height: 150px !important;

        margin: 5px auto !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        flex: 0 0 150px !important;

        border-radius: 50% !important;

        background: #1C1442 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       MOBILE LOGO IMAGE
       
       IMPORTANT:
       Don't use the desktop scale(1.35/1.45) on mobile.
       That was causing the logo to get cut.
    ----------------------------------------------------- */

    .jb-home-hero .jb-hero-logo-box > img {

        width: 130px !important;
        height: 130px !important;

        max-width: 130px !important;
        max-height: 130px !important;

        min-width: 0 !important;

        object-fit: contain !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        margin: 0 !important;

        z-index: 20 !important;
    }


    /* -----------------------------------------------------
       Remove desktop positioning from animation elements
    ----------------------------------------------------- */

    .jb-home-hero .jb-hero-logo-box::before,
    .jb-home-hero .jb-hero-logo-box::after {

        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       BUTTONS
       Keep them below logo without moving the rest
    ----------------------------------------------------- */

    .jb-home-hero .jb-btn-row {

        order: 3 !important;

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

        box-sizing: border-box !important;

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: center !important;

        align-items: center !important;

        gap: 12px !important;

        margin: 0 !important;
    }


    /* Don't change the actual button design */
    .jb-home-hero .jb-btn-row .jb-btn {
        flex-shrink: 0 !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .jb-home-hero .jb-hero-logo-box {

        width: 135px !important;
        height: 135px !important;

        min-width: 135px !important;
        min-height: 135px !important;

        max-width: 135px !important;
        max-height: 135px !important;

        flex-basis: 135px !important;
    }


    .jb-home-hero .jb-hero-logo-box > img {

        width: 115px !important;
        height: 115px !important;

        max-width: 115px !important;
        max-height: 115px !important;
    }
}

/* =========================================================
   HERO TEXT - ALL WHITE
========================================================= */

.jb-home-hero .jb-hero-content .jb-eyebrow {
    color: #ffffff !important;
}

.jb-home-hero .jb-hero-content h1 {
    color: #ffffff !important;
}

.jb-home-hero .jb-hero-content p {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85) !important;
}

.jb-home-hero .jb-hero-trust-title {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
}