:root{
  /* ✅ Green-only theme (Light → Normal → Mid) */
  --gLight: #A7F3D0;   /* light green */
  --green:  #22C55E;   /* normal green */
  --gMid:   #16A34A;   /* mid green (not too dark) */
  --gSoft:  #EAFBF1;   /* soft green background tint */

  --bgGrey: #efefef;
  --bgWhite:#ffffff;
  --ink:    #1b1b1f;
  --muted:  #6c6c75;

  --shadow: 0 12px 28px rgba(0,0,0,.10);
  --radius: 10px;
  --radius2: 14px;
}

*{ box-sizing:border-box; }
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
html,body{ height:100%; }
body{
  margin:0;
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#fff;
}

/* ================= TOP BAR ================= */
.topbar{
  background: linear-gradient(90deg, #03160a, #03160a);
  color:#f0ff00;
  font-size:.92rem;
}
.topbar-item{ opacity:.95; }
.topbar-link{
  color:#f0ff00;
  opacity:.95;
  text-decoration:none;
}
.topbar-link:hover{ opacity:1; text-decoration:underline; }
.topbar i{ margin-right:6px; }

/* ================= SINGLE HEADER / NAVBAR ================= */
.main-header{ z-index:1200; }

.brandbar{
  background: linear-gradient(90deg, #000, #000);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.brandbar.navbar{ padding: 10px 0; }

.brand{
  text-decoration:none;
  color:#fff !important;
}
.brand-text{ line-height:1.05; }
.brand-title{
  font-family:"Oswald", sans-serif;
  letter-spacing:1px;
  font-size:1.25rem;
}
.brand-accent{ color: #E8FFF2; }
.brand-sub{
  font-size:.9rem;
  opacity:.92;
}

/* Logo */
.brand-logo{
  height:70px;
  width:auto;
  border-radius: 5px;
  object-fit:contain;
  display:block;
}

/* Nav links */
.navlink{
  color:#fff !important;
  text-decoration:none;
  font-family:"Oswald", sans-serif;
  letter-spacing:.8px;
  font-size:.95rem;
  opacity:.95;
  border-bottom:2px solid transparent;
  padding: 10px 0;
}
.navlink:hover{
  opacity:1;
  border-bottom-color: rgba(255,255,255,.75);
}

/* Language button */
.btn-lang{
  color:#fff;
  border: 1px solid rgba(255,255,255,.40);
  font-family:"Oswald", sans-serif;
  letter-spacing:.7px;
  padding: 8px 12px;
}
.btn-lang:hover{ color:#fff; border-color: rgba(255,255,255,.70); }

/* Mobile toggler button */
.btn-menu,
.navbar-toggler{
  background: rgba(255,255,255,.16);
  color:#fff;
  border: 1px solid rgba(255,255,255,.25) !important;
  padding: 8px 12px;
  box-shadow:none !important;
}
.btn-menu:hover,
.navbar-toggler:hover{ background: rgba(255,255,255,.22); color:#fff; }

.navbar .nav-link.navlink{ padding: 10px 0; }

@media (max-width: 991.98px){
  .navbar-nav{ gap: 8px; }
  .navlink{ border-bottom:0; }
}

/* ================= BREADCRUMB ================= */
.crumb-wrap{
  background:#fff;
  border-bottom:1px solid #e6e6e6;
}
.crumb{
  padding:14px 0;
  color:#777;
  font-size:.95rem;
}
.crumb .active{ color: #092576; font-weight:700; }

/* ================= HERO LAYOUT ================= */
.hero-wrap{
  background:#f2f2f2;
  padding:22px 0 34px;
}
.dealer-card{
  background:#fff;
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:18px;
  border:1px solid #ededed;
}
.dealer-title{
  font-family:"Oswald", sans-serif;
  letter-spacing:.6px;
  font-size:1.45rem;
  margin:0;
}
.dealer-hr{
  margin:12px 0 14px;
  border-color:#e8e8e8;
}
.dealer-item{
  display:flex;
  gap:12px;
  padding:10px 0;
}
/* ✅ Fix dealer icons (same size + perfect center for all icons) */
.dealer-ico{
  width: 42px;
  height: 42px;
  min-width: 42px;       /* prevents shrinking */
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(34,197,94,.14);
  color: var(--gMid);
}

/* normalize icon size & alignment */
.dealer-ico i{
  font-size: 18px;       /* same size for all icons */
  line-height: 1;        /* removes weird vertical offsets */
  display: block;
}

/* optional: if you still feel "house" is visually heavy, slightly smaller */
.dealer-ico i.bi-house-door-fill{
  font-size: 17px;
}
.dealer-label{
  font-size:.85rem;
  color:#7a7a85;
  font-weight:600;
}
.dealer-text{ font-weight:500; }
.dealer-link{
  color: var(--gMid);
  font-weight:700;
  text-decoration:none;
}
.dealer-link:hover{ text-decoration:underline; }

.pill-open{
  background: rgba(34,197,94,.14);
  color: var(--gMid);
  border: 1px solid rgba(34,197,94,.22);
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.6px;
  font-family:"Oswald", sans-serif;
}

.dealer-note{
  background:#fafafa;
  border:1px dashed #e1e1e1;
  border-radius:10px;
  padding:10px 12px;
  color:#555;
}
.dealer-note i{ color: var(--green); margin-right:6px; }

/* Buttons */
.btn-brand{
  background: var(--gMid);
  border:0;
  color:#fff;
}
.btn-brand:hover{ background: #12853C; color:#fff; }

.btn-outline-brand{
  background:#fff;
  border:1px solid var(--gMid);
  color: var(--gMid);
}
.btn-outline-brand:hover{
  background: rgba(34,197,94,.10);
  color: var(--gMid);
}

/* ================= HERO SLIDER ================= */
.hero-slider{ height:100%; }
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item{ height:100%; }

.slider-img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
}
@media (max-width: 991.98px){
  .slider-img{ min-height:260px; height:300px; }
}
.slider-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45));
}
.slider-caption{
  position:absolute;
  left:16px;
  bottom:16px;
  background: rgba(255,255,255,.92);
  border-radius:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.55);
}
.cap-title{
  font-family:"Oswald", sans-serif;
  letter-spacing:1px;
  color: var(--gMid);
  font-weight:700;
}
.cap-sub{
  color:#333;
  font-weight:600;
  font-size:.95rem;
}

/* ================= SECTION BLOCKS ================= */
.block-grey{ background: var(--bgGrey); padding:44px 0; }
.block-white{ background: var(--bgWhite); padding:44px 0; }

.block-title h3{
  margin:0;
  font-family:"Oswald", sans-serif;
  letter-spacing:1px;
  font-size:1.8rem;
  color:#3a3a3f;
}
.accent-word{ color: var(--gMid); }
.block-line{
  width:90px;
  height:3px;
  background: linear-gradient(90deg, var(--gMid), var(--green));
  margin:10px auto 0;
  border-radius:999px;
}

/* ================= FEATURED TABS ================= */
.featured-tabs .nav-link{
  background:transparent;
  border:0;
  color:#555;
  font-weight:700;
  text-transform:uppercase;
  font-family:"Oswald", sans-serif;
  letter-spacing:.5px;
  padding:14px 18px;
  border-bottom:3px solid transparent;
  border-radius:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.featured-tabs .nav-link i{
  font-size:1.35rem;
  color:#666;
}
.featured-tabs .nav-link span{
  text-align:center;
  font-size:.85rem;
  line-height:1.1;
}
.featured-tabs .nav-link.active{
  color: var(--gMid);
  background-color: #1b3b68;
  border-bottom-color: var(--gMid);
}
.featured-tabs .nav-link.active i{ color: var(--gMid); }

.prod-card{
  background:#fff;
  border-radius:10px;
  padding:16px;
  border:1px solid #e6e6e6;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* ================= CALLBACK STRIP ================= */
.callback-strip{
  background:#f4f4f4;
  padding:44px 0;
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5;
}
.callback-title h3{
  font-family:"Oswald", sans-serif;
  letter-spacing:1px;
  font-size:2rem;
  margin:0;
  color:#3a3a3f;
}
.callback-title p{ color:#6a6a72; margin-top:10px; }
.callback-box{
  background:#fff;
  border-radius:10px;
  padding:18px;
  border:1px solid #e6e6e6;
  box-shadow: var(--shadow);
}

/* ================= ABOUT ================= */
.about-hero{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.about-img{ position:relative; }
.about-img img{
  width:100%;
  height:320px;
  object-fit:cover;
}
.about-ribbon{
  position:absolute;
  left:0;
  right:0;
  bottom:18px;
  display:flex;
  justify-content:center;
}
.ribbon-text{
  background: var(--gMid);
  color:#fff;
  padding:14px 18px;
  font-family:"Oswald", sans-serif;
  letter-spacing:1px;
  border-radius:8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.ribbon-text span{ color:#E8FFF2; }
.about-content{ padding:18px; }

.about-points{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 575.98px){
  .about-points{ grid-template-columns:1fr; }
}
.ap{
  background:#fafafa;
  border:1px dashed #e1e1e1;
  border-radius:10px;
  padding:10px 12px;
  font-weight:600;
}
.ap i{ color: var(--green); margin-right:8px; }

/* ================= SERVICES ================= */
.service-box{
  position:relative;
  overflow:hidden;
  background:#fff;
  border-radius:14px;
  padding:18px;
  border:1px solid #e6e6e6;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  height:100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-box:hover{
  transform: translateY(-6px);
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.service-corner{
  position:absolute;
  top:-40px;
  right:-40px;
  width:120px;
  height:120px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.25), rgba(167,243,208,.18), transparent 70%);
  opacity:.95;
  pointer-events:none;
  transition: transform .35s ease;
}
.service-box:hover .service-corner{ transform: scale(1.05); }

.sb-ico{
  width:54px;
  height:54px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(167,243,208,.55), rgba(34,197,94,.18));
  border: 1px solid rgba(34,197,94,.18);
  color: var(--gMid);
  margin-bottom:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  transition: transform .5s ease, background .25s ease, color .25s ease;
}
.sb-ico i{
  font-size:1.35rem;
  display:inline-block;
  transition: transform .6s ease;
}
.service-box:hover .sb-ico i{ transform: rotate(360deg); }
.service-box:hover .sb-ico{
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(167,243,208,.50));
  color: var(--green);
  transform: rotate(-2deg) scale(1.03);
}

.service-box h6{
  font-weight:900;
  margin-bottom:6px;
  color:#2f2f35;
}

.service-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color: var(--gMid);
  font-size:.95rem;
  margin-top:6px;
  user-select:none;
}
.service-link i{ transition: transform .25s ease; }
.service-box:hover .service-link i{ transform: translateX(4px); }

@media (max-width: 575.98px){
  .service-box{ padding:16px; }
  .sb-ico{ width:52px; height:52px; }
}

.why-mini{
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.why-title{
  font-family:"Oswald", sans-serif;
  letter-spacing:1px;
  font-weight:700;
  color:#444;
  margin-bottom:12px;
}
.why-pill{
  background:#fafafa;
  border:1px dashed #e1e1e1;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
}
.why-pill i{ color: var(--green); margin-right:8px; }



/* ================= PRODUCTS WITH IMAGE ================= */

.product-card{
  background:#fff;
  border-radius:14px;
  padding:18px;
  border:1px solid #eee;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:all .3s ease;
  text-align:center;
}

.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 14px 30px rgba(0,0,0,.15);
}

.product-img{
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
}

.product-img img{
  max-height:170px;
  max-width:100%;
  object-fit:contain;
  transition:transform .3s ease;
}

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

.product-card h6{
  font-family:"Oswald", sans-serif;
  font-weight:600;
  margin-bottom:10px;
  letter-spacing:.5px;
}


/* ================= ACHIEVEMENTS ================= */
.stat-card{
  background:#fff;
  border-radius:10px;
  padding:16px;
  border:1px solid #e6e6e6;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  text-align:center;
}
.stat-no{
  font-family:"Oswald", sans-serif;
  color: var(--gMid);
  font-size:2rem;
  letter-spacing:1px;
}
.stat-txt{ color:#666; font-weight:700; }

/* ================= DEALER INFO ================= */
.info-panel{
  background:#fff;
  border-radius:10px;
  padding:16px;
  border:1px solid #e6e6e6;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.panel-head{
  font-weight:800;
  color:#333;
  border-bottom:2px solid #e8e8e8;
  padding-bottom:8px;
  margin-bottom:12px;
}
.rating-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.stars{ color:#f39c12; }
.rating-num{ font-weight:900; color:#333; }

.review-name{ font-weight:800; }
.review-meta{ font-size:.9rem; color:#777; }
.review-text{ margin-top:6px; color:#333; }
.soft-hr{ border-color:#e9e9e9; }

.share-box .qr-box{ max-width:220px; }
.qr-placeholder{
  background:#f7f7f7;
  border:1px dashed #d9d9d9;
  border-radius:10px;
  padding:18px;
  text-align:center;
  color:#777;
}

.qr-placeholder i{ font-size:2rem; color: var(--gMid); }


.qr-box{
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(90,46,166,.12);
  box-shadow: var(--shadow2);
  padding: 14px;
  text-align: center;
}

.qr-img{
  width: 100%;
  max-width: 170px;
  height: auto;
  border-radius: 14px;
  background: #fff;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.06);
}

.hours-grid{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:6px 12px;
  font-weight:600;
  color:#444;
}
.dotline{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#444;
  margin-bottom:6px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}
.dot.green{ background: var(--green); }
.dir-link{
  color: var(--gMid);
  font-weight:800;
  text-decoration:none;
}
.dir-link:hover{ text-decoration:underline; }

.chip-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  display:inline-block;
  background: var(--gMid);
  color:#fff;
  padding:8px 12px;
  border-radius:3px;
  font-weight:800;
  font-size:.9rem;
}
.chip.outline{
  background:#fff;
  color: var(--gMid);
  border:1px solid var(--gMid);
  font-weight:700;
}

/* ================= TIMELINE ================= */
.timeline-card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e6e6e6;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  height:100%;
}
.timeline-img img{
  width:100%;
  height:225px;
  object-fit:cover;
}
.timeline-body{ padding:14px; }
.timeline-title{ font-weight:900; color:#333; }
.timeline-text{ color:#666; margin-top:6px; }

/* ================= GALLERY ================= */
.gallery-card{
  display:block;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e6e6e6;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  position:relative;
}
.gallery-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition: transform .35s ease;
}
.gallery-card:hover img{ transform: scale(1.05); }
.gcap{
  position:absolute;
  left:10px;
  bottom:10px;
  background: rgba(255,255,255,.92);
  color:#333;
  border-radius:8px;
  padding:6px 10px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.60);
}

/* ================= FAQ ================= */
.faq-acc .accordion-button{
  font-weight:800;
  color:#333;
}
.faq-acc .accordion-button:not(.collapsed){
  background: rgba(34,197,94,.14);
  color: var(--gMid);
}

/* ================= MAP ================= */
.map-card{
  position:relative;
  height:420px;
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border:1px solid #e6e6e6;
}
@media (max-width: 991.98px){ .map-card{ height:350px; } }
@media (max-width: 575.98px){ .map-card{ height:300px; } }

.map-card iframe{
  width:100%;
  height:100%;
  border:0;
  filter: grayscale(10%);
}
.map-overlay{
  position:absolute;
  top:20px;
  right:20px;
  z-index:10;
}
.map-overlay .btn{
  box-shadow: 0 12px 30px rgba(22,163,74,.35);
  font-weight:700;
}

/* ================= FOOTER ================= */
.footer-logo{
  height:60px;
  width:auto;
  object-fit:contain;
  display:block;
}
.site-footer{
  background:#fff;
  border-top:1px solid #e5e5e5;
  padding:44px 0 18px;
}
.foot-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.foot-title{
  font-family:"Oswald", sans-serif;
  letter-spacing:.8px;
  font-size:1.2rem;
}
.foot-sub{ color:#666; font-weight:700; }
.foot-head{
  font-weight:900;
  margin-bottom:10px;
}
.foot-links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.foot-links a{
  color:#444;
  text-decoration:none;
  font-weight:600;
}
.foot-links a:hover{ color: var(--gMid); text-decoration:underline; }

.foot-contact{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  color:#444;
}
.foot-contact li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.foot-contact a{
  color:#444;
  text-decoration:none;
  font-weight:700;
}
.foot-contact a:hover{ color: var(--gMid); text-decoration:underline; }

.foot-ico{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid #e5e5e5;
  display:grid;
  place-items:center;
  color: var(--gMid);
  background:#fff;
  text-decoration:none;
}
.foot-ico:hover{
  background: rgba(34,197,94,.10);
  color: var(--gMid);
}

/* ================= MOBILE ACTION BAR ================= */
.mobile-actionbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  z-index:1100;
  height:54px;
  box-shadow: 0 -10px 24px rgba(0,0,0,.16);
}
.mab-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  color:#fff;
}
.mab-call{ background: var(--green); }
.mab-dir{ background: #2b7bd6; }
@media (min-width: 992px){
  .mobile-actionbar{ display:none; }
}

/* ================= FLOATING GLOW BUTTONS ================= */
/* ✅ Stop horizontal overflow caused by floating shadows/blur on mobile */


/* Floating actions (safe area + no layout overflow) */
.floating-actions{
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* ✅ Use safe-area so it never pushes out of screen */
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(70px + env(safe-area-inset-bottom));

  /* ✅ Prevent paint overflow from causing horizontal scroll */
  width: 54px;
  contain: layout paint;
}

.float-btn{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;

  /* keep your look */
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);

  /* ✅ helps on mobile rendering */
  transform: translateZ(0);
}

/* ✅ Mobile: smaller buttons + better spacing above bottom action bar */
@media (max-width: 575.98px){
  .floating-actions{
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(66px + env(safe-area-inset-bottom)); /* above 54px bottom bar */
    width: 48px;
    gap: 8px;
  }
  .float-btn{
    width: 48px;
    height: 48px;
  }
}

/* Your existing colors/animations (keep) */
.float-btn.call{
  background: linear-gradient(135deg, #0c321a, #0c321a);
  animation: glowGreenMid 2.2s infinite ease-in-out;
}
.float-btn.whatsapp{
  background: linear-gradient(135deg, var(--green), #38D977);
  animation: glowGreen 2.2s infinite ease-in-out;
}

@keyframes glowGreen{
  0%,100%{ box-shadow: 0 18px 40px rgba(34,197,94,.22), 0 0 0 rgba(34,197,94,0); }
  50%{ box-shadow: 0 18px 44px rgba(34,197,94,.40), 0 0 16px rgba(34,197,94,.35); }
}
@keyframes glowGreenMid{
  0%,100%{ box-shadow: 0 18px 40px rgba(22,163,74,.22), 0 0 0 rgba(22,163,74,0); }
  50%{ box-shadow: 0 18px 44px rgba(22,163,74,.40), 0 0 16px rgba(22,163,74,.35); }
}

/* ================= BACK TO TOP ================= */
.back-to-top{
  position:fixed;
  right:14px;
  bottom:14px;
  width:44px;
  height:44px;
  border-radius:8px;
  border:none;
  background: var(--gMid);
  color:#fff;
  display:none;
  place-items:center;
  z-index:1300;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.back-to-top:hover{ background: #12853C; }

/* Small improvements */
@media (max-width: 575.98px){
  .block-title h3{ font-size:1.5rem; }
  .dealer-title{ font-size:1.3rem; }
}







/* ===================== COMMON PAGE BANNER (All Pages) ===================== */

.page-banner{
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0b1220;
  background-image: var(--banner-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark overlay like your screenshot */
.page-banner-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10, 20, 35, .70),
    rgba(10, 20, 35, .50),
    rgba(10, 20, 35, .70)
  );
}

/* Content */
.page-banner-content{
  position: relative;
  z-index: 2;
  padding: 36px 0;
  color: #fff;
}

.page-banner-title{
  font-family: "Oswald", sans-serif;
  letter-spacing: 1px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0 0 8px;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.page-banner-sub{
  margin: 0 0 14px;
  font-weight: 600;
  opacity: .95;
}

/* Breadcrumb pill */
.page-banner-breadcrumb{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  font-weight: 800;
}

.page-banner-breadcrumb a{
  color: #fff;
  text-decoration: none;
  opacity: .95;
}
.page-banner-breadcrumb a:hover{
  opacity: 1;
  text-decoration: underline;
}
.page-banner-breadcrumb .current{
  color: #fff;
  opacity: 1;
}

/* Responsive height */
@media (max-width: 991.98px){
  .page-banner{ min-height: 260px; }
}

@media (max-width: 575.98px){
  .page-banner{ min-height: 230px; }
  .page-banner-content{ padding: 28px 0; }
}