.drxe-about-page{

background:
linear-gradient(rgba(245,241,233,.92), rgba(245,241,233,.92)),
url('../../assets/images/home/cat-protein.jpg');

background-size:cover;

padding:120px 20px;

font-family:'Inter',sans-serif;

}


/* HERO */

.about-hero{

text-align:center;
margin-bottom:100px;

}

.about-hero h1{

font-size:44px;
margin-bottom:20px;

}

.about-hero p{

max-width:750px;
margin:auto;
font-size:18px;
line-height:1.7;

}


/* METRICS */

.metrics-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
text-align:center;
margin-bottom:120px;

}

.metric h2{

font-size:44px;
color:#A82AAE;

}

.metric p{

margin-top:10px;
font-size:15px;

}


/* TIMELINE */

.about-timeline{

margin-bottom:120px;

}

.timeline{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;

}

.timeline-item{

background:#fff;
padding:30px;
border-radius:8px;

box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.timeline-item span{

font-weight:700;
color:#A82AAE;

display:block;
margin-bottom:10px;

}


/* =========================
COMPANIES SECTION
========================= */

.about-companies{

margin:140px 0;

}

.companies-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

margin-top:60px;

}


/* COMPANY CARD */

.company-card{

background:#fff;

padding:50px 40px;

border-radius:12px;

box-shadow:0 15px 30px rgba(0,0,0,.08);

text-align:left;

transition:all .3s ease;

}


.company-card:hover{

transform:translateY(-6px);

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

}


/* LOGO */

.company-logo{

height:90px;

margin-bottom:25px;

display:flex;

align-items:center;

}

.company-logo img{

max-height:80px;

max-width:200px;

object-fit:contain;

}


/* COMPANY TITLE */

.company-card h3{

font-size:26px;

margin-bottom:15px;

}


/* TEXT */

.company-card p{

line-height:1.7;

margin-bottom:12px;

}




/* PILLARS */

.pillar-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
margin-top:50px;

}

.pillar{

background:#fff;
padding:30px;
border-radius:8px;

box-shadow:0 10px 20px rgba(0,0,0,.08);

}


/* MISSION */

.about-mission{

text-align:center;
margin-top:120px;

}


.about-founders-btn{

display:inline-block;

margin-top:25px;

background:#A82AAE;

color:#fff;

padding:14px 26px;

border-radius:6px;

text-decoration:none;

transition:all .25s ease;

}

.about-founders-btn:hover{

background:#8e2293;

transform:translateY(-2px);

box-shadow:0 10px 22px rgba(0,0,0,.15);

}

/* =========================================================
ABOUT PAGE MOBILE FIX
========================================================= */

@media (max-width:640px){

/* HERO */
.about-hero h1{
font-size:30px;
}

.about-hero p{
font-size:15px;
padding:0 10px;
}

/* METRICS → 2 per row */
.metrics-grid{
grid-template-columns:1fr 1fr;
gap:20px;
}

.timeline{
display:flex;
overflow-x:auto;
gap:16px;
padding-bottom:10px;
}

.timeline-item{
flex:0 0 85%;
max-width:300px;
}

/* COMPANIES → stack */
.companies-grid{
grid-template-columns:1fr;
gap:30px;
}

/* PILLARS → 1 per row */
.pillar-grid{
grid-template-columns:1fr;
gap:20px;
}

/* spacing adjustments */
.about-timeline,
.about-companies,
.about-mission{
margin-bottom:80px;
}

}

/* =========================================================
ABOUT PAGE TABLET FIX
========================================================= */

@media (min-width:641px) and (max-width:1024px){

/* HERO */
.about-hero h1{
font-size:36px;
}

.about-hero p{
font-size:16px;
max-width:90%;
}

/* METRICS → 2 per row */
.metrics-grid{
grid-template-columns:1fr 1fr;
gap:30px;
}

/* TIMELINE → 2 columns (clean grid) */
.timeline{
grid-template-columns:1fr 1fr;
gap:30px;
}

/* COMPANIES → keep 2 but tighter */
.companies-grid{
grid-template-columns:1fr 1fr;
gap:40px;
}

/* PILLARS → 2 per row */
.pillar-grid{
grid-template-columns:1fr 1fr;
gap:30px;
}

/* spacing reduce */
.about-timeline,
.about-companies,
.about-mission{
margin-bottom:100px;
}

}