/* Overall section spacing */
/* Container width and layout */
.about-container {
max-width: 1200px; /* wider to feel less cramped */
width: 100%;
background: transparent;
display: grid;
grid-template-columns: 1.1fr 0.9fr; /* slightly wider left column */
gap: 56px; /* larger gap between columns */
align-items: start;
padding: 12px; /* small internal padding */
align-items: center;
justify-self: center;

}
html{
    scroll-behavior: smooth;
}


@media (max-width: 980px) {
.about-container { grid-template-columns: 1fr; gap: 36px; padding: 0; }
.about-section { padding: 80px 20px; }
}


/* Left column (main text) */
.about-text { padding-right: 8px; }


.tag {
display: inline-block;
padding: 8px 14px;
background: rgba(11,114,133,0.08);
color: teal;
font-weight: 700;
font-size: 14px;
border-radius: 999px;
margin-bottom: 18px;
letter-spacing: 0.2px;
}


.about-text h2 {
font-size: 40px; /* larger heading */
margin: 6px 0 18px 0;
color: teal;
line-height: 1.05;
font-weight: 800;
}


.about-text p {
font-size: 18px; /* larger base text */
color: teal;
line-height: 1.9; /* more generous leading */
margin: 0 0 18px 0;
max-width: 680px;
}


.mission h3 {
font-size: 20px;
margin-top: 14px;
color: teal;
font-weight: 700;
}
.mission p { font-size: 16px; color: teal; line-height: 1.8; margin: 8px 0 0 0; }


/* Right column (details) */
.about-details { padding-left: 8px; }


.about-details .timeline { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }


.timeline .event { display: flex; align-items: flex-start; gap: 16px; }
.timeline .dot { width: 14px; height: 14px; background: lime; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; }


.timeline .info strong { display: block; font-size: 15px; color: #0f172a; font-weight: 700; }
.timeline .info p { color: teal; font-size: 15px; margin: 6px 0 0 0; line-height: 1.6; }


.values h4 { font-size: 18px; margin-bottom: 12px; color: #0f172a; }
.values ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.values li { margin: 0; font-size: 15px; color: #475569; line-height: 1.6; }
.values li strong { color: #0b7285; font-weight: 700; }


/* Optional subtle card feel for larger displays */
@media (min-width: 1100px) {
.about-container { background: rgba(11,114,133,0.02); border-radius: 14px; padding: 28px; }
}