.main-container {
  display: flex;
  width: calc(2426 * var(--rpx));
  height: calc(1655 * var(--rpx));
  border: calc(20 * var(--rpx)) solid rgba(0, 0, 0, 0.4);
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

/* Sidebar Styles */
.sidebar {
  display: flex;
  flex-direction: column;
  width: calc(284 * var(--rpx));
  height: calc(995 * var(--rpx));
  padding: calc(26 * var(--rpx)) calc(20 * var(--rpx));
  background-color: #fdfdfe;
  box-sizing: border-box;
  align-items: flex-start;
}

.sidebar-logo {
  display: flex;
  width: calc(118 * var(--rpx));
  height: calc(30 * var(--rpx));
  margin-bottom: calc(40 * var(--rpx));
}

.logo-image {
  width: calc(98 * var(--rpx));
  height: calc(16 * var(--rpx));
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: calc(9.5 * var(--rpx));
  background-position: center;
}

/* Navigation Styles */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
  width: 100%;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: calc(10 * var(--rpx));
  cursor: pointer;
}

.nav-item.selected {
  background-color: #ebedf4;
  border-radius: calc(10 * var(--rpx));
}

.nav-icon {
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: calc(10 * var(--rpx));
  background-position: center;
}

.nav-text {
  font-family: "General Sans", var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 500;
  color: #221e1e;
}

.nav-button {
  font-family: "General Sans", var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 500;
  color: #5c667f;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Content Section */
.content {
  display: flex;
  flex-direction: column;
  padding: calc(20 * var(--rpx));
  gap: calc(20 * var(--rpx));
}

.profile-header {
  display: flex;
  align-items: center;
  background-color: #01614d;
  padding: calc(30 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
}

.profile-picture {
  width: calc(114 * var(--rpx));
  height: calc(114 * var(--rpx));
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  margin-right: calc(12 * var(--rpx));
}

.profile-name {
  font-family: "General Sans", var(--default-font-family);
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  color: #fdfdfe;
}

/* Profile Information */
.profile-info {
  display: flex;
  gap: calc(20 * var(--rpx));
}

.profile-card, .skills-card {
  background-color: #fdfdfe;
  border-radius: calc(10 * var(--rpx));
  padding: calc(20 * var(--rpx));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
}

.card-title {
  font-family: "General Sans", var(--default-font-family);
  font-size: calc(18 * var(--rpx));
  font-weight: 600;
  color: #221e1e;
}

.card-content .info-item {
  display: flex;
  justify-content: space-between;
}

.info-title {
  font-family: "General Sans", var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 500;
  color: #221e1e;
}

.info-value {
  font-family: "General Sans", var(--default-font-family);
  font-size: calc(16 * var(--rpx));
  font-weight: 600;
  color: #221e1e;
}

/* Skills Section */
.skill-tags {
  display: flex;
  gap: calc(6 * var(--rpx));
  flex-wrap: wrap;
}

.tag {
  padding: calc(6 * var(--rpx)) calc(10 * var(--rpx));
  background-color: #e4edf2;
  border-radius: calc(4 * var(--rpx));
  font-family: "General Sans", var(--default-font-family);
  font-size: calc(14 * var(--rpx));
  font-weight: 500;
  color: #016187;
}