:root {
    --kpy-font: "Poppins", sans-serif;
    --kpy-font-2: "Roboto", sans-serif;
    --kpy-font-3: "Merriweather", serif;
    --kpy-primary:#1b3a57 ;         
    --kpy-primary-rgb: 46,125,50;
    --kpy-secondary: #f9a825;      
    --kpy-secondary-rgb: 249,168,37;
    --kpy-accent: #2e7d32;        
    --kpy-accent-rgb: 2,119,189;
    --kpy-warning: #e64a19;        
    --kpy-warning-rgb: 230,74,25;
    --kpy-dark:#000000 ;     
    --kpy-dark-rgb: 27,58,87;
    --kpy-white: #ffffff;
    --kpy-gray-light: #f4f6f7; 
    --kpy-grey: #555; 
    --kpy-light-bg: #27446087;
    --transition: all 0.3s ease;
}

html {
  scroll-behavior: smooth;
}    
    
body {font-family:var(--kpy-font-2);overflow-x:hidden;}
        
h1,h2,h3,h4,h5{font-family:var(--kpy-font-2);font-weight:700;margin-bottom:1rem;color:var(--kpy-primary);}
h1{font-size:4rem;}
h2{font-size:3rem;position:relative;padding-bottom:15px;margin-bottom:2rem;}
h2:not(.text-center):after{display:none;}
h2.text-center:after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:4px;background:var(--kpy-secondary);}
p{margin-bottom:0.1rem;font-size:1.05rem;line-height:1.8;}
.section-padding{padding:5rem 0;}
.section-title{margin-bottom:1rem;text-align:center;}
/** ==========================================================
Navbar
===========================================================**/

.top-bar {background:linear-gradient(90deg,rgba(var(--kpy-dark-rgb),0.9) 0%,rgba(var(--kpy-dark-rgb),0.8) 100%);font-size:16px;transition:var(--transition);position:absolute;width:100%;z-index:999;border-bottom:1px solid var(--kpy-white);}
.top-bar a {color:#ccc;text-decoration:none;margin-left:12px;transition:all 0.2s ease;position:relative;}
.top-bar a:hover {color:var(--kpy-secondary);transform:translateY(-1px);}
.top-bar a i {transition:transform 0.3s ease;}
.top-bar a:hover i {transform:scale(1.2);}
.navbar {position:absolute;width:100%;z-index:999;padding:4px 0;transition:var(--transition);top:41px;backdrop-filter:blur(5px);}
.navbar.scrolled {position:fixed;background:rgba(var(--kpy-dark-rgb),0.95)!important;padding:2px 0;box-shadow:0 4px 20px rgba(0,0,0,0.3);top:0;}
.navbar-nav .nav-link {color:var(--kpy-white)!important;font-weight:500;padding:0.6rem 1.2rem!important;transition:var(--transition);position:relative;font-size:16px;}
.navbar-nav .nav-link::before {content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--kpy-secondary);transition:var(--transition);transform:translateX(-50%);}
.navbar-nav .nav-link:hover::before,.navbar-nav .nav-link:focus::before,.navbar-nav .nav-link.active::before {width:70%;}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus {color:var(--kpy-secondary)!important;transform:translateY(-2px);}
.dropdown-menu {background:linear-gradient(90deg,rgba(var(--kpy-dark-rgb),0.9) 0%,rgba(var(--kpy-dark-rgb),0.8) 100%);padding:12px 0;backdrop-filter:blur(10px);margin-top:2px;transform:translateY(10px);opacity:0;transition:var(--transition);display:none;}
.dropdown:hover .dropdown-menu {display:block;opacity:1;transform:translateY(0);}
.dropdown-menu.show {display:block;opacity:1;transform:translateY(0);pointer-events:auto;}
.dropdown-menu .dropdown-item {color:#eee;padding:10px 25px;transition:all 0.2s ease;position:relative;}
.dropdown-menu .dropdown-item::before {content:'';position:absolute;left:15px;top:50%;width:6px;height:6px;background:rgba(var(--kpy-secondary-rgb),0.6);border-radius:50%;transform:translateY(-50%);opacity:0;transition:all 0.2s ease;}
.dropdown-menu .dropdown-item:hover {background:linear-gradient(90deg,rgba(var(--kpy-secondary-rgb),0.2) 0%,transparent 100%);color:var(--kpy-secondary);padding-left:35px;}
.dropdown-menu .dropdown-item:hover::before {opacity:1;left:20px;}
.btn-donate {border:2px solid var(--kpy-secondary);color:var(--kpy-secondary);font-weight:600;padding:10px 25px;border-radius:30px;transition:var(--transition);position:relative;overflow:hidden;z-index:1;}
.btn-donate::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--kpy-secondary);transition:all 0.4s ease;z-index:-1;}
.btn-donate:hover {color:var(--kpy-white);transform:translateY(-3px);box-shadow:0 10px 20px rgba(var(--kpy-secondary-rgb),0.3);}
.btn-donate:hover::before {left:0;}
.offcanvas {background:#111!important;background-image:linear-gradient(to bottom,#1a1a1a,#0d0d0d)!important;color:var(--kpy-white);}
.offcanvas.show {transform:none!important;visibility:visible!important;}
.offcanvas .nav-link {color:var(--kpy-white)!important;font-size:18px;margin:8px 0;padding:12px 20px!important;border-radius:5px;transition:all 0.2s ease;}
.offcanvas .nav-link:hover {background:rgba(var(--kpy-secondary-rgb),0.1);padding-left:30px!important;}
.offcanvas .dropdown-menu {background:transparent;border:none;padding-left:20px;box-shadow:none;}
.offcanvas .dropdown-item {color:#ccc;padding:10px 20px;transition:all 0.2s ease;}
.offcanvas .dropdown-item:hover {color:var(--kpy-secondary);background:transparent;padding-left:30px;}
.navbar-brand svg rect {transition:all 0.5s ease;}
.navbar-brand:hover svg rect {fill:var(--kpy-warning);transform:rotate(5deg);}
.dropdown-toggle::after {display:inline-block;margin-left:0.5em;vertical-align:middle;content:"";border:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:all 0.2s ease;}
.dropdown:hover .dropdown-toggle::after {transform:rotate(-135deg) translateX(-2px);}
.offcanvas .dropdown-toggle::after {float:right;margin-top:0.5em;transform:rotate(45deg);transition:all 0.3s ease;}
.offcanvas .dropdown-toggle[aria-expanded="true"]::after {transform:rotate(-135deg);}

/** ==========================================================
Slider Carousel
===========================================================**/
.slider {width:100%;height:100vh;min-height:700px;max-height:900px;position:relative;overflow:hidden;}
.slides-track {display:flex;height:100%;transition:transform 0.8s cubic-bezier(0.23,1,0.32,1);}
.slide {min-width:100%;height:100%;position:relative;}
.slide-image {height:100%;background-size:cover;background-position:center;position:relative;}
.slide-image::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(var(--kpy-dark-rgb),0.7) 0%,rgba(var(--kpy-dark-rgb),0.5) 100%);z-index:1;}
.slide-content {position:absolute;top:40%;left:30%;transform:translate(-50%,-50%);text-align:left;color:var(--kpy-white);padding:20px;z-index:2;max-width:600px;}
.slide-content h2 {font-size:4rem;margin-bottom:20px;font-weight:700;text-shadow:2px 2px 6px rgba(0,0,0,0.6);transform:translateY(20px);opacity:0;transition:all 0.8s ease; color:var(--kpy-white);}
.slide-content p {font-size:1rem;line-height:1.8;margin-bottom:30px;transform:translateY(20px);opacity:0;transition:all 0.8s ease 0.2s;}
.unique-btn {border:2px solid var(--kpy-secondary);color:var(--kpy-secondary);font-weight:600;padding:10px 25px;border-radius:30px;transition:var(--transition);position:relative;overflow:hidden;z-index:1; text-decoration:none; text-align:center;}
.unique{border:2px solid var(--kpy-secondary);color:var(--kpy-secondary);font-weight:600;padding:10px 25px;border-radius:30px;transition:var(--transition);position:relative;overflow:hidden;z-index:1; text-decoration:none;}
.unique-btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--kpy-secondary);transition:all 0.4s ease;z-index:-1; }
.unique-btn:hover {color:var(--kpy-white);transform:translateY(-3px);box-shadow:0 10px 20px rgba(var(--kpy-secondary-rgb),0.3);}
.unique-btn:hover::before {left:0;}
.slider-nav {position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;padding:0 20px;z-index:20;transform:translateY(-50%);}
.nav-arrow {width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;font-size:28px;cursor:pointer;transition:all 0.3s ease;color:white;}
.nav-arrow:hover {background:rgba(255,255,255,0.25);transform:scale(1.1);}
.slider-dots {position:absolute;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:20;}
.dot {width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;transition:all 0.3s ease;}
.dot.active {background:white;transform:scale(1.3);}
.slide.active .slide-content h2,.slide.active .slide-content p,.slide.active .unique-btn {transform:translateY(0);opacity:1;}
@media (max-width:768px){.slide-content h2{font-size:2.2rem;}.slide-content p{font-size:1.2rem;} .slider {width:100%;height:70vh;} .slide-content {top:25%;left:20%;}}
    

/** ==========================================================
FOOTER
===========================================================**/

.site-footer {background:linear-gradient(to bottom,rgba(var(--kpy-dark-rgb),1) 0%,#000000 100%);color:#ccc;position:relative;padding:60px 0 20px;overflow:hidden;}
.site-footer::before {content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0%,var(--kpy-secondary) 50%,transparent 100%);animation:glow 2s infinite alternate;}
@keyframes glow {0%{box-shadow:0 0 5px rgba(var(--kpy-secondary-rgb),0.5);}100%{box-shadow:0 0 20px rgba(var(--kpy-secondary-rgb),0.8),0 0 30px rgba(var(--kpy-secondary-rgb),0.6);}}
.footer-logo {margin-bottom:20px;display:inline-block;}
.footer-heading {color:var(--kpy-white);font-size:18px;margin-bottom:20px;padding-bottom:10px;position:relative;font-weight:600;}
.footer-heading::after {content:'';position:absolute;left:0;bottom:0;width:40px;height:2px;background:var(--kpy-secondary);}
.footer-links {list-style:none;padding:0;margin:0;}
.footer-links li {margin-bottom:12px;}
.footer-links a {color:#ccc;text-decoration:none;transition:var(--transition);display:inline-block;position:relative;}
.footer-links a::before {content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--kpy-secondary);transition:var(--transition);}
.footer-links a:hover {color:var(--kpy-secondary);transform:translateX(5px);}
.footer-links a:hover::before {width:100%;}
.contact-info {list-style:none;padding:0;margin:0;}
.contact-info li {margin-bottom:15px;display:flex;align-items:flex-start;}
.contact-info i {color:var(--kpy-secondary);margin-right:10px;margin-top:4px;font-size:16px;}
.social-links {margin-top:20px;}
.social-links a {display:inline-block;width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;text-align:center;line-height:40px;color:var(--kpy-white);margin-right:10px;transition:var(--transition);}
.social-links a:hover {background:var(--kpy-secondary);transform:translateY(-5px);}
.footer-bottom {margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);text-align:center;font-size:14px;}
.footer-bottom a {color:var(--kpy-secondary);text-decoration:none;}
.back-to-top {position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:var(--kpy-secondary);color:var(--kpy-white);border-radius:50%;text-align:center;line-height:50px;font-size:20px;cursor:pointer;transition:var(--transition);opacity:0;visibility:hidden;z-index:999;box-shadow:0 5px 15px rgba(var(--kpy-secondary-rgb),0.3);}
.back-to-top.active {opacity:1;visibility:visible;}
.back-to-top:hover {background:rgba(var(--kpy-secondary-rgb),1);transform:translateY(-5px);}


/** ==========================================================
Hero
===========================================================**/
.kpy-hero {position: relative;height: 80vh;display: flex;align-items: center;justify-content: center;text-align: center;color: var(--kpy-white);overflow: hidden;}
.kpy-hero-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -2;}
.kpy-hero::before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:-1;}

.kpy-hero-content {max-width: 800px;padding: 20px;}
.kpy-hero-content h1 {margin-bottom: 1rem;line-height: 1.2;text-shadow: 0 4px 15px rgba(0,0,0,0.5);font-weight: 800; color:var(--kpy-white); margin-top:2rem;}
.kpy-hero-content p {font-size: 1rem;font-family: var(--kpy-font-3);font-weight: 400;max-width: 600px;margin: 0 auto;text-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.kpy-hero-wave {position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="%23ffffff" d="M0,0 C200,100 600,0 1000,100 1440,0 1440,100 1440,100 L1440,100 L0,100 Z"></path></svg>') no-repeat bottom center;background-size: cover;}


/** ==========================================================
HOME STYLES
===========================================================**/
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.about-image{position:relative;height:100%;border-radius:10px;overflow:hidden;box-shadow:0 15px 30px rgba(0,0,0,0.1);}
.about-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.about-image:hover img{transform:scale(1.03);}
.about-badge{position:absolute;bottom:20px;right:20px;background:var(--kpy-secondary);color:var(--kpy-white);padding:10px 15px;text-align:center;font-size:14px;font-weight:600;box-shadow:0 5px 15px rgba(0,0,0,0.1);}
.about-content h2{margin-bottom:20px;font-weight:bold;font-size:3rem;}
.about-highlights{margin:30px 0;display:grid;gap:20px;}
.highlight{display:flex;align-items:flex-start;gap:15px;}
.highlight-icon{font-size:28px;color:var(--kpy-secondary);flex-shrink:0;background:rgba(46,125,50,0.1);width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.highlight-content h4{margin-bottom:5px;font-size:1.2rem;}
.highlight-content p{margin-bottom:0;font-size:1rem;}
.about-quote{margin:30px 0;padding:25px;border-left:4px solid var(--kpy-primary);font-style:italic;background:var(--kpy-gray-light);border-radius:0 8px 8px 0;}
.about-quote span{display:block;margin-top:15px;font-weight:bold;color:var(--kpy-dark);font-style:normal;}

/** ==========================================================
INITIATIVE CARDS
===========================================================**/
.initiatives {padding:80px 0;background:var(--kpy-gray-light);} 
.section-title {text-align:center;margin-bottom:50px;} 
.section-title h2 {color:var(--kpy-primary);font-size:2.5rem;margin-bottom:15px;} 
.section-title p {color:var(--kpy-grey);font-size:1.1rem;max-width:600px;margin:0 auto;} 
.initiatives-slider-container {position:relative;max-width:1200px;margin:0 auto;overflow:hidden;} 
.initiatives-slider {display:flex;transition:transform 0.5s ease;gap:0;} 
.initiative-slide {flex:0 0 33.333%;padding:0 15px;box-sizing:border-box;} 
.initiative-card {border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:var(--transition);display:flex;flex-direction:column;position:relative;border-top:6px var(--kpy-secondary) solid;height:100%;} 
.initiative-card:hover {transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.15);} 
.initiative-label {position:absolute;left:50%;transform:translateX(-50%);background:var(--kpy-secondary);color:#fff;font-weight:bold;padding:6px 20px;font-size:14px;border-radius:0 0 5px 5px;z-index:2;} 
.initiative-content {padding:20px;text-align:center;margin-top:30px;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;} 
.initiative-content h3 {font-size:20px;margin-bottom:10px;color:var(--kpy-primary);line-height:1.3;} 
.initiative-content p {font-size:14px;color:#666;margin-bottom:20px;line-height:1.5;} 
.initiative-image {position:relative;width:100%;overflow:hidden;} 
.initiative-image img {width:100%;display:block;transition:var(--transition);height:200px;object-fit:cover;} 
.initiative-card:hover .initiative-image img {transform:scale(1.05);} 
.initiative-image::after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);opacity:0;transition:var(--transition);} 
.initiative-card:hover .initiative-image::after {opacity:1;} 
.read-more {position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);background:transparent;color:var(--kpy-secondary);padding:8px 15px;border-radius:30px;font-size:14px;text-decoration:none;opacity:0;z-index:2;border:2px var(--kpy-secondary) solid;transition:var(--transition);} 
.initiative-card:hover .read-more {bottom:20px;opacity:1;} 
.read-more:hover {background:var(--kpy-secondary);color:white;} 
@media (max-width:992px){.initiative-slide{flex:0 0 50%;}} 
@media (max-width:768px){.initiative-slide{flex:0 0 100%;}.section-title h2{font-size:2rem;}}

.slider-prev, .slider-next {
  background: var(--kpy-primary);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.slider-prev:hover, .slider-next:hover {
  background: var(--kpy-secondary);
  transform: scale(1.1);
}


/** ==========================================================
STATS
===========================================================**/
.impact { background: linear-gradient(to right, var(--kpy-primary), var(--kpy-accent)); color: white; position: relative; }
.impact h2, .impact h3 { color: white; }
.impact h2:after { background: var(--kpy-secondary); }

.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; }

.impact-item { background: rgba(255,255,255,0.1); padding: 30px; border-radius: 10px; text-align: center; backdrop-filter: blur(5px); transition: var(--transition); }
.impact-item:hover { transform: translateY(-5px); background: rgba(255,255,255,0.15); }
.impact-icon { font-size: 2.5rem; margin-bottom: 20px; color: var(--kpy-secondary); }
.counter { font-size: 2.2rem; font-weight: bold; margin-bottom: 10px; }

/** ==========================================================
CTA
===========================================================**/
.cta-section { text-align: center; padding: 80px 0; }
.cta-content { max-width: 800px; margin: 0 auto; }
.cta-content h2 { margin-bottom: 20px; }
.cta-content p { font-size: 1.2rem; margin-bottom: 30px; }
.cta-buttons { display: flex; justify-content: center; gap: 20px;  }

/** ==========================================================
IMPACT ACCORDIONS
===========================================================**/
.pcs-impacts { background: linear-gradient(135deg, rgb(0 0 0 / 44%) 0%, rgb(0 0 0 / 74%) 100%), url('../images/educ.jpeg') center/cover no-repeat; padding: 30px 20px; margin: 0 auto; backdrop-filter: blur(5px); position: relative; }
.pcs-impacts h2 { color: var(--kpy-white); }
.pcs-impacts p { color: var(--kpy-white); }
.pcs-accordion .accordion-item { border: none; margin-bottom: 5px; border-radius: 10px; overflow: hidden; background: transparent; }
.pcs-accordion .accordion-button { font-size: 1.1rem; color: var(--kpy-white); margin: 5px 0; padding: 15px 20px 15px 65px; background: var(--kpy-light-bg); border-radius: 10px; position: relative; transition: all 0.3s ease; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.3); font-weight: 600; font-family: var(--kpy-font); }
.pcs-accordion .accordion-button:not(.collapsed) { background: rgba(var(--kpy-secondary-rgb), 0.4); color: var(--kpy-white); border: 1px solid rgba(255,255,255,0.4); }
.pcs-accordion .accordion-button:hover { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); }
.pcs-accordion .accordion-body { background: var(--kpy-light-bg); color: var(--kpy-white); font-size: 0.95rem; font-family: var(--kpy-font-2); line-height: 1.6; padding: 20px; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); border-top: none; border-radius: 0 0 10px 10px; }
.pcs-accordion .accordion-button::before { content: '+'; position: absolute; left: 25px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; transition: var(--transition); }
.pcs-accordion .accordion-button:not(.collapsed)::before { content: '−'; }

@media (max-width:992px){.about-grid{grid-template-columns:1fr;}.initiatives-grid{grid-template-columns:repeat(2,1fr);}.impact-grid{grid-template-columns:1fr;}}
@media (max-width:768px){h1{font-size:2.2rem;}h2{font-size:1.8rem;}.section-padding{padding:3rem 0;}.initiatives-grid{grid-template-columns:1fr;}.cta-buttons{align-items:center;}.btn-primary,.btn-secondary{width:100%;text-align:center;}}


/** ==========================================================
ABOUT STYLES
===========================================================**/

.kpy-mission {padding:40px 0;background-color:var(--kpy-white);position:relative;}
.kpy-mission-title {text-align:center;margin-bottom:40px;}
.kpy-mission-grid {display:grid;grid-template-columns: repeat(4, 1fr);gap:40px;}
.kpy-mission-card {position:relative;background:var(--kpy-gray-light);border-radius:10px;padding:20px;text-align:center;transition:var(--transition);overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.1);}
.kpy-mission-card:hover {transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.kpy-mission-icon {font-size:2.5rem;color:var(--kpy-secondary);margin-bottom:15px;}
.kpy-mission-card h3 {margin-bottom:10px;font-size:1.4rem;}
.kpy-mission-card p {font-size:0.95rem;color:var(--kpy-grey);}
.kpy-mission-card::before {content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(to right,var(--kpy-secondary),var(--kpy-accent));transition:var(--transition);}
.kpy-mission-card:hover::before {height:10px;}
/** ==========================================================
IMPACT SECTION
===========================================================**/
    
.features-section { padding: 40px 0; background:var(--kpy-white) ; }
.features-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.features-content h2{ text-align:left; margin-bottom:10px;}
.features-list { list-style: none; }
.features-list li { padding: 15px 0; border-bottom: 1px solid #eee; display: flex; align-items: center; font-size: 1.1rem; }
.features-list li i { color: var(--kpy-warning); margin-right: 15px; font-size: 1.3rem; } 

/** ==========================================================
TEAM MEMBERS
===========================================================**/
.team-section { max-width: 1300px; margin: 40px auto; padding: 0 15px; }
.section-title { color: var(--kpy-dark); font-size: 2.5rem;  position: relative; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.team-card { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(var(--kpy-dark-rgb), 0.1); transition: var(--transition); }
.team-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(var(--kpy-dark-rgb), 0.15); }
.team-card .card-image { position: relative; width: 100%; height: 350px; overflow: hidden; }
.team-card .card-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.team-card:hover .card-image img { transform: scale(1.05); }
.card-gradient { position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; background: linear-gradient(to top, rgba(var(--kpy-dark-rgb), 0.8) 0%, transparent 100%); }
.card-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px; color: var(--kpy-white); z-index: 2; }
.card-name { font-size: 1.4rem; font-weight: 600; margin-bottom: 5px; color: var(--kpy-white);}
.card-title { font-size: 0.95rem; margin-bottom: 15px; opacity: 0.9; font-family: var(--kpy-font-2); }
.card-button { display: inline-block; padding: 8px 20px; background-color: var(--kpy-secondary); color: var(--kpy-dark); text-decoration: none; border-radius: 4px; font-size: 0.9rem; font-weight: 500; transition: var(--transition); cursor: pointer; border: none; font-family: var(--kpy-font); }
.card-button:hover { background-color: var(--kpy-white); color: var(--kpy-primary); }

/** ==========================================================
TEAM MODAL
===========================================================**/
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; overflow: auto; opacity: 0; transition: opacity 0.3s ease; }
.modal.show { display: flex; opacity: 1; }
.modal-content { background-color: var(--kpy-white); margin: auto; width: 90%; max-width: 800px; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); animation: modalFadeIn 0.4s ease; display: flex; flex-direction: column; max-height: 90vh; }
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
.modal-header { padding: 20px 25px; background: var(--kpy-primary); color: var(--kpy-white); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: 1.8rem; font-weight: 600;color: var(--kpy-white); }
.close-modal { background: none; border: none; color: var(--kpy-white); font-size: 1.8rem; cursor: pointer; transition: var(--transition); }
.close-modal:hover { color: var(--kpy-secondary); }
.modal-body { padding: 25px; display: flex; flex-direction: column; overflow-y: auto; }
.profile-main { display: flex; gap: 30px; margin-bottom: 25px; }
.profile-image { flex: 0 0 250px; border-radius: 8px; overflow: hidden;  }
.profile-image img { width: 100%; height: auto; display: block; }
.profile-info { flex: 1; }
.profile-name { font-size: 2rem; color: var(--kpy-primary); margin-bottom: 5px; }
.profile-role { font-size: 1.2rem; color: var(--kpy-warning); margin-bottom: 15px; font-family: var(--kpy-font-2); }
.profile-bio { margin-bottom: 20px; line-height: 1.7; }
.profile-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; }
.detail-item { display: flex; align-items: center; gap: 10px; }
.detail-item i { color: var(--kpy-primary); font-size: 1.2rem; }

@media (max-width: 1200px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } .profile-main { flex-direction: column; } .profile-image { flex: 0 0 auto; max-width: 300px; margin: 0 auto; } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } .card-image { height: 300px; } .modal-content { width: 95%; } .profile-details { grid-template-columns: 1fr; } .modal-title { font-size: 1.4rem; } .profile-name { font-size: 1.6rem; } }



/** ==========================================================
MISSION
===========================================================**/
section { padding: 40px 0; }

/* Mission Section */
.mission-section { background-color: var(--kpy-white); padding: 40px 0; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: stretch; }
.mission-section h2 { text-align: left; margin-bottom: 20px; font-size: 3rem; }
.mission-details { display: flex; flex-direction: column; justify-content: center; }
.mission-content p { font-size: 1.1rem; margin-bottom: 20px; color: var(--kpy-grey); text-align: left; }
.mission-stats { display: flex; justify-content: space-between; margin-top: 40px; gap: 20px; }
.stat-item { text-align: center; flex: 1; }
.stat-number { font-size: 2.5rem; font-weight: 700; color: var(--kpy-accent); margin-bottom: 5px; }
.stat-label { font-size: 1rem; color: var(--kpy-primary); font-weight: 500; }
.mission-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/** ==========================================================
ABOUT PAGE
===========================================================**/
/* Board Composition Section */
.board-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.board-text h3 { font-size: 1.6rem; margin-bottom: 15px; color: var(--kpy-primary); }
.board-text p { font-size: 1.05rem; line-height: 1.6; color: var(--kpy-grey); margin-bottom: 15px; }
.chart-container { position: relative; width: 220px; height: 220px; border-radius: 50%; background: conic-gradient(var(--kpy-accent) 0deg calc(360deg * 6/9), var(--kpy-primary) calc(360deg * 6/9) 360deg); margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.chart-center { position: absolute; width: 120px; height: 120px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chart-center .total { font-size: 2rem; font-weight: bold; color: var(--kpy-accent); }
.chart-center .label { font-size: 0.9rem; color: var(--kpy-primary); }
.chart-legend { margin-top: 20px; text-align: center; }
.legend-item { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.legend-color { width: 16px; height: 16px; border-radius: 4px; margin-right: 8px; }
.legend-youth { background-color: var(--kpy-accent); }
.legend-other { background-color: var(--kpy-primary); }

/** ==========================================================
LEADERSHIP SECTION
===========================================================**/
.leadership-section { background-color: var(--kpy-gray-light); }
.leadership-structure { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 50px; }
.leadership-card { background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 30px; text-align: center; flex: 1; min-width: 300px; max-width: 350px; transition: var(--transition); }
.leadership-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.leadership-icon { width: 80px; height: 80px; background-color: var(--kpy-light-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--kpy-primary); font-size: 2rem; }
.leadership-card h3 { font-family: var(--kpy-font); color: var(--kpy-primary); margin-bottom: 15px; font-size: 1.5rem; }
.leadership-card p { color: var(--kpy-grey); margin-bottom: 20px; }
.age-bracket { display: inline-block; background-color: var(--kpy-secondary); color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; }
/** ==========================================================
CLIMATE ACTION
===========================================================**/
/* Climate Action Section */
.climate-section { background: linear-gradient(rgba(27,58,87,0.6), rgba(27,58,87,0.7)), url('../images/real.jpg'); background-size: cover; background-position: center; color: white; text-align: center; }
.climate-section .section-title h2 { color: white; }
.climate-section .section-title h2:after { background-color: var(--kpy-secondary); }
.climate-content { max-width: 800px; margin: 0 auto; }
.climate-content p { font-size: 1.1rem;  }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; }
.impact-item { background: rgba(255,255,255,0.1); padding: 30px; border-radius: 10px; backdrop-filter: blur(5px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.impact-number { font-size: 2.5rem; font-weight: 700; color: var(--kpy-secondary); margin-bottom: 10px; }
.impact-label { font-size: 1.1rem; }

/* Responsive */
@media (max-width: 992px) {
  .mission-grid { grid-template-columns: 1fr; }
  .mission-content { text-align: center; }
  .mission-stats { flex-direction: column; align-items: center;}.kpy-mission-grid {grid-template-columns: repeat(1, 1fr); } .features-content {
    grid-template-columns: 1fr;} }
@media (max-width: 768px) {
  .board-content { grid-template-columns: 1fr; text-align: center; }
  .hero h1 { font-size: 2.5rem; }
  .section-title h2 { font-size: 2rem; }
  .stat-item { margin: 15px 0; }}

/** ==========================================================
CONTACT US
===========================================================**/
.contact-section{padding:40px 0;font-family:var(--kpy-font);text-align:center;position:relative;overflow:hidden;border-radius:20px;max-width:1200px;margin:0 auto;box-shadow:var(--shadow);} 
.contact-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%232c5aa0" fill-opacity="0.03" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');background-size:cover;background-position:center;z-index:0;} 
.contact-container{max-width:1200px;margin:0 auto;position:relative;z-index:1;} 
.contact-header{margin-bottom:20px;} 
.contact-header h2{font-family:var(--kpy-font-3);font-size:2.8rem;color:var(--kpy-primary);margin-bottom:0;position:relative;display:inline-block;} 
.contact-header p{color:var(--kpy-grey);max-width:700px;margin:30px auto 0;font-size:1.1rem;line-height:1.8;} 
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;} 
.contact-info{display:flex;flex-direction:column;gap:25px;} 
.contact-card{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:30px;border-radius:16px;text-align:left;box-shadow:var(--shadow);transition:var(--transition);cursor:pointer;display:flex;align-items:flex-start;gap:20px;position:relative;overflow:hidden;border-left:4px solid var(--kpy-secondary);} 
.contact-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(44,90,160,0.1),transparent);transition:var(--transition);} 
.contact-card:hover::before{left:100%;} 
.contact-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);} 
.contact-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--kpy-secondary) 0%,#ffb347 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition);box-shadow:0 4px 10px rgba(249,168,38,0.3);} 
.contact-icon i{font-size:24px;color:var(--kpy-white);} 
.contact-card:hover .contact-icon{transform:scale(1.1) rotate(5deg);background:linear-gradient(135deg,var(--kpy-primary) 0%,#3a6bc0 100%);} 
.contact-details h3{font-size:1.4rem;color:var(--kpy-primary);margin-bottom:8px;transition:var(--transition);} 
.contact-details p{color:var(--kpy-grey);line-height:1.6;transition:var(--transition);} 
.contact-card:hover h3{color:var(--kpy-secondary);} 
.contact-map{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);height:500px;} 
.contact-map:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);} 
.contact-map iframe{width:100%;height:100%;border:none;} 
@media(max-width:992px){.contact-content{gap:30px;}} 
@media(max-width:768px){.contact-section{padding:60px 15px;}.contact-content{grid-template-columns:1fr;gap:40px;}.contact-header h2{font-size:2.2rem;}.contact-card{text-align:center;flex-direction:column;align-items:center;padding:25px;}.contact-map{height:300px;}} 
@media(max-width:480px){.contact-section{padding:40px 10px;}.contact-header h2{font-size:1.8rem;}.contact-card{padding:20px;}.contact-icon{width:50px;height:50px;}.contact-icon i{font-size:20px;}}



/* Impact Section */
.section-header { text-align: center; }


/* Payment Details Section */
.payment-section { background: #f0f7ff; }
.payment-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
.payment-method { background: #fff; border-radius: 8px; padding: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.payment-method h3 { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.payment-method h3 i { margin-right: 10px; color: #4a90e2; }
.payment-details { margin-top: 20px; }
.payment-details p { margin-bottom: 10px; padding: 8px 0; border-bottom: 1px dashed #eee; }
.payment-details strong { color: #2c3e50; }

/* FAQ Section */
.faq { max-width: 800px; margin: 50px auto 0; }
.faq-item { border-bottom: 1px solid #e9ecef; margin-bottom: 15px; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; transition: color 0.3s; }
.faq-question:hover { color: #4a90e2; }
.faq-question h3 { margin: 0; font-size: 1.2rem; }
.faq-toggle { font-size: 1.5rem; font-weight: 300; transition: transform 0.3s; }
.faq-answer { padding: 0 0 20px; display: none; }
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-toggle { transform: rotate(45deg); }

/* Responsive Styles */
@media (max-width: 768px) {
  .header-content { flex-direction: column; text-align: center; }
rem; }
}

/* Volunteer Page Specific Styles */

.kpy-benefit-content { flex: 1; }

.kpy-opportunities-grid { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 30px; margin-top: 50px; }
.kpy-opportunity-card { background: #fff; border-radius: 8px; padding: 30px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; }
.kpy-opportunity-card:hover { transform: translateY(-5px); }
.kpy-opportunity-icon { width: 70px; height: 70px; background: var(--kpy-gray-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 25px; color: var(--kpy-secondary); }
.kpy-opportunity-details { text-align: left; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.kpy-opportunity-details li { margin-bottom: 8px; font-size: 0.9rem; }

.kpy-requirements { max-width: 800px; margin: 50px auto 0; }
.kpy-requirement-item { display: flex; align-items: center; margin-bottom: 30px; padding: 20px; border-radius: 8px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.kpy-requirement-number { flex: 0 0 50px; height: 50px; background: var(--kpy-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; font-weight: bold; font-size: 1.2rem; }
.kpy-requirement-content { flex: 1; }

.kpy-process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin: 50px 0; }
.kpy-process-step { text-align: center; padding: 30px 20px; border-radius: 8px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.kpy-step-number { width: 50px; height: 50px; background: var(--kpy-secondary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: bold; font-size: 1.2rem; }

.kpy-cta-box { background: var(--kpy-primary); color: white; padding: 40px; border-radius: 8px; text-align: center; margin-top: 50px; }
.kpy-cta-box h3 { color: white; }
.kpy-cta-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.kpy-btn { padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; display: inline-block; }

.kpy-faq { max-width: 800px; margin: 50px auto 0; }
.kpy-faq-item { border-bottom: 1px solid #e9ecef; margin-bottom: 15px; }
.kpy-faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; }
.kpy-faq-answer { padding: 0 0 20px; display: none; }
.kpy-faq-item.active .kpy-faq-answer { display: block; }
.kpy-faq-item.active .kpy-faq-toggle { transform: rotate(45deg); }

@media (max-width: 768px) {
  .kpy-benefit-item { flex-direction: column; text-align: center; }
  .kpy-benefit-item:nth-child(even) { flex-direction: column; }
  .kpy-benefit-icon { margin: 0 0 20px; }
  .kpy-requirement-item { flex-direction: column; text-align: center; }
  .kpy-requirement-number { margin: 0 0 15px; }
  .kpy-cta-buttons { flex-direction: column; align-items: center; }
  .kpy-btn { width: 200px; }
}


.kpy-volunteer-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.kpy-benefits-column { display: flex; flex-direction: column; gap: 30px; }
.kpy-benefit-item { display: flex; align-items: flex-start; padding: 25px; border-radius: 8px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.kpy-benefit-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.kpy-benefit-icon { flex: 0 0 70px; height: 70px; background: var(--kpy-gray-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; font-size: 28px; color: var(--kpy-secondary); }
.kpy-benefit-content { flex: 1; }
.kpy-benefit-content h3 { margin-bottom: 10px; color: var(--kpy-primary); font-size: 1.3rem; }
.kpy-benefit-content p { color: var(--kpy-grey); line-height: 1.6; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .kpy-volunteer-benefits-grid { grid-template-columns: 1fr; gap: 25px; }
  .kpy-benefit-item { flex-direction: column; text-align: center; padding: 20px; }
  .kpy-benefit-icon { margin-right: 0; margin-bottom: 15px; }
}

@media (max-width: 480px) {
  .kpy-benefit-item { padding: 15px; }.kpy-opportunities-grid {grid-template-columns: repeat(1, 1fr);
}
  .kpy-benefit-icon { width: 60px; height: 60px; font-size: 24px; }
}


/* Two-Column Layout */
.kpy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; align-items: center; }
.kpy-col { flex: 1; }
.kpy-img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

/* Buttons */
.kpy-btn { padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; display: inline-block; margin-top: 20px; }
.kpy-btn-secondary { background: transparent; color: var(--kpy-primary); border: 2px solid var(--kpy-primary); }
.kpy-btn-secondary:hover { background: var(--kpy-primary); color: white; }

/* Benefits Grid */
.kpy-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px; }
.kpy-benefit-card { background: #fff; border-radius: 8px; padding: 30px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease; }
.kpy-benefit-card:hover { transform: translateY(-5px); }
.kpy-benefit-number { font-size: 2rem; font-weight: 700; color: var(--kpy-secondary); margin-bottom: 15px; }
.kpy-benefit-card h3 { margin-bottom: 15px; color: var(--kpy-primary); }

/* CTA Box */
.kpy-cta-box { background: var(--kpy-primary); color: white; padding: 40px; border-radius: 8px; text-align: center; margin-top: 50px; }
.kpy-cta-box h3 { color: white; }
.kpy-cta-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 30px; }
.kpy-btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* Responsive */
@media (max-width: 768px) {
  .kpy-programs-grid { grid-template-columns: 1fr; }
  .kpy-benefits-grid { grid-template-columns: 1fr; }
  .kpy-cta-buttons { flex-direction: column; align-items: center; }
  .kpy-btn { width: 200px; }
}


.kpy-community-section { padding:0; }
.kpy-community-row { display: flex; flex-wrap: wrap; margin: 0 -15px 40px; }
.kpy-community-card { flex: 0 0 calc(50% - 30px); margin: 0 15px 30px; position: relative; height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: var(--transition); }
.kpy-community-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.kpy-card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: var(--transition); z-index: 1; }
.kpy-community-card:hover .kpy-card-image { transform: scale(1.05); }
.kpy-card-image img { width: 100%; height: 100%; object-fit: cover; }
.kpy-card-title { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(27, 58, 87, 0.9), transparent); color: var(--kpy-white); padding: 20px 30px; z-index: 2; }
.kpy-card-title h3 { font-family: var(--kpy-font-3); font-size: 1.5rem; margin: 0; color: var(--kpy-secondary); }
.kpy-card-content { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(27, 58, 87, 0.95); color: var(--kpy-white); padding: 30px; transform: translateY(100%); transition: var(--transition); z-index: 3; height: 80%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: auto; }
.kpy-community-card:hover .kpy-card-content { transform: translateY(0); }
.kpy-card-content p { margin-bottom: 15px; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 992px) { .kpy-community-card { flex: 0 0 100%; margin-bottom: 30px; } .kpy-impact-stat { flex: 0 0 45%; } }
@media (max-width: 768px) { .kpy-impact-stat { flex: 0 0 100%; } .kpy-card-title h3 { font-size: 1.3rem; } }


.kpy-areas-section { padding: 0; }
.kpy-areas-row { display: flex; flex-wrap: wrap; margin: 0 -15px 40px; }
.kpy-areas-card { flex: 0 0 calc(50% - 30px); margin: 0 15px 30px; position: relative; height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: var(--transition); }
.kpy-areas-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.kpy-card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: var(--transition); z-index: 1; }
.kpy-areas-card:hover .kpy-card-image { transform: scale(1.05); }
.kpy-card-image img { width: 100%; height: 100%; object-fit: cover; }
.kpy-card-title { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(27, 58, 87, 0.9), transparent); color: var(--kpy-white); padding: 20px 30px; z-index: 2; }
.kpy-card-title h3 { font-family: var(--kpy-font-3); font-size: 1.5rem; margin: 0; color: var(--kpy-secondary); }
.kpy-card-content { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(27, 58, 87, 0.95); color: var(--kpy-white); padding: 30px; transform: translateY(100%); transition: var(--transition); z-index: 3; height: 80%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: auto; }
.kpy-areas-card:hover .kpy-card-content { transform: translateY(0); }
.kpy-card-content p { margin-bottom: 15px; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 992px) { .kpy-areas-card { flex: 0 0 100%; margin-bottom: 30px; } .kpy-team-member { flex: 0 0 calc(50% - 20px); } .kpy-impact-stat { flex: 0 0 45%; } }
@media (max-width: 768px) { .kpy-team-member { flex: 0 0 100%; } .kpy-impact-stat { flex: 0 0 100%; } .kpy-card-title h3 { font-size: 1.3rem; } }



.kpy-community-section { padding:0; }
.kpy-community-row { display: flex; flex-wrap: wrap; margin: 0 -15px 40px; }
.kpy-community-card { flex: 0 0 calc(50% - 30px); margin: 0 15px 30px; position: relative; height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: var(--transition); }
.kpy-community-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.kpy-card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: var(--transition); z-index: 1; }
.kpy-community-card:hover .kpy-card-image { transform: scale(1.05); }
.kpy-card-image img { width: 100%; height: 100%; object-fit: cover; }
.kpy-card-title { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(27, 58, 87, 0.9), transparent); color: var(--kpy-white); padding: 20px 30px; z-index: 2; }
.kpy-card-title h3 { font-family: var(--kpy-font-3); font-size: 1.5rem; margin: 0; color: var(--kpy-secondary); }
.kpy-card-content { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(27, 58, 87, 0.95); color: var(--kpy-white); padding: 30px; transform: translateY(100%); transition: var(--transition); z-index: 3; height: 80%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: auto; }
.kpy-community-card:hover .kpy-card-content { transform: translateY(0); }
.kpy-card-content p { margin-bottom: 15px; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 992px) { .kpy-community-card { flex: 0 0 100%; margin-bottom: 30px; } .kpy-impact-stat { flex: 0 0 45%; } }
@media (max-width: 768px) { .kpy-impact-stat { flex: 0 0 100%; } .kpy-card-title h3 { font-size: 1.3rem; } }


.kpy-areas-section { padding: 0; }
.kpy-areas-row { display: flex; flex-wrap: wrap; margin: 0 -15px 40px; }
.kpy-areas-card { flex: 0 0 calc(50% - 30px); margin: 0 15px 30px; position: relative; height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: var(--transition); }
.kpy-areas-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.kpy-card-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: var(--transition); z-index: 1; }
.kpy-areas-card:hover .kpy-card-image { transform: scale(1.05); }
.kpy-card-image img { width: 100%; height: 100%; object-fit: cover; }
.kpy-card-title { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(27, 58, 87, 0.9), transparent); color: var(--kpy-white); padding: 20px 30px; z-index: 2; }
.kpy-card-title h3 { font-family: var(--kpy-font-3); font-size: 1.5rem; margin: 0; color: var(--kpy-secondary); }
.kpy-card-content { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(27, 58, 87, 0.95); color: var(--kpy-white); padding: 30px; transform: translateY(100%); transition: var(--transition); z-index: 3; height: 80%; display: flex; flex-direction: column; justify-content: flex-end; overflow-y: auto; }
.kpy-areas-card:hover .kpy-card-content { transform: translateY(0); }
.kpy-card-content p { margin-bottom: 15px; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 992px) { .kpy-areas-card { flex: 0 0 100%; margin-bottom: 30px; } .kpy-team-member { flex: 0 0 calc(50% - 20px); } .kpy-impact-stat { flex: 0 0 45%; } .kpy-community-row {
     display: grid; }.kpy-areas-row {
    display: grid
;}}
@media (max-width: 768px) { .kpy-team-member { flex: 0 0 100%; } .kpy-impact-stat { flex: 0 0 100%; } .kpy-card-title h3 { font-size: 1.3rem; } }