:root{
  --bg:#0b1220;
  --ink:#0e1424;
  --text:#0c1322;
  --muted:#5b6578;
  --brand:#2862ff;
  --brand-ink:#0a2a7a;
  --card:#ffffff;
  --light:#f4f6fb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#101828;background:var(--light)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1600px, 92%);margin-inline:auto}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:100}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0}
.logo{font-weight:800;font-size:1.25rem;color:#111}
.logo span{color:var(--brand)}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{padding:.75rem 1rem;border-radius:.75rem;font-size:1.1rem;font-weight:500}
.nav-list a:hover{background:#f1f5ff}
.nav-toggle{display:none}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:.75rem;border:1px solid #cdd6ff;font-weight:600}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.ghost{background:transparent}

.hero .container{padding:6rem 0;text-align:center}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 .5rem 0}
.hero p{max-width:50ch;color:#1f2a44}
.actions{display:flex;gap:.75rem;margin-top:1rem}
.cards{display:grid;grid-template-columns:repeat(5, 1fr);gap:1rem;margin:2rem 0  justify-content: center;
  margin: 2rem auto;
}
.card{background:var(--card);padding:1.25rem;border-radius:1rem;box-shadow:0 10px 20px rgba(16,24,40,.06);border:1px solid #eef2ff}
.card h3{margin-top:.25rem}
.text-link{font-weight:600}
.trusted{padding:2rem 0}
.trusted .logos{display:flex;flex-wrap:wrap;gap:1rem;color:#475467}

.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}
.stat{background:#fff;border:1px solid #eef2ff;border-radius:1rem;padding:1rem;margin:.75rem 0;box-shadow:0 10px 20px rgba(16,24,40,.06)}
.service{background:#fff;border-radius:1rem;padding:1rem;border:1px solid #eef2ff;margin:1rem 0}
.cta .cta-box{background:linear-gradient(180deg,#fff, #f5f8ff);border:1px solid #dfe7ff;border-radius:1rem;padding:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.form{display:flex;flex-direction:column;gap:.5rem}
.form input,.form textarea{padding:.75rem;border:1px solid #d0d5dd;border-radius:.75rem}
.form button{align-self:flex-start}
.form-card{margin:1rem 0}
.track-result{margin-top:1rem;min-height:2rem;background:#fff;border:1px dashed #d0d5dd;padding:1rem;border-radius:.75rem}
.hint{color:#667085;font-size:.9rem}
.contact-details .map{width:100%;height:280px;border:0;border-radius:.75rem}
.site-footer{margin-top:3rem;background:#0b1220;color:#d1d7ee;padding:2rem 0}
.site-footer h4{color:#fff;margin-top:0}
.footer-links{list-style:none;padding-left:0;margin:0}
.footer-links li{margin:.35rem 0}
.site-footer .print{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);margin-top:1.5rem;padding-top:1rem}

.small{font-size:.95rem}
@media (max-width: 900px){
  .cards{grid-template-columns:repeat(5, 1fr);border:1px solid #d0d5dd;border-radius:.6rem;padding:.4rem .6rem;background:#fff  justify-content: center;
  margin: 2rem auto;
}
  .nav-list{position:absolute;right:4%;top:64px;background:#fff;border:1px solid #e5e7eb;border-radius:.75rem;box-shadow:0 12px 30px rgba(0,0,0,.08);padding:.5rem;display:none;flex-direction:column}
  .nav-list.open{display:flex}
}

.logo-img{height:250px;width:auto;display:block;object-fit:contain}

.trusted{text-align:center}
.cards{text-align:center  justify-content: center;
  margin: 2rem auto;
}
.cards .card{text-align:left;margin-inline:auto}
.cta{text-align:center}



.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.25);z-index:0}
.hero .container{position:relative;z-index:1}



.page-hero::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,0.25); z-index:0;}
.page-hero h1,.page-hero p{position:relative;z-index:1}


/* Banner backgrounds */


.page-hero::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,0); z-index:0;}
.page-hero h1,.page-hero p{
  position:relative;
  z-index:1;
}


/* Service section backgrounds */

#sea.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#sea.service *{position:relative;z-index:1}


#air.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#air.service *{position:relative;z-index:1}


#road.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#road.service *{position:relative;z-index:1}


#customs.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#customs.service *{position:relative;z-index:1}

/* Definitive hero background */
.hero{
  background: url(''../img/hero.jpg'') center/cover no-repeat;
  position: relative;
  color: #fff;
}

/* Page banners */
.about-page .page-hero{
  position:relative;
  color:#fff;
  background:url('../img/hero.jpg') center/cover no-repeat;
}
.services-page .page-hero{
  position:relative;
  color:#fff;
  background:url('../img/hero.jpg') center/cover no-repeat;
}

#sea.service{
  background:url('../img/hero.jpg') center/cover no-repeat;
  color:#fff;position:relative;
}
#sea.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#sea.service *{position:relative;z-index:1}

#air.service{
  background:url('../img/hero.jpg') center/cover no-repeat;
  color:#fff;position:relative;
}
#air.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#air.service *{position:relative;z-index:1}

#road.service{
  background:url('../img/hero.jpg') center/cover no-repeat;
  color:#fff;position:relative;
}
#road.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#road.service *{position:relative;z-index:1}

#customs.service{
  background:url('../img/hero.jpg') center/cover no-repeat;
  color:#fff;position:relative;
}
#customs.service::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.35);z-index:0}
#customs.service *{position:relative;z-index:1}


/* --- Contact form overlay fix --- */
.page-hero {
  position: relative;
}

.form {
  position: relative;
  z-index: 1;
}


/* --- Page-specific containers --- */

/* Contact page container (narrower for forms) */
.contact-container {
  width: min(800px, 92%);
  margin-inline: auto;
}

/* Services page container (wider for service sections) */
.services-container {
  font-weight: bold;
  color: #ffffff;
  width: min(800px, 92%);
  margin-inline: auto;
}

/* Index page container (optional override for homepage) */
.index-container {
  width: min(1600px, 92%);
  margin-inline: auto;
}


/* --- Quotation Request Form Styles --- */
.form label {
  font-weight: 600;
  margin-top: 1rem;
  display: block;
}

.form input,
.form select,
.form textarea {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 5px rgba(40, 98, 255, 0.4);
}

.form button {
  background-color: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form button:hover {
  background-color: #1f4ecc;
}