@media (min-width: 64em) {
  .logo-hero-container {
    width: 100%;
  }

  .logo-txt-hero {
    width: 23.2rem;
    margin-left: 5.6rem;
  }

  .logo-symbol-hero {
    width: 65%;
    top: -20%;
    left: -5%;
  }
  
.video-bg-desktop{
    visibility: visible;
    opacity: 1;
    display: block;
}

.img-bg-mobile{
    visibility: hidden;
    opacity: 0;
    display: none;
}

  .hero-txt-container {
    padding-left: 53.6rem;
    /* margin: 0 auto; */
    /* width: 40rem; */
  }

  .hero-heading-container {
    padding-bottom: 2.4rem;
  }

  .hero-content {
    font-size: 1.6rem;
  }

  .button-container {
    /* padding-left: 4rem; */
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2.4rem;
    margin: 0 auto;
  }

  .btn {
    width: 35.2rem;
    height: 5.6rem;
    font-size: 2rem;
  }

  /*********** OurService **********/

  .ourService-container {
    flex-direction: row;
    gap: 2rem;
  }

  .service-container {
    height: 44.4rem;
  }

  .service-intro-body {
    width: 80rem;
  }

  .service-outtro-body {
    width: 88rem;
  }
  .service-detail {
    height: 18.8rem;
  }

  .ourService-container {
    padding: 0 2rem 4rem 2rem;
  }

  .client-img {
    height: calc(
      50.5rem + (72 - 50.5) * ((100vw - 102.4rem) / (143.9 - 102.4))
    );
  }
}

@media (min-width: 90em) {
  .hero-container {
    max-width: 144rem;
    margin: 0 auto;
  }

  .logo-hero-container {
    padding-bottom: 4rem;
  }

  .logo-txt-hero {
    width: 28rem;
  }

  .logo-symbol-hero {
    width: 60%;
    top: -25%;
    left: -10%;
  }

  .hero-txt-container {
    padding-left: 76rem;
    margin: 0;
  }

  .hero-heading-container {
    padding-bottom: 4rem;
  }

  .hero-content {
    font-size: 2rem;
    max-width: 52rem;
    line-height: 3.2rem;
    /* padding-right: 18.8rem; */
  }

  .button-container {
    /* padding-left: 16rem; */
    padding-top: 4rem;
    padding-bottom: 4.8rem;
    gap: 5.6rem;
  }

  .btn {
    width: 48rem;
    height: 6.4rem;
    font-size: 2.4rem;
  }

  .btn--frame {
    border: 2px solid #fff;
  }

  /*********** OurService **********/
  .services-section {
    max-width: 144rem;
    padding: 0 14.4rem;
    margin: 0 auto;
  }

  .secondary-heading {
    padding: 4rem 0;
  }
  .ourService-container {
    flex-direction: row;
    gap: 4.8rem;
    padding: 0 0 6.4rem 0;
  }

  .service-intro-heading {
    font-size: 2.4rem;
    padding-bottom: 3.2rem;
  }

  .ourService-intro-container,
  .service-outtro-container {
    max-width: 114.8rem;
    margin: 0 auto;
    padding: 0 0 6.4rem 0;
  }

  .service-outtro-body {
    padding: 0;
  }

  .service-detail {
    height: 16.8rem;
  }

  /*********** Client **********/

  .clients-section {
    max-width: 144rem;
    padding: 0 14.4rem 11.2rem 14.4rem;
    margin: 0 auto;
  }

  .clients-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.6rem;
    row-gap: 3.6rem;
    padding: 0;
    margin: 0 auto;
  }

  .client {
    width: 100%;
    height: 70.4rem;
  }

  .client-txt-container {
    padding-bottom: 3.2rem;
  }

  .client-link {
    font-size: 3.6rem;
    padding: 0.8rem 2.4rem;
    width: fit-content;
  }

  .client-checklist {
    padding: 0.8rem 1.8rem;
  }

  .check-list {
    font-size: 2.4rem;
  }

  .check-icon {
    width: 2.4rem;
    height: 2.4rem;
  }

  .client-img {
    height: 70.4rem;
  }
}