body {
      background-color: #f8f9fa;
    }
    .register-wrapper {
      max-width: 1100px;
      width: 100%;
      gap: 2rem;
    }
    .register-image {
      flex: 1.3; /* image side a little larger */
      padding: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .register-image img {
      width: 100%;
      height: auto;
      max-height: 500px;
      object-fit: contain;
    }
    .register-card {
      flex: 1;
      max-width: 420px;
      border-radius: 1rem;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      background: #fff;
      padding: 2.5rem;
    }
    .register-card h3 {
      font-weight: bold;
      color: #0d6efd;
    }
    .btn-primary {
      background-color: #0d6efd;
      border: none;
      border-radius: .5rem;
    }

    /* Tablet (screens smaller than 992px) */
    @media (max-width: 991.98px) {
      .register-wrapper {
        flex-direction: column;
        align-items: center;
        max-width: 720px;
        margin: 1rem auto;
        padding: 1rem;
      }
      .register-image {
        width: 100%;
        max-width: 500px;
        margin-bottom: 1.5rem;
      }
      .register-image img {
        max-height: 300px;
      }
      .register-card {
        width: 100%;
        max-width: 480px;
        padding: 2rem;
      }
    }

    /* Mobile (screens smaller than 576px) */
    @media (max-width: 575.98px) {
      .register-wrapper {
        margin: 0.5rem;
        padding: 0;
      }
      .register-image {
        padding: 0.5rem;
        max-width: 100%;
      }
      .register-image img {
        max-height: 200px;
        object-fit: cover;
      }
      .register-card {
        width: 100%;
        padding: 1.5rem;
      }
      .register-card h3 {
        font-size: 1.4rem;
      }
      .btn-primary {
        font-size: 0.9rem;
        padding: 0.5rem;
      }
      .form-label {
        font-size: 0.9rem;
      }
      .input-group-text, .form-control {
        font-size: 0.9rem;
      }
    }