.profilePage {
  background-color: #ffffff;
  border: 1px solid #e7e9ec;
  border-radius: 10px;
  /* min-height: 100vh; */
}

/* Avatar */
.avatarWrapper {
  position: absolute;
  bottom: -60px;
  left: 60px;
}

.avatarImg {
  width: 120px;
  height: 120px;
  border: 4px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

/* User Header */
.userHeader {
  margin-top: 25px;
}

.userName {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d1b2a;
}

.userMeta {
  color: #6b7280;
  font-size: 0.95rem;
}

.connectBtn {
  background-color: #2563eb;
  border: none;
  font-weight: 500;
}

.connectBtn:hover {
  background-color: #1d4ed8;
}

.menuBtn {
  border: none;
  color: #374151;
}

.link {
  text-decoration: none;
}

/* Info Card */
.infoCard {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.infoTable td {
  padding: 0.6rem 1rem;
  vertical-align: middle;
  color: #374151;
  font-size: 14px;
}

.activeTab {
  border-bottom: 2px solid #00447c;
  color: #00447c !important;
  max-width: fit-content;
  padding-bottom: 10px;
}

.navTabs {
  gap: 40px;
}

.navTabs a {
  color: #6b6b6b;
  font-weight: 500;
}

.infoTable td:first-child {
  width: 250px;
  color: #555;
  font-weight: 600;
}

.actionButton {
  padding: 10px 25px;
  font-weight: 500;
  border-radius: 50px;
}
.editButton {
  padding: 10px 25px;
  font-weight: 500;
  border-radius: 50px;
  background-color: #f2f4f5;
  color: #1e2132;
}
.editButton:hover {
  background-color: #f2f4f5;
  color: #1e2132;
}

.activeDot {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #28a745; /* Green */
  border-radius: 50%;
  border: 3px solid white; /* White outline for clean look */
  top: 10px;
  right: 5px;
}

/* Cover Container */
.coverPhoto {
  position: relative;
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  transition: background-color 0.3s ease, filter 0.3s ease;
}

/* Light Hover Effect on Cover */
.coverPhoto:hover {
  filter: brightness(0.92);
}

/* Camera Icon on Cover */
.coverCamera {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ffffff;
  border: 1px solid #e7e9ec;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Hidden by default */
}

.coverPhoto:hover .coverCamera {
  opacity: 1;
}

/* Avatar Wrapper */
.avatarWrapper {
  position: absolute;
  bottom: -60px;
  left: 40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Avatar Image */
.avatarImg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Active Dot */
.activeDot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  background-color: #2ecc71;
  border: 2px solid #fff;
  border-radius: 50%;
}

/* Avatar Camera */
.avatarCamera {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ffffff;
  border: 1px solid #e7e9ec;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Hidden by default */
}

.avatarWrapper:hover .avatarCamera {
  opacity: 1;
}

/* Photo Css............ */

.galleryContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

.galleryImage {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.galleryImage:hover {
  transform: scale(1.05);
}