.about-page{
font-family:Arial,Helvetica,sans-serif;
color:#222;
}

.about-container{
max-width:1200px;
margin:auto;
}


/* HERO */

.hero{
display:flex;
align-items:center;
min-height:420px;
}

.hero-text{
width:42%;
padding:0px;
}

.tag{
color:#E61E4A;
font-size:14px;
font-weight:bold;
}

.hero h1{
font-size:42px;
line-height:1.15;
margin:20px 0;
}

.hero h1 span{
color:#E61E4A;
}

.hero p{
font-size:16px;
line-height:1.8;
color:#555;
}


.hero-img{
width:58%;
}

.hero-img img{

width:100%;
height:420px;
object-fit:cover;

}



/* small advantage */

.advantage{

display:flex;
gap:40px;
margin-top:30px;

}

.advantage div{

flex:1;

}


.advantage strong{

color:#E61E4A;
font-size:18px;

}





/* TITLE */

.title{

text-align:center;
margin:70px 0 35px;

}


.title h2{

font-size:32px;

}


.title span{

color:#E61E4A;

}



/* FACTORY */

.factory-grid{

display:grid;
grid-template-columns:repeat(6,1fr);
gap:20px;

}


.factory-grid img{

width:100%;
height:150px;
object-fit:cover;
border-radius:8px;

}


.factory-grid p{

text-align:center;
font-weight:bold;
font-size:14px;

}





/* TEAM */

.team-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}


.team-card{

background:#f7f7f7;
padding:20px;

}


.team-card img{

width:100%;
height:250px;
object-fit:cover;

}


.team-card h3{

color:#E61E4A;

}


.team-card li{

margin:8px 0;

}





/* QC */


.qc-box{

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

}


.qc-box img{

width:100%;
height:180px;
object-fit:cover;

}


.qc-box p{

text-align:center;
font-weight:bold;

}




/* bottom */


/* =========================================
   BOTTOM THREE COLUMNS
========================================= */

.about-bottom{

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

    margin:0 auto;

    display:grid;

    grid-template-columns:
        1.5fr 2.5fr 2fr;

    gap:18px;

    box-sizing:border-box;

}


/* =========================================
   THREE CARDS
========================================= */

.about-bottom-card{

    width:100%;
    height:300px;

    padding:20px;

    box-sizing:border-box;

    background:#f8f8f8;

    overflow:hidden;

}


/* TITLE */

.about-bottom-card h3{

    margin:0;

    font-size:17px;
    line-height:22px;

    font-weight:700;

    color:#222;

}


/* RED LINE */

.about-red-line{

    width:35px;
    height:2px;

    margin:9px 0 15px;

    background:#E61E4A;

}


/* =========================================
   WORKSHOP
   ONE IMAGE
========================================= */

.workshop-single{

    width:100%;
    height:230px;

    overflow:hidden;

}


.workshop-single img{

    display:block;

    width:100%;
    height:230px;

    object-fit:cover;

    border-radius:4px;

}


/* =========================================
   OUR TEAM
========================================= */

.team-image-box{

    width:100%;
    height:230px;

    overflow:hidden;

}


.team-image-box img{

    display:block;

    width:100%;
    height:230px;

    object-fit:cover;

    border-radius:4px;

}


/* =========================================
   CERTIFICATIONS
========================================= */

.certificate-images{

    width:100%;
    height:230px;

    display:grid;

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

    gap:8px;

    align-items:start;

}


.certificate-image{

    width:100%;
    height:190px;

    background:#fff;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}


.certificate-image img{

    display:block;

    width:100%;
    height:190px;

    object-fit:contain;

}

/* CTA */


.cta{

margin-top:70px;
background:#222;
padding:60px;
text-align:center;
color:white;

}


.cta h2{

font-size:36px;

}


.btn{

background:#E61E4A;
color:white;
padding:15px 40px;
display:inline-block;
margin-top:20px;

}