/* =========================================================
ABOUT PAGE ONLY
========================================================= */

/* =========================================================
MAIN ABOUT CONTAINER
Same width system as the Home page
========================================================= */

.about-content {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
padding: 90px 0 100px;
overflow: hidden;
}

.about-content > section {
width: 100%;
min-width: 0;
}

/* =========================================================
INTRO
========================================================= */

.about-content .intro-section {
width: 100%;


display: grid;
grid-template-columns: 180px minmax(0, 1fr);

column-gap: 70px;

align-items: start;

padding: 0 0 72px;

border-bottom: 1px solid var(--border);


}

.about-content .section-label {
min-width: 0;
padding-top: 5px;
}

.about-content .section-label span {
display: block;


margin-bottom: 8px;

color: var(--green-700);

font-family: Arial, sans-serif;

font-size: 11px;
font-weight: 800;

letter-spacing: 0.18em;
line-height: 1.5;

text-transform: uppercase;


}

.about-content .section-label p {
margin: 0;


color: var(--text-light);

font-family: Arial, sans-serif;

font-size: 12px;

line-height: 1.6;


}

.about-content .intro-text {
min-width: 0;
width: 100%;
max-width: 780px;
}

.about-content .intro-text h2 {
margin: 0 0 20px;


color: var(--green-900);

font-size: clamp(28px, 3vw, 38px);

font-weight: 700;

line-height: 1.25;

letter-spacing: -0.025em;


}

.about-content .intro-text p {
max-width: 760px;


margin: 0 0 16px;

color: var(--text-soft);

font-size: 16px;

line-height: 1.95;


}

.about-content .intro-text p:last-child {
margin-bottom: 0;
}

/* =========================================================
MISSION / VISION
========================================================= */

.about-content .purpose-grid {
width: 100%;


display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 24px;

padding: 72px 0;


}

.about-content .purpose-card {
position: relative;


min-width: 0;
min-height: 310px;

padding: 38px;

overflow: hidden;

border: 1px solid var(--border);

border-radius: var(--radius);

background: var(--card);

box-shadow: var(--shadow);

transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);


}

.about-content .purpose-card:hover {
transform: translateY(-2px);


border-color: rgba(22, 101, 52, 0.14);

box-shadow: var(--shadow-hover);

}

.about-content .purpose-card::after {
content: "";


position: absolute;

width: 190px;
height: 190px;

right: -90px;
bottom: -105px;

border:
    1px solid
    rgba(22, 101, 52, 0.08);

border-radius: 50%;

pointer-events: none;


}

.about-content .mission-card {
background:
linear-gradient(
145deg,
var(--card) 0%,
rgba(244, 247, 244, 0.85) 100%
);
}

.about-content .vision-card {
background:
linear-gradient(
145deg,
rgba(250, 251, 249, 0.95) 0%,
var(--card) 100%
);
}

.about-content .card-number {
margin-bottom: 10px;


color: var(--green-700);

font-family: Arial, sans-serif;

font-size: 12px;
font-weight: 800;

letter-spacing: 0.15em;


}

.about-content .card-label {
margin-bottom: 22px;


color: var(--text-light);

font-family: Arial, sans-serif;

font-size: 11px;
font-weight: 800;

letter-spacing: 0.17em;

text-transform: uppercase;


}

.about-content .purpose-card h3 {
margin: 0 0 14px;


color: var(--green-900);

font-size: 29px;

line-height: 1.2;


}

.about-content .purpose-card p {
max-width: 600px;


margin: 0;

color: var(--text-soft);

font-size: 15px;

line-height: 1.9;


}

/* =========================================================
PURPOSE
========================================================= */

.about-content .purpose-section {
width: 100%;


padding: 0 0 74px;

border-bottom: 1px solid var(--border);


}

.about-content .purpose-heading {
width: 100%;
max-width: 760px;


margin: 0 0 25px;


}

.about-content .purpose-heading .eyebrow {
display: block;


margin-bottom: 10px;


}

.about-content .purpose-heading h2 {
margin: 0;


color: var(--green-900);

font-size: clamp(29px, 3.2vw, 40px);

line-height: 1.25;

letter-spacing: -0.025em;


}

.about-content .purpose-body {
width: min(780px, 100%);


margin-left: auto;
margin-right: 0;


}

.about-content .purpose-body p {
margin: 0 0 17px;


color: var(--text-soft);

font-size: 16px;

line-height: 1.95;


}

.about-content .purpose-body p:last-child {
margin-bottom: 0;
}

/* =========================================================
PRINCIPLES
Important:
Override Home page .section-heading ONLY inside About page.
========================================================= */

.about-content .principles-section {
width: 100%;


padding: 74px 0;

border-bottom: 1px solid var(--border);


}

.about-content .principles-section .section-heading {
display: block;


width: 100%;
max-width: 760px;

margin: 0 0 38px;
padding: 0;

text-align: left;

align-items: initial;
justify-content: initial;


}

.about-content .principles-section .section-heading .eyebrow {
display: block;


margin-bottom: 10px;


}

.about-content .principles-section .section-heading h2 {
margin: 0 0 14px;


color: var(--green-900);

font-size: clamp(29px, 3.2vw, 40px);

line-height: 1.25;

letter-spacing: -0.025em;


}

.about-content .principles-section .section-heading > p {
width: 100%;
max-width: 700px;


margin: 0;

color: var(--text-soft);

font-size: 16px;

line-height: 1.9;


}

.about-content .principles-grid {
width: 100%;


display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 0;

border-top: 1px solid var(--border);
border-left: 1px solid var(--border);


}

.about-content .principle {
min-width: 0;
min-height: 250px;


padding: 30px 28px;

border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);

background: var(--card);


}

.about-content .principle-number {
margin-bottom: 24px;


color: var(--green-700);

font-family: Arial, sans-serif;

font-size: 12px;
font-weight: 800;

letter-spacing: 0.15em;


}

.about-content .principle h3 {
margin: 0 0 10px;


color: var(--green-900);

font-size: 22px;

line-height: 1.3;


}

.about-content .principle p {
margin: 0;


color: var(--text-soft);

font-size: 14px;

line-height: 1.85;


}

/* =========================================================
DATA / SOURCES
========================================================= */

.about-content .data-section {
position: relative;


width: 100%;

overflow: hidden;

margin-top: 74px;

padding: 65px 55px;

border-radius: var(--radius);

background:
    linear-gradient(
        135deg,
        var(--green-950) 0%,
        var(--green-900) 100%
    );

text-align: center;

color: var(--white);


}

.about-content .data-section::before,
.about-content .data-section::after {
content: "";


position: absolute;

border:
    1px solid
    rgba(255, 255, 255, 0.07);

border-radius: 50%;

pointer-events: none;


}

.about-content .data-section::before {
width: 300px;
height: 300px;


left: -160px;
top: -180px;


}

.about-content .data-section::after {
width: 380px;
height: 380px;


right: -210px;
bottom: -230px;


}

.about-content .data-symbol {
position: relative;


z-index: 1;

width: 52px;
height: 52px;

margin: 0 auto 18px;

display: grid;

place-items: center;

border:
    1px solid
    rgba(255, 255, 255, 0.18);

border-radius: 50%;

color:
    rgba(255, 255, 255, 0.85);

font-size: 22px;


}

.about-content .data-section h2 {
position: relative;


z-index: 1;

width: 100%;
max-width: 700px;

margin: 0 auto 15px;

color: var(--white);

font-size: clamp(27px, 3vw, 38px);

line-height: 1.25;

}

.about-content .data-section p {
position: relative;


z-index: 1;

width: 100%;
max-width: 700px;

margin: 0 auto;

color:
    rgba(255, 255, 255, 0.7);

font-size: 15px;

line-height: 1.9;


}

/* =========================================================
CLOSING
========================================================= */

.about-content .closing-section {
width: 100%;


padding: 78px 0 10px;

text-align: center;


}

.about-content .closing-line {
width: 70px;
height: 1px;


margin: 0 auto 30px;

background: var(--gold);


}

.about-content .closing-arabic {
margin-bottom: 18px;


direction: rtl;

color: var(--green-800);

font-size: 27px;

line-height: 1.9;


}

.about-content .closing-text {
width: 100%;
max-width: 680px;


margin: 0 auto;

color: var(--text-soft);

font-size: 15px;

line-height: 1.9;


}

/* =========================================================
ENGLISH TYPOGRAPHY
========================================================= */

html[lang="en"] .about-content {
font-family:
Georgia,
"Times New Roman",
serif;
}

html[lang="en"] .about-content .section-label span,
html[lang="en"] .about-content .section-label p,
html[lang="en"] .about-content .card-number,
html[lang="en"] .about-content .card-label,
html[lang="en"] .about-content .principle-number,
html[lang="en"] .about-content .eyebrow {
font-family: Arial, sans-serif;
}

/* =========================================================
BENGALI TYPOGRAPHY
========================================================= */

html[lang="bn"] .about-content {
font-family:
"Noto Serif Bengali",
"Noto Sans Bengali",
"SolaimanLipi",
Georgia,
serif;
}

html[lang="bn"] .about-content .section-label span,
html[lang="bn"] .about-content .section-label p,
html[lang="bn"] .about-content .card-number,
html[lang="bn"] .about-content .card-label,
html[lang="bn"] .about-content .principle-number,
html[lang="bn"] .about-content .eyebrow {
font-family:
"Noto Sans Bengali",
"SolaimanLipi",
Arial,
sans-serif;
}

html[lang="bn"] .about-content .intro-text p,
html[lang="bn"] .about-content .purpose-body p,
html[lang="bn"] .about-content .principles-section .section-heading > p,
html[lang="bn"] .about-content .principle p,
html[lang="bn"] .about-content .data-section p,
html[lang="bn"] .about-content .closing-text {
line-height: 2.05;
}

/* =========================================================
DARK MODE
========================================================= */

body.dark .about-content .intro-text h2,
body.dark .about-content .purpose-heading h2,
body.dark .about-content .principles-section .section-heading h2,
body.dark .about-content .purpose-card h3,
body.dark .about-content .principle h3 {
color: #dce9df;
}

body.dark .about-content .purpose-card {
background: var(--card);


border-color: var(--border);


}

body.dark .about-content .mission-card,
body.dark .about-content .vision-card {
background: var(--card);
}

body.dark .about-content .principle {
background: var(--card);


border-color: var(--border);


}

body.dark .about-content .closing-arabic {
color: #a9d0b5;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {


.about-content {
    width: min(100% - 40px, 1000px);

    padding-top: 65px;
}

.about-content .intro-section {
    grid-template-columns: 150px minmax(0, 1fr);

    column-gap: 45px;
}

.about-content .purpose-grid {
    gap: 18px;
}

.about-content .purpose-card {
    padding: 30px;
}

.about-content .principles-grid {
    grid-template-columns: 1fr;
}

.about-content .principle {
    min-height: auto;
}

.about-content .purpose-body {
    width: 100%;
    max-width: 780px;

    margin-left: 0;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {


.about-content {
    width: calc(100% - 30px);

    padding: 60px 0 70px;
}

.about-content .intro-section {
    display: block;

    padding-bottom: 50px;
}

.about-content .section-label {
    margin-bottom: 22px;

    padding-top: 0;
}

.about-content .intro-text {
    width: 100%;
    max-width: none;
}

.about-content .intro-text h2 {
    font-size: 29px;
}

.about-content .intro-text p,
.about-content .purpose-body p,
.about-content .principles-section .section-heading > p {
    font-size: 15px;

    line-height: 1.9;
}

.about-content .purpose-grid {
    grid-template-columns: 1fr;

    gap: 16px;

    padding: 50px 0;
}

.about-content .purpose-card {
    min-height: auto;

    padding: 30px 26px;
}

.about-content .purpose-card h3 {
    font-size: 26px;
}

.about-content .purpose-section {
    padding-bottom: 52px;
}

.about-content .principles-section {
    padding: 52px 0;
}

.about-content .principles-section .section-heading {
    display: block;

    width: 100%;

    margin-bottom: 30px;

    text-align: left;
}

.about-content .principles-section .section-heading h2,
.about-content .purpose-heading h2 {
    font-size: 30px;
}

.about-content .principles-grid {
    grid-template-columns: 1fr;
}

.about-content .principle {
    min-height: auto;

    padding: 27px 24px;
}

.about-content .principle-number {
    margin-bottom: 18px;
}

.about-content .data-section {
    margin-top: 52px;

    padding: 48px 24px;

    border-radius: 18px;
}

.about-content .data-section h2 {
    font-size: 29px;
}

.about-content .closing-section {
    padding-top: 58px;
}

.about-content .closing-arabic {
    font-size: 24px;
}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 400px) {


.about-content {
    width: calc(100% - 24px);
}

.about-content .purpose-card {
    padding: 26px 21px;
}

.about-content .purpose-card h3 {
    font-size: 24px;
}

.about-content .principle {
    padding: 24px 20px;
}

.about-content .data-section {
    padding-inline: 20px;
}
}

/* =========================================================
   ABOUT PAGE — HEADER LANGUAGE TOGGLE
   Exact alignment fix
   ========================================================= */

.header .header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 36px;
    padding: 0 13px;

    line-height: 1;
    text-align: center;
    white-space: nowrap;

    font-family:
        "Noto Sans Bengali",
        "Noto Sans",
        Arial,
        sans-serif;
}

/* Bengali font needs a tiny optical correction */
html[lang="bn"] .header .header-button {
    padding-top: 1px;
}