:root{ --brand:#1C3D73; --brand-rgb:28,61,115;
--accent:#1C3D73;     /* warm gold accent */
  --white-80: rgba(255,255,255,.85);
--muted:#6b7280; }



/* Bigger logo + override Bootstrap's cap */
:root{
  --logo-h-desktop: 96px;   /* try 88–110px */
  --logo-h-mobile:  64px;   /* mobile size */
}




/* Primary CTA button */
.btn-brand{
  background:var(--brand);
  color:var(--brand-ink);
  border:0;
  border-radius:var(--radius);
  padding:.6rem 1rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.btn-brand:hover,
.btn-brand:focus{
  background:var(--brand-hover);
  color:#fff;
}
.btn-brand:active{ transform:translateY(1px); }

/* Make the navbar toggler visible on light backgrounds */
.navbar-toggler{ border:1px solid #e5e7eb; }
.navbar-toggler-icon{
  background-image:none; width:1.4rem; height:1.1rem; position:relative; display:inline-block;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span{
  content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px;
}
.navbar-toggler-icon::before{ top:0 }
.navbar-toggler-icon::after{ bottom:0 }
.navbar-toggler-icon span{ top:50%; transform:translateY(-50%) }


/* Navbar Logo */
.site-logo{
  height: 70px;           /* adjust height as needed */
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px){
  .site-logo{
    height: 56px;         /* smaller logo on mobile */
  }
}




/* Banner (compact, in-container) */
.mini-banner{
  position:relative; overflow:hidden; border-radius:20px;
  border:1px solid rgba(28,61,115,.08);
  background:
    linear-gradient(135deg, rgba(28,61,115,.92), rgba(28,61,115,.78)),
    url('/static/images/banners/services.jpg') center/cover no-repeat;
  box-shadow:0 18px 40px rgba(28,61,115,.15);
  min-height:140px; display:flex; align-items:flex-end; padding:20px 22px; margin-bottom:24px;
}
.mini-banner h1{ margin:0; color:#fff; font-weight:900; font-size:clamp(24px,3.4vw,36px) }
.mini-banner h1 span{ border-left:7px solid var(--gold); padding-left:12px }





/* optional header link */
.see-all{ color:var(--brand); font-weight:700; text-decoration:none; }
.see-all:hover{ text-decoration:underline; }



/* card shell */
.prod-card{
  
  border:1px solid rgba(17,24,39,.06);
  border-radius:14px;
  border-color: #4b4848;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.prod-card:hover{
  transform: translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

/* image */
.prod-thumb img{ object-fit:cover; }

/* body */
.prod-body{ padding:14px 14px 16px; display:flex; flex-direction:column; height:100%; }
.prod-title{
  font-size:1.05rem;
  font-weight:800;
  color:#111827;
  margin:0 0 .75rem 0;
  line-height:1.25;
}

/* button */

/* small spacing tweak on phones */
@media (max-width: 575.98px){
  .prod-body{ padding:12px; }
}





/* button */
.btns{
  display:inline-block; align-self:center;
  padding:8px 14px; font-size:12px; font-weight:700; letter-spacing:.2px;
  color:#fff; background:var(--brand); border:1px solid var(--brand);
  border-radius:999px; text-decoration:none;
  transition:filter .15s, transform .15s;
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }

/* small screens: keep 4 per row via horizontal scroll */
@media (max-width: 992px){
  .products-rail{ min-width: 1000px; } /* prevents shrinking; adjust as needed */
}








/* pagination */
.pagination{
  list-style:none; padding:0; margin:26px 0 0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
}
.page-link{
  display:inline-block; min-width:40px; text-align:center; padding:9px 12px;
  text-decoration:none; color:var(--text); border:1px solid var(--border);
  border-radius:10px; font-size:14px; background:#fff;
  transition:background .2s, border-color .2s, transform .15s;
}
.page-link:hover{ background:#f9fafb; border-color:#d1d5db; transform:translateY(-1px); }
.page-item.active .page-link{ background:var(--accent); color:#fff; border-color:var(--accent); }
.page-item.disabled .page-link{ opacity:.45; pointer-events:none; }
.ellipsis{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; color:#6b7280; }




/* newsletter band */
.nl-band{
  background: var(--brand);
  color:#fff;
  padding: clamp(24px, 4vw, 48px) 0;
}
.nl-title{ font-weight:800; letter-spacing:.2px; }
.nl-text{ color:rgba(255,255,255,.9); max-width:48ch; }
.nl-form{ max-width:520px; margin-left:auto; }
.nl-input{
  background:#e8f0fe;
  border:0; border-radius:.55rem;
  padding:.7rem .9rem;
}
.nl-input:focus{ box-shadow:0 0 0 .2rem rgba(255,255,255,.25); }
.btn-nl{
  background:#fff; color:var(--brand);
  border:0; border-radius:.55rem;
  padding:.7rem 1rem; font-weight:700;
}
.btn-nl:hover{ filter:brightness(.96); }

/* footer */
.site-footer{ background:#fff; padding: clamp(28px, 4vw, 56px) 0; }
.footer-logo{ height:100px; width:auto; }

.ft-head{
  font-weight:800; color:#111827; margin-bottom:.5rem; font-size:1rem;
}
.ft-links{ list-style:none; padding:0; margin:0; }
.ft-links li{ margin:.35rem 0; }
.ft-links a{ color:#4b5563; text-decoration:none; }
.ft-links a:hover{ color:var(--brand); }

.soc{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#eef2ff; color:var(--brand);
}
.soc:hover{ filter:brightness(.95); }

.ft-sep{ border-color:#28292b; margin: clamp(16px, 3vw, 28px) 0; }

.ft-sub{ font-weight:700; color:#111827; margin-bottom:.25rem; }
.ft-muted{ color:#6b7280; }
.ft-link{ color:#374151; text-decoration:none; }
.ft-link:hover{ color:var(--brand); }
.ft-copy{ color:#9ca3af; }

/* responsive */
@media (max-width: 991.98px){
  .nl-form{ margin-left:0; }
}
@media (max-width: 575.98px){
  .nl-title{ font-size:1.4rem; }
  .soc{ width:32px; height:32px; }
}