.profile-page {
          position: fixed;
          z-index: 99;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          height: 100vh;
          display: none;
          transition: 2s;
          background-color: rgba(0, 0, 0, 0.601);
}

.profile-page.active {
          display: block;
}

.profile-page .side-container {
          background-color: var(--white-color);
          width: 90%;
          max-width: 468px;
          height: 100%;
          transform: translateX(-100%);
          padding: 34px 15px 12px;
}

.profile-page .side-container.active {
          transform: translateX(0);
          animation: slideLeft 0.3s linear;
}

@keyframes slideLeft {
          0% {
                    transform: translateX(-100%);
          } 100% {
                    transform: translateX(0);
          }
}

.profile-page .side-container button {
          font-size: 28px;
          float: right;
}

.profile-page .side-container .header .col-md-3 {
          text-align: center;
}

.profile-page .side-container .header .col-md-3 span {
          width: 75px;
          height: 75px;
          border-radius: 50%;
          padding: 15px;
          color: var(--white-color);
          background-color: var(--primary-color);
}

.profile-page .side-container .header .col-md-9 {
          font-family: MuseoSans;
          color: var(--primary-color);
}

.profile-page .side-container .header .col-md-9 h4 {
          font-weight: 500;
          font-size: 16px;
}

.profile-page .side-container .header .col-md-9 h4 span {
          font-weight: 700;
}

.profile-page .side-container .header .col-md-9 p {
          align-items: center;
          font-weight: 300;
          font-size: 14px;
          display: flex;
          width: 100%;
          max-width: 236px;
          margin-top: 4px;
          justify-content: space-around;
}

.profile-page .side-container .side-menu-list .lists {
          font-family: MuseoSans;
          font-weight: 500;
          font-size: 16px;
          color: var(--dark-color);
}

.profile-page .side-container .side-menu-list .lists .list {
          margin-bottom: 6px;
          border-radius: 5px;
          width: 100%;
          padding: 10px;
          cursor: pointer;
          transition: 0.3s ease;
}

.profile-page .side-container .side-menu-list .lists .list:hover {
          background-color: var(--light-bgcolor);
}

.profile-page .side-container .side-menu-list .lists span:first-child {
          color: var(--light-color);
          margin-right: 15px;
}