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

body{
font-family: Arial, Helvetica, sans-serif;
background:#f4f4f2;
margin:0;
color:#333;
}


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

.site-header{
background:#ffffff;
border-bottom:1px solid #e0e0e0;
position:sticky;
top:0;
z-index:1000;
}

.header-inner{
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
}

.logo-area{
display:flex;
align-items:center;
gap:12px;
}

.logo-small{
height:34px;
}

.project-title{
font-size:16px;
font-weight:600;
color:#333;
}


/* ===================================
NAVIGATION
=================================== */

.header-nav a{
text-decoration:none;
color:#333;
margin-left:20px;
font-size:14px;
font-weight:500;
}

.header-nav a:hover{
color:#2a6ebb;
}


/* ===================================
ABOUT PAGE CONTAINER
=================================== */

.about-container{
max-width:900px;
margin:60px auto;
padding:30px 40px;
background:white;
border-radius:8px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.about-container h1{
font-size:28px;
margin-bottom:6px;
}

.about-subtitle{
color:#666;
font-size:16px;
margin-bottom:30px;
}

.about-container h2{
margin-top:40px;
font-size:22px;
}

.about-container p{
line-height:1.7;
margin-bottom:18px;
}


/* ===================================
FIGURE STYLING
=================================== */

.about-figure{
width:100%;
margin:35px 0;
border-radius:6px;
box-shadow:0 5px 18px rgba(0,0,0,0.15);
}


/* ===================================
HIGHLIGHT BOX
=================================== */

.highlight-box{
background:#eef3f6;
padding:20px;
border-radius:6px;
margin-top:25px;
}


/* ===================================
IMPACT GRID
=================================== */

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

.impact-card{
background:#f7f7f7;
padding:18px;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.impact-card h3{
margin-top:0;
font-size:17px;
}


/* ===================================
RESPONSIVE
=================================== */

@media (max-width:768px){

.header-inner{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.header-nav{
display:flex;
flex-wrap:wrap;
}

.header-nav a{
margin:6px 10px 0 0;
}

.about-container{
margin:30px 15px;
padding:25px;
}

}