/* Color Variables */
:root {
  /* Light Theme Colors */
  --color-primary: #0a7808;
  --color-secondary: #6a994e;
  --color-accent: #a7c957;
  --color-background: #eceaea;
  --color-text: #000000;
  --color-logo: #0a7808;
  --color-navbar: #ffffff;
  --color-glass-bg: rgba(167, 201, 87, 0.25);
  --color-glass-border: rgba(167, 201, 87, 0.3);

  /* Dark Theme Colors */
  --color-primary-dark: #6ca55f;
  --color-secondary-dark: #85b379;
  --color-background-dark: #151313;
  --color-text-dark: #ffffff;
  --color-logo-dark: #85b379;
  --color-navbar-dark: #2a2828;
  --color-glass-bg-dark: rgba(157, 194, 147, 0.25);
  --color-glass-border-dark: rgba(157, 194, 147, 0.3);
}

/* Base Styles */
body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
  scroll-behavior: smooth;
}

/* Navbar Styles */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-navbar);
  padding: 10px 30px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  height: 70px; /* Increased height by 10px */
  position: relative; /* Added for absolute positioning of menu-toggle */
}

.navbar .logo {
  display: flex;
  align-items: center;
}

.navbar .logo img {
  height: 50px; /* Adjusted for better visibility */
}

.navbar .nav-links {
  display: flex;
  align-items: center;
  padding-right: 60px; /* Added padding to the right */
}

.navbar .nav-links a {
  margin-left: 20px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.navbar .nav-links a .material-symbols-outlined {
  margin-right: 5px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Hide menu toggle button by default */
.navbar .menu-toggle {
  display: none;
  cursor: pointer;
}

.navbar .menu-toggle .material-symbols-outlined {
  font-size: 36px;
}

@media (max-width: 768px) {
  .navbar .nav-links {
    display: none;
  }

  .navbar .menu-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: 80px; /* Positioned 80px from the right */
    transform: translateY(-50%);
  }

  .navbar .nav-links.mobile-active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px; /* Adjusted for navbar height */
    right: 70px;
    background-color: var(--color-navbar);
    padding: 10px;
    border-radius: 8px;
  }

  body.dark-theme .navbar .nav-links.mobile-active {
    background-color: var(--color-navbar-dark);
  }

  .navbar .nav-links.mobile-active a {
    margin: 10px 0;
  }
}

/* Glassmorphism Hero Section */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height: calc(100vh - 70px);  Adjusted for navbar height */
  min-height: 200px; /* Adjusted for navbar height */
  height: 90vh;
  padding-top: 20px; /* To account for fixed navbar */
  background-size: cover;
  background-position: center;
}

.glass {
  background: var(--color-glass-bg);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.1px);
  -webkit-backdrop-filter: blur(5.1px);
  border: 1px solid var(--color-glass-border);
  padding: 40px;
  text-align: center;
  width: 80%;
  max-width: 1850px;
  height: 80%;
  max-height: 950px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.glass .logo {
  margin-bottom: 40px;
}

.glass .logo img {
  max-width: 1400px;
  width: 80%;
  height: auto;
}

.glass h1 {
  font-size: 64px;
  margin: 0;
}

/* Sections */
section {
  padding: 80px 20px;
  text-align: center;
}

section h2 {
  font-size: 48px;
  margin-bottom: 20px;
}

section p {
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
  font-size: 18px;
}

section img {
  max-width: 100%;
  height: auto;
}

.placeholder-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}

/* Table Styles */
.label-table {
  margin: 0 auto;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.label-table th,
.label-table td {
  border: 1px solid #ddd;
  padding: 12px;
  font-size: 18px;
}

.label-table th {
  background-color: var(--color-accent);
  color: #000;
}

.label-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

body.dark-theme .label-table tr:nth-child(even) {
  background-color: #333333; /* Dark gray background for better readability */
}

/* Floating Button */
.floating-button {
  position: fixed;
  bottom: 30px;
  right: 70px;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.floating-button:hover {
  background-color: var(--color-secondary);
}

.floating-button .material-symbols-outlined {
  color: #fff; /* Icon color set to white */
}

/* Footer */
footer {
  background-color: var(--color-navbar);
  padding: 20px;
  text-align: center;
  color: var(--color-text);
  height: 150px; /* Increased footer height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

footer .footer-links {
  margin-bottom: 10px;
}

footer .footer-links a {
  margin: 0 10px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
}

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

/* Responsive Styles */
@media (max-width: 768px) {
  .glass {
    width: 90%;
    height: auto;
    padding: 20px;
  }

  .glass .logo img {
    width: 80%;
  }

  .glass h1 {
    font-size: 48px;
  }

  section h2 {
    font-size: 36px;
  }

  section p {
    font-size: 16px;
  }

  .label-table th,
  .label-table td {
    font-size: 16px;
  }
}

/* Dark Theme Styles */
body.dark-theme {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

body.dark-theme .navbar {
  background-color: var(--color-navbar-dark);
}

body.dark-theme .navbar .nav-links a {
  color: var(--color-text-dark);
}

body.dark-theme .glass {
  background: var(--color-glass-bg-dark);
  border: 1px solid var(--color-glass-border-dark);
}

body.dark-theme .floating-button {
  background-color: var(--color-primary-dark);
}

body.dark-theme .floating-button .material-symbols-outlined {
  color: #fff;
}

body.dark-theme .floating-button:hover {
  background-color: var(--color-secondary-dark);
}

body.dark-theme footer {
  background-color: var(--color-navbar-dark);
  color: var(--color-text-dark);
}

body.dark-theme footer .footer-links a {
  color: var(--color-text-dark);
}

body.dark-theme .label-table th {
  background-color: var(--color-secondary-dark);
  color: #fff;
}

/* Icon Colors */
.material-symbols-outlined {
  color: var(--color-primary);
}

body.dark-theme .material-symbols-outlined {
  color: var(--color-primary-dark);
}