@import url("https://use.typekit.net/wua0qlm.css");

  /* Light */
  @font-face {
      font-family: 'SF Pro Display';
      src: url('../font/SF-Pro-Display-Light.otf') format('opentype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
  }

  /* Regular */
  @font-face {
      font-family: 'SF Pro Display';
      src: url('../font/SF-Pro-Display-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
  }

  /* Medium */
  @font-face {
      font-family: 'SF Pro Display';
      src: url('../font/SF-Pro-Display-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
  }

  /* Bold */
  @font-face {
      font-family: 'SF Pro Display';
      src: url('../font/SF-Pro-Display-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'SF Pro', sans-serif;
      font-weight: 400;
      font-style: normal;
      min-height: 100vh;
      background: #fff;
  }

  /* Header Section */
  .overlay {
      background: #f0f0f0;
  }

  .header {
      background: linear-gradient(180deg, #2d4a7c 0%, #4a7bb5 100%);
      color: #fff;
      padding: 30px 0 60px;
      border-bottom-left-radius: 50% 80%;
      border-bottom-right-radius: 50% 80%;
      text-align: center;
  }

  .header .sub-text {
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 0.5px;
  }

  .header .main-text {
      font-size: 56px;
      font-weight: 700;
      margin-top: 8px;
      letter-spacing: 3px;
  }

  /* Main Section */
  .container {
      max-width: 1080px;
      height: 1824px;
      width: 100%;
      margin: 0 auto;
      padding: 0;
      background: #fff;
  }

  .content-wrapper {
      text-align: center;
      background: #fff;
  }

  .image-container {
      position: relative;
      width: 100%;
      background: #f0f0f0;
      padding: 30px 0 0 0;
      margin: 0;
  }

  .video-container {
      position: relative;
      width: 100%;
      margin: 0 auto;
  }

  .video-screen {
      width: 820px;
      height: 820px;
      max-height: 100vh;
      object-fit: cover;
      border-radius: 7%;
      cursor: pointer;
      border: 4px solid #fff;
      filter: drop-shadow(5px 5px 15px #e6e3e3);
      margin-bottom: -30px;
  }

  .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      transition: opacity 0.3s ease;
      z-index: 2;
  }

  img#playBtn {
      object-fit: contain;
      height: unset;
      width: unset;
      background: none;
      border: none;
      filter: none;
  }

  .qr-section {
      text-align: center;
      padding: 60px 40px 60px;
      background: #fff;
  }

  .qr-text {
      font-size: 45px;
      color: #3e426e;
      margin-bottom: 50px;
      font-weight: 400;
  }

  .qr-text2 {
      font-size: 32px;
      color: #3e426e;
      margin-bottom: 50px;
      font-weight: 400;
  }

  .qr-code {
      width: 320px;
      height: 320px;
      margin: 0 auto;
      background: #fff;
  }

  .qr-code img {
      width: 100%;
      height: 100%;
  }

  /* Footer Section Design */
  hr {
      height: 5px;
      background: #364A7D;
  }

  .div-log img {
      height: 65px !important;
      width: 150px !important;
      margin-left: -5px;
  }

  .div-log {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      width: 345px;
  }

  .div-log p {
      font-size: 19px;
      color: #2d4a7c;
      font-weight: 500;
  }

  .double-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 0;
      margin: 20px 0;
  }

  .double-logo img {
      width: 350px;
  }

  .double-logo.mobile {
      display: none;
  }

  /* Responsive Design - Tablet */
  @media (max-height: 1800px) {
      .container {
          height: 100%;
      }

  }

  @media (max-width: 992px) {
      .video-screen {
          aspect-ratio: 1;
          width: 100%;
          height: 100%;
      }

      .image-container {
          padding: 5% 5% 0 5%;
      }


  }

  @media (max-width: 768px) {
      .header {
          padding: 40px 20px 50px;
      }

      .image-container img {
          width: 100%;
          height: 400px;
      }

      .header .sub-text {
          font-size: 24px;
      }

      .header .main-text {
          font-size: 42px;
          letter-spacing: 2px;
      }

      .qr-section {
          padding: 50px 30px;
      }

      .qr-text {
          font-size: 24px;
          margin-bottom: 40px;
      }

      .qr-code {
          width: 280px;
          height: 280px;
      }

      .double-logo {
          display: flex;
          flex-direction: column;
          gap: 5px;
      }

      .double-logo.desktop {
          display: none;
      }

      .double-logo.mobile {
          display: flex;
      }

  }

  /* Responsive Design - Mobile */
  @media (max-width: 480px) {
      .header {
          padding: 30px 15px 40px;
      }


      .image-container img {
          width: 100%;
          height: 100%;
      }

      .header .sub-text {
          font-size: 18px;
      }

      .header .main-text {
          font-size: 32px;
          letter-spacing: 1px;
      }

      .image-container img {
          border-radius: 25px;
      }

      .qr-section {
          padding: 40px 20px;
      }

      .qr-text {
          font-size: 18px;
          margin-bottom: 30px;
      }

      .qr-code {
          width: 200px;
          height: 200px;
      }

      .footer-divider {
          margin: 30px 0 15px;
      }

      .footer-logos {
          flex-direction: column;
          gap: 15px;
          padding: 0 20px 25px;
      }

      .footer-left,
      .footer-center,
      .footer-right {
          text-align: center;
      }

      .footer-left .firstteam-logo {
          height: 40px;
      }

      .footer-left .network-text {
          font-size: 11px;
          margin-top: 3px;
      }

      .footer-center .powered-text {
          font-size: 10px;
      }

      .footer-right img {
          height: 32px;
      }
  }

  @media(max-width: 400px) {
      .div-log {
          justify-content: center;
          width: 100%;
      }

      .div-log p {
          font-size: 12px;
      }

      .div-log img {
          width: 120px !important;
          height: 100% !important;
      }
  }

  /* Responsive Design  Mobile */
  @media (max-width: 360px) {
      .header .sub-text {
          font-size: 16px;
      }

      .header .main-text {
          font-size: 28px;
      }

      .qr-text {
          font-size: 16px;
      }

      .qr-code {
          width: 180px;
          height: 180px;
      }


      .double-logo img {
          width: 250px;
      }
  }