```css
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

/* =========================================
   BASE
========================================= */

.fh-logistics-hero-v1,
.fh-logistics-hero-v1 * {
  box-sizing: border-box;
}

.fh-logistics-hero-v1 {
  position: relative;
  overflow: hidden;
  background: #004985;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* =========================================
   MAIN HERO
========================================= */

.fh-logistics-hero-v1__main {
  position: relative;
  min-height: 790px;

  /*
   * Large bottom padding gives the video room
   * to overlap the hero without covering content.
   */
  padding:
    135px
    clamp(50px, 6vw, 96px)
    225px;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.97) 0%,
      rgba(0, 0, 0, 0.87) 28%,
      rgba(0, 0, 0, 0.57) 50%,
      rgba(0, 0, 0, 0.14) 76%,
      rgba(0, 0, 0, 0.02) 100%
    ),
    var(--fh-hero-background);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.fh-logistics-hero-v1__main-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.fh-logistics-hero-v1__content {
  width: min(100%, 850px);
}

/* =========================================
   HERO TYPOGRAPHY
========================================= */

.fh-logistics-hero-v1__eyebrow {
  color: #2da3ff;
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fh-logistics-hero-v1 h1 {
  color: #ffffff;
}

.fh-logistics-hero-v1__description {
  max-width: 835px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.94);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.72;
  font-weight: 400;
}

.fh-logistics-hero-v1__description p {
  margin: 0;
}

/* =========================================
   BUTTONS
========================================= */

.fh-logistics-hero-v1__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.fh-logistics-hero-v1__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  overflow: hidden;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.fh-logistics-hero-v1__button--primary {
  min-width: 308px;
  background: #0755a0;
}

.fh-logistics-hero-v1__button--secondary {
  min-width: 264px;
  background: rgba(0, 0, 0, 0.36);
}

.fh-logistics-hero-v1__button-content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.fh-logistics-hero-v1__button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease;
}

.fh-logistics-hero-v1__button-sweep {
  position: absolute;
  z-index: 1;
  top: -80%;
  left: -150%;
  width: 150%;
  height: 270%;
  transform: skewX(-28deg);

  background:
    repeating-linear-gradient(
      90deg,
      #39a7ff 0,
      #39a7ff 46px,
      #138be8 46px,
      #138be8 64px
    );

  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.fh-logistics-hero-v1__button::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #39a7ff;
  opacity: 0;
  transition: opacity 0.25s ease 0.25s;
}

.fh-logistics-hero-v1__button:hover,
.fh-logistics-hero-v1__button:focus-visible {
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.fh-logistics-hero-v1__button:hover
  .fh-logistics-hero-v1__button-sweep,
.fh-logistics-hero-v1__button:focus-visible
  .fh-logistics-hero-v1__button-sweep {
  left: 65%;
}

.fh-logistics-hero-v1__button:hover::after,
.fh-logistics-hero-v1__button:focus-visible::after {
  opacity: 1;
}

.fh-logistics-hero-v1__button:hover svg,
.fh-logistics-hero-v1__button:focus-visible svg {
  transform: translate(3px, -3px);
}

.fh-logistics-hero-v1__button:focus-visible {
  outline: 3px solid rgba(45, 163, 255, 0.65);
  outline-offset: 4px;
}

/* =========================================
   VIDEO SECTION
========================================= */

.fh-logistics-hero-v1__video-area {
  position: relative;
  display: flow-root;
  overflow: visible;
  padding:
    0
    clamp(50px, 6vw, 96px)
    clamp(95px, 8vw, 135px);
  background-image: url(https://www.fleethubai.com/hubfs/hero-image-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  color: #ffffff;
}

/* Decorative hex pattern */
/* 
.fh-logistics-hero-v1__video-area::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -160px;
  width: 500px;
  height: 500px;
  opacity: 0.13;
  pointer-events: none;

  background-image:
    linear-gradient(
      30deg,
      transparent 24%,
      #9ed1ff 25%,
      #9ed1ff 26%,
      transparent 27%
    ),
    linear-gradient(
      150deg,
      transparent 24%,
      #9ed1ff 25%,
      #9ed1ff 26%,
      transparent 27%
    ),
    linear-gradient(
      30deg,
      transparent 74%,
      #9ed1ff 75%,
      #9ed1ff 76%,
      transparent 77%
    ),
    linear-gradient(
      150deg,
      transparent 74%,
      #9ed1ff 75%,
      #9ed1ff 76%,
      transparent 77%
    );

  background-size: 92px 160px;
} */

.fh-logistics-hero-v1__video-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

/*
 * Negative margin moves the video upward,
 * across the hero/blue-section boundary.
 */
.fh-logistics-hero-v1__video-shell {
  position: relative;
  z-index: 5;
  overflow: hidden;
  width: 100%;
  margin-top: -165px;
  border: 1px solid #33A1FF;
  border-radius: 20px;
  background: #000000;
  box-shadow: 0px 0px 47.3px 0px #33A1FFA3;
}

/* =========================================
   HUBSPOT VIDEO PLAYER
========================================= */

.fh-logistics-hero-v1__video-shell .hs-video-widget,
.fh-logistics-hero-v1__video-shell .hs-video-container,
.fh-logistics-hero-v1__video-shell .hs-video-wrapper {
  position: relative;
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.fh-logistics-hero-v1__video-shell .hs-video-wrapper {
  aspect-ratio: 16 / 9;
}

.fh-logistics-hero-v1__video-shell iframe,
.fh-logistics-hero-v1__video-shell video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  background: #000000;
}

/* Handle HubSpot responsive wrapper padding */

.fh-logistics-hero-v1__video-shell
  .hs-video-wrapper[style*="padding-bottom"] {
  height: 0 !important;
  aspect-ratio: auto;
}

/* =========================================
   VIDEO TEXT
========================================= */

.fh-logistics-hero-v1__video-copy {
  max-width: 850px;
  margin: 68px auto 0;
  text-align: center;
}

.fh-logistics-hero-v1__video-copy h2 {
  margin: 0 0 20px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(25px, 2.1vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.fh-logistics-hero-v1__video-description {
  color: rgba(255, 255, 255, 0.88);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.65;
  font-weight: 400;
}

.fh-logistics-hero-v1__video-description p {
  margin: 0;
}

/* =========================================
   LAPTOP
========================================= */

@media (min-width: 951px) and (max-width: 1500px) {
  .fh-logistics-hero-v1__main {
    min-height: 720px;

    padding:
      clamp(105px, 8vw, 130px)
      clamp(58px, 6vw, 92px)
      205px;

    background-position: 58% center;
  }

  .fh-logistics-hero-v1__main-inner {
    max-width: 1220px;
  }

  .fh-logistics-hero-v1__content {
    width: min(100%, 760px);
  }

  .fh-logistics-hero-v1__eyebrow {
    margin-bottom: 28px;
    font-size: 15px;
  }

  .fh-logistics-hero-v1 h1 {
    max-width: 760px;
    font-size: clamp(47px, 4.5vw, 62px);
    line-height: 1.09;
  }

  .fh-logistics-hero-v1__description {
    font-size: 18px;
  }

  .fh-logistics-hero-v1__actions {
    margin-top: 27px;
  }

  .fh-logistics-hero-v1__video-area {
    padding-left: clamp(58px, 6vw, 92px);
    padding-right: clamp(58px, 6vw, 92px);
  }

  .fh-logistics-hero-v1__video-inner {
    max-width: 1210px;
  }

  .fh-logistics-hero-v1__video-shell {
    margin-top: -140px;
  }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {
  .fh-logistics-hero-v1__main {
    min-height: auto;

    padding:
      100px
      32px
      155px;

    background-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.73) 55%,
        rgba(0, 0, 0, 0.28) 100%
      ),
      var(--fh-hero-background);

    background-position: 62% center;
  }

  .fh-logistics-hero-v1__content {
    width: min(100%, 700px);
  }

  .fh-logistics-hero-v1__eyebrow {
    font-size: 14px;
  }


  .fh-logistics-hero-v1__description {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.65;
  }

  .fh-logistics-hero-v1__video-area {
    padding:
      0
      32px
      90px;
  }

  .fh-logistics-hero-v1__video-shell {
    margin-top: -95px;
  }

  .fh-logistics-hero-v1__video-copy {
    margin-top: 52px;
  }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {
  .fh-logistics-hero-v1__main {
    min-height: auto;

    padding:
      82px
      20px
      115px;

    background-position: 68% center;
  }

  .fh-logistics-hero-v1__eyebrow {
    font-size: 12px;
    letter-spacing: 0.07em;
  }


  .fh-logistics-hero-v1__description {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.6;
  }

  .fh-logistics-hero-v1__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 30px;
  }

  .fh-logistics-hero-v1__button,
  .fh-logistics-hero-v1__button--primary,
  .fh-logistics-hero-v1__button--secondary {
    width: 100%;
    min-width: 0;
  }

  .fh-logistics-hero-v1__video-area {
    padding:
      0
      20px
      75px;
  }

  .fh-logistics-hero-v1__video-shell {
    margin-top: -65px;
    border-radius: 14px;
  }

  .fh-logistics-hero-v1__video-copy {
    margin-top: 42px;
  }

  .fh-logistics-hero-v1__video-copy h2 {
    margin-bottom: 16px;
    font-size: 23px;
  }

  .fh-logistics-hero-v1__video-description {
    font-size: 16px;
  }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
  .fh-logistics-hero-v1__button,
  .fh-logistics-hero-v1__button::after,
  .fh-logistics-hero-v1__button-sweep,
  .fh-logistics-hero-v1__button svg {
    transition: none;
  }
}
```
/* =========================================
   PRICING / LOGISTICS HERO MOBILE FIX
========================================= */

@media (max-width: 767px) {
  .fh-logistics-hero-v1 {
    overflow: hidden !important;
  }

  .fh-logistics-hero-v1__main {
    min-height: auto !important;
    padding: 95px 24px 70px !important;
  }

  .fh-logistics-hero-v1__content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .fh-logistics-hero-v1__eyebrow {
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
    max-width: 100% !important;
  }

  .fh-logistics-hero-v1__content h1,
  .fh-logistics-hero-v1 h1 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(54px, 15vw, 72px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.055em !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}