main {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(159, 213, 239, 1);
}
.container {
  width: 1462px;
}
/* 1 block in main */
.level {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  align-items: center;
  gap: 260px;
  margin: 50px 0;
  height: 100vh;
}

.level div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 720px;
}
.level div:first-child div {
  position: relative;
  display: flex;
  width: 632px;
  height: 424px;
  align-items: start;
  z-index: 2;
}

.level div:first-child div::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background: transparent url(./img/number/01.svg) no-repeat center;
  background-size: cover;
  transform: translate(-50%, -50%);
  width: 205px;
  height: 167px;
  z-index: 1;
}

.level div:first-child div .line {
  position: relative;
  padding-left: 100px;
  color: rgba(144, 0, 0, 1);
  font-family: 'Mariupol';
  font-size: 18px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 6px;
  text-align: left;
}

.level div:first-child div .line::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 72px;
  height: 2px;
  background: rgba(144, 0, 0, 1);
}

.level div:first-child div h3 {
  font-size: 64px;
  margin: 0;
}

.level div:first-child div p {
  font-family: 'Mariupol';
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: left;
}

.level div:first-child div a {
  position: relative;
  font-family: 'Mariupol'; 
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: left;
  color: rgba(144, 0, 0, 1);
}

.level div:first-child div a::after {
  position: absolute;
  right: -40px;
  top: 5px;
  width: 30px;
  height: 24px;
  content: '';
  background: transparent url(./img/icons/arrow-right.svg) no-repeat center;

}
/* 2 block in main */
.level div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 566px;
}





/* block hiking in main */
.hiking {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  gap: 260px;
  margin: 50px 0;
  height: 100vh;
}

.hiking div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 720px;
}

.hiking div:last-child div {
  position: relative;
  display: flex;
  width: 632px;
  height: 424px;
  align-items: start;
  z-index: 2;
}

.hiking div:last-child div::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background: transparent url(./img/number/02.svg) no-repeat center;
  background-size: cover;
  transform: translate(-50%, -50%);
  width: 261px;
  height: 167px;
  z-index: 1;
}

.hiking div:last-child div .line {
  position: relative;
  padding-left: 100px;
  color: rgba(144, 0, 0, 1);
  font-family: 'Mariupol';
  font-size: 18px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 6px;
  text-align: left;
}

.hiking div:last-child div .line::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 72px;
  height: 2px;
  background: rgba(144, 0, 0, 1);
}

.hiking div:last-child div h3 {
  font-size: 64px;
  margin: 0;
}

.hiking div:last-child div p {
  font-family: 'Mariupol';
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: left;
}

.hiking div:last-child div a {
  position: relative;
  font-family: 'Mariupol'; 
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: left;
  color: rgba(144, 0, 0, 1);
}

.hiking div:last-child div a::after {
  position: absolute;
  right: -40px;
  top: 5px;
  width: 30px;
  height: 24px;
  content: '';
  background: transparent url(./img/icons/arrow-right.svg) no-repeat center;

}
/* 2 block in main */
.hiking div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
}



/* TIMING */

.timing {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  align-items: center;
  gap: 260px;
  margin: 50px 0;
  height: 100vh;
}

.timing div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 720px;
}
.timing div:first-child div {
  position: relative;
  display: flex;
  width: 632px;
  height: 424px;
  align-items: start;
  z-index: 2;
}

.timing div:first-child div::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background: transparent url(./img/number/03.svg) no-repeat center;
  background-size: cover;
  transform: translate(-50%, -50%);
  width: 264px;
  height: 167px;
  z-index: 1;
}

.timing div:first-child div .line {
  position: relative;
  padding-left: 100px;
  color: rgba(144, 0, 0, 1);
  font-family: 'Mariupol';
  font-size: 18px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 6px;
  text-align: left;
}

.timing div:first-child div .line::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 72px;
  height: 2px;
  background: rgba(144, 0, 0, 1);
}

.timing div:first-child div h3 {
  font-size: 64px;
  margin: 0;
}

.timing div:first-child div p {
  font-family: 'Mariupol';
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: left;
}

.timing div:first-child div a {
  position: relative;
  font-family: 'Mariupol'; 
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: left;
  color: rgba(144, 0, 0, 1);
}

.timing div:first-child div a::after {
  position: absolute;
  right: -40px;
  top: 5px;
  width: 30px;
  height: 24px;
  content: '';
  background: transparent url(./img/icons/arrow-right.svg) no-repeat center;

}
/* 2 block in main */
.timing div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 566px;
}