body {
      margin: 0;
      font-family: "Inter", system-ui, sans-serif;
  }

  .wl-footer {
      background: #1E1E2D;
      color: #cfd3ff;
      padding: 60px 24px 20px;
  }

  /* top area  */
  .wl-footer-top {
      max-width: 1200px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .wl-footer-social {
      display: flex;
      gap: 12px;
  }

  .wl-footer-social .social-meadia-icon {
      width: 36px;
      height: 36px;
      color: #ffffff;
      text-decoration: none;
      border-radius: 50%;
      border: 1px solid #2e335a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
  }

  .wl-divider {
      max-width: 1200px;
      height: 1px;
      background: #2a2f55;
      margin: 32px auto;
  }

  /* links gird  */
  .wl-footer-links {
      max-width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 40px;
  }

  .wl-col h4 {
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 14px;
      font-family: "Inter", Sans-serif;
  }

  .wl-footer .wl-footer-link {
      color: #84849A;
      font-family: "Inter", Sans-serif;
      text-decoration: none;
      font-size: 16px;
      display: block;
      transition: color 0.2s ease;
  }

  .wl-footer .wl-footer-link:hover {
      color: #FFFFFF;
      text-decoration: underline;
  }

  .wl-col-inner {
      display: grid;
      gap: 10px;
  }

  /* Copyright */

  .wl-footer-bottom {
      text-align: center;
      font-weight: 400;
      font-size: 16px;
      font-family: "Inter", Sans-serif;
      color: #FFFFFFA6;
  }

  @media (max-width: 1024px) {
      .wl-footer-links {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  @media (max-width: 640px) {
      .wl-footer-top {
          flex-direction: column;
          gap: 20px;
      }

      .wl-footer-links {
          grid-template-columns: repeat(2, 1fr);
          margin-left: 20px;
          gap: 24px;
      }
  }