* {
  box-sizing: border-box;
}
body {
  width: 1440px;
  display: block;
  margin: 0 auto;
  font-family: "Playfair Display";
  background: #f1ede2;
  position: relative;
}

/* общая обертка */
.page {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* Секция 1 */
.section-1 {
  position: relative;
  height: 900px;
  overflow: hidden;
  display: block;
  padding: 0;
}

/* все граф элементы аля орнамент */
.orn {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* позиционирование элементов орнамента все flex (по бокам) */
.ornament--lashield {
  left: 138px;
  top: 88px;
  width: 97px;
  height: 124px;
}
.ornament--rashield {
  right: 138px;
  top: 88px;
  width: 97px;
  height: 124px;
}
.ornament--lbomb {
  left: 200px;
  top: 224px;
  width: 96px;
  height: 166px;
}
.ornament--rbomb {
  right: 200px;
  top: 224px;
  width: 96px;
  height: 166px;
}

.ornament--lsword {
  left: 87px;
  top: 114px;
  width: 45px;
  height: 378px;
}
.ornament--rsword {
  right: 84px;
  top: 114px;
  width: 45px;
  height: 378px;
}

.ornament--lspear {
  left: 104px;
  bottom: 34px;
  width: 370px;
  height: 360px;
  transform: rotate(-6deg);
}
.ornament--rspear {
  right: 104px;
  bottom: 34px;
  width: 370px;
  height: 360px;
  transform: rotate(6deg);
}

.ornament--rbshield {
  left: 138px;
  bottom: 80px;
  width: 97px;
  height: 124px;
}

.ornament--lbshield {
  right: 138px;
  bottom: 80px;
  width: 97px;
  height: 124px;
}

/* центральный flex */
/* центрируем по горизонтали и вертикали, элементы располагаются колонкой */
.center {
  position: relative;
  display: flex;
  flex-direction: column; /*задаем ось*/
  align-items: center; /*выравнивание контейнера по центру */
  justify-content: center; /*выравнивание элементов по центру */
  width: 1400px;
  height: 900px;
  margin: 0 auto;
}

/* базовый стиль для всех свг */
.center-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1400px;
}

/* для свг которые позиционируются абсолютно */
.center-svg-abs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* позиции абсолютно позиционируемых элементов */
/* волны и луны сверху */
.center-svg-rightmoon,
.center-svg-leftmoon {
  position: absolute;
  top: 20px;
  width: 260px;
  height: 78px;
}

/* левая луна */
.center-svg-leftmoon {
  left: 360px;
  transform: none;
}

/* правая луна */
.center-svg-rightmoon {
  right: 360px;
  transform: none;
}

/* меч с крыльями */
.center-svg--swords {
  max-width: 640px;
  height: 246px;
  top: 72px;
}

/* мeчи над текстом */
/* общая обертка */
.center-svg-swordstop {
  position: absolute;
  top: 180px;
  width: 120px;
}

.sword-top-1 {
  /* самый левый */
  left: 286px;
  width: 300px;
  height: 200px;
  top: 150px;
}
.sword-top-2 {
  /* левее центра */
  left: calc(50% - 160px);
  top: 265px;
  transform: translateX(-50%);
  width: 80px;
}
.sword-top-3 {
  /* правее центра */
  left: calc(50% + 155px);
  top: 270px;
  transform: translateX(-50%);
  width: 80px;
}
.sword-top-4 {
  /* самый правый */
  right: 286px;
  width: 300px;
  height: 200px;
  top: 150px;
}

/* корона */
.center-svg-crown {
  top: 210px;
  width: 120px;
  z-index: 3;
}

/* листья */
.center-svg-leavesleft,
.center-svg-leavesright {
  position: absolute;
  top: 296px;
  width: 130px;
  height: 276px;
}
.center-svg-leavesleft {
  left: 336px;
  transform: none;
}

.center-svg-leavesright {
  right: 336px;
  transform: none;
}

/* мечи по бокам от текста */
.center-svg-right-swords-sideways,
.center-svg-left-swords-sideways {
  position: absolute;
  top: 340px;
  width: 300px;
  height: 500px;
}
.center-svg-right-swords-sideways {
  left: 186px;
  width: 200px;
  height: 196px;
  transform: rotate(180deg);
}

.center-svg-left-swords-sideways {
  right: 186px;
  width: 200px;
  height: 196px;
  transform: rotate(180deg);
}

/* щит с мечами */
.center-svg--shield {
  width: 440px;
  height: 176px;
}
/* топорики снизу */
.center-svg--axes {
  max-width: 450px;
}

/* кувалды по бокам*/
.center-svg-lefthammer,
.center-svg-righthammer {
  position: absolute;
  top: 587px;
  width: 130px;
  height: 276px;
}

.center-svg-lefthammer {
  left: 347px;
  width: 196px;
  height: 204px;
}
.center-svg-righthammer {
  right: 347px;
  width: 196px;
  height: 204px;
}

/* заголовок */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 0.9;
  pointer-events: auto;
  margin: 4px 0 14px 0;
}

/* первая часть заголовка */
.heading-playfair {
  display: block;
  font-size: 120px;
  font-weight: 700;
  color: #2a1617;
  text-align: center;
  width: 100%;
}

/* вторая часть заголовка */
.heading-display {
  display: block;
  font-size: 70px;
  font-weight: 700;
  color: #2a1617;
  text-align: center;
  width: 100%;
}

/* Секция 2 */
.section-2 {
  position: relative;
  height: 1800px;
  overflow: hidden;
  display: block;
  padding: 0;
  margin: 0;
}

/* контейнер с башней */
.tower-left,
.tower-right {
  position: absolute;
  bottom: 0;
  height: 1778px;
}

.tower-left {
  left: 57px;
}

.tower-right {
  right: 57px;
}

/* центральный контейнер: стрелы + текст */
.text-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 40%;
  margin: 180px auto 0;
  z-index: 3;
}

.arrows {
  width: 594px;
  height: 264px;
  margin-bottom: 84px;
}

.text-block h1 {
  margin-bottom: 24px;
}

/* нижний контейнер с информацией об авторе */
.background-left,
.background-right {
  position: absolute;
  bottom: 279px;
  height: 387px;
  z-index: 1;
}

.background-left {
  left: 0;
}

.background-right {
  right: 0;
}

/* портрет */
.portrait {
  position: absolute;
  bottom: 194px;
  left: 228px;
  width: 332px;
  height: 510px;
  z-index: 3;
}

/* текст про автора */
.author-text {
  position: absolute;
  bottom: 350px;
  left: 636px;
  max-width: 744px;
  text-align: left;
  z-index: 4;
}

.author-text h2 {
  margin-bottom: 24px;
  color: #f1ede2;
}

.author-text h3 {
  line-height: 1.2;
  color: #f1ede2;
}

/* Секция 3 */
.section-3 {
  position: relative;
  height: 1251px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #f1ede2;
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  z-index: 0;
}

.frame-one {
  position: absolute;
  left: 0;
  margin-top: -6px;
  width: 100%;
  height: auto;
  z-index: 1;
  line-height: 0;
}

.section-3 h1 {
  margin-top: 0;
  margin-bottom: 74px;
  z-index: 2;
}

/* контейнер с карточками */
.outlines {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;
  max-width: 1200px;
  z-index: 2;
}

/* карточка */
.outline-item {
  background-color: #f7f6f3;
  border-radius: 24px;
  width: 230px;
  height: 293px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 32px 24px;
  box-sizing: border-box;
}

/* рыцари */
.outline-item img {
  max-width: 160px;
  height: auto;
  margin-bottom: 24px;
}

/* начертания */
.regular {
  font-weight: 400;
}
.medium {
  font-weight: 500;
}
.semibold {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}
.extrabold {
  font-weight: 800;
}
.black {
  font-weight: 900;
}

/* курсив */
.italic {
  font-weight: 400;
  font-style: italic;
}
.medium.italic {
  font-weight: 500;
  font-style: italic;
}
.semibold.italic {
  font-weight: 600;
  font-style: italic;
}
.bold.italic {
  font-weight: 700;
  font-style: italic;
}
.extrabold.italic {
  font-weight: 800;
  font-style: italic;
}
.black.italic {
  font-weight: 900;
  font-style: italic;
}

/* Секция 4 */
.section-4 {
  position: relative;
  display: flex;
  height: 1009px;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 87px 79px;
  z-index: 0;
}

/* заголовок */
.section-4 .heading p {
  font-size: 56px;
  font-weight: 700;
  font-style: italic;
  color: #5b9265;
  text-transform: uppercase;
  margin-bottom: 53px;
}

/* подзаголовок */
.section-4 .subtitle p {
  font-size: 36px;
  font-weight: 600;
  color: #5b9265;
  margin-bottom: 36px;
}

/* весь текст ставим поверх фона  */
.section-4 .heading,
.section-4 .subtitle,
.font-elements {
  position: relative;
  z-index: 2;
}

/* контейнер лигатур и прочего */
.font-elements {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px 24px;
  max-width: 1370px;
  z-index: 1;
}

/* ряд глифов */
.font-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 30px 24px;
}

/* общая обертка лигатур и тд */
.font-elements p {
  font-size: 90px;
  color: #4c6851;
  margin: 0;
  line-height: 1;
}

/* оформление фона (грамота/письмо) */
.letter-background {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1369px;
  height: 849px;
  z-index: -1;
  pointer-events: none;
}

/* Секция 5 */
.section-5 {
  position: relative;
  height: 1700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
  margin-bottom: 100px;
  gap: 96px;
  overflow: hidden;
}

/* контейнер с заголовком */
.section-5 > div:first-of-type {
  position: relative;
  text-align: center;
}

.left-red-dagger,
.right-red-dagger {
  position: absolute;
  flex-direction: column;
  align-items: center;
  top: 24px;
  width: 347px;
}

.left-red-dagger {
  left: -400px;
}

.right-red-dagger {
  right: -400px;
}

/* общая обертка 2-4 контейнеров */
.feature-block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1360px;
  gap: 64px;
  margin: 0 auto;
}

/* описание + заголовок особенностей */
.feature-text {
  flex: 0 0 560px;
  max-width: 560px;
  text-align: left;
}

.feature-text h1 {
  margin-bottom: 24px;
}

.feature-text p {
  font-size: 32px;
  line-height: 1.2;
  color: #2a1617;
}

/* примеры */
.feature-example {
  position: relative;
  flex: 0 0 560px;
  max-width: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-block.reverse {
  flex-direction: row-reverse;
}

.feature-example p {
  font-size: 200px;
  color: #4c6851;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 10px;
}

/* Кружки поверх текста */
.feature-example img {
  position: absolute;
  max-width: 88px;
  height: auto;
  pointer-events: none;
}

/* разделители */
.separator {
  width: 757px;
  height: 43px;
  margin: 10px;
}

/* смещения кружков для обозначения особенностей в примерах */
.c-designation {
  top: 63.5%;
  left: 26.5%;
}
.k-designation {
  top: 23%;
  left: 48.8%;
}
.d-designation {
  top: 82%;
  left: 61.4%;
}

.x-designation {
  top: 60%;
  left: 11.2%;
}
.n-designation {
  top: 43%;
  left: 42%;
}
.i-designation {
  top: 40%;
  left: 71.8%;
}

.r-designation {
  top: 84%;
  left: 13.7%;
}
.a-designation {
  top: 6%;
  left: 43.4%;
}
.y-designation {
  top: 75%;
  left: 62.5%;
}

/* Секция 6 */
.section-6 {
  position: relative;
  height: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 59px;
  overflow: hidden;
}

/* заголовок и кинжалы в секции 6 */
.section-6 > div:first-of-type {
  position: relative;
  text-align: center;
  margin-bottom: 106px;
}

.section-6 .left-red-dagger,
.section-6 .right-red-dagger {
  position: absolute;
  top: 18px;
  width: 279px;
}

.section-6 .left-red-dagger {
  left: 72px;
}
.section-6 .right-red-dagger {
  right: 72px;
}

.title-block-second {
  position: relative;
  text-align: center;
  margin-bottom: 106px;
}

.left-red-dagger-second,
.right-red-dagger-second {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 279px;
}

.left-red-dagger-second {
  left: -300px;
}

.right-red-dagger-second {
  right: -300px;
}

/* контейнер с картой */
.map {
  position: relative;
  display: block;
  width: 1003px;
  height: auto;
  margin: 0 auto;
  z-index: 1;
}

/* общая обертка подписей */
.languege {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  height: 1040px;
  pointer-events: none;
  font-weight: 700;
  text-transform: uppercase;
  color: #b93d31;
  font-size: 32px;
}

/* Индивидуальные позиции (по карте) */
.english {
  position: absolute;
  top: 88px;
  left: 64px;
}

.portuguese {
  position: absolute;
  top: 300px;
  left: 186px;
}

.spanish {
  position: absolute;
  top: 418px;
  left: 208px;
}

.russian {
  position: absolute;
  top: -72px;
  right: 164px;
}

.chinese {
  position: absolute;
  top: 102px;
  right: 240px;
}

.indonesian {
  position: absolute;
  top: 278px;
  right: 114px;
}

/* Секция 7 */
.section-7 {
  position: relative;
  height: 816px;
  overflow: hidden;
  display: block;
  padding: 0;
}

/* расположение элементов*/

.section-7::after {
  /* правая открытка */
  content: "";
  position: absolute;
  right: 92px;
  top: 252px;
  width: 439px;
  height: 531px;
  background: url("../images/second-invitations.svg") no-repeat center / contain;
  z-index: 1;
}

/* левая открытка */
.fisrt-invitations {
  position: absolute;
  left: 35px;
  top: 132px;
  width: 685px;
  height: 568px;
  z-index: 1;
}

/*  герб */
img.emblem {
  position: absolute;
  top: 71px;
  left: 720px;
  width: 261px;
  height: 322px;
  z-index: 1;
}

/* текст на левой открытке */
.heading-fisrt-invitations,
.fdescr-fisrt-invitations,
.sdescr-fisrt-invitations,
.place-fisrt-invitations,
.date-fisrt-invitations {
  position: absolute;
  transform: rotate(-24deg);
  color: #2a1617;
  z-index: 2;
}

.lquotation-fisrt-invitations,
.rquotation-fisrt-invitations {
  position: absolute;
  transform: rotate(-24deg);
  color: #b93d31;
  z-index: 2;
}

.lquotation-fisrt-invitations {
  left: 136px;
  top: 366px;
  font-size: 120px;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
}

.rquotation-fisrt-invitations {
  left: 455px;
  top: 228px;
  font-size: 120px;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
}

.heading-fisrt-invitations {
  left: 210px;
  top: 320px;
  font-size: 32px;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
}
.fdescr-fisrt-invitations {
  left: 178px;
  top: 470px;
  font-size: 26px;
  font-style: italic;
}
.sdescr-fisrt-invitations {
  left: 480px;
  top: 340px;
  font-size: 26px;
  font-style: italic;
}
.place-fisrt-invitations {
  left: 320px;
  top: 470px;
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
}
.date-fisrt-invitations {
  left: 360px;
  top: 505px;
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
  font-variant: lining-nums;
}

/* Текст на правой открытке */
.fheading-second-invitations,
.sheading-second-invitations,
.theading-second-invitations,
.description-second-invitations,
.date-second-invitations,
.info-second-invitations {
  position: absolute;
  transform: rotate(16deg);
  color: #f1ede2;
  text-align: center;
  z-index: 2;
}

.fheading-second-invitations {
  right: 192px;
  top: 410px;
  font-size: 32px;
  font-weight: 600;
  font-style: italic;
}
.sheading-second-invitations {
  right: 290px;
  top: 440px;
  font-size: 52px;
  font-weight: 500;
  font-style: italic;
}
.theading-second-invitations {
  right: 205px;
  top: 490px;
  font-size: 56px;
  font-weight: 700;
}
.description-second-invitations {
  right: 190px;
  top: 560px;
  font-size: 18px;
  line-height: 1.2;
  width: 280px;
  font-style: italic;
  font-weight: 400;
}
.date-second-invitations {
  right: 270px;
  top: 620px;
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
}
.info-second-invitations {
  right: 280px;
  top: 664px;
  font-size: 14px;
}

.frame-second {
  position: absolute;
  left: 0;
  margin-top: -6px;
  width: 100%;
  height: auto;
  z-index: 1;
  line-height: 0;
}

.text-emblem {
  position: absolute;
  transform: rotate(8deg);
  color: #f1ede2;
  text-align: center;
  z-index: 2;
  left: 755px;
  top: 100px;
  font-size: 46px;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
}

footer {
  display: flex;
  padding: 40px 40px;
  align-items: flex-end;
  justify-content: space-between;
  align-items: center;
  background-color: #2a1617;
  max-width: 100%;
}
.text-footer {
  width: 320px;
  height: 92px;
  flex-shrink: 0;
  font-variant: lining-nums;
}
.p-footer {
  color: #fff;
  font-weight: 600;
  font-size: 32px;
  line-height: 43px;
}
.logo-footer {
  width: 308px;
  height: 120px;
  flex-shrink: 0;
}