/* ===================================================== */
/* ABOUT PAGE PREMIUM STYLE */
/* ===================================================== */

.about-page-container{
background:#f9fafb;
}

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

.about-hero{

padding:140px 20px 110px;

background:linear-gradient(
135deg,
#ecfdf5 0%,
#f0f9ff 50%,
#ffffff 100%
);

text-align:center;
position:relative;

border-bottom:1px solid #e5e7eb;

}

.hero-container{
max-width:900px;
margin:auto;
}

/* HERO ICON */

.hero-icon-wrapper{

width:75px;
height:75px;

margin:auto;
margin-bottom:30px;

background:#ffffff;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

box-shadow:
0 10px 25px rgba(0,0,0,0.08),
0 4px 10px rgba(0,0,0,0.05);

}

.hero-icon-wrapper i{
font-size:28px;
color:#10b981;
}

/* HERO TEXT */

.about-hero h1{

font-size:44px;
font-weight:700;

margin-bottom:15px;

color:#111827;

}

.about-hero p{

font-size:18px;
line-height:1.7;

color:#4b5563;

max-width:640px;
margin:auto;

}

/* ===================================================== */
/* SECTION STRUCTURE */
/* ===================================================== */

.about-content-section,
.approach-section,
.important-note-section,
.affiliate-disclosure-section,
.contact-section{

padding:100px 0;
position:relative;

}

/* container width */

.narrow-container{
max-width:860px;
margin:auto;
}

/* ===================================================== */
/* HEADINGS */
/* ===================================================== */

.about-content-section h2,
.approach-section h2,
.important-note-section h2,
.affiliate-disclosure-section h2,
.contact-section h2{

font-size:32px;
font-weight:700;

margin-bottom:25px;

color:#111827;

position:relative;
padding-bottom:12px;

}

/* underline accent */

.about-content-section h2::after,
.approach-section h2::after,
.important-note-section h2::after,
.affiliate-disclosure-section h2::after,
.contact-section h2::after{

content:"";

width:70px;
height:4px;

background:linear-gradient(90deg,#10b981,#3b82f6);

display:block;
margin-top:10px;

border-radius:3px;

}

/* ===================================================== */
/* TEXT */
/* ===================================================== */

.about-content-section p,
.approach-section p,
.important-note-section p,
.affiliate-disclosure-section p,
.contact-section p{

font-size:16.5px;
line-height:1.9;

color:#4b5563;

margin-bottom:18px;

}

/* ===================================================== */
/* BULLET LIST */
/* ===================================================== */

.about-list{

margin:25px 0;

padding-left:0;

list-style:none;

}

.about-list li{

position:relative;

padding-left:32px;

margin-bottom:12px;

font-size:15.5px;

color:#374151;

}

/* custom check */

.about-list li::before{

content:"✓";

position:absolute;

left:0;
top:0;

color:#10b981;

font-weight:700;

font-size:18px;

}

/* ===================================================== */
/* SECTION BACKGROUNDS */
/* ===================================================== */

.approach-section{
background:#ffffff;
}

.important-note-section{

background:#f8fafc;

border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;

}

.affiliate-disclosure-section{
background:#ffffff;
}

.contact-section{

background:#f8fafc;

text-align:center;

}

/* ===================================================== */
/* TEAM SECTION */
/* ===================================================== */

.team-section{

padding:110px 0;

background:#f1f5f9;

}

/* grid */

.team-grid{

display:flex;
flex-direction:column;

gap:30px;

margin-top:45px;

}

/* team card */

.team-card{

background:#ffffff;

border-radius:18px;

padding:35px;

box-shadow:
0 10px 30px rgba(0,0,0,0.08);

transition:all .35s ease;

}

.team-card:hover{

transform:translateY(-6px);

box-shadow:
0 20px 40px rgba(0,0,0,0.12);

}

/* profile layout */

.team-profile{

display:flex;

align-items:center;

gap:28px;

}

/* profile image */

.team-profile img{

width:115px;
height:115px;

border-radius:50%;

object-fit:cover;

border:5px solid #ffffff;

box-shadow:
0 8px 20px rgba(0,0,0,0.15);

}

/* team info */

.team-info h3{

font-size:20px;

font-weight:700;

margin-bottom:6px;

color:#111827;

}

.team-info span{

display:block;

font-size:14px;

color:#10b981;

margin-bottom:12px;

font-weight:500;

}

.team-info p{

font-size:15.5px;

line-height:1.7;

color:#4b5563;

max-width:640px;

}

/* ===================================================== */
/* CTA */
/* ===================================================== */

.final-cta-section{

padding:120px 0;

}

.cta-card{

border-radius:20px;

box-shadow:
0 30px 60px rgba(0,0,0,0.18);

}

/* ===================================================== */
/* SECTION ANIMATION */
/* ===================================================== */

.about-content-section,
.approach-section,
.team-section,
.important-note-section,
.affiliate-disclosure-section,
.contact-section{

animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

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

@media(max-width:768px){

.about-hero{
padding:100px 20px 80px;
}

.about-hero h1{
font-size:32px;
}

.about-hero p{
font-size:16px;
}

.about-content-section,
.approach-section,
.team-section,
.important-note-section,
.affiliate-disclosure-section,
.contact-section{
padding:70px 22px;
}

.about-content-section h2,
.approach-section h2,
.important-note-section h2,
.affiliate-disclosure-section h2,
.contact-section h2{
font-size:26px;
}

.team-profile{
flex-direction:column;
text-align:center;
}

.team-info p{
max-width:100%;
}

}



.trust-section{
padding:80px 0;
background:#ffffff;
}

.trust-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.trust-item{
text-align:center;
padding:30px;
border-radius:14px;
background:#f9fafb;
box-shadow:0 8px 20px rgba(0,0,0,0.05);
transition:all .3s ease;
}

.trust-item:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.trust-item i{
font-size:28px;
color:#10b981;
margin-bottom:12px;
}

.trust-item h4{
font-size:18px;
margin-bottom:8px;
}

.trust-item p{
font-size:14px;
color:#6b7280;
}


.research-section{
padding:90px 0;
background:#f8fafc;
}

.research-container{
max-width:850px;
margin:auto;
text-align:center;
}

.research-container h2{
font-size:30px;
margin-bottom:20px;
}

.research-container p{
color:#4b5563;
line-height:1.8;
margin-bottom:35px;
}

.research-points{
display:flex;
flex-direction:column;
gap:15px;
}

.research-point{
display:flex;
align-items:center;
gap:12px;
justify-content:center;
font-size:15px;
color:#374151;
}

.research-point i{
color:#10b981;
font-size:18px;
}


.publication-section{
padding:80px 0;
background:#ffffff;
text-align:center;
}

.publication-container h2{
font-size:30px;
margin-bottom:10px;
}

.publication-container p{
color:#6b7280;
margin-bottom:25px;
}

.publication-btn{
display:inline-block;
padding:12px 28px;
background:linear-gradient(135deg,#10b981,#3b82f6);
color:#fff;
border-radius:8px;
font-weight:600;
text-decoration:none;
transition:.3s;
}

.publication-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.15);
}



/* =============================== */
/* TRUST SECTION RESPONSIVE FIX */
/* =============================== */

@media (max-width:1024px){

.trust-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

}

@media (max-width:600px){

.trust-grid{
grid-template-columns:1fr;
gap:18px;
}

.trust-item{
padding:24px;
}

}


.container{
padding-left:20px;
padding-right:20px;
}

@media (max-width:768px){

.team-profile{
flex-direction:column;
text-align:center;
}

.team-profile img{
margin-bottom:15px;
}

}