.make-a-game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 30px 50px;
  padding-bottom: 0;
}

.strategy {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  column-gap: 20px;

  margin-top: 100px;
}

.content {
  width: 50%;
  align-self: center;
}

.content > h1 {
  font-size: 32px;
}

.content > h1 > span {
  display: block;
  font-weight: bolder;
  font-size: 36px;
}

.content > p {
  font-size: 14px;
  width: 85%;
}

.media {
  width: 50%;
}

.background {
  background-image: url("../../images/make-a-game/about-creative.jpg");
  width: 100%;
  height: 400px;
  background-position: center;
  background-size: cover;
  position: relative;
}

.why-choose-us {
  width: 100%;
  padding: 15px 0px;
  padding-bottom: 20px;
  border-radius: 10px;
  margin-top: 50px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: linear-gradient(
    90deg,
    rgba(252, 210, 29, 1),
    rgba(253, 29, 29, 1),
    rgba(238, 174, 202, 1),
    rgba(148, 187, 233, 1)
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.why-choose-us > h2 {
  color: #fff;
  font-weight: bold;
  font-size: 30px;
}

.why-choose-us > h2 > span {
  color: #000;
}

.reasons {
  display: flex;
  width: 100%;
  justify-content: space-around;
  color: #fff;
  margin-top: 20px;
}

.reason {
  display: flex;
  flex-direction: column;
}

.count {
  text-align: center;
  font-size: 50px;
  font-weight: bold;
}

.choose-title {
  font-size: 15px;
  color: #000;
  font-weight: bold;
}

.hire-us-for {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 20px;
  row-gap: 50px;
  margin-top: 100px;
}

.hire-card {
  padding: 5px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-media {
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}

.card-title {
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  text-decoration: underline;

  padding: 10px;
  text-align: center;
}

.card-title > span {
  display: block;
  font-size: 12px;
  text-decoration: none;
  margin-top: 20px;
  margin-bottom: 20px;
}

.card-description {
  color: #fff;
  padding: 10px;
  font-size: 16px;
}

.media-1 {
  background-image: url("../../images/hire-for/web.jpg");
}

.media-2 {
  background-image: url("../../images/hire-for/mobile.jpg");
}

.media-3 {
  background-image: url("../../images/hire-for/uiux.jpg");
}

.media-4 {
  background-image: url("../../images/hire-for/3d.jpg");
}

.media-5 {
  background-image: url("../../images/hire-for/web3.jpg");
}

.media-6 {
  background-image: url("../../images/hire-for/cant-find.jpg");
}

.card-1 {
  background-color: #f4d03f;
  background-image: linear-gradient(132deg, #f4d03f 0%, #16a085 100%);
}

.card-2 {
  background-color: #ffe53b;
  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
}

.card-3 {
  background-image: linear-gradient(0deg, #08aeea 0%, #2af598 100%);
}

.card-4 {
  background-image: linear-gradient(
    90deg,
    #ff9a8b 0%,
    #ff6a88 55%,
    #ff99ac 100%
  );
}

.card-5 {
  background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
}

.card-6 {
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
}

/* if you'r using swiper than comment these following two selectors */
.bg-video {
  height: 80%;
  width: 100vw;
  opacity: 0.8;
}

.bg-video__content {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* if you'r using swiper than comment these above two selectors */

.swiper {
  width: 100%;
  height: 500px;
  /* margin-top: -30px; */
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide video {
  object-fit: cover;
}
@media (max-width: 1000px) {
  .strategy,
  .era {
    flex-direction: column;
    align-items: center;
  }

  .make-a-game {
    padding: 10px;
  }

  .content,
  .media {
    width: 90vw;
  }

  .content > p {
    width: 100%;
  }

  .venture {
    padding: 0 20px;
  }

  .chess-img {
    margin-left: 0;
  }

  .ml-4 {
    margin-left: 0 !important;
  }
}

@media (max-width: 900px) {
  .hire-us-for {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 750px) {
  .why-choose-us > h2 {
    font-size: 25px;
    text-align: center;
  }

  .count {
    font-size: 30px;
  }

  .choose-title {
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .hire-us-for {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .content {
    text-align: center;
  }
}

@media (max-width: 550px) {
  .reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    row-gap: 10px;
  }
}

@media (max-width: 500px) {
  .games {
    left: 36%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}