* {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

body {
   background-color: #EFEFEF;
}

.icon {
   background-color: #fffce7;
   
   border-radius: 50%;
   padding: 12px;
   width: 50px;
   height: 50px;
  }

  .con {
   background-color: #ffe500;
   border-radius: 50%;
   width: 50px;
   height: 50px;
}




@keyframes shake {
   0% {
     transform: translateX(0);
   }
   20% {
     transform: translateX(-10px);
   }
   40% {
     transform: translateX(10px);
   }
   60% {
     transform: translateX(-10px);
   }
   80% {
     transform: translateX(10px);
   }
   100% {
     transform: translateX(0);
   }
 }
 
 #error-message {
   animation: shake 0.5s ease-in-out;
 }
 
 
 @keyframes bounce {
   0% {
     transform: translateY(0);
   }
   20% {
     transform: translateY(-20px);
   }
   40% {
     transform: translateY(0);
   }
   60% {
     transform: translateY(-10px);
   }
   80% {
     transform: translateY(0);
   }
   100% {
     transform: translateY(0);
   }
 }
 
 #success-message {
   animation: bounce 0.5s ease-in-out;
 }







#preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background-color: #fff;
}

#loader {
   display: block;
   position: relative;
   left: 50%;
   top: 50%;
   width: 150px;
   height: 150px;
   margin: -75px 0 0 -75px;
   border-radius: 50%;
   border: 3px solid transparent;
   z-index: 10000; /* Add this line to set the z-index of the loader to be higher than the overlay */
}

.loader-inner {
   display: inline-block;
   width: 100%;
   text-align: center;
}

.loader-inner div {
   width: 18px;
   height: 18px;
   border-radius: 100%;
   display: inline-block;
   animation: ball-pulse 1s ease-in-out infinite;
}

.loader-inner div:nth-child(1) {
   background-color: #3498db;
   animation-delay: -0.32s;
}

.loader-inner div:nth-child(2) {
   background-color: #2ecc71;
   animation-delay: -0.16s;
}

.loader-inner div:nth-child(3) {
   background-color: #f1c40f;
   animation-delay: 0s;
}

@keyframes ball-pulse {
   0%, 80%, 100% {
       transform: scale(0);
       opacity: 0;
   } 40% {
       transform: scale(1);
       opacity: 1;
   }
}

#overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.8);
   z-index: 9998; /* Add this line to set the z-index of the overlay to be lower than the loader */
}

a {
   text-decoration: none;
   color: #000000;
}



/* =================================================================
STYLE FOR THE PC VERSION
*/
@media screen and (min-width: 768px) {

.nav-item {
   width: 100%;
   margin-top: 120px;
   margin-bottom: 60px;
   margin-left: 60px;
   margin-right: 60px;
}

.pc-nav ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
}

.pc-nav ul li {
   margin-top: 20px;
   margin-bottom: 20px;
   width: 80%;
   transition: background-color 0.5s, color 0.5s;
}

.pc-nav ul li:hover {
   background-color: #dbdbdb;
   color: #000000;
   padding: 12px;
   border-radius: 12px;
}

.active {
   background-color: #000000;
   color: #ffe500;
   padding: 12px;
   border-radius: 12px;
}

.pc-nav ul li a:active {
   color: #ffe500;
   transition: color 0.5s;
}
.body-container {
   display: flex;
   width: 100%;
   margin-top: 30px;

}

header {
   width: 22%;
   height: 90vh;
   background-color: #ffffff;
   margin-left: 60px;
   margin-right: 60px;
   margin-bottom: 12px;
   border-radius: 12px;
   

}

.body-content-1 {
   display: flex;
   flex-direction: column;
   width: 45%;
   margin-right: 12px;
  

}

.container {
   display: flex;
   flex-direction: column;
   color: #000000;
   border-radius: 12px;

}

.container-color {
   background-color: #000000;
   color: #ffe500;
   padding: 12px;
   margin-top: 12px;
   border-radius: 12px;
   margin-bottom: 60px;
}




.top-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   
}

.profile {
   width: 40px;
   height: 40px;
   background-color: #ffff;
   border-radius: 50%;
   margin-right: 8px;
   margin-top: -12px;
}

.top-left {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.top-right {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 10%;
}

.features {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   margin-top: 12px;
}

.features a {
   text-decoration: none;
   color: #ffe500;
}

.feature .fi {
   color: #000000;
   text-align: center;
   font-size: 24px;
   padding-top: 10px;
}

.feature {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.paybills-container {
width: 98%;
margin: 0 auto;
margin-top: 0;

}

.paybills {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   background: #ffffff;
   border-radius: 12px;
   padding: 12px;
   width: 100%;
   padding-top: 24px;
}

.bill-lists-1, .bill-lists-2 {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-evenly;
   margin-bottom: 12px;
   margin-top: 12px;
}

.bill-item {
   display: flex;
   flex-direction: column;
   border: 1px solid #eeeeee;
   padding: 12px;
   border-radius: 12px;
   align-items: center;
   justify-content: space-between;
   transition: background-color 0.5s;
}

.bill-item .fi {
   font-size: 24px;
}
.bill-item p {
   margin-top: 12px;
}

.bill-item:hover {
   background-color: #ffe500;
   border: none;
   cursor: pointer;
}

.ads-container {
   width: 100%;
   
}

.ad-container {
   margin-left: 12px;
   margin-right: 12px;
   margin-top: 24px;
   margin-bottom: 24px;
   background-color: #000000;
   padding: 12px;
   border-radius: 12px;
   color: #ffffff;
}

.ad {
   display: flex;
   justify-content: space-around;
   align-items: center;
}
.ad .fi {
   color: #000000;
   margin-left: 12px;
   font-size: 24px;
}

.transactions-container {
   width: 26%;
   margin-left: 24px;
   margin-top: 24px;
   margin-right: 60px;
}

.transactions {
   background-color: #e7e7e7;
   padding: 12px;
   border-radius: 12px;
   
}

.transaction-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.transaction-title h4 {
   font-size: 24px;
}

.transaction-title a {
   color: #000000;
}

.transactions-list {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
}

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

.transaction-left .fi {
   font-size: 20px;
   text-align: center;
   padding-bottom: 12px;
}

.transaction-left {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.debit {
   color: rgba(209, 0, 0, 0.831);
  }

  .approved-container {
   background-color: #f5fff5;
   border-radius: 50%;
   padding: 12px;
   width: 40px;
   height: 40px;
  }
   
  .approved {
   color: #2ecc71;
  }


  .fai {
   color: rgba(158, 158, 158, 0.831);
  }

  .failed-container {
   background-color: #fcd8d8;
   
   border-radius: 50%;
   padding: 12px;
   width: 40px;
   height: 40px;
  }
   
  .failed {
   color:  #cc2e2e;
  }

  .transaction-type {
   margin-left: 12px;
  }

  /*----------------------------------------------------------------
  STYLE FOR THE WITHDRAWAL PAGE
  ----------------------------------------------------------------*/

  .nav-back {
   font-size: 12px;
   color: #000000;
   padding-left: 24px;
   display: flex;
   justify-content: space-between;
  }

  .nav-back .fi {
   
   margin-right: 12px;
   font-size: 12px;
  }

   main {
   width: 68%;
   margin-left: 32px;
   margin-right: 60px;

  }

  .withdrawal-container {
   width: 68%;
   margin-top: 12px;
  }

  .withdrawal-details {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
   background-color: #ffffff;
   padding: 24px;
   border-radius: 12px;
   width: 100%;
  }

  .withdrawal-form {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: spaace-between;
   width: 100%;
  }

  /*.withdrawal-form input {*/
  /* width: 100%;*/
  /* margin-top: 24px;*/
  /* margin-bottom: 12px;*/
  /* outline: none;*/
  /* border: none;*/
  /* border-bottom: 1px solid #eee;*/
  /*}*/

  .withdrawal-next {
   background-color: #ffe500;
   color: #000000;
   text-decoration: none;
   padding-left: 24px;
   padding-right: 24px;
   padding-top: 12px;
   padding-bottom: 12px;
   margin-top: 24px;
   width: 100%;
   font-weight: bold;
  }

  /*  style for the add funds page of the dashboard section
  */
  
  .add-main-container {
   width: 48%;
   margin-left: 24px;
   margin-right: 24px;
   margin-top: 60px;
  }

  .add-container {
   background-color: #ffffff;
   padding: 24px;
   border-radius: 12px;
  }

  .divider {
   border: 1px dashed #d0d0d0;
  }

  .bank-details {
   padding-left: 60px;
   margin-top: 12px;
   
  }

  .add-details {
   display: flex;
   align-items: center;
   padding-top: 12px;
   padding-bottom: 12px;
  }

  .add-details .fi {
   font-size: 24px;
  }

  .add-detail {
   margin-left: 24px;
  }

  .details-copy {
   margin-top: 24px;
  }
  .btn {
   padding-left: 24px;
   padding-right: 24px;
   border-radius: 12px;
   font-weight: 500;
   
  }

  .btn-copy {
   background-color: #fffce4;
   color: #ffe500;
   margin-right: 12px;
  }

  .btn-share {
   background-color: #ffe500;
   color: #000000;
  }

  .add-options-container {
   width: 100%;
   margin-top: 36px;
   margin-bottom: 24px;
  }

  .add-optons {
   padding-left: 12px;
   padding-right: 12px;
   display: flex;
   flex-direction: column;
  }

  .add-option-title-holder {
   display: flex;
   align-items: center;
   justify-content: center;
  }

  .line {
   border: 1px solid #cccccc;
   width: 50px;
   padding-top: -30px;
   margin-left: 12px;
   margin-right: 12px;
  }

  .add-card {
   margin-left: 12px;
   margin-right: 12px;
   background-color: #ffffff;
   display: flex;
   align-items: center;
   
   padding: 12px;
   border-radius: 12px;
  }

  .add-card .fi {
   font-size: 24px;
  }

  .add-card-title {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-around;
   margin-left: 24px;
  }

  .toaster {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   background-color: rgba(255, 255, 255, 0.8);
   border-radius: 5px;
   padding: 12px;
   box-sizing: border-box;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s, opacity 0.5s ease-in;
   }

   .toaster.visible {
         visibility: visible;
         opacity: 1;
   }
   
   .toaster p {
         margin: 0;
   }

   .copied-text {
      margin: 0;
      margin-top: 10px;
      font-size: 14px;
      color: #2ecc71;
      display: none;
  }

  .mobile-nav {
   display: none;
  }
 

  



}


/* =================================================================
STYLE FOR PC ENDS HERE 
*/


@media (max-width: 740px) {
   /* CSS STYLE FOR THE MOBILE PHONE DASHBOARD */

    .pc-nav {
      display: none;
    }
   
    .nav-container {
        width: 100%;
        height: 60px;
        position: fixed;
        bottom: 0;
        background: #ffffff;
        z-index: 100;
    }


    .container {
         background-color: #000000;
         width: 100%;
         
         color: #ffe500;
     }

     .top-container {
        display: flex;
        flex-direction: row;
        padding: 12px;
        justify-content: space-between;
        align-items: center;
        padding-top: 30px;

     }

     .mobile-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
     }

     .top-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 50%;
     }

     .top-left p {
        padding: 0;
        margin: 0;
     }

     .profile {
        width: 32px;
        height: 32px;
        background-color: #ffff;
        border-radius: 50%;
        margin-right: 8px;
     }

     .top-right {
        display: flex;
        justify-content: space-between;
        width: 20%;

     }

     .balance-container {
        margin-left: 12px;
        margin-right: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 12px;
     }

     .balance-head {
        margin: 0;
        padding: 0;
        font-size: 12px;
     }

     .balance-container h2 {
        font-weight: 500;
        font-size: 36px;
     }

     .topup-features {
        margin-left: 12px;
        margin-right: 12px;
        padding-top: 30px;
        margin-bottom: 20px;
     }

     .features a {
      color: #ffe500;
      text-decoration: none;
     }

     .feature .fi {
      padding-top: 10px;
      color: #000000;
     }

     .con {
         background-color: #ffe500;
         border-radius: 50%;
         width: 50px;
         height: 50px;
     }

     .feature p {
      font-size: 14px;
      padding-top: 6px;
     }

     .features {
        display: flex;
        align-items: center;
        justify-content: space-around;
     }

     .fi {
        text-align: center;
        font-size: 24px;
        padding-top: -12px;
     }

     .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
     }

     .features p {
        font-size: small;
     }

     .feature-img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        padding: 12px;
        background: #fff;
     }


     .paybills-container {
      width: 100%;
      margin-top: 24px;
      text-align: center;
     }

     .paybills {
      margin-left: 12px;
      margin-right: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 12px;
      background-color: #ffffff;
      border-radius: 12px;
     }


     .bill-lists-1, .bill-lists-2 {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
     }

     .bill-lists-1 {
      margin-bottom: 16px;
     }

     .bill-item {
      display: flex;
      flex-direction: column;
     }

     .bill-item .fi {
      padding-top: 10px;
      color: #ffe500;
     }

     .bill-item p {
      font-size: 14px;
      padding-top: 12px;
     }

     .icon {
      background-color: #fffce7;
      
      border-radius: 50%;
      padding: 12px;
      width: 50px;
      height: 50px;
     }

     .ads-container {
      width: 100% !important;
      margin-top: 24px;
     }

     .ad-container {
      margin-left: 12px;
      margin-right: 12px;
      padding: 12px;
      background: #000000;
      color: #f1c40f;
      border-radius: 12px;
     }

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

     .ad .fi {
      margin-right: 6px;
     }

     .transactions-container {
      width: 100%;
      margin-top: 24px;
      margin-bottom: 120px;
      display: none;
     }

     .transactions {
      margin-left: 12px;
      margin-right: 12px;
      display: none;

     }

     .transaction-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      display: none;
     }

     .transaction-title a {
      font-size: 14px;
      text-decoration:  none;
      color: #000000;
      display: none;
     }

     .transactions-list {
      display: flex;
      flex-direction: column;
      padding-top: 6px;
      display: none;
     }

     .transaction {
      display: flex;
      justify-content: space-between;
      align-items: center;
      display: none;
     }

     .transaction-left {
      display: flex;
      justify-content: space-between;
      display: none;
     }

     .transaction-type {
      display: flex;
      flex-direction:  column;
      align-items: flex-start;
      margin-left: 12px;
      display: none;
     }

     .transaction-type p {
      color: #5c5c5c;
      font-size: 14px;
      display: none;
     }

     .debit {
      color: rgba(209, 0, 0, 0.831);
     }

     .approved-container {
      background-color: #f5fff5;
      
      border-radius: 50%;
      padding: 12px;
      width: 50px;
      height: 50px;
     }
      
     .approved {
      color: #2ecc71;
     }


     .fai {
      color: rgba(158, 158, 158, 0.831);
     }

     .failed-container {
      background-color: #fcd8d8;
      
      border-radius: 50%;
      padding: 12px;
      width: 50px;
      height: 50px;
     }
      
     .failed {
      color:  #cc2e2e;
     }



     /* =================================================================
     CSS STYLE FOR THE DEPOSIT PAGE */
     .navbar-container {
      width: 100%;
      background-color: #ffffff;
      height: 120px;
     }

     .navbar {
      margin-left: 12px;
      margin-right: 12px;
      padding-top: 12px;
     }

     .navbar a {
      text-decoration: none;
      color: #000000;
     }

     .nav-back {
      display: flex;
      align-items: flex-start ;
      justify-content: center;
      font-size: small;
      margin-top: 60px;
     }

     .nav-back p {
      padding: 0;
      margin: 0;
     }

     .nav-back .fi {
      font-size: small;
      text-align: center;
      padding-top: 2px;
      margin-right: 6px;
     }

     .add-main-container {
      width: 100%;
      margin-top: 24px;
      padding-top: 12px;
      padding-bottom: 12px;
     }

     .add-container {
      margin-left: 12px;
      margin-right: 12px;
      background: #ffffff;
      padding: 12px;
      border-radius: 12px;
     }

     .bank-container {
      display: flex;
      flex-direction: column;
     }

     .divider {
      border: 1px dashed #9e9e9e;
     }

     .add-details {
      display: flex;
      align-items: center;
      margin-top: 12px;
      margin-bottom: 12px;

     }

     .add-details .icon, .add-card .icon {
      background: #efefef;
     }

     .add-detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      margin-left: 12px;
     }

     .add-detail p {
      padding: 0;
      margin: 0;
     }

     .add-detail h4 {
      padding: 0;
      margin: 0;
      margin-top: 12px;
      
     }

     .details-copy {
      display: flex;
      align-items: center;
     justify-content: space-evenly;
      margin-top: 12px;
      margin-bottom: 12px;
     }

     .btn {
      padding-left: 24px;
      padding-right: 24px;
      border-radius: 12px;
      font-weight: 500;
     }

     .btn-copy {
      background-color: #fffce4;
      color: #ffe500;
      margin-right: 12px;
     }

     .btn-share {
      background-color: #ffe500;
      color: #000000;
     }

     .add-options-container {
      width: 100%;
      margin-top: 24px;
      margin-bottom: 24px;
     }

     .add-optons {
      padding-left: 12px;
      padding-right: 12px;
      display: flex;
      flex-direction: column;
     }

     .add-option-title-holder {
      display: flex;
      align-items: center;
      justify-content: center;
     }

     .line {
      border: 1px solid #cccccc;
      width: 50px;
      padding-top: -30px;
      margin-left: 12px;
      margin-right: 12px;
     }

     .add-card {
      margin-left: 12px;
      margin-right: 12px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content:  space-between;
      padding: 12px;
      border-radius: 12px;
     }

     .add-card-title {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      margin-left: 12px;
     }

     .toaster {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 5px;
      padding: 12px;
      box-sizing: border-box;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s, opacity 0.5s ease-in;
      }
  
      .toaster.visible {
            visibility: visible;
            opacity: 1;
      }
      
      .toaster p {
            margin: 0;
      }

      .copied-text {
         margin: 0;
         margin-top: 10px;
         font-size: 14px;
         color: #2ecc71;
         display: none;
     }
    
   /*----------------------------------------------------------------
   STYLE FOR WITHDRAW PAGE MOBILE STARTS HERE */
    
   .withdrawal-container {
      width: 100%;
      margin-top: 24px;
      margin-bottom: 24px;
   }

   .withdrawal-details {
      padding: 12px;
      background: #ffffff;
      margin-left: 12px;
      margin-right: 12px;
      border-radius: 12px;
   }

   .withdrawal-title {
      font-weight: 500;
   }

   .withdrawal-form {
      margin-top: 12px;
      margin-bottom: 12px;
      
   }

   /*.withdrawal-form input {*/
   /*   width: 100%;*/
   /*   margin-top: 24px;*/
   /*   outline: none;*/
   /*   border: none;*/
   /*   border-bottom: 1px solid #eee;*/
   /*}*/

   .withdrawal-next {
      background-color: #ffe500;
      color: #000000;
      text-decoration: none;
      padding-left: 24px;
      padding-right: 24px;
      padding-top: 12px;
      padding-bottom: 12px;
      margin-top: 24px;
      width: 100%;
   }

  




 }