/* Responsive adjustments */
@media (max-width: 850px) {
  .form-container {
      padding: 15px;
  }
  .form-input {
      font-size: 14px;
      padding: 8px;
  }
  .form-button {
      font-size: 16px;
  }
}

 @media (max-width: 600px) {
   .fund_wallet {
    width: 100%;
    margin-bottom: 20px;

  }
}

/* For small phones */
 @media (max-width: 480px) {
  .greeting{
    font-size: 0.9em;
  }

  .wallet{
    font-size: 0.9em;
  }

   .balance{
    font-size: 0.9rem;
  }

   .fund_wallet{
    padding: 5px 7px;
  }

  .fund_wallet span{
   font-size: 0.9rem;
  }
}

@media (max-width: 768px){
  .navbar-nav{
    display: none;
  }

  .nav-button{
    display: none;
  }
}

 /* Transaction statistics media */

 @media (max-width: 890px){
  .stat-box{
    flex-direction: column;
  }

  .stat{
    margin: 10px;
    
  }
 }



 /* Dashboard responsiveness */
 /* Hide sidebar by default on small screens */
 @media (max-width: 768px) {
   .sidebar_container {
     transform: translateX(-100%);
     /* display: none; */
     position: fixed;
     top: 68px;
     left: 0;
     width: 250px;
     height: 100vh;
     transition: transform 0.5s ease-in-out;
   }

   .sidebar_container.active {
     transform: translateX(0);
   }

   .menu_toggle {
     display: block;
     color: white;
     font-size: 24px;
     cursor: pointer;
   }

   .logout_container {
     display: none;
   }

   .modal_content {
     width: 60vw;
   }
 }

 /* Responsive */
 @media (max-width: 500px) {
   .data_form {
     flex-direction: column;
   }

   .code_balance_field {
     margin-top: 20px;
   }
 }
 
 /* On big screens, show sidebar always */
 @media (min-width: 769px) {
   .menu_toggle {
     display: none;
   }
 }

 @media (max-width: 500px) {
   .modal_content {
     width: 80vw;
   }
 }

 /* Service box media */

 @media (max-width: 500px) {

    .main-content {
     padding: 0; 
   }

   
    .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 5px;
    font-size: 0.7rem;
  }

  .service-box a{
   font-size: 0.9rem;
  }

  .service-box i {
    font-size: 0.8rem;
  }

  .service-box span{
  font-size: 0.8rem;
 }
 }
 
 /* Transaction page styling */
  /*@media(max-width: 768px) {*/
  /*  .table_container th,*/
  /*  .table_container td {*/
  /*    padding: 10px;*/
  /*    font-size: 14px;*/
  /*  }*/
  /*}*/

  /*@media(max-width: 500px) {*/
  /*  .table_container th,*/
  /*  .table_container td {*/
  /*    padding: 8px;*/
  /*    font-size: 12px;*/
  /*  }*/
  /*}*/
  
  /* Main content media */
  @media(max-width: 768px) {
    .main_content {
      padding : 20px;
    }

    .title {
      margin: 0;
    }
  }