:root{
  --navy:#1E3159;
  --navy-2:#16233F;
  --navy-3:#22355E;
  --gold:#D9A441;
  --gold-2:#E8BE73;
  --steel:#5B6B85;
  --light-bg:#F5F7FA;
  --soft-navy:#EAF0FA;
  --soft-navy-2:#F2F5FC;
  --text-muted:#6B7690;
}
body{
  font-family:'Inter',sans-serif;
  color:#28304a;
}
h1,h2,h3,h4,h5,.font-heading{
  font-family:'Poppins',sans-serif;
}
.bg-navy{background-color:var(--navy)!important;}
.bg-navy-2{background-color:var(--navy-2)!important;}
.bg-navy-3{background-color:var(--navy-3)!important;}
.bg-light-soft{background-color:var(--light-bg)!important;}
.bg-soft-navy{background-color:var(--soft-navy)!important;}
.bg-soft-navy-2{background-color:var(--soft-navy-2)!important;}
.text-gold{color:var(--gold)!important;}
.bg-gold{background-color:var(--gold)!important;}
.text-steel{color:var(--steel)!important;}
.text-navy{color:var(--navy)!important;}
a{text-decoration:none;}

.btn-gold{
  background-color:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
  font-weight:600;
  padding:.75rem 1.75rem;
  border-radius:50px;
}
.btn-gold:hover{background-color:var(--gold-2); color:var(--navy);}
.btn-navy-outline{
  border:1.5px solid var(--navy);
  color:var(--navy);
  border-radius:50px;
  font-weight:600;
  padding:.65rem 1.5rem;
}
.btn-navy-outline:hover{background:var(--navy); color:#fff;}

/* Top bar */
.top-bar{font-size:.9rem; border-bottom:1px solid rgba(30,49,89,.08); position:relative; z-index:1030;}
.top-bar a{color:var(--navy);}
.top-bar a:hover{color:var(--gold);}
.top-bar .dropdown-menu{
  z-index:1051; border:1px solid rgba(30,49,89,.1); box-shadow:0 10px 25px rgba(30,49,89,.15);
}
.top-bar .dropdown-item{color:var(--navy);}
.top-bar .dropdown-item:hover, .top-bar .dropdown-item:focus{background-color:var(--soft-navy); color:var(--navy);}
.social-ic{
  width:32px;height:32px;line-height:32px;text-align:center;
  background:rgba(30,49,89,.07); border-radius:6px; color:var(--navy); font-size:.85rem;
}
.social-ic:hover{background:var(--gold); color:var(--navy);}

/* Navbar */
.navbar .nav-link{
  color:var(--navy)!important;
  font-weight:600;
  padding:1.6rem 1rem!important;
}
.navbar .nav-link:hover, .navbar .nav-link.active{color:var(--gold)!important;}
.navbar-brand small{
  display:block; font-size:.7rem; letter-spacing:.12em; color:var(--steel); font-weight:600;
}

/* Section label */
.section-label{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--gold); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem;
}
.section-label::before{content:""; width:22px; height:2px; background:var(--gold); display:inline-block;}

/* Hero carousel */
.hero-carousel{max-width:1600px; margin:0 auto;}
.hero-banner-img{width:100%; height:570px; display:block; object-fit:cover; object-position:center;}
@media (max-width: 767.98px){
  .hero-banner-img{height:280px;}
}
.carousel-indicators{
  margin-bottom:1.25rem;
}
.carousel-indicators [data-bs-target]{
  width:12px; height:12px; border-radius:50%; background-color:rgba(255,255,255,.5);
  border:none;
}
.carousel-indicators .active{background-color:var(--gold);}
.carousel-control-prev, .carousel-control-next{width:6%; opacity:1;}
.carousel-control-prev-icon, .carousel-control-next-icon{
  background-color:var(--navy); border-radius:50%; padding:1.4rem; background-size:1.1rem;
  box-shadow:0 10px 25px rgba(30,49,89,.2);
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon{background-color:var(--gold);}
@media (max-width: 991.98px){
  .carousel-control-prev, .carousel-control-next{display:none;}
}

/* floating stat card on hero */
.floating-stat{
  position:absolute; left:-24px; bottom:-30px;
  background:#fff; border-radius:14px; padding:1.1rem 1.4rem;
  box-shadow:0 20px 45px rgba(30,49,89,.18);
  display:flex; align-items:center; gap:.8rem;
}

.feature-card{
  border-radius:16px; padding:2.2rem 1.8rem; height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
  border:1px solid #EDF0F6;
}
.feature-card:hover{transform:translateY(-8px); box-shadow:0 20px 45px rgba(30,49,89,.12);}
.feature-card.active-card{background:var(--navy); color:#fff; border:none;}
.feature-card.active-card .text-steel{color:#c7cee3!important;}
.icon-circle{
  width:60px; height:60px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--light-bg); font-size:1.5rem; color:var(--navy); margin-bottom:1.2rem;
}
.feature-card.active-card .icon-circle{background:var(--gold); color:var(--navy);}

.stat-pill{
  background:#fff; border-radius:14px; padding:1.4rem 1rem; text-align:center;
  box-shadow:0 10px 30px rgba(30,49,89,.06); height:100%;
}
.stat-pill .num{font-size:2rem; font-weight:800; color:var(--navy); font-family:'Poppins',sans-serif;}

/* Product cards */
.product-card{
  border-radius:16px; overflow:hidden; border:1px solid #EDF0F6; height:100%;
  transition:transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease, border-color .4s ease;
  background:#fff; display:flex; flex-direction:column;
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 45px rgba(30,49,89,.16);
  border-color:rgba(217,164,65,.35);
}
.product-card img{height:190px; width:100%; object-fit:cover;}

.product-card-img{position:relative; overflow:hidden;}
.product-card-img img{display:block; transition:transform .6s ease;}
.product-card:hover .product-card-img img{transform:scale(1.1);}
.product-card-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(11,26,58,.55) 100%);
  opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.product-card:hover .product-card-img::after{opacity:1;}

.product-tag{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  background:rgba(255,255,255,.94); color:var(--navy); font-weight:600; font-size:.68rem;
  padding:.3rem .65rem; border-radius:50px; display:inline-flex; align-items:center; gap:.35rem;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s ease, transform .35s ease;
}
.product-card:hover .product-tag{opacity:1; transform:translateY(0);}
.product-tag i{color:var(--gold); font-size:.75rem;}

.fob-badge{
  background:var(--light-bg); color:var(--navy); font-weight:600; font-size:.8rem;
  border-radius:50px; padding:.3rem .8rem; display:inline-flex; align-items:center; gap:.4rem;
}
.fob-badge i{color:var(--gold); font-size:.75rem;}

.product-card .btn-gold{
  display:flex; align-items:center; justify-content:center; gap:.3rem;
  flex-wrap:nowrap; white-space:nowrap; line-height:1.2;
  padding:.55rem 1rem; font-size:.85rem;
  transition:background-color .3s ease, box-shadow .3s ease;
}
.product-card .btn-gold:hover{box-shadow:0 10px 22px rgba(217,164,65,.35);}
.product-card .btn-gold .bi-arrow-right{flex-shrink:0; transition:transform .3s ease;}
.product-card .btn-gold:hover .bi-arrow-right{transform:translateX(4px);}

@media (max-width:575.98px){
  .product-card img{height:150px;}
  .product-card .p-3{padding:.75rem !important;}
  .product-card .btn-gold{padding:.5rem .6rem; font-size:.78rem; gap:.2rem;}
  .fob-badge{font-size:.72rem; padding:.25rem .6rem;}
}

.category-card{position:relative; border-radius:16px; overflow:hidden; height:340px;}
.category-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.category-card:hover img{transform:scale(1.08);}
.category-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,49,89,0) 30%, rgba(30,49,89,.9) 100%);
  display:flex; align-items:flex-end; padding:1.5rem;
}

/* Benefits dark section */
.benefit-num{
  font-size:2.6rem; font-weight:800; color:var(--gold); font-family:'Poppins',sans-serif; line-height:1;
}
.benefit-item{border-bottom:1px solid rgba(30,49,89,.1); padding:1.8rem 0;}

/* geography */
.geo-pin{
  background:#fff; border-radius:50px; padding:.6rem 1.1rem; box-shadow:0 10px 25px rgba(30,49,89,.15);
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--navy); font-size:.9rem;
  position:absolute;
}

/* ===== Global Network — full-page animated map ===== */
.text-steel-light{color:#AEB9D1;}

.network-fullpage{
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
@media (max-width:991.98px){
  .network-fullpage{min-height:auto; padding:5rem 0;}
}
.network-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 25% 15%, rgba(217,164,65,.14), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(217,164,65,.08), transparent 50%);
}

.network-stat{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:1.3rem 1.1rem; height:100%; text-align:center;
  transition:transform .3s ease, background .3s ease;
}
.network-stat:hover{transform:translateY(-4px); background:rgba(255,255,255,.08);}
.network-stat .stat-top{display:flex; align-items:center; justify-content:center; gap:.55rem; margin-bottom:.3rem;}
.network-stat .stat-icon{font-size:1.5rem; color:var(--gold-2); opacity:.9;}
.network-stat .num{font-size:1.9rem; font-weight:800; color:var(--gold); font-family:'Poppins',sans-serif; line-height:1;}
.network-stat .label{color:#AEB9D1; font-size:.83rem; margin-top:.2rem;}

.map-visual{
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
}
.map-visual-img{width:100%; display:block; user-select:none;}
.map-scan{
  position:absolute; top:0; left:-35%; width:35%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation:scanSweep 5s ease-in-out infinite; pointer-events:none; mix-blend-mode:screen;
}
.map-pulse{
  position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:50%; border:2px solid rgba(120,220,255,.85);
  animation:radarPing 2.4s ease-out infinite; pointer-events:none;
}
@keyframes scanSweep{
  0%{left:-35%;}
  60%{left:110%;}
  100%{left:110%;}
}
@keyframes radarPing{
  0%{transform:scale(.5); opacity:.9;}
  100%{transform:scale(2.8); opacity:0;}
}

.testimonial-card{
  border-radius:16px; padding:2.2rem; background:#fff; border:1px solid #EDF0F6; height:100%;
}
.testimonial-avatar{
  width:60px; height:60px; object-fit:cover; flex-shrink:0;
}
.quote-mark{font-size:3rem; color:var(--gold); font-family:Georgia, serif; line-height:1;}

.cta-strip{
  border-radius:20px; overflow:hidden; position:relative;
  box-shadow:0 20px 50px rgba(30,49,89,.08);
}

footer a{color:var(--navy);}
footer a:hover{color:var(--gold);}
.footer-social{
  width:38px; height:38px; border-radius:50%; background:rgba(30,49,89,.08);
  display:inline-flex; align-items:center; justify-content:center; color:var(--navy);
}
.footer-social:hover{background:var(--gold); color:var(--navy);}

.form-control, .form-select{
  border-radius:8px; padding:.65rem .9rem; border:1px solid #DCE1EC;
}
.form-control:focus, .form-select:focus{
  border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(242,169,59,.2);
}
.form-check-input:checked{background-color:var(--navy); border-color:var(--navy);}

@media (max-width: 767.98px){
  .floating-stat{position:static; margin-top:1.5rem; box-shadow:none; border:1px solid #EDF0F6;}
}

/* Inner-page hero / breadcrumb banner */
.page-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  padding:5.5rem 0 4rem;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(217,164,65,.18), transparent 60%);
}
.page-hero .section-label{justify-content:center;}
.page-hero .breadcrumb-link{color:#c7cee3;}
.page-hero .breadcrumb-link:hover{color:var(--gold);}

/* Scroll-to-top button */
.scroll-top-btn{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px; border:none; border-radius:50%;
  background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; box-shadow:0 10px 25px rgba(30,49,89,.25); z-index:1040;
  opacity:0; visibility:hidden; transform:translateY(15px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .3s ease;
}
.scroll-top-btn.show{opacity:1; visibility:visible; transform:translateY(0);}
.scroll-top-btn:hover{background:var(--gold); color:var(--navy);}
@media (max-width: 767.98px){
  .scroll-top-btn{right:16px; bottom:16px; width:44px; height:44px; font-size:1.05rem;}
}

/* Contact page */
.contact-card{
  border-radius:16px; padding:2rem 1.8rem; background:#fff; border:1px solid #EDF0F6; height:100%;
  text-align:center;
}

/* Process / how-it-works steps */
.process-step{
  background:#fff; border-radius:16px; padding:2rem 1.6rem; height:100%;
  border:1px solid #EDF0F6; position:relative;
}
.process-num{
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Poppins',sans-serif;
  margin-bottom:1.1rem;
}

/* ===== Scroll-reveal animation ===== */
.reveal{
  opacity:0;
  transform:translateY(45px);
  transition:opacity .7s cubic-bezier(.25,.7,.35,1), transform .7s cubic-bezier(.25,.7,.35,1);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1; transform:translateY(0);}
/* auto-stagger direct children within a row/grid */
.row > .reveal:nth-child(1){transition-delay:.05s;}
.row > .reveal:nth-child(2){transition-delay:.15s;}
.row > .reveal:nth-child(3){transition-delay:.25s;}
.row > .reveal:nth-child(4){transition-delay:.35s;}
.row > .reveal:nth-child(5){transition-delay:.45s;}
.row > .reveal:nth-child(6){transition-delay:.55s;}

/* ===== Floating animation ===== */
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
@keyframes floatYSlow{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-16px);}
}
@keyframes kenBurns{
  0%{transform:scale(1);}
  100%{transform:scale(1.08);}
}
.icon-circle{animation:floatY 3.6s ease-in-out infinite;}
.floating-stat{animation:floatYSlow 4.5s ease-in-out infinite;}
.geo-pin{animation:floatY 3s ease-in-out infinite;}
.carousel-item.active .hero-banner-img{animation:kenBurns 7s ease-in-out infinite alternate;}

/* ===== Scroll progress bar ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  z-index:2000; transition:width .1s linear; pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .icon-circle, .floating-stat, .geo-pin, .carousel-item.active .hero-banner-img{animation:none;}
  .map-pulse, .map-scan{animation:none;}
}

/* ==========================================================================
   Responsive refinements — home, about, products, services, contact.
   Desktop layout is untouched: every rule is scoped to a smaller breakpoint
   (or is overflow-safe). No content or structural change.
   ========================================================================== */

/* Keep any media/table from spilling past its container on narrow screens */
img, svg, video, iframe, table{max-width:100%;}

/* ---- Tablet and below (< 992px) ---- */
@media (max-width: 991.98px){
  h1, .h1{font-size:2.1rem;}
  h2, .h2{font-size:1.7rem;}
  .page-hero{padding:4rem 0 3rem;}
  /* Collapsed mobile menu: tighter, easier-to-tap rows */
  .navbar-collapse .nav-link{padding:.65rem .5rem !important;}
}

/* ---- Phones / small tablets (< 768px) ---- */
@media (max-width: 767.98px){
  h1, .h1{font-size:1.85rem;}
  h2, .h2{font-size:1.5rem;}
  .page-hero{padding:3.25rem 0 2.5rem;}
  .feature-card, .process-step, .contact-card{padding:1.5rem 1.25rem;}
  .testimonial-card{padding:1.75rem 1.5rem;}
  .benefit-num{font-size:2.1rem;}
  .benefit-item{padding:1.3rem 0;}
  .stat-pill .num, .network-stat .num{font-size:1.6rem;}
  .quote-mark{font-size:2.4rem;}
}

/* ---- Small phones (< 576px) ---- */
@media (max-width: 575.98px){
  h1, .h1{font-size:1.6rem;}
  h2, .h2{font-size:1.35rem;}
  .section-label{font-size:.78rem;}
  .btn-gold, .btn-navy-outline{padding:.6rem 1.25rem;}
  .icon-circle{width:52px; height:52px; font-size:1.3rem;}
  .category-card{height:260px;}
  .container, .container-fluid{padding-left:1rem; padding-right:1rem;}
  /* Contact details table: let labels wrap instead of crowding the value */
  .contact-details-table th{white-space:normal; width:42%;}
  .contact-details-table th, .contact-details-table td{padding:.7rem .5rem;}
}