body {
  background: white;
  margin: 0;
  padding: 0;
  font-family: "Nanum Gothic", sans-serif;
}

html,
body {
  overflow-x: hidden;
}

@media only screen and (min-width: 300px) and (max-width: 680px) {
  html,
  body {
    overflow-x: hidden;
  }
}

.top {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 0;
  background-image: url("../images/topBackground.jpg");
  background-repeat: no-repeat;
  background-color: black;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.wrapper {
  position: relative;
  padding-bottom: 200%;
  transform: translateY(-35.95%);
  z-index: 0;
}

.skipButton {
  border: 1px solid white;
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  font-size: 1.2vw;
  backdrop-filter: blur(10px);
  color: black;
  position: absolute;
  bottom: 25px;
  right: 25px;
  padding: 15px 10px;
  z-index: 98;
  cursor: pointer;
}

@media (max-width: 500px) {
  .skipButton {
    display: none;
  }
}

.restBody {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  color: white;
}

.topDummy {
  position: relative;
  width: 100%;
  height: 100vh;
}

@media (max-width: 500px) {
  iframe {
    height: 120%;
  }
  .wrapper {
    position: relative;
    padding-bottom: 250%;
    transform: translateY(-40.95%);
    z-index: 0;
  }
  .topDummy {
    position: relative;
    width: 100%;
    height: 45vh;
  }
}

.foregroundShadow {
  width: 100vw;
  height: 100%;
  z-index: 30;
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.flexColContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.yellowBackground {
  background: rgb(255, 180, 27);
  background: linear-gradient(
    90deg,
    rgba(255, 180, 27, 1) 15%,
    rgba(237, 255, 110, 1) 100%
  );
}

.blueShadeBackground {
  background: rgb(105, 255, 210);
  background: linear-gradient(
    90deg,
    rgba(105, 255, 210, 1) 0%,
    rgba(0, 160, 185, 1) 85%
  );
}

.flexRowContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.flexRowContainer2 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.descVertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40%;
  text-align: left;
  padding-left: 2%;
}

.descTitle {
  font-family: "Oswald", sans-serif;
  font-size: 3.3vw;
  padding-bottom: 10px;
  text-align: left;
}

.descCaption {
  font-family: "Roboto", sans-serif;
  font-size: 1.4vw;
  font-weight: 600;
  padding-bottom: 20px;
  width: 90%;
}

.descDescription {
  font-size: 1.2vw;
  font-weight: 100;
  padding-bottom: 40px;
  text-align: justify;
  line-height: 1.3;
  width: 90%;
}

.descPhotos {
  width: 50%;
  top: 0%;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.photosParent {
  width: 80%;
  height: 80%;
  position: relative;
}

.art1 {
  width: 50%;
  height: 60%;
  position: absolute;
  object-fit: cover;
}

.art1 img {
  width: 100%;
  height: 100%;
}

.art2 {
  width: 42%;
  height: 50%;
  position: absolute;
  top: 10%;
  right: 8%;
  object-fit: cover;
}

.art2 img {
  width: 100%;
  height: 100%;
}

.art3 {
  width: 45%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 25%;
  object-fit: cover;
}

.art3 img {
  width: 100%;
  height: 100%;
}

@keyframes moveLeft {
  0%,
  100% {
    left: 0;
  }

  50% {
    left: 5px;
  }
}

.photosParent2 {
  width: 70%;
  height: 70%;
  position: relative;
}

.cargo1 {
  width: 60%;
  height: 90%;
  position: absolute;
  top: 0%;
  left: 25%;
  object-fit: cover;
  z-index: 6;
}

.cargo1 img {
  width: 100%;
  height: 100%;
}

.cargo2 {
  width: 60%;
  height: 100%;
  left: -15%;
  top: 10%;
  position: absolute;
  object-fit: cover;
  z-index: 3;
}

.cargo2 img {
  width: 100%;
  height: 100%;
}

.cargo3 {
  width: 32%;
  height: 28%;
  position: absolute;
  object-fit: cover;
  left: 35%;
  top: 6%;
}

.cargo3 img {
  width: 100%;
  height: 100%;
}

.cargo4 {
  width: 44%;
  height: 42%;
  position: absolute;
  object-fit: cover;
  left: -12%;
  top: 25%;
  z-index: 5;
}

.cargo4 img {
  width: 100%;
  height: 100%;
}

@keyframes moveUp {
  0%,
  100% {
    top: 0;
  }

  50% {
    top: 5px;
  }
}

@keyframes moveDown {
  0%,
  100% {
    top: 0;
  }

  50% {
    top: -5px;
  }
}

.descButtons {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.generalButton {
  background-color: white;
  border: none;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1vw;
  margin-right: 10px;
  cursor: pointer;
}

@media (max-width: 500px) {
  .flexRowContainer {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-around;
  }

  .flexRowContainer2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .yellowBackground {
    background: rgb(255, 180, 27);
    background: linear-gradient(
      190deg,
      rgba(237, 255, 110, 1) 5%,
      rgba(255, 180, 27, 1) 100%
    );
  }

  .blueShadeBackground {
    background: rgb(105, 255, 210);
    background: linear-gradient(
      180deg,
      rgba(105, 255, 210, 1) 0%,
      rgba(0, 160, 185, 1) 85%
    );
  }

  .descVertical {
    width: 100%;
    padding-left: 5%;
    padding-bottom: 50px;
  }

  .descTitle {
    font-family: "Oswald", sans-serif;
    font-size: 7vw;
    padding-bottom: 5px;
    text-align: left;
    top: 10px;
  }

  .descCaption {
    font-family: "Roboto", sans-serif;
    font-size: 4.4vw;
    font-weight: 600;
    padding-bottom: 20px;
    width: 90%;
  }

  .descDescription {
    font-size: 4vw;
    font-weight: 100;
    padding-bottom: 40px;
    text-align: justify;
    line-height: 1.3;
    width: 90%;
  }

  .descPhotos {
    width: 100%;
    top: 0%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .photosParent {
    width: 90%;
    height: 90%;
    position: relative;
    top: 10%;
    left: 5%;
  }

  .art1 {
    width: 50%;
    height: 50%;
    position: absolute;
    object-fit: cover;
  }

  .art1 img {
    width: 100%;
    height: 100%;
  }

  .art2 {
    width: 45%;
    height: 45%;
    position: absolute;
    top: 10%;
    right: 8%;
    object-fit: cover;
  }

  .art2 img {
    width: 100%;
    height: 100%;
  }

  .art3 {
    width: 40%;
    height: 40%;
    position: absolute;
    top: 40%;
    left: 25%;
    object-fit: cover;
  }

  .art3 img {
    width: 100%;
    height: 100%;
  }

  .photosParent2 {
    width: 80%;
    height: 80%;
    position: relative;
    left: 10%;
  }

  .descButtons {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .generalButton {
    padding: 15px 28px;
    font-size: 4vw;
  }
}

.violetBackground {
  background: rgb(0, 15, 65);
  background: linear-gradient(
    70deg,
    rgba(0, 15, 65, 1) 40%,
    rgba(200, 125, 255, 1) 100%
  );
}

.flexRowContainer3 {
  width: 90%;
  margin-left: 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  text-align: left;
  flex-wrap: wrap;
  margin-top: 20px;
}

.servicesBox1 {
  width: 40%;
  padding: 5px 15px 30px 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 3px solid white;
  border-radius: 8px;
  color: white;
  margin-top: 20px;
}

.servicesBox2 {
  width: 40%;
  padding: 5px 15px 30px 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 3px solid white;
  border-radius: 8px;
  color: white;
  margin-top: 80px;
}

.serviceBoxLineHeight {
  line-height: 4vw;
  padding-bottom: 10px;
}

@media (max-width: 500px) {
  .flexRowContainer3 {
    width: 90%;
    margin-left: 5%;

    margin-top: 0px;
  }

  .servicesBox1 {
    width: 90%;
    padding: 5px 15px 30px 15px;

    margin-top: 60px;
  }

  .servicesBox2 {
    width: 90%;
    padding: 5px 15px 30px 15px;

    margin-top: 60px;
  }

  .serviceBoxLineHeight {
    line-height: 8vw;
    padding-bottom: 10px;
  }
}

.whyTitle {
  padding: 20px;
  color: rgb(100, 100, 100);
  font-size: 5vw;
}

.whyMargins {
  margin: 20px 0 80px 0;
}

.whyCaption {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  font-size: 4vw;
  border-right: 6px solid rgb(80, 80, 80);
  width: 40%;

  text-align: right;
}

.spanGradient {
  background: linear-gradient(
    90deg,
    rgb(255, 237, 125) 10%,
    rgb(80, 0, 130) 80%
  );
  background-clip: text;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 50px;
}

.whyDesc {
  width: 60%;
  padding: 40px;
  color: rgb(80, 80, 80);
  font-size: 1.3vw;
}

.logoImg {
  max-width: 25%;
  height: auto;
}

.logoContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap;
}

@media (max-width: 500px) {
  .whyTitle {
    padding: 20px;

    font-size: 8vw;
  }

  .whyMargins {
    margin: 20px 0 20px 0;
  }

  .whyCaption {
    align-items: flex-start;
    justify-content: center;
    font-size: 6vw;
    border-right: 0px solid rgb(80, 80, 80);
    border-bottom: 4px solid rgb(80, 80, 80);
    padding-bottom: 15px;
    margin-left: 5%;
    text-align: right;
  }

  .spanGradient {
    margin-right: 0px;
  }

  .whyDesc {
    width: 90%;
    padding: 0px;
    margin: 5%;
    color: rgb(80, 80, 80);
    font-size: 3.3vw;
    text-align: justify;
  }

  .logoImg {
    max-width: 40%;
    height: auto;
  }

  .logoContainer {
    flex-wrap: wrap;
  }
}

.generalSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
  color: rgb(30, 30, 30);
}

.sectionTitle {
  width: 100%;
  padding: 20px;
  font-family: "Oswald", sans-serif;
  font-size: 4vw;
  text-align: center;
  color: rgb(30, 30, 30);
}

.sectionDesc {
  font-family: "Roboto", sans-serif;
  font-size: 1.5vw;
  margin-top: 30px;
  margin-bottom: 30px;

  width: 85%;
  text-align: center;
  margin-left: 7.5%;
}

.achievementContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
}

.achievementContainer2 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
}

.achNum {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.achNum img {
  max-width: 80%;
  height: auto;
}

.achDesc {
  width: 50%;
}

.line1 {
  width: 50%;
  height: 1.5px;
  background: black;
  margin: 8px 0px 8px 0px;
  margin-left: 50%;
  text-align: right;
}

.line2 {
  width: 80%;
  height: 1.5px;
  background: black;
  margin: 8px 0px 8px 0px;
  text-align: right;
  margin-left: 20%;
}

.line3 {
  width: 90%;
  height: 1.5px;
  background: black;
  margin: 8px 0px 8px 0px;
  text-align: right;
  margin-left: 10%;
}

.line1Reverse {
  width: 50%;
  height: 1.5px;
  background: black;
  margin: 8px 0px 8px 0px;
  margin-right: 50%;
  text-align: right;
}

.line2Reverse {
  width: 80%;
  height: 1.5px;
  background: black;
  margin: 8px 0px 8px 0px;
  text-align: right;
  margin-right: 20%;
}

.line3Reverse {
  width: 90%;
  height: 1.5px;
  background: black;
  margin: 8px 0px 8px 0px;
  text-align: right;
  margin-right: 10%;
}

.achievementDescCaption {
  width: 90%;
  padding: 40px 0px 40px 0px;
  font-family: "Roboto", sans-serif;
  font-size: 1.4vw;
  font-weight: 300;
  text-align: justify;
  line-height: 1.2;
  color: rgb(100, 100, 100);
}

.achievementDescCaptionReverse {
  width: 90%;
  padding: 40px 0px 40px 0px;
  font-family: "Roboto", sans-serif;
  font-size: 1.4vw;
  font-weight: 300;
  text-align: justify;
  line-height: 1.2;
  color: rgb(100, 100, 100);
  margin-left: 10%;
}

.connectButton {
  background-color: white;
  border: none;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1vw;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid black;
  width: 20%;
  margin-left: 40%;
}

.cookiesAndPrivacyBanner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px;
  text-align: center;
  background-color: rgb(250, 250, 250);
  color: rgb(100, 100, 100);
  font-family: "Roboto", sans-serif;
  font-size: 0.8vw;
  font-weight: 300;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 95;
}

@media (max-width: 500px) {
  .cookiesAndPrivacyBanner {
    flex-direction: column;
    text-align: justify;
    font-size: 2.8vw;
  }

  .achievementContainer {
    flex-direction: column;
    margin-bottom: 100px;
  }

  .achievementContainer2 {
    flex-direction: column-reverse;
    margin-bottom: 100px;
  }

  .achNum {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .achNum img {
    max-width: 80%;
    height: auto;
  }

  .achDesc {
    width: 90%;
  }

  .line1 {
    width: 50%;
    height: 1.5px;
    background: black;
    margin: 8px 0px 8px 0px;
    margin-left: 50%;
    text-align: right;
  }

  .line2 {
    width: 80%;
    height: 1.5px;
    background: black;
    margin: 8px 0px 8px 0px;
    text-align: right;
    margin-left: 20%;
  }

  .line3 {
    width: 90%;
    height: 1.5px;
    background: black;
    margin: 8px 0px 8px 0px;
    text-align: right;
    margin-left: 10%;
  }

  .line1Reverse {
    width: 50%;
    height: 1.5px;
    background: black;
    margin: 8px 0px 8px 0px;
    margin-right: 50%;
    text-align: right;
  }

  .line2Reverse {
    width: 80%;
    height: 1.5px;
    background: black;
    margin: 8px 0px 8px 0px;
    text-align: right;
    margin-right: 20%;
  }

  .line3Reverse {
    width: 90%;
    height: 1.5px;
    background: black;
    margin: 8px 0px 8px 0px;
    text-align: right;
    margin-right: 10%;
  }

  .achievementDescCaption {
    width: 90%;
    padding: 40px 0px 40px 0px;
    font-family: "Roboto", sans-serif;
    font-size: 3.4vw;
    font-weight: 300;
    text-align: justify;
    line-height: 1.2;
    color: rgb(100, 100, 100);
  }

  .achievementDescCaptionReverse {
    width: 90%;
    padding: 40px 0px 40px 0px;
    font-family: "Roboto", sans-serif;
    font-size: 3.4vw;
    font-weight: 300;
    text-align: justify;
    line-height: 1.2;
    color: rgb(100, 100, 100);
    margin-left: 10%;
  }

  .connectButton {
    background-color: white;
    border: none;
    padding: 10px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 3vw;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid black;
    width: 80%;
    margin-left: 5%;
  }
}