@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

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

body {
    font-family: 'Lexend';
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(240 246 232) 52%, rgb(83 134 64 / 0%) 100%);
}

:root {
    --primaryColor: #528437;
    --primarybg: #528437;
    --whiteColor: #fff;
    --blackColor: #000;
    --orange-main: #ffb347;
    --border-color: #9f9f9f;
    --bg-white: #ffffff;
    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --secondary: #7C3AED;
    --accent: #06B6D4;
    --bg: #ffffff;
    --bg-alt: #F7F8FC;
    --surface: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.6);
    --border: rgba(15, 23, 42, 0.08);
    --text: #0F172A;
    --text-muted: #232325;
    --text-soft: #8592AB;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 32px rgb(99 96 200 / 20%);
    --shadow-lg: 0 24px 60px rgb(99 96 200 / 22%);
    --gradient-primary: #528437;
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--primary));
    --container: 1200px;
    --nav-h: 76px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --color-ink: #14142B;
    --color-ink-soft: #4E4B66;
    --color-ink-faint: #8886A3;
    --color-bg: #FFFFFF;
    --color-surface: #F7F7FC;
    --color-border: #E5E4F1;
    --color-code-bg: #14142B;
    --color-code-text: #E6E4F7;
    --color-code-key: #B8B3FF;
    --color-success: #1F9E6E;
    --color-success-bg: #E7F7F1;
    --color-error: #D8465C;
    --color-error-bg: #FBEAED;
    --color-warning: #B9791B;
    --color-warning-bg: #FDF3E2;
    --sidebar-width: 288px;
    --color-primary: #528437;
    --color-primary-dark: #528437;
    --color-primary-light: #EFEEFF;
    --topbar-height: 64px;
}

h4 {
    color: #1B1B1B;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

h2 {
    color: #1B1B1B;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6, p, ul {
    padding: 0;
    margin: 0
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background-color: #c9c9c9;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgb(153, 153, 153);
}

a {
    text-decoration: none;
}

p {
    color: #505050;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

a:hover {
    text-decoration: none;
    color: initial
}

li {
    list-style: none;
}

button:focus {
    outline: 0 !important
}

::-moz-selection {
    background: rgb(255 226 217/50%);
}

::selection {
    background: rgb(255 226 217/50%);
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: var(--primaryColor);
    position: relative;
}

.navbar-nav .nav-link.active::after {
    content: '';
    width: 34px;
    height: 2px;
    right: 35px;
    bottom: -7px;
    position: absolute;
    background-color: var(--primaryColor);
}

.navbar-expand-lg {
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.main-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0px;
    background: #FFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}

.bar1, .bar2, .bar3 {
    width: 27px;
    height: 3px;
    background-color: #06b3a0;
    margin: 6px 0;
    transition: 0.4s;
}

.navbar-light .navbar-toggler {
    color: transparent;
}

.change .bar1 {
    transform: rotate(-45deg) translate(-8px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(45deg) translate(-6px, -6px);
}

.navbar-toggler-icon {
    background-color: #06b3a0;
}

.right-login-area ul {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

.right-login-area ul li {
    list-style: none;
}

section {
    padding: 66px 0;
}

img {
    max-width: 100%;
}

.navbar-nav {
    flex: 1;
}

.navbar .nav-link {
    color: #1B1B1B;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    position: relative;
    padding: 0px 25px !important;
    line-height: normal;
}

.navbar .nav-link:hover {
    color: var(--primaryColor);
}

.navbar-logo img {
    margin-right: 57px;
}

.container {
    max-width: 1568px;
    width: 100%;
    padding: 0px 20px;
    margin: 0 auto;
}

.right-login-area .small-btn,
.right-login-area .small-btn-bg {
    padding: 12px 32px;
}

.small-btn {
    display: inline-flex;
    padding: 8px 25px;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    background-color: var(--primarybg);
    border-radius: 7px;
    color: var(--whiteColor);
    border: 1px solid var(--primaryColor);
    transition: all 0.3s ease-in-out;
}

.account-successfully p {
    font-size: 14px;
}

.account-successfully {
    background: #5ca8811f;
    padding: 15px;
    border-radius: 10px;
}

.footer-copy-btn {
    text-align: center;
    margin-top: 20px;
}

.btn-close-info {
    text-align: end;
}

.alert.alert-warning.mt-3.small {
    padding: 10px 15px;
    margin-bottom: 0px;
}

.account-successfully h2 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 9px;
}

.small-btn:hover {
    color: var(--whiteColor);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
}

.acc-button-info .small-btn {
    max-width: 360px;
    width: 100%;
    padding: 11px 25px;
    font-size: 16px;
}

.acc-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.acc-img-info {
    max-width: 379px;
    margin-left: 329px;
    margin-top: -167px;
    transform: rotate(35deg);
}

.acc-data {
    height: 100%;
    width: 100%;
    padding: 18px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.acc-title-text {
    margin-top: 20px !important;
}

.form-heading h1 {
    font-weight: 500;
    font-size: 46px;
    line-height: 69px;
    color: #224D47;
}

.form-heading p {
    font-weight: 400;
    font-size: 22px;
    line-height: 33px;
    color: #6B6B6B;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.acc-inner-data {
    width: 592px;
    border-radius: 10px;
    padding: 31px;
    box-shadow: 0 2px 18px rgb(0 0 0 / 14%);
}

.form-group {
    margin-top: 26px;
    position: relative;
}

.acc-form-control:focus {
    box-shadow: none;
    background: transparent;
    color: #000;
    outline: none;
    border: 1px solid var(--primaryColor);
}

.title-label,
.form-label {
    color: #1B1B1B;
    font-size: 16px;
    margin-bottom: 5px;
    font-style: normal;
    text-align: left;
    font-weight: 500;
    width: 100%;
}

.acc-field {
    position: relative;
    text-align: left;
}

.input-icon a:hover {
    color: #0a4e47;
}

.acc-title h1 {
    color: #1B1B1B;
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
}

.acc-title p {
    color: #505050;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: 13px;
}

.acc-field .fa {
    position: absolute;
    top: 40%;
    right: 15px;
}

.input-icon a {
    position: absolute;
    top: -4px;
    right: 0px;
    font-size: 19px;
}

.inner-checkbox {
    display: flex;
    margin-bottom: 36px;
    margin-top: 7px;
}

.inner-checkbox input {
    margin: 0px 7px 0px 0px;
    width: 15px;
    height: 15px;
    border: 1px solid #266e64
}

.acc-title img {
    margin-bottom: 24px;
    width: 159px;
}

.acc-title {
    margin-bottom: 39px;
    text-align: center;
}

.account-right {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #224d47;
}

.form-check-input:checked {
    background-color: #224d47;
    color: #224d47;
    border-color: #224d47;
    box-shadow: none;
}

.form-check-input:focus {
    box-shadow: none;
}

.create-btn a {
    color: #224D47 !important;
}

.create-btn:hover a {
    color: #fff !important;
}

.small-button:hover {
    background: transparent;
    border: 1px solid #224d47;
    color: #224d47;
}

.create-btn:hover {
    background: #224d47 !important;
    border: 1px solid #224d47 !important;
}

.forgot-password {
    justify-content: end;
    display: flex;
    align-items: center;
    margin-bottom: 36px;
    margin-top: 15px;
}

.forgot-password a {
    color: var(--primaryColor);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14.5px
}

.forgot-password a:hover {
    color: #fff;
}

.acc-field input::placeholder,
input::placeholder {
    color: #505050;
    font-size: 15px;
    font-weight: 300;
}

.copyright {
    position: absolute;
    bottom: 20px;
    text-align: center;
}

.acc-form-control,
.form-control {
    font-size: 16px !important;
    height: 46px;
    width: 100%;
    padding: 9px 22px;
    color: #000;
    border-radius: 5px;
    border: 1px solid #aaacad;
    background: #FFF;
}

.form-control {
    position: relative;
}

.back-btn {
    font-size: 19px;
    color: var(--primaryColor);
}

.form-control:focus {
    box-shadow: none;
    background: #fff;
    color: #000;
    outline: none;
    border: 1px solid var(--primaryColor);
}

button.btn-close.text-reset {
    right: 17px;
    background: transparent;
    border: none !important;
    top: 20px;
    font-size: 30px;
    color: #ffffff !important;
}

.copyright p {
    color: #FFF;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 0px;
}

.acc-field .input-icon {
    position: absolute;
    top: 13px;
    right: 14px;
    height: 22px;
    font-size: 19px;
}

.input-icon.color-icon {
    top: 9px;
}

.input-icon.color-icon i {
    color: var(--primaryColor);
}

.input-icon i {
    color: #6c6c6c;
}

.acc-button-info {
    text-align: center;
    margin-top: 38px;
}

.acc-footer-btn p {
    color: #505050;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 12px;
    font-weight: 500;
}

.acc-footer-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert-text {
    color: #141414;
    font-size: 14px;
    margin-top: 7px;
}

.acc-footer-btn a {
    color: var(--primaryColor);
    text-align: center;
    font-size: 15px;
    text-decoration: underline;
    font-style: normal;
    font-weight: 600;
    line-height: 14.5px;
}

.acc-footer-btn a:hover {
    color: #000;
}

.account {
    padding: 0px;
    min-height: 100vh;
    width: 100%;
    align-items: center;
    position: relative;
}

.account .shape-img {
    position: absolute;
    width: 72%;
    right: -2%;
}

.acc-main-info {
    background-color: #fff;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.20));
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
}

.account .shape-img-1 {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0%;
    z-index: -1;
}

.acc-data-img {
    height: 100%;
    min-height: 100vh;
    display: flex;
    text-align: center;
    padding: 54px 0px;
    justify-content: flex-start;
    flex-direction: column;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(82 135 65 / 13%) 52%, rgb(83 132 63 / 42%) 100%);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.acc-logo img {
    width: 251px;
    margin-bottom: 41px;
}

.acc-logo p {
    color: #000000c7;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 0;
}

.acc-img {
    margin-top: 63px;
}

.acc-shape {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    opacity: 0.4;
    filter: brightness(23.5);
}

.acc-title h1 span {
    color: var(--primaryColor);
}

.acc-bg-circle {
    border-radius: 382px;
    opacity: 0.3;
    background: #53843f;
    width: 382px;
    height: 382px;
    position: absolute;
    bottom: -24%;
    z-index: -1;
    left: -20%;
}

.account-login {
    position: relative;
    width: 100%;
    text-align: left;
    overflow: hidden;
    padding: 0px 44px 30px;
    border-radius: 28px;
}

.account-login::before {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -270px;
    bottom: -170px;
    border-radius: 50%;
    border: 1px solid rgba(84, 143, 67, 0.08);
    box-shadow: 0 0 0 32px rgba(84, 143, 67, 0.025), 0 0 0 64px rgba(84, 143, 67, 0.02), 0 0 0 96px rgba(84, 143, 67, 0.015);
    pointer-events: none;
}

.account-brand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 58px;
    text-decoration: none;
}

.account-brand-mark {
    width: 39px;
    height: 39px;
    display: block;
    flex-shrink: 0;
}

.account-brand-name {
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1px;
    color: #202426;
}

.account-brand-name span {
    color: #548f43;
}

.acc-title img {
    width: 97px;
    margin-bottom: 8px;
}

.account-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 18px;
    font-size: 33px;
    line-height: 40px;
    font-weight: 600;
}

.account-heading span {
    display: block;
    color: #548f43;
}

.account-description {
    position: relative;
    z-index: 2;
    max-width: 430px;
    margin-bottom: 35px;
    color: #687078;
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: -0.15px;
}

.account-feature-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 39px;
    list-style: none;
}

.account-feature {
    display: flex;
    align-items: center;
    gap: 17px;
}

.account-feature-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    font-size: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #53843f;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 5px 12px rgba(70, 95, 63, 0.07), inset 0 0 0 3px rgba(84, 143, 67, 0.025);
    color: #548f43;
}

.account-feature-icon svg {
    width: 49px;
    height: 30px;
    stroke: currentColor;
}

.account-feature-content {
    min-width: 0;
}

.account-feature-title {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.account-feature-text {
    max-width: 270px;
    color: #687078;
    font-size: 13px;
    line-height: 1.45;
}

.account-decoration {
    position: absolute;
    z-index: 1;
    right: -35px;
    bottom: -65px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(84, 143, 67, 0.13) 0%, rgba(84, 143, 67, 0.04) 45%, transparent 70%);
    pointer-events: none;
}

.form-check .form-check-input {
    float: left;
    margin-left: -21px;
    width: 17px;
    height: 17px;
    cursor: pointer;
    border-color: var(--primaryColor);
}

.form-check-input:checked {
    background-color: var(--primaryColor);
    color: var(--primaryColor);
}

label.form-check-label {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
    color: #505050;
    padding-left: 8px;
}

.acc-inner-data .form-check {
    margin-top: 16px;
}

.dotted-shape {
    position: absolute;
    top: 47px;
    left: 6%;
    width: 7%;
    opacity: 0.4;
    filter: brightness(23.5);
}

.custom-menu:hover span,
.custom-menu:hover,
.custom-menu:hover i {
    color: #DFFF06 !important;
}

.down-arrow {
    font-size: 28px !important;
    margin-left: 7px;
}

.custom-list-dropdown {
    cursor: pointer;
    min-width: 185px;
    padding-right: 46px;
}

.custom-list-dropdown .list-item-dropdown {
    transition: 0.3s;
    position: absolute;
    top: 120%;
    right: 0;
    left: 0;
    margin: 0;
    max-height: 400px;
    height: auto;
    overflow-y: auto;
    padding: 0px !important;
    border-radius: 5px !important;
    border: 1px solid #0000004a;
    background: #ffffff;
    z-index: 99;
    opacity: 0;
    width: 100%;
    min-width: max-content;
    visibility: hidden;
}

.custom-list-dropdown .list-item-dropdown li {
    padding: 0 15px;
    line-height: 45px;
    overflow: hidden;
    border-left: 4px solid transparent;
    border-bottom: 1px solid #0000003b;
}

.custom-list-dropdown .list-item-dropdown li:last-child {
    border-bottom: none;
}

.list-item-dropdown {
    padding: 0.5rem !important;
}

.custom-list-dropdown .list-item-dropdown li:hover {
    background: #6360c821;
    border-left: 4px solid var(--primaryColor);
}

.custom-list-dropdown.active .list-item-dropdown {
    opacity: 1;
    visibility: visible;
    border-radius: 15px;
}

.rotated {
    transform: rotate(-180deg);
}

.form-group .custom-list-dropdown i {
    position: absolute;
    right: 15px;
    top: 12px;
    color: #505050;
    font-size: 22px;
}

.verify-mpin-group {
    text-align: center;
}

.mpin-field {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 15px;
}

.mpin-input {
    width: 35px;
    height: 40px;
    border: none;
    border-bottom: 2px solid #000;
    text-align: center;
    font-size: 20px;
    outline: none;
    background: transparent;
}

.mpin-input:focus {
    border-color: #4f5bd5;
}

.reset-mpin-wrapper {
    text-align: center;
    margin-top: 22px;
}

.reset-mpin-btn {
    background: #2ecc71;
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.reset-mpin-btn:hover {
    background: #27ae60;
}

.acc-back-btn {
    text-align: center;
    margin-top: 31px;
}

.acc-back-btn a {
    color: var(--primaryColor);
}

.dropdown-selected {
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    padding: 0px;
    top: 77px;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu ul li a {
    padding: 15px 10px;
    color: #000;
    display: block;
    width: 100%;
    border-left: 4px solid transparent;
    border-bottom: 1px solid #00000036;
    transition: all 0.5s;
}

.dropdown-menu ul li a:hover {
    background: #ebf1eaba;
    border-left: 4px solid var(--primaryColor);
}

.dropdown-menu.notification-dropdown {
    right: 8%;
}

.notification-dropdown {
    max-width: 357px;
    background: #f4f4f4;
    border-radius: 6px;
    overflow-y: auto;
    max-height: 432px;
}

.notification-dropdown::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 10px;
}

.notification-dropdown::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #6360c8;
}

.notification-item a b {
    color: var(--primarybg);
    font-weight: 600;
}

.notification-item {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    line-height: 18px;
}

.notification-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 6px 10px;
    background: #6360c859;
}

.notification-title {
    font-size: 12px;
    font-weight: 600;
    color: #2f2f2f;
}

.notification-time {
    font-size: 12px;
    color: #000000;
}

.notification-item a {
    margin: 0;
    word-break: break-all;
    font-size: 13px;
    display: block;
    color: #2e2e2e;
    padding: 9px 10px;
    line-height: 20px;
}

.notification-item a:hover {
    color: #000;
}

.notification-footer {
    text-align: center;
    padding: 12px;
    background: #fff;
}

.notification-footer a {
    text-decoration: none;
    color: #6360c8;
    font-weight: 600;
    font-size: 14px;
}

.sidebar {
    display: flex;
    align-items: center;
}

.sidebar-menu ul {
    display: flex;
}

.sidebar-logo img {
    margin-bottom: 0;
    width: 216px;
    padding-bottom: 0px;
}

.sidebar-menu ul li :is(a.active, a:hover) img {
    filter: brightness(0) invert(1);
}

.sidebar-menu {
    padding-left: 37px;
}

.sidebar-logo {
    text-align: center;
    position: relative;
}

.dashboard-detail {
    margin-bottom: 50px;
}

.sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.sub-menu ul {
    list-style: none;
    padding: 10px;
    margin-right: 7px;
    margin-top: 7px;
    border-radius: 9px;
    background: #6360c82b;
}

li.main-menu .ri-arrow-down-s-line {
    position: absolute;
    right: 15px;
    font-size: 28px;
}

.form-control.file-attach .error {
    margin-left: -23px;
}

.inner-title.create-inner-info {
    width: 55%;
}

.form-control.file-attach input {
    width: 100%;
    margin-bottom: 12px;
    margin-left: -6px;
    cursor: pointer;
}

.sub-menu li a {
    padding: 8px 20px !important;
    text-decoration: none;
    font-size: 16px !important;
    border-radius: 5px !important;
    background: #fff;
    font-weight: 400 !important;
    border-right: 1px solid #6a5acd96 !important;
}

.sub-menu li a:hover {
    background: #eee;
}

.sub-menu li {
    margin-bottom: 5px !important;
}

.sub-menu.show {
    max-height: 250px;
}

.arrow {
    transition: 0.3s;
}

.arrow.rotate {
    transform: rotate(180deg);
}

.sidebar-menu ul li a i {
    color: #37781c;
}

.sidebar-menu ul li :is(a.active, a:hover) {
    color: var(--primaryColor) !important;
}

.sidebar-menu ul li a {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    position: relative;
    transition: all 0.6s;
    color: #000;
    align-items: center;
}

.main-data-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.filter-group.search-box {
    width: 100%;
    max-width: 299px;
}

.filter-actions .clear-filter-btn {
    padding-bottom: 12px;
}

.filter-limit .custom-list-dropdown {
    cursor: pointer;
    min-width: max-content;
}

.date-filter-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.from-arrow {
    width: 41px;
    height: 41px;
    font-size: 24px;
    border-radius: 50%;
    display: flex;
    font-weight: 500;
    justify-content: center;
    align-items: center;
    color: #53843f;
    background: #e0e9de;
}

.date-input-box {
    position: relative;
    display: flex;
    gap: 13px;
    align-items: center;
}

.date-picker-box {
    position: relative;
}

.date-picker-box i {
    position: absolute;
    right: 12px;
    font-size: 23px;
    top: 5px;
    color: #303030;
}

.date-range-input {
    width: 260px;
    padding: 10px 15px;
    text-align: left;
    border-radius: 5px;
    border: 1px solid #5c5c5cab;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    outline: none;
    background: #fff;
}

.notification-wrapper {
    position: relative;
    cursor: pointer;
    font-size: 28px;
    width: 52px;
    color: #54843e;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    background: #ebf1ea;
    border: 1px solid #b7cdb5;
}

.notification-item.unread {
    background-color: #ebecf8;
}

.notification-count {
    position: absolute;
    top: -17px;
    right: -4px;
    background-color: #ef0909;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 0px 2px;
    max-width: 23px;
    width: 100%;
    height: 23px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.date-range-input:focus {
    border-color: #53843f;
}

.clear-filter-btn {
    background: none;
    border: none;
    color: #53843f;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.clear-filter-btn:hover {
    text-decoration: underline;
}

.custom-main-card {
    padding: 20px;
    background: #fff;
    border: 1px solid #bed4ba;
    border-radius: 10px;
    margin-top: 21px;
    position: relative;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0px 20px;
    margin-bottom: 25px;
}

.wallet-dash-container {
    position: relative;
    background: #ffffffa1;
    border-radius: 17px;
    display: flex;
    margin-bottom: 56px;
    justify-content: space-between;
    align-items: center;
    padding: 19px 30px;
    overflow: hidden;
    box-shadow: 0 4px 31px rgb(0 0 0 / 6%);
}

.wallet-welcome-content {
    width: 32%;
    position: relative;
    z-index: 2;
}

.wallet-welcome-title {
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #151b24;
    line-height: 1.2;
}

.wallet-user-name {
    color: #53853f;
}

.wallet-welcome-description {
    margin-top: 10px;
    font-size: 21px;
    margin-bottom: 29px;
    color: #232424;
}

.wallet-highlight-line {
    margin-top: 30px;
    width: 75px;
    height: 8px;
    background: #45a85f;
    border-radius: 20px;
}

.wallet-visual-area {
    position: relative;
    margin-top: 30px;
}

.wallet-balance-wrapper {
    width: 55%;
    display: flex;
    gap: 25px;
    position: relative;
    z-index: 2;
}

.wallet-balance-card {
    flex: 1;
    border-radius: 13px;
    padding: 18px 23px;
    position: relative;
    overflow: hidden;
}

.wallet-available-card {
    background: linear-gradient(145deg, #dff3d780, #73ca75);
}

.wallet-payin-card {
    background: linear-gradient(145deg, #dcecff99, #9ed8ff);
}

.wallet-balance-card.wallet-payin-card .wallet-card-amount {
    color: #0079ae;
}

.wallet-balance-card img {
    position: absolute;
    right: 19px;
    bottom: 12px;
    width: 172px;
}

.wallet-available-card .wallet-card-icon i {
    color: var(--primaryColor);
    font-size: 29px;
}

.wallet-payin-card .wallet-card-icon i {
    color: #0075b1;
    font-size: 32px;
}

.wallet-card-icon {
    width: 44px;
    height: 44px;
    background: #ffffff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.wallet-card-title {
    margin-top: 16px;
    font-size: 17px;
    color: #000000b5;
}

.wallet-card-amount {
    margin-top: 8px;
    font-size: 28px;
    color: #368914;
}

.wallet-card-divider {
    height: 1px;
    background: rgb(120 120 120 / 50%);
    margin: 11px 0;
    max-width: 283px;
}

.wallet-card-action {
    color: #10506c;
    font-size: 18px;
    font-weight: 600;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.wallet-dot-pattern {
    position: absolute;
    top: 35px;
    left: 35px;
    width: 80px;
    height: 60px;
    background-image: radial-gradient(#4ca965 2px, transparent 2px);
    background-size: 15px 15px;
}

.wallet-curve-pattern {
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 250px;
    height: 250px;
    border: 3px solid #d8efd8;
    border-radius: 50%;
}

.stat-card {
    background: var(--primarybg);
    padding: 18px 20px;
    border-radius: 8px;
    color: #fff;
}

.stat-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.stat-card p {
    margin: 7px 0 0;
    font-size: 14px;
    color: #fff;
}

.pagination ul {
    display: flex;
    gap: 6px;
}

.text-data-info {
    font-size: 14px;
    color: #000000f0;
}

.user-data-info {
    font-size: 13px !important;
    color: #000000f0 !important;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
}

.tbl-total-amount {
    font-size: 14px;
    font-weight: 500;
    color: #000000f0;
}

.custom-table thead {
    background: #383838;
}

.custom-table th {
    text-align: left;
    padding: 10px 10px !important;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.custom-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.custom-table tbody tr:nth-child(even) {
    background: #3838381f;
}

span.action-reason {
    display: block;
    font-size: 13px;
    padding-top: 3px;
}

.custom-table td {
    padding: 10px 10px !important;
    text-align: left;
    font-size: 13px;
    width: 317px;
    line-height: normal;
    vertical-align: middle;
    color: #000000f0;
}

.custom-table td .text-success,
.custom-table .text-danger {
    font-weight: 600;
}

.wallet-value {
    font-weight: 700;
    display: flex;
}

.summary-stats {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 121px;
    padding: 10px 20px;
}

.stat-badge {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.stat-amount {
    background: #fff8d6;
    border: 2px solid #f2de7e;
    color: #444;
}

.stat-commission {
    background: #d9f4df;
    border: 2px solid #63b57c;
    color: #2c6e3f;
}

.debit-commission {
    background: #ffd0d575;
    border: 2px solid #ff6e7ca3;
    color: #dc3545;
}

.stat-tds {
    background: #dbe9ff;
    border: 2px solid #5a8fd8;
    color: #274a7c;
}

.stat-label {
    font-weight: 500;
}

.stat-value {
    font-weight: 700;
}

td.amount .text-data-info {
    color: #505050;
    white-space: break-spaces;
}

.no-data-row td {
    padding: 30px;
    text-align: center;
    color: #666;
}

.status.pending {
    background: #faae23;
    color: #fff;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-top: 25px;
    font-size: 14px;
}

.form-control.file-attach {
    line-height: 21px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000000 !important;
}

.pagination {
    display: flex;
    gap: 10px;
}

.page-btn {
    padding: 6px 14px;
    border: 1px solid #ddd;
    background: var(--primarybg);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
}

.page-btn:hover,
.page-btn {
    background: var(--primarybg);
}

.dashboard-header {
    padding: 11px 50px;
    text-align: right;
    margin-top: 35px;
}

.inner-header-menu {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 15px 50px;
    text-align: right;
    background: #fff;
    margin-top: 0;
    justify-content: space-between;
}

.wallet-item.balance-section.wallet-bal-info {
    padding: 4px 12px !important;
    border-radius: 6px;
    background: #6360c81f !important;
}

.wallet-bal-info .wallet-label,
.wallet-bal-info .wallet-value,
.hold-section.wallet-bal-info .wallet-label,
.hold-section.wallet-bal-info .wallet-value {
    font-weight: 500;
    font-size: 14px;
}

.wallet-bal-info .wallet-value,
.hold-section.wallet-bal-info .wallet-value {
    font-weight: 700;
}

.wallet-item.hold-section.wallet-bal-info {
    padding: 4px 12px !important;
    border-radius: 6px;
    background: #07d03526 !important;
    color: #2c804a;
}

.main-content-data {
    padding: 0px 32px 68px 32px;
    margin-top: 48px;
}

.logout-btn {
    margin-top: 120px;
}

.header-menu-inner {
    display: flex;
    align-items: center;
    column-gap: 14px;
}

.total-amount {
    border: none;
    background: transparent;
    align-items: center;
    display: flex;
    margin-top: 10px;
    background: #8584ae1f;
    border-radius: 4px;
    padding: 7px 15px;
    border: 1px solid #00000021;
    justify-content: space-between;
}

.total-amount h4 {
    color: #1B1B1B;
    text-align: right;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.inner-card-details .wallet-title {
    padding: 9px 25px;
    border-bottom: 1px solid #0000005e;
    border-radius: 10px 10px 0px 0px;
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    justify-content: space-between;
}

.inner-card-details .wallet-title h2 {
    font-size: 21px;
}

.inner-card-details .wallet-title i {
    padding: 0px 4px;
    font-size: 33px;
    line-height: normal;
    width: 44px;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 44px;
    border-radius: 50%;
}

.paying-inner-item.paying-info-success .wallet-title i {
    color: #009025;
    background: #c3f2d5;
}

.paying-inner-item.paying-info-success {
    background: #e8fff5;
}

.paying-inner-item.paying-info-failed .wallet-title i {
    color: #dc3543;
    background: #ffc5cb;
}

.paying-inner-item.paying-info-failed {
    background: #ffd0d575;
}

.paying-inner-item.paying-info-pending .wallet-title i {
    color: #ffc107;
    background: #ffefbe;
}

.paying-inner-item.paying-info-pending {
    background: #fffae9;
}

.paying-inner-item.paying-info-initialized .wallet-title i {
    color: var(--primaryColor);
    background: #cccbedb5;
}

.paying-inner-item.paying-info-initialized .wallet-title h2 {
    color: var(--primaryColor);
}

.paying-inner-item.paying-info-initialized {
    background: #f0efff;
}

.inner-card-details .total-amount {
    border: none;
    background: transparent;
    margin: 0;
    padding: 25px 26px;
}

.inner-card-details .paying-inner-item {
    padding: 0px;
}

.row-red {
    background: #f6dada !important;
}

.row-orange {
    background: #f4d2a8 !important;
}

.amount-debit {
    color: #e53935;
    font-weight: 600;
}

.amount-credit {
    color: #2e7d32;
    font-weight: 600;
}

.status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 6px;
    display: inline-block;
    font-weight: 600;
}

.load-more .small-btn {
    padding: 7px 21px;
}

.status.success {
    background: #28a745;
    color: #fff;
    margin-bottom: 0;
    padding: 4px 10px;
}

.inner-title h2 {
    color: #1B1B1B;
    font-size: 24px;
    font-style: normal;
    border-bottom: 2px solid var(--primaryColor);
    padding-bottom: 10px;
    font-weight: 500;
    width: fit-content;
    line-height: normal;
}

.details-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0px -10px;
    row-gap: 20px;
}

.account-info-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ebf1ea;
    padding: 7px 10px;
    border: 1px solid #b7cdb5;
    width: fit-content;
    border-radius: 7px;
}

.select-data-info {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
}

.account-user-profile {
    width: 36px;
    height: 35px;
    border-radius: 50%;
    background: #53853f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid;
}

.account-details {
    display: flex;
    text-align: left;
    flex-direction: column;
}

.notification-wrapper a {
    color: var(--primaryColor);
}

.account-name {
    font-size: 16px;
    font-weight: 600;
    color: #070707;
    margin: 0;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}

.account-id {
    font-size: 14px;
    color: #3e3e3e;
    margin: 2px 0 0 0;
}

.filter-actions .small-btn {
    padding: 11px 20px;
    font-size: 16px;
}

.add-btn .small-btn {
    padding: 7px 15px;
}

.inner-title {
    margin-bottom: 19px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.paying-inner-item {
    padding: 20px;
    width: calc(23.33% - -5px);
    margin: 0px 8px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

.wallet-title {
    text-align: left;
    padding-bottom: 13px;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--primaryColor);
}

.form-group.btn-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: left;
    align-items: end;
}

.btn-group .action-icon {
    border: none;
    padding: 10px 14px;
    height: 46px;
    font-size: 21px;
}

.balance-btn .small-btn-bg {
    width: 100%;
}

.coin-staking {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
    padding: 20px 0px;
}

.coin-staking-data {
    width: calc(60% - 20px);
    margin: 0px 10px;
    display: flex;
    row-gap: 55px;
    flex-direction: column;
    padding: 20px 10px;
}

.coin-staking-remaining {
    width: calc(25% - 20px);
    text-align: center;
}

.coin-staking-img {
    text-align: center;
    border-right: 1px solid var(--primaryColor);
    width: calc(15% - 20px);
}

.coin-staking-img p {
    margin-top: 11px;
}

.details-row-info {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    align-items: center;
}

.coin-staking-box {
    width: calc(33.33% - 20px);
    margin: 0px 10px;
}

.coin-staking-box h3 {
    color: var(--primaryColor);
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    margin-top: 7px;
}

.transaction-container {
    background: var(--bg-white);
    border: 1px solid #53843f94;
    border-radius: 18px;
    box-shadow: 0 4px 47px rgb(0 0 0 / 5%);
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-primary {
    background-color: var(--primary-purple);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 25px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.dropdown-serach-box .form-control {
    height: 42px;
}

.filter-group select,
.input-wrapper,
.date-display {
    height: 46px;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 0.9rem;
    color: var(--text-dark);
    background-color: #fff;
    display: flex;
    padding-right: 46px;
    border: 1px solid #a3a3a3;
    align-items: center;
}

.input-wrapper {
    padding: 0;
    overflow: hidden;
}

.select-static {
    background: #fcfcfc;
    border-right: 1px solid #0000003b;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.input-wrapper input {
    border: none;
    padding: 0 10px;
    outline: none;
    width: 100%;
}

.limit-filter select {
    width: 70px;
}

.date-display {
    min-width: 180px;
}

.btn-clear {
    background: none;
    border: none;
    color: var(--primary-purple);
    font-weight: 700;
    cursor: pointer;
    padding-bottom: 10px;
}

.btn-clear:hover {
    text-decoration: underline;
}

.dash-wallet-card-img {
    width: calc(33.33% - 20px);
    margin: 0px 10px;
}

.dash-wallet-card-img img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.20);
}

.wallet-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.dropdown-serach-box {
    padding: 10px 13px;
}

.wallet-label {
    font-weight: 600;
}

.balance-section {
    color: var(--primaryColor);
    padding-right: 20px;
}

.divider {
    width: 1px;
    height: 30px;
    background-color: var(--border-color);
    margin-right: 20px;
}

.hold-section {
    color: var(--orange-main);
}

.paying-inner-card .inner-details {
    margin-bottom: 0px;
}

.wallet-container {
    background-color: var(--bg-white);
    padding: 15px 25px;
    border-radius: 12px;
    border-left: 8px solid #53843f;
    display: flex;
    margin-bottom: 28px;
    justify-content: end;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.table-responsive table {
    border-collapse: separate;
    border-spacing: 0 15px;
    font-family: 'poppins';
    width: 100%;
}

.heading-filter {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 16px;
    row-gap: 20px;
    align-items: end;
}

.filter-main {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    flex: 1;
    justify-content: end;
    row-gap: 15px;
    column-gap: 17px;
}

.filter-main .select-box {
    max-width: 175px;
    width: 100% !important;
}

.input-group.input-daterange {
    flex-wrap: nowrap;
    width: auto;
}

.table-responsive table tr th {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background-color: #fff;
    color: #505050;
    padding: 12px 20px;
}

.table-responsive table tr :is(th:first-child) {
    border-left: 1px solid var(--primaryColor);
    border-radius: 10px 0px 0px 10px;
}

.table-responsive table tr :is(td:first-child, th:first-child) {
    border-radius: 10px 0px 0px 10px;
}

.table-responsive tr :is(th, td) {
    white-space: nowrap;
    overflow: hidden;
}

.table-responsive table thead {
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

.table-responsive table tr {
    border-radius: 10px;
    background: #fff;
}

.table-responsive table tr:nth-child(odd) {
    background-color: #E9EDF3;
}

.table-responsive table tr:nth-child(even) {
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20);
}

.table-responsive tbody tr td {
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #505050;
    padding: 12px 20px;
}

.table-responsive table tr :is(th) {
    border-top: 1px solid var(--primaryColor);
    border-bottom: 1px solid var(--primaryColor);
}

.table-responsive table tr :is(th:last-child) {
    border-right: 1px solid var(--primaryColor);
}

.table-responsive table tr :is(td:last-child, th:last-child) {
    border-radius: 0px 10px 10px 0px;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    gap: 8px;
    justify-content: center;
}

.pagination .disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.edit {
    background: #cff4fc;
    color: #055160;
}

.view {
    background: #d1e7dd !important;
    color: #006b1c !important;
    font-size: 16px;
    border: 1px solid #239d6b !important;
    font-weight: 800;
}

.edit:hover {
    color: #055160;
}

.view:hover {
    color: #0a3622;
}

.block-user {
    background: #f8d7da !important;
    color: #972632 !important;
    font-size: 16px;
    border: 1px solid #5a0e1ccf !important;
}

.reset-pass {
    background: #cfe2ff !important;
    color: #052c65 !important;
    border: 1px solid #052c60 !important;
}

.reset-mpin {
    background: #fff3cd !important;
    color: #664d03 !important;
    border: 1px solid #664d03 !important;
}

.pagination a {
    display: flex;
    width: 38px;
    color: #fff;
    height: 38px;
    padding: 5px 4px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-size: 16px;
    border: 1px solid #6360c8b3;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: #404040;
}

.dt-paging.paging_full_numbers {
    text-align: end;
}

.filter-banner {
    position: relative;
    width: 100%;
    min-height: 87px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px 22px 0 18px;
    box-sizing: border-box;
    overflow: hidden;
    background: radial-gradient(circle at 72% 0%, rgb(100 154 87 / 18%) 0, rgba(21, 157, 105, 0) 32%), linear-gradient(105deg, #52864057 0%, #81bb6b5e 48%, #53843e5c 100%);
    border: 1px solid rgba(0, 255, 185, 0.12);
    border-radius: 15px 15px 0px 0px;
}

.filter-banner-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
}

.filter-icon {
    width: 46px;
    height: 45px;
    flex: 0 0 45px;
    font-weight: 300;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgb(83 132 63);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.03), 0 3px 12px rgba(0, 0, 0, 0.08);
}

.filter-icon svg {
    width: 18px;
    height: 18px;
}

.filter-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.filter-text h2 {
    margin: 0 0 2px;
    color: #000000;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.1px;
}

.filter-text p {
    margin: 0;
    color: rgb(0 0 0 / 82%);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.filter-graphic {
    position: absolute;
    right: 21px;
    top: 5px;
    width: 117px;
    pointer-events: none;
}

.export-excel {
    text-align: end;
    position: absolute;
    top: 15px;
    right: 9px;
    z-index: 99;
}

.export-excel .small-btn {
    margin-right: 15px;
}

button.dt-paging-button.current {
    background: var(--primaryColor) !important;
    color: #fff !important;
}

select, select option {
    cursor: pointer;
}

.form-control::placeholder {
    font-weight: 300;
}

.dt-length {
    margin-bottom: 17px;
    display: flex;
    justify-content: left;
    gap: 8px;
    align-items: center;
}

.transaction-time {
    color: #8F8F8F;
}

.active-status p {
    color: #2BB32A;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.status-label p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
}

.progress-status p {
    color: #FC952C;
}

.rejected-status p {
    color: #E32323;
}

.action-icon {
    padding: 2px 5px;
    margin-right: 6px;
    height: 25px;
    font-weight: bolder;
    font-size: 16px;
    color: #53843f;
    align-items: center;
    border: 1px solid #53843f;
    background: #6360c81c;
    justify-content: center;
    display: inline-flex;
    border-radius: 3px;
}

.rejected {
    background-color: #f2485b;
    color: #fff;
    margin-bottom: 0px;
}

.details-btn {
    color: var(--primaryColor);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

.pagination :is(a.active, a:hover) {
    background-color: var(--primaryColor);
    color: #fff;
}

.response-data-info {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

span.response-text {
    background: #f7d9da;
    padding: 5px 7px;
    color: #ed0000;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
}

.respons-details-box p {
    line-height: 32px;
    font-weight: 600;
    color: #505050ed;
}

.respons-details-box .text-primary {
    color: var(--primaryColor) !important;
}

.datepicker {
    border-radius: 4px;
    direction: ltr;
    user-select: none;
}

.datepicker .day {
    border-radius: 4px;
}

.datepicker-dropdown {
    top: 0;
    left: 0;
    padding: 5px;
}

.datepicker-dropdown:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid var(--primaryColor);
    border-top: 0;
    position: absolute;
}

.datepicker-dropdown:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-top: 0;
    position: absolute;
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
    color: #fff;
    background-color: var(--primaryColor);
}

.datepicker-dropdown.datepicker table tr td.today,
.datepicker-dropdown.datepicker table tr td.today.disabled,
.datepicker-dropdown.datepicker table tr td.today.disabled:hover,
.datepicker-dropdown.datepicker table tr td.today:hover {
    background-color: var(--primaryColor);
    background-image: unset;
    color: #fff;
}

.datepicker-dropdown.datepicker-orient-left:before {
    left: 6px;
}

.datepicker-dropdown.datepicker-orient-left:after {
    left: 7px;
}

.datepicker-dropdown.datepicker-orient-right:before {
    right: 6px;
}

.datepicker-dropdown.datepicker-orient-right:after {
    right: 7px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
    top: -7px;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
    top: -6px;
}

.datepicker-dropdown.datepicker-orient-top:before {
    bottom: -7px;
    border-bottom: 0;
    border-top: 7px solid red;
}

.datepicker-dropdown.datepicker-orient-top:after {
    bottom: -6px;
    border-bottom: 0;
    border-top: 6px solid red;
}

.datepicker table {
    margin: 0;
    user-select: none;
}

.datepicker td {
    background-color: #f2f6ff;
}

.datepicker td, .datepicker th {
    text-align: center;
    width: 30px;
    height: 30px;
    border: none;
    padding: 8px;
    font-size: 15px;
}

.datepicker.datepicker-dropdown table tr td.active.active {
    background-color: var(--primaryColor);
    background-image: unset;
    color: #fff;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
    cursor: pointer;
}

.datepicker .prev .disabled,
.datepicker .next .disabled {
    visibility: hidden;
}

.datepicker .range-start.range-end {
    background-image: none;
}

.datepicker .range {
    background: #d5e9f7;
}

.datepicker .day:hover,
.datepicker .month:hover,
.datepicker .year:hover,
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover {
    background-color: var(--primaryColor);
    color: white;
    border-radius: 4px;
}

.datepicker .datepicker-switch {
    background-color: var(--primaryColor);
    color: white;
}

.status-label.active-status {
    display: flex;
    gap: 20px;
}

.datepicker-months,
.datepicker-years {
    width: 213px;
}

.datepicker-months td,
.datepicker-years td {
    width: auto;
    height: auto;
}

.datepicker-months .month,
.datepicker-years .year {
    color: #fff;
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    float: left;
    display: block;
    width: 23%;
    height: 46px;
    line-height: 46px;
    margin: 1%;
    cursor: pointer;
    border-radius: 4px;
}

.day.active,
.start-date-active {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.custom-list-dropdown i {
    position: absolute;
    right: 15px;
    top: 13px;
    color: #505050;
    font-size: 15px;
}

.from-input-date label.to-input-date label {
    color: #505050;
    font-size: 15px;
    margin-bottom: 3px;
}

.search-btn,
.transaction-head-btn {
    display: flex;
    column-gap: 17px;
}

.from-input-date .form-control,
.to-input-date .form-control {
    color: #505050;
}

.account-successfully.notic-info {
    background: #fff2c7ad;
    padding: 13px 13px;
}

.account-successfully.notic-info p b {
    color: #1f1f1f !important;
    line-height: 26px;
    font-weight: 600;
}

.account-successfully.notic-info .text-success {
    color: #947313 !important;
}

.reset-mpin-wrapper .loading i {
    font-size: 13px;
    line-height: normal;
}

.btn-close {
    width: 0px;
    height: 0px;
    padding: 16px !important;
    border-radius: 50%;
    position: absolute;
    top: -32px;
    right: -31px;
    justify-content: center;
    opacity: 1;
    font-size: 24px;
    color: #fff;
    border: 1px solid #ffffff96 !important;
    align-items: center;
    display: flex;
    background-color: #6360c8;
    background-image: none;
}

.btn-close:focus {
    box-shadow: none;
}

.btn-close:hover {
    color: #fff;
    opacity: 1;
}

.modal-header {
    border-bottom: 1px solid var(--primaryColor);
    padding: 15px 30px;
    padding-top: 27px;
}

.modal-title {
    color: #1B1B1B;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
}

.modal .modal-dialog {
    transform: none;
    max-width: 546px;
}

.active-status {
    color: #2BB32A !important;
}

.field-data-name {
    position: absolute;
    top: 13px;
    right: 20px;
    color: #505050;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.otp-verifiction {
    position: relative;
}

.otp-btn {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primaryColor);
    outline: none;
    background-color: transparent;
    position: absolute;
    border: none;
    top: 9px;
    border-radius: 6px;
    right: 6px;
}

button[disabled] {
    opacity: .5;
    cursor: not-allowed;
    background-color: var(--primaryColor) !important;
    color: #e5e5e5 !important;
}

.custom-form-left.two-factor-info {
    width: 50%;
}

.custom-form-left {
    width: 45%;
}

.custom-right-img {
    width: 40%;
}

.custom-form-main {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.custom-form-wrapper h3 {
    font-size: 22px;
    color: #53843f;
    margin-bottom: 17px;
}

.custom-form-wrapper.custom-inner-card {
    width: 55%;
}

.custom-form-wrapper {
    max-width: 100%;
    padding: 36px;
    background: #fff;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.custom-form .form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-input {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

.form-input:focus {
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 2px rgba(106, 92, 255, 0.1);
}

.form-textarea {
    min-height: 90px !important;
    resize: none;
}

.full-width {
    flex: 1;
}

.form-submit {
    margin-top: 42px;
    text-align: center;
}

.inner-title.inner-head p {
    margin-top: 15px;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card {
    border: 1px solid #5b8c5052;
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 22px;
}

.info-row span {
    display: flex;
    align-items: center;
    gap: 16px;
}

.info-row span i {
    width: 30px;
    height: 30px;
    font-size: 19px;
    justify-content: center;
    align-items: center;
    background: #afd29766;
    border: 1px solid #6e9e5b5e;
    display: flex;
    border-radius: 5px;
    color: #54853f;
}

.info-row.kyc-info-row {
    justify-content: flex-start;
    gap: 22px;
    align-items: center;
}

.payment-grid.kyc-grid-info {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 49px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 14px;
    border-radius: 5px;
    margin-bottom: 6px;
    border: 1px solid #cfe0cf;
    background: #f8faf4;
    font-size: 17px;
}

.input-wrapper i {
    font-size: 23px;
    padding-left: 10px;
}

.account-info-card i {
    font-size: 22px;
}

.stats-wrapper {
    width: 100%;
    padding: 31px 0px 0px;
}

.ri-download-cloud-2-line.menu-rotate {
    transform: rotate(178deg);
}

.stats-container {
    width: 100%;
    min-height: 78px;
    padding: 10px;
    background: #fff;
    display: flex;
    justify-content: end;
    gap: 11px;
    border: 1px solid #53843f57;
    border-radius: 9px;
    box-shadow: 0 2px 10px rgba(20, 30, 40, 0.04);
}

.stats-card {
    position: relative;
    min-height: 58px;
    display: flex;
    width: 24.33%;
    align-items: center;
    padding: 18px 16px;
    overflow: hidden;
    border-radius: 7px;
}

.stats-card.total-volume {
    border: 1px solid #8ad1ab;
    background: linear-gradient(90deg, #fbfffc 0%, #d9f4e0 100%);
}

.stats-card.processing-charge {
    border: 1px solid #f8c56c;
    background: linear-gradient(90deg, #fffdf8 0%, #fae9a7 100%);
}

.stats-card.successful-transactions {
    border: 1px solid #dcecf0;
    background: linear-gradient(90deg, #f9fdfd 0%, #ffffff 100%);
}

.stats-card.failed-transactions {
    border: 1px solid #f5dfe2;
    background: linear-gradient(90deg, #fffafb 0%, #fa98ac8f 100%);
}

.stats-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 50%;
}

.stats-icon svg {
    width: 28px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.total-volume .stats-icon {
    color: #ffffff;
    background: #269451;
}

.processing-charge .stats-icon {
    color: #ffffff;
    background: #ffb52d;
}

.successful-transactions .stats-icon {
    color: #ffffff;
    background: #20a66b;
}

.failed-transactions .stats-icon {
    color: #ffffff;
    background: #f2485b;
}

.stats-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 95px;
}

.stats-label {
    margin-bottom: 7px;
    color: #252b31;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
}

.stats-value {
    color: #20252a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

.stats-graph {
    position: absolute;
    right: -16px;
    bottom: 6px;
    width: 194px;
    transform: rotate(-14deg);
    height: 68px;
    opacity: 0.95;
    z-index: 1;
}

.stats-graph svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.stats-graph-path {
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.total-volume .stats-graph-path {
    stroke: #86cda4;
}

.processing-charge .stats-graph-path {
    stroke: #f4c75c;
}

.successful-transactions .stats-graph-path {
    stroke: #65c7a1;
}

.failed-transactions .stats-graph-path {
    stroke: #ff8290;
}

span.badge.text-warning {
    background: #fff0c0;
    color: #a17800 !important;
    font-weight: 600;
}

.badge {
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 12px;
    background-color: #c3f2d5;
}

.green {
    color: #1aa053;
}

.red {
    color: #e63946;
}

.badge.green {
    background: #d8f5e4;
    color: #0f8c46;
}

.info-row span:last-child {
    color: #000;
    font-weight: 500;
}

.badge.red {
    background: #ffd9d9;
    color: #e63946 !important;
}

.wallet-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.wallet-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.amount {
    font-weight: bold;
    font-size: 16px;
    color: #1aa053;
}

.btn.green {
    background: #2ecc71;
    color: #fff;
}

.btn.red {
    background: #e63946;
    color: #fff;
}

.btn.blue {
    background: var(--primaryColor);
    color: #fff;
}

.payment-grid {
    display: grid;
}

.tab-header {
    margin-bottom: 10px;
}

.tab-header .tab {
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    background: #ddd;
    cursor: pointer;
    transition: 0.5s;
}

.tab-header .tab:hover,
.tab-header .tab.active {
    background: var(--primaryColor);
    color: #fff;
}

.transaction-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.transaction-table th,
.transaction-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.load-more {
    text-align: center;
    margin-top: 15px;
}

.user-details-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

.detail-row label {
    font-weight: 600;
    color: #555;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: none;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: none;
}

.error {
    color: #ee0003 !important;
    display: block;
    font-weight: 400 !important;
    font-size: 15px !important;
    padding-left: 2px;
    margin-top: 0px;
    margin-bottom: 0px !important;
}

.contact-form .form-group {
    margin-top: 3px;
}

.detail-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.copy-btn {
    border: none;
    background: transparent;
    color: #53843f;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.copy-btn:hover {
    color: #000;
}

.copy-all-btn {
    padding: 8px 25px;
}

.dropdown-menu.user-profile-menu .account-info-card {
    padding: 18px 14px;
    width: 100%;
    background: transparent;
    border-radius: 0px;
    border: none;
    justify-content: left;
    text-align: center;
}

.dropdown-menu.user-profile-menu {
    max-width: 255px;
    width: 100%;
    right: 47px;
}

.select2-container-box {
    width: 300px;
}

.select-label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}

.select2-container--default .select2-selection--single {
    height: 46px !important;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
    right: 1px;
    width: 33px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primaryColor) !important;
    color: white;
}

span#select2-5z7n-container {
    font-size: 16px !important;
    height: 46px;
    width: 100%;
    padding: 9px 22px;
    color: #000;
    border-radius: 5px;
    border: 1px solid var(--primaryColor);
    position: relative;
    background: #FFF;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 9px 13px;
}

.select2-container--default .select2-selection__rendered {
    line-height: 38px;
    padding-left: 10px;
}

.select2-container--default .select2-selection__arrow {
    height: 40px;
}

.select2-search--dropdown .select2-search__field {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.small-btn.small-btn-bg {
    background: #f4fbf3;
    color: #53843f;
}

.submit-btn {
    padding: 10px 24px;
    background: #53843f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.close-sidebar,
.menu-bar {
    font-size: 24px;
    cursor: pointer;
    display: none;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
    z-index: 900;
    display: none;
}

.mob-logo {
    display: none;
}

.header-right-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.loading i {
    color: #fff;
    padding-left: 0px !important;
}

.ri-loader-line {
    animation: 2s linear infinite ri-spin;
    display: inline-block;
    font-size: 16px;
    color: #ffffff;
}

.form-section-title {
    margin-top: 51px;
    border-bottom: 1px solid #00000059;
    margin-bottom: 7px;
    padding-bottom: 13px;
}

@keyframes ri-spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

.main-body-info.main-body-bg {
    background-color: transparent;
}

.chat-ticket-info {
    display: flex;
    gap: 8px;
}

.text-pending {
    color: #664d03 !important;
}

.text-success {
    color: #198754 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.support-main-info {
    display: flex;
    gap: 69px;
}

.main-title h2 {
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 23px;
}

.support-left-box {
    width: 30%;
}

.support-ticket-data {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.chat-info-text {
    color: var(--primaryColor);
    font-weight: 800;
    cursor: pointer;
    border-bottom: 1px dashed;
}

.chat-info-text:hover {
    color: #000;
}

.support-create-tickets {
    width: 66%;
}

.ticket-history-info {
    margin-top: 35px;
}

.form-select:focus {
    box-shadow: none;
    border: 1px solid var(--primaryColor);
}

.tickets-inner {
    display: flex;
    gap: 22px;
    position: relative;
    background: #FFF;
    overflow: hidden;
    border-radius: 10px;
    padding: 34px 20px;
    box-shadow: 0px 1px 10px 3px #00000014;
    align-items: center;
}

.ticket-invoice {
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #3e3e3e;
    background-color: #6a6a6a1f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tickets-inner h4,
.tickets-inner h3 {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #1B1B1B;
    margin-bottom: 10px;
}

.tickets-inner h3 {
    margin-bottom: 0px;
    font-size: 25px;
}

.wallet-bal-mob {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: end;
    margin-top: 19px;
    padding-right: 22px;
}

.card-data-box input[type="file"] {
    width: 100%;
    cursor: pointer;
    position: relative;
    z-index: 0;
    top: -2px;
}

.form-select {
    font-size: 16px !important;
    height: 46px;
    width: 100%;
    padding: 9px 22px;
    color: #000;
    border-radius: 5px;
    border: 1px solid var(--primaryColor);
}

.open-tickets h4,
.open-tickets h3 {
    color: #155724;
}

.close-tickets h4,
.close-tickets h3 {
    color: #721c24;
}

.ticket-btn {
    margin-top: 18px;
}

.file-attach i {
    position: absolute;
    right: 14px;
    top: 11px;
    font-size: 25px;
}

textarea.form-control {
    min-height: 100px;
}

.tickets-inner::after {
    width: 150px;
    height: 140px;
    background-color: #6360c894;
    position: absolute;
    right: -46px;
    top: -72px;
    border-radius: 20%;
    content: '';
}

.card-data-box {
    background: #FFF;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 1px 10px 3px #00000014;
}

.chat-history-modal {
    max-width: 649px;
    width: 100% !important;
    box-shadow: 5px 8px 47px #0000009c;
}

.chat-history-body ul {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.user {
    max-width: 70%;
    margin-right: 0;
    margin-left: auto;
    float: right;
    display: inline-block;
}

.ticket-num {
    color: #1B1B1B;
    text-align: right;
    margin-bottom: 8px;
    font-size: 14px;
    font-style: normal;
    display: flex;
    justify-content: end;
    font-weight: 600;
}

.user-info {
    background: #ffffff;
    border: 1px solid #53843fd1;
}

.message {
    border-radius: 10px 10px 0px 10px;
    padding: 13px;
}

.user .message p {
    color: #000;
    font-size: 15px;
}

.message p {
    margin: 0;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.message.user-info a {
    color: var(--primaryColor);
    font-size: 12px;
    display: flex;
    margin-bottom: 4px;
    text-decoration: underline;
    margin-top: 8px;
}

.user .message-data-time {
    text-align: end;
    font-size: 11px !important;
    color: #565252 !important;
    margin-top: 18px;
}

.admin {
    margin-right: auto;
    margin-left: 0;
    float: left;
    max-width: 70%;
    display: inline-block;
}

.admin .ticket-num {
    justify-content: start;
}

.admin .message {
    flex-direction: row-reverse;
    justify-content: start;
}

.message.admin-info a {
    font-size: 13px;
    display: flex;
    margin-bottom: 1px;
    color: var(--primaryColor);
    text-decoration: underline;
    margin-top: 6px;
}

.admin .message-data-time {
    text-align: left;
    color: #3b3a3a !important;
    margin-top: 16px;
    font-size: 11px !important;
}

.modal-backdrop {
    z-index: 0 !important;
}

.admin .message p {
    color: #292929;
    text-align: left;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
}

.admin-info {
    background: #dae2d8;
    border-radius: 0px 10px 10px 10px;
    border: 1px solid var(--primaryColor);
}

.offcanvas-end {
    background: #f4f4f4;
}

.offcanvas-header {
    background: var(--primarybg);
}

.chat-history-modal .offcanvas-body {
    max-height: calc(100% - 145px);
    overflow-x: auto;
}

.chat-msg-menu {
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0px;
    padding: 20px 8px;
    background: #53843f33;
    border-top: 1px solid #80a376;
    margin: auto;
    max-width: 649px;
}

.mess-text-box {
    width: 100%;
    column-gap: 15px;
    display: flex;
    align-items: baseline;
}

.message-send-input {
    margin: 0;
    width: 100%;
    position: relative;
}

.message-handle {
    display: flex;
    gap: 12px;
}

.file-upload-message {
    position: relative;
    cursor: pointer;
    padding: 3px 10px;
    height: 100%;
    border-radius: 5px;
    background-color: var(--primarybg);
    border: 1px solid var(--primarybg);
}

.file-upload-message label {
    cursor: pointer;
}

.message-handle i {
    font-size: 24px;
    cursor: pointer;
    color: #fffffff2;
}

.file-upload-message input {
    display: none;
}

.send-message {
    cursor: pointer;
    padding: 3px 10px;
    height: 100%;
    display: flex;
    border-radius: 5px;
    background-color: var(--primarybg);
    border: 1px solid var(--primarybg);
}

.wallet-main-vard {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.balance-card {
    max-width: 32%;
    border-radius: 30px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.card-header {
    padding: 30px;
    position: relative;
    height: 180px;
    display: flex;
    background-image: url('../img/wave-shape.svg');
    background-position: initial;
    background-size: cover;
    color: #fdfdfd;
}

.wallet-theme {
    background: linear-gradient(135deg, #7c4dff, #b388ff);
}

.collection-theme {
    background: linear-gradient(135deg, #1e88e5, #4fc3f7);
}

.app-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.app-icon img {
    width: 30px;
}

.card-title i {
    width: 47px;
    height: 47px;
    font-size: 27px;
    justify-content: center;
    align-items: center;
    background: #afd29766;
    border: 1px solid #6e9e5b;
    display: flex;
    border-radius: 50%;
    color: #54853f;
}

.card-title p {
    margin-top: 4px;
    font-size: 15px;
}

.card-title div {
    display: flex;
    gap: 13px;
    align-items: center;
    justify-content: space-between;
}

.card-title h3 {
    font-size: 22px;
    font-weight: 600;
}

.card-title {
    margin-bottom: 11px;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    text-transform: capitalize;
}

.balance-card .card-title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 0px;
}

.card-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 5px;
    color: #ffffffdb;
}

.floating-3d-img {
    position: absolute;
    right: 20px;
    top: 30px;
    width: 130px;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

.card-body {
    padding: 30px;
    margin-top: 30px;
    background: white;
    border-radius: 30px 30px 0 0;
}

.balance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.item-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-box {
    width: 40px;
    height: 40px;
    background: #6a5acd1c;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
    color: var(--primaryColor);
}

.label {
    text-transform: capitalize;
    color: #666;
    font-weight: 500;
}

.total-row {
    border-bottom: none;
    margin-bottom: 10px;
}

.btn-transfer {
    width: 100%;
    padding: 18px;
    border: none;
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.wallet-theme .btn-transfer {
    background: linear-gradient(135deg, #7c4dff, #b388ff);
}

.collection-theme .btn-transfer {
    background: linear-gradient(135deg, #1e88e5, #4fc3f7);
}

.btn-transfer:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

th.dt-orderable-none.dt-type-numeric {
    text-align: left !important;
}

.amount-text {
    color: #626262;
    font-size: 12px;
}

.auth-qr-box {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 31px;
    margin-bottom: 8px;
}

.auth-qr-box h6 {
    text-align: center;
}

.auth-qr-info svg {
    border: 3px solid #345f33a6;
    padding: 13px;
    border-radius: 7px;
    box-shadow: 0px 2px 6px 4px #0000001c;
    background: #ffffff;
}

.auth-info-title h5 {
    margin-bottom: 6px;
    font-size: 16px;
}

.auth-info-title p {
    font-size: 14px;
}

.qr-info-note {
    background: #e4f3da91;
    padding: 17px 18px;
    color: #000 !important;
    border: 1px solid #91ab8e;
    border-radius: 6px;
}

.summary-stats {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 320px;
    height: 54px;
    position: absolute;
    top: 14px;
    left: 353px;
    padding: 10px 20px;
}

.alert.alert-danger {
    border-radius: 0px;
    margin-bottom: 1px;
    padding: 6px 10px;
}

.offcanvas-header h5 {
    color: #fff;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--primary);
    color: #fff;
    padding: .75rem 1.25rem;
    z-index: 1000;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
}

.container-narrow {
    max-width: 800px;
}

.section {
    padding: 110px 0;
    position: relative;
}

@media (max-width:768px) {
    .section { padding: 72px 0; }
}

.eyebrow {
    display: inline-block;
    font-family: "Newsreader", serif;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--primaryColor);
    background: rgb(83 132 63 / 16%);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
}

.why-choose-us img {
    margin-top: -244px;
}

.section-head {
    max-width: 640px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.section-head h2 {
    font-size: 37px;
    margin-bottom: 8px;
}

.section-head h2 span {
    color: var(--primaryColor);
}

.section-sub {
    font-size: 1.05rem;
}

.btn {
    display: inline-flex;
    padding: 8px 25px;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    border-radius: 7px;
    color: var(--whiteColor);
    border: 1px solid var(--primaryColor);
    transition: all 0.3s ease-in-out;
}

.btn svg {
    transition: transform .25s var(--ease);
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    border-color: var(--primarybg);
    color: var(--primarybg);
    padding: 8px 25px;
}

.btn-outline:hover {
    background-color: var(--primarybg);
    border-color: rgb(99 96 200);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    color: var(--primaryColor);
    padding: 8px 25px;
    border-radius: 7px;
}

.form-actions .small-btn {
    padding: 9px 43px;
    font-size: 20px;
}

.glass {
    background: #fff;
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.rail-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6000px;
    z-index: 0;
    pointer-events: none;
    opacity: .35;
}

.rail-line path {
    fill: none;
    stroke: var(--primaryColor);
    stroke-width: 1.4;
    stroke-dasharray: 6 10;
    stroke-linecap: round;
}

@media (max-width:900px) {
    .rail-line { display: none; }
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
}

.navbar.scrolled {
    background: var(--surface-glass);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--shadow-sm);
    height: 66px;
    border-bottom-color: var(--border);
}

a.brand img {
    width: 187px;
}

.nav-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    justify-content: space-between;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.25rem;
}

ul.small.text-muted.qr-info-note li {
    display: flex;
    gap: 8px;
    margin-bottom: 3px;
}

.brand-name em {
    font-style: normal;
    color: var(--primary);
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    font-weight: 500;
    font-size: .94rem;
    color: var(--text-muted);
    position: relative;
    padding: 4px 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width .25s var(--ease);
}

.nav-menu a:hover {
    color: var(--text);
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color .2s, border-color .2s;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.icon-moon {
    display: none;
}

[data-theme="dark"] .icon-sun {
    display: none;
}

[data-theme="dark"] .icon-moon {
    display: block;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}

.hero {
    position: relative;
    padding: calc(var(--nav-h) + 64px) 0 100px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--bg);
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(37, 99, 235, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 50% 0%, black 10%, transparent 70%);
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    animation: float 16s ease-in-out infinite;
}

.blob-1 {
    width: 520px;
    height: 520px;
    background: #52853f57;
    top: -180px;
    left: -140px;
}

.blob-2 {
    width: 460px;
    height: 460px;
    background: #52853f57;
    top: 60px;
    right: -160px;
    animation-delay: -5s;
}

.blob-3 {
    width: 360px;
    height: 360px;
    background: #ffffff;
    bottom: -140px;
    left: 35%;
    animation-delay: -10s;
    opacity: .35;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -30px) scale(1.08); }
}

[data-theme="dark"] .blob {
    opacity: .28;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3rem;
    align-items: center;
}

.security-features {
    width: 100%;
    max-width: 610px;
    min-height: 78px;
    padding: 10px 20px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e3e7e2;
    border-radius: 15px;
    box-shadow: 0 2px 18px rgb(0 0 0 / 14%);
    box-sizing: border-box;
}

.security-feature {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.security-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4d9d4a;
}

.security-icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

.security-content {
    min-width: 0;
}

.security-content h3 {
    margin: 0 0 3px;
    color: #292929;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.security-content p {
    margin: 0;
    color: #777b7d;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}

.security-divider {
    width: 1px;
    height: 38px;
    flex: 0 0 1px;
    margin: 0 16px;
    background: #e3e3e3;
}

.small-btn.small-btn-info {
    background: transparent;
    color: #53843f;
}

.hero-copy h1 span {
    color: var(--primarybg);
}

.hero-copy h1 {
    font-size: 44px;
    margin-bottom: 11px;
    font-weight: 700;
}

.hero-sub {
    font-size: 1.12rem;
    max-width: 520px;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2rem 0 3.25rem;
}

.hero-trustline {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-trustline p {
    margin: 0;
    font-size: .92rem;
}

.avatars {
    display: flex;
}

.avatars span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-left: -10px;
    border: 2px solid var(--bg);
    background: var(--primarybg);
}

.avatars span:first-child {
    margin-left: 0;
}

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 560px;
    overflow: hidden;
}

.dashboard-card {
    border-radius: var(--radius-lg);
    padding: 1.4rem;
    box-shadow: var(--shadow-lg);
}

.dashboard-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1.1rem;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red { background: #F87171; }
.dot.yellow { background: #FBBF24; }
.dot.green { background: #34D399; }

.dashboard-title {
    margin-left: .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.dash-stat {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.dash-label {
    font-size: .78rem;
    color: var(--text-soft);
}

.dash-value {
    font-size: 1.7rem;
    font-weight: 700;
}

.dash-delta {
    font-size: .8rem;
    font-weight: 600;
}

.dash-delta.up {
    color: #10B981;
}

.chart-wrap {
    margin-bottom: 1.1rem;
}

.chart-svg {
    width: 100%;
    height: 90px;
    overflow: visible;
}

.chart-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 74px;
    z-index: -1;
}

.chart-line svg {
    width: 100%;
    height: 100%;
    opacity: 0.3;
    z-index: -1;
}

.chart-fill {
    fill: rgba(37, 99, 235, 0.12);
    stroke: none;
}

.dash-tx {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.dash-tx li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text-muted);
}

.dash-tx li b {
    margin-left: auto;
    color: var(--text);
}

.tx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tx-dot.upi { background: var(--primary); }
.tx-dot.card { background: var(--secondary); }
.tx-dot.intl { background: var(--accent); }

.float-chip {
    position: absolute;
    padding: .6rem 1rem;
    border-radius: var(--radius-pill);
    font-size: .8rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    animation: bob 5s ease-in-out infinite;
}

.chip-1 {
    top: -18px;
    right: 10%;
    animation-delay: -1.5s;
}

.chip-2 {
    bottom: 14%;
    left: -30px;
    animation-delay: -3s;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.payment-swiper,
.payment-swiper .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.payment-swiper .swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.payment-swiper .swiper-pagination {
    bottom: 5px;
}

.payment-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    opacity: .35;
    transition: all .3s ease;
}

.payment-swiper .swiper-pagination-bullet-active {
    width: 28px;
    border-radius: 20px;
    opacity: 1;
}

.scroll-cue {
    position: absolute;
    bottom: -33px;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-cue span {
    display: block;
    width: 22px;
    height: 36px;
    border: 2px solid rgb(83 132 63);
    border-radius: 14px;
    position: relative;
}

.scroll-cue span::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 4px;
    height: 8px;
    background: var(--primaryColor);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollDot 1.8s ease-in-out infinite;
}

.feature-section {
    width: 100%;
    background: #53843f26;
    padding: 25px 35px;
}

.feature-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.feature-image {
    width: 85px;
    height: 85px;
    object-fit: contain;
    flex-shrink: 0;
}

.feature-content {
    max-width: 190px;
}

.feature-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 5px;
}

.feature-description {
    font-size: 13px;
    line-height: 18px;
    color: #555;
}

@keyframes scrollDot {
    0% { opacity: 1; top: 6px; }
    100% { opacity: 0; top: 18px; }
}

.trusted {
    padding: 41px 0;
    background: #6360c8;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.trusted-label {
    text-align: center;
    font-weight: 600;
    color: #ffffff;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.logo-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.logo-track {
    display: flex;
    gap: 3.5rem;
    width: max-content;
    animation: marquee 28s linear infinite;
}

.logo-track span {
    font-weight: 600;
    font-size: 1.1rem;
    border: 1px solid #ffffffbf;
    color: #ffffff;
    opacity: .7;
    padding: 6px 15px;
    white-space: nowrap;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.card-grid {
    display: grid;
    gap: 14px;
}

.why-card p {
    font-size: 12px !important;
}

.why-card h3 {
    margin: 15px 0px 8px;
    font-size: 16px !important;
}

.services-grid {
    grid-template-columns: repeat(5, 1fr);
}

.why-grid {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 60px;
}

@media (max-width:1080px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:640px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr; }
}

.service-card,
.why-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.8rem 1.5rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.service-card:hover,
.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 1px 30px rgb(83 132 63 / 28%);
    border-color: rgb(83 132 63);
}

.service-card h3,
.why-card h3 {
    font-size: 1.05rem;
}

.service-card p,
.why-card p {
    font-size: .92rem;
    margin-bottom: 0;
}

.why-card {
    padding: 11px;
    text-align: center;
    background: #c8e1c95c;
    border: 1px solid #53843f8a;
}

.card-icon,
.card-icon.accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgb(146 142 255 / 28%);
    color: var(--primaryColor);
    margin-bottom: 1rem;
    transition: transform .3s var(--ease), background .3s;
}

.card-icon svg {
    width: 22px;
    height: 22px;
}

.service-card:hover .card-icon,
.why-card:hover .card-icon {
    transform: scale(1.1) rotate(-6deg);
}

.how-it-works-container {
    max-width: 1200px;
    margin: auto;
}

.how-it-works-top {
    text-align: center;
}

.how-it-works-label {
    color: #078b62;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.how-it-works-title {
    font-size: 46px;
    line-height: 1.1;
    font-weight: 800;
    color: #101b2d;
}

.how-it-works-title span {
    color: #078b62;
}

.how-it-works-description {
    margin-top: 15px;
    color: #536174;
    font-size: 16px;
}

.how-it-works-list {
    margin-top: 75px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    position: relative;
}

.how-it-works-list:before {
    content: "";
    position: absolute;
    top: 28px;
    left: 80px;
    right: 80px;
    height: 1px;
    background: #b8dccd;
}

.how-it-works-card {
    position: relative;
    text-align: center;
}

.hero-grid-info {
    grid-template-columns: 1fr;
}

.hero-visual-info {
    order: -1;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.how-it-works-number {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: white;
    border: 2px solid #0a9567;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: relative;
    z-index: 2;
    color: #078b62;
    font-size: 20px;
    font-weight: 700;
}

.how-it-works-card:nth-child(2) .how-it-works-number {
    border-color: #ff8a00;
    color: #ff8a00;
}

.how-it-works-card:nth-child(4) .how-it-works-number {
    border-color: #6b46db;
    color: #6b46db;
}

.how-it-works-box {
    margin-top: 25px;
    min-height: 310px;
    border-radius: 22px;
    border: 1px solid #dceee6;
    padding: 25px 20px;
    background: #ffffff;
    position: relative;
}

.how-it-works-box:after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    z-index: -1;
    width: 20px;
    height: 20px;
    background: #53843f;
    border-right: 1px solid #dceee6;
    border-bottom: 1px solid #dceee6;
    transform: translateX(-50%) rotate(45deg);
}

.how-it-works-section {
    padding-top: 9px;
}

.how-it-works-image {
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.how-it-works-image img {
    max-width: 150px;
    max-height: 130px;
}

.how-it-works-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #078b62;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    font-size: 17px;
}

.how-it-works-card:nth-child(2) .how-it-works-icon {
    background: #ff8a00;
}

.how-it-works-card:nth-child(4) .how-it-works-icon {
    background: #6b46db;
}

.how-it-works-heading {
    margin-top: 18px;
    color: #078b62;
    font-size: 16px;
    font-weight: 600;
}

.how-it-works-card:nth-child(2) .how-it-works-heading {
    color: #ff8a00;
}

.how-it-works-card:nth-child(4) .how-it-works-heading {
    color: #6b46db;
}

.how-it-works-text {
    margin-top: 10px;
    color: #4d596b;
    font-size: 14px;
    line-height: 1.6;
}

.security-section {
    width: 100%;
    padding: 40px 30px;
}

.security-container {
    max-width: 1200px;
    margin: auto;
}

.security-badge {
    width: max-content;
    margin: auto;
    padding: 8px 25px;
    border-radius: 30px;
    background: #f3f8ee;
    color: #4d8b43;
    font-size: 14px;
    font-weight: 600;
}

.security-title {
    text-align: center;
    font-size: 54px;
    margin-top: 25px;
    font-weight: 800;
}

.security-title span {
    color: #63a353;
}

.security-description {
    text-align: center;
    margin-top: 15px;
    color: #667085;
    font-size: 18px;
}

.security-cards {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.security-card {
    border: 1px solid #e5eadf;
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    background: #fff;
}

.security-feature-info.two-facter-security img {
    position: absolute;
    width: 370px;
    height: auto;
    top: 20px;
    right: 1px;
}

.security-card-icon img {
    width: 109px;
}

.security-check {
    position: absolute;
}

.security-card-title {
    margin-top: 25px;
    font-size: 17px;
    font-weight: 600;
}

.security-card-text {
    margin-top: 12px;
    font-size: 14px;
    color: #667085;
    line-height: 1.5;
}

.security-line {
    width: 45px;
    height: 2px;
    background: #65a653;
    margin: 20px auto 0;
}

.security-feature-box {
    margin-top: 40px;
    border: 1px solid #c0e295;
    border-radius: 20px;
    padding: 35px;
    background: #ebf0e6;
    display: grid;
    grid-template-columns: 1fr 1.8fr 1fr;
    gap: 30px;
}

.security-feature-info {
    padding: 10px;
    position: relative;
}

.security-number {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #ffffff;
    color: #4f8e42;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.security-feature-title {
    margin-top: -45px;
    margin-left: 65px;
    font-size: 20px;
    font-weight: 600;
}

.security-feature-line {
    width: 35px;
    height: 2px;
    background: #5fa04e;
    margin: 16px 0 25px;
}

.security-feature-text {
    color: #3a3a3b;
    line-height: 1.6;
    font-size: 15px;
}

.security-feature-image {
    margin-top: 30px;
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.stats {
    background: var(--gradient-primary);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.stats::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .25;
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .4), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, .3), transparent 40%);
}

.stats-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    gap: 2rem;
}

.stat-num {
    display: block;
    font-weight: 700;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    color: #fff;
}

.stats .stat-label {
    display: block;
    margin-top: .4rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
}

@media (max-width:900px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width:560px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.dev-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 3rem;
    align-items: center;
}

.dev-points {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1.4rem;
}

.dev-points li,
.price-features li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--text-muted);
    font-size: .95rem;
}

.dev-points li::before,
.price-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #6360c8;
    font-weight: 700;
}

.price-features li::before {
    color: var(--primaryColor);
}

.code-panel {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.code-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.code-tab {
    background: none;
    border: none;
    padding: .9rem 1.3rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text-soft);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}

.code-tab.active {
    color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.code-body {
    position: relative;
}

.copy-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: .4rem .8rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    z-index: 2;
    transition: background .2s, color .2s;
}

.copy-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.code-block {
    margin: 0;
    padding: 2.8rem 1.5rem 1.6rem;
    background: #0B1120;
    color: #D6E2FF;
    font-size: .86rem;
    overflow-x: auto;
    min-height: 220px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    line-height: 1.7;
}

.code-block code {
    font-family: inherit;
}

@media (max-width:960px) {
    .dev-grid { grid-template-columns: 1fr; }
}

.testi-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width:900px) {
    .testi-grid { grid-template-columns: 1fr; }
}

.testi-card {
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.stars {
    color: #FBBF24;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.testi-card blockquote {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: var(--text);
    font-style: italic;
}

.testi-card figcaption {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .88rem;
    color: var(--text-muted);
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
}

.pricing {
    background: var(--bg-alt);
}

.pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

.price-card {
    border-radius: var(--radius-lg);
    padding: 2.4rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.price-card:hover {
    transform: translateY(-6px);
}

.price-featured {
    border: 1.5px solid #6360c8;
    box-shadow: var(--shadow-lg);
    transform: scale(1.03);
}

.price-featured:hover {
    transform: scale(1.03) translateY(-6px);
}

.price-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .4rem 1rem;
    border-radius: var(--radius-pill);
}

.price {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: .2rem;
}

.price span {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text);
}

.price-note {
    font-size: .85rem;
    margin-bottom: 1.6rem;
}

.price-features {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

@media (max-width:900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
    .price-featured { transform: none; }
    .price-featured:hover { transform: translateY(-6px); }
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    padding: 1.2rem 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: .98rem;
    color: var(--text);
}

.hero-actions svg {
    width: 19px;
}

.faq-info {
    display: flex;
    gap: 47px;
}

.acc-trigger svg {
    flex-shrink: 0;
    transition: transform .3s var(--ease);
    color: #000;
    width: 23px;
}

.acc-item.open .acc-trigger svg {
    transform: rotate(180deg);
}

.acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
}

.acc-panel p {
    padding: 0 1.5rem 1.3rem;
    margin: 0;
    font-size: .93rem;
}

.legal-body .acc-panel {
    padding: 0 1.5rem;
}

.contact-grid {
    display: grid;
    gap: 63px;
    align-items: flex-start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 1.4rem;
    font-size: .95rem;
    color: var(--text-muted);
}

.contact-form {
    border-radius: var(--radius-lg);
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.field {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    gap: .4rem;
}

.field label {
    font-size: 16px;
    margin-bottom: 0px;
    font-weight: 600;
    color: var(--text-muted);
}

.field input,
.field textarea {
    background: var(--bg);
    border: 1.5px solid #cbcbcb;
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    height: 55px;
    font-size: .94rem;
    color: #000000;
    transition: border-color .2s, box-shadow .2s;
}

.field textarea {
    resize: vertical;
}

.support-card {
    display: flex;
    align-items: center;
    gap: 18px;
    width: fit-content;
    background: #ffffff;
    border-radius: 18px;
}

.support-card-image {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #f2f7ed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.support-card-content {
    display: flex;
    flex-direction: column;
}

.support-card-title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #14213d;
    letter-spacing: -0.4px;
    font-family: Arial, sans-serif;
}

.support-card-text {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #7d8494;
    font-family: Arial, sans-serif;
}

.support-heart {
    color: #8bc34a;
    font-size: 18px;
    margin-left: 4px;
}

.form-actions {
    display: flex;
    margin-top: 27px;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.form-status {
    font-size: .88rem;
    color: var(--primary);
    min-height: 1.2em;
    margin: 0;
}

@media (max-width:900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

.site-footer {
    background: #6f985f17;
    border-top: 1px solid var(--border);
    padding: 64px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.footer-brand p {
    font-size: .9rem;
    max-width: 280px;
    margin-top: 24px;
    margin-bottom: 23px;
}

.social-icons {
    display: flex;
    gap: .7rem;
    margin-top: 1rem;
}

.social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #b2afff36;
    border: 1px solid rgb(99 96 200 / 57%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6360c8;
    transition: color .2s, border-color .2s, transform .2s;
}

.social-icons a:hover {
    color: var(--primaryColor);
    border-color: var(--primaryColor);
    transform: translateY(-3px);
}

.footer-col h4 {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 1rem;
}

.footer-col li {
    list-style: disc;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    padding-left: 18px;
    gap: .6rem;
}

.footer-col ul a {
    font-size: .9rem;
    color: var(--text-muted);
    transition: color .2s;
}

.footer-col ul a:hover {
    color: var(--primaryColor);
}

.mini-form {
    display: flex;
    gap: .5rem;
    margin-top: .8rem;
}

.mini-form input {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid #6360c8;
    border-radius: 10px;
    padding: .6rem 1rem;
    font-size: .88rem;
    color: var(--text);
}

.btn-label svg {
    width: 32px;
    height: 26px;
}

.mini-form button {
    width: 42px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 8px;
    border: none;
    background: var(--gradient-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-bottom {
    border-top: 1px solid #b7b7b7;
    padding: 1.5rem 0;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 17px;
    color: #1e1e20;
}

@media (max-width:900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width:560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

.whatsapp-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .4);
    z-index: 400;
    transition: transform .25s var(--ease);
}

.whatsapp-fab:hover {
    transform: scale(1.08);
}

.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .3s var(--ease);
    z-index: 400;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-4px);
}

[data-reveal] {
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width:480px) {
    .hero-actions { flex-direction: row; align-items: stretch; }
    .hero { padding: calc(var(--nav-h) + 37px) 0 68px; }
    .hero-actions .btn { width: 100%; }
    .form-actions { flex-direction: column; }
    .form-actions .btn { width: 100%; }
}

.page-hero .page-updated {
    color: var(--text-soft);
    font-size: .9rem;
    margin: 0;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 1.05rem;
    margin-top: 1.6rem;
}

.legal-toc {
    border-radius: var(--radius-md);
    margin-bottom: 2.5rem;
}

.legal-toc ol {
    margin: 0;
    padding-left: 1.2rem;
    columns: 2;
    column-gap: 2rem;
}

.contact-hero-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #53843f69;
    padding-bottom: 20px;
    margin-bottom: 45px;
}

.container {
    max-width: 1200px;
    margin: auto;
}

.contact-content {
    position: relative;
    z-index: 2;
}

.contact-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 40px;
    background: #e4e4fa;
    color: var(--primarybg);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 12px 30px rgba(104, 92, 255, .12);
}

.contact-title {
    margin-top: 17px;
    font-size: 41px;
    line-height: 1.08;
    font-weight: 800;
    color: #15152d;
}

.contact-title span {
    color: var(--primarybg);
}

.contact-description {
    margin-top: 14px;
    font-size: 17px;
    line-height: 29px;
    color: #4f506d;
}

.contact-features {
    margin-top: 23px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    background: #53843f69;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 50px rgba(110, 98, 255, .08);
}

.feature-item {
    border-right: 1px solid #939393c7;
    justify-content: center;
}

.feature-item:last-child {
    border-right: none;
}

.feature-icon {
    width: 46px;
    height: 33px;
    border-radius: 50%;
    background: #ffffffc7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.feature-text {
    font-size: 15px;
    font-weight: 600;
    color: #2c2d47;
    line-height: 1.4;
}

.contact-card {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 26px;
    padding: 0;
}

.services-section {
    background: #f7faf3;
    padding: 100px 0px;
}

.services-container {
    max-width: 1200px;
    margin: auto;
}

.services-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    margin-top: 120px;
}

.services-main-card {
    grid-row: span 2;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(82 135 65 / 13%) 52%, rgb(83 132 63 / 69%) 100%);
    border-radius: 14px;
    padding: 35px;
    color: white;
    position: relative;
    min-height: 387px;
    overflow: hidden;
}

.services-tag {
    background: #53843f;
    color: #ffffff;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 20px;
}

.services-main-card h2 {
    font-size: 42px;
    line-height: 1;
    color: #000;
    margin: 25px 0;
}

.services-main-card p {
    width: 252px;
    color: #000;
    line-height: 25px;
}

.services-btn {
    margin-top: 35px;
    border: 0;
    background: #86d04b;
    padding: 12px 20px;
    border-radius: 25px;
    color: white;
}

.services-main-image {
    position: absolute;
    right: 20px;
    top: 20px;
}

.services-main-image img {
    width: 306px;
}

.services-rating {
    position: absolute;
    bottom: 39px;
    right: 73px;
    background: white;
    color: #27512c;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
}

.services-rating span {
    display: block;
    color: #ffc93c;
}

.services-small-card {
    background: white;
    border: 1px solid #e2eadc;
    border-radius: 14px;
    padding: 20px;
    position: relative;
    height: auto;
    overflow: hidden;
}

.services-icon {
    width: 35px;
    height: 35px;
    background: #edf7e8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4c9d38;
    font-size: 22px;
}

.services-small-card h3 {
    margin-top: 15px;
    font-size: 16px;
}

.services-small-card p {
    margin-top: 10px;
    width: 150px;
    font-size: 13px;
    color: #59645b;
}

.services-small-card a {
    display: block;
    margin-top: 15px;
    color: #68b53f;
    font-size: 12px;
}

.services-small-card img {
    position: absolute;
    right: 8px;
    bottom: 11px;
    width: 129px;
}

.services-bottom-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.services-bottom-card {
    height: 160px;
    background: white;
    border: 1px solid #e2eadc;
    border-radius: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.services-bottom-card h3 {
    font-size: 14px;
}

.services-bottom-card p {
    margin-top: 18px;
    width: 120px;
    font-size: 13px;
    color: #59645b;
}

.services-bottom-card img {
    position: absolute;
    right: 10px;
    bottom: 5px;
    width: 85px;
}

.services-bottom-card button {
    position: absolute;
    right: 12px;
    bottom: 15px;
    border: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #075426;
    color: white;
}

.contact-card-image {
    width: 115px;
    flex-shrink: 0;
}

.contact-card-image img {
    width: 100%;
    display: block;
}

.contact-card-content h3 {
    font-size: 20px;
    color: #000;
    margin-bottom: 0px;
}

.contact-card-content p {
    font-size: 15px;
    color: #55566e;
    margin-bottom: 4px;
    line-height: 1.6;
}

.contact-card-content a {
    text-decoration: none;
    color: #53843f;
    font-weight: 500;
    font-size: 18px;
}

.legal-callout p {
    margin: 0;
    font-size: .92rem;
}

[data-theme="dark"] .legal-callout {
    background: rgba(37, 99, 235, 0.12);
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin: 1.6rem 0 2rem;
}

.security-grid .mini-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
}

.security-grid .mini-card h3 {
    margin: 0 0 .4rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.security-grid .mini-card p {
    margin: 0;
    font-size: .9rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    flex-shrink: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px 0 0 -8px;
    animation: btn-spin .6s linear infinite;
}

.btn-outline .btn-spinner {
    border-color: rgba(37, 99, 235, 0.25);
    border-top-color: var(--primary);
}

.btn.is-loading {
    pointer-events: none;
    opacity: .85;
}

.btn.is-loading .btn-label {
    opacity: .6;
}

.is-loading .btn-spinner {
    display: inline-block;
}

.mini-form-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-form-btn .btn-spinner {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

.mini-form-btn.is-loading .btn-label {
    opacity: 0;
}

.field.is-disabled input,
.field.is-disabled textarea {
    opacity: .6;
}

.form-status.is-success {
    color: #16a34a;
}

.form-status.is-error {
    color: #dc2626;
}

[data-theme="dark"] .form-status.is-success {
    color: #4ade80;
}

[data-theme="dark"] .form-status.is-error {
    color: #f87171;
}

.small-btn.is-loading .btn-label,
.btn.is-loading .btn-label,
.mini-form-btn.is-loading .btn-label {
    visibility: hidden;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.why.section,
.testimonials.section,
.pricing.section,
.contact.section {
    padding-top: 71px;
}

button[disabled] {
    cursor: not-allowed;
    opacity: .8;
}

.field.has-error input,
.field.has-error textarea {
    border-color: #e5484d !important;
}

.field-error {
    color: #e5484d;
    font-size: .8rem;
    margin-top: 4px;
    display: block;
}

.form-status.status-error {
    color: #e5484d;
}

.form-status.status-success {
    color: #22c55e;
}

.docs-topbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 60;
}

.docs-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.docs-topbar-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-primary), #8B7FFF);
}

.docs-topbar-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-ink);
}

.docs-topbar-name span {
    color: var(--color-primary);
}

.docs-menu-toggle {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-direction: column;
    gap: 3px;
}

.docs-menu-toggle span,
.docs-menu-toggle::before,
.docs-menu-toggle::after {
    content: '';
    display: block;
    width: 16px;
    height: 2px;
    background: var(--color-ink);
    position: relative;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 26px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 22px;
}

.sidebar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--color-primary), #8B7FFF);
    flex-shrink: 0;
    position: relative;
}

.sidebar-brand-mark::after {
    content: '';
    position: absolute;
    inset: 9px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    border-right-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}

.sidebar-brand-text {
    font-weight: 700;
    font-size: 16.5px;
    color: var(--color-ink);
    line-height: 1.1;
}

.sidebar-brand-text span {
    color: var(--color-primary);
}

.sidebar-brand-sub {
    display: block;
    font-weight: 500;
    font-size: 11px;
    color: var(--color-ink-faint);
    margin-top: 3px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.sidebar-nav-label {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: #000000;
    padding: 0 8px;
    margin: 29px 0 8px;
}

.sidebar-nav-label:first-of-type {
    margin-top: 0;
}

.sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav-item {
    margin: 9px 0;
}

.sidebar-nav-link:hover .dot,
.sidebar-nav-link.is-active .dot {
    background-color: #fff;
}

.sidebar-nav-sublink:hover {
    background: var(--color-primary);
    color: #fff;
}

.sidebar-nav-sublink.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.details-row-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100%;
    margin-bottom: 56px;
}

.paying-inner-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eef2f5;
}

.wallet-title {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #edf0f2;
    padding-bottom: 18px;
}

.wallet-title h2 {
    font-size: 22px;
    color: #0877d9;
    font-weight: 600;
    margin: 0;
}

.payout-icon+h2 {
    color: #299443;
}

.overview-inner-box {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #0000001f;
    padding-bottom: 14px;
    margin-bottom: 25px;
}

.wallet-title img {
    width: 46px;
}

.overview-icon img {
    width: 88px;
}

.paying-inner-card.payout-info .wallet-title h2 {
    color: #ff0068;
}

.paying-inner-card.payin-info .wallet-title h2 {
    color: #20aa2c;
}

.main-value h3 {
    display: inline-block;
    font-size: 24px;
    margin: 0;
    color: #111827;
}

.main-value p {
    margin: 4px 0;
    color: #667085;
    font-size: 15px;
}

.green-badge {
    background: #e9f8e8;
    color: #299443;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 13px;
    margin-left: 12px;
}

.performance-main-left {
    width: 49%;
}

.performance-main-right .dash-payin-badge {
    background: linear-gradient(135deg, #feacba, #ff2562);
}

.inner-details {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
    gap: 15px;
    flex-wrap: wrap;
}

.performance-main-right .performance-wrapper {
    border-radius: 10px;
    padding: 26px;
    background: #f7e7e4;
}

.performance-main-left .performance-wrapper {
    border-radius: 10px;
    padding: 26px;
    background: #d2f4e0;
}

.performance-main-right {
    width: 49%;
}

.performance-main-box {
    display: flex;
    justify-content: space-between;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
}

.dash-payin-banner {
    width: 100%;
    max-width: 100%;
    height: 173px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 18px 8px;
    padding-top: 0px;
    border-radius: 0;
}

.dash-payout-visual {
    width: 51%;
    height: 100%;
    position: absolute;
    right: 5px;
    top: 6px;
    z-index: 2;
}

.dash-payin-content {
    width: 58%;
    position: relative;
    z-index: 10;
}

.dash-payin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 27px;
    padding: 0 15px;
    border-radius: 20px;
    background: linear-gradient(135deg, #02ba6b, #028746);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.1px;
    line-height: 1;
}

.dash-payin-title {
    margin: 10px 0 0;
    color: #071435;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -1.1px;
}

.dash-payin-description {
    margin: 13px 0 0;
    color: #162544;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.2px;
}

.dash-payin-visual {
    width: 38%;
    height: 100%;
    position: absolute;
    right: 13px;
    bottom: 12px;
    z-index: 2;
}

.dash-decoration {
    position: absolute;
    display: block;
    pointer-events: none;
}

.dash-decoration-one {
    width: 12px;
    height: 12px;
    top: 23px;
    right: 68px;
    border: 3px solid #91bff3;
    border-radius: 50%;
    opacity: 0.8;
}

.dash-decoration-two {
    width: 8px;
    height: 8px;
    top: 80px;
    right: 9px;
    border: 2px solid #87b8ef;
    border-radius: 50%;
    opacity: 0.7;
}

.dash-decoration-three {
    width: 13px;
    height: 5px;
    top: 17px;
    right: 137px;
    border-radius: 10px;
    background: #9bc6f5;
    opacity: 0.35;
    transform: rotate(8deg);
}

.dash-decoration-four {
    top: 106px;
    right: 8px;
    color: #8ebcf0;
    font-size: 17px;
    opacity: 0.65;
    transform: rotate(20deg);
}

.dash-decoration-five {
    top: 57px;
    right: 155px;
    color: #9fc9f5;
    font-size: 13px;
    opacity: 0.45;
    transform: rotate(-15deg);
}

.performance-wrapper-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.performance-card {
    min-height: 155px;
    border-radius: 12px;
    z-index: 1;
    padding: 18px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.performance-card.success-card {
    background: linear-gradient(135deg, #ffffff, #f4fff7);
}

.performance-card.failed-card {
    background: linear-gradient(135deg, #ffffff, #fff5f6);
}

.performance-card.pending-card {
    background: linear-gradient(135deg, #ffffff, #fffaf0);
}

.performance-card.initiated-card {
    background: linear-gradient(135deg, #ffffff, #f7f7ff);
}

.card-content {
    display: flex;
    align-items: center;
    gap: 32px;
}

.status-number {
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
}

.success-text { color: #16a34a; }
.failed-text { color: #e11d48; }
.pending-text { color: #f59e0b; }
.initiated-text { color: #6366f1; }

.status-label {
    font-size: 13px;
    margin-top: 2px;
}

.status-code {
    font-size: 22px;
    color: #333;
    font-weight: 600;
    margin-top: 4px;
}

.detail-box-info {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 48%;
    flex-wrap: wrap;
}

.small-icon {
    width: 55px;
    height: 55px;
    background: #eef7ff;
    color: #0877d9;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.detail-box-info h4 {
    margin: 0;
    font-size: 22px;
    color: #111827;
}

.detail-box-info p {
    margin: 5px 0;
    color: #667085;
    font-size: 14px;
}

.detail-box-info span {
    background: #eaf8ed;
    color: #299443;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
}

.orange {
    color: #e88a00 !important;
    background: #fff3df !important;
}

.docs-title span {
    color: var(--color-primary-dark);
}

.docs-title {
    font-size: 38px;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 12px;
    letter-spacing: -.01em;
}

.docs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wrapper-info {
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(106 90 205 / 0%) 15%, rgb(106 90 205 / 7%) 100%);
}

table.docs-table tbody {
    background: #fff;
}

.docs-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.docs-table tbody tr:nth-child(even) {
    background: #6360c81a;
}

.docs-section-number {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primary);
    display: block;
    margin-bottom: 6px;
}

.docs-subsection {
    margin: 34px 0;
    scroll-margin-top: 32px;
}

.docs-subsection-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 10px;
}

.docs-endpoint-subsection {
    margin: 44px 0;
    padding-top: 38px;
    border-top: 1px solid #b0b0b5;
    scroll-margin-top: 32px;
}

.docs-endpoint-subsection:first-of-type {
    border-top: none;
    padding-top: 0;
}

p.docs-p strong {
    font-weight: 600;
}

.docs-p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-ink-soft);
    margin: 0 0 4px;
}

table.docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.6px;
    min-width: 520px;
}

table.docs-table tbody tr:last-child td {
    border-bottom: none;
}

table.docs-table td.field-name,
table.docs-table td.field-header {
    color: var(--color-ink);
    font-weight: 600;
    white-space: nowrap;
}

.req-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.req-badge.mandatory {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.req-badge.optional {
    background: var(--color-surface);
    color: var(--color-ink-faint);
    border: 1px solid var(--color-border);
}

.docs-code-block {
    background: var(--color-code-bg);
    border-radius: 12px;
    margin: 0 0 20px;
    overflow: hidden;
}

.docs-code-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9C97C4;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.docs-ordered-list,
.docs-bullet-list {
    margin: 0 0 18px;
    padding-left: 22px;
}

.docs-ordered-list li,
.docs-bullet-list li {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-ink-soft);
    margin-bottom: 6px;
    list-style: disc;
}

.docs-bullet-list {
    list-style: disc;
}

.status-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.status-pill.success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-pill.error {
    background: var(--color-error-bg);
    font-size: 13px !important;
}

.docs-footer {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-ink-faint);
    text-align: center;
}

.legal-content li {
    list-style: disc;
    margin-bottom: .5rem;
}

.legal-content {
    padding: 0px 0 100px;
}

.legal-content a {
    color: #53843f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-toc a {
    font-size: .92rem;
    color: var(--text-muted);
    text-decoration: none;
}

.legal-toc a:hover {
    color: var(--primaryColor);
}

.legal-callout {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    background: #f1f6e9ad;
    border: 1px solid rgb(83 132 63 / 80%);
    border-radius: 6px;
    padding: 1.1rem 1.3rem;
    margin: 1rem 0 0 0;
    margin-bottom: 11px;
}

.legal-wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 30px;
}

.legal-left,
.legal-body {
    margin: 0 auto;
    background: #fff;
    padding: 20px 16px;
    border-radius: 6px;
    border: 1px solid #53843f80;
}

.legal-body {
    padding: 0;
    width: 100%;
}

.legal-content .legal-inner {
    margin: 0 auto;
}

.legal-toc li {
    list-style: none;
    display: flex;
    gap: 9px;
    border-bottom: 1px solid #53843f33;
    margin-bottom: 14px;
}

.legal-toc li:last-child {
    border-bottom: none;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 1.2rem;
    padding-left: 1.3rem;
    color: var(--text-muted);
    font-size: .98rem;
}

.legal-content .legal-left ul {
    margin: 0 0 1.2rem;
    color: var(--text-muted);
    font-size: 16px;
    padding-left: 0;
}

.legal-toc h2 {
    font-size: 16px;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.legal-left span {
    color: #528437;
}

.legal-content li::marker {
    color: #53843f;
}

.legal-content p {
    font-size: 15px;
    margin-bottom: 9px;
    padding: 0;
}

.legal-content strong {
    color: var(--primaryColor);
    font-weight: 500;
}

.legal-content h2 {
    font-size: 18px;
    margin-top: 22px;
    padding-top: 0;
    margin-bottom: 0px;
    scroll-margin-top: calc(var(--nav-h) + 20px);
}

.legal-left .legal-toc h2 {
    margin-bottom: 15px;
}

.page-wrapper {
    margin-top: 60px;
    background: var(--bg-alt);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.14);
    border: 1px solid #53843f80;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    align-items: center;
}

.hero-right {
    text-align: end;
}

.hero-left small {
    margin-bottom: 10px;
    display: inline-block;
    color: #414143;
}

.page-hero .eyebrow {
    margin-bottom: 4px;
}

.page-hero h1 {
    font-size: 33px;
    margin-bottom: .6rem;
}

.docs-main {
    margin-left: var(--sidebar-width);
    padding: 56px 64px 120px;
    max-width: 1220px;
}

.docs-subtitle {
    font-size: 16px;
    color: var(--color-ink-soft);
    margin: 0 0 18px;
    max-width: 640px;
    line-height: 1.6;
}

.docs-subtitle span {
    display: block;
    font-size: 23px;
    color: var(--primaryColor);
    font-weight: 600;
    margin-bottom: 10px;
}

.docs-header {
    margin-bottom: 30px;
    padding: 29px 20px 20px;
    border: 1px solid var(--color-primary-light);
    border-radius: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.docs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    padding: 5px 11px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.docs-meta-chip {
    font-size: 12.5px;
    color: var(--color-ink-soft);
    background: #f6fdf6;
    border: 1px solid var(--color-primary-light);
    padding: 8px 12px;
    border-radius: 7px;
    line-height: normal;
    display: flex;
    align-items: center;
}

.docs-meta-chip b {
    font-size: 14px;
    color: var(--primaryColor);
    margin-left: 4px;
    display: inline-block;
}

.docs-meta-chip i {
    font-size: 18px;
    color: var(--primaryColor);
    margin-right: 8px;
}

.docs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.block-right {
    overflow: auto;
}

.docs-right {
    text-align: end;
}

.docs-ordered-list li::marker,
.docs-bullet-list li::marker {
    color: var(--primaryColor);
}

.docs-p a {
    color: var(--primaryColor);
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 10px;
    border-bottom: 1px solid #53843f33;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-ink-soft);
    transition: background .15s ease, color .15s ease;
}

.sidebar-nav-link:hover,
.sidebar-nav-link.is-active {
    background: var(--color-primary);
    color: #fff;
}

.sidebar-nav-link .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-ink-faint);
    flex-shrink: 0;
}

.docs-section {
    scroll-margin-top: 32px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dce5de;
    margin-bottom: 20px;
}

.docs-callout {
    display: flex;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.65;
}

.docs-callout-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    margin-top: 1px;
}

.docs-callout.note {
    background: #ffeded;
    color: var(--color-ink-soft);
    border-left: 3px solid red;
}

.docs-p code,
.docs-subsection code,
.docs-callout code,
.docs-table code,
.docs-ordered-list li code,
.docs-bullet-list code {
    color: var(--primaryColor);
    font-size: 16px;
    font-weight: 500;
}

.text-red { color: #F04747; }
.text-denied { color: #4f52d9; }
.text-error { color: #FE1A71; }
.text-500 { color: #FFB301; }

.docs-section-title {
    font-size: 23px;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 14px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
}

.sidebar-nav-sublink {
    display: block;
    padding: 6px 10px;
    font-size: 12.8px;
    margin-top: 8px;
    border-bottom: 1px solid #e6e6e6e3;
    color: #383740;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.docs-section-title svg,
.docs-section-title i {
    width: 32px;
    height: 32px;
    padding: 3px;
    background: #dae8da;
    border-radius: 6px;
    color: #53843f;
    fill: #53843f;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.docs-base-url-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 16px;
    border: 1px solid #dae8db;
    margin: 18px 0;
    box-shadow: 0px 0px 4px #0000001a;
}

.docs-base-url-box code {
    font-size: 14.5px;
    color: #4d4c6a;
}

.docs-base-url-box .method-tag {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    background: rgb(83 132 63);
    padding: 4px 9px;
    border-radius: 6px;
    letter-spacing: .04em;
}

.docs-base-url-box bdi {
    text-align: end;
    margin-left: auto;
    background: #538446;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.docs-bdr {
    background: #F9FBF7;
    border: 1px solid #53844c69;
    padding: 8px 14px;
    border-radius: 8px;
}

.docs-bdr svg {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    fill: #53843f;
}

table.docs-table thead th {
    text-align: left;
    background: var(--primarybg);
    color: #ffffff;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.docs-table-wrap {
    overflow-x: auto;
    margin: 4px 0 24px;
}

.docs-tbl-width {
    max-width: max-content;
}

table.docs-table tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink-soft);
    vertical-align: top;
    line-height: 1.55;
}

.docs-code-block pre {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.7;
    color: var(--primaryColor);
}

.docs-code-block pre code {
    color: var(--primaryColor);
}

.docs-code-block {
    background: #f6fdf6;
    border-radius: 8px;
    margin: 0 0 20px;
    overflow: hidden;
    border: 1px solid #a2dba2;
}

.docs-subsection-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-ink);
    margin: 0 0 10px;
}

.docs-code-info {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 20px;
}

.docs-code-left {
    width: 8%;
    font-size: 32px;
    background: #53843f;
    border-radius: 10px 0px 0px 10px;
    margin-right: 6px;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docs-code-info pre {
    background: #f6fdf6;
    border-radius: 0px 8px 8px 0px;
    margin: 0;
    overflow: auto;
    width: 95%;
    border: 1px solid #a2dba2;
    padding: 12px;
}

.docs-callout.note .docs-callout-icon {
    background: #ef2020;
    color: #fff;
    font-family: monospace;
}

.docs-callout strong {
    color: #dc3545;
    font-weight: 600;
}

.docs-callout.important {
    background: #3287f11f;
    color: var(--color-ink);
    margin-bottom: 0;
}

.important strong {
    color: #3287F1;
}

.docs-callout.important .docs-callout-icon {
    background: #3287F1;
    color: #fff;
}

.endpoint-badge-row {
    display: flex;
    align-items: stretch;
    text-align: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.endpoint-method {
    font-weight: 600;
    font-size: 12.5px;
    color: #fff;
    background: var(--color-primary);
    padding: 5px 11px;
    border-radius: 6px 0 0 6px;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
}

.endpoint-path {
    font-size: 14px;
    color: var(--color-ink);
    background: #eaefe7;
    border: 1px solid var(--color-primary-light);
    padding: 6px 12px;
    border-radius: 0 6px 6px 0;
}

.code-gray {
    border: 1px solid #80808073;
    background: #f3f3f3;
}

.code-gray pre code { color: gray; }

.code-fail {
    border: 1px solid #ffc6c6;
    background: #fff8f8;
}

.code-fail pre code { color: red; }

.code-pending {
    border: 1px solid #feb60057;
    background: #fffaee;
}

.code-pending pre code { color: #FEB600; }

.code-initiated {
    border: 1px solid #6a5acd85;
    background: #ceb3ef57;
}

.code-initiated pre code { color: #8635ff; }

.table-bordered>:not(caption)>*>*,
.table-bordered>:not(caption)>* {
    border-color: #bababa;
}

.sidebar-nav-sublist {
    list-style: none;
    margin: 2px 0 6px 10px;
    padding: 0 0 0 12px;
}

.gap-0 {
    gap: 0;
}

.docs-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    padding: 28px 20px 40px;
    z-index: 50;
}

.dot-anim {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dot-anim span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    display: inline-block;
    animation: dot-bounce 1.4s infinite ease-in-out both;
}

.dot-anim span:nth-child(1) { animation-delay: -0.32s; }
.dot-anim span:nth-child(2) { animation-delay: -0.16s; }
.dot-anim span:nth-child(3) { animation-delay: 0s; }

@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

@media(max-width:1660px) {
    .custom-table td { white-space: pre-wrap; }
    .table-container { overflow-x: scroll; }
    .paying-inner-item { width: calc(23.33% - -2px); }
    .card-content { gap: 18px; }
    .overview-inner-box { padding-bottom: 16px; }
    .main-content-data { padding: 0px 26px 68px 26px; }
    .total-amount h4 { font-size: 17px; }
    .total-amount p { font-size: 15px; }
    .card-body { margin-top: 11px; }
    .card-title { font-size: 18px; }
    .wallet-main-vard { gap: 15px; }
    .floating-3d-img { width: 88px; top: 13px; }
    .overview-icon img { width: 72px; }
    .small-icon { width: 46px; height: 46px; background: #eef7ff; color: #0877d9; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
    .total-row { margin-bottom: 19px; }
    .btn-transfer { padding: 11px 15px; border-radius: 14px; }
    .icon-box { width: 35px; height: 35px; }
    .balance-item { padding: 12px 0; }
    .card-header { padding: 18px 30px; }
    .card-body { padding: 18px 20px; }
    .paying-inner-item { padding: 14px 11px; }
    .support-main-info { gap: 27px; }
    .tickets-inner::after { width: 108px; height: 115px; }
    .dt-paging.paging_full_numbers { padding-bottom: 18px; }
    .wallet-welcome-title { font-size: 24px; }
    .wallet-balance-card img { right: 13px; bottom: 12px; width: 141px; }
    .wallet-dash-container { margin-bottom: 36px; }
    .acc-img-info { max-width: 231px; margin-left: 308px; margin-top: -117px; transform: rotate(35deg); }
    .acc-main-info { grid-template-columns: 599px 1.8fr; }
    .account-heading { font-size: 30px; line-height: 35px; }
    .section-head h2 { font-size: 34px; }
    .section-head { margin: 0 auto 30px; }
    .section { padding: 69px 0; }
    .security-feature-info.two-facter-security img { width: 342px; }
}

@media(max-width:1500px) {
    .navbar-brand img { max-width: 111px; }
    .custom-form-left.two-factor-info { width: 64%; }
    .custom-right-img { width: 31%; }
    .services-container img { margin: auto; display: flex; }
    .custom-form-left { width: 55%; }
    .main-content-data { padding: 0px 30px 55px 30px; margin-top: 39px; }
    .summary-stats { gap: 25px; }
    .paying-inner-item { width: calc(23.33% - -7px); margin: 0px 4px; }
    .total-amount { padding: 7px 6px; }
    .inner-card-details .wallet-title h2 { font-size: 17px; }
    .detail-box-info { gap: 9px; }
    .inner-card-details .wallet-title i { font-size: 22px; width: 30px; height: 30px; }
    .custom-table td { padding: 12px 7px; }
    .inner-title h2 { color: #1B1B1B; font-size: 21px; }
    .inner-card-details .wallet-title { padding: 9px 11px; }
    .inner-card-details .total-amount { padding: 16px 17px; }
    .filter-group.search-box { max-width: 270px; }
    .custom-list-dropdown { cursor: pointer; min-width: 166px; }
    .date-range-input { width: 230px; }
    .filter-limit .custom-list-dropdown { cursor: pointer; min-width: 18px; }
    .sidebar-menu { padding-left: 20px; }
    .logout-btn { margin-top: 78px; }
    .paying-inner-card { padding: 14px; }
    .inner-details { margin-top: 18px; }
    .acc-logo img { width: 247px; margin-bottom: 11px; }
}

@media(max-width:1400px) {
    .paying-inner-item { width: calc(32.33% - 4px); }
    .acc-main-info { grid-template-columns: 599px 1.8fr; }
    .account-info-card { padding: 4px 7px; }
    .notification-wrapper { font-size: 28px; width: 46px; height: 46px; }
    .inner-details { gap: 10px; }
    .wallet-card-amount { margin-top: 2px; font-size: 26px; }
    .small-icon { width: 39px; height: 39px; font-size: 25px; }
    .details-row-card { gap: 13px; }
    .wallet-balance-card img { right: 13px; bottom: 20px; width: 97px; }
    .wallet-welcome-title { font-size: 18px; }
    .stats-row { display: grid; grid-template-columns: repeat(2, 1fr); }
    table.dataTable>tbody>tr>th, table.dataTable>tbody>tr>td { padding: 8px 6px; }
    .nav-menu { gap: 21px; }
    table.dataTable>thead>tr>th, table.dataTable>thead>tr>td { padding: 10px 6px; border-bottom: none; }
    .card-header { height: 157px; }
    .amount { font-size: 14px; }
    .label { font-size: 15px; }
    .custom-table td { font-size: 13px; }
    .icon-box { width: 32px; font-size: 14px; height: 32px; }
    .item-info { gap: 5px; }
    .balance-item { padding: 7px 0; }
    .card-body { padding: 16px 12px; }
    .account-feature-list { gap: 30px; }
}

@media(max-width:1300px) {
    .balance-card { max-width: 48%; }
    .feature-title { font-size: 13px; }
    .services-container img { width: 817px; }
    .feature-item img { display: none; }
    .services-main-image img { width: 266px; }
    .services-small-card img { width: 107px; }
    .tickets-inner::after { display: none; }
    .inner-header-menu { padding: 13px 12px; }
    .sidebar-logo img { margin-bottom: 0; width: 138px; }
    a.brand img { width: 153px; }
    .wallet-balance-wrapper { width: 64%; }
    .detail-box-info { width: 100%; }
    .performance-main-left .performance-wrapper { border-radius: 10px; padding: 16px; }
    .inner-details { gap: 13px; }
    .wallet-title h2 { font-size: 19px; }
    .wallet-title { padding-bottom: 11px; }
    .sidebar-menu ul li a { font-size: 16px; padding: 7px 13px; }
    .custom-form-left { width: 63%; }
}

@media(max-width:1200px) {
    .navbar .nav-link { padding: 10px 16px !important; font-size: 20px; }
    .custom-right-img { display: none; }
    .custom-form-left.two-factor-info { width: 100%; }
    .security-feature-info.two-facter-security img { top: 102px; right: 38px; width: 235px; }
    .security-feature-title { margin-top: -40px; margin-left: 56px; font-size: 15px; }
    .accordion { gap: 9px; }
    .why.section, .testimonials.section, .pricing.section, .contact.section { padding-top: 19px; }
    .services-container { max-width: 1024px; }
    .why-choose-us img { margin-top: -244px; z-index: -1; position: relative; }
    .services-rating { position: absolute; bottom: 130px; right: 11px; padding: 7px 12px; }
    .services-main-card { padding: 22px; }
    .services-small-card img { width: 83px; }
    .services-main-image img { width: 207px; }
    .how-it-works-container { max-width: 997px; }
    .how-it-works-list { gap: 14px; }
    .why-grid { grid-template-columns: repeat(3, 1fr); margin-top: 43px; }
    .section { padding: 29px 0; }
    .performance-main-left { width: 100%; }
    .performance-main-right { width: 100%; }
    .performance-main-box { flex-wrap: wrap; gap: 13px; }
    .dash-payout-visual { width: 42%; }
    .dash-payin-visual { width: 30%; }
    .acc-inner-data { width: 482px; }
    .custom-list-dropdown .list-item-dropdown { left: auto; }
    .support-main-info { gap: 27px; flex-direction: column; }
    .contact-grid { gap: 20px; }
    .contact-features { gap: 7px; padding: 12px; }
    .feature-text { font-size: 13px; }
    .contact-title { margin-top: 17px; font-size: 32px; }
    .support-left-box { width: 100%; }
    .support-create-tickets { width: 100%; }
    .summary-stats { padding: 13px 3px; flex-wrap: wrap; width: auto; height: auto; gap: 8px; justify-content: left; position: static; }
    .services-grid { margin-top: 62px; grid-template-columns: repeat(2, 1fr); width: 100%; padding: 0px 16px; }
    .hero-copy h1 { font-size: 31px; }
    .services-main-image { display: none; }
    .services-rating { display: none; }
    .services-main-card p { width: 100%; line-height: 29px; }
    .account-name { font-size: 14px; }
    .account-id { font-size: 11px; }
    .account-user-profile { width: 32px; height: 32px; font-size: 12px; }
    .notification-wrapper { font-size: 24px; width: 39px; height: 39px; }
    .hero { position: relative; padding: calc(var(--nav-h) + -5px) 0 46px; }
    .acc-main-info { grid-template-columns: 484px 1.8fr; }
    .acc-img-info { max-width: 133px; }
}

@media(max-width:1050px) {
    .acc-inner-data { width: 444px; }
    .details-row-card { margin-bottom: 28px; }
    .wallet-balance-card img { width: 79px; }
    img.acc-img-info { display: none; }
    .custom-form-wrapper.custom-inner-card { width: 100%; }
    .inner-title.create-inner-info { width: 100%; }
    .acc-data { padding: 40px 0px; }
    label.form-check-label { font-size: 14px; }
    .acc-logo p { font-size: 15px; line-height: 23px; }
    .acc-footer-btn a { font-size: 14px; }
    .acc-main-info { grid-template-columns: 392px 1.8fr; }
    .account-login { padding: 0px 26px 30px; }
    .account-feature-icon { width: 47px; height: 47px; flex: 0 0 47px; font-size: 26px; }
    .account-feature { gap: 9px; }
    .account-heading { font-size: 24px; line-height: 29px; }
    .acc-logo img { width: 154px; margin-bottom: 19px; }
    .why-choose-us img { margin-top: -146px; }
    .section { padding: 32px 0; }
    .security-feature-title { margin-top: -35px; margin-left: 54px; font-size: 13px; font-weight: 600; }
    .security-feature-info.two-facter-security img { width: 234px; position: absolute; height: auto; top: 124px; right: 27px; }
    .accordion { gap: 7px; }
    .why.section, .testimonials.section, .pricing.section, .contact.section { padding-top: 15px; }
    .legal-wrapper { gap: 12px; }
    section.page-hero { padding: 36px 0 16px; }
    .page-wrapper { padding: 12px; }
}

@media(max-width:992px) {
    .nav-cta-secondary { display: none; }
    .page-hero h1 { font-size: 21px; margin-bottom: 7px; }
    .hero-left small { font-size: 12px; }
    .page-wrapper .hero-right img { width: 168px; }
    .legal-left { display: none; }
    .custom-form-left { width: 100%; }
    .legal-wrapper { display: grid; grid-template-columns: 1fr; gap: 21px; }
    .acc-main-info { grid-template-columns: 1fr; }
    .acc-data-img { padding: 15px 0px; min-height: auto; }
    .acc-data { padding: 25px 0px; }
    .acc-logo img { width: 154px; margin-bottom: 2px; }
    .account-login { padding: 0px 27px 0px; text-align: center; }
    .account-heading, .account-login p, .account-feature-list, .why-choose-us img, .security-feature-image { display: none; }
    .services-container img { width: 624px; }
    .services-small-card img { width: 127px !important; }
    section { padding: 8px 0; }
    .how-it-works-list { grid-template-columns: repeat(2, 1fr); }
    .security-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .how-it-works-container { max-width: 667px; }
    .docs-header { margin-top: 40px; margin-bottom: 20px; }
    .docs-subsection { margin-bottom: 10px; }
    .docs-code-left { font-size: 23px; }
    .docs-ordered-list, .docs-bullet-list { margin: 0; }
    .docs-endpoint-subsection { margin: 20px 0; padding-top: 21px; }
    .docs-grid { gap: 16px; }
    .docs-main { padding: 48px 40px 50px; }
    .docs-topbar { display: flex; }
    .docs-sidebar { transform: translateX(-100%); transition: transform .25s ease; top: var(--topbar-height); padding-top: 20px; box-shadow: 0 12px 30px rgba(20, 20, 43, .12); }
    .docs-sidebar.is-open { transform: translateX(0); }
    .sidebar-brand { display: none; }
    .docs-main { margin-left: 0; padding: calc(var(--topbar-height) + 32px) 24px 90px; }
    .docs-title { font-size: 30px; }
    .docs-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 20, 43, .35); z-index: 45; }
    .docs-overlay.is-open { display: block; }
    .docs-main { padding: 48px 40px 100px; }
    .nav-menu { position: fixed; top: 61px; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: var(--surface); padding: 15px 15px; gap: 1.1rem; border-bottom: 1px solid var(--border); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .3s var(--ease); box-shadow: var(--shadow-md); }
    .nav-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-toggle { display: flex; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { order: -1; width: 100%; max-width: 100%; margin: 0 auto; }
    .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .navbar-brand img { max-width: 111px; }
    .btn.btn-ghost.nav-cta-secondary { display: none; }
    a.small-btn.mob-login-info { padding: 4px 9px; font-size: 13px; border-radius: 4px; }
    .sidebar-menu ul li a { padding: 10px 23px; border-radius: 7px; font-size: 17px; width: 100%; border: 1px solid #0000002e; }
    .sidebar-menu ul li { margin-bottom: 11px; }
    .sidebar-menu ul { display: flex; flex-direction: column; }
    .hero-copy h1 { font-size: 30px; }
    .mob-logo { display: block; }
    .mob-logo img { width: 123px; }
    .contact-grid { gap: 30px; grid-template-columns: 1fr; }
    .inner-header-menu { justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid #00000036; }
    .section { padding: 24px 0; }
    .sidebar { left: -260px; position: absolute; }
    .sidebar.active { left: 0; z-index: 9; }
    .menu-bar { display: block; margin-left: 0px; }
    .close-sidebar { display: block; position: absolute; top: -37px; right: -33px; font-size: 32px; }
    .sidebar-logo { padding-left: 0; margin-bottom: 26px; text-align: left; width: 100%; }
    .overlay.active { display: block; opacity: 1; visibility: visible; }
    .sidebar-logo img { width: 183px; }
    .sidebar { transform: translateX(-100%); }
    .sidebar-menu { padding-left: 0; width: 100%; }
    .sidebar.active { transform: translateX(0); background: #fff; flex-direction: column; left: 0; top: 0; width: 262px; padding: 37px 11px 22px; height: 100vh; transition: all 0.5s; }
    .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 1; }
    .navbar { border-bottom: 1px solid #00000036; background: #fff; padding: 7px 0px; height: 60px; }
    .navbar .nav-link { font-size: 16px; border-bottom: 2px solid #6d6d6d4f; }
    .navbar-toggler:focus { box-shadow: none; }
    .navbar-nav .nav-link.active::after { display: none; }
    .main-content-data { padding: 0px 16px 49px 16px; margin-top: 56px; }
    .main-data-info { margin-left: 0px; }
    .wallet-bal-mob { position: absolute; top: 66px; padding-bottom: 5px; justify-content: end; width: 100%; right: 0; padding-right: 12px; background: #fff; }
    .head-wallet-info { display: flex; align-items: center; gap: 4px; }
    .info-row span:last-child, .info-row span { font-size: 13px; }
    .wallet-welcome-content { display: none; }
    .wallet-balance-wrapper { width: 100%; }
    .security-feature-box { grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 20px; }
    .hero-sub { max-width: 100%; text-align: center; }
    .hero-visual { height: 330px; }
    .hero-actions { justify-content: center; }
    .hero-copy { text-align: center; }
    .scroll-cue span { display: none; }
    .payment-grid.kyc-grid-info { gap: 16px; }
    .info-row.kyc-info-row { gap: 12px; }
    .card-title img { display: none; }
}

@media(max-width:768px) {
    .stats-row { gap: 10px; }
    .date-filter-wrapper { flex-wrap: wrap; }
    .auth-qr-box { flex-wrap: wrap; }
    .card-title i { width: 36px; height: 36px; font-size: 21px; }
    .custom-form-wrapper h3 { font-size: 19px; margin-bottom: 14px; }
    .inner-title.inner-head img { display: none; }
    .profile-grid .card { padding: 15px; gap: 0px; margin-bottom: 10px; }
    .legal-toc ol { columns: 1; }
    .wallet-dash-container { padding: 14px 12px; }
    .details-row-card { grid-template-columns: repeat(1, 1fr); }
    .contact-content { width: 100%; }
    .contact-title { font-size: 48px; }
    .contact-description { font-size: 20px; }
    .contact-features { flex-direction: row; flex-wrap: wrap; }
    .feature-item { width: 48%; }
    .contact-card { flex-direction: row; }
    .security-grid { grid-template-columns: 1fr; }
    .wallet-balance-card img { right: 5px; bottom: 7px; width: 83px; }
    .main-content-data { margin-top: 30px; }
    .qr-info-note { padding: 6px; }
    .auth-qr-info svg { padding: 9px; }
    .custom-form-wrapper { padding: 20px; }
    .respons-details-box p { line-height: 26px; font-weight: 600; font-size: 14px; color: #505050ed; }
    .faq-img { display: none; }
    .contact-form { padding: 14px; }
    .contact-card-image { width: 94px; }
    .footer-grid { gap: 18px; padding-bottom: 2rem; }
    .site-footer { padding: 43px 0 0; }
    .support-card { display: none; }
    .contact-hero-section { padding-bottom: 18px; gap: 18px; flex-direction: column; margin-bottom: 30px; align-items: baseline; }
    .nav-cta { display: none; }
    .section-head h2 { font-size: 24px; }
    .services-container img { width: 511px; }
    .how-it-works-container { max-width: 586px; }
    .services-main-card h2 { font-size: 30px; margin: 17px 0; }
    .services-main-card p { line-height: 23px; }
    .section-sub { font-size: 13px; }
    .hero-copy { text-align: center; }
    .hero-actions { justify-content: center; }
    .hero { padding: calc(var(--nav-h) + 16px) 0 24px; }
    .chip-2 { left: -10px; }
    .hero-copy h1 { font-size: 22px; }
    .hero-actions .small-btn { display: inline-flex; padding: 8px 18px; }
    .hero-sub { font-size: 14px; margin-top: 10px; }
    .field { margin-bottom: 9px; }
    .balance-card { max-width: 100%; }
    .custom-form-wrapper .form-group { margin-top: 13px; }
    .nav-container { padding: 0 10px; }
    .custom-form-wrapper .custom-form .form-row { gap: 0; }
    .footer-bottom p { padding-top: 11px; padding-bottom: 10px; font-size: 14px; }
    .custom-form .form-row { flex-direction: column; gap: 15px; }
    .contact-title { font-size: 20px; }
    .profile-grid { grid-template-columns: auto; gap: 8px; }
    .tickets-inner { gap: 13px; padding: 15px 20px; }
    .main-content-data { padding: 0px 11px 49px 11px; }
    .message-handle { display: flex; gap: 5px; }
    .tickets-inner h4, .tickets-inner h3 { font-size: 18px; }
    .ticket-invoice { font-size: 24px; width: 42px; height: 42px; }
    .tickets-inner h3 { font-size: 22px; }
    .admin, .user { max-width: 98%; }
    .mess-text-box { column-gap: 5px; }
    .main-title h2 { font-size: 20px; margin-bottom: 15px; }
    .wallet-item.balance-section.wallet-bal-info, .wallet-item.hold-section.wallet-bal-info { padding: 3px 7px !important; border-radius: 4px; }
    .wallet-bal-mob { top: 65px; }
    .details-row-card { margin-bottom: 20px; }
    .card { margin-bottom: 0px; padding: 8px; }
    .card-title { font-size: 18px; margin-bottom: 14px; }
    .inner-details { margin-bottom: 25px; }
    .info-row { font-size: 14px; padding: 7px 8px; }
    .inner-title { margin-bottom: 25px; }
    .inner-title h2 { margin-bottom: 0px; }
    .btn-close { top: -40px; right: 0; }
    .filter-group.search-box { max-width: 270px; }
    .paying-inner-item { width: 100%; }
    .details-row { margin: 0px 0px; row-gap: 12px; }
    .form-control.file-attach { overflow: hidden; }
    .page-hero { padding: calc(var(--nav-h) + 17px) 0 11px; }
    .page-hero h1 { font-size: 26px; }
    .legal-content { padding: 27px 0 21px; }
    .legal-content .legal-inner { padding: 16px; }
    .legal-content h2 { font-size: 18px; }
    .security-features { max-width: 100%; padding: 14px 12px; border-radius: 13px; }
    .security-feature { gap: 7px; }
    .security-icon { width: 26px; height: 26px; flex-basis: 26px; }
    .security-icon svg { width: 25px; height: 25px; }
    .security-content h3 { font-size: 11px; }
    .security-content p { font-size: 9px; }
    .security-divider { height: 34px; margin: 0 7px; }
    .hero-right { display: none; }
    .page-wrapper { display: block; }
    .stats-card { padding: 14px 13px; min-height: auto; width: 100%; }
    .filter-banner { min-height: auto; padding: 7px 22px 9px 18px; }
    .inner-details { margin-top: 0px; }
    .filter-text h2 { font-size: 19px; }
    .filter-graphic { display: none; }
    .card-title h3 { font-size: 17px; }
    .card-title p { margin-top: 2px; font-size: 14px; }
    .info-row span i { width: 26px; height: 26px; font-size: 17px; }
    .info-row span { gap: 8px; }
    .account-login { overflow: visible; }
}

@media(max-width:575px) {
    .security-features { padding: 12px 8px; }
    .page-hero h1 { font-size: 22px; }
    .legal-content .legal-inner { padding: 16px 13px; }
    .page-wrapper { margin-top: 49px; }
    section.page-hero { padding: 31px 0 0px 0px; }
    .legal-content { padding: 0px 0 21px; }
    .inner-title.mt-0 { margin-bottom: 20px; flex-direction: column; align-items: baseline; gap: 16px; }
    .profile-grid .card { padding: 9px; gap: 0px; margin-bottom: 4px; }
    .inner-title.inner-head p { margin-top: 9px; font-size: 13px; }
    .card-title h3 { font-size: 16px; }
    .info-row.kyc-info-row { gap: 8px; }
    .payment-grid.kyc-grid-info { gap: 3px; grid-template-columns: 1fr; }
    .stats-container { flex-wrap: wrap; }
    .filter-group.search-box { gap: 4px; }
    .export-excel { position: static; }
    .custom-main-card { margin-top: 8px; }
    .export-excel .small-btn { margin-right: 0px; padding: 6px 10px; font-size: 13px; margin-bottom: 11px; }
    .stats-wrapper { padding: 18px 0px 0px; }
    .filter-text h2 { font-size: 16px; }
    .filter-banner { min-height: auto; padding: 7px 9px 9px 10px; }
    .filter-bar { padding: 13px; }
    .inner-details { margin-bottom: 2px; }
    .performance-main-right .performance-wrapper { padding: 16px; }
    .dash-payin-title { font-size: 19px; }
    .filter-text p { font-size: 12px; line-height: 14px; }
    .hero-visual { height: 208px; }
    .contact-title { font-size: 22px; }
    .dash-payin-description { margin: 8px 0 0; font-size: 13px; }
    .hero { padding: calc(var(--nav-h) + 37px) 0 68px; }
    .security-feature-box { grid-template-columns: 1fr; }
    .contact-description { font-size: 17px; }
    .contact-features { padding: 15px; }
    .dash-payin-banner { padding: 18px 0px; padding-top: 0px; height: auto; }
    .feature-icon { width: 38px; }
    .security-feature-title { margin-top: -39px; margin-left: 54px; font-size: 15px; }
    .security-feature-line { display: none; }
    .dash-payin-content { width: 100%; }
    .dash-payin-visual { width: 33%; right: 1px; top: 0px; height: auto; }
    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.25rem; }
    .how-it-works-container { max-width: 100%; padding: 0px 14px; }
    .how-it-works-list { grid-template-columns: repeat(1, 1fr); gap: 0; }
    .security-section { padding: 31px 14px; padding-bottom: 0px; }
    .field label { font-size: 14px; }
    .field input, .field textarea { height: 45px; border-radius: 5px; }
    .security-cards { grid-template-columns: repeat(1, 1fr); gap: 7px; }
    .security-feature-info { padding: 0px; }
    .feature-item { width: 100%; justify-content: left; border-right: none; }
    .feature-item img { width: 64px; display: block; }
    .contact-card { flex-direction: column; text-align: center; margin-top: 0px; gap: 10px; }
    .form-actions .small-btn { padding: 9px 43px; font-size: 15px; }
    .footer-col ul { padding-left: 19px; gap: 7px; }
    .footer-brand p { font-size: 14px; max-width: 100%; margin-top: 13px; margin-bottom: 0px; }
    .contact-card-image { width: 74px; }
    .contact-card-content h3 { font-size: 21px; }
    .contact-card-content p, .contact-card-content a { font-size: 16px; }
    .security-feature { gap: 5px; }
    .security-icon { display: none; }
    .security-content h3 { font-size: 10px; }
    .security-features { padding: 9px 11px; min-height: 63px; }
    .wallet-balance-card { flex: 100%; }
    .date-picker-box i { right: 6px; font-size: 23px; top: 1px; }
    .wallet-balance-wrapper { gap: 16px; flex-wrap: wrap; }
    .from-arrow { display: none; }
    .date-input-box { gap: 13px; flex-wrap: wrap; }
    .wallet-title { gap: 10px; }
    .wallet-title img { width: 33px; }
    .overview-icon img { width: 60px; }
    .overview-inner-box { gap: 12px; }
    .performance-wrapper-card { display: grid; grid-template-columns: repeat(1, 1fr); gap: 9px; }
    .wallet-balance-card img { right: 7px; bottom: 13px; width: 105px; }
    .inner-title { margin-bottom: 20px; }
    .wallet-dash-container { margin-bottom: 22px; }
    .security-icon svg { width: 22px; height: 22px; }
    .security-content h3 { font-size: 11px; text-align: left; }
    .security-content p { font-size: 8px; }
    .security-divider { margin: 0 10px; }
    .mob-logo img { width: 139px; }
    .stat-badge { padding: 6px 11px; border-radius: 8px; font-size: 11px; width: auto; }
    .wallet-bal-info .wallet-value { font-size: 13px; }
    .dropdown-menu { top: 60px; }
    .wallet-bal-mob { gap: 5px; top: 51px; }
    .wallet-bal-info .wallet-label { font-size: 13px; }
    .wallet-item { gap: 5px; font-size: 13px; }
    .form-section-title { font-size: 19px; margin-bottom: 9px; margin-top: 30px; padding-bottom: 8px; }
    .feature-container { grid-template-columns: repeat(1, 1fr); display: grid; gap: 17px; }
    .detail-box-info { gap: 17px; }
    .hero-grid { gap: 19px; display: flex; flex-direction: column; }
    .hero-sub { width: 100%; }
    .hero-copy h1 { font-size: 19px; }
    .blob-1 { background: #52853f14; }
    .how-it-works-heading { margin-top: 7px; }
    .how-it-works-box { margin-top: 15px; min-height: auto; padding: 17px 15px; }
    .services-section { padding: 35px 10px !important; }
    .eyebrow { margin-bottom: 12px; font-size: 11px; }
    .security-feature-text { line-height: 20px; font-size: 14px; margin-bottom: 17px; margin-top: 11px; }
    .services-grid { margin-top: 28px; padding: 0px; gap: 9px; grid-template-columns: repeat(1, 1fr); }
    .feature-section { padding: 20px 16px; }
    .hero { padding: calc(var(--nav-h) + 15px) 0 29px; }
    .how-it-works-number { display: none; }
    .card-header { height: auto; }
    .how-it-works-list { margin-top: 19px; }
    .services-small-card img { width: 110px !important; }
    .services-main-card h2 { font-size: 23px; margin: 12px 0; }
    .services-main-card { padding: 18px; min-height: auto; }
    .why-grid { grid-template-columns: repeat(1, 1fr); margin-top: 26px; }
    .app-icon { width: 48px; height: 46px; }
    .price span { font-size: 26px; }
    .acc-trigger { font-size: 15px; padding: 14px; }
    .accordion { gap: 9px; }
    .price-card { margin-bottom: 20px; padding: 19px; }
    .section { padding: 35px 0; }
    .service-card, .why-card { padding: 14px; }
    .testi-card { padding: 14px; }
    .stats-grid { gap: 17px; }
    .section-head { margin: 0 auto 20px; }
    .card-grid { gap: 8px; }
    .form-row { gap: 0px; }
    .service-card p, .why-card p { font-size: 14px; margin-top: 6px; }
    .section-head h2 { font-size: 20px; margin-bottom: 8px; }
    .section-sub { font-size: 15px; }
    .card-header { height: 145px; }
    .inner-header-menu { justify-content: space-between; padding: 7px 8px; }
    span.mob-dis-none { display: none; }
    .form-submit { margin-top: 25px; }
    .card-title { margin-bottom: 7px; }
    .add-btn .small-btn { padding: 5px 13px; }
    .custom-form-wrapper { padding: 15px; }
    .filter-actions .small-btn { padding: 7px 20px; }
    .title-label, .form-label { font-size: 15px; margin-bottom: 4px; }
    .custom-table th { padding: 7px 7px; font-size: 11px; }
    .stats-row { margin-bottom: 10px; gap: 10px; grid-template-columns: repeat(1, 1fr); }
    .notification-dropdown { width: 308px; }
    .notification-item a { font-size: 13px; }
    .custom-main-card { padding: 9px; }
    .filter-group.search-box { max-width: 100%; }
    .table-footer p { font-size: 16px; }
    .summary-stats { padding: 13px 3px; flex-wrap: wrap; width: auto; height: auto; gap: 8px; justify-content: left; position: static; }
    .balance-card .card-title { font-size: 20px; }
    .table-footer { flex-direction: column; gap: 10px; }
    .date-filter .date-range-input { width: 100%; font-size: 16px !important; height: 46px; padding: 9px 22px; }
    .acc-form-control { height: 45px; padding: 9px 17px; }
    .chat-msg-menu { padding: 10px 8px; }
    .acc-title { margin-bottom: 21px; }
    .acc-field .input-icon { font-size: 16px; top: 11px; right: 14px; }
    .acc-title h1 { font-size: 18px; }
    .acc-back-btn { margin-top: 18px; }
    .dt-paging.paging_full_numbers { text-align: center; }
    div#data-grid_info { margin-top: 9px; font-size: 14px; text-align: center; margin-bottom: 11px; }
    .why.section, .testimonials.section, .pricing.section, .contact.section { padding-top: 6px; }
    .logo-track { gap: 8px; }
    .custom-table td { font-size: 12px; white-space: normal; }
    .form-group, .modal-body .form-group { margin-top: 16px; }
    .modal-body .form-group { margin-top: 12px; }
    .successfully h2 { font-size: 16px; margin-bottom: 5px; }
    .modal-body { padding: 11px; }
    .modal-body .user-details-wrapper { flex-direction: column-reverse; }
    .acc-button-info { margin-top: 26px; }
    .acc-logo p { font-size: 16px; line-height: 24px; }
    .dropdown-menu.user-profile-menu { right: 33px; top: 63px; }
    .dropdown-menu ul li a { font-size: 15px; padding: 10px 10px; }
    .acc-field input::placeholder { font-size: 15px; }
    .input-icon i { color: #6c6c6c; font-size: 18px; }
    button.nav-link { margin-right: 0px !important; padding: 6px 11px; font-size: 14px; }
    .custom-tab .nav-tabs { gap: 7px; }
    .filter-group select { border: none; width: 100%; }
    .auth-info-title h5 { margin-bottom: 8px; font-size: 16px; }
    .card-title p { margin-top: 1px; font-size: 12px; }
    .auth-qr-box { flex-direction: column; gap: 17px !important; }
    .auth-info-title p { font-size: 14px; }
    .qr-info-note { padding: 8px 13px !important; }
    .small.text-muted.qr-info-note li { font-size: 11px; }
    .message-send-input .form-control::placeholder { font-size: 15px; }
    .message-send-input textarea.form-control { min-height: 39px; padding: 10px 9px; }
    .alert.alert-danger { font-size: 13px; }
    .offcanvas-header h5 { font-size: 17px; }
    button.btn-close.text-reset { top: 18px; }
    .contact-form { padding: 16px; gap: 0px; border-radius: 9px; }
    .acc-bg-circle { width: 134px; height: 111px; }
    .input-icon a { top: -3px; }
    .acc-logo img { width: 148px; margin-bottom: 0px; }
    .acc-inner-data { border-radius: 6px; padding: 16px; width: 100%; }
    .acc-title img { width: 72px; margin-bottom: 8px; }
    .acc-title p { margin-top: 5px; }
    .acc-data .acc-inner-data .form-group { margin-top: 13px; }
    .acc-data-img { border-radius: 0px; padding: 16px 0px; }
    .acc-data .justify-content-center { width: 100%; }
    .acc-footer-btn { display: flex; align-items: normal; gap: 17px; flex-direction: column; justify-content: space-between; }
    .container { padding: 0px 10px; }
    .acc-data { padding: 18px 5px; }
    .mpin-field { margin-top: 0px; }
    .acc-shape { width: 197px; }
    .paying-inner-item { width: calc(100% - 0px); }
    .qr-info-note { padding: 13px 12px; }
    .wallet-value { font-weight: 600; }
    .divider { display: none; }
    .wallet-container { flex-direction: column; align-items: baseline; gap: 8px; padding: 10px 11px; }
    .filter-group { width: 100%; }
    .inner-title h2 { font-size: 19px; padding-bottom: 6px; }
    .main-content-data { margin-top: 25px; }
    .card-header { padding: 18px 16px; }
    .details-row { row-gap: 12px; }
    .wallet-item { align-items: baseline; }
    .head-wallet-info { flex-direction: column; gap: 0px; align-items: end; }
    .date-range-input { max-width: 145px; width: 100%; padding: 8px 11px; font-size: 14px; }
    .date-filter-wrapper { gap: 13px; flex-wrap: wrap; }
    .contact-hero-section { padding: 2px 6px; }
    .card-body { border-radius: 14px 14px 0 0; }
    .site-footer { padding: 34px 6px 0; }
    .docs-header { margin-top: 0px; }
    .footer-col.footer-newsletter { display: none; }
    .docs-p { font-size: 14px; line-height: 18px; }
    .docs-ordered-list li, .docs-bullet-list li { font-size: 12px; }
    .docs-base-url-box { flex-wrap: wrap; flex-direction: column; align-items: flex-start; }
    .docs-base-url-box code { word-break: break-all; }
    .docs-grid { grid-template-columns: 1fr; gap: 0px; }
    .docs-table-wrap { margin: 4px 0 0px; }
    .nav-menu { gap: 14px; }
    .footer-grid { gap: 25px; padding-bottom: 21px; }
    .contact.section { padding-top: 0px; }
    .legal-content .legal-left ul { display: block; }
    .legal-toc li, .legal-left, .legal-body { width: 100%; }
    .legal-content h2, .security-grid .mini-card h3 { font-size: 15px; }
    .security-grid { margin-top: 0; }
    .account-info-card { gap: 4px; }
    .header-right-menu { gap: 5px; }
    .account-name { font-size: 12px; }
    .account-id { font-size: 10px; }
    .security-grid .mini-card { padding: 12px; }
    .security-grid .mini-card p, .legal-content p, .legal-content li { font-size: 13px; }
    .docs-main { padding: calc(var(--topbar-height) + 24px) 16px 80px; }
    .docs-title { font-size: 25px; }
    .docs-section-title { font-size: 21px; }
    table.docs-table { min-width: 460px; }
    .footer-col h4 { font-size: 19px; }
}

span.badge.bg-success.bg-notification.ms-1 {
    display: inline-block;
    width: 10px;
    position: absolute;
    top: -14px;
    right: -8px;
    background: #000000;
    height: 15px;
    border-radius: 50%;
}

span.fw-bold {
    position: relative;
}

.message-send-input textarea.form-control {
    min-height: 43px;
}

span.status.primary {
    background: #ff7300cf;
    color: #fff;
}

button.nav-link.active,
button.nav-link:hover {
    background: #695ec9 !important;
    color: #fff !important;
}

button.nav-link {
    background: #a2a4ff24 !important;
    border: 1px solid #6264c4 !important;
    margin-right: 13px;
    color: #6862c5;
    border-radius: 5px !important;
}

.custom-tab .nav-tabs {
    border-bottom: none !important;
    padding-bottom: 1px;
}