@font-face {
    font-family: 'CoFo Glassier';
    src: url('fonts/CoFoGlassier.eot');
    src: url('fonts/CoFoGlassier.eot?#iefix') format('embedded-opentype'),
        url('fonts/CoFoGlassier.woff2') format('woff2'),
        url('fonts/CoFoGlassier.woff') format('woff'),
        url('fonts/CoFoGlassier.ttf') format('truetype'),
        url('fonts/CoFoGlassier.svg#CoFoGlassier') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'CoFo Glassier';
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    color: #1A1930;
}

/* блоки */

.container {
    margin: 0 auto;
}

.content {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.blockOne {
    background-image: url(images/blockOne/bg1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 920px;
}

.blockTwo {
    height: 850px;
}

.b2ContentUnderTitle {
    display: flex;
    justify-content: space-between;
}

.stamps {
    position: relative;
}

.passport {
    display: flex;
    justify-content: end;
    gap: 35px;
    margin-top: 50px;
}

.passportFront {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 45px;
    display: flex;
    border: 4px solid #E30016;
    width: 303px;
    height: 438px;
    border-radius: 20px;
}

.passportBack {
    display: flex;
    flex-direction: column;
    gap: 44px;
    border: 4px solid #E30016;
    width: 330px;
    height: 438px;
    border-radius: 20px;
}

.passportTop {
    position: relative;
    margin: 30px 30px;
    width: 218px;
}

.passportBottom {
    display: flex;
    align-items: start;
    gap: 20px;
    padding: 30px;
}

.passportInfo {
    display: flex;
    flex-direction: column;
    align-self: end;
    padding-bottom: 5px;
}

.blockThree {
    position: relative;
}

.blockThreeBg {
    background-image: url(images/blockThree/bg3.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1152px;
    position: relative;
    z-index: 2;
}

.blockFourTop {
    position: relative;
    height: 455px;
}

.blockFour {
    height: 1110px;
    background-image: url(images/blockFour/bg4.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.blockFourBottom {
    position: relative;
}

.pointText {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: fit-content;
    height: fit-content;
}

.blockFive .content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.b5Title {
    display: flex;
    justify-content: space-between;
}

.blockFive .content .b5ContentUnderTitle {
    position: relative;
    width: 1234px;
}

.blockSix {
    height: 1012px;
}

.blockSeven {
    height: 1061px;
}

.menu {
    display: flex;
    gap: 16px;
    margin-top: 83px;
}

.menuLeft,.menuRight {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid #1A1930;
    background-color: #fff;
    height: 863px;
    width: 475px;
}

.menuPositions {
    display: flex;
    flex-direction: column;
    gap: 44px;
    width: 395px;
}

.positionsText {
    display: flex;
    justify-content: space-between;
}

.position {
    position: relative;
}

.desserts {
    margin-top: 37px;
}

.check {
    display: flex;
    flex-direction: column;
    height: 530px;
    width: 345px;
    background-image: url(images/blockSeven/bgCheck.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.checkText {
    margin: 30px;
}

.totalPrice {
    display: flex;
    justify-content: space-between;
}

.blockEight {
    height: 746px;
}

.blockEight .content {
    display: flex;
    flex-direction: row;
}

.postcardLeft {
    display: flex;
    position: relative;
    height: 434px;
    width: 611px;
    border: 5px solid #E30016;
    background-color: #fff;
}

.postcardLeftContent {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    margin: 40px;
}

.postcardLeftContentTop {
    display: flex;
    justify-content: space-between;
}

.postcardLeftContentBottom {
    display: flex;
    justify-content: end;
}

.postcardRight {
    display: flex;
    position: relative;
    height: 434px;
    width: 611px;
    background-image: url(images/blockEight/postcardRight.svg);
}

.postcardRightContent {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 47px;
}
.postcardRightContentTop {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.stampSmall {
    position: relative;
    height: 115px;
    width: 115px;
    background-image: url(images/blockEight/stampSmall.svg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.stampSmall .px40 {
    margin-top: -10px;
}

.postcardRightContentCenter {
    display: flex;
    gap: 74px;
    margin-top: 31px;
}

.inside {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inside:last-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.postcardRightContentBottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 202px;
    margin-top: 30px;
}

.postcardLine {
    width: 309px;
    box-shadow: 0 0 0 0.5px #1A1930;
    border: none;
}

.stamp {
    height: 317px;
    width: 317px;
    background-image: url(images/blockEight/stamp.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blockNine {
    height: 1091px;
}

.panelCenter {
    display: flex;
    justify-content: flex-start;
}

.panel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 27px;
    flex-direction: column;
    height: 518px;
}

.panelDepartues {
    height: 375px;
    width: 736px;
    border: 4px solid #203485;
    background-color: #fff;
    border-radius: 20px;
    z-index: 2;
}

.panelAlphabet {
    display: flex;
    height: 116px;
    width: 355px;
    border: 4px solid #203485;
    background-color: #fff;
    border-radius: 15px;
    z-index: 3;
}

.panelRopes {
    position: absolute;
    inset: 354px 254px;
    height: 77px;
    width: 229px;
    border: 4px solid #203485;
    z-index: 1;
}

.panelContent {
    margin: 35px;
}

.panelTop {
    display: flex;
    gap: 28px;
    margin-bottom: 11px;
}

.panelAlphabet .px40 {
    width: 308px;
    margin-top: 22px;
    margin-left: 35px;
}

.footer {
    height: 423px;
}

.road {
    height: 91px;
    background-color: #1A1930;
    background-image: url(images/blockTen/pattern.svg);
    background-position: center;
    background-size: contain;
}

.footerContent {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 333px;
  background-color: #1A1930;
}

.footerText {
  display: flex;
  justify-content: space-between;
  width: 100%;
  width: 1200px;
  margin-bottom: 40px;
}

.footerCenter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footerRight {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fontButton {
    display: flex;
    justify-content: center;
    text-decoration: none;
    height: 58px;
    width: 343px;
    background-color: #fff;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.fontButton:hover {
  background-color: #E30016;
  color: #fff;
}


/* текст */

.px200 {
    font-size: 200px;
    margin-top: 80px;
}

.px170 {
    font-size: 170px;
    color: #203485;
}

.px170Right {
    font-size: 170px;
    margin-top: 155px;
    text-align: right;
}

.blockFourTop .px170Right {
    margin-top: 207px;
}

.px170Left {
    font-size: 170px;
    margin-top: 155px;
}

.blockNine .px170Left {
    margin-top: 140px;
    margin-bottom: 118px;
}

.blockFive .b5Title .px170Right {
    color: #E30016;
}

.px128 {
    font-size: 128px;
    margin-top: 155px;
}

.px96 {
    font-size: 96px;
}

.menuLeft .px96 {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 60px;
}

.checkText .totalPrice .px96 {
    margin-top: 103px;
}

.panelTop .px96 {
    margin-top: -8px;
}

.px80 {
    font-size: 80px;
    margin-top: 60px;
}

.px64 {
    font-size: 64px;
}

.px64 span {
    text-align: center;
    font-size: 64px;
    letter-spacing: 0.15em;;
}

.px58 {
    font-size: 58px;
}

.px40 {
    font-size: 40px;
}

.px40 span {
    display: block;
    text-align: center;
    font-size: 40px;
}

.checkText .lineTop {
    margin-top: -6px;
    margin-bottom: 7px;
}

.checkText .lineBottom {
    margin-top: -15px;
}

.checkText .totalPrice .px40 {
    margin-top: 146px;
}

.positionsTitle .px40 {
    margin-bottom: 20px;
}

.px28 {
    font-size: 28px;
}

.position .px28 {
    margin-bottom: 13px;
}

.price .px28 {
    margin-bottom: 13px;
    text-align: end;
}

.px24 {
    font-size: 24px;
}

.passportInfo .px24 {
    width: 150px;
    border-bottom: 4px solid #D9D9D9;
    padding-top: 10px;
}

.checkText div .px24 {
    margin-bottom: 10px;
}

.checkText .px96 {
    color: #fff;
}

.checkText .px40 {
    color: #fff;
}

.checkText .px28 {
    color: #fff;
}

.checkText .px24 {
    color: #fff;
}

.blockEight .px96 {
    color: #203485;
}

.blockNine .px96 {
    color: #203485;
}

.postcardLeft .px40 {
    color: #203485;
}

.postcardRight .postcardRightContentTop .px40 {
    color: #203485;
}

.postcardRight .postcardRightContentTop .px24 {
    color: #203485;
}

.footerText .px58 {
    color: #fff;
}

.footerText .px40 {
    color: #fff;
}

.px40Button {
    font-size: 40px;
    color: #1A1930;
    display: flex;
    align-items: center;
}

.gradient {
    position: relative;
    height: 675px;
    overflow: hidden;
}

.gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80%; /* регулируй */
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

/* таблица */

td {
    font-size: 32px;
}

  tr:first-child td {
    font-size: 40px;
    color: #203485;
    padding-bottom: 15px;
}

td:nth-child(1) {
    padding: 0 78px 10px 0;
}

td:nth-child(2) {
    padding: 0 67px 10px 0;
}

td:nth-child(3) {
    padding: 0 60px 10px 0;
}

td:nth-child(4) {
    padding: 0 61px 10px 0;
}

/* td:nth-child(5) {
    padding: 0 60px 10px 0;
} */


/* картинки, позиционирование, анимация */

/* 1 блок */

#bg1Sun {
    position: absolute;
    inset: 404px 73px;
    z-index: 2;
}

#bg1CloudOne {
    position: absolute;
    inset: 497px 0;
    z-index: 3;
    animation: moveCloudOne 5s ease-in-out infinite;
}

@keyframes moveCloudOne {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(25px); }
}

#bg1CloudTwo {
    position: absolute;
    inset: 370px 152px;
    z-index: 1;
    animation: moveCloudTwo 5s ease-in-out infinite;
}

@keyframes moveCloudTwo {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-25px); }
}

#bg1CloudThree {
    position: absolute;
    inset: 193px 677px;
    animation: moveCloudThree 8s ease-in-out infinite;
}

@keyframes moveCloudThree {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}

#planes {
    position: absolute;
    inset: 760px 0px;
}

#landingPlane {
    position: absolute;
    inset: 295px 904px;
}

/* 2 блок */

#passportEmblem {
    width: 109px;
    height: auto;
}

#passportSign {
    position: absolute;
    inset: 111px 197px;
}

#stampLondon {
    position: absolute;
    inset: -140px 110px;
    rotate: -15deg;
    z-index: 2;
}

#stampAmsterdam {
    position: absolute;
    inset: 60px 140px;
    rotate: -8deg;
    z-index: 3;
}

#stampTurin {
    position: absolute;
    inset: 125px -100px;
    rotate: 35deg;
    z-index: 4;
}

#stampLosAngeles {
    position: absolute;
    inset: 215px 2px;
    z-index: 1;
}

/* 3 блок */

#travelGuide {
    position: absolute;
    inset: 917px -291px;
}

/* 4 блок */

#bg4Sun {
    position: absolute;
    inset: 296px 493px;
    z-index: 1;
}

#bg4CloudOne {
    position: absolute;
    inset: 263px 313px;
    z-index: 2;
    animation: movebg4CloudOne 5s ease-in-out infinite;
}

@keyframes movebg4CloudOne {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-25px); }
}

#bg4CloudTwo {
    position: absolute;
    inset: 297px 610px;
    z-index: 3;
    animation: movebg4CloudTwo 5s ease-in-out infinite;
}

@keyframes movebg4CloudTwo {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}

#bg4CloudThree {
    position: absolute;
    inset: 123px 1019px;
    animation: movebg4CloudThree 8s ease-in-out infinite;
}

@keyframes movebg4CloudThree {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-30px); }
}

#pointText1 {
    gap: 90px;
    position: absolute;
    inset: 15px 31px;
}

#pointText2 {
    gap: 60px;
    position: absolute;
    inset: 180px 215px;
}

#pointText3 {
    gap: 80px;
    position: absolute;
    inset: 50px 514px;
}

#pointText4 {
    gap: 60px;
    position: absolute;
    inset: 175px 795px;
}

#pointText5 {
    gap: 80px;
    position: absolute;
    inset: 5px 1065px;
}

.pointAnimate {
    animation: movepointAnimate 2s cubic-bezier(0,1.51,1,.99) infinite;
}

@keyframes movepointAnimate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

#car {
    position: absolute;
    inset: 380px 0;
}

/* 5 блок  */

#bg5CloudOne {
    position: absolute;
    inset: 600px 116px;
    z-index: 2;
    animation: movebg5CloudOne 5s ease-in-out infinite;
}

@keyframes movebg5CloudOne {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-25px); }
}

#bg5CloudTwo {
    position: absolute;
    inset: 562px 352px;
    z-index: 1;
    animation: movebg5CloudTwo 7s ease-in-out infinite;
}

@keyframes movebg5CloudTwo {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(25px); }
}

#bg5CloudThree {
    position: absolute;
    inset: 600px 826px;
    animation: movebg5CloudThree 8s ease-in-out infinite;
}

@keyframes movebg5CloudThree {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-25px); }
}

/* 6 блок */

#italy {
    position: absolute;
    inset: 225px 0;
}

#usa {
    position: absolute;
    inset: 425px 0px;
}

#russia {
    position: absolute;
    inset: 420px 526px;
}

#germany {
    position: absolute;
    inset: 642px 267px;
}

#platform {
    position: absolute;
    inset: 674px 940px;
}

/* 7 блок  */

.menu {
    position: relative;
    inset: 0 230px;
    z-index: 2;
    justify-content: end;
}

.pepper {
    margin-left: 10px;
    margin-top: 3px;
    vertical-align: top;
}

.pepperSecond {
    margin-top: 3px;
    vertical-align: top;
}

.check {
    position: absolute;
    inset: 530px 855px;
    z-index: 3;
}

#bg7CloudOne {
    position: absolute;
    inset: 261px 0;
    animation: movebg7CloudOne 7s ease-in-out infinite;
}

@keyframes movebg7CloudOne {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-40px); }
}

#bg7CloudTwo {
    position: absolute;
    inset: 505px 173px;
    z-index: 1;
    animation: movebg7CloudTwo 7s ease-in-out infinite;
}

@keyframes movebg7CloudTwo {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(40px); }
}

/* блок 8 */

.postcardLeft {
    position: absolute;
    inset: 37px 0;
}

#sphinx {
    position: absolute;
    inset: 127px 0;
}

#pyramids {
    position: absolute;
    inset: 98px 220px;
}

.postcardRight {
    position: absolute;
    inset: 235px 588px;
}

.stampSmall .px24 {
    position: absolute;
    inset: 78px 20px;
}

.stamp {
    position: absolute;
    inset: 423px 308px;
}

/* 9 блок */

#bg9Planes {
    position: absolute;
    inset: 323px 455px;
}

#bg9CloudOne {
    position: absolute;
    inset: 140px 916px;
    animation: movebg9CloudOne 5s ease-in-out infinite;
}

@keyframes movebg9CloudOne {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
}

#takingOffPlane {
    position: absolute;
    inset: 375px 837px;
}

#bg9CloudTwo {
    position: absolute;
    inset: 695px 948px;
    animation: movebg9CloudTwo 6s ease-in-out infinite;
}

@keyframes movebg9CloudTwo {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

#bg9Sun {
    position: absolute;
    inset: 752px 964px;
}

#bg9CloudThree {
    position: absolute;
    inset: 831px 816px;
    animation: movebg9CloudThree 8s ease-in-out infinite;
}

@keyframes movebg9CloudThree {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-30px); }
}