.hero {
  padding: 20px 60px 0px 60px; /* extra space for avatar */  
  position: relative;
  top: 0;
  z-index: 10;
}


.hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;  
}

.hero-avatar {
  position: absolute;

  left: 0px;
  top: 0px;   /* align with top padding */

  width: 130px;
  height: 130px;
  border-radius: 50%;

  object-fit: cover; 

  box-shadow:
    0 6px 18px rgba(0,0,0,0.35);
}

.hero-title h1 {
  margin-bottom: 6px;
}

.hero-title p {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 36px;
}


.hero-wrapper {
  margin-bottom: 5px;
}

/* dropdown */

.dropdown {
  position: relative;
}

.dropdown-menu {

  position: absolute;

  top: 60px;
  left: 50%;
  transform: translateX(-50%);

  width: 420px;

  background: #2f63a8;

  border: 2px solid rgba(255,255,255,0.85);

  border-radius: 20px;

  padding: 20px 28px;

  box-shadow:
    0 8px 0 rgba(0,0,0,0.25),
    0 16px 40px rgba(0,0,0,0.4);

  display: none;

  z-index: 1000;
}

.dropdown-menu.open {
  display: block;
}

.dropdown-menu ul {

  list-style: disc;

  columns: 2;
  column-gap: 40px;

  padding-left: 18px;

  color: white;

  font-size: 0.95rem;
  line-height: 1.6;
}

.dropdown-menu li {
  margin-bottom: 6px;
  font-size: 0.9rem;
  opacity: 0.9;
}