* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Segoe UI", sans-serif;
 }

 body {
     background: #f8f9f6;
     color: #333;
 }

 body::before {
     content: "";
     position: fixed;
     inset: 0;
     background-image:
         radial-gradient(rgba(47, 143, 95, 0.06) 1px, transparent 1px);
     background-size: 26px 26px;
     pointer-events: none;
     z-index: -1;
 }


 /* HERO */
 /* PARALLAX HERO */
 .hero-parallax {
     position: relative;
     height: 320px;
     overflow: hidden;
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     background-image: url("../assets/about.png");
     background-size: cover;
     background-position: center;
     transform: translateY(0);
     will-change: transform;
 }

 .hero-parallax::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(20, 80, 45, 0.55);
 }

 .hero-content {
     position: relative;
     z-index: 2;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 0 8%;
     color: #fff;
 }

 .hero-content h1 {
     font-size: 42px;
 }

 .hero-content p {
     margin-top: 8px;
     font-size: 14px;
     opacity: 0.9;
 }

 @media (max-width: 768px) {
     .hero-parallax {
         height: 240px;
     }
 }

 /* LAYOUT */
 .about-container {
     display: flex;
     gap: 30px;
     padding: 60px 8%;
 }

 /* MENU */
 .about-menu {
     width: 260px;
     background: #fff;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .menu-item {
     width: 100%;
     padding: 16px 20px;
     border: none;
     background: #fff;
     text-align: left;
     font-size: 15px;
     cursor: pointer;
     border-bottom: 1px solid #eee;
 }

 .menu-item.active {
     background: #1f6b3f;
     color: #fff;
     font-weight: 600;
 }

 /* CONTENT */
 .about-content {
     flex: 1;
     background: #fff;
     border-radius: 10px;
     padding: 40px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .content-section {
     display: none;
 }

 .content-section.active {
     display: block;
 }

 .about-content h2 {
     color: #1f6b3f;
     margin-bottom: 16px;
 }

 .about-content p,
 .about-content li {
     line-height: 1.8;
     margin-bottom: 12px;
 }

 .about-content ul {
     padding-left: 20px;
 }

 .nilai-item {
     margin-bottom: 18px;
 }

 .nilai-item h4 {
     color: #2c7a4b;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
     .about-container {
         flex-direction: column;
         padding: 40px 5%;
     }

     .about-menu {
         width: 100%;
         display: flex;
     }

     .menu-item {
         flex: 1;
         text-align: center;
         border-bottom: none;
         border-right: 1px solid #eee;
     }

     .menu-item:last-child {
         border-right: none;
     }
 }

 /* ANIMATION */
 .content-section {
     display: none;
     opacity: 0;
     transform: translateY(12px);
     transition: opacity 0.4s ease, transform 0.4s ease;
 }

 .content-section.active {
     display: block;
     opacity: 1;
     transform: translateY(0);
 }

 @media (max-width: 768px) {

     .about-menu {
         flex-direction: column;
         border-radius: 10px;
         overflow: hidden;
     }

     .menu-item {
         text-align: left;
         border-right: none;
         border-bottom: 1px solid #eaeaea;
         position: relative;
     }

     .menu-item::after {
         content: "+";
         position: absolute;
         right: 20px;
         font-size: 20px;
         transition: transform 0.3s ease;
     }

     .menu-item.active::after {
         content: "−";
     }

     .about-content {
         padding: 24px;
     }
 }

 /* Scroll Reveal */
 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .reveal.show {
     opacity: 1;
     transform: translateY(0);
 }

 .nilai-item {
     display: flex;
     gap: 18px;
     padding: 20px;
     background: #f4f8f4;
     border-radius: 14px;
     margin-bottom: 20px;
     border-left: 4px solid #1f6b3f;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .nilai-item:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
 }

 .nilai-icon {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: linear-gradient(135deg, #1f6b3f, #2f8f5f);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 22px;
     flex-shrink: 0;
 }

 .nilai-card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: all .4s ease;
}

.nilai-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(36,87,13,.18);
}

.nilai-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #24570d, #6BAE46);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  transition: transform .4s ease, box-shadow .4s ease;
}

.nilai-card:hover .nilai-icon {
  transform: rotate(6deg) scale(1.08);
  box-shadow: 0 10px 25px rgba(36,87,13,.45);
}

.nilai-card h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .75rem;
  color: #1f2937;
}

.nilai-card p {
  font-size: .95rem;
  color: #6b7280;
  line-height: 1.6;
}


.usaha-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: all .35s ease;
}

.usaha-card i {
  font-size: 1.8rem;
  color: #24570d;
}

.usaha-card span {
  font-weight: 500;
  color: #374151;
}

.usaha-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(36,87,13,.2);
}

.nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all .3s ease;
}

.nav-btn:hover {
  background: #24570d;
  color: #fff;
}

.active-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #24570d;
  width: 25%;
  transition: width .4s ease;
}