@font-face {
  font-family: 'Roboto Thin';
  src: url("../fonts/Roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal; }

@font-face {
  font-family: 'Roboto Light';
  src: url("../fonts/Roboto/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Roboto Medium';
  src: url("../fonts/Roboto/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Roboto Bold';
  src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Roboto Black';
  src: url("../fonts/Roboto/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal; }

@font-face {
  font-family: 'Roboto Thin Italic';
  src: url("../fonts/Roboto/Roboto-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic; }

@font-face {
  font-family: 'Roboto Light Italic';
  src: url("../fonts/Roboto/Roboto-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'Roboto Italic';
  src: url("../fonts/Roboto/Roboto-RegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: 'Roboto Medium Italic';
  src: url("../fonts/Roboto/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: 'Roboto Bold Italic';
  src: url("../fonts/Roboto/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: 'Roboto Black Italic';
  src: url("../fonts/Roboto/Roboto-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic; }

:root {
  --grid-min-item-size: 240px;
  --footer-height: 8.813rem;
  --color-grey-soft: #EDEDED;
  --color-green: #A0C54A;
  --color-purple-opacity: rgba(68, 69, 144, 0.9);
  --color-purple-opacity-50: rgba(68, 69, 144, 0.5);
  --color-purple-light: #A0A4F4;
  --color-purple-lighter: #8E95CA;
  --color-purple-dark: #151D41;
  --color-dark-blue: #101D60;
  --color-red: #D5352B;
  --radius: 0.625rem;
  --radius-small: 0.535rem;
  --radius-large: 1rem;
  --linear-gradient: linear-gradient(227deg, rgba(160, 164, 244, 0.85) -15.49%, rgba(160, 164, 244, 0) 53.36%); }

/* Global CSS */
html {
  scroll-behavior: smooth; }

body {
  background: var(--color-dark-blue);
  color: #ffffff; }

h1,
h2 {
  color: var(--color-primary);
  line-height: 1.1; }

h3 {
  line-height: 1.2; }

section {
  scroll-margin-top: 305px; }

[role="list"] {
  padding: 0; }

[role="contentinfo"] {
  margin-block-start: var(--space-l-3xl);
  font-size: var(--step--1); }

a {
  color: currentcolor;
  text-decoration-color: var(--color-primary); }

/* Blocks */
.home,
.confirmation {
  background-image: url("../Images/background_xd.webp");
  height: calc(100vh - var(--footer-height));
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block-start: 14.688rem;
  padding-block-end: 13.875rem; }

.hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6.75rem; }
  .hero-image img {
    margin-block-end: 1.875rem; }
  .hero-image p {
    color: var(--color-purple-light);
    font-size: 20px;
    line-height: 22px;
    text-transform: uppercase; }

.registration-info {
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .registration-info h1 {
    color: var(--color-green);
    font-size: 64px;
    margin-block-end: 30px; }
  .registration-info input {
    font-size: 17px;
    border-radius: var(--radius);
    border: none;
    background: var(--color-purple-opacity);
    padding: 11.25px 0;
    width: 100%;
    color: #fff;
    padding-left: 1rem; }
    .registration-info input::placeholder {
      position: relative;
      left: -1rem; }
  .registration-info ::placeholder {
    color: white;
    padding-left: 16px; }
  .registration-info button {
    margin-inline: 80px; }

.resource-library {
  margin-top: 305px; }

.btn {
  font-size: 20px;
  color: var(--color-purple-dark);
  border-radius: var(--radius-small);
  background-color: var(--color-purple-light);
  padding: 7px 0;
  border: none;
  cursor: pointer; }
  .btn:disabled {
    opacity: 0.5;
    pointer-events: none; }

.card {
  border-radius: var(--radius-large);
  display: flex;
  flex-direction: column;
  background-color: var(--color-purple-light);
  min-height: 296px;
  overflow: hidden;
  padding: 16px 2px;
  position: relative; }
  .card__checkbox {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer; }
    :checked ~ .card__checkbox-border {
      box-shadow: 0 0 0 4px inset white; }
    :checked ~ .card__checkbox-mark {
      border: 1px solid var(--color-dark-blue); }
      :checked ~ .card__checkbox-mark:before {
        content: "";
        background-color: var(--color-dark-blue);
        display: block;
        position: absolute;
        width: 12px;
        height: 12px;
        left: 4px;
        top: 4px;
        border-radius: var(--radius-small); }
  .card__checkbox-border {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--radius-large); }
  .card__checkbox-mark {
    background-color: var(--color-grey-soft);
    border-radius: var(--radius-small);
    width: 22px;
    height: 22px;
    display: block;
    align-self: end;
    margin-right: 12px;
    position: relative; }
  .card__image-content {
    margin-block-end: 8px;
    position: relative; }
    .card__image-content img {
      max-width: 236px; }
    .card__image-content--info {
      position: absolute;
      bottom: 0;
      text-align: left;
      display: flex;
      align-items: flex-end;
      margin-left: 25px;
      margin-bottom: 8px; }
      .card__image-content--info > :first-child {
        writing-mode: vertical-rl;
        transform: scaleY(-1) scaleX(-1);
        line-height: 1; }
      .card__image-content--info > :last-child {
        line-height: 1.1;
        padding-left: 5px; }
  .card__caption {
    margin-inline-start: 34px; }
    .card__caption span {
      display: block;
      line-height: 1.1; }
    .card__caption :first-child {
      font-size: 22px;
      color: var(--color-dark-blue);
      margin-bottom: 2px; }
    .card__caption :last-child {
      font-size: 15px;
      color: var(--color-dark-blue); }

.footer {
  background-color: var(--color-purple-dark);
  padding: 16px 0 24px 33px; }
  .footer__content {
    display: flex; }
    .footer__content p,
    .footer__content a {
      font-size: 13px;
      line-height: 15px; }
    .footer__content p {
      max-width: 84ch; }

.h-line {
  width: 1px;
  height: auto;
  background-color: white;
  display: block;
  margin-inline-start: 24px;
  margin-inline-end: 16px; }

.top-nav {
  border-bottom: 1px solid var(--color-green);
  padding: 23px 33px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../Images/background_xd_header.webp");
  background-size: cover;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3; }
  .top-nav > img {
    margin-block-end: 24px; }
  .top-nav ul {
    margin: 0;
    display: flex;
    list-style: none;
    padding: 0;
    gap: 8px; }
    .top-nav ul a {
      font-size: 14px;
      text-decoration: none;
      border-radius: 8px;
      border: 1px solid #FFF;
      background: var(--color-purple-opacity-50);
      font-family: "Roboto", sans-serif;
      font-weight: 400;
      font-style: normal;
      width: 120px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center; }

.bottom-nav {
  border-top: 1px solid var(--color-green);
  padding: 32px 0;
  background-color: var(--color-dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 3; }
  .bottom-nav .btn {
    width: 253px; }

.go-home-btn {
  display: flex;
  gap: 7px;
  align-self: flex-start;
  font-size: 18px;
  cursor: pointer; }

.selection-pdf {
  background-image: url("../Images/background_xd_no_lines.webp");
  background-size: contain;
  background-repeat: repeat-y; }
  .selection-pdf section {
    padding: 24px 16px 48px;
    background-image: var(--linear-gradient);
    background-size: cover; }
  .selection-pdf__title {
    font-size: 34px; }

/* Compositions */
.auto-grid {
  display: grid;
  grid-template-columns: minmax(var(--grid-min-item-size), max-content) repeat(auto-fill, var(--grid-min-item-size));
  gap: 24px;
  justify-content: center; }

.form-group-cols {
  display: flex;
  gap: 1rem;
  margin-block-end: 1rem; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center); }

/* Utilities */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; }

.wrapper {
  margin-inline: auto;
  padding-inline: var(--space-m);
  max-width: 75rem;
  position: relative; }

.p-0 {
  padding: 0; }

.w-100 {
  width: 100%; }

.f-10 {
  font-size: 10px; }

.f-16 {
  font-size: 16px; }

f-19 {
  font-size: 19px; }

.f-20 {
  font-size: 20px; }

.f-28 {
  font-size: 28px; }

.f-34 {
  font-size: 34px; }

.m-b-1 {
  margin-block-end: 1rem; }

.m-b-1-75 {
  margin-block-end: 1.75rem; }

.m-b-2 {
  margin-block-end: 2rem; }

.m-b-110 {
  margin-block-end: 6.875rem; }

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

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

.line-height-0 {
  line-height: 0; }

.line-height-30 {
  line-height: 30px; }

.invalid-input {
  border: 1px solid var(--color-red) !important; }

.roboto-thin {
  font-family: "Roboto Thin", sans-serif;
  font-weight: 100;
  font-style: normal; }

.roboto-light {
  font-family: "Roboto Light", sans-serif;
  font-weight: 300;
  font-style: normal; }

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal; }

.roboto-medium {
  font-family: "Roboto Medium", sans-serif;
  font-weight: 500;
  font-style: normal; }

.roboto-bold {
  font-family: "Roboto Bold", sans-serif;
  font-weight: 700;
  font-style: normal; }

.roboto-black {
  font-family: "Roboto Black", sans-serif;
  font-weight: 900;
  font-style: normal; }

.roboto-thin-italic {
  font-family: "Roboto Thin Italic", sans-serif;
  font-weight: 100;
  font-style: italic; }

.roboto-light-italic {
  font-family: "Roboto Light Italic", sans-serif;
  font-weight: 300;
  font-style: italic; }

.roboto-regular-italic {
  font-family: "Roboto Italic", sans-serif;
  font-weight: 400;
  font-style: italic; }

.roboto-medium-italic {
  font-family: "Roboto Medium Italic", sans-serif;
  font-weight: 500;
  font-style: italic; }

.roboto-bold-italic {
  font-family: "Roboto Black Italic", sans-serif;
  font-weight: 700;
  font-style: italic; }

.roboto-black-italic {
  font-family: "Roboto Black Italic", sans-serif;
  font-weight: 900;
  font-style: italic; }