.banner-sec {
  position: relative;
  padding-top: 48px;
  height: 634px;
}

.banner-sec > .container,
.banner-sec > .container > .row {
  height: 100%;
}
.flag-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.flag-container p {
  line-height: 20px;
  text-transform: uppercase;
}
.banner-img {
  position: absolute;
  right: 0;
  bottom: 0;
}
.banner-img {
  max-width: 700px;
}
.flag-image {
  position: relative;
  -webkit-perspective: 1000;
  -webkit-transform-style: preserve3d;
  -webkit-transform-origin: 0 250px;
  -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);
  -webkit-animation-name: wave;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  perspective: 1000;
  transform-style: preserve3d;
  transform-origin: 0 250px;
  transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);
  animation-name: wave;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.flag-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(
    linear,
    0 -25%,
    100% top,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(20%, rgba(255, 255, 255, 0)),
    color-stop(30%, rgba(0, 0, 0, 0.08)),
    color-stop(40%, rgba(255, 255, 255, 0.6)),
    color-stop(60%, rgba(255, 255, 255, 0)),
    color-stop(65%, rgba(255, 255, 255, 0.4)),
    color-stop(80%, rgba(0, 0, 0, 0.08)),
    color-stop(100%, rgba(255, 255, 255, 0))
  );
  background-size: 200%;
  -webkit-animation-name: air;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
  -webkit-animation-iteration-count: infinite;
  animation-name: air;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
  animation-iteration-count: infinite;
}
@-webkit-keyframes wave {
  0% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);
  }
  20% {
    box-shadow: 4px 5px 15px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);
  }
  40% {
    box-shadow: 4px 5px 20px 0 rgba(0, 0, 0, 0.4);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);
  }
  60% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);
  }
  80% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(16deg);
  }
  100% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);
  }
}
@keyframes wave {
  0% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);
  }
  20% {
    box-shadow: 4px 5px 15px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);
  }
  40% {
    box-shadow: 4px 5px 20px 0 rgba(0, 0, 0, 0.4);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(-22deg);
  }
  60% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(0deg);
  }
  80% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.3);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(16deg);
  }
  100% {
    box-shadow: 4px 5px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transform: translate3d(0, 0, 0) rotateZ(0deg) rotateY(22deg);
  }
}
@-webkit-keyframes air {
  0% {
    background-position: -200% 0px;
  }
  30% {
    background-position: -60% 5px;
  }
  70% {
    background-position: 70% -5px;
  }
  100% {
    background-position: 200% 0px;
  }
}
@keyframes air {
  0% {
    background-position: -200% 0px;
  }
  30% {
    background-position: -60% 5px;
  }
  70% {
    background-position: 70% -5px;
  }
  100% {
    background-position: 200% 0px;
  }
}
/* Story Section */
.story-box {
  display: flex;
  align-items: stretch;
}
.testimonial-block {
  max-width: 710px;
  border-radius: 20px 20px 120px 20px;
  padding: 40px;
}
.testimonial-swiper .content {
  margin-bottom: 80px;
}
.testimonial-swiper .content p {
  color: #fff;
}
.title-block {
  padding: 0 50px;
}
.testimonial-swiper .swiper-slide-next {
  opacity: 0 !important;
}
/* Download app */
.download-app h2 {
  margin-bottom: 12px;
}
.download-app h5 {
  margin-bottom: 40px;
}
.download-app .button-row {
  gap: 16px;
}

/* -----------------------------------------
    Media 1399px 
--------------------------------------------*/
@media (max-width: 1399px) {
  .banner-img {
    max-width: 640px;
  }
}

/* -----------------------------------------
    Media 1199px 
--------------------------------------------*/
@media (max-width: 1199px) {
  .banner-img {
    max-width: 500px;
  }
  .banner-sec {
    height: 530px;
  }
  .resource-box .solid-btn.only-arrow {
    opacity: 1;
    visibility: visible;
  }
  .testimonial-block {
    max-width: 610px;
    padding: 30px;
  }
}
/* -----------------------------------------
    Media 991px 
--------------------------------------------*/
@media (max-width: 991px) {
  .banner-sec {
    height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .testimonial-block {
    max-width: 480px;
    padding: 20px;
  }
  .testimonial-swiper .content {
    margin-bottom: 40px;
  }
  .title-block {
    padding: 0 20px;
  }
}
/* -----------------------------------------
    Media 767px 
--------------------------------------------*/
@media (max-width: 767px) {
  .story-box {
    flex-direction: column;
  }
  .testimonial-block {
    order: 2;
    max-width: 100%;
  }
  .title-block {
    order: 1;
    padding: 20px;
  }
  .download-app h5 {
    margin-bottom: 30px;
  }
}