@import url("reset.css");
@import url("./fonts/stylesheet.css");
:root {
  --colorGrey: #eae9f0;
  --colorDarkBlue: #1552b5;
  --colorBlue: #1f6ff2;
  --colorLightBlue: #a6d0ff;
  --colorSizeBlue: #719ee9;
  --colorWhite: #ffffff;
  --colorDark: #0c1431;
  --textMiddle: 20px;
  --textSmall: 16px;
  height: 100%;
  color: var(--colorTextM);
  font-size: 16px;
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}
html {
  scroll-behavior: smooth !important;
}
body {
  display: flex;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  background-color: var(--colorGrey);
  overflow-x: hidden;
  flex-direction: column;
}
body > * {
  flex: 0 0 auto;
}
body > *:nth-child(2) {
  flex: 1 0 auto;
}
header,
.container {
  width: calc(100% - 112px * 2);
  margin-right: auto;
  margin-left: auto;
}
@media (max-width: 1440px) {
  header,
  .container {
    width: 94%;
  }
}
@media (max-width: 600px) {
  header,
  .container {
    width: 100%;
  }
  header h2,
  .container h2 {
    padding: 0;
  }
}
@media (max-width: 600px) {
  header {
    padding: 0 1rem;
    gap: 2rem;
  }
  header > * {
    width: fit-content;
    text-wrap: nowrap;
  }
  header img {
    width: 100%;
  }
}
header .mMenu {
  display: none;
  transition: all 0.8s;
}
@media (max-width: 600px) {
  header .mMenu {
    display: flex;
    width: 20vw;
    max-height: 2rem;
    flex-direction: column;
    align-items: start;
  }
  header .mMenu button {
    width: 100%;
  }
  header .mMenu div {
    display: flex;
    position: absolute;
    z-index: 2;
    right: 0;
    max-height: 0px;
    margin-top: 2rem;
    background: var(--colorDarkBlue);
    font-size: 1.5rem;
    transition: all 0.6s linear;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
  }
  header .mMenu div a {
    padding: 0.5rem 1rem;
  }
}
header .mMenu svg path {
  transform-origin: center;
  animation: mustache 2s linear infinite;
}
@keyframes mustache {
  0%,
  10%,
  85%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(15deg);
  }
  55% {
    transform: rotate(-15deg);
  }
  75% {
    transform: rotate(5deg);
  }
}
.dFlex {
  display: flex;
}
@media (max-width: 600px) {
  .dFlex {
    flex-direction: column;
  }
}
.flexColumn {
  flex-direction: column;
}
.white {
  color: var(--colorWhite);
}
.textCenter {
  text-align: center;
}
header {
  display: flex;
  z-index: 2;
  padding-top: 1em;
  color: var(--colorWhite);
  font-size: var(--textMiddle);
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 600px) {
  header {
    background-color: var(--colorBlue);
  }
}
@media (max-width: 415px) {
  header {
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
  }
  header .mMenu {
    position: absolute;
    top: 1.5rem;
    right: 1rem;
  }
}
header .phone {
  font-size: 1.5em;
}
.Head {
  position: relative;
  margin-top: -5.25rem;
  padding-top: 5.25rem;
  background: linear-gradient(
      var(--colorDarkBlue),
      var(--colorDarkBlue),
      #accff769
    ),
    linear-gradient(280deg, #230393, #03076f, var(--colorLightBlue));
  color: var(--colorWhite);
}
@media (max-width: 600px) {
  .Head {
    min-height: 940px;
    padding: 5.25rem 1rem 0 1rem;
  }
  .Head #wedding {
    margin-bottom: 1em;
  }
}
.Head h1 {
  margin-top: 5.25rem;
  color: var(--colorLightBlue);
  font-size: 324px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.75;
}
@media (max-width: 1440px) {
  .Head h1 {
    font-size: 260px;
  }
}
@media (max-width: 600px) {
  .Head h1 {
    margin-top: 0.5em;
    font-size: clamp(3rem, 14vw, 4.5rem);
    line-height: 1.5;
    text-align: center;
  }
}
.Head h1 span {
  position: relative;
  z-index: 2;
  font-size: 280px;
}
@media (max-width: 1440px) {
  .Head h1 span {
    font-size: 225px;
  }
}
@media (max-width: 600px) {
  .Head h1 span {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }
}
.Head .headItem {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  padding-bottom: 3rem;
  justify-content: space-between;
}
@media (max-width: 600px) {
  .Head .headItem {
    display: grid;
    margin-top: 100px;
    padding-bottom: 0.5rem;
    grid-template-columns: 50% 50%;
  }
}
.Head .headItem h2 {
  color: var(--colorWhite);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 2rem;
  @media (max-width: 600px) {
    font-size: 1rem;
  }
}
.bgHead {
  position: relative;
  z-index: 1;
  margin-top: -735px;
  text-align: center;
}
@media (max-width: 600px) {
  .bgHead {
    margin-top: -750px;
  }
}
.bgHead * {
  position: relative;
  bottom: -2px;
}
@media (max-width: 600px) {
  .bgHead * {
    width: 100%;
  }
}
.headItem > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  flex-basis: 30%;
}
div.headMiddle {
  display: block;
  padding: 0 7rem;
  color: var(--colorDark);
  font-size: 2.5rem;
}
@media (max-width: 600px) {
  div.headMiddle {
    width: fit-content;
    margin-top: -570px;
    padding: 0 6rem;
    font-size: 1rem;
    order: 3;
  }
}
.headMiddle > div {
  padding: 0.5em 1em;
  border: 2px solid var(--colorDark);
  background-color: var(--colorWhite);
  transform: rotate(345deg);
  text-align: center;
}
.headMiddle > div:nth-child(2) {
  transform: rotate(340deg);
}
.btn {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 100%;
  margin-top: -4rem;
  text-align: center;
}
@media (max-width: 600px) {
  .Head .btn {
    margin-top: 0;
  }
}
.btn button {
  --widthBtn: 8.2rem;
  width: var(--widthBtn);
  height: var(--widthBtn);
  padding: 1em;
  border-radius: 50%;
  outline: 0.5rem solid var(--colorGrey);
  background-color: var(--colorBlue);
  color: var(--colorWhite);
  transition: all 0.3s linear;
}
.btn button:hover {
  border: 2px solid;
  background-color: var(--colorWhite);
  color: var(--colorBlue);
}
h2 {
  margin-bottom: 0.5em;
  color: var(--colorBlue);
  font-size: 3rem;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  h2 {
    font-size: 2.2rem;
  }
}
@media (max-width: 600px) {
  .Video h2 {
    padding: 0 1rem;
  }
}
.Video img {
  width: 100%;
}
.weddings {
  margin-top: 1em;
  font-size: 210px;
  font-family: sans-serif;
  line-height: 1;
}
@media (max-width: 1440px) {
  .weddings {
    font-size: 180px;
  }
}
@media (max-width: 600px) {
  .weddings {
    padding: 0 0.5rem;
    font-size: 4rem;
  }
}
@media (max-width: 360px) {
  .weddings {
    font-size: 3rem;
  }
}
.weddings ul {
  display: flex;
  margin-bottom: 1em;
  justify-content: space-between;
}
@media (max-width: 600px) {
  .weddings ul {
    width: 100%;
  }
}
.weddings ul .colorChange0 {
  --c0: var(--colorLightBlue);
  --c1: var(--colorSizeBlue);
  --c2: var(--colorBlue);
  --c3: var(--colorDarkBlue);
  --p: 0.03;
  --t: 0.5;
  color: var(--c0);
}
.weddings ul .colorChange1 {
  --c0: var(--colorSizeBlue);
  --c1: var(--colorLightBlue);
  --c2: var(--colorBlue);
  --c3: var(--colorDarkBlue);
  --p: 0.06;
  --t: 1;
  color: var(--c0);
}
.weddings ul .colorChange2 {
  --c0: var(--colorBlue);
  --c1: var(--colorLightBlue);
  --c2: var(--colorSizeBlue);
  --c3: var(--colorDarkBlue);
  --p: 0.09;
  --t: 1.5;
  color: var(--c0);
}
.weddings ul .colorChange3 {
  --c0: var(--colorDarkBlue);
  --c1: var(--colorLightBlue);
  --c2: var(--colorSizeBlue);
  --c3: var(--colorBlue);
  --p: 0.12;
  --t: 2;
  color: var(--c0);
}
.weddings ul .colorChange4 {
  --c0: var(--colorDarkBlue);
  --c1: var(--colorBlue);
  --c2: var(--colorSizeBlue);
  --c3: var(--colorLightBlue);
  --p: 0.15;
  --t: 2.5;
  color: var(--c0);
}
.weddings ul .colorChange5 {
  --c0: var(--colorDarkBlue);
  --c1: var(--colorBlue);
  --c2: var(--colorLightBlue);
  --c3: var(--colorSizeBlue);
  --p: 0.18;
  --t: 3;
  color: var(--c0);
}
.weddings ul .colorChange6 {
  --c0: var(--colorDarkBlue);
  --c1: var(--colorSizeBlue);
  --c2: var(--colorLightBlue);
  --c3: var(--colorBlue);
  --p: 0.2;
  --t: 3.5;
  color: var(--c0);
}
.weddings ul .colorChange7 {
  --c0: var(--colorDarkBlue);
  --c1: var(--colorLightBlue);
  --c2: var(--colorBlue);
  --c3: var(--colorSizeBlue);
  --p: 0.16;
  --t: 4;
  color: var(--c0);
}
.weddings ul li {
  padding: 0;
  font-weight: 900;
  transform: scale(calc(1 - var(--p)));
  animation: colorChange calc(1.5s * var(--t)) alternate infinite;
}
.weddings + .img-wrapper {
  position: relative;
  z-index: 1;
  margin-top: -800px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media (max-width: 600px) {
  .weddings + .img-wrapper {
    margin-top: -300px;
  }
  .weddings + .img-wrapper img {
    height: 30vh;
  }
}
.weddings + .img-wrapper img {
  animation: weddingsImg 3s linear infinite;
}
@keyframes weddingsImg {
  0%,
  5%,
  100% {
    transform: scale(0.95);
    opacity: 0.95;
  }
  45%,
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}
@keyframes colorChange {
  0% {
    color: var(--c0);
    transform: scale(calc(1 - var(--p)));
  }
  22.5% {
    color: var(--c1);
  }
  62.5% {
    color: var(--c2);
  }
  100% {
    color: var(--c3);
    transform: scale(calc(1 + var(--p)));
  }
}
section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.descript {
  gap: 2rem;
}
.descript div {
  padding: 2rem;
  border: 1px solid var(--colorGrey);
  background-color: var(--colorWhite);
}
@media (max-width: 600px) {
  .descript div {
    padding: 2rem 1rem;
  }
}
.descript h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .Photos h2 {
    padding: 0 1rem;
  }
}
.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .photos {
    grid-template-columns: 1fr;
  }
}
.photos .photo-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.photos img {
  width: 100%;
  height: 100%;
}
.photos .photo-item:last-child {
  grid-column-start: 2;
  grid-row-start: 2;
}
@media (max-width: 600px) {
  .photos .photo-item:last-child {
    grid-column-start: 1;
    grid-row-start: 1;
  }
}
.photos .photo-item:last-child img {
  width: auto;
  height: auto;
}
.overSize {
  position: relative;
  margin: 0;
  font-size: 90px;
}
@media (max-width: 600px) {
  .overSize {
    font-size: 3rem;
  }
}
@media (max-width: 360px) {
  .overSize {
    font-size: 2.6rem;
  }
}
.overSize div {
  position: absolute;
  top: 2.5rem;
  right: auto;
  left: 55%;
  width: 31%;
  color: var(--colorDark);
  font-size: 1.25rem;
  font-weight: 500;
}
@media (max-width: 1440px) {
  .overSize div {
    width: 35%;
  }
}
@media (max-width: 600px) {
  .overSize div {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 1em 0;
    font-size: 1rem;
  }
}
.whyMe {
  margin-bottom: 10rem;
  padding: 10rem 0;
  background-image: url(../img/why_bg.webp);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 1.25rem;
}
@media (max-width: 600px) {
  .whyMe {
    margin-bottom: 1.9rem;
    padding-top: 0;
  }
}
.whyMe .container {
  padding: 3.5rem 4.25rem;
  background-color: var(--colorWhite);
}
@media (max-width: 600px) {
  .whyMe .container {
    padding: 3rem 1rem;
  }
}
.whyMe img {
  position: absolute;
  right: 10%;
  margin-top: -500px;
}
@media (max-width: 1440px) {
  .whyMe img {
    right: 6%;
  }
}
@media (max-width: 600px) {
  .whyMe img {
    right: 0;
    height: 50vh;
    margin-top: -95px;
  }
}
@media (max-width: 600px) {
  .whyMe .whyMe-item {
    padding: 0;
  }
}
.whyMe .whyMe-item > .dFlex {
  margin-bottom: 1rem;
  padding-right: 10rem;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 2rem;
  justify-content: left;
}
@media (max-width: 1440px) {
  .whyMe .whyMe-item > .dFlex {
    padding-right: 5rem;
  }
}
@media (max-width: 600px) {
  .whyMe .whyMe-item > .dFlex {
    padding-right: 1rem;
  }
}
.whyMe .whyMe-item > div {
  padding: 1rem 2rem;
  border: 1px solid;
  border-radius: 3rem;
}
@media (max-width: 600px) {
  .whyMe .whyMe-item > div {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .whyMe .whyMe-item div.mS {
    width: 50vw;
    margin-left: auto;
  }
}
.fillWidth {
  max-width: 0;
  height: 1.2em;
  transition: all 4s 0.5s;
  overflow: hidden;
}
@media (max-width: 600px) {
  .fillWidth {
    display: flex;
    height: 5rem;
    color: transparent;
    transition: color 2s 0.5s;
    align-items: center;
  }
}
.filledWidth {
  max-width: 1000px;
  @media (max-width: 600px) {
    color: var(--colorDark);
  }
}
.fillColor {
  color: transparent;
  transition: color 2s 0.5s linear;
  @media (max-width: 1440px) {
    margin-right: 7rem;
  }
  @media (max-width: 600px) {
    margin-right: 0;
  }
}
.filledColor {
  color: var(--colorDark);
}
.whyMe-item:nth-last-child(2) {
  margin: 1.5rem 0 3rem 3rem;
  justify-content: left;
  @media (max-width: 600px) {
    margin: 0;
  }
}
.whyMe-item:nth-last-child(1) {
  position: relative;
  margin-top: 1rem;
  padding-left: 6em;
}
@media (max-width > 1440px) {
  .whyMe-item:nth-last-child(1)::before {
    font-size: 2.75rem;
  }
}
@media (max-width: 600px) {
  .whyMe-item:nth-last-child(1) {
    margin-top: 4.5rem;
    padding-left: 1rem;
  }
}
.whyMe-item:nth-last-child(1) > div > div {
  width: fit-content;
  background-color: var(--colorLightBlue);
}
.whyMe-item:nth-last-child(1) div:last-child {
  display: grid;
  grid-template-areas:
    "a b . ."
    "c c . ."
    "d d d d";
}
@media (max-width: 600px) {
  .whyMe-item:nth-last-child(1) div:last-child {
    display: flex;
    margin-left: 0;
  }
}
.whyMe-item:nth-last-child(1) div:nth-child(3) {
  grid-row-start: 2;
}
.whyMe-item:nth-last-child(1)::before {
  content: "А ЕЩЕ";
  position: absolute;
  top: 1em;
  bottom: auto;
  left: 0;
  color: var(--colorLightBlue);
  font-size: 2.5rem;
  font-weight: 800;
  transform: rotate(270deg);
  font-family: sans-serif;
}
@media screen and (max-width: 600px) {
  .whyMe .whyMe-item:nth-last-child(1)::before {
    top: 0;
    bottom: 0;
    width: 100%;
    margin-top: -4rem;
    transform: rotate(0);
    text-align: center;
  }
}
.events {
  background-image: url(../img/events.webp);
  background-color: var(--colorBlue);
  background-position: bottom right;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .events {
    margin: 0;
    background-size: contain;
  }
}
.events .overSize {
  display: flex;
  font-size: 140px;
  justify-content: space-between;
}
@media (max-width: 600px) {
  .events .overSize {
    display: block;
    margin-bottom: 3rem;
    font-size: 2.4rem;
  }
}
.events .fontBig {
  width: 50%;
  font-size: 3rem;
  font-weight: 800;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .events .fontBig {
    margin-bottom: 1em;
    font-size: 1.5rem;
  }
  .events .fontBig span {
    color: var(--colorGrey);
  }
}
.events * {
  color: var(--colorWhite);
}
.events > div {
  padding: 6.5rem;
  background: radial-gradient(
    circle,
    #0062ffa6 59.9%,
    transparent 60%,
    transparent 72%,
    #0062ffa6 71.9%
  );
  background-position: -1640px;
  background-size: 200%;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .events > div {
    padding: 3rem 1rem;
    background: linear-gradient(
      90deg,
      #0062ffa6 65.9%,
      transparent 65%,
      transparent 80%,
      #0062ffa6 80.9%
    );
    background-position: 0;
    background-size: 100%;
  }
}
.events .bottom {
  width: 50%;
  margin-top: 1em;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
}
.events .dFlex > div {
  padding: 0.5rem 1rem;
  border: 1px solid;
  border-radius: 3rem;
}
@media (max-width: 600px) {
  .events .dFlex > div {
    width: fit-content;
    margin-bottom: 1em;
    font-size: 1.5rem;
  }
}
.events .dFlex > div:last-child {
  margin: -0.5rem 0 0.5rem 0.5rem;
  background-color: var(--colorWhite);
  color: var(--colorDark);
  transform: rotate(354deg);
  @media (max-width: 600px) {
    margin-bottom: 1.5rem;
  }
}
.ideal {
  padding-top: 9rem;
  background: linear-gradient(
      8deg,
      var(--colorBlue),
      var(--colorBlue) 12%,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent,
      transparent
    ),
    url(../img/ideal.webp);
  background-position: left top;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .ideal {
    padding-top: 19rem;
    background-position: 0 0;
    background-size: contain;
  }
}
.ideal * {
  color: var(--colorWhite);
}
.ideal .container > div {
  width: 70%;
  margin-left: auto;
  padding: 2.6rem;
  background-color: var(--colorBlue);
}
@media (max-width: 600px) {
  .ideal .container > div {
    width: 100%;
    padding: 3rem 1rem;
  }
}
.ideal .container > div .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .ideal .container > div .grid {
    grid-template-columns: 1fr;
  }
}
.ideal .container > div .grid > div {
  padding: 2rem 1rem 2rem 2rem;
  border: 1px solid #0c14313d;
  border-radius: 3rem;
}
@media (max-width: 600px) {
  .ideal .container > div .grid > div {
    padding: 1rem 1rem 1rem 2rem;
  }
}
.ideal .container > div .grid > div h3 {
  margin-bottom: 1em;
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
}
.ideal .container > div .grid > div:last-child {
  padding: 0;
  border: none;
}
.ideal .container > div .grid > div:last-child img {
  width: 100%;
  border-radius: 7rem;
}
div:has(> .surfacing) {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}
@media (max-width: 1440px) {
  div:has(> .surfacing) {
    min-height: 240px;
  }
}
.surfacing {
  position: absolute;
  top: 400px;
  transition: all 0.6s var(--d);
}
@media (max-width: 1440px) {
  .surfacing {
    width: 85%;
  }
}
@media (max-width: 600px) {
  .surfacing {
    transition: top 0.4s;
  }
}
.surfacingUp {
  top: 0;
}
@media (max-width: 600px) {
  .Content {
    padding: 3rem 1rem 0 1rem;
    background-image: url(../img/content.webp);
    background-color: var(--colorBlue);
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  .Content h2 {
    color: var(--colorWhite);
  }
}
.Content .what {
  position: relative;
  margin-top: -5rem;
  margin-bottom: 8rem;
}
.Content .what p {
  position: absolute;
  top: 0;
  right: 0;
  width: fit-content;
  padding: 0.5rem 1rem;
  border: 1px solid;
  border-radius: 3rem;
  background-color: var(--colorWhite);
  color: var(--colorDark);
  transform: rotate(354deg);
}
@media (max-width: 600px) {
  .Content .what p {
    top: 1rem;
  }
}
.Content .blue {
  position: relative;
  padding: 3.2rem 3rem 0 5rem;
  background-color: var(--colorBlue);
  color: var(--colorWhite);
  font-size: 1.25rem;
}
@media (max-width: 600px) {
  .Content .blue {
    padding: 0;
    background-color: transparent;
  }
}
.Content .blue > .dFlex {
  gap: 1rem;
}
@media (max-width: 600px) {
  .Content .blue > .dFlex {
    gap: 1rem;
  }
}
.Content .blue > .dFlex div {
  max-height: 275px;
  border: 1px solid;
  border-radius: 2rem;
  flex-basis: 50%;
  overflow: hidden;
}
@media (max-width: 1440px) {
  .Content .blue > .dFlex div {
    max-height: 275px;
    margin-bottom: -10px;
  }
}
@media (max-width: 600px) {
  .Content .blue > .dFlex div {
    max-height: 207px;
  }
}
.Content .blue > .dFlex div:last-child {
  display: flex;
  padding: 4.5rem;
  font-size: 1.6rem;
  flex-basis: 50%;
  align-items: center;
}
@media screen and (max-width: 1440px) {
  .Content .blue > .dFlex div:last-child {
    padding: 2rem 1rem;
    font-size: 1.3rem;
  }
}
@media (max-width: 600px) {
  .Content .blue > .dFlex div:last-child {
    max-height: 275px;
    padding: 2rem;
  }
}
.Content .blue .tags {
  display: grid;
  position: relative;
  z-index: 20;
  height: 340px;
  margin-top: -70px;
  padding-top: 70px;
  background-image: url(../img/content.webp);
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  align-items: center;
  justify-items: center;
}
@media (max-width: 600px) {
  .Content .blue .tags {
    margin-top: 1rem;
    padding-top: 0;
    background-image: none;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}
.Content .blue .tags div {
  width: fit-content;
  padding: 0.5rem 1rem;
  border: 1px solid var(--colorDark);
  border-radius: 3rem;
  background-color: var(--colorBlue);
  transform: rotate(calc(1deg * var(--g)));
  text-align: center;
}
.Content .blue .last {
  position: absolute;
  right: 0;
  bottom: 2rem;
  width: 20%;
}
@media (max-width: 600px) {
  .Content .blue .last {
    position: relative;
    width: 100%;
    margin-top: 12rem;
    color: var(--colorDark);
  }
}
.itemDrop {
  animation: drop calc(1.5s * var(--t))
    linear(
      0 0%,
      0 2.27%,
      0.02 4.53%,
      0.04 6.8%,
      0.06 9.07%,
      0.1 11.33%,
      0.14 13.6%,
      0.25 18.15%,
      0.39 22.7%,
      0.56 27.25%,
      0.77 31.8%,
      1 36.35%,
      0.89 40.9%,
      0.85 43.18%,
      0.81 45.45%,
      0.79 47.72%,
      0.77 50%,
      0.75 52.27%,
      0.75 54.55%,
      0.75 56.82%,
      0.77 59.1%,
      0.79 61.38%,
      0.81 63.65%,
      0.85 65.93%,
      0.89 68.2%,
      1 72.7%,
      0.97 74.98%,
      0.95 77.25%,
      0.94 79.53%,
      0.94 81.8%,
      0.94 84.08%,
      0.95 86.35%,
      0.97 88.63%,
      1 90.9%,
      0.99 93.18%,
      0.98 95.45%,
      0.99 97.73%,
      1 100%
    );
}
@keyframes drop {
  0% {
    margin-top: -40rem;
    transform: rotate(0);
    opacity: 0;
  }
  100% {
    margin-top: 0;
    transform: rotate(calc(1deg * var(--g)));
    opacity: 1;
  }
}

.Plan {
  margin-bottom: 10rem;
  padding: 6rem 7rem;
  background-image: url(../img/plan_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--colorWhite);
}
@media (max-width: 600px) {
  .Plan {
    margin-bottom: 20rem;
    padding: 3rem 1rem;
    background-color: #0e0d12;
    background-position: 75% 100%;
    background-size: 180%;
  }
}
.Plan h1 {
  margin-bottom: 0.5em;
  font-weight: 900;
  line-height: 1;
}
.Plan h1 + div {
  width: 50%;
}
@media (max-width: 600px) {
  .Plan h1 + div {
    width: 100%;
    padding-bottom: 10rem;
  }
}
.Plan .container {
  position: relative;
  min-height: 300px;
}
.Plan .container .dFlex {
  position: absolute;
  margin-top: 61px;
  gap: 1rem;
}
@media (max-width: 600px) {
  .Plan .container .dFlex {
    width: 100%;
    margin-top: 0;
    gap: 0;
  }
}
.Plan .container .dFlex > div {
  width: 25%;
  min-width: 300px;
  padding: 0.5rem 2rem;
  border: 0.5rem solid var(--colorGrey);
  border-radius: 4rem;
  background-color: var(--colorDarkBlue);
}
@media (max-width: 600px) {
  .Plan .container .dFlex > div {
    display: block;
    width: 100%;
    min-height: 5rem;
    border-width: 0.25rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
.Plan .container .dFlex > div div:has(> .surfacing) {
  display: flex;
  min-height: 4rem;
  flex-direction: column;
  justify-content: center;
}
.Plan .container .dFlex > div div:has(> .surfacing) .surfacing {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-content: center;
      gap: 0.5rem;
}
}
.Plan .container .dFlex > div .surfacingUp {
  top: 0;
}
@media (max-width: 1440px) {
  .Plan .container .dFlex > div .surfacingUp {
    width: 100%;
  }
}
.Plan .container .dFlex > div h2 {
  margin-bottom: 0;
  color: var(--colorWhite);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .Plan .container .dFlex > div h2 {
    font-size: 1.3rem;
  }
}

.Partners {
  background-image: url(../img/partners.webp);
  background-position: top right;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .Partners {
    background-position: 100% 130px;
  }
  .Partners h2 {
    position: relative;
    z-index: -1;
    margin-bottom: 12rem;
    padding: 0 1rem;
  }
}
.Partners .grid {
  display: grid;
  padding: 6.5rem 3.55rem;
  background-color: var(--colorWhite);
  gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
}
@media (max-width: 1440px) {
  .Partners .grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 600px) {
  .Partners .grid {
    padding: 1rem;
    grid-template-columns: 1fr 1fr;
  }
  .Partners .grid .item {
    width: 100%;
    text-align: center;
  }

  .Partners .grid img {
    max-width: 100%;
  }
}
.Partners .grid .item img.itemScale {
  animation: itemScale 1s linear;
}
@keyframes itemScale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.Form {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .Form {
    padding: 0 0 0 1rem;
  }
}
.Form .overSize {
  font-size: 7.6rem;
  font-weight: 900;
}
@media (max-width: 600px) {
  .Form .overSize {
    font-size: 2.5rem;
  }
}
.Form > div {
  position: relative;
  z-index: 10;
  margin-top: -5.5rem;
  margin-bottom: -2px;
  padding-top: 13.2rem;
  padding-bottom: 6rem;
  background-image: url(../img/questions.webp);
  background-position: 60% bottom;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .Form > div {
    padding-top: 7rem;
    background-position: bottom right;
    background-size: 40%;
  }
}
.Form > div form {
  display: flex;
  width: 50%;
  padding: 3rem;
  background-color: var(--colorWhite);
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
@media (max-width: 600px) {
  .Form > div form {
    position: relative;
    width: 80%;
    padding: 1rem;
  }
  .Form > div form > p {
    padding-bottom: 7rem;
  }
  .Form > div form .btn {
    margin-top: 80%;
    left: 15%;
  }
}
.Form > div form h3 {
  font-size: 3.8rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .Form > div form h3 {
    font-size: 1.5rem;
  }
}
.Form > div form h3 p {
  font-size: 2rem;
}
@media (max-width: 600px) {
  .Form > div form h3 p {
    font-size: 1rem;
  }
}
.Form > div form input {
  width: 60%;
  padding: 1rem 2rem;
  border: 1px solid;
  border-radius: 2rem;
  @media (max-width: 600px) {
    width: 100%;
  }
}
.Form > div form button {
  outline: 0.5rem solid var(--colorWhite);
}
footer {
  padding-top: 5.2rem;
  border-top-right-radius: 5rem;
  border-top-left-radius: 5rem;
  background-color: var(--colorDarkBlue);
  color: var(--colorWhite);
}
@media (max-width: 600px) {
  footer {
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
  }
  footer .container {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
footer .Logo {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px solid;
  font-size: 1.8rem;
  justify-content: space-between;
}
@media (max-width: 600px) {
  footer .Logo {
    align-items: center;
    gap: 0;
  }
  footer .Logo div {
    text-align: center;
  }
}
footer .Logo img {
  height: 2.5em;
}
footer .dFlex {
  justify-content: space-between;
}
footer > .dFlex:nth-child(1) {
  justify-content: flex-start;
}
footer .mFlex {
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  footer .mFlex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 0;
  }
  footer .mFlex .flexColumn:nth-child(3),
  footer .mFlex .flexColumn:nth-child(4) {
    padding: 1rem 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
}
footer .SocialsItems {
  margin: 5rem 0;
}
@media (max-width: 600px) {
  footer .SocialsItems {
    margin: 1rem;
    text-align: center;
  }
}
footer .SocialsItems > * {
  width: 100%;
  padding: 0.5em 0;
  border: 1px solid;
  border-radius: 2rem;
  transition: all 0.3s;
  text-align: center;
}
footer .SocialsItems > *:hover {
  background-color: var(--colorWhite);
  color: var(--colorDarkBlue);
}
footer .bottom {
  padding: 2rem 0;
  background-color: var(--colorDark);
}
footer .bottom .dFlex {
  justify-content: space-between;
}
footer a {
  position: relative;
  padding: 0.1rem;
  transition: all 0.7s;
}
footer a:hover {
  background: linear-gradient(
    90deg,
    var(--colorWhite),
    var(--colorWhite),
    transparent
  );
  color: var(--colorDark);
}
.invert {
  filter: invert(1);
}
@media (max-width: 600px) {
  .nav {
    display: none;
  }
}
.nav * {
  margin: 0 1rem;
}
.nav .this {
  text-decoration: overline;
}
body {
  counter-reset: h3;
}
@media (max-width: 600px) {
  .Contents h2 {
    padding: 0 1rem;
    font-size: 2rem;
    word-wrap: break-word;
    hyphens: auto;
  }
}
.Contents > div {
  margin-bottom: 2em;
  padding: 3rem;
  background-image: url(../img/content_headBg.webp);
  background-color: var(--colorBlue);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--colorWhite);
  font-size: 1.5rem;
}
@media (max-width: 600px) {
  .Contents > div {
    padding: 1rem;
    font-size: 1rem;
  }
}
.Contents > div h3 {
  position: relative;
  width: fit-content;
  margin-bottom: 3rem;
  margin-left: 3rem;
  padding: 0.5rem 2rem;
  border-radius: 2rem;
  background-color: var(--colorWhite);
  color: var(--colorDark);
}
.Contents > div h3:before {
  content: counter(h3);
  counter-increment: h3;
  display: flex;
  position: absolute;
  top: 0;
  left: -3rem;
  width: 1em;
  padding: 0.5rem 1em;
  border-radius: 50%;
  background-color: var(--colorWhite);
  justify-content: center;
}
.Contents > div .dFlex {
  align-items: center;
  justify-content: space-between;
}
.Contents > div .dFlex div {
  width: 75%;
}
/* @media (max-width: 1440px) {
  .Contents > div .dFlex {
    width: 60%;
  }
} */
.Contents > div .dFlex .surfacing {
  margin-left: 25%;
}
@media (max-width: 1440px) {
  .Contents > div .dFlex .surfacing {
    margin-left: 35%;
  }
}
@media (max-width: 600px) {
  .Contents > div .dFlex .surfacing {
    margin-left: 0;
  }
}
.Contents > div:nth-child(2n) .dFlex {
  flex-direction: row-reverse;
}
@media (max-width: 600px) {
  .Contents > div:nth-child(2n) .dFlex {
    flex-direction: column;
  }
}
.Contents > div:nth-child(2n) .dFlex .surfacing {
  margin-right: 25%;
}
@media (max-width: 1440px) {
  .Contents > div:nth-child(2n) .dFlex .surfacing {
    margin-right: 35%;
  }
}
@media (max-width: 600px) {
  .Contents > div:nth-child(2n) .dFlex .surfacing {
    margin-right: 0;
  }
}
.Contents > div:nth-child(2) .dFlex,
.Contents > div:nth-child(22) .dFlex,
.Contents > div:nth-child(23) .dFlex,
.Contents > div:nth-child(24) .dFlex {
  flex-direction: row;
}
@media (max-width: 600px) {
  .Contents > div:nth-child(2) .dFlex,
  .Contents > div:nth-child(22) .dFlex,
  .Contents > div:nth-child(23) .dFlex,
  .Contents > div:nth-child(24) .dFlex {
    flex-direction: column;
  }
}
.Contents > div:nth-child(2) .dFlex .dFlex,
.Contents > div:nth-child(22) .dFlex .dFlex,
.Contents > div:nth-child(23) .dFlex .dFlex,
.Contents > div:nth-child(24) .dFlex .dFlex {
  flex-direction: column;
  gap: 1rem;
}
.Contents > div:nth-child(2) .dFlex .dFlex > div,
.Contents > div:nth-child(22) .dFlex .dFlex > div,
.Contents > div:nth-child(23) .dFlex .dFlex > div,
.Contents > div:nth-child(24) .dFlex .dFlex > div {
  padding: 1em;
  border: 1px solid var(--colorDark);
  border-radius: 3rem;
}
.Contents > div:nth-child(2) .dFlex .dFlex > div .title,
.Contents > div:nth-child(22) .dFlex .dFlex > div .title,
.Contents > div:nth-child(23) .dFlex .dFlex > div .title,
.Contents > div:nth-child(24) .dFlex .dFlex > div .title {
  margin-bottom: 0.5em;
  font-weight: 700;
}
.Contents > div:nth-child(2) .dFlex,
.Contents > div:nth-child(22) .dFlex {
  align-items: baseline;
  gap: 1rem;
}
@media (max-width: 1440px) {
  .Contents > div:nth-child(2) .dFlex > div,
  .Contents > div:nth-child(22) .dFlex > div {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .Contents img {
    max-width: 100%;
  }
}
.Disc {
  position: relative;
  height: 332px;
  margin-top: 1em;
  padding: 5rem;
  background-image: url(../img/arrow.svg);
  background-color: var(--colorWhite);
  background-position: 2vw center;
  background-repeat: no-repeat;
  font-size: 1.5rem;
  align-items: center;
}
@media (max-width: 600px) {
  .Disc {
    height: auto;
    padding: 1rem 1rem 6rem 1rem;
  }
}
.Disc p {
  width: 75%;
}
.Disc p:first-child {
  color: var(--colorBlue);
  font-weight: 600;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .Disc p:first-child {
    width: 100%;
  }
}
.Disc img {
  position: absolute;
  top: -60px;
  right: 5rem;
  width: auto;
}
@media (max-width: 600px) {
  .Disc img {
    top: auto;
    right: 0;
    bottom: 0;
    width: 50%;
  }
}
@media (max-width: 600px) {
  .Cont {
    overflow: hidden;
  }
  .Cont .Contents .surfacingUp {
    top: 260px;
    width: 100%;
  }
  .Cont .Contents div:has(> .surfacing) {
    min-height: 440px;
  }
  .Cont .Contents div:has(> .surfacing) img {
    height: 255px;
  }
}
.Cont .Head {
  background-image: url(../img/content_bgHead.webp);
  background-color: var(--colorBlue);
  background-size: cover;
}
@media (max-width: 600px) {
  .Cont .Head {
    height: auto;
    min-height: auto;
  }
  .Cont .Head .btn {
    margin-top: -4rem;
  }
}
.Cont .Head h1 {
  padding-left: 1em;
  color: var(--colorWhite);
  font-size: 180px;
  line-height: 1;
}
@media (max-width: 1440px) {
  .Cont .Head h1 {
    font-size: 70px;
  }
}
@media (max-width: 600px) {
  .Cont .Head h1 {
    padding: 0 1rem;
    font-size: 4rem;
    line-height: 1.5;
  }
}
@media (max-width: 360px) {
  .Cont .Head h1 {
    font-size: 3.6rem;
  }
}
.Cont .Head h1 p {
  font-size: 70px;
}
@media (max-width: 600px) {
  .Cont .Head h1 p {
    font-size: 2rem;
  }
}
.Cont .Head img {
  margin-bottom: -4px;
}
@media (max-width: 600px) {
  .Cont .Head img {
    width: 100%;
    margin-bottom: -5px;
    margin-left: 0;
  }
}
ol {
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
li {
  position: relative;
  margin: 0;
  padding: 0 0 10px 40px;
  font-weight: 800;
  line-height: 32px;
}
li::before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  text-align: center;
  line-height: 32px;
}
ol {
  counter-reset: num;
}
ol > li p,
ul > li {
  font-weight: 400;
}
ol > li {
  counter-increment: num;
}
ol > li::before {
  content: counter(num);
}
ol ol {
  counter-reset: num2;
}
ol ol > li {
  counter-increment: num2;
  font-weight: 400;
}
ol ol > li::before {
  content: counter(num) "." counter(num2);
}
.error {
  padding: 10rem 0;
  text-align: center;
}
.error h1 {
  color: var(--colorBlue);
  font-size: 4rem;
  font-weight: 700;
}

.Events .Head {
  padding-top: 10rem;
  background-image: url(../img/events_headBg.svg);
  background-color: var(--colorBlue);
  background-position: 5rem 8rem;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .Events .Head {
    height: auto;
    min-height: auto;
    background-position: 0;
    background-repeat: repeat-y;
  }
  .Events .Head .btn {
    margin-top: -4rem;
  }
}
.Events .Head .dFlex {
  align-items: center;
}
@media (max-width: 600px) {
  .Events .Head .dFlex img {
    width: 100%;
    margin-bottom: -5px;
  }
}
.Events .Head h1 {
  margin-top: -1.5em;
  color: var(--colorWhite);
  font-size: 7rem;
  line-height: 1.3;
}
@media (max-width: 1440px) {
  .Events .Head h1 {
    margin-top: -5.5em;
    font-size: 4rem;
  }
}
@media (max-width: 600px) {
  .Events .Head h1 {
    margin-top: 0;
    font-size: 2rem;
  }
}
.Events .Head h1 p {
  font-size: 0.5em;
}
@media (max-width: 1440px) {
  .Events .Head img {
    margin-bottom: -0.25rem;
  }
}

.Events .Terms {
  position: relative;
  background-image: url(../img/why_bg.webp);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
.Events .Terms .container > .dFlex .str {
  position: absolute;
  bottom: 50%;
  left: 0;
  margin-left: -14rem;
  color: var(--colorBlue);
  font-size: 5.6rem;
  font-weight: 900;
  transform: rotate(270deg);
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .Events .Terms .container > .dFlex .str {
    display: none;
  }
}
.Events .Terms .container > .dFlex > .dFlex {
  align-items: flex-end;
}
.Events .Terms .container > .dFlex > .dFlex > div {
  position: relative;
  width: fit-content;
  padding: 2.5rem;
  border: 1px solid;
  background-color: var(--colorWhite);
}
@media (max-width: 600px) {
  .Events .Terms .container > .dFlex > .dFlex > div {
    margin: 0 1rem;
  }
}
.Events .Terms .container > .dFlex > .dFlex > div h2 {
  color: var(--colorBlue);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
}
.Events .Terms .container > .dFlex > .dFlex > div .blue {
  color: var(--colorBlue);
  font-size: 20px;
  font-weight: 600;
}
.Events .Terms .container > .dFlex > .dFlex > div .title {
  position: absolute;
  right: 3rem;
  width: fit-content;
  padding: 0.5rem 2rem;
  border: 1px solid;
  border-radius: 2rem;
  background-color: var(--colorWhite);
  transform: rotate(-10deg);
}
@media (max-width: 600px) {
  .Events .Terms .container > .dFlex > .dFlex > div .title {
    display: none;
  }
}

.Events .Terms .container > .dFlex > .dFlex > div:nth-child(1) {
  max-width: 70%;
}
@media (max-width: 1440px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(1) {
    max-width: 80%;
  }
}
@media (max-width: 600px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(1) {
    max-width: 100%;
  }
}
.Events .Terms .container > .dFlex > .dFlex > div:nth-child(1) .title {
  top: 1.6rem;
  @media (max-width: 1440px) {
    right: 0;
  }
}

.Events .Terms .container > .dFlex > .dFlex > div:nth-child(2) {
  max-width: 60%;
  margin-top: -1rem;
  margin-right: 3rem;
}
@media (max-width: 1440px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(2) {
    max-width: 70%;
  }
}
@media (max-width: 600px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(2) {
    max-width: 100%;
    margin-right: 1rem;
  }
}
.Events .Terms .container > .dFlex > .dFlex > div:nth-child(2) .title {
  top: 2.5rem;
}
@media (max-width: 1440px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(2) .title {
    top: 4.5rem;
    right: 0;
  }
}

.Events .Terms .container > .dFlex > .dFlex > div:nth-child(3) {
  max-width: 65%;
  margin-top: -1rem;
  margin-right: 6rem;
  padding-bottom: 5rem;
}
@media (max-width: 1440px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(3) {
    max-width: 75%;
    padding-bottom: 5rem;
  }
}
@media (max-width: 600px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(3) {
    max-width: 100%;
    margin-right: 1rem;
  }
}
.Events .Terms .container > .dFlex > .dFlex > div:nth-child(3) .title {
  top: 75%;
  right: 0rem;
}
@media (max-width: 1440px) {
  .Events .Terms .container > .dFlex > .dFlex > div:nth-child(3) .title {
    top: 70%;
  }
}

video {
  width: 100%;
  height: auto;
}
.videoBlock {
  position: relative;
  cursor: pointer;
}
.videoBlock::before {
  content: url(../img/play.svg);
  position: absolute;
  z-index: 3;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  pointer-events: none;
}
@media (max-width: 600px) {
  .videoBlock::before {
    content: "";
  }
}
.bgBlue {
  background-color: var(--colorBlue);
}
.toX {
  position: relative;
  overflow: hidden;
}
.toX > div {
  width: 100%;
  margin-left: -110%;
  transition: all 0.9s var(--d) ease-in-out;
}
.toX > img {
  margin-left: 100%;
  transition: all 0.9s 0.4s ease-in-out;
}
.toXmove > div {
  margin-left: 0;
}
.toXmove img {
  margin-left: 0;
}
@media (max-width: 1440px) {
  .toXmove img {
    margin-left: 13%;
  }
}
@media (max-width: 600px) {
  .toXmove img {
    margin-left: -15%;
  }
}
.toX:has(img) {
  width: 100%;
}
.Form > div form input.rule {
  width: 30px;
  height: 30px;
  margin-right: 1rem;
}
@media (max-width: 600px) {
  .Form > div form input.rule {
    width: 50px;
    height: 50px;
    margin-right: 1rem;
  }
  .Form> div form .btn{
    z-index: 40;
    margin-top: 80%;
    left: calc(100% - 132px);
    width: fit-content;
  }
}
  .Form .btn{
    z-index: 40;
    /* margin-top: 80%;
    left: calc(100% - 132px);
    width: fit-content; */
  }