#oct-hero {
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/hero/back.jpg);
  background-image: -webkit-image-set(url("../images/hero/back.jpg") 1x, url("../images/hero/back@2x.jpg") 2x);
  background-image: image-set(url("../images/hero/back.webp") type("image/webp") 1x, url("../images/hero/back@2x.webp") type("image/webp") 2x, url("../images/hero/back.jpg") type("image/jpeg") 1x, url("../images/hero/back@2x.jpg") type("image/jpeg") 2x);
}
#oct-hero p {
  margin: 0 auto;
}
#oct-hero .oct-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 1332px;
  max-width: 100%;
  margin: 0 auto;
  padding: 95px 5px 135px 0;
}
#oct-hero .oct-left {
  position: relative;
  width: 605px;
  margin-top: 95.5px;
  flex: 0 1 605px;
}
#oct-hero .headline-text {
  font-size: 47px;
  line-height: 59px;
  max-width: 581px;
}
#oct-hero .copy-text {
  font-size: 25px;
  line-height: 40px;
  max-width: 605px;
  margin-top: 21.5px;
}
#oct-hero .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 235px;
  height: 45px;
  padding: 0;
  border: none;
  border-radius: 54px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}
#oct-hero .button:hover,
#oct-hero .button:focus,
#oct-hero .button:active {
  color: #fff;
  text-decoration: none;
}
#oct-hero .btn-shop {
  background-color: #ff0009;
  margin-top: 35px;
}
#oct-hero .oct-right {
  position: relative;
  width: 630px;
  height: 660px;
  flex: 0 0 630px;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/hero/form-back.jpg);
  background-image: -webkit-image-set(url("../images/hero/form-back.jpg") 1x, url("../images/hero/form-back@2x.jpg") 2x);
  background-image: image-set(url("../images/hero/form-back.webp") type("image/webp") 1x, url("../images/hero/form-back@2x.webp") type("image/webp") 2x, url("../images/hero/form-back.jpg") type("image/jpeg") 1x, url("../images/hero/form-back@2x.jpg") type("image/jpeg") 2x);
}
#oct-hero .right-stage {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 174.8px;
}
#oct-hero .anim-box {
  position: absolute;
  top: -75px;
  left: 50%;
  width: 352.23px;
  height: 265px;
  margin-left: -176.115px;
  pointer-events: none;
  z-index: 1;
}
#oct-hero .anim-box img {
  position: absolute;
  max-width: none;
  height: auto;
}
#oct-hero .headline {
  left: 5.678%;
  top: 15.849%;
  width: 88.579%;
}
#oct-hero .logo-left {
  left: 0;
  top: 7.717%;
  width: 53.772%;
  opacity: 0;
}
#oct-hero .logo-right {
  left: 47.946%;
  top: 3.396%;
  width: 52.054%;
  opacity: 0;
}
#oct-hero .bull {
  left: 1.987%;
  top: 0;
  width: 96.812%;
}
#oct-hero .steam {
  top: 63.396%;
  width: 38.895%;
  opacity: 0;
}
#oct-hero .steam-left {
  left: 20.157%;
}
#oct-hero .steam-right {
  left: 42.018%;
  transform: scaleX(-1);
}
#oct-hero .offer {
  position: relative;
  width: 469px;
  max-width: 100%;
  margin: 0 auto;
  z-index: 2;
}
#oct-hero .offer img {
  width: 100%;
  height: auto;
}
#oct-hero .form-title {
  margin: 8.2px auto 0;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 27px;
  letter-spacing: 0.54px;
  color: #fff;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
}
#oct-hero .oct-form {
  position: relative;
  z-index: 2;
}
#hero-form {
  margin-top: 22.5px;
}
#form-bundle form.uni-style {
  --form-width: 584px;
  --form-field-padding: 12.5px 10px;
  --form-input-height: 53px;
  --form-input-radius: 6px;
  --form-input-font-size: 17px;
  --form-label-font-size: 17px;
  --form-label-offset-x: 17.75px;
  --form-input-text-indent: 17.75px;
  --form-label-margin-top: 0;
  --form-placeholder-color: #2a2a2a;
  --form-select-arrow-width: 14px;
  --form-select-arrow-height: 8px;
  --form-select-arrow-right: 17px;
  max-width: 100%;
  margin: 0 auto;
  color: #373737;
  font-family: 'Avenir-Roman';
}
#form-bundle form.uni-style input,
#form-bundle form.uni-style select,
#form-bundle form.uni-style textarea {
  font-family: 'Avenir-Roman';
}
:where(#form-bundle, #popup-oct) .border-gray {
  border-color: #c3c3c5;
}
:where(#form-bundle, #popup-oct) label .f-red {
  color: #fc5147;
}
:where(#form-bundle, #popup-oct) label.events-none {
  pointer-events: none;
}
#form-bundle .form-action {
  display: flex;
  padding-top: 0;
  justify-content: center;
  text-align: center;
}
#form-bundle .form-action .button {
  margin-top: 30.5px;
  background-color: #ed1c24;
}
#oct-hero .btn-coupon {
  background-color: #f80002;
}
@supports (text-box: trim-both cap alphabetic) {
  #oct-hero .button > span {
    display: block;
    text-box: trim-both cap alphabetic;
  }
  #form-bundle .form-action .button {
    display: block;
    text-box: trim-both cap alphabetic;
    padding: calc((45px - 1cap) / 2) 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #oct-hero .headline {
    animation: oct-headline-o 3s linear infinite;
  }
  #oct-hero .logo-left {
    animation: oct-left-o 3s linear infinite, oct-left-r 3s linear infinite, oct-left-t 3s linear infinite;
  }
  #oct-hero .logo-right {
    animation: oct-right-o 3s linear infinite, oct-right-r 3s linear infinite, oct-right-t 3s linear infinite;
  }
  #oct-hero .bull {
    animation: oct-bull-t 3s linear infinite, oct-bull-s 3s linear infinite;
  }
  #oct-hero .steam {
    animation: oct-steam-o 3s linear infinite;
  }
}
@keyframes oct-headline-o {
  0% { opacity: 1; }
  10.37% { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  11.874% { opacity: 0; }
  41.04% { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  42.127% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes oct-left-o {
  0% { opacity: 0; }
  10.406% { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  12.007% { opacity: 1; }
  38.705% { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  42.14% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes oct-left-r {
  0% { rotate: 0rad; }
  12.04% { rotate: 0rad; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  16.643% { rotate: -0.186rad; }
  38.705% { rotate: -0.186rad; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  42.127% { rotate: 0rad; }
  100% { rotate: 0rad; }
}
@keyframes oct-left-t {
  0% { translate: 0 0; }
  12.04% { translate: 0 0; }
  16.643% { translate: -38.015% -17.888%; }
  38.705% { translate: -38.015% -17.888%; }
  42.127% { translate: 0 0; }
  100% { translate: 0 0; }
}
@keyframes oct-right-o {
  0% { opacity: 0; }
  10.406% { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  12.007% { opacity: 1; }
  38.705% { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  42.127% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes oct-right-r {
  0% { rotate: 0rad; }
  12.007% { rotate: 0rad; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  16.676% { rotate: 0.202rad; }
  38.738% { rotate: 0.202rad; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  42.127% { rotate: 0rad; }
  100% { rotate: 0rad; }
}
@keyframes oct-right-t {
  0% { translate: 0 0; }
  12.007% { translate: 0 0; }
  16.676% { translate: 26.245% -14.056%; }
  38.738% { translate: 26.245% -14.056%; }
  42.127% { translate: 0 0; }
  100% { translate: 0 0; }
}
@keyframes oct-bull-t {
  0% { translate: 0 49.81%; }
  4.14% { translate: 0 49.81%; }
  13.931% { translate: 0 0; }
  38.64% { translate: 0 0; }
  46.011% { translate: 0 50.19%; }
  100% { translate: 0 50.19%; }
}
@keyframes oct-bull-s {
  0% { scale: 0; }
  4.14% { scale: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  13.931% { scale: 1; }
  38.64% { scale: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  46.011% { scale: 0; }
  100% { scale: 0; }
}
@keyframes oct-steam-o {
  0% { opacity: 0; }
  16.209% { opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  16.71% { opacity: 1; }
  38.756% { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  39.323% { opacity: 0; }
  100% { opacity: 0; }
}
@media screen and (max-width: 1360px) {
  #oct-hero .oct-inner {
    justify-content: center;
    gap: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 1200px) {
  #oct-hero .headline-text {
    font-size: 38px;
    line-height: 48px;
  }
  #oct-hero .copy-text {
    font-size: 20px;
    line-height: 32px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1100px) {
  #oct-hero .headline-text {
    font-size: 30px;
    line-height: 39px;
  }
  #oct-hero .copy-text {
    font-size: 17px;
    line-height: 28px;
  }
}
@media screen and (max-width: 991px) {
  #oct-hero .oct-inner {
    flex-direction: column;
    align-items: center;
    gap: 110px;
    padding-top: 50px;
    padding-bottom: 60px;
  }
  #oct-hero .oct-left {
    width: 100%;
    max-width: 605px;
    margin-top: 0;
    flex: 0 0 auto;
  }
  #oct-hero .oct-right {
    max-width: 100%;
    flex: 0 0 auto;
  }
}
@media screen and (max-width: 767px) {
  #oct-hero .oct-inner {
    width: 100%;
    gap: 0;
    margin-top: -3.077%;
    padding: 0;
  }
  #oct-hero .oct-left {
    width: 100%;
    max-width: none;
    padding: 64px 20px;
    background-color: #000;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/hero/back-m.jpg);
    background-image: -webkit-image-set(url("../images/hero/back-m.jpg") 1x, url("../images/hero/back-m@2x.jpg") 2x);
    background-image: image-set(url("../images/hero/back-m.webp") type("image/webp") 1x, url("../images/hero/back-m@2x.webp") type("image/webp") 2x, url("../images/hero/back-m.jpg") type("image/jpeg") 1x, url("../images/hero/back-m@2x.jpg") type("image/jpeg") 2x);
  }
  #oct-hero .headline-text {
    font-size: 23px;
    line-height: 31px;
    max-width: 350px;
  }
  #oct-hero .copy-text {
    font-size: 14px;
    line-height: 23px;
    max-width: 350px;
    margin-top: 17px;
  }
  #oct-hero .btn-shop {
    margin-top: 25px;
  }
  #oct-hero .oct-right {
    width: 100%;
    height: auto;
    background-position: center bottom;
    background-image: url(../images/hero/form-back-m.jpg);
    background-image: -webkit-image-set(url("../images/hero/form-back-m.jpg") 1x, url("../images/hero/form-back-m@2x.jpg") 2x);
    background-image: image-set(url("../images/hero/form-back-m.webp") type("image/webp") 1x, url("../images/hero/form-back-m@2x.webp") type("image/webp") 2x, url("../images/hero/form-back-m.jpg") type("image/jpeg") 1x, url("../images/hero/form-back-m@2x.jpg") type("image/jpeg") 2x);
  }
  #oct-hero .right-stage {
    max-width: 440px;
    height: auto;
    padding-top: 0;
    container-type: inline-size;
  }
  #oct-hero .anim-box {
    position: relative;
    top: auto;
    left: auto;
    width: 90.315cqw;
    height: 67.949cqw;
    margin: -0.769cqw auto 0;
  }
  #oct-hero .offer {
    width: 82.051cqw;
    margin-top: -2.949cqw;
  }
  #oct-hero .btn-coupon {
    width: 60.256cqw;
    height: 11.538cqw;
    font-size: 5.128cqw;
    margin-top: 6.538cqw;
    margin-bottom: 10.513cqw;
  }
}