/* Hero Section */

















.about-hero{background:linear-gradient(135deg,rgba(62,166,53,0.95),rgba(45,122,40,0.95)),url('../images/og-image.jpg') top center/cover;padding:100px 0 80px;text-align:center;position:relative;overflow:hidden}

















.about-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none"/><path d="M0 0L50 50L0 100" stroke="rgba(255,255,255,0.05)" stroke-width="2" fill="none"/><path d="M50 0L100 50L50 100" stroke="rgba(255,255,255,0.05)" stroke-width="2" fill="none"/></svg>');opacity:.3}

















.about-hero-content{position:relative;z-index:1}

















.about-hero-title{font-size:56px;font-weight:800;color:#fff;margin-bottom:15px;letter-spacing:-1px}

















.about-hero-subtitle{font-size:20px;color:rgba(255,255,255,.9);font-weight:500}

















/* Mission Section */

















.mission-section{padding:100px 0;background:#fff;position:relative}

















.mission-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}

















.mission-image{position:relative}

















.image-wrapper{position:relative;border-radius:30px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.15);transform:perspective(1000px) rotateY(-5deg);transition:all .5s ease}

















.mission-grid:hover .image-wrapper{transform:perspective(1000px) rotateY(0deg);box-shadow:0 30px 80px rgba(0,0,0,.2)}

















.image-wrapper img{width:100%;height:600px;object-fit:cover;display:block;transition:transform .5s ease}

















.mission-grid:hover .image-wrapper img{transform:scale(1.05)}

















.image-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(62,166,53,.1),rgba(45,122,40,.2));opacity:0;transition:opacity .5s ease}

















.mission-grid:hover .image-overlay{opacity:1}

















.section-badge{display:inline-block;padding:8px 20px;background:linear-gradient(135deg,var(--primary-green),var(--dark-green));color:#fff;border-radius:30px;font-size:13px;font-weight:600;letter-spacing:.5px;margin-bottom:20px;text-transform:uppercase}

















.mission-content .section-title{font-size:42px;font-weight:800;color:var(--text-dark);margin-bottom:30px;line-height:1.2;letter-spacing:-1px}

















.mission-content p{font-size:17px;line-height:1.9;color:#666;margin-bottom:25px}

















.mission-features{display:flex;flex-direction:column;gap:15px;margin-top:35px}

















.feature-item{display:flex;align-items:center;gap:12px;padding:15px 20px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:12px;border-left:4px solid var(--primary-green);transition:all .3s ease}

















.feature-item:hover{transform:translateX(10px);box-shadow:0 8px 20px rgba(62,166,53,.1)}

















.feature-item svg{flex-shrink:0;color:var(--primary-green)}

















.feature-item span{font-size:16px;font-weight:600;color:var(--text-dark)}

















/* Values Section */

















.values-section{padding:80px 0;background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%)}

















.text-center{text-align:center}

















.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}

















.value-card{background:#fff;padding:40px 30px;border-radius:20px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.08);transition:all .4s ease;border:2px solid transparent}

















.value-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(62,166,53,.15);border-color:rgba(62,166,53,.2)}

















.value-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--primary-green),var(--dark-green));border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 25px;color:#fff;transition:all .4s ease}

















.value-card:hover .value-icon{transform:scale(1.1) rotate(5deg)}

















.value-card h3{font-size:22px;font-weight:700;color:var(--text-dark);margin-bottom:15px}

















.value-card p{font-size:15px;color:#666;line-height:1.8}

















/* Story Section */

















.story-section{padding:80px 0;background:#fff}

















.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

















.story-image{border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15)}

















.story-image img{width:100%;height:100%;object-fit:cover;display:block}

















.story-content p{font-size:16px;line-height:1.9;color:#666;margin-bottom:20px}

















.story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}

















.stat-item{text-align:center;padding:25px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:15px;border:2px solid rgba(62,166,53,.1)}

















.stat-item h3{font-size:36px;font-weight:800;color:var(--primary-green);margin-bottom:8px}

















.stat-item p{font-size:14px;color:#666;font-weight:600;margin:0}

















/* CTA Section */

















.cta-section{padding:80px 0;background:linear-gradient(135deg,var(--primary-green),var(--dark-green));text-align:center;position:relative;overflow:hidden}

















.cta-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" stroke="rgba(255,255,255,0.05)" stroke-width="2" fill="none"/></svg>');opacity:.3}

















.cta-content{position:relative;z-index:1}

















.cta-content h2{font-size:42px;font-weight:800;color:#fff;margin-bottom:20px}

















.cta-content p{font-size:18px;color:rgba(255,255,255,.9);margin-bottom:35px}

















.cta-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}

















.btn-primary,.btn-secondary{padding:16px 40px;border-radius:30px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s ease;display:inline-block}

















.btn-primary{background:#fff;color:var(--primary-green);box-shadow:0 8px 25px rgba(0,0,0,.15)}

















.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(0,0,0,.25)}

















.btn-secondary{background:transparent;color:#fff;border:2px solid #fff}

















.btn-secondary:hover{background:#fff;color:var(--primary-green)}

















/* Responsive */

















@media (max-width:992px){.mission-grid,.story-grid{grid-template-columns:1fr}.story-grid{direction:rtl}.story-grid>*{direction:ltr}.values-grid{grid-template-columns:repeat(2,1fr)}}

















@media (max-width:768px){.about-hero{padding:80px 0 60px;background-position:top center}.about-hero-title{font-size:40px}.values-grid,.story-stats{grid-template-columns:1fr}.cta-content h2{font-size:32px}.cta-buttons{flex-direction:column;align-items:center}}

















@media (max-width:480px){.about-hero-title{font-size:32px}.value-card{padding:30px 20px}.stat-item h3{font-size:28px}}