* {box-sizing:border-box}

/* Reset default margins */
body {
  margin: 0;
  font-size: 18px;
  padding-top: 60px; /* Same size as nav bar */
  /*padding-bottom: 100px; /* Same size as footer */
  background-color: #444444;
  /* background-color: #003d2b; */
  /*height: 100%; /* Ensures html and body take full viewport height */
  font-family: Arial, sans-serif;
  color: white;

  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

.header-container {
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center if container has height */
  height: 80px;           /* Example container height */
}

/* Navigation container */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
  color: white;
  padding: 10px 0;
  /*position: fixed; /* Positions the footer relative to the viewport */
  bottom: 0; /* Aligns the footer to the bottom of the viewport */
  width: 100%; /* Ensures the footer spans the full width */
  height: 100px;
  margin-top: auto;
  /*&box-shadow: -20px -20px -20px -20px rgba(0,0,0,0.2); /* Optional: shadow */
}

/* Navigation container */
nav {
  display: flex;
  justify-content: space-between; /* Push logo left and links right */
  align-items: center; /* Vertically center content */
  background-color: #222;
  position: fixed; /* Positions the nav bar relative to the viewport */
  top: 0; /* Aligns the nav bar to the top of the viewport */
  left: 0;
  padding: 10px 20px;
  height: 60px; /* Fixed nav height */
  width: 100%; /* Ensures the nav bar spans the full width */
  overflow: visible; /* Allow content to overflow without stretching nav */
  z-index: 1000;              /* Ensures it sits above other elements */
}

/* Navigation links */
.nav-links {
  display: flex;
  gap: 20px; /* Space between links */
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  padding: 10px;
}

/* Navigation links */
nav a {
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 18px;
  position: relative;
}

/* Add underline only for active link */
.nav-links  a.active::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: #ffffff; /* Active underline color */
  margin: 0 auto;
}

/* Hover effect: temporarily show underline for others */
.nav-links a:hover::after {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: #00d9ff; /* Hover underline color */
}

.logo-link {
  display: inline-block;
}

/* Logo styles */
.logo {
  height: 50px; /* Adjust size */
  width: auto;
  position: center;
  cursor: pointer; /* Show pointer on hover */
  transition: transform 0.1s ease; /* Optional hover effect */
}

.logo:hover {
  transform: scale(1.1); /* Slight zoom on hover */
}

.grid-layout {
  display: grid;
  /* grid-template-columns: auto auto auto; */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Keep Columns Equal */
  background-color: #303030;
  color: white;              /* Text color */
  padding: 15px;             /* Space inside the box */
  margin: 5px 10%;              /* Space outside the box */
  text-align: center;        /* Center the text */
  border-radius: 8px;        /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional: shadow */
}

.grid-layout div {
  padding: 5px;
  margin: 10px;
  font-size: 24px;
  /* background-color: red; */
  border: 2px solid white;
  border-radius: 8px;        /* Rounded corners */
  text-align: center;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.social-link {
  color: white;
  margin: 0 10px;
  line-height: 1; /* prevents extra vertical spacing */
  font-size: 24px; /* increase icon size */
  color: white; /* style as needed */
  vertical-align: middle; /* keeps them centered */
}

.body-text {
  margin: 100px;
}

.colored-box {
  --box-bg: #303030;
  background-color: var(--box-bg);
  color: white;              /* Text color */
  padding: 15px;             /* Space inside the box */
  margin: 5px 10%;              /* Space outside the box */
  text-align: center;        /* Center the text */
  border-radius: 8px;        /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional: shadow */
}

.bg-green-1   { --box-bg: #d6e7e3; }
.bg-green-2   { --box-bg: #cde2de; }
.bg-green-3   { --box-bg: #bcd7d4; }
.bg-green-4   { --box-bg: #9bc2bd; }
.bg-green-5   { --box-bg: #86b2ad; } /* new midpoint between 4 & 5 */
.bg-green-6   { --box-bg: #72a49f; }
.bg-green-7   { --box-bg: #4d8681; }
.bg-green-8   { --box-bg: #10605a; }
.bg-green-9   { --box-bg: #0d4a47; } /* new darker shade */
.bg-green-10  { --box-bg: #0a3936; }