@font-face {
  font-family: "ponur";
  src: url("../../fonts/PPObjectSans-Heavy.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ponur2";
  src: url("../../fonts/Aceh-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.promotion {
  margin-top: 4vw;
}
.promotion .promotion-background {
  width: 100%;
  height: 100%;
  background-size: 5.8vw 3vw;
  background-repeat: repeat-x;
  height: 50vw;
}
.promotion .promotion-background .promotion__background-text {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}
.promotion .promotion-background .promotion__background-text span {
  margin-top: 2vw;
  font-size: 3.2vw;
  font-family: "ponur", sans-serif;
}
.promotion .promotion-background .promotion__background-text P {
  width: 75%;
  margin-top: 1vw;
  font-size: 2vw;
  font-family: "ponur2", sans-serif;
}
.promotion .promotion-background .promotion__background-results {
  align-self: center;
  justify-self: center;
  display: flex;
  width: 80%;
  height: 18vw;
  justify-content: space-evenly;
  align-items: center;
  transition: transform 0.5s ease-out, opacity 0.5s;
  opacity: 0;
  transform: translateY(50px);
}
.promotion .promotion-background .promotion__background-results.active1 {
  opacity: 1;
  animation: bounce 0.5s ease-out forwards;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
}
.promotion .promotion-background .promotion__background-results .promotion__background__results-1 img,
.promotion .promotion-background .promotion__background-results .promotion__background__results-2 img,
.promotion .promotion-background .promotion__background-results .promotion__background__results-3 img {
  margin-top: 2vw;
  width: 18vw;
  height: 18vw;
  transition: all 0.3s, opacity 0.3s ease-in-out;
  border: 0.4vw solid #b0d6e6;
  border-radius: 2vw;
}
.promotion .promotion-background .promotion__background-results .promotion__background__results-1 img:hover,
.promotion .promotion-background .promotion__background-results .promotion__background__results-2 img:hover,
.promotion .promotion-background .promotion__background-results .promotion__background__results-3 img:hover {
  border: 0.4vw solid #000000;
  transform: scale(1.3);
}
@media (max-width: 1024px) {
  .promotion {
    margin-top: 4vw;
  }
  .promotion .promotion-background {
    width: 100%;
    background-size: 5.8vw 3vw;
    background-repeat: repeat-x;
    height: 55vw;
  }
  .promotion .promotion-background .promotion__background-text {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
  }
  .promotion .promotion-background .promotion__background-text span {
    margin-top: 2vw;
    font-size: 5vw;
    font-family: "ponur", sans-serif;
  }
  .promotion .promotion-background .promotion__background-text P {
    width: 75%;
    margin-top: 1vw;
    font-size: 2.9vw;
    font-family: "ponur2", sans-serif;
  }
  .promotion .promotion-background .promotion__background-results {
    align-self: center;
    justify-self: center;
    display: flex;
    width: 80%;
    height: 18vw;
    justify-content: space-evenly;
    align-items: center;
    transition: transform 0.5s ease-out, opacity 0.5s;
    opacity: 0;
    transform: translateY(50px);
  }
  .promotion .promotion-background .promotion__background-results.active1 {
    opacity: 1;
    animation: bounce 0.5s ease-out forwards;
  }
  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
  }
  .promotion .promotion-background .promotion__background-results .promotion__background__results-1 img,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-2 img,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-3 img {
    margin-top: 2vw;
    width: 20vw;
    height: 20vw;
    transition: all 0.3s, opacity 0.3s ease-in-out;
    border: 0.4vw solid #b0d6e6;
    border-radius: 2vw;
  }
  .promotion .promotion-background .promotion__background-results .promotion__background__results-1 img:hover,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-2 img:hover,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-3 img:hover {
    border: 0.4vw solid #000000;
    transform: scale(1.3);
  }
}
@media (max-width: 768px) {
  .promotion {
    margin-top: 4vw;
  }
  .promotion .promotion-background {
    width: 100%;
    background-size: 5.8vw 3vw;
    background-repeat: repeat-x;
    height: 60vw;
  }
  .promotion .promotion-background .promotion__background-text {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
  }
  .promotion .promotion-background .promotion__background-text span {
    margin-top: 2vw;
    font-size: 5vw;
    font-family: "ponur", sans-serif;
  }
  .promotion .promotion-background .promotion__background-text P {
    width: 75%;
    margin-top: 1vw;
    font-size: 2.9vw;
    font-family: "ponur2", sans-serif;
  }
  .promotion .promotion-background .promotion__background-results {
    align-self: center;
    justify-self: center;
    display: flex;
    width: 80%;
    height: 18vw;
    justify-content: space-evenly;
    align-items: center;
    transition: transform 0.5s ease-out, opacity 0.5s;
    opacity: 0;
    transform: translateY(50px);
  }
  .promotion .promotion-background .promotion__background-results.active1 {
    opacity: 1;
    animation: bounce 0.5s ease-out forwards;
  }
  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
  }
  .promotion .promotion-background .promotion__background-results .promotion__background__results-1 img,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-2 img,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-3 img {
    margin-top: 2vw;
    width: 25vw;
    height: 25vw;
    transition: all 0.3s, opacity 0.3s ease-in-out;
    border: 0.4vw solid #b0d6e6;
    border-radius: 2vw;
  }
  .promotion .promotion-background .promotion__background-results .promotion__background__results-1 img:hover,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-2 img:hover,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-3 img:hover {
    border: 0.4vw solid #000000;
    transform: scale(1.3);
  }
}
@media (max-width: 480px) {
  .promotion {
    margin-top: 4vw;
  }
  .promotion .promotion-background {
    width: 100%;
    background-size: 5.8vw 3vw;
    background-repeat: repeat-x;
    height: 66vw;
  }
  .promotion .promotion-background .promotion__background-text {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    flex-direction: column;
  }
  .promotion .promotion-background .promotion__background-text span {
    margin-top: 2vw;
    font-size: 5vw;
    font-family: "ponur", sans-serif;
  }
  .promotion .promotion-background .promotion__background-text P {
    width: 75%;
    margin-top: 1vw;
    font-size: 2.9vw;
    font-family: "ponur2", sans-serif;
  }
  .promotion .promotion-background .promotion__background-results {
    align-self: center;
    justify-self: center;
    display: flex;
    width: 100%;
    height: 18vw;
    margin-top: -3vw;
    justify-content: space-evenly;
    align-items: center;
    transition: transform 0.5s ease-out, opacity 0.5s;
    opacity: 0;
    transform: translateY(50px);
  }
  .promotion .promotion-background .promotion__background-results.active1 {
    opacity: 1;
    animation: bounce 0.5s ease-out forwards;
  }
  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
  }
  .promotion .promotion-background .promotion__background-results .promotion__background__results-1 img,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-2 img,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-3 img {
    margin-top: 2vw;
    width: 28vw;
    height: 28vw;
    transition: all 0.3s, opacity 0.3s ease-in-out;
    border: 0.4vw solid #b0d6e6;
    border-radius: 2vw;
  }
  .promotion .promotion-background .promotion__background-results .promotion__background__results-1 img:hover,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-2 img:hover,
  .promotion .promotion-background .promotion__background-results .promotion__background__results-3 img:hover {
    border: 0.4vw solid #000000;
    transform: scale(1.3);
  }
}

/*# sourceMappingURL=promotion.css.map */