@font-face {
  font-family: "BebasNeue";
  src:
    local("BebasNeue"),
    url("./fonts/BebasNeue-Bold.woff") format("woff"),
    url("./fonts/BebasNeue-Bold.woff2") format("woff2");
  font-weight: 700;
}
@font-face {
  font-family: "Cervo";
  src:
    local("Cervo"),
    url("./fonts/Cervo-Light.woff") format("woff"),
    url("./fonts/Cervo-Light.woff2") format("woff2");
  font-weight: 300;
}
:root {
  --blue-color: #002169;
  --red-color: #ce0e2d;
  --info-color: #425376;
}
body {
  font-family: "BebasNeue", sans-serif;
  min-height: 100vh;
  margin: 0;
}
p,
h1 {
  margin: 0;
}
.main {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.background {
  z-index: -1;
  width: 101%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer {
  position: absolute;
  width: 100%;
  object-fit: cover;
  bottom: 0%;
  left: 0;
  min-height: 221px;
}
.aircraft {
  position: absolute;
  width: 168px;
  left: -77px;
  top: -3px;
}
.palm {
  position: absolute;
  right: -35px;
  top: 40%;
  width: 120px;
}
.texts {
  padding-top: 76px;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.title {
  font-weight: 700;
  font-size: 40px;
  line-height: 125%;
  text-align: center;
  color: var(--blue-color);
  margin-bottom: 13px;
}
.annotation {
  padding: 0 20px;
  font-weight: 700;
  font-size: 37px;
  line-height: 105%;
  text-align: center;
  color: var(--red-color);
  margin-bottom: 14px;
}
.text {
  padding: 0 75px;
  font-weight: 700;
  font-size: 27px;
  line-height: 119%;
  text-align: center;
  color: var(--blue-color);
}
.footnote {
  position: absolute;
  width: 90%;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Cervo", sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 95%;
  text-transform: uppercase;
  text-align: center;
  color: #425376;
}
@media (min-width: 768px) {
  .footer {
    min-height: 120px;
  }
  .aircraft {
    width: 250px;
    left: -110px;
    top: 20px;
  }
  .palm {
    width: 180px;
    top: 34%;
    right: -54px;
  }
  .texts {
    padding-top: 110px;
  }
  .title {
    font-size: 62px;
    line-height: 142%;
    margin-bottom: 0px;
  }
  .annotation {
    font-size: 39px;
    line-height: 133%;
    margin-bottom: 14px;
  }
  .text {
    font-size: 36px;
    line-height: 111%;
  }
}
@media (min-width: 1024px) {
  .footer {
    min-height: 130px;
  }
  .aircraft {
    width: 350px;
    left: -105px;
    top: 30px;
  }
  .palm {
    width: 290px;
    top: 34%;
    right: -87px;
  }
  .texts {
    padding-top: 204px;
  }
  .title {
    font-size: 69px;
    line-height: 128%;
    margin-bottom: 0px;
  }
  .annotation {
    font-size: 42px;
    line-height: 124%;
    margin-bottom: 28px;
  }
  .text {
    font-size: 38px;
    line-height: 105%;
  }
  .footnote {
    font-size: 43px;
    line-height: 95%;
    bottom: 4%;
  }
}
@media (min-width: 1440px) {
  .footer {
    min-height: 140px;
  }
  .aircraft {
    width: 470px;
    left: -125px;
    top: 35px;
  }
  .palm {
    width: 410px;
    top: 28%;
    right: -152px;
  }
  .texts {
    padding-top: 290px;
  }
  .title {
    font-size: 92px;
    line-height: 96%;
  }
  .annotation {
    font-size: 58px;
    line-height: 90%;
    margin-bottom: 32px;
  }
  .text {
    font-size: 40px;
    line-height: 120%;
  }
  .footnote {
    font-size: 50px;
    line-height: 95%;
    bottom: 4%;
  }
}