html {
      overflow-x: hidden;
      font-family: sans-serif;
  }

  .content-banner {
      top: 0;
      max-width: 820px;
      padding-left: 120px;
      padding-top: 80px;
  }

  .btn-banner {
      color: #FFF;
      border: 1px #FFF solid;
      text-decoration: none;
      font-size: 25px;
      transition: font-size 0.8s, color 0.8s, background-color 0.8s;
  }

  .btn-banner:hover {
      font-size: 26px;
      color: #303962;
      background-color: #FFF;
  }

  .section-components {
      height: 290px;
  }

  p {
      color: #5E5E5E;
      font: 16px;
      font-weight: 400;
  }

  h1 {
      color: #FFF;
      font-size: clamp(20px, 4vw, 44px);
      font-weight: 700;
  }

  h2 {
      color: #303962;
      font-size: 30px;
      font-weight: 700;
  }

  input {
      font-size: 20px;
      border: 1px solid #303962;
      height: 40px;
      padding-left: 8px;
  }

  .content-our-components {
      padding-left: 100px;
  }

  input::placeholder {
      color: #303962;
      font-size: 10px;
  }

  .swiper-button-next,
  .swiper-button-prev {
      top: var(--swiper-navigation-top-offset, 90%) !important;
  }

  .why-choose-mobile {
      display: none;
  }

  .col-footer-right {
      padding-left: 170px;
  }

  .padding-text-car {
      max-width: 400px;
  }

  @media (max-width: 1408px) {
      .col-footer-right {
          padding-left: 90px;
      }
  }

  @media (max-width: 1355px) {
      .content-banner {
          max-width: 585px;
      }

      .h2-banner {
          font-size: 20px;
      }

      .btn-banner {
          font-size: 16px;
      }

      .padding-text-car {
          max-width: 300px;
      }
  }

  @media (max-width: 1128px) {
      .content-banner {
          padding-left: 30px;
          padding-top: 30px;
      }

      .h2-banner {
          font-size: 20px;
      }

      .btn-banner {
          font-size: 16px;
      }
  }

  @media (max-width: 1005px) {
      .content-banner {
          max-width: 459px !important;
      }

      .cards-components {
          bottom: 72px;
      }

      .content-our-components {
          padding-left: 20px;
      }

      .col-footer-right {
          padding-left: 0px;
      }

      .why-choose-desk {
          display: none !important;
      }

      .why-choose-mobile {
          display: block !important;
      }
  }

  @media (max-width: 638px) {
      .col-none-sm {
          display: none !important;
      }

      .hr-gray {
          display: block !important;
      }

      .m-t-mb {
          margin-top: 40px !important;
      }

      .cards-components {
          bottom: 0px !important;
      }

      .logo-mb {
          width: 40px;
          margin-bottom: 10px !important;
      }

      .btn-banner {
          font-size: 10px !important;
          padding-top: 2px !important;
          padding-bottom: 2px !important;
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      h1 {
          font-size: 15px !important;
      }

      .text-mb-center {
          text-align: center !important;
      }

      .content-banner {
          padding-left: 20px !important;
          max-width: 285px !important;
          padding-top: 13px !important;
      }

      .h2-banner {
          margin-bottom: 6px !important;
          font-size: 11px !important;
          max-width: 180px !important;
      }

      .check-text {
          margin-top: 10px !important;
      }

      .section-components {
          height: 1188px !important;
      }

      .content-banner p {
          font-size: 9px !important;
      }

      .padding-text-car {
          padding-left: 20px !important;
      }

      .input::placeholder {
          font-size: 12px !important;
      }

      .content-our-components {
          padding-left: 13px;
      }

      .section-align-mob {
          left: 13px !important;
          position: relative !important;
      }
  }