@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: Inter; */
}

body{
    overflow-x: hidden;
}

.profilelabelinput input.form-control,
.depositinput,
.withdrawalinput,
.cryptolabelinput input.form-control,
.refercardinput input.form-control,
.cashlabelinput .form-control,
.loginputdiv input {
    font-size: 17px !important;
}

input:focus {
    border: 2px solid #40196D !important;
}


input:focus {
    border: 2px solid #40196D !important;
}

a,
a:hover {
    text-decoration: none !important;
    color: inherit !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
}

p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* BOTTOM NAV */
.bottom-mobile {
    margin-top: 50px !important;
    display: none;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 10px;
    height: 80px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    background: #40196D;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px 10px 0 0;
    z-index: 999;
    transition: transform 0.3s ease;
}

.bottom-nav.hidden {
    transform: translateY(100%);
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    line-height: 30px;
    min-width: 50px;
    white-space: nowrap;
    font-family: sans-serif;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
    color: white !important;
    font-size: 13px;
    opacity: 0.6;
}

.nav__link--active {
    color: #40196D;
    font-weight: 600;
    opacity: 1;
}

/* LANDING PAGE */
.navbar {
    margin-top: 10px;
    padding: 10px 0 !important;
}

.navbar-brand a img {
    width: 20%;
}

.nav-link {
    color: #40196D !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding-left: 10px !important;
}

.btn-getstarted {
    background: #FF6600 !important;
    color: white !important;
    margin-left: 50px;
    border-radius: 50px !important;
    font-size: 13px !important;
    padding: 7px 30px !important;
    font-weight: 200 !important;
}

.landingpagehero {
    margin: 50px 0;
}

.landingpagehero-row {
    text-align: center;
}

.landingpagehero-row h1 {
    text-transform: capitalize;
    font-size: 45px;
    color: #23262F !important;
}

.landingpagehero-row p {
    padding: 5px 0 15px 0;
    color: #00000080;
    font-size: 14px;
}

.btn-get-started {
    background: #FF6600 !important;
    color: white !important;
    width: 15% !important;
    margin: auto !important;
    font-weight: 200 !important;
    border-radius: 50px !important;
}

.download {
    margin-top: 80px;
    margin-bottom: 60px;
}

.downloadrow {
    height: 60vh;
    background: #40196D;
    border-radius: 25px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 50px;
}

.downloadimg img {
    width: 38%;
    margin: auto !important;
    position: absolute;
    bottom: 0;
    right: 0;
}

.downloadrow-text {
    color: white;
}

.downloadrow-text p {
    font-size: 13px;
    color: #FFFFFFCC;
    padding: 20px 0;
    font-weight: 200;
}

.downloadimgwrap {
    display: flex;
    gap: 20px;
}

.cryptodisplaysectioncontainer {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 20px;
}

.cryptodisplaysection-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 10px;
    width: 10%;
    flex-shrink: 0;
}

.cryptodisplaysection-card img {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
}

.cryptodisplaysection-name {
    font-weight: bold;
}

.cryptodisplaysection-price {
    font-size: 0.9rem;
    color: #333;
}

.cryptodisplaysection-change {
    margin-top: 8px;
    font-weight: bold;
    border-radius: 12px;
    padding: 1px 10px;
    display: inline-block;
    font-size: 0.75rem;
    color: white;
}

.cryptodisplaysectionpositive {
    background: green;
}

.cryptodisplaysectionnegative {
    background: red;
}

.cryptodisplaysectionneutral {
    background: gray;
}

.seamlesstrading {
    margin-top: 100px;
}

.seamlesstrading-text {
    text-align: center;
}

.seamlesstrading-text h2 {
    color: #23262F;
}

.seamlesstrading-text h2 br {
    display: none;
}

.seamlesstrading-text p {
    font-size: 14px;
    color: #777E90;
}

.seamlesstradingrow img {
    width: 100%;
}

.seamlesstradingrow {
    align-items: center;
    justify-content: space-between;
    margin-top: 80px !important;
}

.seamlesstradingrow p {
    color: #00000080;
}

.seamlesstradingrow h3 {
    color: #40196D !important;
}

.sidebuycard {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.sellcard {
    width: 85% !important;
}

.getstarted {
    margin-top: 50px;
    background: #40196D1A;
    height: 80vh;
}

.getstartedrow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    text-align: center;
}

.numberow {
    display: flex;
    justify-content: space-between;
    width: 75% !important;
    padding: 40px 0;
}

.numberow h1 {
    color: #40196D;
    font-size: 50px;
}

.numberow span {
    font-size: 13px;
    color: #110E22;
}

.singlearrow {
    display: block;
}

.doublearrow {
    display: none;
}

.btn-get {
    background: #FF6600 !important;
    color: white !important;
    width: 20% !important;
    padding: 10px 0 !important;
    border-radius: 50px !important;
    font-weight: 200 !important;
}

.aboutus {
    background: #40196D;
    padding: 100px 0;
}

.aboutus h1 {
    color: #FFFFFF;
}

.aboutus p {
    color: #FFFFFFCC;
    padding-top: 30px;
    font-weight: 300;
}

.newsletter {
    text-align: center;
    padding: 120px 0;
}

.newsletter h2 {
    color: #23262F;
}

.newsletter p {
    color: #777E90;
}

.subscribe-wrapper {
    display: flex;
    border-radius: 100px;
    overflow: hidden;
    width: 50%;
    padding: 5px;
    height: 50px;
    margin: auto;
    margin-top: 40px;
    border: 2px solid #40196D1A;
}

.subscribe-wrapper input {
    border: none;
    outline: none;
    padding: 14px 20px;
    flex: 1;
}

.subscribe-wrapper input::placeholder {
    color: #535353;
    font-size: 14px;
}

.subscribe-wrapper button {
    background: #40196D;
    color: white;
    border: none;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer;
    width: 20%;
}

.subscribe-wrapper button:hover {
    background: #0a310a;
}

footer {
    padding: 60px 0 10px 0;
}

.footercol img a{
    width: 80%;
}

.footercol div {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.footercol div img a{
    width: 50% !important;
}

.companytext span {
    font-size: 14px;
    color: #9CA3AF;
    cursor: pointer;
}

.companytext h6 {
    padding-bottom: 10px;
}

.contact p {
    padding: 10px 0;
}

.contact p a {
    color: #372AA4 !important;
}

.contact div a {
    width: 30%;
    cursor: pointer;
}

.contact div {
    display: flex;
    justify-content: flex-start;
    margin-left: -10px !important;
}

.footerlasttext {
    color: #1D1E2C;
    text-align: center;
    font-size: 14px;
}

.footerow {
    margin-bottom: 80px;
}

/* DASHBOARD */
.sidebarlayout {
    display: flex;
}

.sidebarlogo {
    text-align: center;
}

.sidebarlogo img {
    width: 70%;
    padding-bottom: 20px;
}

.sidebar {
    background: #40196D;
    color: white;
    width: 230px;
    height: 100vh;
    padding: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    transition: left 0.3s ease;
    z-index: 1000;
    padding-top: 40px;
}

.dasboardnav-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboardnav-item {
    text-decoration: none;
    color: #FFFFFF91 !important;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 14px;
}

.dashboardnav-item.activate,
.dashboardnav-item:hover,
.dashboardlogout:hover {
    background: white;
    color: #40196D !important;
    font-weight: 600;
}

.dashboardnav-item svg path,
.dashboardlogout svg path {
    fill: white;
    opacity: 0.6;
}

.dashboardnav-item.activate svg path,
.dashboardnav-item:hover svg path,
.dashboardlogout:hover svg path {
    opacity: 1;
    fill: #40196D;
}

.dashboardhelp-center {
    background: #FFFFFF24;
    border-radius: 12px;
    text-align: center;
    padding: 30px 0;
}

.dashboardhelp-center p {
    font-weight: bold;
    margin-bottom: 6px;
}

.dashboardhelp-center span {
    display: block;
    font-size: 11px;
    margin-bottom: 12px;
    color: #F0E3FF;
    font-weight: 100 !important;
}

.dashboardhelp-center button {
    background: white;
    color: #40196D;
    padding: 2px 12px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
}

.dashboardhelp-center button:hover {
    background: #40196D;
    color: white;
    padding: 2px 12px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
}

.dashboardlogout {
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background 0.2s;
    font-weight: 100;
    font-size: 14px;
}

.dashboardlogout svg {
    margin-right: 20px;
}

.headlogo {
    width: 35px;
    height: 35px;
    border-radius: 100%;
    cursor: pointer;
}

/* Main area */
.main {
    margin-left: 230px;
    background: #FCF9FF;
    padding: 40px 30px 10px 30px;
    height: 100%;
    width: 100%;
}

.mainheight {
    height: 100vh !important;
}

/* Top bar */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.topbar h4 {
    color: #40196D;
}

.topbar h4::before {
    content: "";
    width: 56px;
    height: 3px;
    background: #40196D;
    position: absolute;
    bottom: 5px;
    opacity: 0.6;
}

.topbar-head {
    display: flex;
    gap: 20px;
    position: relative;
}

.topbar-head span {
    color: #40196D;
    font-size: 14px;
    padding-top: 4px;
}

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.user-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.user-icons span {
    cursor: pointer;
    background: white;
    padding: 7px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 100%;
    width: 35px;
    height: 35px;
}

/* Content */
.maincontent {
    padding-top: 5px;
}

.maincontentcard {
    height: 170px;
    border-radius: 10px;
    background: linear-gradient(110deg, #712AC3 0.56%, #40196D 85.83%);
    width: 90%;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    z-index: 1;
    padding: 20px 0 15px 20px;
    color: white;
}

.maincontentcard span {
    color: #FFFFFF91;
    font-size: 12px;
}

.maincontentcard h2 {
    padding-top: 5px !important;
}

.maincontentcard img {
    position: absolute;
    right: 0;
    border-radius: 10px;
    height: 170px;
    top: 0;
    z-index: -1;
}

.maincontentcardbutton {
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.maincontentcardbutton> :nth-child(1),
.maincontentcardbutton> :nth-child(1):hover {
    color: #40196D !important;
    font-size: 11px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 50px;
}

.maincontentcardbutton> :nth-child(2),
.maincontentcardbutton> :nth-child(2):hover {
    color: #fff !important;
    font-size: 11px;
    background: #FF6600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 50px;
}

.quickactiondiv {
    background: #40196D;
    height: 25px;
    border-radius: 100px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}


.maincontentrow {
    display: flex;
}

.quickactionimg {
    display: flex;
    overflow-x: auto;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    margin-left: 70px;
    margin-right: 150px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.quickactionimg img {
    width: 27%;
    cursor: pointer;
}


.quickactionimg::-webkit-scrollbar {
    display: none;
}

.quickcol {
    position: relative;
    text-align: center;
}

.quickcol p {
    padding-top: 10px;
    color: #481C7B;
    font-size: 13px;
    font-weight: 600;
}

.quickactionsvg svg {
    position: absolute;
    top: 50%;
    right: 70px;
    cursor: pointer;
}

.quickactionsvg.left {
    position: absolute;
    top: 50%;
    left: 140px;
    cursor: pointer;
}



.alltransact h5 {
    color: #40196D;
    padding-bottom: 10px;
}

.alltransact h5::before {
    content: "";
    width: 65px;
    height: 3px;
    background: #40196D;
    position: absolute;
    top: 25px;
    bottom: 5px;
    opacity: 0.6;
}

.transactiondiv {
    height: 8vh;
    background: #fff;
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.alltransact {
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    position: relative;
    margin-top: 70px;
    width: 72%;
}

.alltransact p {
    font-size: 14px;
    color: #40196D;
    font-weight: 600;
}

.carousel-item img {
    width: 95% !important;
    margin: auto;
    margin-top: 10px;
}

/* .superimage img {
    width: 100%;
    height: 42vh;
    margin-top: 10px;
    object-fit: cover;
    border-radius: 10px;
} */

#superDiscountCarousel .carousel-indicators button {
    background-color: #40196D;
}

#superDiscountCarousel .carousel-indicators .active {
    background-color: #40196D;
}

.carousel-indicators button {
    width: 7px !important;
    height: 7px !important;
    border-radius: 100% !important;
}

.withdraw {
    font-size: 14px;
}

.withdrawspan {
    line-height: 20px;
}

.withdrawspan> :nth-child(1) {
    font-size: 13px;
    color: #8D8D8D;
}

.withdrawspan> :nth-child(3) {
    font-size: 14px;
}

.withdrawcompleted {
    font-size: 14px;
    color: #40196D;
    font-weight: 600;
    text-align: left !important;
}

/* TRANSACTION PAGE */
.transactioninput {
    width: 100px;
    font-size: 14px;
    border: none;
    color: white;
    background: #FF6600;
    padding: 5px;
    border-radius: 5px;
}

.transactioninput:focus {
    border: none;
    outline: none;
}

.transactioninputdiv {
    display: flex;
    justify-content: right;
    margin-bottom: 40px;
    width: 74% !important;
}

/* LOGIN PAGE */
.toggle-eye {
    position: absolute;
    top: 50%;
    right: 15px;
    cursor: pointer;
    color: #888;
}

.loginpage {
    display: flex;
}

.pageleft {
    background: #40196D;
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    margin: auto;
    align-items: center;
}

.pageleft img {
    width: 30%;
}

.pageright {
    background: #40196D0D;
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    margin: auto;
    align-items: center;
}

.pagerightcard {
    background: white;
    padding: 30px;
    width: 30vw;
    border-radius: 15px;
}

.pagerightcard-head {
    text-align: center;
}

.pagerightcard-head h2 {
    color: #40196D;
}

.pagerightcard-head p {
    color: #40196D;
    font-size: 14px;
    padding-bottom: 30px;
}

.loginput {
    margin-top: 10px;
    font-size: 14px !important;
    height: 45px;
    border: 1px solid #40196D80 !important;
    padding: 0 40px !important;
    color: #40196D80 !important;
}

.loginput:focus {
    box-shadow: none !important;
    background: #40196D0D !important;
}

.loginput::placeholder {
    color: #40196D80 !important;
    font-size: 13px;
}

.loginputdiv {
    position: relative;
}

.loginputdiv> :nth-child(2) {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 6%;
}

.loginputdiv> :nth-child(3) {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 6%;
    cursor: pointer;
}

.forgotext {
    font-size: 14px;
    color: #40196D;
    padding-top: 5px;
}

.btn-login {
    background: #FF6600 !important;
    width: 100%;
    color: white !important;
    font-size: 14px;
    margin-top: 30px;
}

.newto {
    text-align: center;
    font-size: 13px;
    color: #7B7B7B;
    padding-top: 5px;
}

.newto span {
    color: #FF6600;
}

.pagerightimg {
    display: none;
}

.loginputdiv img {
    width: 6% !important;
}

/* WITHDRAWAL PAGE */
.withdrawalCard {
    height: 60vh;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.superdiscountimage {
    width: 100%;
}

.withdrawalrow {
    margin-top: 50px !important;
}

.withdrawalinput {
    height: 45px;
    padding-left: 15px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 14px !important;
}

.withdrawalinput:focus {
    box-shadow: none !important;
}

.withdrawalinput::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.withdrawalCard h4 {
    color: #40196D;
    padding-bottom: 40px;
    text-align: center;
}

.btn-withdraw {
    background: #FF6600 !important;
    color: white !important;
    margin-top: 40px;
    font-size: 14px !important;
    border-radius: 50px !important;
    width: 100%;
    padding: 10px 0 !important;
}

.withdrawalCardinner {
    width: 40%;
    text-align: center;
}

.underinputext {
    font-size: 14px;
    padding-top: 5px;
    color: #000000;
    opacity: 0.6;
}

.underinputext span {
    color: #FF6600;
}

.withdrawalCardinner h6 {
    color: #40196D;
    padding-bottom: 30px;
}

.withdrawalCardinner h2 {
    color: #40196D;
}

/* DEPOSIT PAGE */
.depositrow {
    margin-top: 25px !important;
}

.depositCard {
    height: 100%;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.depositinner {
    position: relative;
    width: 100%;
    padding: 50px 80px;
}

.depositinnercard {
    width: 100%;
    text-align: center;
    padding: 30px 50px;
    height: 100%;
}

.depositinput {
    height: 45px !important;
    padding-left: 20px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 14px !important;
    margin-bottom: 20px;
    width: 100% !important;
}

.depositinput:focus {
    box-shadow: none !important;
}

.depositinput::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.selectdeposit {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("../images/fund.svg") no-repeat 15px center;
    background-color: #40196D12;
    background-size: 20px 20px;
    padding-left: 50px;
    height: 45px;
    width: 100%;
    border: 2px solid #40196D1A;
    border-radius: 5px;
    font-size: 13px;
    color: #40196D;
    font-weight: 500;
    margin-bottom: 20px;
}

.selectdeposit:focus,
.selectdeposit option:focus {
    border: 2px solid #40196D1A !important;
}

.selectdeposit option {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
    background: white !important;
}

.noticetext {
    font-size: 14px;
    margin: 10px 30px 0 30px;
    opacity: 0.6;
}

.noticetext ul li {
    padding-bottom: 10px;
}

.fundcard {
    position: absolute;
    top: calc(50px + 45px + 20px + 13px);
    left: calc(80px + 15px);
}

.labelinput {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    position: relative;
}

.sender {
    margin-top: 50px;
}

.labelinput label {
    font-size: 14px;
    opacity: 0.6;
}

.labelinput img {
    position: absolute;
    right: 15px;
    cursor: pointer;
}

.labelinput input {
    width: 70%;
    height: 45px;
    padding-left: 20px !important;
    padding-right: 50px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.6;
}

.labelinput input:focus {
    box-shadow: none !important;
}

.labelinput input::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.depositinnercard span {
    font-size: 14px;
    /* opacity: 0.6; */
}

.depositinnercard h2 {
    color: #40196D;
    padding-top: 5px;
    padding-bottom: 10px;
}

/* .labelinput input[type="file"] {
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
} */

/* .labelinput img {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    z-index: 1;
    pointer-events: none;
} */

.filename-display {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 9999;
}

.fileproof {
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.6;
    width: 70%;
    height: 45px;
    display: flex;
    align-items: center;
    padding-left: 15px;
}

.belowbuttontext {
    opacity: 0.6;
    font-size: 14px;
    padding-top: 10px;
}

/* REFER PAGE */
.referCard {
    padding-top: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.refercardinput {
    width: 65%;
    position: relative;
    margin-bottom: 30px;
}

.refercardinput label {
    font-size: 14px;
    padding-bottom: 10px;
}

.refercardinput input {
    height: 45px;
    padding-left: 20px !important;
    padding-right: 50px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
}

.refercardinput input:focus {
    box-shadow: none !important;
}

.refercardinput img {
    position: absolute;
    top: 43px;
    right: 10px;
    cursor: pointer;
}

.totalsignup {
    margin-top: 0px;
    justify-content: space-between;
    display: flex;
    width: 40%;
    text-align: center;
}

.totalsignup span,
.payouts span {
    opacity: 0.6;
    font-size: 12px;
}

.totalsignup h4 {
    color: #40196D;
}

.payouts {
    text-align: center;
    padding-top: 30px;
}

.payouts h3 {
    color: #40196D;
}

.btn-earnings {
    background: #FF6600 !important;
    color: white !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    margin-top: 30px;
}

/* SETTINGS */
.settingswrapper {
    height: 80vh;
    background: white;
    margin-top: 30px;
    border-radius: 10px;
}

.settings-card-header {
    height: 10vh;
    border-bottom: 1px solid #40196D26;
    display: flex;
    gap: 100px;
    align-items: center;
    padding-left: 50px;
}

.settings-card-header div span {
    font-size: 14px;
    opacity: 0.6;
    cursor: pointer;
}

.settings-active {
    color: #40196D;
    font-weight: 500;
    opacity: 1 !important;
    font-size: 15px !important;
}

.settings-active::before {
    content: "";
    width: 60px;
    height: 3px;
    background: #40196D;
    position: absolute;
    bottom: -21px;
    left: -5px;
    border-radius: 50px;
}

.settings-card-header div {
    position: relative;
}

.bank::before {
    width: 130px !important;
}

.settings-card-body {
    padding: 50px;
}

.btn-update {
    background: #FF6600 !important;
    color: white !important;
    font-size: 14px !important;
    border-radius: 50px !important;
    width: 15%;
    padding: 10px 0 !important;
}

.info {
    width: 30%;
}

.profilelabelinput {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    position: relative;
    margin: 20px auto;
}

.profilelabelinput label {
    font-size: 14px;
    opacity: 0.6;
}

.profilelabelinput img {
    position: absolute;
    right: 20px;
    cursor: pointer;
}

.profilelabelinput input {
    width: 80%;
    height: 45px;
    padding-left: 20px !important;
    padding-right: 50px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.6;
}

.profilelabelinput input:focus {
    box-shadow: none !important;
}

.profilelabelinput input::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.profilelabelbutton {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    width: 80%;
}

/* BUY AIRTIME PAGE */
.airtimeCard {
    height: 100%;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 30px;
}

.airtimeCardinner {
    padding-top: 50px;
    width: 40%;
    text-align: center;
}

.airtimeCardinner h6 {
    padding-bottom: 10px;
    color: #40196D;
}

.airtimeCardinner h4 {
    padding-bottom: 10px;
    color: #40196D;
}

.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 1px 10px 15px;
    background-color: #40196d12;
    border: 1px solid #40196d1a;
    border-radius: 5px;
    cursor: pointer;
}

.custom-select-display img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.custom-select-options {
    /* display: none; */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 2px solid #40196d1a;
    margin-top: 10px;
    border-radius: 5px;
    z-index: 10;
    padding: 0;
    list-style: none;
    padding: 15px 0;
}

.custom-select-options li {
    display: flex;
    padding: 15px 15px;
    cursor: pointer;
    color: #40196D;
}

.custom-select-options li img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.custom-select-options li:hover {
    background-color: #f0f0f0;
}

.airtimeinput {
    height: 45px;
    padding-left: 15px !important;
    border: 1px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 14px !important;
}

.airtimeinput:focus {
    box-shadow: none !important;
}

.airtimeinput::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.btn-airtime {
    background: #FF6600 !important;
    color: white !important;
    margin-top: 15px;
    font-size: 14px !important;
    border-radius: 50px !important;
    width: 100%;
    padding: 10px 0 !important;
}

.mtn-top {
    margin-top: 40px;
}

.payment-top {
    margin-top: 10px;
    margin-bottom: 10px;
}

.plan-top {
    margin-top: 10px;
}

#selectedNetwork1,
#selectedPaymentMethod1,
#selectedCategory,
#selectedPlan,
#selectedElectricity,
#selectedMeter,
#selectedQuantity,
#selectedCurrency,
#selectedNetwork {
    font-weight: 400;
    color: #40196D;
    font-size: 14px;
}

/* AIRTIME TO CASH PAGE */
.cashCard {
    height: 100vh;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 30px;
}

.cash-Card {
    height: 100%;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 30px;
    padding-top: 20px;
}

.yougetext {
    font-size: 14px;
    text-align: left;
    padding-top: 10px;
    font-weight: 500;
    opacity: 0.6;
}

.airtimelabelinput {
    display: flex;
    justify-content: space-between;
}

.airtimetext {
    width: 70%;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.8;
    padding: 20px 5px 0px 5px;
    border-radius: 5px;
}

.airtimetext ul li {
    padding-bottom: 15px;
}

.airtime-Cardinner {
    width: 80%;
    margin: auto;
}

.airtimelabelinput label {
    font-size: 14px;
    opacity: 0.6;
}

.cashlabelinput {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 15px;
}

.cashlabelinput img {
    position: absolute;
    right: 15px;
    top: 20%;
    cursor: pointer;
}

.cashlabelinput label {
    font-size: 14px;
    opacity: 0.6;
}

.cashlabelinput input {
    width: 70%;
    height: 45px;
    padding-left: 20px !important;
    padding-right: 50px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.9;
}

.cashlabelinput input:focus {
    box-shadow: none !important;
}

.cashlabelinput input::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.cashCardinner,
.cryptosuccess {
    text-align: center;
    padding-top: 50px;
    width: 45%;
    margin: auto;
}

.cashCardinner h6,
.cryptosuccess h6 {
    color: #40196D;
    padding-bottom: 20px;
}

.cashCardinner h3,
.cryptosuccess h3 {
    color: #40196D;
    padding-top: 10px;
}

.cashCardinner p,
.cryptosuccess p {
    font-size: 14px;
    color: #000000;
    opacity: 0.6;
}

/* SUPPORT PAGE */
.supportCard {
    height: 100vh;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.dashboardhelp-center .support-active {
    background: #40196D;
    color: white;
    padding: 2px 12px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
}

.supportCardtext h3 {
    color: #40196D;
    text-align: center;
}

.supportCardtext p {
    color: #0000006E;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.ticketwrapper {
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 20px !important;
    display: flex;
}

.create,
.view {
    background: #40196D1A;
    border: 1px solid #40196D33;
    line-height: 1px !important;
    padding: 10px 5px 10px 20px;
    border-radius: 5px;
    display: flex;
    align-items: center !important;
    gap: 10px;

}

.create h6,
.view h6 {
    color: #40196D;
    padding-top: 7px;
}

.create p,
.view p {
    font-size: 11px;
    color: #40196D80;
}

.supportticket-container {
    width: 45%;
    margin: 50px auto;
    font-family: sans-serif;
}

.supportticket-item {
    background-color: #40196D12;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #40196D1A;
}

.supportticket-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    cursor: pointer;
}

.supporticon {
    margin-right: 10px;
}

.question-text {
    flex-grow: 1;
    font-weight: bold;
    color: #40196D;
}

.toggle-icon {
    transition: transform 0.3s;
    color: #40196D;
}

.supportticket-answer {
    padding: 0 15px 15px 45px;
    font-size: 13px;
    color: #40196D80;
    display: none;
}

.supportticket-item.active .supportticket-answer {
    display: block;
}

.supportticket-item.active .toggle-icon {
    transform: rotate(180deg);
}

/* CREATE TICKET */
.createticketCard {
    width: 90%;
}

.cashlabelinput textarea {
    width: 70%;
    height: 200px;
    padding-left: 20px !important;
    padding-right: 50px !important;
    padding-top: 10px;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.9;
}

.cashlabelinput textarea:focus {
    box-shadow: none !important;
}

.cashlabelinput textarea::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.btn-attach {
    background: #FF6600 !important;
    color: white !important;
    width: 100%;
    border-radius: 50px !important;
    margin-top: 40px;
}


/* VIEW TICKET */
.viewcardwrapper {
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
    background: white;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 10px;
}

.viewticketinner {
    display: grid !important;
    align-items: center !important;
}

.btnticket {
    background: #FF6600 !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    color: white !important;
    padding: 2px 30px !important;
}

.idnumber span {
    font-size: 14px;
    font-weight: 500;
}

.viewticketinner> :nth-child(1) {
    font-size: 12px;
    color: #8D8D8D;
}

.viewticketinner> :nth-child(2) {
    font-size: 14px;
    color: black;
}

.buttonwrap span {
    font-size: 14px;
    font-weight: 500;
}

.spanresolved {
    color: #16A249;
}

.spanfailed {
    color: #a21616;
}

.spanongoing {
    color: #161fa2;
}

.buttonwrap {
    display: flex;
    justify-content: space-between;
}

.viewticket {
    background: white;
    padding: 70px 30px 30px 30px !important;
    border-radius: 10px;
}

.chatrow {
    display: flex;
    width: 55%;
    gap: 15px;
    margin-bottom: 30px;
}

.chatrowleft {
    display: flex;
    width: 55%;
    gap: 15px;
    margin-bottom: 30px;
    margin-left: auto;
    justify-content: flex-end !important;
}

.chatrowinput {
    display: flex;
    width: 100%;
    gap: 15px;
}

.chatrowinput input {
    background: #40196D1A;
    border: 1px solid #40196D1A;
    height: 45px;
}

.chatrowinput input::placeholder {
    color: #40196D;
    opacity: 0.6;
}

.chatrowinput input:focus {
    background: #40196D1A;
    border: 2px solid #40196D1A;
    box-shadow: none;
    outline: none;
}

.chatrow .chattextwrap {
    font-size: 13px;
    color: #FEFEFE99;
    background: #40196D;
    padding: 20px;
    border-radius: 10px;
}

.chatrowleft .chattextwrap {
    font-size: 13px;
    color: #40196D;
    background: #40196D1A;
    padding: 20px;
    border-radius: 10px;
}

/* SELL CRYPTO */
.btcequi {
    padding: 15px 0 0 0;
    color: #40196D;
    opacity: 0.6;
}

.cryptoCard {
    height: 100%;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 70px;
}

.cryptolabelinput select {
    width: 70%;
    height: 45px;
    padding-left: 20px !important;
    padding-right: 50px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.9;
}

.cryptolabelinput select:focus {
    box-shadow: none !important;
}

.sellcryptotext {
    text-align: center;
    color: #919191;
    padding-top: 10px;
    font-size: 15px;
}

.cryptolabelinput {
    display: flex !important;
    justify-content: space-between;
    position: relative;
    margin-top: 15px;
    align-items: center;
}

.cryptolabelinput img {
    position: absolute;
    right: 15px;
    top: 20%;
    cursor: pointer;
}

.cryptolabelinput label {
    font-size: 14px;
    opacity: 0.6;
}

.cryptolabelinput input {
    width: 70%;
    height: 45px;
    padding-left: 20px !important;
    padding-right: 50px !important;
    border: 2px solid #40196D1A !important;
    background: #40196D12 !important;
    font-size: 13px !important;
    color: #40196D;
    opacity: 0.9;
}

.cryptolabelinput input:focus {
    box-shadow: none !important;
}

.cryptolabelinput input::placeholder {
    font-size: 13px;
    color: #40196D !important;
    opacity: 0.6 !important;
}

.upper {
    padding-top: 70px;
}

/* Modal styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* display: none; */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    display: flex;

}

.modal-box {
    background: white;
    padding: 2rem;
    max-width: 550px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.modal-box h4 {
    color: #40196D;
    margin-bottom: 1rem;
}

.modal-box p {
    font-size: 14px;
    line-height: 1.5;
    color: #40196DB2;
    margin-bottom: 0.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    margin-top: 1.5rem;
}

.modal-actions .btn {
    padding: 0.6rem 1.4rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.cancel-modal {
    background: #8D8D8D !important;
    color: white !important;
    border-radius: 50px !important;
}

.proceed-modal {
    background: #ff6600 !important;
    color: white !important;
    border-radius: 50px !important;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    margin-top: 40px;
    font-size: 13px;
    color: #40196DB2;
    justify-content: space-between;
}

.custom-checkbox input {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 2px;
    background: #40196D;
    display: inline-block;
    position: relative;
}

.checkmark::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    transition: background 0.2s;
}

.checkmark::after {
    content: "✓";
    color: white;
    font-size: 14px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.custom-checkbox input:checked+.checkmark::before {
    background: #40196D;
}

.custom-checkbox input:checked+.checkmark::after {
    opacity: 1;
}

/* BUY CRYPTO PAGE */
.buycrypto h4 {
    margin: 20px 0;
}

.selected-text {
    font-size: 15px;
    opacity: 0.8;
    color: #40196D;
}

.networkdiv {
    display: flex;
    justify-content: space-between;
    margin: 20px 5px 10px 5px;
}

.networkdiv li {
    padding: 0 10px !important;
    font-size: 13px;
    border: 1px solid #40196D;
    border-radius: 50px;
}

.networkdiv li:hover {
    background: #40196D;
    color: white;
    transition: .3s;
}

.feesdiv {
    display: flex;
    justify-content: space-between;
}

.feesdiv div {
    font-size: 14px;
    font-weight: 500;
    color: #40196D;
    opacity: 0.8;
}

.feesdivwrap {
    margin: 0 5px;
    display: none;
}

/* .btcselect li {
    text-align: center !important;
} */

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

.dropdown-menu li {
    padding-left: 15px;
}

.green-li {
    color: #006F07;
}

.red-li {
    color: #FF0000;
}

.hover-dropdown .dropdown-menu {
    top: 40px !important;
    left: auto;
    right: 0;
    transform: none !important;
    min-width: 250px;
    border: none;
    padding: 15px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.hover-dropdown .dropdown-toggle::after {
    display: none;
}

/* GIFTCARD PAGE */
.giftcardestimate {
    padding-top: 20px;
    color: #40196D;
    opacity: 0.6;
    font-weight: 500;
}

.btn-giftcard {
    background: #FF6600 !important;
    color: white !important;
    font-size: 14px !important;
    border-radius: 50px !important;
    width: 100%;
    padding: 10px 0 !important;
}