* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color:#001426;
    font-family: tahoma;
    height: 100vh;
    width: 100vw;
}

/* Center the preloader overlay over everything */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #001426; /* Change to match your site background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Keeps it on top of all other elements */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Optional size constraint for your GIF */
#preloader img {
    width: 80px; 
    height: auto;
}

/* Class to trigger the smooth fade out */
.fade-out {
    opacity: 0;
    visibility: hidden;
}


/* My Account page */
#header-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color:#001426;
    border-bottom: 1px solid #393939f1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
#header-wrapper #logo-wrapper {
    padding: 10px 0;
}
#logo-wrapper img {
    width: 30px;
    margin-right: 10px;
}
#logo-wrapper h3 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}
#header-wrapper a {
    color: white;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid white;
    cursor: pointer;
}
#flag img {
    width: 20px;
    border-radius: 500px;
}
#main-body-wrapper #details-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 72px;
    color: rgba(166, 164, 164, 0.587);
}
#details-wrapper #account-header {
    margin-bottom: 20px;
    color: white;
}
#details-wrapper #account-info {
    display: flex;
    flex-direction: row;
    background-color: rgb(11, 53, 80);
}
#passport-wrapper img {
    width: 50px;
    border-radius: 500px;
    margin: 20px;
}
#account-info #account-details {
    margin: 20px;
    font-size: 16px;
}
#account-details #acc-name {
    color: white;
}
#account-details div {
    margin-bottom: 20px;
}
#acc-number-virtual span {
    color: white;
}
#available-amount i {
    margin-left: 20px;
}
#available-amount span {
    font-size: 20px;
    color: white;
}
#details-wrapper #personal-info {
    margin-top: 30px;
}
#personal-info #personal-header {
    color: white;
    margin-bottom: 20px;
}
#personal-info div {
    margin-bottom: 20px;
}
#personal-info h4 {
    margin-bottom: 10px;
}
#personal-info p {
    font-size: 16px;
    padding-left: 10px;
    color: white;
}
#go-to-account-settings a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid white;
}
#main-body-wrapper #customer-care-wrapper {
    background-color: white;
}
#customer-care-wrapper p {
    padding: 20px 0 20px 20px;
    color:#001426;
    font-size: 15px;
}
#customer-care-wrapper a {
    color:#001426;
}


/* Transanction History Page */
#main-body-wrapper #transaction-wrapper {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}
#transaction-wrapper #transaction-container {
    display: flex;
    flex-direction: column-reverse;
}
#transaction-wrapper .transaction {
    border-bottom: 1px solid #595656d1;
    padding: 20px 0;
    font-size: 14px;
    width: 280px;
}
.transaction .transaction-type {
    color: rgb(13, 116, 160);
}
.transaction p span {
    color: rgb(168, 165, 165);
}
.transaction .successful-status {
    color: rgb(0, 144, 36);
}
.transaction .unsuccessful-status {
    color: rgb(219, 4, 4);
}


/* Transfer Page */
#main-body-wrapper #transfer-wrapper {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#transfer-wrapper h1 {
    color: white;
}
#transfer-wrapper #transfer-form {
    color: white;
    margin-top: 20px;
    width: 300px;
    /* border: 1px solid yellow; */
    display: flex;
    flex-direction: column;
}
#transfer-form h4 {
    text-align: center;
    font-size: 16px;
    color: rgb(231, 57, 57);
}
#transfer-form div {
    margin-bottom: 20px;
}
#transfer-form p {
    margin-bottom: 10px;
}
/* Chrome, Safari, Edge, Opera */
#transfer-form input::-webkit-outer-spin-button,
#transfer-form input::-webkit-inner-spin-button
#transfer-verify-form input::-webkit-outer-spin-button,
#transfer-verify-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
#transfer-form input[type=number],
#transfer-verify-form input {
  -moz-appearance: textfield;
  appearance: textfield;
}
#transfer-form .field-wrapper {
    text-align: center;
}
.dollar-currency {
    margin-right: 10px;
    color: #5479987c;
    font-weight: bold;
    font-size: 18px;
}
#transfer-form input {
    border: none;
    padding: 10px;
    width: 250px;
    background-color: rgba(7, 52, 88, 0.409);
    border-radius: 10px;
    color: white;
    font-size: 16px;
}
#transfer-form input:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}
#transfer-form #bank-transfer-select {
    padding: 10px;
    border: none;
    width: 240px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.482);
    cursor: pointer;
    font-size: 16px;
}
#transfer-form div textarea {
    width: 200px;
    height: 50px;
    border: none;
    background: rgba(255, 255, 255, 0.756);
}
#transfer-form #transfer-btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    /* font-weight: bold; */
    background-color: #132b3f;
    color: white;
}
#transfer-form #transfer-btn:hover {
    color: rgba(255, 255, 255, 0.607);
    background-color: rgb(3, 59, 122);
    cursor: pointer;
    transition: 0.5s;
}
#main-body-wrapper #supported-para {
    text-align: center;
    color: white;
    font-size: 12px;
    margin-top: 40px;
    padding-bottom: 40px;
}
#supported-para img {
    width: 15px;
    margin-left: 5px;
}
#transfer-wrapper #transfer-verify-form {
    /* border: 1px solid yellow; */
    color: white;
    display: flex;
    flex-direction: column;
    width: 320px;
    padding: 20px;
}
#transfer-verify-form h4 {
    text-align: center;
}
#transfer-verify-form #account-verify-wrapper {
    margin: 10px 0 20px;
}
#account-verify-wrapper #verify-para-success {
    text-align: center;
}
#verify-para-success i {
    color: green;
}
#transfer-verify-form .field-container {
    font-family: tahoma;
    margin: 10px 0;
}
.field-container .field-wrapper {
    text-align: center;
}
.field-wrapper input {
    padding: 5px;
    font-size: 14px;
    color: #001426;
    border: none;
    border-radius: 4px;
    background-color: #0658a093;
    color: rgba(255, 255, 255, 0.578);
    font-weight: bold;
    margin-top: 5px;
}
#transfer-verify-form #otp-note {
    text-align: center;
    font-size: 14px;
    margin: 20px 0;
}
.field-wrapper textarea {
    border: none;
    width: 200px;
    margin-top: 5px;
    height: 50px;
    color: #001426;
    background-color: rgba(255, 255, 255, 0.587);
    padding: 10px;
    border-radius: 10px;
}
.field-wrapper button {
    border: none;
    padding: 10px;
    font-size: 16px;
    background-color: #0056b3;
    cursor: pointer;
    border-radius: 4px;
    color: white;
}
.field-wrapper button:hover {
    background-color: white;
    color: #0056b3;
    transition: 0.5s;
}
.field-container #field-btn-wrapper {
    margin-top: 10px;
}
#field-btn-wrapper #cancel-transfer-btn {
    margin-left: 60px;
}

#transact-success-wrapper #transact-success-container {
    margin: 60px 0;
}
#transact-success-container .transact-success-para {
    text-align: center;
    color: white;
    font-size: 16px;
    margin: 20px 0 40px;
}
.transact-success-para i {
    color: #05447b;
}
.transact-success-para a {
    color: white;
    text-decoration: none;
    padding: 10px;
    background-color: #05447b;
    font-size: 16px;
    border-radius: 5px;
}
.transact-success-para a:hover {
    background-color: #1a72d1;
    transition: 0.5s;
}


/* Foreign Transfer Page */
#main-body-wrapper #foriegn-transfer-wrapper {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.response-para {
    text-align: center;
    color: #cd0141;
    padding: 5px 10px 0;
    font-size: 14px;
}
#foriegn-transfer-wrapper h3 {
    color: white;
}
#foriegn-transfer-wrapper #foreign-transfer-form {
    color: white;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
}
#foreign-transfer-form div {
    margin-bottom: 20px;
}
#foreign-transfer-form p {
    margin-bottom: 10px;
}
/* Chrome, Safari, Edge, Opera */
#foreign-transfer-form input::-webkit-outer-spin-button,
#foreign-transfer-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
#foreign-transfer-form input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
#foreign-transfer-form input {
    border: none;
    padding: 10px;
    width: 250px;
    background-color: rgba(7, 52, 88, 0.409);
    border-radius: 10px;
    color: white;
    font-size: 16px;
}
#foreign-transfer-form #foreign-transfer-select {
    padding: 10px;
    border: none;
    width: 240px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.482);
    cursor: pointer;
    font-size: 16px;
}
#foreign-transfer-form #foreign-transfer-btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.607);
    color: rgb(3, 59, 122);
}
#foreign-transfer-form #foreign-transfer-btn:hover {
    color: rgba(255, 255, 255, 0.607);
    background-color: rgb(3, 59, 122);
    cursor: pointer;
    transition: 0.5s;
}


/* Bill Payment Page */
#main-body-wrapper #all-payment-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 70px;
}
#all-payment-wrapper h2 {
    color: white;
}
#all-payment-wrapper #bills-wrapper {
    color: white;
    /* margin-top: 30px; */
    /* border: 1px solid red; */
}
.bill-type h4 {
    margin-bottom: 5px;
    margin-top: 30px;
}
.bill-type ul li {
    list-style: none;
}
.bill-type ul li a {
    display: block;
    padding: 10px 20px;
    /* border: 1px solid yellow; */
    font-size: 16px;
    text-decoration: none;
    color: #bcb8b8a6;
    border-bottom: 1px solid #706c6ca4;
}
.bill-type ul li a:hover {
    text-decoration: underline;
}


/* Loan page */
#main-body-wrapper #loan-container {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}
#loan-container h2, #loan-container h3 {
    margin-bottom: 20px;
}
#loan-container p {
    margin-top: 20px;
}
#loan-container #first-para {
    font-size: 14px;
    font-weight: bold;
}
#loan-container #second-para {
    font-size: 12px;
}
#loan-container p a {
    text-decoration: none;
}
#loan-container #button-para {
    margin-top: 80px;
}
#loan-container #button-para a {
    color: white;
    font-size: 18px;
    padding: 10px 30px;
    background-color: rgba(5, 75, 126, 0.849);
}
#loan-container #button-para a:hover {
    background-color: white;
    color: rgba(5, 75, 126, 0.849);
    transition: 0.5s;
}


/* Loan Application Page */
#main-body-wrapper #loan-apply-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}
#loan-apply-wrapper #header-text {
    font-size: 28px;
    margin: 20px 0;
    /* text-shadow: 0px 2px 1px white; */
    /* border-bottom: 1px solid white; */
}
#loan-apply-wrapper #sub-header-text {
    margin-bottom: 20px;
    font-size: 20px;
    text-shadow: 3px 3px 1px black;
}
#loan-apply-form div {
    margin-bottom: 20px;
}
#loan-apply-form p {
    font-size: 14px;
    margin-bottom: 10px;
}
/* Chrome, Safari, Edge, Opera */
#loan-apply-form input::-webkit-outer-spin-button,
#loan-apply-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
#loan-apply-form input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#loan-apply-form input {
    border: none;
    padding: 5px;
    border-radius: 10px;
    color: #001426;
    font-size: 16px;
    /* width: 200px; */
}
#loan-apply-form #amount-para {
    font-size: 18px;
}
#loan-apply-form #loan-amount-input {
    width: 100px;
    margin-right: 10px;
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.833);
}
#loan-apply-form textarea {
    border: none;
    background-color: rgba(255, 255, 255, 0.683);
    border-radius: 10px;
}
#loan-apply-form #loan-btn-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#loan-btn-wrapper #loan-apply-button {
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0c3355;
    color: white;
    cursor: pointer;
}
#loan-btn-wrapper #loan-apply-button:hover {
    background-color: white;
    color: #0c3355;
    transition: 0.5s;
}
#loan-btn-wrapper #loan-cancel-btn {
    padding: 10px 20px;
    color: #0c3355;
    text-decoration: none;
    background-color: white;
}
#loan-btn-wrapper #loan-cancel-btn:hover {
    background-color: #0c3355;
    color: white;
    transition: 0.5s;
}
#loan-apply-form #result-container {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.591);
}
#result-container #result-wrapper {
    margin-top: 70px;
    padding: 20px;
    background-color: #001426;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
}
#result-wrapper p {
    font-size: 16px;
}
#result-wrapper #result-para {
    text-align: center;
    margin-bottom: 50px;
}
#result-wrapper p #result-ok {
    padding: 10px;
    border: 1px solid white;
    cursor: pointer;
    text-decoration: none;
    color: white;
}
#result-wrapper p #result-ok:hover {
    background-color: white;
    color: #001426;
    transition: 0.5s;
}


/* Signup Page */
#main-body-wrapper #signup-wrapper {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#signup-wrapper h2 {
    color: white;
    margin-bottom: 20px;
}
#signup-form div {
    margin-bottom: 30px;
}
#signup-form p {
    color: white;
    margin-bottom: 10px;
}
#signup-form input {
    padding: 5px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.24);
    color: #001426;
}
#signup-form div select {
    padding: 5px;
    border: none;
    background-color: white;
    color: #001426;
}
#signup-form #transaction-status-select {
    border: none;
    font-size: 16px;
    padding: 5px;
    background-color: white;
    color: #001426;
}
#signup-form div #passport-input {
    width: 200px;
}
#signup-form div #passport-display-wrapper {
    margin: 20px 0;
}
#passport-display-wrapper #passportPreview {
    width: 50px;
    height: 50px;
    display: none;
    border: 2px solid #ddd;
    border-radius: 4px;
}
#signup-form button {
    border: none;
    padding: 10px;
    font-size: 12px;
    border-radius: 5px;
    color: #001426;
    cursor: pointer;
}
#signup-form button:hover {
    background-color: #05447b;
    color: white;
    /* border: 1px solid rgba(255, 255, 255, 0.217); */
    transition: 0.5s;
}
/* Chrome, Safari, Edge, Opera */
#signup-form div input::-webkit-outer-spin-button,
#signup-form div input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
#signup-form div input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}


/* Login page */
#main-body-wrapper #login-wrapper {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#login-wrapper h4 {
    color: white;
    margin-bottom: 20px;
}
#login-wrapper #login-form {
    color: white;
    margin-top: 10px;
}
#login-form div {
    margin-bottom: 20px;
    text-align: center;
}
#login-form p {
    margin-bottom: 10px;
    font-size: 16px;
    text-align: center;
}
#login-form input {
    padding: 5px;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    background-color: white;
    color: #001426;
}
#login-form button {
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.509);
    color: #001426;
    cursor: pointer;
}
#login-form button:hover {
    background-color: #0a345a;
    color: white;
    /* border: 2px solid rgba(255, 255, 255, 0.217); */
    transition: 0.5s;
}
#login-form #forgot-password-para {
    margin-top: 30px;
}
#forgot-password-para span {
    font-size: 12px;
}
#forgot-password-para #forgot-password-btn {
    color: white;
    font-size: 12px;
    cursor: pointer;
}
#main-body-wrapper #pwd-reset-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #001426;
}
#pwd-reset-wrapper #pwd-reset-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    color: white;
}
#pwd-reset-form #link-sent-para {
    padding: 20px;
    font-size: 14px;
    text-align: center;
}
#pwd-reset-form a {
    text-decoration: none;
    color: white;
}
#pwd-reset-form a i {
    color: white;
    size: 20px;
}
#pwd-reset-form p {
    margin-bottom: 20px;
}
#pwd-reset-form #reset-pwd-btn {
    padding: 10px 15px;
    /* border: none; */
    background-color: rgba(255, 255, 255);
    color: #001426;
    font-size: 14px;
    border-radius: 10px;
    cursor: pointer;
}
#pwd-reset-form #reset-pwd-btn:hover {
    background-color: #0a3d69;
    color: white;
    transition: 0.5s;
}


/* Account Setting Page */
#main-body-wrapper #acc-setting-header {
    padding: 30px;
    text-align: right;
}
#acc-setting-header a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
#acc-setting-header a:hover {
    color: #073964;
}
#main-body-wrapper #account-setting-wrapper {
    color: white;
}
#account-setting-wrapper h4 {
    border-bottom: 1px solid rgba(57, 56, 56, 0.605);
    padding: 10px;
    text-align: center;
}
#account-settings p {
    padding: 20px;
    font-size: 14px;
    text-align: center;
}
#account-settings p .send-link-btn {
    padding: 5px;
    font-size: 14px;
    /* border: none; */
    background-color: white;
    cursor: pointer;
    color: #001426;
}
#account-settings p .send-link-btn:hover {
    background-color: #09263f;
    color: white;
    transition: 0.5s;
}
#resend-link-wrapper span i {
    color: green;
}