/* header */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background: #fff;
  z-index: 9;
}

.navigation {
  display: none;
}

.open-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.close-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.svg {
  stroke: #002919;
  transition: stroke 0.3s ease;
}

.svg:hover {
  stroke: #002b8d;
}

.navigation-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.navigation-item {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  border: 1px solid transparent;
  text-transform: capitalize;
  border-radius: 12px;
  padding: 8px 12px;
  transition: border-color 0.3s ease;
}

.navigation-item:hover {
  border-color: #fff;
}

.modal {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 8;
  padding: 60px;
  padding-top: 112px;
  transform: translateY(-150%) translateX(-50%);
  transition: transform 1s ease;
  z-index: 8;
  background: #002b8d;
}

.modal-navigation-list {
  flex-direction: column;
  align-items: flex-start;
}

.modal-click {
  transform: translateY(0) translateX(-50%);
}

@media screen and (min-width: 1433px) {
  .header {
    padding: 21px 0;
  }

  .navigation-item {
    color: #000;
  }

  .navigation-item:hover {
    border-color: #407bff;
  }

  .navigation {
    display: block;
  }

  .open-modal {
    display: none;
  }
}

/* home */

#home {
  padding-top: 166px;
  padding-bottom: 429px;
  background-image: url(../images/hero.png);
  background-position: center;
  background-size: cover;
}

.home-wrapper {
  border-radius: 22px;
  padding: 22px 18px;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.75);
}

.home-title {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  color: #002b8d;
  margin-bottom: 18px;
}

.home-text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  color: #002b8d;
}

@media screen and (min-width: 1433px) {
  #home {
    padding-top: 221px;
    padding-bottom: 359px;
  }

  .home-wrapper {
    width: 945px;
    margin: 0 auto;
  }

  .home-title {
    font-size: 42px;
    margin-bottom: 18px;
  }
  .home-text {
    color: #002b8d;
  }

  .home-description {
    max-width: 636px;
    margin: 0 auto;
    margin-bottom: 36px;
  }

  .hero-img {
    max-height: 818px;
  }
}

/* calendar */

#calendar {
  background-image: url(../images/fon.png);
}

.calendar-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;

  li {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #000;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    width: 332px;
    max-width: 100%;
  }

  span {
    padding: 18px;
  }
}

@media screen and (min-width: 768px) {
  .calendar-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media screen and (min-width: 1433px) {
  .calendar-list {
    .item2 {
      width: 510px;
    }
  }
}

/* blog */

#blog {
  padding-bottom: 0;
}

.features-title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 22px;
  line-height: 109%;
  text-align: center;
  color: #fff;
  margin-bottom: 92px;
}

.features-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform: translateY(-70px);

  li {
    border-radius: 12px;
    padding: 60px 18px;
    width: 335px;
    max-width: 100%;
    min-height: 144px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    background: #fff;

    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 133%;
    color: #000;
    text-align: center;
  }
}

@media screen and (min-width: 1433px) {
  .features-list {
    flex-direction: row;
    justify-content: center;
    align-items: normal;
  }
}

/* events */

#events {
  padding-bottom: 382px;
  background-image: url(../images/event.png);
  background-position: bottom center;
  background-repeat: no-repeat;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: disc;
  padding-left: 20px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 133%;
  color: #000;
}

@media screen and (min-width: 1433px) {
  #events {
    padding-bottom: 97px;
    background-position: bottom right;

    .main-title {
      text-align: start;
    }

    .main-text {
      max-width: 642px;
      text-align: start;
    }

    .events-list {
      max-width: 642px;
    }
  }
}

/* heroes */

.heroes-list {
  transform: translateY(0);

  li {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    background: #002b8d;
    color: #fff;
    padding: 30px 18px;
  }
}

@media screen and (min-width: 1433px) {
  #heroes {
    .main-text,
    .main-title {
      text-align: start;
    }
  }
}

/* rewind */

.rewind-list {
  border-radius: 12px;
  padding: 60px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  background: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 133%;
  text-align: center;
  color: #000;
  width: 506px;
  max-width: 100%;
  margin: 0 auto;
}

/* scene */

.scene-list {
  display: flex;
  flex-direction: column;
  gap: 22px;

  li {
    border-radius: 12px;
    padding: 30px 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    background: #fff;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 18px;
    line-height: 133%;
    color: #000;
    text-align: center;
  }
}

@media screen and (min-width: 1433px) {
  #scene {
    .main-text,
    .main-title {
      text-align: start;
    }
  }

  .scene-list {
    flex-direction: row;
    justify-content: center;
    align-items: center;

    li {
      width: calc((100% - 44px) / 3);
    }
  }
}

/* studios */

#studios {
  background-color: #fff;
  background-image: url(../images/bg.png);
}

.studios-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: disc;
  padding-left: 20px;

  li {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 133%;
    color: #000;
  }
}

.moment {
  margin: 0 auto;
  margin-top: 32px;
}

@media screen and (min-width: 1433px) {
  .studios-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 78px;

    .main-text,
    .main-title {
      text-align: start;
    }
  }

  .moment {
    margin: 0;
    flex-shrink: 0;
  }
}

/* community */

.community-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  list-style: disc;
}

.steam {
  margin: 0 auto;
  margin-top: 32px;
}

@media screen and (min-width: 1433px) {
  .community-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 108px;

    .main-text,
    .main-title {
      text-align: start;
    }
  }

  .steam {
    margin: 0;
    flex-shrink: 0;
  }
}

/* celebrations */

#celebrations {
  padding-bottom: 0;
}

@media screen and (min-width: 1433px) {
  .celebrations-list {
    align-items: center;
  }
}

/* entering */

.entering-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: disc;
  padding-left: 20px;

  li {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 133%;
    color: #000;
  }
}

.virtual {
  margin: 0 auto;
  margin-top: 32px;
}

@media screen and (min-width: 1433px) {
  .entering-list {
    align-items: center;
  }
}

/* informed */

#informed {
  background-image: url(../images/dbycshw2uiw51\ 3.png);
}

.informed-list {
  align-items: center;
  transform: translateY(0);

  li {
    padding: 30px 18px;
    min-height: 84px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    background: #002b8d;
    color: #fff;
  }
}

/* connect */

#connect {
  padding-bottom: 321px;
  background-image: url(../images/169044770_af5424f9-2390-41f1-8cc2-1df89c5acc01\ copy\ 1.png);
  background-position: bottom -200px center;
  background-repeat: no-repeat;
}

.connect-list {
  li {
    display: flex;
    align-items: center;
    gap: 8px;

    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 133%;
    color: #fff;

    a {
      font-weight: 400;
    }

    a:hover {
      text-decoration: underline;
    }
  }
}

@media screen and (min-width: 1433px) {
  #connect {
    padding-bottom: 98px;
    background-position: bottom -200px right;

    .main-text,
    .main-title {
      text-align: start;
    }
  }
}

/* footer */

.footer {
  background: #001e62;
}

.footer-description {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  margin-bottom: 22px;
  text-align: center;
}

.footer-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

.footer-link:hover {
  text-decoration: underline;
}

@media screen and (min-width: 1433px) {
  .footer {
    padding: 39px 0;
  }
  .footer-list {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
  }
}

/* cookie popup */

.popup {
  position: fixed;
  z-index: 10;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #011a52;
  border-radius: 20px;
  box-shadow: 0 14px 42px rgba(8, 15, 52, 0.06);
  background: #fff;
  padding: 40px;
  transition: transform 0.5s ease;
}

.popup-text {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 187%;
  color: #011a52;
  margin-bottom: 38px;
}

.popup-btn {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 112%;
  color: #011a52;
  border: 1px solid #011a52;
  box-shadow: 0 4px 8px rgba(74, 58, 255, 0.08);
  background: #fff;

  text-align: center;
  display: block;
  border-radius: 56px;
  padding: 18px 26px;

  transition: color 0.3s ease, background-color 0.2s ease;
}

.popup-btn:hover {
  box-shadow: 0 3px 12px 0 rgba(74, 58, 255, 0.18);
  background: #011a52;
  color: #fff;
}

.popup-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.popup-click {
  transform: translateY(120%) translateX(-50%);
}

@media screen and (min-width: 1433px) {
  .popup {
    padding: 52px 138px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 150px;
  }

  .popup-text {
    font-size: 18px;
    margin: 0;
  }
  .popup-wrap {
    flex-shrink: 0;
    gap: 32px;
  }
}