/* 
                _  __    .  ___   ___  __     __
                | |/ /   .  |   \ | __| \ \   / /
                | ' <    .  | |) || _|   \ \_/ / 
                |_|\_\   .  |___/ |___|   \___/  K . D E V */
           
.profile-box {
  
  font-family: sans-serif;
    margin-top: 2vh;
    flex: 1;
    justify-content: flex-start;
    margin-left: 10px;
    background-color: #11111133;
    padding: 2vh 3vh;
    text-align: left;
    border: 0.1vh solid #ffd0006e;
    color: #f3f3f3;
  }

  .profile-box h3 {
    font-size: 2.5vh;
    color: #fff;
    margin-bottom: 10px;
    text-align: left; 
  }
  
  
  .profile-box p {
    font-size: 2vh;
    color: #b8b8b8;
    margin: 5px 0;
  }


  .tab-header {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }

  .tab-button {
    flex: 1;
    padding: 1vh;
    
    background-color: #2d2d4400;
    color: #fff;
    border: none;
    /* border-radius: 8px; */
    cursor: pointer;
    font-weight: bold;
    /* border-bottom: 0.1vh solid #ffd0006e; */
    transition: background-color 0.3s;
  }

  .tab-button.active {
    border-bottom: 0.5vh solid #f3f3f3bb;
  }

  .tab-pane {
    display: none;
  }

  .tab-pane.active {
    display: block;
  }

  .info-box {
    color: #d4d4d4;
    background-color: #ffd0001f;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
  }

  .info-box:hover {
    transform: translateY(-2px);
  }

  .info-box div {
    margin-bottom: 5px;
  }