@font-face {
  font-family: "1FTV VIP Albra";
  src: url("../assets/fonts/1FTVVIPAlbra-Light.ttf");
}

:root {
  --primary-red: #e8232a;
  --primary-cream: #f3f2ec;
  --grey-black: #000;
  --grey-200: #d9d9d9;
  --grey-white: #fff;
}

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

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

.color-grey-black {
  color: var(--grey-black);
}

.color-grey-200 {
  color: var(--grey-200);
}

.color-grey-white {
  color: var(--grey-white);
}

.radius-minimal {
  border-radius: 0.25rem;
}

.radius-rounded {
  border-radius: 0.5rem;
}

.radius-full {
  border-radius: 360px;
}

.bg-primary-black {
  background-color: var(--grey-black);
}

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

.bg-primary-cream {
  background-color: var(--primary-cream);
}

.bg-grey-200 {
  background-color: var(--grey-200);
}

.text-heading-1 {
  font-family: "1FTV VIP Albra", sans-serif;
  font-size: 4rem;
  line-height: 125%;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-heading-2 {
  font-family: "1FTV VIP Albra", sans-serif;
  font-size: 2.25rem;
  line-height: 150%;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-heading-3 {
  font-family: "1FTV VIP Albra", sans-serif;
  font-size: 1.5rem;
  line-height: 150%;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-title-1 {
  font-family: "Manrope", sans-serif;
  font-size: 2.25rem;
  line-height: 100%;
  font-weight: 800;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-title-2 {
  font-family: "Manrope", sans-serif;
  font-size: 1.5rem;
  line-height: 100%;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-title-3 {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 100%;
  font-weight: 800;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-cta-1 {
  font-family: "Manrope", sans-serif;
  font-size: 1.5rem;
  line-height: 100%;
  font-weight: 800;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-cta-2 {
  font-family: "Manrope", sans-serif;
  font-size: 1.125rem;
  line-height: 100%;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-subtitle-1 {
  font-family: "Manrope", sans-serif;
  font-size: 1.125rem;
  line-height: 100%;
  font-weight: 600;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-subtitle-2 {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 100%;
  font-weight: 800;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-banner {
  font-family: "1FTV VIP Albra", sans-serif;
  font-size: 1rem;
  line-height: 100%;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-paragraph {
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  line-height: 125%;
  font-weight: 200;
  font-optical-sizing: auto;
  font-style: normal;
}

.text-note {
  font-family: "Manrope", sans-serif;
  font-size: 0.75rem;
  line-height: 125%;
  font-weight: 200;
  font-optical-sizing: auto;
  font-style: normal;
}

.fw-2 {
  font-weight: 200;
}

.fw-3 {
  font-weight: 300;
}

.fw-4 {
  font-weight: 400;
}

.fw-5 {
  font-weight: 500;
}

.fw-6 {
  font-weight: 600;
}

.fw-7 {
  font-weight: 700;
}

.fw-8 {
  font-weight: 800;
}

@media (max-width: 992px) {
  .text-heading-1 {
    font-size: 3.25rem;
  }

  .text-heading-2 {
    font-size: 1.75rem;
  }

  .text-heading-3 {
    font-size: 1.25rem;
  }

  .text-title-1 {
    font-size: 1.5rem;
  }

  .text-title-2 {
    font-size: 1.25rem;
  }

  .text-cta-1 {
    font-size: 1.25rem;
  }

  .text-cta-2 {
    font-size: 1rem;
  }

  .text-subtitle-1 {
    font-size: 1rem;
  }

  .text-subtitle-1 {
    font-size: 1rem;
  }

  .text-banner {
    font-size: 1rem;
  }

  .text-paragraph {
    font-size: 1rem;
  }

  .text-note {
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  .text-heading-1 {
    font-size: 3rem;
  }
}

@media (max-width: 576px) {
  .text-heading-1 {
    font-size: 2.5rem;
  }
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.global-button-white {
  padding: 0.25rem 1.5rem;
  border: 1px solid var(--grey-white);
  color: var(--grey-white);
  border-radius: 100px;
  transition: 0.3s;
  cursor: pointer;
}

.global-button-white:hover {
  background-color: var(--grey-white);
  color: var(--grey-black);
  transition: 0.3s;
}

.global-button-red {
  padding: 0.25rem 1.5rem;
  border: 1px solid var(--primary-red);
  background-color: var(--primary-red);
  color: var(--grey-white);
  border-radius: 100px;
  transition: 0.3s;
  cursor: pointer;
}

.global-button-red:hover {
  background-color: var(--grey-white);
  color: var(--primary-red);
  transition: 0.3s;
}

.global-button-black {
  padding: 0.25rem 1.5rem;
  border: 1px solid var(--grey-black);
  color: var(--grey-black);
  border-radius: 100px;
  transition: 0.3s;
  cursor: pointer;
}

.global-button-black:hover {
  background-color: var(--primary-cream);
  color: var(--grey-black);
  transition: 0.3s;
}

.global-button-outline {
  padding: 0.25rem 1.5rem;
  border: 1px solid var(--grey-black);
  color: var(--grey-black);
  border-radius: 100px;
  transition: 0.3s;
  cursor: pointer;
}


.global-button-outline:hover {
  background-color: var(--grey-black);
  color: var(--grey-white);
  transition: 0.3s;
}


.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}