@font-face {
  font-family: 'OrangeCrayon';
  src: url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.eot');
  src: url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.eot?#iefix') format('embedded-opentype'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.woff2') format('woff2'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.woff') format('woff'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.ttf') format('truetype'),
    url('../../../../fonts/Orange-Crayon/OrangeCrayon-Regular.svg#OrangeCrayon-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'National Railway Banner';
  src: url('../../../../fonts/NationalRailway-Banner/NationalRailway-Banner.eot');
  src: url('../../../../fonts/NationalRailway-Banner/NationalRailway-Banner.eot?#iefix') format('embedded-opentype'),
    url('../../../../fonts/NationalRailway-Banner/NationalRailway-Banner.woff2') format('woff2'),
    url('../../../../fonts/NationalRailway-Banner/NationalRailway-Banner.woff') format('woff'),
    url('../../../../fonts/NationalRailway-Banner/NationalRailway-Banner.ttf') format('truetype'),
    url('../../../../fonts/NationalRailway-Banner/NationalRailway-Banner.svg#NationalRailway-Banner') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boogaloo';
  src: url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.eot');
  src: url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.eot?#iefix') format('embedded-opentype'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.woff2') format('woff2'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.woff') format('woff'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.ttf') format('truetype'),
    url('../../../../fonts/Boogaloo-Regular/Boogaloo-Regular.svg#Boogaloo-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.boogaloo {
  font-family: 'Boogaloo';
}

.nat-railway-banner {
  font-family: 'National Railway Banner';
}

.orangecrayon {
  font-family: 'OrangeCrayon';
}

.text-decoration-none {
  text-decoration: none;
}

#nov5-hero .nov5-inner .button:hover {
  text-decoration: none;
}

#nov5-hero {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/hero/back.jpg);
  background-image: image-set(url("../images/hero/back.webp") 1x,
      url("../images/hero/back@2x.webp") 2x);
  background-image: -webkit-image-set(url("../images/hero/back.webp") 1x,
      url("../images/hero/back@2x.webp") 2x);
}

/* <picture> wrappers must not affect the hero layout */
#nov5-hero picture {
  display: contents;
}

#nov5-hero .nov5-inner {
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

/* Layout / containers */
#nov5-hero p {
  margin-bottom: 0;
}

#nov5-hero .nov5-left {
  max-width: 49.9%;
  width: 100%;
  padding-top: 47px;
  padding-bottom: 35px;
}

#nov5-hero .nov5-right {
  max-width: 50%;
  width: 100%;
}

/* Left images */
#nov5-hero .snow {
  bottom: 0;
  width: 100%;
  z-index: 1;
  min-width: 959px;
}

/* Left text */
#nov5-hero .main-text1 {
  color: #123B5D;
  text-align: center;
  font-size: 52.667px;
  font-style: normal;
  font-weight: 400;
  line-height: 50.333px;
  margin-bottom: 22px;
}

/* .main-text1 word-by-word entrance (from Figma). Loops on the same timer as the sign (3s, 2.76s on mobile).
   Each word span sets --stagger-index in the blade (0, 1, 2, ...). */
#nov5-hero .main-text1 .word {
  display: inline-block;
  animation: nov5-text-in 3s ease-out infinite both;
  animation-delay: calc(0ms + var(--stagger-index) * 124.615402ms);
}

@media screen and (max-width: 991px) {
  #nov5-hero .main-text1 .word {
    animation-duration: 2.76s;
  }
}

/* 9.23% of 3s = the 276.923ms Figma duration, then holds until the loop restarts */
@keyframes nov5-text-in {
  0% {
    translate: 0px 22px;
    scale: 0.94;
    opacity: 0;
  }

  9.23% {
    translate: 0px 0px;
    scale: 1;
    opacity: 1;
  }

  100% {
    translate: 0px 0px;
    scale: 1;
    opacity: 1;
  }
}

/* Page load: the script in the blade sets .nov5-wait on <html> until window load, so the text and sign start together.
   The text stays visible (no animation) while loading; the sign waits paused. */
.nov5-wait #nov5-hero .main-text1 .word {
  animation: none;
}

.nov5-wait #nov-banner .sign {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #nov5-hero .main-text1 .word {
    animation: none;
  }
}


#nov5-hero .main-text2 {
  color: #000;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 25.996px;
  z-index: 2;
  margin-top: 10px;
}

/* Product wrappers (shared) */
#nov5-hero .product-wrapper1 .product-img-wrapper {
  width: 201px;
  height: 224px;
}

#nov5-hero .product-wrapper2 .product-img-wrapper {
  width: 275.66px;
  height: 215px;
}

/* Product images */
#nov5-hero .product-1 {
  max-width: unset;
}

#nov5-hero .product-2 {
  max-width: unset;
}

/* Product content text */
#nov5-hero .text1 {
  color: #00A651;
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 92.857% */
  text-transform: uppercase;
}

/* National Railway Banner draws each letter as a knockout in a solid box (the green box = the text color).
   The white behind the letters is a background on each line's span. It is deliberately smaller than the green box
   (0.56em tall, centered in the 0.70em box, and 0.2em narrower than the line) so it only covers the letters and never leaks outside the green.
   box-decoration-break keeps it correct on wrapped lines. */
#nov5-hero .text1 span {
  background: linear-gradient(#FFF, #FFF) no-repeat 50% 0.37em / calc(100% - 0.2em) 0.56em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

#nov5-hero .text2 {
  color: #FFF;
  text-align: center;
  font-size: 49.96px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /* 56.045% */
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

#nov5-hero .text3 {
  color: #FFF;
  font-size: 29.2px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.292px;
  text-transform: uppercase;
}

#nov5-hero .product-wrapper1 .text3 {
  color: #ED1C24;
}

#nov5-hero .text4 {
  color: #FFF;
  text-align: center;
  font-size: 19px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  margin-top: 12px;
}

/* Buttons */
#nov5-hero .nov5-left .button {
  width: 165px;
  height: 43px;
  border-radius: 54px;
  background: #009047;
  color: #FFF;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 17px;
  padding: 0;
}

#nov5-hero .nov5-right .button {
  width: 121px;
  height: 30px;
  border-radius: 41.442px;
  background: #FFF;
  color: #000;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 0;
}

@supports (text-box: trim-both cap alphabetic) {
  #nov5-hero .button span {
    text-box: trim-both cap alphabetic;
  }
}

.nov5-left-content {
  padding-right: 111px;
}

.nov5-right-content {
  padding-left: 90px;
  gap: 32px;
}

#nov5-hero .product-wrapper1 .text1 {
  margin-bottom: 14px;
}

#nov5-hero .product-wrapper1 .text2 {
  margin-bottom: 6px;
}

#nov5-hero .product-wrapper1 {
  gap: 31px;
  left: -27px;
}

#nov5-hero .snow-animation {
  z-index: 9;
  bottom: 0;
  pointer-events: none;
}

#nov5-hero .main {
  box-shadow: 0 0 8.015px 0 rgba(0, 0, 0, 0.25);
}

#nov5-hero .left {
  left: -111px;
  bottom: 93px;
  z-index: 1;
}

#nov5-hero .buttons {
  gap: 10px;
}

#nov5-hero .button {
  text-decoration: none;
}

@media screen and (max-width: 1470px) {
  .nov5-left-content {
    padding-right: 51px;
  }

  .nov5-right-content {
    padding-left: 73px;
  }
}

@media screen and (max-width: 1200px) {
  .nov5-left-content {
    padding-right: 5px;
  }

  .nov5-right-content {
    padding-left: 10px;
  }
}

@media screen and (max-width: 991px) {
  #nov5-hero .nov5-inner {
    flex-direction: column;
  }

  .nov5-left-content {
    padding-right: 0;
  }

  .nov5-right-content {
    padding-left: 0;
  }

  #nov5-hero {
    background-image: unset;
  }

  #nov5-hero .nov5-left {
    max-width: 100%;
    align-items: center;
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/hero/back-top.jpg);
    background-image: image-set(url("../images/hero/back-top.webp") 1x,
        url("../images/hero/back-top@2x.webp") 2x);
    background-image: -webkit-image-set(url("../images/hero/back-top.webp") 1x,
        url("../images/hero/back-top@2x.webp") 2x);
  }

  #nov5-hero .nov5-right {
    padding: 40px 0;
    max-width: 100%;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/hero/back-bottom.jpg);
    background-image: image-set(url("../images/hero/back-bottom.webp") 1x,
        url("../images/hero/back-bottom@2x.webp") 2x);
    background-image: -webkit-image-set(url("../images/hero/back-bottom.webp") 1x,
        url("../images/hero/back-bottom@2x.webp") 2x);
  }
}

@media screen and (max-width: 567px) {

  /* mobile sizes are in cqw of #nov5-hero (1cqw = 4px at a 400px wide viewport) */
  #nov5-hero {
    container-type: inline-size;
  }

  #nov5-hero .snow {
    min-width: unset;
  }

  /* height attr is 254px in the blade; keep it proportional to the width (63.5cqw = 254px at 400px) */
  #nov5-hero img.snow[src*="snow-m"] {
    height: 63.5cqw;
  }

  #nov5-hero img.snow-animation[src*="snow-m"] {
    width: 97.5cqw;
    height: auto;
  }

  #nov5-hero img.main[src*="main-m"] {
    width: 102.5cqw;
    height: auto;
    max-width: unset;
  }

  #nov5-hero .main-text1 {
    font-size: 11.16675cqw;
    line-height: 11.58325cqw;
    margin-bottom: 5.5cqw;
  }

  #nov5-hero .main-text2 {
    font-size: 5cqw;
    line-height: 6.499cqw;
    margin-top: 1.5cqw;
  }

  #nov5-hero .nov5-left .button {
    border-radius: 12.5cqw;
    background: #009546;
    width: 34.5cqw;
    height: 10cqw;
    font-size: 4cqw;
    margin-top: 4.75cqw;
  }

  #nov5-hero .nov5-right .button {
    width: 30.25cqw;
    height: 7.5cqw;
    border-radius: 10.3605cqw;
    font-size: 3.5cqw;
    margin-top: 2.5cqw;
  }

  #nov5-hero .text1 {
    font-size: 6.5cqw;
    line-height: 5.75cqw;
    /* 88.462% */
  }

  #nov5-hero .text2 {
    font-size: 10.207cqw;
    line-height: 5.7205cqw;
    /* 56.045% */
    letter-spacing: 0.125cqw;
  }

  #nov5-hero .text3 {
    font-size: 5.9655cqw;
    line-height: 5.7205cqw;
    letter-spacing: 0.073cqw;
  }

  #nov5-hero .text4 {
    font-size: 4.25cqw;
    line-height: 5.25cqw;
    /* 123.529% */
    margin-top: 3cqw;
  }

  #nov5-hero .product-wrapper1 .text1 {
    margin-bottom: 3.5cqw;
  }

  #nov5-hero .product-wrapper1 .text2 {
    margin-bottom: 1.5cqw;
  }

  #nov5-hero .product-wrapper1 .product-img-wrapper {
    width: 45.25cqw;
    height: 50.42775cqw;
  }

  #nov5-hero .product-wrapper2 .product-img-wrapper {
    width: 45cqw;
    height: 45cqw;
  }

  #nov5-hero .product-content {
    max-width: 50%;
    width: 100%;
  }

  #nov5-hero .product-wrapper1 {
    gap: 0;
    left: unset;
  }

  /* heights come from the blade's height attrs (260px / 197px); kept proportional (65cqw / 49.25cqw = those px at 400px) */
  #nov5-hero .product-1 {
    width: 157%;
    height: 65cqw;
    left: 50%;
    transform: translateX(-43%);
  }

  #nov5-hero .product-2 {
    width: 100%;
    height: 49.25cqw;
    left: 50%;
    transform: translateX(-46%);
  }

  #nov5-hero .nov5-right {
    padding-top: 13.75cqw;
    padding-bottom: 20cqw;
  }

  .nov5-right-content {
    gap: 4.75cqw;
  }

  #nov5-hero .nov5-left {
    padding-top: 9cqw;
    padding-bottom: 12cqw;
  }

  #nov5-hero .main {
    border: 1cqw solid white;
    box-shadow: 0 0 2.00375cqw 0 rgba(0, 0, 0, 0.25);
  }
}