body {
     margin: 0;
     padding: 0;
     overflow: hidden;
     /* Prevent body scroll */
     font-family: "Poppins", sans-serif;
 }

 .container-main {
     background-repeat: no-repeat;
     background-size: cover;
     height: 100vh;
     /* fixed height */
     width: 100%;
     background: linear-gradient(to top, rgba(104, 64, 240, 0.35) 0%, rgba(104, 63, 238, 0.0) 40%, #fff 100%)
 }

 /* Scrollable form container */
 .register-container {
     background: white;
     border-radius: 0px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     max-width: 550px;
     width: 100%;
     padding: 30px 40px;
     border-top: 4px solid #0066CC;
     height: max-content;
     /* very important */
     position: relative;
     z-index: 1;
 }

 .banner-container {
     width: 100%;
     max-width: 550px;
     margin: 0 auto 1rem;
     display: flex;
     justify-content: center;
 }

 .banner-container .banner-image {
     width: 100%;
     height: auto;
     max-height: 165px;
     object-fit: contain;
 }


 .logo-container {
     text-align: center;
     margin-bottom: 40px;
 }

 .header-logo {
     width: 178px;
 }

 .register-title {
     text-align: center;
     color: #333;
     font-size: 24px;
     font-weight: 300;
     margin-bottom: 25px;
     padding-bottom: 15px;
 }

 .language-selector {
     text-align: right;
     margin-bottom: 15px;
 }

 .language-selector select {
     border: none;
     padding: 6px 12px;
     border-radius: 4px;
     font-size: 13px;
     background: white;
     cursor: pointer;
 }

 .form-label {
     color: #363636;
     font-size: 13px;
     margin-bottom: 6px;
     font-weight: 300;
 }

 .form-control,
 .form-select {
     border: 1px solid #f0f0f0;
     background-color: #fff;
     border-radius: 0px;
     padding: 7px 12px;
     font-size: 14px;
     border-bottom: 1px solid #8a8d90;
 }

 .form-control:hover,
 .select2-container--default:hover,
 .form-select:hover {
     border-bottom: 1px solid #667eea;
 }

 .form-control:focus,
 .form-select:focus {
     border: 2px solid #667eea;
     box-shadow: 0 0 0 0.15rem rgba(102, 126, 234, 0.15);
 }

 .select2-container .select2-selection--single {
     cursor: pointer;
     height: 40px !important;
 }

 .select2-container--default .select2-selection--single {
     background-color: #fff;
     border: 1px solid #f0f0f0;
     border-bottom: 1px solid #8a8d90;
     border-radius: 0px;
 }

 .phone-input-group {
     display: flex;
     gap: 8px;
 }

 .country-code {
     min-width: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #f0f0f0;
     /* border-radius: 4px; */
     background: #ffffff;
     padding: 8px 8px;
 }

 .flag-icon {
     width: 22px;
     height: 16px;
     margin-right: 6px;
     border-radius: 2px;
 }

 .password-toggle {
     position: absolute;
     padding: 12px;
     right: 0px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     color: #999;
     border-left: 1px solid #f0f0f0;
 }

 .password-toggle:hover {
     color: #667eea;
 }

 .password-wrapper {
     position: relative;
 }

 .agreement-section {
     margin: 18px 0;
     display: flex;
     justify-content: center;
 }

 /* Make country dropdown text black */
 #countrySelect {
     color: black;
     font-size: 14px;
 }

 /* Make phone code text black */
 #dialCode {
     color: black;
     font-weight: 500;
 }

 .form-check {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .captcha-box {
     border: 1px solid #e0e0e0;
     border-radius: 4px;
     padding: 12px 15px;
     background: #fafafa;
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .btn-register {
     background: #6840f0;
     color: white;
     border: none;
     padding: 12px;
     border-radius: 4px;
     font-size: 15px;
     font-weight: 600;
     width: 100%;
     cursor: pointer;
     transition: all 0.3s;
     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }

 .btn-register:hover {
     background: #5568d3;
     transform: translateY(-1px);
 }

 .signin-link {
     position: absolute;
     color: #72767B;
     font-size: 14px;
     background-color: #6840f01f;
     left: 0px;
     bottom: 0px;
     width: 100%;
     padding: 14px 0px;
 }

 .form-check-label {
     font-size: 13px;
     color: #363636;
 }

 .cloud-link {
     font-size: 10px;
     color: #555;
     text-decoration: underline;
     text-align: end;
 }

 .error-msg {
     color: red;
 }


 /* Tablets (≤ 768px) */
 @media (max-width: 768px) {
     .banner-container {
         max-width: 100%;
         padding: 0 10px;
     }

     .banner-container .banner-image {
         max-height: 140px;
     }
 }

 @media (max-width: 576px) {
     .register-container {
         padding: 25px 20px;
         border-top: 0px;
         border-radius: 0px;
     }

     .register-title {
         font-size: 22px;
     }

     .container-fluid {
         padding-left: 0px !important;
         padding-right: 0px !important;
     }

     .logo-container {
         width: 100%;
         background-color: #F0F0F0;
         padding: 20px 10px;
         margin-bottom: 0px;
         display: flex;
         justify-content: flex-start;
     }

     .header-logo {
         width: 178px;
     }

     .signin-link {
         background-color: transparent;
     }

     .banner-container {
         padding: 0 10px;
         max-width: 100%;
     }

     .banner-container .banner-image {
         max-height: 120px;
     }
 }