html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .left-col {
            background-color: #E5F1EA;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0; /* Menghapus margin pada kolom */
            flex-direction: column; /* Mengatur arah kolom untuk fleksibel di perangkat kecil */
        }
        .right-col {
            background-color: #FFFFFF !important;
            color: black;
            flex: 1; /* Memastikan kolom mengisi ruang */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* Mengatur arah kolom untuk fleksibel di perangkat kecil */
        }
        .row {
            display: flex;
            height: 100vh; /* Mengisi tinggi layar penuh */
            margin: 0; /* Menghilangkan margin */
        }
        img {
            max-width: 100%;
            height: auto;
        }
        .form-container {
            width: 100%;
            padding:10px;
            flex-direction: column; /* Mengatur elemen form-container secara vertikal */
        }

        .form-container img {
          max-width: 100px;
          margin-bottom: 20px;
          display: block; /* Tetap gunakan block untuk membuatnya elemen block-level */
          margin-left: 0; /* Mengatur margin kiri ke 0 untuk meratakan gambar ke kiri */
        }

        .form-container h1 {
            font-size: 32px;
            text-align: left;
            margin-bottom: 10px;
            color: #004029;
            font-family: Inter;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .form-container p {
            font-size: 16px;
            text-align: left;
            margin-bottom: 20px;
            color: #004029;
            font-family: Poppins;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 13.67px */
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            display: flex;
            color: #004029;
            font-family: Poppins;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .captcha-group {
            width:100%;
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }

        .captcha-group .form-control {
            flex: 1;
            width: 100%; /* Menentukan lebar 50% untuk membagi input secara merata */
            min-width: 0; /* Memastikan input tidak melebihi ukuran yang diizinkan */
        }

        .btn-masuk {
            width: 100%;
            margin-bottom: 15px;
            border-radius: 30px; /* Menggunakan hanya satu nilai border-radius */
            background: #004029; /* Mengubah background menjadi hijau */
            color: #fff; /* Opsional: Mengatur warna teks tombol menjadi putih agar kontras */
            display: flex;
            width: 100%;
            height: 55px;
            padding: 14px 20px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 18px; /* Ukuran font tombol */
            font-weight: bold; /* Membuat teks tombol menjadi bold */
            border: 1px solid #004029; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-masuk:hover {
            background-color: #fbb136; /* Background color on hover */
            color: #fff; /* Text color on hover */
            border: none; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-code {
            width: 100%;
            margin-bottom: 15px;
            border-radius: 30px; /* Menggunakan hanya satu nilai border-radius */
            background: #fff; /* Mengubah background menjadi hijau */
            color: #004029; /* Opsional: Mengatur warna teks tombol menjadi putih agar kontras */
            display: flex;
            width: 100%;
            height: 55px;
            padding: 14px 20px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 14px; /* Ukuran font tombol */
            font-weight: bold; /* Membuat teks tombol menjadi bold */
            border: 1px solid #004029; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-code:hover {
            border: 1px solid #fbb136; /* Border yang tipis dengan warna sama dengan teks */
        }

        .help-link {
            width: 100%;
            border-radius: 30px; /* Menggunakan hanya satu nilai border-radius */
            background: #fff; /* Mengubah background menjadi hijau */
            display: flex;
            width: 100%;
            height: 55px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 14px; /* Ukuran font tombol */
            font-weight: bold; /* Membuat teks tombol menjadi bold */
            border: none; /* Border yang tipis dengan warna sama dengan teks */
        }
        .logo{
          width: 54px;
          height: 62px;
        }
        .logoberanda{
          width: 450px;
          height: 256px;
        }
        .form-control{
          font-family: Poppins;
          display: flex;
          width: 100%;
          height: 60%;
          flex-direction: column;
          align-items: flex-start;
          gap: 4.557px;
        }
        /* Styling untuk placeholder */
        .form-control::placeholder {
            font-size: 14px; /* Ukuran font untuk placeholder */
            color: rgba(108, 117, 125, 0.6); /* Warna placeholder dengan opacity (pudar) */
            font-family: Poppins; /* Keluarga font untuk placeholder */
        }
        .link-whatsapp {
            color: #004029; /* Warna hijau WhatsApp */
            text-align: center;
            border-radius: 25px; /* Sudut yang melengkung */
            font-size: 16px; /* Ukuran font */
            font-weight: bold; /* Membuat teks bold */
            text-decoration: none; /* Menghapus garis bawah link */
        }
        .whatsapp-icon {
            width: 20px; /* Ukuran gambar */
            height: 20px; /* Ukuran gambar */
            margin-left: 8px; /* Spasi antara teks dan gambar */
            vertical-align: middle; /* Menyelaraskan gambar dengan teks */
        }

         @media (max-width: 768px) {
            .left-col {
            background-color: #E5F1EA;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0; /* Menghapus margin pada kolom */
            flex-direction: column; /* Mengatur arah kolom untuk fleksibel di perangkat kecil */
        }
        .right-col {
            background-color: #FFFFFF !important;
            color: black;
            flex: 1; /* Memastikan kolom mengisi ruang */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* Mengatur arah kolom untuk fleksibel di perangkat kecil */
        }
        .row {
            height: 100%;
            margin: 0; /* Menghapus margin pada kolom */
        }
        img {
            max-width: 100%;
            height: auto;
        }


        .form-container {
            width: 100%;
            padding:10px;
            max-width: 75%;
            flex-direction: column; /* Mengatur elemen form-container secara vertikal */
        }

        .form-container img {
          max-width: 100px;
          margin-bottom: 20px;
          display: block; /* Tetap gunakan block untuk membuatnya elemen block-level */
          margin-left: 0; /* Mengatur margin kiri ke 0 untuk meratakan gambar ke kiri */
        }

        .form-container h1 {
            font-size: 32px;
            text-align: left;
            margin-bottom: 10px;
            color: #004029;
            font-family: Inter;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .form-container p {
            font-size: 16px;
            text-align: left;
            margin-bottom: 20px;
            color: #004029;
            font-family: Poppins;
            font-style: normal;
            font-weight: 400;
            line-height: 150%; /* 13.67px */
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            display: flex;
            color: #004029;
            font-family: Poppins;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .captcha-group {
            width:100%;
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }

        .captcha-group .form-control {
            flex: 1;
            width: 100%; /* Menentukan lebar 50% untuk membagi input secara merata */
            min-width: 0; /* Memastikan input tidak melebihi ukuran yang diizinkan */
        }

        .btn-masuk {
            width: 100%;
            margin-bottom: 15px;
            border-radius: 30px; /* Menggunakan hanya satu nilai border-radius */
            background: #004029; /* Mengubah background menjadi hijau */
            color: #fff; /* Opsional: Mengatur warna teks tombol menjadi putih agar kontras */
            display: flex;
            width: 100%;
            height: 55px;
            padding: 14px 20px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 18px; /* Ukuran font tombol */
            font-weight: bold; /* Membuat teks tombol menjadi bold */
            border: 1px solid #004029; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-masuk:hover {
            background-color: #fbb136; /* Background color on hover */
            color: #fff; /* Text color on hover */
            border: none; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-code {
            width: 100%;
            margin-bottom: 15px;
            border-radius: 30px; /* Menggunakan hanya satu nilai border-radius */
            background: #fff; /* Mengubah background menjadi hijau */
            color: #004029; /* Opsional: Mengatur warna teks tombol menjadi putih agar kontras */
            display: flex;
            width: 100%;
            height: 55px;
            padding: 14px 20px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 14px; /* Ukuran font tombol */
            font-weight: bold; /* Membuat teks tombol menjadi bold */
            border: 1px solid #004029; /* Border yang tipis dengan warna sama dengan teks */
        }
        .btn-code:hover {
            border: 1px solid #fbb136; /* Border yang tipis dengan warna sama dengan teks */
        }

        .help-link {
            width: 100%;
            border-radius: 30px; /* Menggunakan hanya satu nilai border-radius */
            background: #fff; /* Mengubah background menjadi hijau */
            display: flex;
            width: 100%;
            height: 55px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            font-size: 14px; /* Ukuran font tombol */
            font-weight: bold; /* Membuat teks tombol menjadi bold */
            border: none; /* Border yang tipis dengan warna sama dengan teks */
        }
        .logo{
          width: 54px;
          height: 62px;
        }
        .logoberanda{
          width: 550px;
          height: 356px;
        }
        .form-control{
          font-family: Poppins;
          display: flex;
          width: 100%;
          height: 60%;
          flex-direction: column;
          align-items: flex-start;
          gap: 4.557px;
        }
        /* Styling untuk placeholder */
        .form-control::placeholder {
            font-size: 14px; /* Ukuran font untuk placeholder */
            color: rgba(108, 117, 125, 0.6); /* Warna placeholder dengan opacity (pudar) */
            font-family: Poppins; /* Keluarga font untuk placeholder */
        }
        .link-whatsapp {
            color: #004029; /* Warna hijau WhatsApp */
            text-align: center;
            border-radius: 25px; /* Sudut yang melengkung */
            font-size: 16px; /* Ukuran font */
            font-weight: bold; /* Membuat teks bold */
            text-decoration: none; /* Menghapus garis bawah link */
        }
        .whatsapp-icon {
            width: 20px; /* Ukuran gambar */
            height: 20px; /* Ukuran gambar */
            margin-left: 8px; /* Spasi antara teks dan gambar */
            vertical-align: middle; /* Menyelaraskan gambar dengan teks */
        }

          }


          /* Styling untuk modal */
        .modal-content {
            border-radius: 20px;
        }
        .modal-body {
            text-align: center;
        }
        .btn-join {
            background-color: #0088cc;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
        }
        .btn-join:hover {
            background-color: #006699;
        }


        /* Popup Styles */
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .popup-content {
            background-color: white;
            width: 80%;
            height: 80%;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Close Button */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        }