/* ===================================================================
   Allied Buying Group — custom theme
   Layered on top of Bootstrap 5. Mobile-first.
   =================================================================== */
:root{
  --abg-primary:#0b2e5c;      /* deep navy */
  --abg-primary-dark:#082444;
  --abg-accent:#e12127;       /* red accent */
  --abg-accent-dark:#b71a1f;
  --abg-light:#f5f7fa;
  --abg-muted:#5b6b7f;
  --abg-dark:#111a26;
  --abg-ring:rgba(11,46,92,.15);
  --bs-primary:#0b2e5c;
  --bs-primary-rgb:11,46,92;
}

*{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#24313f;
  font-size:1rem;
  line-height:1.65;
}
h1,h2,h3,h4,h5,h6,.navbar-brand{font-family:'Poppins',sans-serif;font-weight:600;color:var(--abg-primary)}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.15}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
a{color:var(--abg-primary);text-decoration:none}
a:hover{color:var(--abg-accent)}
.text-accent{color:var(--abg-accent)!important}

.btn-primary{
  --bs-btn-bg:var(--abg-primary);--bs-btn-border-color:var(--abg-primary);
  --bs-btn-hover-bg:var(--abg-primary-dark);--bs-btn-hover-border-color:var(--abg-primary-dark);
  --bs-btn-active-bg:var(--abg-primary-dark);
  font-weight:600;letter-spacing:.2px;
}
.btn-accent{
  background:var(--abg-accent);border-color:var(--abg-accent);color:#fff;font-weight:600;
}
.btn-accent:hover{background:var(--abg-accent-dark);border-color:var(--abg-accent-dark);color:#fff}
.btn-outline-light-accent{border:2px solid #fff;color:#fff;font-weight:600}
.btn-outline-light-accent:hover{background:#fff;color:var(--abg-primary)}
.btn{border-radius:.55rem;padding:.6rem 1.4rem}

/* ---- Top bar ---- */
.topbar{background:var(--abg-primary-dark);color:#cdd7e4;font-size:.85rem;padding:.45rem 0}
.topbar a{color:#cdd7e4}
.topbar a:hover{color:#fff}
.topbar .social{font-size:1rem}

/* ---- Navbar (white, matching abgcstore.com) ---- */
.site-nav{background:#fff;box-shadow:0 2px 18px rgba(11,46,92,.08);padding:.45rem 0}
.site-nav .nav-link{color:#1d2733;font-weight:600;padding:.5rem 1rem;position:relative}
.site-nav .nav-link.active,.site-nav .nav-link:hover{color:var(--abg-accent)}
.site-nav .nav-link.active::after{content:"";position:absolute;left:1rem;right:1rem;bottom:.15rem;height:2px;background:var(--abg-accent)}
.navbar-brand{font-size:1.35rem;color:var(--abg-primary);display:flex;align-items:center;gap:.5rem}
.navbar-brand img{height:52px;width:auto}
.brand-fallback{font-weight:700;color:var(--abg-primary)}
/* dark hamburger for the white bar */
.site-nav .navbar-toggler{border-color:rgba(11,46,92,.25)}
.site-nav .navbar-toggler:focus{box-shadow:0 0 0 .2rem var(--abg-ring)}
.site-nav .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(29,39,51,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
@media (max-width:991.98px){.site-nav .navbar-collapse{background:#fff;margin-top:.5rem;border-radius:.5rem;padding:.5rem .25rem}}

/* ---- Hero slider (full-bleed responsive carousel) ---- */
.hero-slider{background:var(--abg-primary-dark);position:relative;overflow:hidden}
.hero-slide-img{width:100%;height:auto;display:block}
/* Large screens: cap the height so the banner isn't enormous on wide monitors.
   Text in these banners is vertically centered, so a small top/bottom crop is safe. */
@media (min-width:1200px){
  .hero-slide-img{height:clamp(420px,42vw,600px);object-fit:cover;object-position:center}
}
/* Phones/tablets: the baked-in text sits on the LEFT, so pin to the left edge and
   give it real height — this keeps the headline legible instead of a tiny strip. */
@media (max-width:767.98px){
  .hero-slide-img{height:340px;object-fit:cover;object-position:left center}
}
@media (min-width:768px) and (max-width:1199.98px){
  .hero-slide-img{height:auto;object-fit:cover;object-position:left center}
}
.hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{width:7%;opacity:.85}
.hero-slider .carousel-control-prev-icon,.hero-slider .carousel-control-next-icon{
  background-color:rgba(11,46,92,.55);border-radius:50%;padding:1.15rem;background-size:42% 42%}
.hero-slider .carousel-control-prev:hover .carousel-control-prev-icon,
.hero-slider .carousel-control-next:hover .carousel-control-next-icon{background-color:var(--abg-accent)}
.hero-slider .carousel-indicators{margin-bottom:.8rem}
.hero-slider .carousel-indicators [data-bs-target]{width:34px;height:5px;border-radius:3px;opacity:.6}
.hero-slider .carousel-indicators [data-bs-target].active{background-color:var(--abg-accent);opacity:1}
@media (max-width:575.98px){
  .hero-slider .carousel-control-prev,.hero-slider .carousel-control-next{width:12%}
  .hero-slider .carousel-indicators{display:none}
}

/* ---- Hero ---- */
.hero{
  background:linear-gradient(115deg,var(--abg-primary) 0%,var(--abg-primary-dark) 60%,#06203d 100%);
  color:#fff;position:relative;overflow:hidden;padding:5rem 0;
}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(225,33,39,.35),transparent 70%);border-radius:50%}
.hero h1{color:#fff;margin-bottom:1.2rem}
.hero p{color:#d6e0ec;font-size:1.15rem;max-width:36rem}
.hero .hero-img{max-width:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.hero-badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  padding:.35rem 1rem;border-radius:2rem;font-size:.85rem;font-weight:600;letter-spacing:.5px;margin-bottom:1.2rem}

/* ---- Page banner (inner pages) ---- */
.page-banner{
  background:linear-gradient(115deg,var(--abg-primary),var(--abg-primary-dark));
  color:#fff;padding:3.4rem 0;position:relative;
}
.page-banner h1{color:#fff;margin:0}
.page-banner .breadcrumb{--bs-breadcrumb-divider-color:#9db2cd;margin:.6rem 0 0}
.page-banner .breadcrumb a{color:#cdd7e4}
.page-banner .breadcrumb-item.active{color:#fff}

/* ---- Sections ---- */
section{padding:4rem 0}
.section-tight{padding:2.5rem 0}
.eyebrow{color:var(--abg-accent);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:.8rem;margin-bottom:.5rem;display:block}
.lead-muted{color:var(--abg-muted);font-size:1.1rem}

/* ---- Cards ---- */
.value-card{
  background:#fff;border:1px solid #eef1f6;border-radius:1rem;padding:2rem;height:100%;
  transition:transform .25s ease,box-shadow .25s ease;
}
.value-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,46,92,.12)}
.value-card .icon{
  width:56px;height:56px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;
  background:var(--abg-light);color:var(--abg-accent);font-size:1.6rem;margin-bottom:1rem;
}
.value-card h3,.value-card h5{font-size:1.2rem}

/* ---- Advantage section (numbered cards on dark) ---- */
.advantage-section{background:radial-gradient(130% 130% at 50% 0%, #1c1e26 0%, #141519 62%);color:#fff;padding:5rem 0}
.advantage-eyebrow{display:inline-block;color:var(--abg-accent);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;font-size:.8rem;margin-bottom:.55rem}
.advantage-title{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.4rem}
.advantage-intro{color:#aeb4c0;max-width:46rem;font-size:1.08rem}
.advantage-card{
  position:relative;overflow:hidden;height:100%;
  background:linear-gradient(160deg,#20222b 0%,#16171c 100%);
  border:1px solid rgba(255,255,255,.09);border-radius:1.1rem;padding:1.9rem 1.9rem 1.75rem;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.advantage-card:hover{transform:translateY(-5px);border-color:rgba(225,33,39,.55);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.advantage-watermark{
  position:absolute;right:.85rem;top:-1.5rem;font-family:'Poppins',sans-serif;font-weight:800;
  font-size:7.5rem;line-height:1;color:rgba(255,255,255,.035);pointer-events:none;user-select:none;
}
.advantage-head{display:flex;align-items:center;gap:1.15rem;margin-bottom:1rem}
.advantage-num{
  flex:none;width:64px;height:64px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:1.7rem;color:#fff;
  background:linear-gradient(140deg,#e63a3f 0%,#c01a20 100%);box-shadow:0 8px 20px rgba(225,33,39,.4);
}
.advantage-icon{color:var(--abg-accent);font-size:1.05rem;display:block;margin-bottom:.15rem}
.advantage-head h3{color:#fff;font-size:1.3rem;margin:0;font-weight:600}
.advantage-card p{color:#b3b9c4;margin:0;font-size:1rem;line-height:1.65}
@media (max-width:575.98px){
  .advantage-section{padding:3.5rem 0}
  .advantage-card{padding:1.5rem}
  .advantage-num{width:56px;height:56px;font-size:1.45rem}
  .advantage-head{gap:.9rem;margin-bottom:.85rem}
  .advantage-head h3{font-size:1.15rem}
  .advantage-watermark{font-size:6rem}
}

/* ---- Benefit / feature list ---- */
.benefit-list{list-style:none;padding:0;margin:0}
.benefit-list li{
  display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px dashed #e3e8ef;font-size:1.05rem;
}
.benefit-list li:last-child{border-bottom:0}
.benefit-list li i{color:var(--abg-accent);font-size:1.25rem;margin-top:.15rem;flex:none}

/* ---- Brands strip ---- */
.brands{background:var(--abg-light)}
.brand-item{
  display:flex;align-items:center;justify-content:center;padding:1.1rem;background:#000;border-radius:.8rem;
  height:100%;border:1px solid rgba(255,255,255,.08);font-weight:700;color:#fff;text-align:center;min-height:104px;
  transition:transform .2s,box-shadow .2s;
}
.brand-item:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.brand-item img{max-height:58px;max-width:100%;object-fit:contain}

/* ---- CTA band ---- */
.cta-band{
  background:linear-gradient(115deg,var(--abg-accent),var(--abg-accent-dark));color:#fff;border-radius:1.25rem;
  padding:3rem;text-align:center;
}
.cta-band h2{color:#fff}
.cta-band .btn{background:#fff;color:var(--abg-accent);border-color:#fff}
.cta-band .btn:hover{background:var(--abg-primary);color:#fff;border-color:var(--abg-primary)}

/* ---- Leadership ---- */
.leader-card{text-align:center}
.leader-avatar{
  width:110px;height:110px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--abg-primary),var(--abg-primary-dark));color:#fff;font-size:2.2rem;font-weight:700;font-family:'Poppins',sans-serif;
}
.leader-card h5{margin-bottom:.15rem}
.leader-card span{color:var(--abg-muted)}

/* ---- FAQ accordion ---- */
.accordion-button{font-family:'Poppins',sans-serif;font-weight:600;color:var(--abg-primary)}
.accordion-button:not(.collapsed){background:var(--abg-light);color:var(--abg-primary);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 .2rem var(--abg-ring)}
.accordion-item{border:1px solid #e9edf3;border-radius:.75rem!important;margin-bottom:.85rem;overflow:hidden}

/* ---- Contact ---- */
.contact-info-card{background:var(--abg-primary);color:#fff;border-radius:1rem;padding:2.2rem;height:100%}
.contact-info-card a{color:#fff}
.contact-info-card .ci-row{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.4rem}
.contact-info-card .ci-row i{font-size:1.4rem;color:#ffd0d2}
.form-control:focus{border-color:var(--abg-primary);box-shadow:0 0 0 .2rem var(--abg-ring)}
.form-label{font-weight:600;color:var(--abg-primary);font-size:.92rem}
.map-frame{width:100%;height:320px;border:0;border-radius:1rem}

/* ---- Footer ---- */
.site-footer{background:var(--abg-dark);color:#c6d0dc;padding:3.5rem 0 1.5rem;margin-top:1rem}
.site-footer .footer-heading{color:#fff;font-family:'Poppins',sans-serif;font-size:1rem;margin-bottom:1rem}
.site-footer .footer-about{color:#98a6b6;font-size:.95rem}
/* Footer logo: white chip so any logo (incl. dark wordmark) is always visible on the dark footer,
   with a hard size cap so it can't render large. */
.footer-logo-wrap{display:inline-block;background:#fff;padding:.5rem .8rem;border-radius:.65rem;line-height:0}
.footer-logo{height:40px !important;width:auto !important;max-width:200px;display:block}
.footer-links a{color:#c6d0dc;display:inline-block;padding:.25rem 0}
.footer-links a:hover{color:var(--abg-accent)}
.footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
.footer-social a:hover{background:var(--abg-accent)}
.footer-divider{border-color:rgba(255,255,255,.12);margin:2.2rem 0 1.2rem}
.footer-links-inline{color:#c6d0dc}

/* ---- Scroll-to-top ---- */
.to-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;border:0;
  background:var(--abg-accent);color:#fff;font-size:1.2rem;opacity:0;visibility:hidden;transition:.3s;z-index:1030;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--abg-accent-dark)}

/* ---- Utilities ---- */
.bg-light-soft{background:var(--abg-light)}
.rounded-xl{border-radius:1rem}
img{max-width:100%;height:auto}

@media (max-width:991.98px){
  .hero{padding:3.2rem 0;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  section{padding:3rem 0}
  .cta-band{padding:2rem 1.2rem}
  .site-nav .nav-link.active::after{display:none}
  .navbar-nav{padding-top:.5rem}
}