/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Header and navigation */
header {
  background: linear-gradient(90deg, #173521, #2d5a3a);
  color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 1rem;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.06rem;
  font-weight: 600;
}

/* Modern, clean logo design */
.logo {
  font-size: 1.545rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 63px;
  transition: all 0.3s ease;
  letter-spacing: 1px;
}

/* Main logo element - abstract representation of connection */
.logo::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50% 50% 50% 0;
  transition: all 0.4s ease;
}

/* Inner element - represents the "collective" aspect */
.logo::after {
  content: '';
  position: absolute;
  left: 29px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background: #4CAF50;
  border-radius: 50% 0 50% 50%;
  transition: all 0.4s ease;
}

/* Remove unnecessary elements */
.logo .node-connections,
.logo .circuit {
  display: none;
}

/* Hover effects */
.logo:hover::before {
  transform: translateY(-50%) rotate(45deg);
  border-color: #fff;
}

.logo:hover::after {
  transform: translateY(-50%) rotate(-45deg);
  background: #66BB6A;
}

/* Subtle entrance animation */
@keyframes logoEntrance {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.logo {
  animation: logoEntrance 0.6s ease-out forwards;
}

/* Main content */
main {
  padding: 2rem;
  min-height: calc(90vh - 200px); /* Adjust based on header/footer height */
  display: flex;
  flex-direction: column;
}

/* Services Grid Layout */
.services-container {
  padding: 2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card h3 {
  color: #1B5E20;
  margin-bottom: 1rem;
}

.service-card p {
  color: #333;
  line-height: 1.6;
}

/* Footer */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
}

/* Responsive styles */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
  }
}