*
{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'NPILaleh';
    src: url('../fonts/NPILaleh.ttf');
  }

@font-face {
    font-family: 'morabba';
    src: url('../fonts/Morabba-Regular.ttf');
}

.morabba{
    font-family: 'morabba',  sans-serif;
}

.NPILaleh{
    font-family: 'NPILaleh',  sans-serif;
}



body {
      margin: 0;
      font-family: 'morabba', 'NPILaleh', sans-serif;
      background-color: #354a9e;
      background-size: cover;
      color: white;
      direction: rtl;
      text-align: center;
    }

    .waves {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 3rem 1rem 1rem;
      gap: 10px;
    }

    .wave {
      width: 80px;
      height: auto;
      transition: transform 0.4s ease, filter 0.3s ease;
    }

    .wave:hover {
      transform: scale(1.3) translateY(-5px);
      filter: brightness(1.5);
    }

    .logo {
      margin-top: 1rem;
      font-size: 2.5rem;
      font-weight: bold;
      max-width: 300px;
      margin: 20vh auto 0 !important;
    }

    .sub-logo {
      font-size: 1rem;
      margin-top: 0.3rem;
      opacity: 0.8;
    }

    .buttons {
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .btn {
      font-family: 'morabba',  sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background-color: white;
      color: #354a9e;
      padding: 1rem 2rem;
      border: none;
      border-radius: 40px;
      font-size: 1.1rem;
      width: 260px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    .btn:hover {
      background-color: #00ffe6;
    }

    .btn i {
      font-size: 1.2rem;
    }