/* ==== GLOBAL / LAYOUT (sticky footer) ==== */
html, body {
  height: 100%;
  margin: 0;
}
.homepage-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}
body {
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  background: transparent;
  color: #333;
}
main {
  flex: 1;               /* pushes footer to the bottom when content is short */
  padding-top: 110px;    /* keep content below the fixed navbar */
}

/* Optional dark overlay over background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* Reset */
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==== NAVBAR ==== */
nav {
  background-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
  overflow: visible; /* let dropdowns show */
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: center;      /* center the logo stack */
  position: relative;           /* menu positions inside here */
  height: 70px;
  padding: 6px 20px;
}

.navbar-logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  position: absolute;
  left: 20px;
}

.navbar-logo {
  height: 200px;   /* ~5x bigger */
  width: auto;
  margin-bottom: 0;
}

.navbar-title {
  font-size: 1.8em;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
.navbar-title .speed,
.navbar-title .pack { color: #fff; font-family: 'Faster One', sans-serif; }

.express-container { display: flex; align-items: center; margin-top: 5px; font-family: 'Faster One', sans-serif; }
.express { color: #fff; font-size: 1.2em; font-style: italic; text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,.5); margin: 0 10px; }
.line { width: 50px; height: 2px; background-color: #fffb00; }

/* Right-side menu */
nav ul {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;          /* vertical centering in the bar */
}

nav ul li { position: relative; margin: 0 10px; }

nav ul li a {
  display: block;
  padding: 8px 10px;
  font-size: 18px;
  color: #f8f8f9;
  text-decoration: none;
  font-weight: bold;
  transition: background-color .3s, color .3s;
}
nav ul li a.active { border-bottom: 2px solid #f8f8f9; }
nav ul li a:hover  { background-color: rgba(0,0,0,.3); color: #fff; }

/* Dropdown: perfectly aligned under the Contact tab */
nav ul li.dropdown { position: relative; }

nav ul li.dropdown .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;               /* directly beneath the tab — no gap */
  left: 50%;               /* center to the tab */
  transform: translateX(-50%);
  margin-top: 6px;         /* small breathing room */
  min-width: 220px;
  background-color: rgba(0,0,0,.8);
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  z-index: 2000;
}

.dropdown-content li { margin: 0; }
.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  display: block;
  text-align: left;
}
.dropdown-content a:hover { background-color: rgba(255,255,255,.08); }

nav ul li:hover > .dropdown-content,
nav ul li:focus-within > .dropdown-content {
  display: block;          /* stays open while moving the mouse */
}
/* ==== END NAVBAR ==== */




/* ==== HERO ==== */
.hero {
  color: #fff;
  text-align: center;
  padding: 100px 20px 20px;
}
.hero-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 30px;
  border-radius: 10px;
}
.hero h1 { font-size: 3em; margin-bottom: 20px; }
.hero h2 { font-size: 2em; margin-bottom: 20px; }
.hero p  { font-size: 1.2em; margin-bottom: 20px; }

/* ==== THREE BOXES ==== */
.three-boxes {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  padding: 30px 20px;
  background-color: transparent;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 40px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* IMPORTANT: remove the old relative/top hack that caused overlap */
  /* position: relative; top: 70%;  <-- deleted */
}
.box {
  background-color: #f4f4f9;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 10px;
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px;
  max-height: 150px;
  object-fit: cover;
}
.box h2 { font-size: 1.5em; margin-bottom: 20px; }
.box button {
  background-color: #f4f40c;
  border: none;
  padding: 10px 20px;
  color: #333;
  font-size: 1em;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color .3s;
}
.box button:hover { background-color: #e5e500; }

/* ==== FOOTER ==== */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}
footer p { margin: 0; }
footer a { color: #9dc4ff; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ==== (rest of your existing page-specific styles stay as-is) ==== */

/* SERVICES / ABOUT / CONTACT / FORMS (copied from your original file) */
.content { border: 2px solid #ccc; padding: 0 30px; box-sizing: border-box; }
.services-boxes { display: flex; flex-wrap: wrap; border-radius: 10px; margin-top: 150px; justify-content: space-around; padding: 50px 20px; background-color: #fff; }
.service-box { padding: 20px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-radius: 10px; flex: 0 0 30%; margin: 30px; position: relative; background-size: cover; background-position: center; color: white; }
.services-title { font-size: 60px; text-align: center; margin-left: 300px; margin-right: 300px; }
.service-box:nth-child(2){ background-image: url('website images/airplaneimageforservicespage.jpg'); }
.service-box:nth-child(3){ background-image: url('website images/medicaldelivery.jpeg'); }
.service-box:nth-child(4){ background-image: url('website images/dryiceboxpic.jpeg'); }
.service-box:nth-child(5){ background-image: url('website images/yellowboxtruckimage.jpeg'); }
.service-box:nth-child(6){ background-image: url('website images/warehouseimage.jpg'); }
.service-box:nth-child(7){ background-image: url('website images/shakinghandsimage.jpg'); }
.service-box h2 { font-size: 1.5em; margin-bottom: 20px; }
.service-box ul { padding: 0; }
.service-box li { list-style-type: none; padding: 10px; cursor: pointer; transition: background-color .3s; position: relative; }
.service-box li:hover { background-color: rgba(0,0,0,.5); }
.service-box .description { display: none; background-color: #333; color: #fff; padding: 10px; position: absolute; left: 0; right: 0; bottom: 50px; z-index: 10; border-radius: 5px; }
.service-box li:hover .description { display: block; }

/* About */
.about-section { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background-color: rgba(0,0,0,.5); color: #fff; padding: 20px; position: relative; z-index: 1; margin-left: 50px; margin-right: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.1); max-width: 700px; border-radius: 10px; }
.about-section.right { margin-left: auto; margin-right: 50px; margin-top: 20px; }
.about-section.left { margin-top: 150px; }
.about-section.middle { margin-top: 20px; }
.about-section.bottom { margin-top: 20px; margin-left: 50px; margin-right: 5px; }
.about-logo-container { position: absolute; bottom: 100px; left: 20px; z-index: 2; }
.about-logo { width: 150px; height: auto; }
.about-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding-top: 20px; }
.about-text { margin-left: 180px; text-align: left; max-width: 800px; }
.about-text h2 { font-size: 2.5em; margin-bottom: 10px; }
.about-text p { font-size: 0.9em; margin-bottom: 10px; }

/* Contact / Forms */
.contact-content { margin: 150px auto 20px; background-color: #fff; padding: 20px; max-width: 800px; box-shadow: 0 2px 4px rgba(0,0,0,.1); border-radius: 10px; }
.contact-content h2 { font-size: 1.8em; margin-bottom: 20px; }
.contact-content p { font-size: 1em; margin-bottom: 10px; }
.contact-form { display: flex; flex-wrap: wrap; gap: 20px; }
.form-group { flex: 1 1 100%; margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: 5px; }
.form-group textarea { height: 100px; }
.checkbox-group { display: flex; align-items: center; }
.checkbox-group input { margin-right: 10px; }
.form-group button, .submit-btn { background-color: #0044cc; color: #fff; border: none; padding: 10px 20px; font-size: 1.2em; cursor: pointer; border-radius: 5px; transition: background-color .3s; }
.form-group button:hover, .submit-btn:hover { background-color: #003399; }

/* Active link in dropdown */
.navbar-container .dropdown-content a.active { font-weight: bold; color: #007bff; }

/* Message box */
.message-box { background-color: #fff; padding: 20px; border: 1px solid #ccc; max-width: 80%; margin: 300px auto 20px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,.1); }

/* === FINAL OVERRIDE: put Contact dropdown directly under the tab === */
nav ul li.dropdown { position: relative; }

nav ul li.dropdown > a { position: relative; z-index: 1; }

nav ul li.dropdown .dropdown-content {
  position: absolute !important;
  top: calc(100% + 6px) !important;  /* just below the bar */
  left: 0 !important;                /* align left edge with Contact tab */
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  min-width: 220px;                  /* adjust if you want it narrower/wider */
  white-space: nowrap;
  z-index: 2000;
}

/* small hover buffer so it doesn't disappear when moving mouse down */
nav ul li.dropdown::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 6px;
}
  /* === GLOBAL NAV OFFSET + CONTENT CLEARANCE (applies to all pages) === */
:root{
  --nav-offset: 10px;   /* drop the whole bar down from the top */
  --nav-height: 86px;   /* navbar height (logo fits comfortably) */
}

/* move the fixed bar down a bit so the logo isn't jammed into the top edge */
nav{
  top: var(--nav-offset) !important;
}

/* make the bar a touch taller and add vertical padding */
.navbar-container{
  height: var(--nav-height) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* keep menu vertically centered in the taller bar */
nav ul{
  top: 0 !important;
  bottom: 0 !important;
  align-items: center !important;
}

/* pages that use <main>: clear the fixed navbar height + offset */
main{
  padding-top: calc(var(--nav-height) + var(--nav-offset) + 16px) !important;
}

/* fallback: if a page doesn't use <main>, clear the first section after <nav> */
nav + *:not(main){
  margin-top: calc(var(--nav-height) + var(--nav-offset) + 16px) !important;
}

/* tweak on very small screens if needed */
@media (max-width: 480px){
  :root{ --nav-height: 92px; } /* a hair taller for tighter devices */
}

/* === GLOBAL: fix navbar so logo isn't jammed into the top === */
nav { 
  padding-top: 12px !important;   /* space above the logo inside the bar */
}

.navbar-container{
  height: 86px !important;        /* make the bar a bit taller */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.navbar-logo{
  margin-top: 0 !important;       /* keep the logo centered in the new height */
  height: 40px !important;
}

/* keep the right-side menu vertically centered in the taller bar */
nav ul{
  top: 0 !important;
  bottom: 0 !important;
  align-items: center !important;
}

/* push page content down to clear the taller fixed bar */
main{
  padding-top: 122px !important;  /* 86 (bar) + 12 (top pad) + ~24 breathing */
}

/* pages without <main>: clear the first block after nav */
nav + *:not(main){
  margin-top: 122px !important;
}

/* === FORCE NAV DOWN ON EVERY PAGE === */
body > nav {
  position: fixed !important;
  top: 16px !important;       /* <— adjust this number if you want more/less space */
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* keep the menu vertically centered in the bar */
body > nav ul {
  top: 0 !important;
  bottom: 0 !important;
  align-items: center !important;
}

/* Clear the taller, offset nav so content doesn't sit under it */
body > main {
  padding-top: calc(16px + 86px) !important;  /* 16 (nav offset) + ~86 (nav height) */
}

/* Pages without <main>: push the first block down */
body > nav + *:not(main) {
  margin-top: calc(16px + 86px) !important;
}

/* === FORCE THE LOGO LOWER INSIDE THE NAVBAR (ALL PAGES) === */

/* drop the logo stack down inside the bar */
body > nav .navbar-logo-container {
  transform: translateY(14px) !important;   /* tweak this number if you want */
}

/* make the bar a bit taller so nothing looks cramped */
body > nav .navbar-container {
  height: 92px !important;                  /* was ~70–86 */
}

/* keep the right-side menu vertically centered */
body > nav ul {
  top: 0 !important;
  bottom: 0 !important;
  align-items: center !important;
}

/* push page content down to clear the taller bar */
body > main {
  padding-top: calc(92px + 16px) !important;  /* bar height + breathing room */
}

/* pages without <main>: push first block down */
body > nav + *:not(main) {
  margin-top: calc(92px + 16px) !important;
}
/* ==== FINAL: FORCE NAV/LOGO POSITION ON ALL PAGES ==== */

/* Drop the entire navbar down from the very top */
body > nav {
  position: fixed !important;
  top: 20px !important;           /* change this to 24/28 if you want more gap */
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

body > nav .navbar-container {
  height: 140px !important;
  padding: 10px 20px !important;
}
/* Move the logo stack DOWN inside the bar */
body > nav .navbar-logo-container {
  transform: translateY(12px) !important;  /* bump this up/down to taste */
}

/* Keep the right-side menu vertically centered */
body > nav ul {
  top: 0 !important;
  bottom: 0 !important;
  align-items: center !important;
}

/* CLEARANCE: push page content down so it doesn't sit under the fixed bar */
body > main {
  padding-top: calc(300px + 20px + 12px) !important;
  /* 100 (bar height) + 20 (nav top offset) + 12 (logo translate) */
}

/* Pages without <main>: push the first block down the same amount */
body > nav + *:not(main) {
  margin-top: calc(300px + 20px + 12px) !important;
}

body > nav .navbar-logo {
  height: 500px !important;
  width: auto;
}

body > nav .navbar-title {
  font-size: 1.7rem;      /* same visual scale as Services */
  line-height: 1;
}

body > nav .express-container {
  display: flex;
  align-items: center;
  gap: 8px;               /* space between bars and “Express” */
  margin-top: 6px;
}

body > nav .express {
  font-size: 1rem;
  font-style: normal;     /* Services look is not italic; remove this line if you want italic */
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* The bars left/right of “Express” — make them white */
body > nav .line {
  width: 64px;
  height: 2px;
  background: #fff !important;       /* override previous yellow */
  box-shadow: 0 0 6px rgba(255,255,255,.45); /* subtle glow like Services */
}
/* ==== SERVICES PAGE FIXES (2-column grid + no top border) ==== */

/* Remove the thin line (it’s the .content border) */
.content {
  border: 0 !important;
  background: transparent !important;
  padding: 0 24px !important;
}

/* Two equal columns, 3 boxes per side */
.services-boxes {
  max-width: 1200px;
  margin: 120px auto 60px;            /* space below the fixed nav */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;                           /* space between cards */
  padding: 0 !important;
  background: transparent !important;  /* no white band behind the nav */
}

/* Title spans both columns */
.services-title {
  grid-column: 1 / -1;
  margin: 0 0 8px !important;
  text-align: center;
}

/* Card cleanups for the grid layout */
.service-box {
  margin: 0 !important;
  padding: 20px !important;
  min-height: 200px;
  border-radius: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Optional: better text legibility over photos */
.service-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
  pointer-events: none;
}
.service-box h2,
.service-box ul { position: relative; z-index: 1; }
/* Services page: make "Our Services" title pure white */
.services-title {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.35); /* helps on busy photos */
}


/* ==== HOMEPAGE REDESIGN OVERRIDES ==== */

body {
  color: #fff;
  background: #07130f;
}

body::before {
  background:
    linear-gradient(90deg, rgba(4, 12, 9, 0.85), rgba(4, 12, 9, 0.45)),
    rgba(0, 0, 0, 0.35);
}

/* fix homepage spacing */
body > main {
  padding-top: 120px !important;
}

/* hero */
.hero {
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 120px 8vw 80px;
}

.hero-content {
  max-width: 720px;
  margin: 0;
  padding: 0;
}

.hero h1 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.02;
  margin: 0 0 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero p {
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin-bottom: 32px;
}

/* buttons */
.hero-buttons {
  display: flex;
  gap: 14px;
  align-items: center;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
}

.primary-btn {
  background: #f4f40c;
  color: #111;
}

.secondary-btn {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  background: rgba(255,255,255,0.04);
}

/* metrics strip */
.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: 0 auto 90px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.metric {
  padding: 30px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.12);
}

.metric:last-child {
  border-right: none;
}

.metric h2 {
  margin: 0 0 8px;
  font-size: 34px;
  color: #fff;
}

.metric p {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* services */
.services-preview {
  max-width: 1100px;
  margin: 0 auto 100px;
  padding: 0 24px;
}

.services-preview > h2 {
  font-size: 42px;
  text-align: center;
  margin-bottom: 42px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.service-card {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 30px;
  min-height: 190px;
}

.service-card h3 {
  font-size: 22px;
  margin: 0 0 14px;
}

.service-card p {
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
}

/* CTA */
.cta {
  text-align: center;
  padding: 90px 24px 120px;
  background: radial-gradient(circle, rgba(244,244,12,0.14), transparent 55%);
}

.cta h2 {
  font-size: 42px;
  margin-bottom: 24px;
}

/* footer cleanup */
footer {
  background: #07130f;
  border-top: 1px solid rgba(255,255,255,0.12);
}

/* mobile */
@media (max-width: 800px) {
  .hero {
    text-align: center;
    justify-content: center;
    padding: 100px 24px 70px;
  }

  .hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .metrics,
  .services-grid {
    grid-template-columns: 1fr;
  }

  .metric {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
}

/* ==== NAVBAR SIZE FIX (FINAL CLEAN VERSION) ==== */

body > nav {
  top: 12px !important;              /* less gap from top */
}

/* shrink navbar height */
body > nav .navbar-container {
  height: 72px !important;
  padding: 6px 20px !important;
}

/* fix logo size */
body > nav .navbar-logo {
  height: 300px !important;           /* THIS is the main fix */
  width: auto;
}

/* remove weird vertical pushing */
body > nav .navbar-logo-container {
  transform: translateY(0) !important;
}

/* keep menu centered */
body > nav ul {
  align-items: center !important;
}

/* fix page spacing under navbar */
body > main {
  padding-top: calc(72px + 12px + 16px) !important;
}

/* ==== HIDE NAVBAR ON SCROLL ==== */
body > nav {
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

body > nav.nav-hidden {
  transform: translateY(-130%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Shared legal footer */
.site-footer {
  text-align: center;
  padding: 24px 16px;
}

.legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.legal-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-small-print {
  max-width: 900px;
  margin: 10px auto 0;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.85;
}