/* =========================
   Design tokens
========================= */
:root{
  --brand-accent: #7bdcff;
  --underline-a: #4cc9ff;
  --underline-b: #6ae3ff;
  --tile-bg-dark: rgba(255,255,255,.06);
  --tile-border-dark: rgba(255,255,255,.12);
  --text-dim: .85;
}

/* =========================
   Section headings (all)
   .section-head, .cards-head, .nx-head
========================= */
.section-head,
.cards-head,
.nx-head{
  text-align:center;
  margin:0 0 12px;
}

.section-head .eyebrow{
  display:inline-block;
  font:600 .8rem/1 system-ui,Segoe UI,Roboto,Arial;
  padding:.25rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
}

/* Titles across sections */
.section-head .title,
.cards-head h2,
.nx-head h2{
  display:inline-block;
  margin:10px 0 14px;
  line-height:1.2;
  font-weight:800;
  font-size:clamp(1.6rem, 2.3vw + .8rem, 2.4rem);
  background:linear-gradient(90deg,#fff,var(--brand-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}

/* Underline accent */
.section-head .title::after,
.cards-head h2::after,
.nx-head h2::after{
  content:"";
  display:block;
  width:74px;height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--underline-a),var(--underline-b));
  opacity:.9;
}

/* Subtitles */
.section-head .subtitle,
.cards-head p,
.nx-sub{
  margin:0 auto 20px;
  opacity:var(--text-dim);
  max-width:900px;
  text-align:center;
}

/* Section block spacing */
.cards-block{ padding:22px 0 14px; }

/* =========================
   Our Network — UrbanDot style
   (uses .our-network2 wrapper)
========================= */
.our-network2 .nx-stats{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1024px){ .our-network2 .nx-stats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .our-network2 .nx-stats{grid-template-columns:1fr;} }

.nx-stat{
  position:relative;
  border-radius:16px;
  padding:20px 18px 16px;
  text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,0,0,.06) 0 14px, rgba(255,255,255,.06) 14px 28px),
    var(--tile-bg-dark);
  border:1px solid var(--tile-border-dark);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  transition:transform .22s ease, box-shadow .22s ease;
}
.nx-stat:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.22); }

/* top accent bar */
.nx-accent{
  position:absolute; inset:0 0 auto 0; height:6px;
  border-top-left-radius:16px; border-top-right-radius:16px;
  background:linear-gradient(90deg,#ff3b3b,#ff8c8c);
}

/* icon pill */
.nx-icon{
  width:42px; height:42px; margin:10px auto 8px;
  display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,.9); color:#ff3b3b;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.nx-value{
  color:#fff; font-weight:800;
  font-size:clamp(1.4rem, 2vw + .8rem, 2rem);
}
.nx-label{ opacity:.9; font-weight:500; }

/* =========================
   Card UI (Why Choose Us & Intl Capabilities)
========================= */
.cards-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr);
  width:min(1100px,92%); margin:0 auto;
}
@media (max-width:1024px){ .cards-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .cards-grid{grid-template-columns:1fr;} }

.caps-card{ border-radius:14px; display:flex; flex-direction:column; }

.caps-media{
  position:relative; overflow:hidden; border-radius:14px;
  height:clamp(150px, 22vw, 200px); /* reduced visual size */
  background:var(--tile-bg-dark);
  border:1px solid rgba(255,255,255,.08);
}
@media (min-width:768px){
  .caps-media{ height:clamp(150px, 20vw, 190px); }
}

.caps-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, filter .35s ease;
}

/* “+” overlay on hover */
.caps-media::after{
  content:"+"; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:2.4rem;
  opacity:0; transform:scale(.7);
  background:rgba(0,0,0,.45);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.caps-media:hover img{ transform:scale(1.06); filter:brightness(1.05) contrast(1.06); }
.caps-media:hover::after{ opacity:1; transform:scale(1); }

.caps-title{
  margin:10px 0 2px; font-weight:800; font-size:1rem; text-align:center;
}
.caps-desc{
  margin:0 0 6px; font-size:.95rem; opacity:var(--text-dim); text-align:center;
}

/* =========================
   Join Mailing
========================= */
.join-mailing{
  padding:50px 20px; background:#0e1624; color:#fff; text-align:center;
}
.mailing-form{
  margin-top:16px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.mailing-form input{
  min-width:260px; padding:.8rem 1rem; border-radius:10px; border:1px solid #ccc;
}
.mailing-form button{
  padding:.8rem 1.2rem; border-radius:10px; border:none; background:#007bff; color:#fff; font-weight:600;
}

/* =========================
   Footer
========================= */
.site-footer{ background:#0d1322; color:#e9eef7; padding:48px 20px 20px; }
.footer-grid{ display:grid; gap:26px; grid-template-columns:2fr 1fr 1fr 1.2fr; }
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }

.footer-col h4{ margin-bottom:12px; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-col a{ color:#d9e2f1; text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }

.footer-logo{ width:160px; margin-bottom:12px; }
.socials{ display:flex; gap:12px; }
.socials a{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.08);
  color:#fff; font-size:18px; transition:transform .3s ease, background .3s ease;
}
.socials a:hover{ background:#007bff; transform:translateY(-3px); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:20px; padding-top:12px; text-align:center; opacity:.8;
}

/* ====================================================================
   Section background video styles
   These styles position the globe video behind the content of specific
   sections and apply a subtle overlay so text remains readable. The
   video will cover the entire section and scale responsively on
   desktop and mobile. The same rules work in both light and dark
   themes by referencing existing overlay variables defined in
   style.css. */

.section-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* =================================================
   World network image backgrounds and animated
   canvas for Our Network, Why Choose Us and
   International Capabilities sections.
   The static globe video has been replaced with a
   slowly zooming network map background and a
   canvas overlay that draws connecting lines
   between random points to simulate routes across
   the world. These layers sit below the content and
   tinted overlay using z-index values matching the
   old video element (-2 for the map, -1 for the
   canvas) so the tinted overlay defined below still
   works.
=================================================== */
.network-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/img/global-reach.png");
  background-size: cover;
  background-position: center;
  animation: bc-zoom-pan 60s linear infinite;
  z-index: -3;
}

.network-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
  /* Blend lines over the tinted overlay to make them more subtle */
  mix-blend-mode: screen;
  opacity: 0.4;
}

@keyframes bc-zoom-pan {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.1) translate(-5%, -5%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

/* =====================
   Minimal About page
   ===================== */
.about-section {
  padding: clamp(60px, 8vw, 120px) 0;
  text-align: center;
  background: var(--panel-bg);
  color: var(--text-primary);
  overflow: hidden;
}
.about-section h1 {
  font-size: clamp(1.8rem, 2.6vw + 1rem, 2.8rem);
  margin-bottom: 1rem;
  font-weight: 700;
}
.about-section .lead {
  max-width: 900px;
  margin: 0 auto 1.25rem;
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.95;
}

/* Provide a tinted overlay above the video but below the content */
.our-network2::after,
.why-choose-us-block::after,
.intl-capabilities-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay);
  /* Place the tinted overlay above the animated network lines and below the content */
  z-index: -1;
}

/* Ensure sections are positioned relative so the absolutely positioned
   video and overlay anchor to them, and hide any overflow */
.our-network2,
.why-choose-us-block,
.intl-capabilities-block {
  position: relative;
  overflow: hidden;
}