/* ================= ROOT BRAND ================= */

:root{
--primary:#b6e896;
--primary-dark:#9edb73;
--primary-soft:#eefbe4;
--text-dark:#1f2a1f;
--text-light:#555;
}

/* ================= GLOBAL ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
color:var(--text-dark);
background:#f9faf8;
line-height:1.7;
scroll-behavior:smooth;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* ================= SECTION BASE ================= */

.section{
padding:140px 0;
text-align:center;
position:relative;
}

.white-section{
background:#ffffff;
}

.green-section{
background:var(--primary);
color:var(--text-dark);
}

/* ================= TITLES ================= */

.section-title{
font-size:48px;
font-weight:600;
margin-bottom:30px;
letter-spacing:-1px;
position:relative;
}

.section-title::after{
content:"";
width:80px;
height:4px;
background:var(--primary-dark);
display:block;
margin:20px auto 0;
border-radius:5px;
}

.section-text{
max-width:850px;
margin:0 auto 90px auto;
font-size:18px;
color:var(--text-light);
}

/* ================= HEADER ================= */

.header{
position:fixed;
width:100%;
background:rgba(255,255,255,0.85);
backdrop-filter:blur(12px);
padding:18px 80px;
z-index:1000;
box-shadow:0 4px 20px rgba(0,0,0,0.05);
transition:0.3s ease;
}

.nav-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:75px;
}

.nav ul{
display:flex;
gap:35px;
list-style:none;
}

.nav a{
text-decoration:none;
color:var(--text-dark);
font-weight:500;
transition:0.3s;
}

.nav a:hover,
.nav a.active{
color:var(--primary-dark);
}

/* ================= HERO ================= */

.hero{
height:100vh;
background:url("../assets/images/hero.png") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
position:relative;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.35);
}

.hero h1{
font-size:56px;
font-weight:300;
position:relative;
z-index:2;
letter-spacing:1px;
}

.hero p{
margin-top:25px;
font-size:20px;
position:relative;
z-index:2;
}

/* ================= STORY ================= */

.story-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
margin-top:40px;
}

.story-card{
background:#ffffff;
padding:50px;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,0.05);
transition:0.4s ease;
border:2px solid transparent;
}

.story-card:hover{
transform:translateY(-10px);
box-shadow:
0 25px 80px rgba(0,0,0,0.08),
0 0 0 4px rgba(182,232,150,0.4),
0 0 30px rgba(182,232,150,0.6);
border:2px solid var(--primary);
}

.story-card h3{
font-size:22px;
margin-bottom:18px;
font-weight:600;
}

.story-card p{
font-size:16px;
color:var(--text-light);
}

/* ================= STRENGTHS ================= */

/* ================= STRENGTHS UPDATED ================= */

.strengths-section{
background:var(--primary);
padding:160px 0;
}

.strengths-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:50px;
margin-top:70px;
}

.strength-item{
background:#ffffff;
padding:60px 40px;
border-radius:24px;
text-align:center;
transition:0.4s ease;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
position:relative;
}

.strength-item img{
width:80px;
margin-bottom:25px;
filter:brightness(0);
}

/* TITLE */
.strength-item h3{
font-size:18px;
font-weight:600;
margin-bottom:15px;
color:#1f2a1f;
}

/* DESCRIPTION */
.strength-desc{
font-size:14px;
color:#555;
line-height:1.6;
}

/* HOVER */
.strength-item:hover{
transform:translateY(-12px);
box-shadow:
0 30px 80px rgba(0,0,0,0.12),
0 0 0 4px rgba(182,232,150,0.5);
}
/* SUBTLE INNER TOP BORDER */
.strength-item::after{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:60px;
height:5px;
background:var(--primary-dark);
border-radius:10px;
}
/* ================= SERVICES ================= */

.services-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:50px;
margin-top:70px;
}

.service-card{
background:#ffffff;
border-radius:24px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,0.06);
transition:0.4s ease;
cursor:pointer;
position:relative;
}

.service-card:hover{
transform:translateY(-12px);
box-shadow:
0 30px 90px rgba(0,0,0,0.1),
0 0 0 4px rgba(182,232,150,0.4),
0 0 35px rgba(182,232,150,0.6);
}

/* IMAGE */

.service-card img{
width:100%;
height:260px;
object-fit:cover;
transition:0.6s;
}

.service-card:hover img{
transform:scale(1.08);
}

/* CONTENT */

.service-content{
padding:35px;
}

.service-content h3{
font-size:22px;
margin-bottom:10px;
}

.service-content p{
font-size:15px;
color:var(--text-light);
}
/* ================= MODAL ================= */

.service-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
z-index:2000;
}

.service-modal.active{
display:flex;
}

.modal-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(6px);
}

.modal-content{
position:relative;
background:#ffffff;
width:90%;
max-width:1100px;
border-radius:24px;
overflow:hidden;
box-shadow:0 40px 120px rgba(0,0,0,0.3);
animation:modalFade 0.4s ease;
}

@keyframes modalFade{
from{opacity:0; transform:scale(0.92);}
to{opacity:1; transform:scale(1);}
}

.modal-close{
position:absolute;
top:20px;
right:25px;
background:none;
border:none;
font-size:32px;
cursor:pointer;
color:#333;
transition:0.3s;
}

.modal-close:hover{
color:#b6e896;
}

.modal-body{
display:flex;
gap:50px;
padding:50px;
}

.modal-image img{
width:450px;
height:350px;
object-fit:cover;
border-radius:18px;
}

.modal-text{
flex:1;
overflow-y:auto;
max-height:400px;
padding-right:10px;
}

.modal-text h2{
margin-bottom:20px;
font-size:28px;
}

.modal-text p{
line-height:1.7;
color:#555;
}

/* RESPONSIVE */

@media(max-width:900px){
.modal-body{
flex-direction:column;
}
.modal-image img{
width:100%;
height:250px;
}
}
/* ================= TEAM ENHANCED ================= */

/* ================= TEAM PREMIUM ================= */

.team-section{
background:linear-gradient(180deg,#f7fdf2 0%, #b6e896 100%);
padding:160px 0;
}

.section-subtitle{
max-width:900px;
margin:25px auto 100px auto;
font-size:18px;
line-height:1.8;
color:#2f3e2f;
text-align:center;
}

/* GRID */
.team-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
}

/* CARD */
.team-card{
background:#ffffff;
padding:60px 45px;
border-radius:30px;
box-shadow:0 25px 60px rgba(0,0,0,0.08);
transition:0.5s ease;
text-align:center;
position:relative;
overflow:hidden;
}

/* HOVER EFFECT */
.team-card:hover{
transform:translateY(-15px);
box-shadow:
0 35px 90px rgba(0,0,0,0.15),
0 0 0 4px rgba(182,232,150,0.5);
}

/* IMAGE */
.team-card img{
width:200px;
height:200px;
border-radius:50%;
object-fit:cover;
margin-bottom:30px;
border:10px solid #ffffff;
box-shadow:0 20px 50px rgba(0,0,0,0.15);
transition:0.4s ease;
}

.team-card:hover img{
transform:scale(1.05);
}

/* NAME */
.team-card h3{
font-size:22px;
font-weight:600;
margin-bottom:8px;
color:#1f2a1f;
}

/* ROLE */
.team-card span{
display:block;
font-size:15px;
font-weight:500;
color:#7a7a7a;
margin-bottom:20px;
letter-spacing:0.5px;
}

/* DESCRIPTION */
.team-desc{
font-size:15px;
line-height:1.7;
color:#444;
margin-bottom:15px;
}
/* ================= CONTACT PREMIUM ================= */

.contact-section{
background:#ffffff;
padding:160px 0;
}

.contact-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
margin-top:80px;
}

.contact-card{
background:#ffffff;
padding:60px 40px;
border-radius:30px;
text-align:center;
box-shadow:0 25px 60px rgba(0,0,0,0.08);
transition:0.4s ease;
border:2px solid transparent;
}

.contact-card:hover{
transform:translateY(-12px);
box-shadow:
0 35px 90px rgba(0,0,0,0.15),
0 0 0 4px rgba(182,232,150,0.5);
border:2px solid #b6e896;
}

/* ICON CIRCLE */
.contact-icon{
width:95px;
height:95px;
margin:0 auto 30px auto;
background:#b6e896;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
color:#1f2a1f;
transition:0.4s ease;
}

/* ICON HOVER */
.contact-card:hover .contact-icon{
background:#1f2a1f;
color:#ffffff;
transform:scale(1.1);
}

.contact-card h3{
font-size:20px;
margin-bottom:15px;
color:#1f2a1f;
}

.contact-card p,
.contact-card a{
font-size:16px;
color:#444;
text-decoration:none;
transition:0.3s;
}

.contact-card a:hover{
color:#4a7d2a;
}

/* RESPONSIVE */
@media(max-width:1000px){
.contact-grid{
grid-template-columns:1fr;
}
}
/* ================= ULTRA PREMIUM FOOTER ================= */

.footer{
background:linear-gradient(90deg,#2e5e2e 0%, #3f8a3f 100%);
color:#ffffff;
padding:45px 0;
margin-top:120px;
position:relative;
}

/* Soft top glow line */
.footer::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,#b6e896,#ffffff,#b6e896);
opacity:0.4;
}

/* GRID */
.footer-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:center;
}

/* LEFT LINKS */
.footer-left{
display:flex;
gap:35px;
}

.footer-left a{
color:#b6e896;
text-decoration:none;
font-size:14px;
position:relative;
transition:0.3s;
}

/* Animated underline */
.footer-left a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0%;
height:2px;
background:#ffffff;
transition:0.3s;
}

.footer-left a:hover{
color:#ffffff;
}

.footer-left a:hover::after{
width:100%;
}

/* CENTER TEXT */
.footer-center{
text-align:center;
font-size:14px;
opacity:0.85;
letter-spacing:0.5px;
}

/* RIGHT */
.footer-right{
text-align:right;
font-size:14px;
color:#b6e896;
font-weight:500;
}

/* RESPONSIVE */
@media(max-width:900px){
.footer-grid{
grid-template-columns:1fr;
gap:20px;
text-align:center;
}

.footer-left{
justify-content:center;
}

.footer-right{
text-align:center;
}
}
/* ================= RESPONSIVE ================= */

@media(max-width:1000px){

.story-grid,
.services-grid,
.team-grid,
.contact-grid{
grid-template-columns:1fr;
}

.strengths-grid{
grid-template-columns:1fr 1fr;
}

.hero h1{
font-size:40px;
}
}