body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #111;
      color: #ddd;
      line-height: 1.6;
    }

    /* Header */
    header {
      background: #28a06d; /* green bar */
      color: white;
      padding: 25px 5%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
    }

    /* Logo styling */
    header .logo {
      display: flex;
      align-items: center;
      font-size: 2rem;
      font-weight: bold;
    }

    header .logo span {
      margin-left: 8px;
    }

    /* Navigation buttons */
    .nav-buttons {
      display: flex;
      gap: 15px;
    }

    .nav-buttons a {
      padding: 12px 25px;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      font-size: 1rem;
      transition: 0.3s;
    }

    .nav-buttons .login {
      background: white;
      color: #28a06d;
    }

    .nav-buttons .signup {
      background: #f9a825;
      color: #111;
    }

    .nav-buttons a:hover {
      opacity: 0.85;
    }

    /* ---------- Responsive for Mobile ---------- */
    @media (max-width: 768px) {
      header {
        flex-direction: column;  /* Stack vertically */
        text-align: center;      /* Center items horizontally */
        gap: 20px;
        padding: 20px;
      }

      .nav-buttons {
        flex-direction: column;  /* Buttons stacked */
        width: 100%;
        align-items: center;
      }

      .nav-buttons a {
        width: 80%;  /* Buttons take most of the width */
        text-align: center;
      }

      .logo img {
        max-width: 150px; /* Adjust logo size for small screens */
      }
    }

    /* Hero Section */
    .hero {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 50px 5%;
      background: #000;
    }

    .hero img {
      max-width: 100%;
      border-radius: 10px;
    }

    .top section {
      padding: 50px 20%;
      border-top: 1px solid #444;
    }

    /* Content Sections */
    section {
      padding: 50px 20%;
      border-top: 0px solid #444;
    }

    h1 {
      color: white;
      text-align: center;
    }

    p {
      font-size: 1.3rem;
    }

    h2 {
      color: white;
      text-align: center;
      margin-bottom: 20px;
      font-size: 1.8rem;
    }

    li{
      font-size: 1.2rem;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    ul li::before {
      content: "✔ ";
      color: #28a06d;
      font-weight: bold;
    }

    /* Footer */
    footer {
      background: #0d0d0d;
      padding: 50px 10%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      font-size: 0.95rem;
    }

    footer h4 {
      color: white;
      margin-bottom: 10px;
    }

    footer ul {
      list-style: none;
      padding: 0;
    }

    footer ul li {
      margin-bottom: 8px;
    }

    footer ul li a {
      color: #ccc;
      text-decoration: none;
      transition: 0.3s;
    }

    footer ul li a:hover {
      color: #28a06d;
    }



    .payments {
      max-height: 30px;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      max-width: 300px;  /* adjust as needed */
    }

    .payments img {
      width: 60px;   /* fixed smaller size */
      height: auto;  /* keeps proportions */
      object-fit: contain;

      flex: 1 1 calc(33% - 15px); /* 4 per row */
      max-width: 80px; /* optional, keeps images tidy */
      height: auto;
    }

    .bottom-bar {
      text-align: center;
      padding: 18px;
      background: #000;
      font-size: 0.85rem;
      border-top: 1px solid #222;
    }