.cover-container {
  position: relative; 
  background-image: url('assets/cover.png');
  background-size: cover;
  background-position: center top; /*originally: center center */
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}

.neon-x {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Match background-size: cover */
  object-position: center top; /* Match background-position, originally: center center */
  opacity: 1;
  transition: opacity 0.1s ease-in-out; /* Smooth transition for flicker effect */
  z-index: 10; /* Ensure it's above the background */
}

.social-tabs {
  width: 100%; 
  position: fixed; /* Fixed to viewport instead of container */
  bottom: 0px; /* Space from bottom */
  left: 0; /* Ensure full left alignment for width to span */
  display: flex; /* Horizontal layout */
  gap: 0px; /* No gaps between tabs */
  z-index: 20; /* Higher than default 0 and the overlay; adjust if other elements conflict */
}

.tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; /* Grow equally to fill full width */
  height: 50px; /* Matches demo's slim profile */
  border-radius: 0px; /* 8 for Soft corners like demo, not fully round */
  color: #3D7C7A; /* Teal icons */
  font-size: 24px; /* Icon size */
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for definition */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Light shadow */
  transition: transform 0.3s, box-shadow 0.3s; /* Hover animation */
}

.tab:hover {
  transform: translateY(-2px); /* Lift effect like demo buttons */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Enhanced shadow */
  color: #D32F2F
}


.mail-tab {
  background-color: rgba(51, 42, 42, 0.8); /* #332a2a with 80% opacity */
}

.x-tab {
  background-color: rgba(40, 31, 31, 0.8); /* #281f1f with 80% opacity */
}

.linkedin-tab {
  background-color: rgba(30, 20, 20, 0.8); /* #1e1414 with 80% opacity */
}