/* Header layout */
.header {
    background-color: #000000;
    color:#FFC904;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* left img | text | right img */
    gap: 12px;
  }
  
  /* Keep your existing font sizes if you like */
  .header h1 { font-size: 40px; margin: 0; }
  .header p  { font-size: 20px; margin: 4px 0 0; }
  
  /* Make the center text shrink/grow nicely */
  .header-text {
    flex: 1 1 auto;          /* lets text wrap on smaller screens */
    text-align: center;      /* stays centered between images */
    min-width: 0;            /* prevents overflow with long titles */
  }
  
  /* Image sizing/anchoring */
  .header-img {
    flex: 0 0 auto;          /* don't let images stretch */
    max-height: 192px;        /* tweak to your taste */
    width: auto;             /* keep aspect ratio */
    object-fit: contain;
  }
  
  /* Responsive tweaks */
  @media (max-width: 700px) {
    /* Hide the right image on mobile */
    .header-img.right { display: none; }
  
    /* Slightly reduce padding and text size if desired */
    .header { padding: 12px 16px; }
    .header h1 { font-size: 28px; }
    .header p  { font-size: 16px; }
  }
  
  /* Style the top navigation bar */
.navbar {
    overflow: visible; /* Hide overflow */
    background-color: #000000; /* Dark background color */
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left; /* Make sure that the links stay side-by-side */
    display: block; /* Change the display to block, for responsive reasons (see below) */
    color: #FFC904; /* White text color */
    text-align: center; /* Center the text */
    padding: 14px 20px; /* Add some padding */
    text-decoration: none; /* Remove underline */
  }
  
  /* Right-aligned link */
  .navbar a.right {
    float: right; /* Float a link to the right */
  }
  
  /* Change color on hover/mouse-over */
  .navbar a:hover {
    background-color: #ddd; /* Grey background color */
    color: black; /* Black text color */
  }

  /* --- Navbar dropdown (CSS-only) --- */
.navbar .dropdown {
    position: relative;
    float: left;                 /* line up with your floated links */
  }
  
  /* Make <summary> look like your .navbar a */
  .navbar .dropdown > summary {
    list-style: none;            /* remove default marker */
    display: block;
    padding: 14px 20px;
    text-decoration: none;
    color: #FFC904;              /* same as .navbar a */
    cursor: pointer;
    user-select: none;
  }
  .navbar .dropdown > summary::-webkit-details-marker { display: none; }
  
  /* Caret */
  .navbar .dropdown > summary::after {
    content: " ▾";
    font-size: 0.9em;
  }
  
  /* Hover style matches your .navbar a:hover */
  .navbar .dropdown > summary:hover,
  .navbar .dropdown[open] > summary {
    background-color: #ddd;
    color: #000;
  }
  
  /* Dropdown panel */
  .navbar .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #000;            /* black panel */
    border: 1px solid #333;
    z-index: 1000;
    display: flex;
    flex-direction: column;
  }
  
  /* Links inside the dropdown */
  .navbar .dropdown-menu a {
    float: none;                 /* override navbar floats */
    display: block;
    padding: 10px 14px;
    color: #FFC904;
    text-decoration: none;
    white-space: nowrap;
  }
  .navbar .dropdown-menu a:hover {
    background: #222;
    color: #FFC904;
  }
  
  /* Mobile: stack full-width with the rest of the links */
  @media screen and (max-width: 400px) {
    .navbar .dropdown,
    .navbar .dropdown > summary,
    .navbar .dropdown-menu a {
      width: 100%;
    }
    .navbar .dropdown-menu {
      position: static;          /* let it flow in the stacked layout */
      border-left: none;
      border-right: none;
    }
  }
  
  

  /* Ensure proper sizing */
* {
    box-sizing: border-box;
  }
  
  /* Column container */
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    flex: 20%; /* Set the width of the sidebar */
    background-color: #f1f1f1; /* Grey background color */
    padding: 20px; /* Some padding */
  }
  
  /* Main column */
  .main {
    flex: 80%; /* Set the width of the main content */
    background-color: white; /* White background color */
    padding: 20px; /* Some padding */
  }
  
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row {
      flex-direction: column;
    }
  }
  
  /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
  @media screen and (max-width: 400px) {
    .navbar a {
      float: none;
      width: 100%;
    }
  }

  /* 1) Make the page a vertical flex layout */
html, body {
    height: 100%;
    margin: 0;              /* remove default body margin */
  }
  
  body {
    min-height: 100vh;      /* ensure full viewport height */
    display: flex;
    flex-direction: column; /* stack header, navbar, content, footer */
  }
  
  /* 2) Let the main content area grow to push the footer down */
  .row {
    flex: 1;                /* fills remaining space above the footer */
  }
  

  .footer {
    padding: 5px; /* Some padding */
    text-align: center; /* Center text*/
    color:#FFC904;
    font-size:8pt;
    background: #000000; /* Grey background */
  }

  
  /*
  Enables Link Hovering Behavior for Navigation Sidebar
  */
 
  /* Hide the radios */
input[name="tab"] { position: absolute; left: -9999px; }

/* Sidebar look & hover (full-width highlight) */
.side-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.side-item {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #000;
  background: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}
.side-item:hover { background: #ddd; }

/* Panels hidden by default */
.panel { display: none; }

/* Show the right panel when a radio is checked */
#tab-goal:checked  ~ .main #panel-goal  { display: block; }
#tab-team:checked  ~ .main #panel-team  { display: block; }
#tab-review:checked~ .main #panel-review{ display: block; }
#tab-files:checked~ .main #panel-files{ display: block; }

/* Style the active sidebar item to match your navbar theme */
#tab-goal:checked  ~ .side .side-item[for="tab-goal"],
#tab-team:checked  ~ .side .side-item[for="tab-team"],
#tab-review:checked~ .side .side-item[for="tab-review"],
#tab-files:checked~ .side .side-item[for="tab-files"] {
  background: #000;
  color: #FFC904;
}

/* ------------------------------------------ */
/* NEW: Team Card Styles */
/* ------------------------------------------ */

.team-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center; /* Centers cards if they don't fill the row */
  margin-top: 20px;
}

.team-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  width: 160px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.team-card:hover {
  transform: translateY(-5px); /* Slight lift effect on hover */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.team-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* Circular image */
  object-fit: cover;
  background-color: #ccc; /* Grey placeholder background */
  margin: 0 auto 10px auto;
  display: block;
}

.team-name {
  font-weight: bold;
  font-size: 1rem;
  margin: 5px 0;
  color: #333;
}

.team-role {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 12px;
}

.linkedin-btn {
  display: inline-block;
  padding: 6px 12px;
  background-color: #0077b5; /* Standard LinkedIn Blue */
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
  border-radius: 4px;
}

.linkedin-btn:hover {
  background-color: #005582;
}