:root{
--primary:#2ECFD0;
--primary-dark:#19B8BA;
--dark:#16324F;
--text:#374151;
--light:#F8FCFC;
--white:#FFFFFF;
--shadow:0 12px 30px rgba(0,0,0,.08);
--radius:18px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--white);
color:var(--text);
line-height:1.8;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

section{
padding:100px 8%;
}

/* Navigation */

.header{
position:fixed;
top:0;
left:0;
width:100%;
background:white;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.navbar{
max-width:1200px;
margin:auto;
padding:20px 10px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:1.4rem;
font-weight:700;
color:var(--dark);
font-family:'Poppins',sans-serif;
}

.nav-links{
display:flex;
gap:30px;
list-style:none;
}

.nav-links a{
color:var(--text);
font-weight:500;
}

.nav-links a:hover{
color:var(--primary);
}

/* Hero */

#hero{
min-height:100vh;
display:flex;
align-items:center;
background:linear-gradient(
180deg,
#ffffff,
#f8fcfc
);
}

.hero-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:80px;
align-items:center;
}

.executive-label{
display:inline-block;
padding:10px 18px;
background:#DFFAFB;
color:var(--primary-dark);
border-radius:50px;
font-size:.9rem;
font-weight:600;
margin-bottom:25px;
}

.hero-content p{
max-width:800px;
margin:0 auto 40px auto;
text-align:center;
line-height:1.8;
}

.hero-content p{
font-size:1.15rem;
max-width:650px;
margin-bottom:35px;
}

.hero-image{
display:flex;
justify-content:center;
}

.hero-image img{

width:100%;

max-width:520px;

min-width:420px;

border-radius:24px;

box-shadow:var(--shadow);

}


.hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn-primary{
background:var(--primary);
color:white;
padding:15px 30px;
border-radius:10px;
font-weight:600;
}

.btn-secondary{
background:var(--dark);
color:white;
padding:15px 30px;
border-radius:10px;
font-weight:600;
}

/* Section Titles */

h2{
text-align:center;
font-size:2.8rem;
margin-bottom:60px;
font-family:'Poppins';
color:var(--dark);
}

/* Footer */

footer{
background:var(--dark);
color:white;
padding:60px 20px;
text-align:center;
}

/* Mobile */

@media(max-width:768px){
}
.hero-container{
grid-template-columns:1fr;
text-align:center;
}

.hero-content h1{
font-size:2.5rem;
}

.hero-buttons{
justify-content:center;
}

.nav-links{
display:none;
}

h2{
font-size:2rem;
}
.stats-grid{

max-width:1200px;

margin:60px auto 0;

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

}


.stat-card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

text-align:center;

}

.stat-card h3{

font-size:2.5rem;

color:#2ECFD0;

margin-bottom:10px;

}

/* ===================================
   Biography Section
=================================== */

#biography{

background:#F8FCFC;

padding:120px 8%;

}

.biography-content{

max-width:950px;

margin:auto;

}

.biography-content p{
font-size:1.15rem;
line-height:2;
margin-bottom:35px;
}


#biography h2{

margin-bottom:50px;

}
/* ===================================
   Impact Dashboard
=================================== */

#impact{

background:white;

padding:120px 8%;

}

.impact-grid{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}


.impact-card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.3s;

}

.impact-card:hover{

transform:translateY(-8px);

}

.impact-card h3{

color:var(--dark);

margin-bottom:20px;

font-size:1.4rem;

}

.impact-card ul{

padding-left:20px;

line-height:2;

}

/* ===================================
   Impact Dashboard
=================================== */

#impact{

background:white;

padding:120px 8%;

}

.impact-grid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:30px;

}

.impact-card{

background:white;

padding:35px;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.impact-card h3{

margin-bottom:20px;

color:#16324F;

}

.impact-card ul{

padding-left:20px;

line-height:2;

}
body{
background:#2ECFD0 !important;
}
/* ===================================
   Leadership Philosophy
=================================== */

#philosophy{

background:#F8FCFC;

padding:120px 8%;

}

.philosophy-box{

max-width:900px;

margin:auto;

background:white;

padding:60px;

border-radius:20px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

text-align:center;

}

.philosophy-box p{

font-size:1.25rem;

line-height:2;

}

.signature{

margin-top:30px;

font-weight:700;

color:var(--dark);

}
/* ===================================
   Executive Documents
=================================== */

#documents{

background:white;

padding:120px 8%;

}

.documents-grid{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

}

.document-card{

background:#F8FCFC;

padding:40px;

border-radius:20px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

text-align:center;

}

.document-card h3{

margin-bottom:20px;

color:var(--dark);

}

.document-card p{

margin-bottom:30px;

line-height:1.8;

}
/* ===================================
   Contact Section
=================================== */

#contact{

background:white;

padding:120px 8%;

}

.contact-card{

max-width:800px;

margin:auto;

padding:50px;

background:#F8FCFC;

border-radius:20px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

text-align:center;

}

.contact-card p{

margin-bottom:20px;

font-size:1.1rem;

}

.contact-card a{

color:var(--dark);

font-weight:600;

text-decoration:none;

}

.contact-card a:hover{

color:#16C7E8;

}


footer{

background:#16324F;

color:white;

text-align:center;

padding:30px;

margin-top:80px;

}

footer p{

margin:5px 0;

}