.home-top-card {
 --background: url("/assets/images/home-top-card.png");
 background-repeat: no-repeat !important;
 background-size: cover !important;
 background-position: 100% 100%;

 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.home-balance {
 color: white;
 text-align: center;
 font-size: 1.5rem !important;
}
.home-amount {
 color: white;
 text-align: center;
 font-size: 2.1rem !important;
}

.home-top-card ion-button {
 margin: 10px 0 10px 0;
 font-weight: bold;
}

.icon-button {
 --background: #0a79c8;
 border: none;
 border-radius: 50%; /* Ensure perfect roundness */
 width: auto; /* Set a fixed width to make the button perfectly round */
 display: flex;
 align-items: center;
 justify-content: center;
}

.icon {
 font-size: 50px;
 padding: 3px;
}
.label {
 margin-top: 8px;
 font-size: 1rem;
 font-weight: bold;
 display: block;
 text-align: center;
 margin-right: 5px;
}

.complete {
 color: darkgreen;
 font-weight: 700;
}
.pending {
 color: darkorange;
 font-weight: 700;
}
.failed {
 color: darkred;
 font-weight: 700;
}

@media (prefers-color-scheme: dark) {
 .complete {
  color: rgb(102, 246, 102);
 }
 .pending {
  color: rgb(242, 173, 88);
  font-weight: 700;
 }
 .failed {
  color: rgb(255, 78, 78);
  font-weight: 700;
 }
}

.home-balance-card {
 background: linear-gradient(135deg, #0a0a0a, #1f1f1f);
 border-radius: 20px;
 box-shadow: 0 4px 15px rgba(10, 121, 200, 0.8);
 color: #fff;
 padding: 20px 10px;
 border: #0a79c8 1px solid;
}

.balance-title {
 font-size: 1rem;
 letter-spacing: 0.5px;
 color: #bdbdbd;
 margin-bottom: 6px;
}

.balance-section {
 margin: 10px 0 20px;
}

.balance-amount {
 margin: 2px 0;
 font-weight: 600;
}

.balance-amount.ngn {
 font-size: 1.4rem;
 color: #f1f1f1;
}

.balance-amount.usd {
 font-size: 1.1rem;
 color: #90caf9;
}

.fund-btn {
 --border-radius: 12px;
 font-weight: 600;
 letter-spacing: 0.5px;
}