/* ============================================
   BLUE SEA AND OCEAN — Logistics Solutions
   Shared stylesheet (EN + AR)
   ============================================ */

:root{
  --navy-950:#070c13;
  --navy-900:#0b131e;
  --navy-800:#101c2b;
  --navy-700:#16283b;
  --blue-500:#2f95d6;
  --blue-600:#1f7fbf;
  --blue-700:#1a6698;
  --teal-400:#3fc4b8;
  --orange-400:#f2a93c;
  --ink-white:#ffffff;
  --ink-100:#e9eef3;
  --ink-300:#b9c6d3;
  --ink-500:#8ea0b3;
  --overlay-dark: rgba(6,10,16,.62);
  --overlay-darker: rgba(4,7,12,.78);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --maxw: 1240px;
  --shadow-1: 0 20px 50px -20px rgba(0,0,0,.55);
  --font-head: 'Poppins', 'Tajawal', sans-serif;
  --font-body: 'Inter', 'Tajawal', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--navy-950);
  color:var(--ink-100);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
[dir="rtl"] body{ font-family:'Tajawal','Inter',sans-serif; }

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-head);
  margin:0 0 .5em;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.01em;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  font-family:'Tajawal',sans-serif;
  font-weight:800;
}
p{margin:0 0 1em;color:var(--ink-300);}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  font-weight:700;
  color:var(--teal-400);
}
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}
.section{
  position:relative;
  padding:96px 0;
}
.section-tight{padding:64px 0;}

.text-accent{color:var(--blue-500);}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 30px;
  border-radius:10px;
  font-weight:700;
  font-size:1rem;
  border:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  font-family:var(--font-head);
}
[dir="rtl"] .btn{font-family:'Tajawal',sans-serif;}
.btn-white{
  background:var(--ink-white);
  color:var(--blue-700);
}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(255,255,255,.35);}
.btn-solid{
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
  color:var(--ink-white);
}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(47,149,214,.6);}
.btn-block{width:100%;}

/* ---------- Header / Nav ---------- */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:50;
  padding:26px 0;
}
.site-header.is-solid{
  position:sticky;
  background:rgba(7,12,19,.86);
  backdrop-filter:blur(10px);
  padding:14px 0;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:52px;width:auto;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-text b{font-family:'Playfair Display',serif;font-size:1.05rem;letter-spacing:.04em;}
.brand-text span{font-size:.62rem;letter-spacing:.18em;color:var(--orange-400);}

.nav{display:flex;align-items:center;gap:30px;}
.nav a{
  font-size:.95rem;
  font-weight:600;
  color:var(--ink-100);
  padding:6px 2px;
  position:relative;
  white-space:nowrap;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:-4px;
  width:0;height:2px;
  background:var(--blue-500);
  transition:width .2s ease;
}
.nav a:hover::after,.nav a.active::after{width:100%;}
.nav a.active{color:var(--blue-500);}

.lang-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 20px;
  border-radius:999px;
  background:var(--blue-600);
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.03em;
}
.lang-switch:hover{background:var(--blue-500);}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{width:26px;height:2px;background:#fff;border-radius:2px;}

.mobile-panel{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--navy-950);
  padding:26px 28px;
  overflow-y:auto;
}
.mobile-panel.open{display:block;}
.mobile-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;}
.mobile-panel a{
  display:block;
  font-size:1.3rem;
  font-weight:700;
  padding:16px 0;
  border-bottom:1px solid var(--navy-700);
}
.mobile-close{background:none;border:none;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,10,16,.55) 0%, rgba(6,10,16,.35) 40%, rgba(6,10,16,.9) 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  flex:1;
  display:flex;
  align-items:center;
  padding-top:150px;
  padding-bottom:40px;
}
.hero-inner > .container{width:100%;}
.hero-card{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  padding:56px 44px;
  border-radius:28px;
  background:linear-gradient(120deg, rgba(63,196,184,.55), rgba(26,102,152,.72));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-1);
}
.hero-card h1{
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.35);
  text-transform:uppercase;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:30px;
}
.hero-actions .btn{min-width:190px;}

.topbar{
  position:relative;
  z-index:2;
  flex-shrink:0;
  width:100%;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(4,7,12,.55);
  padding:16px 0;
}
.topbar .container{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  font-size:.92rem;
  color:var(--ink-100);
}
.topbar-item{display:flex;align-items:center;gap:10px;}
.topbar-item svg{flex:none;color:var(--blue-500);}

/* ---------- Generic dark section w/ bg photo ---------- */
.bg-photo{
  position:relative;
  background-size:cover;
  background-position:center;
}
.bg-photo::before{
  content:"";
  position:absolute;inset:0;
  background:var(--overlay-dark);
}
.bg-photo.darker::before{background:var(--overlay-darker);}
.bg-photo > .container{position:relative;z-index:2;}

.bg-plain{background:var(--navy-900);}
.bg-plain-alt{background:var(--navy-800);}

/* ---------- Section headings ---------- */
.section-head{margin-bottom:44px;max-width:640px;}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  text-transform:uppercase;
}
.section-head h2 em{
  font-style:normal;
  color:var(--blue-500);
  display:block;
}
.section-head p{font-size:1.05rem;}

/* ---------- About / feature list ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:44px;
  align-items:start;
}
@media(min-width:960px){
  .about-grid{grid-template-columns:1fr 1fr;}
}
.about-copy p{font-size:1.02rem;}
.about-photo{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  border:1px solid rgba(255,255,255,.08);
}
.feature-list{display:flex;flex-direction:column;gap:26px;}
.feature-item{display:flex;gap:16px;align-items:flex-start;}
.feature-icon{
  flex:none;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
  margin-top:3px;
}
.feature-item h4{color:var(--blue-500);font-size:1.08rem;margin-bottom:6px;}
.feature-item p{margin:0;font-size:.96rem;}

.two-col-photo{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
@media(min-width:960px){
  .two-col-photo{grid-template-columns:.85fr 1.15fr;}
  .two-col-photo.reverse{grid-template-columns:1.15fr .85fr;}
  .two-col-photo.reverse .two-col-photo-media{order:2;}
}
.two-col-photo-media img{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  border:1px solid rgba(255,255,255,.08);
}

.pill-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px 36px;
  margin-top:8px;
}
@media(min-width:640px){ .pill-grid{grid-template-columns:1fr 1fr;} }
.pill-item h4{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink-white);
  font-size:1.02rem;
  margin-bottom:8px;
}
.pill-item h4 svg{color:var(--blue-500);flex:none;}
.pill-item p{font-size:.94rem;margin:0;}

/* ---------- Network & coverage cards ---------- */
.coverage-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}
@media(min-width:760px){
  .coverage-grid{grid-template-columns:1fr 1fr;}
}
.coverage-card{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:18px;
  align-items:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md);
  padding:14px;
}
.coverage-card img{
  width:100%;height:110px;object-fit:cover;border-radius:10px;
}
.coverage-card h4{
  display:inline-block;
  background:var(--blue-600);
  color:#fff;
  padding:8px 16px;
  border-radius:8px;
  font-size:.92rem;
  margin-bottom:8px;
}
.coverage-card p{font-size:.88rem;margin:0;}

/* ---------- Services detail (logistics solutions) ---------- */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:10px;
}
@media(min-width:640px){ .services-grid{grid-template-columns:1fr 1fr;} }
.tag-card h4{
  display:inline-block;
  background:var(--blue-600);
  color:#fff;
  padding:10px 20px;
  border-radius:8px;
  font-size:.98rem;
  margin-bottom:10px;
}
.tag-card p{font-size:.92rem;margin:0;}

/* ---------- Tech integration numbered list ---------- */
.numbered-panel{
  background:linear-gradient(120deg, rgba(26,102,152,.9), rgba(47,149,214,.75));
  border-radius:var(--radius-lg);
  padding:6px;
}
.numbered-list{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}
@media(min-width:640px){ .numbered-list{grid-template-columns:1fr 1fr;} }
.numbered-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:22px 20px;
}
.numbered-item .num{
  font-family:var(--font-head);
  font-size:1.6rem;
  font-weight:800;
  color:#fff;
  opacity:.85;
}
.numbered-item p{color:#eef6fb;margin:0;font-size:.96rem;font-weight:600;}

/* ---------- Efficiency metrics ---------- */
.metrics-card{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700));
  border-radius:var(--radius-lg);
  padding:34px;
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  margin-top:-70px;
  position:relative;
  z-index:3;
  max-width:560px;
  box-shadow:var(--shadow-1);
}
@media(min-width:560px){ .metrics-card{grid-template-columns:1fr 1fr;} }
.metrics-card h4{color:#fff;font-size:1.05rem;}
.metrics-card p{color:#e7f2f9;font-size:.9rem;margin:0;}
.metrics-media{border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;}
@media(min-width:960px){ .metrics-media{border-radius:var(--radius-lg);} }

/* ---------- Partners ---------- */
.partners-strip{
  background:var(--navy-950);
  padding:44px 0;
  border-top:1px solid var(--navy-700);
}
.partners-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
  align-items:center;
}
@media(min-width:640px){ .partners-row{grid-template-columns:repeat(4,1fr);} }
@media(min-width:960px){ .partners-row{grid-template-columns:repeat(9,1fr);} }
.partners-row img{
  max-height:46px;
  width:auto;
  margin:0 auto;
  filter:grayscale(0%);
  opacity:.92;
}

/* ---------- Tracking / Quotation cards ---------- */
.floating-card{
  max-width:640px;
  margin:0 auto;
  background:linear-gradient(135deg, rgba(63,196,184,.5), rgba(26,102,152,.82));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  text-align:center;
  box-shadow:var(--shadow-1);
  backdrop-filter:blur(6px);
}
.floating-card.wide{max-width:680px;text-align:left;}
[dir="rtl"] .floating-card.wide{text-align:right;}
.floating-card h2{color:#fff;text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.5rem);}

.field{margin-bottom:20px;text-align:left;}
[dir="rtl"] .field{text-align:right;}
.field label{
  display:block;
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#fff;
  margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(3,6,10,.75);
  color:#fff;
  font-family:var(--font-body);
  font-size:.98rem;
}
[dir="rtl"] .field input,[dir="rtl"] .field textarea{font-family:'Tajawal',sans-serif;}
.field textarea{min-height:120px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-500);}
.form-note{font-size:.82rem;color:#dceaf3;margin-top:14px;}
.form-success{
  display:none;
  margin-top:16px;
  padding:14px 16px;
  border-radius:8px;
  background:rgba(20,140,90,.25);
  border:1px solid rgba(90,220,150,.4);
  color:#d9fbe9;
  font-size:.92rem;
}
.form-success.show{display:block;}

/* ---------- Location ---------- */
.map-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-1);
  max-width:760px;
  margin:0 auto;
}
.map-frame iframe{width:100%;height:420px;border:0;display:block;}

/* ---------- Footer ---------- */
.site-footer{
  background:#020407;
  padding:20px 0;
  border-top:1px solid var(--navy-700);
}
.site-footer .container{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  font-size:.9rem;
  color:var(--ink-300);
}
.site-footer a{color:var(--ink-100);}
.footer-brand{display:flex;align-items:center;gap:8px;}
.footer-brand svg{color:var(--blue-500);}

/* ---------- Ribbon (bottom accent like the PDF) ---------- */
.accent-ribbon{
  height:8px;
  background:linear-gradient(90deg,var(--teal-400),var(--blue-600));
}

/* ---------- Responsive nav visibility ---------- */
@media(max-width:980px){
  .nav{display:none;}
  .nav-toggle{display:flex;}
}
@media(min-width:981px){
  .mobile-panel{display:none!important;}
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Utility spacing ---------- */
.mt-lg{margin-top:70px;}
.center{text-align:center;}