/* =====================================================================
   PREMIUM THEME — Deep Blue & Yellow
   Load this AFTER assets/css/style.css so it can override it.
   Signature motifs:
     1) "Trade-route" hairline grid + dashed yellow line in the hero
     2) Circular yellow "stamp" badges on every icon (certification feel)
   Palette: Deep Blue #011F7B / Yellow #FFBA09 (brand colors supplied)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --navy-950:#010B33;
  --navy-900:#011F7B;
  --navy-800:#0A2E96;
  --navy-700:#1740B0;
  --gold-500:#FFBA09;
  --gold-300:#FFCB3D;
  --gold-100:#FFF1C7;
  --ink-900:#101827;
  --ink-600:#57606F;
  --paper-0:#FFFFFF;
  --paper-50:#F6F7F9;
  --hairline:rgba(11,31,61,.12);
  --hairline-gold:rgba(255,186,9,.35);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

/* ---------- base type ---------- */
body{ font-family:var(--font-body); color:var(--ink-900); }
h1,h2,h3,h4,h5,h6,
.hero-title,.site-title,.service-title,.blog-title,
.testimonial-quote p,.quote-header h4{
  font-family:var(--font-display);
  letter-spacing:-.01em;
}
.site-title{ color:var(--navy-900); }
.site-title span{ color:var(--gold-500); }

/* eyebrow labels get a mono leader-line treatment */
.site-title-tagline,.hero-sub-title{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-500) !important;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.site-title-tagline i,.hero-sub-title i{ color:var(--gold-500); }
.site-title-tagline::before,.hero-sub-title::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--gold-500);
  display:inline-block;
}

/* ---------- buttons ---------- */
.theme-btn{
  background:var(--navy-900);
  color:var(--paper-0);
  border:1px solid var(--navy-900);
  border-radius:2px;
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.02em;
  transition:all .25s ease;
}
.theme-btn:hover{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--navy-950);
}
.theme-btn2{
  background:transparent !important;
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
}
.theme-btn2:hover{
  border-color:var(--gold-500);
  color:var(--gold-300);
}

/* ---------- header ---------- */
.header-top{ background:var(--navy-950); border-bottom:1px solid var(--hairline-gold); }
.header-top-list a{ color:rgba(255,255,255,.75); font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; }
.header-top-list a i{ color:var(--gold-500); }
.header-top-list a:hover{ color:var(--gold-300); }

.main-navigation{ background:var(--navy-900); }
.navbar-nav .nav-link{ color:#fff !important; font-family:var(--font-body); font-weight:500; }
.navbar-nav .nav-link:hover,
.navbar-nav .dropdown:hover .nav-link{ color:var(--gold-300) !important; }
.dropdown-menu{ border-radius:0; border-top:2px solid var(--gold-500); }
.dropdown-item:hover{ background:var(--gold-100); color:var(--navy-900); }

/* If your logo is a dark mark meant for light backgrounds, this forces it
   to render white against the new navy header. Delete this rule if you
   swap in a dedicated light-mode logo file instead. */
.navbar-brand img,.offcanvas-brand img,.footer-logo img{ filter:brightness(0) invert(1); }

/* ---------- hero ---------- */
.hero-single{ position:relative; }
.hero-single::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(1,11,51,.93) 0%, rgba(1,11,51,.74) 45%, rgba(1,11,51,.32) 100%);
}
.hero-single::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,186,9,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,186,9,.09) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.hero-content{ position:relative; z-index:2; }
.hero-title{
  color:#fff;
  font-weight:700;
  position:relative;
  padding-bottom:26px;
}
.hero-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  height:2px; width:140px;
  background-image:repeating-linear-gradient(90deg, var(--gold-500) 0 10px, transparent 10px 16px);
  animation:routeMove 3s linear infinite;
}
@keyframes routeMove{ to{ background-position:26px 0; } }
.hero-content p{ color:rgba(255,255,255,.75); }

/* ---------- gold "stamp" icon badges, used across feature / service / process / choose / about / counter ---------- */
.feature-icon,.about-item .icon,.process-item .icon,
.choose-item-icon,.counter-box .icon,.footer-contact .icon{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--gold-100);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.footer-contact .icon{ width:40px; height:40px; margin-bottom:0; color:var(--gold-500); }

/* ---------- feature cards ---------- */
.feature-area.fa-negative{ background:transparent; }
.feature-item{
  background:var(--paper-0);
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:36px 30px;
  transition:border-color .25s ease, transform .25s ease;
}
.feature-item:hover{ border-color:var(--gold-500); transform:translateY(-4px); }
.feature-content h4{ font-size:19px; margin-bottom:10px; }

/* ---------- about ---------- */
.about-experience{
  background:var(--navy-900);
  border-radius:2px;
}
.about-experience h5{ font-family:var(--font-mono); color:var(--gold-500); }
.about-experience p{ color:rgba(255,255,255,.75); }
.about-item h6{ font-family:var(--font-display); }

/* ---------- services (dark, gridded) ---------- */
.service-area.sa-bg{ background:var(--navy-950) !important; position:relative; overflow:hidden; }
.service-area.sa-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,186,9,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,186,9,.06) 1px, transparent 1px);
  background-size:56px 56px;
}
.service-area.sa-bg .container{ position:relative; z-index:1; }
.service-item{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  padding:32px 24px;
  transition:border-color .25s ease, background .25s ease;
}
.service-item:hover{ border-color:var(--gold-500); background:rgba(255,186,9,.06); }
.service-icon{ background:rgba(255,186,9,.12); }
.service-title a{ color:#fff; }
.service-item:hover .service-title a{ color:var(--gold-300); }
.service-text{ color:rgba(255,255,255,.6); }

/* ---------- process / standards ---------- */
.process-item{ padding:30px 24px; border:1px solid var(--hairline); transition:border-color .25s ease; }
.process-item:hover{ border-color:var(--gold-500); }

/* ---------- counters ---------- */
.counter-box{ text-align:center; }
.counter{ font-family:var(--font-mono); font-size:38px; color:var(--navy-900); font-weight:600; }
.counter-box .unit{ color:var(--gold-500); font-family:var(--font-mono); font-size:22px; }
.counter-box .title{ color:var(--ink-600); }

/* ---------- location map ---------- */
.location-item .point{ background:var(--gold-500); box-shadow:0 0 0 6px rgba(255,186,9,.2); }
.location-item.active .point{ background:var(--navy-900); box-shadow:0 0 0 6px rgba(11,31,61,.18); }

/* ---------- CTA ---------- */
.cta-area{ position:relative; }
.cta-area::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(1,11,51,.95), rgba(1,11,51,.78));
}
.cta-content{ position:relative; z-index:1; text-align:center; }
.cta-content h1{ color:#fff; }
.cta-content p{ color:rgba(255,255,255,.75); }

/* ---------- why choose us ---------- */
.choose-item{ border-left:2px solid var(--hairline-gold); padding-left:22px; margin-bottom:26px; }
.choose-item-icon{ margin-bottom:14px; }

/* ---------- testimonials ---------- */
.testimonial-area.ts-bg{ background:var(--navy-950) !important; }
.testimonial-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  padding:34px;
  border-radius:2px;
}
.testimonial-quote p{ color:rgba(255,255,255,.88); font-size:17px; }
.testimonial-rate i{ color:var(--gold-500); }
.testimonial-author-info h4{ color:#fff; font-family:var(--font-display); }
.testimonial-author-info p{
  color:var(--gold-300);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.testimonial-shadow-icon{ opacity:.15; }

/* ---------- quote form ---------- */
.quote-form{ background:var(--paper-0); border:1px solid var(--hairline); }
.quote-header h4{ color:var(--navy-900); }
.quote-form h5{ font-family:var(--font-mono); text-transform:uppercase; font-size:13px; letter-spacing:.08em; color:var(--ink-600); }
.quote-form .form-control,.quote-form .select{
  border:none;
  border-bottom:1px solid var(--hairline);
  border-radius:0;
  padding-left:28px;
  background:transparent;
}
.quote-form .form-icon i{ color:var(--gold-500); }
.quote-form .form-control:focus{ border-bottom-color:var(--gold-500); box-shadow:none; }
.quote-form .theme-btn{ border-radius:2px; }

/* ---------- blog ---------- */
.blog-item{ border:1px solid var(--hairline); }
.blog-date{ background:var(--navy-900); color:var(--gold-300); font-family:var(--font-mono); }
.blog-title a{ color:var(--ink-900); }
.blog-title a:hover{ color:var(--navy-900); }

/* ---------- partners ---------- */
.partner-area.bg{ background:var(--paper-50); }
.partner-wrapper img{ filter:grayscale(1) opacity(.55); transition:filter .25s ease; }
.partner-wrapper img:hover{ filter:none; }

/* ---------- footer ---------- */
.footer-area{ background:var(--navy-950); }
.footer-widget-title{
  font-family:var(--font-mono);
  color:var(--gold-500);
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.08em;
}
.footer-widget-box p,.footer-list a,.footer-contact .content p,.footer-contact .content a{
  color:rgba(255,255,255,.65);
}
.footer-contact .content h6{ color:#fff; font-family:var(--font-display); font-size:14px; }
.footer-list a:hover{ color:var(--gold-300); }
.footer-contact .icon{ background:rgba(255,186,9,.12); }
.footer-social a{ border:1px solid rgba(255,255,255,.15); color:#fff; }
.footer-social a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-950); }
.copyright{ border-top:1px solid rgba(255,255,255,.08); }
.copyright-text,.copyright-text a{ color:rgba(255,255,255,.5) !important; }

/* ---------- misc ---------- */
#scroll-top{ background:var(--navy-900); color:var(--gold-300); border-radius:2px; }
#scroll-top:hover{ background:var(--gold-500); color:var(--navy-950); }

@media (prefers-reduced-motion:reduce){
  .hero-title::after{ animation:none; }
}