@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");

:root {
  --ntra1-font-xl: 72px;
  --ntra1-font-lg: 55px;
  --ntra1-font-md: 30px;
  --ntra1-font-sm: 24px;
}

@media (max-width: 767px) {
  :root {
    --ntra1-font-xl: 36px;
    --ntra1-font-lg: 27px;
    --ntra1-font-md: 15px;
    --ntra1-font-sm: 12px;
  }
}

* {
  font-family: 'Inter', sans-serif;
}

body {
  background-image: var(--ntra1-page-background);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  color: #FFFFFF;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.button {
  background: linear-gradient(90deg, #FAA521 56.26%, #FFC870 100%);
  text-shadow: 0 4px 4px #00000040;
  border-radius: 25px;
  white-space: nowrap;
}

.button.secondary {
  background: transparent;
  border: 2px solid #CECECE;
  text-shadow: none;
}

.accented {
  background: #FAA521;
  text-shadow: 0 4px 4px #00000040;
  padding: 0 0.5rem;
}

#block1 {
  background-image: var(--ntra1-hero-background);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-text {
  max-width: 550px;
  padding: 150px 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: flex-start;
}

.hero-buttons {
  display: flex;
  gap: 3rem;
}

.hero h1 {
  font-weight: 600;
  font-size: var(--ntra1-font-xl);
  line-height: 120%;
  text-shadow: 0 4px 4px #00000040;
}

.hero p {
  font-weight: 500;
  font-size: var(--ntra1-font-md);
  line-height: 150%;
  text-shadow: 0 4px 4px #00000040;
}

.hero .button {
  font-weight: 600;
  font-size: var(--ntra1-font-md);
  line-height: 100%;
  padding: 16px 32px;
}

#block2 {
  padding: 150px 0;
}

#block2 .row {
  gap: 75px;
}

.benefit {
  background-image: var(--ntra1-card-background);
  background-size: 100% 100%;
  padding: 32px;
  text-align: center;
  align-self: stretch;
}

.benefit h2 {
  font-weight: 700;
  font-size: var(--ntra1-font-md);
  line-height: 120%;
  text-shadow: 0 4px 4px #00000040;
  padding-top: 180px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 140px auto;
  margin-bottom: 1.75rem;
}

.benefit::before {
  display: block;
  text-align: center;
  margin-bottom: 1.75rem;
  color: #FAA521;
  font-weight: 700;
  font-size: var(--ntra1-font-lg);
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 4px 4px #00000040;
}

#benefit1::before {
  content: '#1';
}

#benefit2::before {
  content: '#2';
}

#benefit3::before {
  content: '#3';
}

#benefit1 h2 {
  background-image: var(--ntra1-card-1-background);
}

#benefit2 h2 {
  background-image: var(--ntra1-card-2-background);
}

#benefit3 h2 {
  background-image: var(--ntra1-card-3-background);
}

.benefit p {
  font-weight: 400;
  font-size: var(--ntra1-font-md);
  line-height: 140%;
  color: #FDFDFD;
}

.registration, .message {
  background-image: var(--ntra1-block-background);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 32px;
  max-width: 750px;
  margin: 0 auto;
}

.registration h1 {
  font-weight: 600;
  font-size: var(--ntra1-font-lg);
  line-height: 140%;
  text-shadow: 0 4px 4px #00000040;
  text-align: center;
  margin-bottom: 1.5rem;
}

.registration h1 small {
  display: block;
  font-weight: 400;
  font-size: var(--ntra1-font-md);
  line-height: 140%;
  text-shadow: none;
}

.registration .button {
  width: 100%;
  font-weight: 600;
  font-size: var(--ntra1-font-md);
  margin-top: 1.5rem;
}

.registration-note {
  font-weight: 200;
  font-size: var(--ntra1-font-md);
  line-height: 140%;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #E6E6E6;
  margin: 150px 0 100px;
  text-align: center;
  font-style: italic;
}

.control {
  width: 100%;
}

.control label {
  color: #9d9d9d;
  width: 100%;
}

.control label a {
  color: #9d9d9d;
  text-decoration: underline;
}

.control-email label {
  display: none;
}

.control input[type=email] {
  width: 100%;
  border: 1px solid #FFFFFF;
  background: #FDFDFD4D;
  color: #FFFFFF;
  font-weight: 400;
  font-size: var(--ntra1-font-md);
  line-height: 100%;
  padding: 20px 24px;
  border-radius: 25px;
}

footer {
  font-weight: 200;
  background: #0000001A;
  color: #E5E5E5;
  font-style: italic;
}

footer nav a {
  font-weight: 400;
  color: #E5E5E5;
}