@font-face {
  font-family: "Freckle Face";
  src:
    url("../fonts/FreckleFace-Regular.woff2") format("woff2"),
    url("../fonts/FreckleFace-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@property --oct-f {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.35;
}

@property --rotate-transform {
  syntax: '<angle>';
  initial-value: 0rad;
  inherits: false;
}

@keyframes kf_1_11288_rotate_0 {
  0% {
    --rotate-transform: -1.011rad;
  }

  0.9% {
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    --rotate-transform: -1.011rad;
  }

  32.5% {
    --rotate-transform: -0.764rad;
  }

  100% {
    --rotate-transform: -0.764rad;
  }
}

@keyframes kf_1_11288_translate_0 {
  0% {
    translate: 573.752px 39.752px;
  }

  0.9% {
    translate: 573.752px 39.752px;
  }

  32.5% {
    translate: 390.678px -20.322px;
  }

  69.153% {
    translate: 209.752px -166.248px;
  }

  100% {
    translate: 209.752px -166.248px;
  }
}

#oct-hero .spider {
  z-index: 9;
  left: 71px;
  top: 0;
  transform: rotate(var(--rotate-transform, -1.011rad));
  animation:
    kf_1_11288_rotate_0 2.998507s linear,
    kf_1_11288_translate_0 2.998507s linear;
  animation-iteration-count: infinite;
  width: 115px;
  height: 115px;
  aspect-ratio: 1/1;
}

@media (prefers-reduced-motion: reduce) {
  #oct-hero .spider {
    animation: none;
    transform: none;
    translate: none;
  }
}

#oct-hero .freckle {
  font-family: "Freckle Face", cursive;
  font-weight: 400;
}

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

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

#form-bundle {
  z-index: 9;
  position: relative;
}

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

#oct-hero .oct-inner {
  width: 1350px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 107px;
  padding-bottom: 123px;
}

#oct-hero .oct-right {
  max-width: 630px;
}

#oct-hero .oct-right .button {
  width: 11.75em;
  height: 2.25em;
  border-radius: 54px;
  font-size: 1.25rem;
  margin-top: 14px;
  padding: 0.13em 0 0 0;
  line-height: 1;
  background-color: #00FE00;
  top: 22px;
  z-index: 4;
  border: none;
}

#form-bundle form {
  max-width: 100%;
  width: 100%;
  padding: 0 30px;
}

#form-bundle .form-action {
  text-align: center;
}

#oct-hero .form-text {
  font-family: "Lato", sans-serif;
  color: #00FE00;
  text-align: center;
  font-size: 27px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%;
  /* 27px */
  letter-spacing: 0.54px;
  margin-top: 4px;
}

#oct-hero .text-top {
  color: #FFF;
  font-size: 32.341px;
  font-style: normal;
  font-weight: 500;
  line-height: 132%;
}

#oct-hero .text-top span {
  color: #00FE00;
  text-align: center;
  font-size: 32.341px;
  font-style: normal;
  font-weight: 400;
  line-height: 132%;
  /* 42.69px */
  text-transform: uppercase;
  -webkit-text-stroke: 5.94px #090;
  paint-order: stroke fill;
}

#hero-form {
  margin-top: 20px;
}

#oct-hero .oh-stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
}

#oct-hero .oh-headline {
  width: 100%;
  height: 195.064px;
  padding-top: 27px;
}

#oct-hero .oh-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-text-stroke: 1cqw #009900;
  paint-order: stroke fill;
}

#oct-hero .oh-chars {
  position: relative;
}

#oct-hero .oh-line1 {
  width: auto;
  font-size: 11.8cqw;
  line-height: 11.8cqw;
}

#oct-hero .oh-line1::before {
  -webkit-text-stroke: 0.265cqw #009900;
}

#oct-hero .oh-line1 .oh-ch {
  text-shadow: 1cqw 1.1cqw 0 rgb(0 153 0 / var(--oct-f));
}

#oct-hero .oh-line1::after {
  -webkit-text-stroke: 0.133cqw #009900;
  translate: 1cqw 1.1cqw;
}

#oct-hero .oh-line2 {
  width: auto;
  font-size: 15cqw;
  line-height: 13cqw;
  top: 106px;
}

#oct-hero .oh-line2::before {
  -webkit-text-stroke: 0.333cqw #009900;
}

#oct-hero .oh-line2 .oh-ch {
  text-shadow: 1cqw 1.1cqw 0 rgb(0 153 0 / var(--oct-f));
}

#oct-hero .oh-line2::after {
  -webkit-text-stroke: 0.167cqw #009900;
  translate: 1cqw 1.1cqw;
}

#oct-hero .oh-ch {
  --oct-f: 0.35;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#oct-hero .oh-chars .oh-ch {
  color: rgb(calc(79 - 79 * var(--oct-f)) calc(254 * var(--oct-f)) calc(149 - 149 * var(--oct-f)));
}

#oct-hero .oh-ch.oh-c1 {
  animation-name: oct-flick-1;
}

#oct-hero .oh-ch.oh-c2 {
  animation-name: oct-flick-2;
}

#oct-hero .oh-ch.oh-c3 {
  animation-name: oct-flick-3;
}

#oct-hero .oh-ch.oh-c4 {
  animation-name: oct-flick-4;
}

#oct-hero .oh-ch.oh-c5 {
  animation-name: oct-flick-5;
}

#oct-hero .oh-ch.oh-c6 {
  animation-name: oct-flick-6;
}

#oct-hero .oh-ch.oh-c7 {
  animation-name: oct-flick-7;
}

#oct-hero .oh-ch.oh-c8 {
  animation-name: oct-flick-8;
}

#oct-hero .oh-ch.oh-c9 {
  animation-name: oct-flick-9;
}

#oct-hero .oh-ch.oh-c10 {
  animation-name: oct-flick-10;
}

#oct-hero .oh-ch.oh-c11 {
  animation-name: oct-flick-11;
}

#oct-hero .oh-ch.oh-c12 {
  animation-name: oct-flick-12;
}

#oct-hero .oh-ch.oh-c13 {
  animation-name: oct-flick-13;
}

#oct-hero .oh-ch.oh-c14 {
  animation-name: oct-flick-14;
}

#oct-hero .oh-ch.oh-c15 {
  animation-name: oct-flick-15;
}

#oct-hero .oh-ch.oh-c16 {
  animation-name: oct-flick-16;
}

#oct-hero .oh-ch.oh-c17 {
  animation-name: oct-flick-17;
}

#oct-hero .oh-ch.oh-c18 {
  animation-name: oct-flick-18;
}

#oct-hero .oh-ch.oh-c19 {
  animation-name: oct-flick-19;
}

#oct-hero .oh-ch.oh-c20 {
  animation-name: oct-flick-20;
}

#oct-hero .oh-ch.oh-c21 {
  animation-name: oct-flick-21;
}

#oct-hero .oh-ch.oh-c22 {
  animation-name: oct-flick-22;
}

#oct-hero .oh-ch.oh-c23 {
  animation-name: oct-flick-23;
}

#oct-hero .oh-ch.oh-c24 {
  animation-name: oct-flick-24;
}

#oct-hero form.uni-style .form-field select {
  padding-bottom: 0;
}

@keyframes oct-flick-1 {

  0% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  4% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  8% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  12% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  16.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-2 {

  0%,
  3.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  7.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  11.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  15.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  20%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-3 {

  0%,
  6.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  10.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  14.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  18.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  23.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-4 {

  0%,
  10% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  14% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  18% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  22% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  26.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-5 {

  0%,
  13.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  17.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  21.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  25.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  30%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-6 {

  0%,
  16.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  20.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  24.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  28.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  33.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-7 {

  0%,
  20% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  24% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  28% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  32% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  36.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-8 {

  0%,
  23.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  27.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  31.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  35.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  40%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-9 {

  0%,
  26.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  30.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  34.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  38.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  43.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-10 {

  0%,
  30% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  34% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  38% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  42% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  46.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-11 {

  0%,
  33.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  37.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  41.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  45.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  50%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-12 {

  0%,
  36.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  40.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  44.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  48.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  53.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-13 {

  0%,
  40% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  44% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  48% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  52% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  56.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-14 {

  0%,
  43.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  47.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  51.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  55.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  60%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-15 {

  0%,
  46.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  50.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  54.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  58.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  63.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-16 {

  0%,
  50% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  54% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  58% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  62% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  66.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-17 {

  0%,
  53.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  57.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  61.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  65.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  70%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-18 {

  0%,
  56.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  60.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  64.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  68.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  73.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-19 {

  0%,
  60% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  64% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  68% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  72% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  76.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-20 {

  0%,
  63.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  67.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  71.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  75.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  80%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-21 {

  0%,
  66.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  70.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  74.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  78.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  83.333%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-22 {

  0%,
  70% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  74% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  78% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  82% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  86.667%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-23 {

  0%,
  73.333% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  77.333% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  81.333% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  85.333% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  90%,
  100% {
    --oct-f: 1;
  }
}

@keyframes oct-flick-24 {

  0%,
  76.667% {
    --oct-f: 0.35;
    animation-timing-function: ease-in-out;
  }

  80.667% {
    --oct-f: 0.68;
    animation-timing-function: ease-in-out;
  }

  84.667% {
    --oct-f: 0.52;
    animation-timing-function: ease-in-out;
  }

  88.667% {
    --oct-f: 0.82;
    animation-timing-function: ease-in-out;
  }

  93.333%,
  100% {
    --oct-f: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #oct-hero .oh-ch {
    animation: none;
    --oct-f: 1;
  }
}

#oct-hero .spider-web {
  width: 100%;
  top: 0;
  clip-path: inset(0 0 24px 0);
  z-index: 0;
}

#oct-hero .left-inner {
  max-width: 630px;
}

@supports (background: -webkit-named-image(i)) {
  #oct-hero .oct-right .button {
    padding-top: 2px;
  }

  #oct-hero .oh-line1 .oh-ch {
    text-shadow: 0.5cqw 0.6cqw 0 rgb(0 153 0 / var(--oct-f));
  }

  #oct-hero .oh-line2 .oh-ch {
    text-shadow: 0.5cqw 0.6cqw 0 rgb(0 153 0 / var(--oct-f));
  }
}

@media screen and (max-width: 1300px) {
  #oct-hero .oct-inner {
    justify-content: center;
    gap: 30px;
  }
}

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

@media screen and (max-width: 992px) {
  #oct-hero .oct-inner {
    flex-direction: column;
    padding-top: 50px;
    padding-bottom: 70px;
    gap: 50px;
  }

  #oct-hero .oct-right {
    max-width: 90%;
  }
}

@media screen and (max-width: 767px) {
  #oct-hero .oct-inner {
    width: 100% !important;
    padding-top: 0;
    padding-bottom: 0;
    gap: 0;
  }

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

  #oct-hero .oct-right .button {
    margin-top: 21px;
  }

  #oct-hero .oct-right .button {
    margin: 0 auto;
    margin-top: 21px;
  }

  #oct-hero .text-top,
  #oct-hero .text-top span {
    font-size: 8.5cqw;
    line-height: 11cqw;
    margin-top: 0;
  }

  #oct-hero .oh-line2 .oh-ch {
    text-shadow: 1.417cqw 2cqw 0 rgb(0 153 0 / var(--oct-f));
  }

  #oct-hero .oh-line {
    -webkit-text-stroke: 1.265cqw #009900;
  }

  #oct-hero .oh-line2 {
    font-size: 19.8cqw;
    top: 34cqw;
  }

  #oct-hero .oh-line1 {
    font-size: 17.8cqw;
    line-height: 19.8cqw;
  }

  #oct-hero .oh-headline {
    height: 54cqw;
    padding-top: 12cqw;
  }

  #oct-hero .spider {
    width: 86px;
    height: 86px;
    left: unset;
    right: 507px;
  }

  #oct-hero .spider-web {
    clip-path: unset;
    max-width: 105%;
    width: 105%;
  }
}

@media screen and (max-width: 567px) {
  #oct-hero {
    background-image: url(/themes/gills/promos/back-m.webp);
    background-image: -webkit-image-set(url("/themes/gills/promos/back-m.webp") 1x, url("/themes/gills/promos/back-m@2x.webp") 2x);
    background-position: top left;
    background-size: 100% auto;
    z-index: 9;
  }

  #preapproved {
    margin-top: 258px;
  }


  @supports (background: -webkit-named-image(i)) {

    #oct-hero .oh-line1 .oh-ch {
      text-shadow: 0.85cqw 0.95cqw 0 rgb(0 153 0 / var(--oct-f));
    }

    #oct-hero .oh-line2 .oh-ch {
      text-shadow: 0.85cqw 0.95cqw 0 rgb(0 153 0 / var(--oct-f));
    }
  }
}

@media screen and (max-width: 400px) {
  #oct-hero {
    background-size: auto 56%;
  }
}