@font-face {
  font-family: 'Goldplay';
  src: url('/assets/fonts/Goldplay-Bold.woff2') format('woff2'),
    url('/assets/fonts/Goldplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Goldplay';
  src: url('/assets/fonts/Goldplay-Regular.woff2') format('woff2'),
    url('/assets/fonts/Goldplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Goldplay';
  src: url('/assets/fonts/Goldplay-SemiBold.woff2') format('woff2'),
    url('/assets/fonts/Goldplay-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

:root {
  --primary-color: #d1232a;
  --text-color: #4e5859;
  --dark-gray-color: #282b2d;
  --light-gray-color: #f2f3f3;
}

body {
  /* 4. Increase line-height */
  line-height: 1.2;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  font-family: 'Goldplay';
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

h2 {
  color: var(--dark-gray-color);
  font-size: 2rem;
  font-weight: 700;
}

h3 {
  color: var(--dark-gray-color);
  font-size: 1.25rem;
  font-weight: 600;
}

/* Utils */
.text-center {
  text-align: center;
}

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

.heading {
  text-align: center;
}

.red {
  color: var(--primary-color);
}

.hidden {
  display: none !important;
}

/* Main */
.wrapper {
  width: 1200px;
  max-width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
}

#site-header {
  position: relative;
  z-index: 9;
  margin-bottom: -6rem;
}

.site-logo {
  width: 8rem;
  height: auto;
}

#hero {
  position: relative;
  padding: 4rem 0 1rem 2rem;

}

#hero>img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero-content {
  background-color: var(--primary-color);
  position: relative;
  margin-left: auto;
  padding: 2rem 2rem 0 2rem;
  width: 40%;
  color: #fff;
}

.hero-content p {
  color: #fff;
}

.hero-content-wrapper {
  position: relative;
}

.hero-content h1 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-content img.logo-cropped {
  width: 80%;
  height: auto;
  margin-left: auto;
}

.hero-ticket {
  background-color: #fff;
  border-radius: 99rem;
  width: 6rem;
  height: 6rem;
  aspect-ratio: 1;
  padding: 0.75rem;
  position: absolute;
  left: -5rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-ticket img {
  transform: rotate(-15deg);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.hero-ticket-count {
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 700;
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 99rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

section {
  padding: 4rem 0;
  position: relative;
}

section .wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 0 auto;
}

section.gray {
  background-color: var(--light-gray-color);
}

section#form {
  padding-bottom: 0;
}

.list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.list-item {
  position: relative;
}

.list-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.list-item-bubble {
  border: 2px solid var(--primary-color);
  border-radius: 99rem;
  width: 12rem;
  height: 12rem;
  padding: 1.5rem;
}

.list-item-bubble-padding-small {
  padding: 1rem;
}

.list-item-bubble-padding-large {
  padding: 2.5rem;
}

.list-item p {
  font-weight: bold;
  font-size: 0.8rem;
  color: var(--dark-gray-color);
  text-align: center;
  margin-top: 1rem
}

.list-item-count {
  background-color: var(--dark-gray-color);
  color: #fff;
  font-weight: 700;
  padding: 0.5rem;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  border-radius: 99rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.list-item-count-center {
  font-size: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

button,
.button {
  background-color: var(--primary-color);
  appearance: none;
  cursor: pointer;
  min-width: 15rem;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  align-self: center;
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  z-index: 9;
}

.button-absolute {
  position: absolute;
  bottom: -1.25rem;
}

/* Form */
form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0.5rem 2rem;
}

.form-fields>* {
  background-color: var(--light-gray-color);
  border: 0;
  border-radius: 0.25rem;
  color: var(--dark-gray-color);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.form-fields input::placeholder {
  color: var(--dark-gray-color);
}

.form-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-field small {
  position: absolute;
  left: 0;
  padding: 0.5rem 1rem;
  top: 100%;
  font-size: 0.6rem;
}

form select {
  appearance: none;
  background: url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="327.67px" height="211.119px" viewBox="0 0 327.67 211.119" enable-background="new 0 0 327.67 211.119" xml:space="preserve"><g><defs><rect id="SVGID_1_" width="327.67" height="211.119"/></defs><clipPath id="SVGID_2_"><use xlink:href="%23SVGID_1_" overflow="visible"/></clipPath><path clip-path="url(%23SVGID_2_)" fill="%23272A2D" d="M5.849,39.62l139.78,163.12c8.628,10.063,23.779,11.226,33.842,2.598c0.931-0.798,1.8-1.667,2.598-2.598l139.78-163.12C335.188,24.05,324.128,0,303.628,0h-279.6C3.528,0-7.532,24.05,5.849,39.62"/></g></svg>') no-repeat right 1.25rem center;
  background-size: 0.75rem;
}

.form-field input[type="file"] {
  font-weight: normal;
  cursor: pointer;
}

.form-field input[type="file"]::file-selector-button {
  background: var(--dark-gray-color) url('data:image/svg+xml,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="57.667px" height="57.666px" viewBox="0 0 57.667 57.666" enable-background="new 0 0 57.667 57.666" xml:space="preserve"><g><defs><rect id="SVGID_1_" width="57.667" height="57.666"/></defs><clipPath id="SVGID_2_"><use xlink:href="%23SVGID_1_" overflow="visible"/></clipPath><path clip-path="url(%23SVGID_2_)" fill="%23FFFFFF" d="M55.046,31.454c-1.448,0-2.621,1.174-2.621,2.621v11.043c-0.005,4.033-3.273,7.301-7.307,7.306H12.547c-4.033-0.005-7.301-3.272-7.305-7.306V34.075c0-1.447-1.174-2.621-2.621-2.621C1.173,31.454,0,32.628,0,34.075v11.043c0.007,6.927,5.62,12.541,12.547,12.548h32.571c6.928-0.007,12.541-5.621,12.548-12.548V34.075C57.666,32.628,56.493,31.454,55.046,31.454"/><path clip-path="url(%23SVGID_2_)" fill="%23FFFFFF" d="M14.959,20.201L26.212,8.948v32.991c0,1.446,1.173,2.62,2.621,2.62c1.448,0,2.621-1.174,2.621-2.62V8.948l11.253,11.253c1.041,1.006,2.701,0.977,3.707-0.064c0.981-1.016,0.981-2.627,0-3.642L30.687,0.767c-1.023-1.023-2.683-1.023-3.706,0L11.253,16.495c-1.006,1.041-0.977,2.7,0.064,3.706C12.333,21.182,13.943,21.182,14.959,20.201"/></g></svg>') no-repeat 0.75rem center;
  background-size: 0.75rem;
  color: #fff;
  text-transform: uppercase;
  border: none;
  font-weight: 600;
  font-size: 0.6rem;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0.25rem 0.75rem 0.25rem 2rem;

}

form .checkbox-group {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

form .form-checkbox label {
  font-weight: 600;
  font-size: 0.6rem;
}

form .form-checkbox label a {
  color: var(--dark-gray-color);
}

form .form-checkbox label {
  position: relative;
  cursor: pointer;
}

form .form-checkbox label:before {
  content: "";
  -webkit-appearance: none;
  background-color: var(--light-gray-color);
  border: 2px solid var(--light-gray-color);
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
}

form .form-checkbox input {
  display: none;
}

form .form-checkbox input:checked+label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 7px;
  width: 6px;
  height: 14px;
  border: solid var(--dark-gray-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Products */
.products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0 4rem 0;
}

.product {
  background-color: var(--light-gray-color);
  position: relative;
  width: 12rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
}

.product img {
  max-width: 6rem;
  margin: 0 auto;
  padding-top: 2rem;
}

.product p {
  color: var(--dark-gray-color);
  font-weight: 600;
  font-size: 0.8rem;
}

.product p span {
  font-weight: normal;
}


.products.swiper {
  gap: 0;
  padding: 0 1.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.swiper {
  user-select: none;
  display: flex !important;
  flex-direction: row !important;
}

.swiper-slide {
  display: flex !important;
  flex-shrink: 0 !important;
}

#content .swiper-button-next,
#content .swiper-button-prev {
  height: 1rem;
  width: 1rem;
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .form-fields {
    grid-template-columns: 1fr;
  }
}