@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Reset styles */
body, h1, h2, h3, p, a {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
}

body {
  background: #f8f9fa;
  color: #222;
  line-height: 1.6;
}

/* ================= HEADER ================= */
header {
  background: #006837;
  color: #fff;
  padding: 30px 0 20px;
  text-align: right;
}

.header-flex{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding-left: 40px;
}

.logo img {
  width: 100px;
  border-radius: 50%;
  background: #fff;
  transition: 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.header-text {
  text-align: center;
  font-size: 20px;
}

.header-text h1 {
  font-size: 2.5em;
  font-weight: 700;
  text-transform: uppercase;
}

/* ================= ANIMATIONS ================= */
@keyframes fadeInUp {
  from { opacity:0; transform: translateY(30px); }
  to { opacity:1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity:0; transform: translateX(-120px) scale(0.9); }
  to { opacity:1; transform: translateX(0) scale(1); }
}

@keyframes slideInRight {
  from { opacity:0; transform: translateX(120px) scale(0.9); }
  to { opacity:1; transform: translateX(0) scale(1); }
}

@keyframes galleryReveal {
  from { opacity:0; transform: translateY(40px) scale(0.8); }
  to { opacity:1; transform: translateY(0) scale(1); }
}

/* ================= NAVIGATION ================= */
nav {
  background: #bebdbd;
  text-align: center;
  padding: 10px 0;
}

nav a {
  color: #006837;
  text-decoration: none;
  margin: 0 15px;
  font-size: 15px;
  font-weight: 500;
  transition: 0.2s;
}

nav a:hover {
  background: #000e07;
  color: #fff;
  padding: 5px 10px;
  border-radius: 10px;
}

/* ================= MAIN ================= */
main {
  max-width: 1100px;
  margin: 30px auto;
  background: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* ================= ABOUT ================= */
.about {
  background: #f1f8f4;
  border-left: 6px solid #006837;
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 30px;
}

.about h2 {
  color: #006837;
  font-size: 2.2em;
  font-weight: 700;
}

.about p {
  font-size: 1.2em;
  color: #000;
  line-height: 1.7;
}

/* ================= IMAGE GRID ================= */
.about-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.aboutimg {
  width: 100%;
  height: 350px;
  border-radius: 15px;
  object-fit: cover;
  border: 3px solid #f8f9fa;
  animation: galleryReveal 1.2s ease forwards;
  transition: 0.4s ease;
}

.aboutimg:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 25px rgba(0,104,55,0.25);
  border-color: #006837;
}

/* Alternate slide animations */
.aboutimg:nth-child(odd){
  animation: slideInLeft 1s ease forwards;
}

.aboutimg:nth-child(even){
  animation: slideInRight 1s ease forwards;
}

/* ================= ACTIVITIES ================= */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.activity {
  display: flex;
  gap: 20px;
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
  border-left: 4px solid #006837;
  transition: 0.3s;
}

.activity:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,32,17,0.15);
}

.activity-icon {
  font-size: 2.5em;
  color: #006837;
}

/* ================= CONTACT ================= */
section#contact { 
  margin: 40px auto;
  background: #e9e7e7;
  padding: 28px 32px;
  border-radius: 10px;
  border-left: 6px solid #006837;
  max-width: 500px;
  text-align: center;
}

section#contact h2 {
  color: #006837;
  font-size: 2.2em;
}

/* ================= PARTNERS ================= */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.partner-card {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: 0.3s;
}

.partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.partner-card img {
  width: 170px;
  height: 170px;
  border-radius: 20px;
  background: #fff;
  transition: 0.3s;
}

.partner-card img:hover {
  transform: scale(1.1);
}

/* ================= FOOTER ================= */
.footer {
  background: #006837;
  color: #fff;
  text-align: center;
  padding: 18px 0 10px;
  margin-top: 40px;
}

.social-links a {
  color: #fff;
  margin: 0 8px;
  font-size: 2em;
  transition: 0.2s;
}

.social-links a:hover {
  color: #ffe066;
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  .header-flex{
    flex-direction: column;
    align-items: center;
  }

  .aboutimg{
    height: 250px;
  }

  main{
    padding: 20px;
  }
}

@media (max-width:480px){
  .aboutimg{
    height: 200px;
  }

  nav a{
    font-size: 14px;
    margin: 0 8px;
  }
}