* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {

     font-family: Poppins, sans-serif;
     background: #f5f7f8;
     color: #333;
 }

 /*==============================
    HEADER
===============================*/

 .portal-header {

 

     padding: 18px 25px;
     box-sizing: border-box;

 }

 .portal-header-wrapper {

     max-width: 1200px;
     margin: auto;

     display: flex;
     align-items: center;
     justify-content: center;
     gap: 25px;

 }

 .portal-logo {

     flex: 0 0 90px;

 }

 .portal-logo img {

     width: 90px;
     height: 90px;
     object-fit: contain;
     display: block;

 }

 .portal-title {

     flex: 1;

 }

 .portal-title h1 {

     margin: 0;
     padding: 0;

     color: #fff;

     font-size: 20px;
     font-weight: 500;

     line-height: 1.25;

 }

 .portal-title p {



     color: #ececec;

     font-size: 15px;

     font-style: italic;

     line-height: 1.6;

 }

 /*==============================
    Responsive
===============================*/

 @media(max-width:768px) {

     .portal-header {

         padding: 20px 15px;

     }

     .portal-header-wrapper {

         flex-direction: column;
         text-align: center;
         gap: 15px;

     }

     .portal-logo {

         flex: unset;

     }

     .portal-logo img {

         width: 80px;
         height: 80px;

     }

     .portal-title h1 {

         font-size: 22px;

     }

     .portal-title p {

         font-size: 13px;

     }

 }

 .login-card-container {
     background: white;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
     border-top: 5px solid var(--theme-1-maroon);
 }

 .login-card {

     width: 100%;
     max-width: 480px;

     /*  margin: auto; */

     background: #ffffff;



     padding: 35px;

     /*     box-shadow: 0 10px 30px rgba(0, 0, 0, .08); */

     /*  border-top: 5px solid var(--theme-1-maroon); */
     margin-bottom: 20px;

 }

 .login-header {

     display: flex;

     align-items: center;

     gap: 18px;

     margin-bottom: 30px;

 }

 .login-header i {

     width: 65px;

     height: 65px;

     display: flex;

     align-items: center;

     justify-content: center;

     border-radius: 50%;

     background: var(--theme-1-maroon);

     color: #fff;

     font-size: 24px;
     display: none;

 }

 .login-header h2 {
     font-weight: 500;
     margin: 0;

     color: var(--theme-1-maroon);

     font-size: 24px;

 }

 .login-header p {

     margin-top: 6px;

     color: #666;

     font-size: 14px;

 }

 .form-group {

     margin-bottom: 5px;

 }

 .form-group label {

     display: block;

     margin-bottom: 8px;

     font-weight: 600;

 }

 .form-group label span {

     color: #d10000;

 }

 .form-group input {

     width: 100%;

     padding: 13px 15px;

     border: 1px solid #d8d8d8;

     border-radius: 8px;

     font-size: 15px;

     transition: .3s;

 }

 .form-group input:focus {

     outline: none;

     border-color: var(--theme-1-maroon);

     box-shadow: 0 0 0 3px rgba(153, 0, 0, .12);

 }

 .form-group small {

     display: block;

     margin-top: 7px;

     color: #666;

     font-size: 13px;

 }

 .form-group small i {

     color: var(--theme-1-maroon);

     margin-right: 4px;

 }

 .password-box {

     position: relative;

 }

 .password-box input {

     padding-right: 45px;

 }

 .toggle-password {

     position: absolute;

     right: 15px;

     top: 50%;

     transform: translateY(-50%);

     cursor: pointer;

     color: #777;

 }

 .login-options {

     display: flex;

     justify-content: space-between;

     align-items: center;

     margin: 25px 0;

     font-size: 14px;

     flex-wrap: wrap;

     gap: 10px;

 }

 .login-options a {

     color: var(--theme-1-maroon);

     text-decoration: none;

 }

 .login-options a:hover {

     text-decoration: underline;

 }

 .login-btn {

     width: 100%;

     padding: 14px;

     border: none;

     border-radius: 8px;

     background: var(--theme-1-maroon);

     color: #fff;

     font-size: 16px;

     font-weight: 600;

     cursor: pointer;

     transition: .3s;

 }

 .login-btn:hover {

     background: #7d0000;

 }

 .terms-label {

     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 15px;
     line-height: 1.6;

 }

 .terms-label input {

     margin-top: 4px;

 }

 .terms-label a {

     color: var(--theme-1-maroon);
     font-weight: 600;
     text-decoration: none;

 }

 .terms-label a:hover {

     text-decoration: underline;

 }

 /**************************/

 .terms-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     display: none;

     justify-content: center;
     align-items: center;

     background: rgba(0, 0, 0, .55);

     z-index: 99999;
 }

 .terms-modal.active {
     display: flex;
 }

 .terms-content {

     width: 90%;
     max-width: 700px;

     max-height: 85vh;

     overflow-y: auto;

     background: #fff;

     border-radius: 10px;

     box-shadow: 0 15px 40px rgba(0, 0, 0, .25);

     animation: popup .25s ease;
 }

 .user-type-desc {
     font-weight: 500;
     font-size: 12px;
     padding: 10px 0px;
     color: var(--theme-1-maroon);
 }

 @keyframes popup {

     from {

         transform: scale(.8);
         opacity: 0;

     }

     to {

         transform: scale(1);
         opacity: 1;

     }

 }

 .terms-header {

     background: var(--theme-1-maroon);
     color: #fff;
     padding: 0px 25px;
     display: flex;
     justify-content: space-between;
     align-items: center;

 }

 .terms-header h2 {

     margin: 0;

     font-size: 22px;

 }

 #closeTerms,
 #closeTerms_int {

     font-size: 28px;

     cursor: pointer;

 }

 .terms-body {

     padding: 10px 25px;

     max-height: 420px;

     overflow-y: auto;

 }

 .terms-body ol {

     padding-left: 20px;

 }

 .terms-body li {

     margin-bottom: 12px;

     line-height: 1.7;
     font-size: 11px;

 }

 .terms-footer {

     padding: 10px 18px;

     text-align: right;

     border-top: 1px solid #ddd;

 }

 @media(max-width:600px) {

     .login-card {

         padding: 25px;

     }

     .login-header {

         flex-direction: column;

         text-align: center;

     }

     .login-options {

         flex-direction: column;

         align-items: flex-start;

     }

 }

 .container {
     padding: 0px 20px;
     width: 95%;
     max-width: 1200px;
     margin: 40px auto;min-height: 600px;
 }

 /********************/
 /* Section Heading */
 /********************/

 .section-title {

     font-size: 28px;
     font-weight: 600;
     color: var(--theme-1-maroon);
     margin-bottom: 8px;
 }

 .section-desc {

     color: #666;
     margin-bottom: 30px;
 }

 /********************/

 .card {

     background: #fff;
     /*   border-radius: 12px; */
     box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
     padding: 35px;
     margin-bottom: 40px;
     border-top: 5px solid var(--theme-1-maroon);
 }

 .card h2 {
     font-weight: 500;
     font-size: 24px;
     margin-bottom: 25px;
     color: var(--theme-1-maroon);
 }

 .card h2 i {

     margin-right: 10px;
     color: #D4AF37;
     display: none;
 }

 /********************/

 .form-grid {

     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
 }

 .form-group {

     display: flex;
     flex-direction: column;
 }

 .form-group.full {

     grid-column: 1/-1;
 }

 label {

     margin-bottom: 8px;
     font-weight: 500;
 }

 input,
 select,
 textarea {

     padding: 13px 15px;
     border: 1px solid #d6d6d6;
     border-radius: 8px;
     font-size: 15px;
     font-family: Poppins;
     transition: .3s;
 }

 input:focus,
 select:focus,
 textarea:focus {

     border-color: var(--theme-1-maroon);
     outline: none;
     box-shadow: 0 0 0 3px rgba(27, 58, 43, .15);
 }

 /********************/

 .login-grid {

     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 25px;
     margin-bottom: 20px;
 }

 .login-footer {

     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 15px;
     flex-wrap: wrap;
     gap: 15px;
 }

 /********************/

 .btn {

     background: var(--theme-1-maroon);
     color: #fff;
     padding: 13px 35px;
     border: none;
     border-radius: 8px;
     font-size: 16px;
     cursor: pointer;
     transition: .3s;
     font-family: Poppins;
 }

 .btn:hover {

     background: #24543f;
 }

 .btn-register {
     width: auto;
     min-width: 220px;
     padding: 12px 30px;
     width: 260px !important;
 }

 .btn-agree {

     padding: 5px 25px;

     font-size: 15px;

 }

 .button-area {
     text-align: left;
     /* Use center or right if preferred */
     margin-top: 10px;
 }

 /********************/

 .tabs {

     display: flex;
     border-bottom: 1px solid #ddd;
     margin-bottom: 30px;
 }

 .tab {

     padding: 15px 30px;
     cursor: pointer;
     font-weight: 600;
     transition: .3s;
 }

 .tab.active {

     background: var(--theme-1-maroon);
     color: #fff;
     border-radius: 8px 8px 0 0;
 }

 .tab-content {

     display: none;
     animation: fade .4s;
 }

 .tab-content.active {

     display: block;
 }

 .field-help {
     display: block;
     margin-top: 6px;
     font-size: 13px;
     color: #666;
     line-height: 1.5;
 }

 .field-help i {
     color: var(--theme-1-maroon);
     margin-right: 4px;
 }

 .required {
     color: #d32f2f;
 }

 label.error {

     display: block;

     margin-top: 6px;

     color: #d32f2f;

     font-size: 13px;

     font-weight: 500;

 }

 input.error,
 select.error,
 textarea.error {

     border: 1px solid #d32f2f;

     background: #fff7f7;

 }

 input.valid,
 select.valid,
 textarea.valid {

     border: 1px solid #28a745;

 }

 .captcha-area {

     display: flex;

     align-items: center;

     gap: 15px;

     margin-bottom: 15px;

 }

 .captcha-area img {

     height: 55px;

     border: 1px solid #ccc;

     border-radius: 6px;

 }

 .captcha-area button {

     width: 45px;

     height: 45px;

     border: none;

     border-radius: 6px;

     background: var(--theme-1-maroon);

     color: #fff;

     cursor: pointer;

     transition: .3s;

 }

 .captcha-area button:hover {

     background: #7d0000;

 }

 .terms-wrapper {

     display: flex;

     align-items: flex-start;

     gap: 12px;

 }

 .terms-wrapper input {

     width: 18px;
     height: 18px;

     margin-top: 3px;

     flex-shrink: 0;

 }

 .terms-wrapper label {

     margin: 0;

     font-size: 15px;

     line-height: 1.6;

     display: inline;

     font-weight: 400;

 }

 .terms-wrapper a {

     color: var(--theme-1-maroon);

     font-weight: 600;

     text-decoration: none;

 }

 .terms-wrapper a:hover {

     text-decoration: underline;

 }

 /****************************
 Server Side Error Box
****************************/

 .validation-errors {

     margin: 20px 0;

     padding: 20px 25px;

     background: #fff5f5;

     border: 1px solid #dc3545;

     border-left: 6px solid #dc3545;

     border-radius: 8px;

     animation: fadeIn .3s ease;

 }

 .validation-title {

     color: var(--theme-1-maroon);

     font-size: 18px;

     font-weight: 600;

     margin-bottom: 12px;

 }

 .validation-title i {

     margin-right: 8px;

 }

 .validation-errors ul {

     margin: 0;

     padding-left: 22px;

 }

 .validation-errors li {

     color: #721c24;

     line-height: 1.8;

     font-size: 15px;

 }

 @keyframes fade {

     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 /********************/

 .required {

     color: red;
 }

 /********************/

 @media(max-width:768px) {

     .form-grid,
     .login-grid {

         grid-template-columns: 1fr;
     }

     .login-footer {

         flex-direction: column;
         align-items: flex-start;
     }

     .tabs {

         flex-direction: column;
     }

     .tab {

         border-radius: 0;
     }

     .card {

         padding: 20px;
     }

 }