.container {
  width: 100%;
}

img.hero-graphic {
  width: 100%; /* or any custom size */
  height: 100%;
  object-fit: contain;
}

.border-2 {
  border-width: 2px;
}

.hidden {
  display: none;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.border-gray-800 {
  --tw-border-opacity: 1;
  border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce,
.hover\:animate-bounce:hover {
  animation: bounce 1s infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.hover\:animate-spin:hover {
  animation: spin 1s linear infinite;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.max-w-\[1920px\] {
  max-width: 1920px;
}

.px-4 {
  padding-left: 1rem /* 16px */;
  padding-right: 1rem /* 16px */;
}

.py-12 {
  padding-top: 3rem /* 48px */;
  padding-bottom: 3rem /* 48px */;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-auto {
  flex: 1 1 auto;
}

.right-\[6\%\] {
  right: 6%;
}

.right-1\/3 {
  right: 33.333333%;
}

.top-6 {
  top: 1.5rem /* 24px */;
}

.top-60 {
  top: 15rem /* 240px */;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.uppercase {
  text-transform: uppercase;
}

.underline {
  text-decoration-line: underline;
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity));
}

.active\:text-opacity-70:active {
  --tw-text-opacity: 0.7;
}

.text-xs {
  font-size: 0.75rem /* 12px */;
  line-height: 1rem /* 16px */;
}

.text-sm {
  font-size: 0.875rem /* 14px */;
  line-height: 1.25rem /* 20px */;
}

.text-xl {
  font-size: 1.25rem /* 20px */;
  line-height: 1.75rem /* 28px */;
}

.text-3xl {
  font-size: 2rem /* 32px */;
  line-height: 2.5rem /* 40px */;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Widths */
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-\[108px\] {
  width: 108px;
}

/* Heights */
.h-\[149\.44px\] {
  height: 149.44px;
}

.h-\[91px\] {
  height: 91px;
}

/**
 *  Media Queries
 */

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }

  .md\:block {
    display: block;
  }

  .md\:px-16 {
    padding-left: 4rem /* 64px */;
    padding-right: 4rem /* 64px */;
  }

  .md\:px-24 {
    padding-left: 6rem /* 96px */;
    padding-right: 6rem /* 96px */;
  }

  .md\:max-w-xl {
    max-width: 36rem /* 576px */;
  }

  .md\:max-w-4xl {
    max-width: 56rem /* 896px */;
  }

  .md\:text-4xl {
    font-size: 2.25rem /* 36px */;
    line-height: 2.5rem /* 40px */;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:top-12 {
    top: 3rem /* 48px */;
  }

  .md\:-right-2\/4 {
    right: -50%;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }

  .lg\:py-16 {
    padding-top: 4rem /* 64px */;
    padding-bottom: 4rem /* 64px */;
  }

  .lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .lg\:max-w-6xl {
    max-width: 72rem /* 1152px */;
  }

  .lg\:w-\[195px\] {
    width: 195px;
  }

  .lg\:h-\[269\.83px\] {
    height: 269.83px;
  }

  .lg\:w-\[177\.08px\] {
    width: 177.08px;
  }

  .lg\:h-\[173px\] {
    height: 173px;
  }

  .lg\:text-sm {
    font-size: 0.875rem /* 14px */;
    line-height: 1.25rem /* 20px */;
  }

  .lg\:text-lg {
    font-size: 1.125rem /* 18px */;
    line-height: 1.75rem /* 28px */;
  }

  .lg\:text-3xl {
    font-size: 2rem /* 32px */;
    line-height: 2.5rem /* 40px */;
  }

  .lg\:text-5xl {
    font-size: 3rem /* 48px */;
    line-height: 1;
  }

  .lg\:leading-\[110\%\] {
    line-height: 110%;
  }

  .lg\:leading-\[145\%\] {
    line-height: 145%;
  }

  .lg\:top-16 {
    top: 4rem /* 64px */;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }

  .xl\:text-base {
    font-size: 1rem /* 16px */;
    line-height: 1.5rem /* 24px */;
  }

  .xl\:text-4xl {
    font-size: 2.25rem /* 36px */;
    line-height: 2.5rem /* 40px */;
  }

  .xl\:text-6xl {
    font-size: 3.75rem /* 60px */;
    line-height: 1;
  }

  .xl\:max-w-2xl {
    max-width: 42rem /* 672px */;
  }

  .xl\:w-\[270px\] {
    width: 270px;
  }

  .xl\:h-\[373\.61px\] {
    height: 373.61px;
  }

  .xl\:px-44 {
    padding-left: 11rem /* 176px */;
    padding-right: 11rem /* 176px */;
  }

  .xl\:py-24 {
    padding-top: 6rem /* 96px */;
    padding-bottom: 6rem /* 96px */;
  }

  .xl\:leading-\[150\%\] {
    line-height: 150%;
  }

  .xl\:-right-3\/4 {
    right: -75%;
  }

  .xl\:top-32 {
    top: 8rem /* 128px */;
  }

  .xl\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }

  .\32xl\:right-\[10\%\] {
    right: 10%;
  }
}
