/* Global font and reset */
body {
  font-family: Verdana, sans-serif;
  margin: 0;
  color: #000;
  line-height: 1.5;
}

/* Logo */
.logo-container {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  background-color: white;
  z-index: 2;
  padding: 8px 0; /* 1 × 8px */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo-container img {
  max-width: 300px;
  height: 56px; /* 7 × 8px */
}

/* Navbar */
.top-bar {
  position: fixed;
  top: 72px; /* 9 × 8px */
  width: 100%;
  z-index: 1;
}

.navbar {
  display: flex;
  background-color: #009688;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  justify-content: center;
}

.navbar a {
  padding: 12px 16px; /* 1.5 × 8px vertical, 2 × 8px horizontal */
  color: white;
  text-decoration: none;
  display: block;
}

.navbar a:hover {
  background-color: #00796B;
}

/* Content */
.content {
  max-width: 1000px;
  margin: 112px auto 0 auto; /* 14 × 8px */
}

.mySlides {
  margin-top: 40px; /* 5 × 8px */
}

.center { text-align: center; }

.display-container {
  position: relative;
  text-align: center;
}

.display-bottommiddle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;              
  background-color: #009688; 
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0; /* 1 × 8px */
  box-sizing: border-box;
}

.text-white { color: white; }

/* Spacing utilities (multiples of 8px) */
.pad-8   { padding: 8px; }
.pad-16  { padding: 16px; }
.pad-24  { padding: 24px; }
.pad-32  { padding: 32px; }
.pad-40  { padding: 40px; }
.pad-48  { padding: 48px; }
.pad-64  { padding: 64px; }

.spacing-8   { margin: 8px; }
.spacing-16  { margin: 16px; }
.spacing-24  { margin: 24px; }
.spacing-32  { margin: 32px; }
.spacing-40  { margin: 40px; }
.spacing-48  { margin: 48px; }
.spacing-64  { margin: 64px; }

/* Background helpers */
.teal-bg {
  background-color: #009688;
  color: white;
}

.light-grey-bg { background-color: #f1f1f1; }
.justify { text-align: justify; }
.opacity { opacity: 0.6; }

/* Grid layout */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px; /* 2 × 8px */
}

.grid-box {
  flex: 1 1 300px;
  min-width: 250px;
  padding: 16px; /* 2 × 8px */
  box-sizing: border-box;
  margin: 8px; /* 1 × 8px */
}

/* Footer */
.footer {
  padding: 32px; /* 4 × 8px */
  text-align: center;
  opacity: 0.6;
  background-color: #f1f1f1;
  font-size: 16px;
}

.footer i {
  margin: 0 8px;
  cursor: pointer;
}

.footer i:hover { opacity: 1; }

.footer .legal-links {
  margin-top: 16px; /* 2 × 8px */
  font-size: 14px;
}

.footer .legal-links a {
  color: #000;
  text-decoration: none;
  margin: 0 8px;
}

.footer .legal-links a:hover {
  text-decoration: underline;
}