body {
      font-family: Arial, sans-serif;
      /* background: linear-gradient(135deg, #0a472e, #146c46); */
      background: #F8F8FF;
  background: url(images/banner-03.jpg);
  background-position: center center;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 1rem;
    }

    .register-container {
      background: #fff;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      width: 100%;
      max-width: 450px;
      display: flex;
      flex-direction: column;
    }

    .register-container h2 {
      text-align: center;
      margin-bottom: 1.5rem;
      color: #0a472e;
      font-size: clamp(1.4rem, 4vw, 1.8rem);
    }

    form {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .input-group {
      margin-bottom: 1.2rem;
      display: flex;
      flex-direction: column;
    }

    label {
      margin-bottom: 0.4rem;
      font-weight: bold;
      font-size: clamp(0.8rem, 2vw, 0.95rem);
      color: #444;
    }

    input[type="text"], 
    input[type="email"], 
    input[type="password"] {
      width: 100%;
      padding: 0.9rem;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: clamp(0.85rem, 2.5vw, 1rem);
      outline: none;
      transition: 0.2s;
    }

    input:focus {
      border-color: #0a472e;
      box-shadow: 0 0 6px rgba(10,71,46,0.3);
    }

    .btn {
      width: 100%;
      padding: 0.9rem;
      background: #0a472e;
      border: none;
      border-radius: 6px;
      color: #fff;
      font-size: clamp(0.9rem, 2.5vw, 1rem);
      cursor: pointer;
      transition: background 0.3s;
    }

    .btn:hover {
      background: #146c46;
    }

    p {
      text-align: center;
      margin-top: 1rem;
      font-size: clamp(0.8rem, 2vw, 0.9rem);
    }

    p a {
      color: #0a472e;
      text-decoration: none;
      font-weight: bold;
    }

    p a:hover {
      text-decoration: underline;
    }

    .home-link {
      display: block;
      text-align: center;
      margin-top: 1rem;
    }

    .home-link h4 {
      display: inline-block;
      background: #5f9ea0;
      color: #fff;
      padding: 0.6rem 1.5rem;
      border-radius: 8px;
      font-size: clamp(0.8rem, 2vw, 0.95rem);
      margin: 0;
      transition: background 0.3s;
    }

    .home-link h4:hover {
      background: #468b8b;
    }

    /* Responsiveness */
    @media (max-width: 480px) {
      .register-container {
        padding: 1.5rem;
      }
      .btn, input {
        padding: 0.75rem;
      }
    }

    @media (max-height: 500px) {
      body {
        align-items: flex-start;
        padding-top: 2rem;
      }
    }