/* ==========================================
   ChenBridge About Page Styles
   Optimized Final Version
========================================== */


/* ==========================================
   Global About Page
========================================== */


section {

    padding:90px 0;

}



h2 {

    text-align:center;

    font-size:38px;

    line-height:1.3;

    margin-bottom:50px;

    color:#0F3D2E;

}



p {

    line-height:1.8;

}




/* ==========================================
   About Hero
========================================== */


.about-hero {

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    background-image:url("industrial-packaging-hero.jpg");

    background-size:cover;

    background-position:center;

}



/* Dark overlay */


.about-hero::before {

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.55)
    );

}



/* Keep normal container alignment */

.about-hero-container {

    position:relative;

    z-index:2;

}




/* Hero Text Box */


.about-hero-content {

    position:relative;

    max-width:820px;

    padding:45px;

    transform:translateY(-40px);

    z-index:2;

}



/*
    Extend transparent background
    Align with image edge
    Keep text position unchanged
*/


.about-hero-content::before {


    content:"";


    position:absolute;


    top:0;


    bottom:0;


    left:-90px;


    right:-90px;


    background:rgba(0,0,0,0.35);


    backdrop-filter:blur(5px);


    -webkit-backdrop-filter:blur(5px);


    border-radius:16px;


    z-index:-1;


}




.about-hero h1 {

    color:white;

    font-size:48px;

    line-height:1.2;

    margin-bottom:25px;

}



.about-hero p {

    color:white;

    font-size:18px;

    line-height:1.7;

    max-width:680px;

}




/* ==========================================
   Hero Slider
========================================== */


.hero-slide {

    display:none;

    animation:fadeHero 1.5s ease;

}



.hero-slide.active {

    display:block;

}



@keyframes fadeHero {


from {

    opacity:0;

    transform:translateY(15px);

}


to {

    opacity:1;

    transform:translateY(0);

}


}




.hero-label {

    display:block;

    color:white;

    font-size:16px;

    font-weight:500;

    letter-spacing:1.5px;

    margin-bottom:18px;

    text-transform:uppercase;

}




/* ==========================================
   Button
========================================== */


.btn {

    display:inline-block;

    margin-top:30px;

    padding:14px 32px;

    background:#F28C28;

    color:white;

    border-radius:6px;

    text-decoration:none;

    font-weight:600;

    transition:all .3s ease;

}



.btn:hover {

    transform:translateY(-3px);

}
/* ==========================================
   Role Section
========================================== */


.role-grid {

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.role-text {

    max-width:850px;

    margin:0 auto 45px;

}



.role-text p {

    font-size:18px;

    line-height:1.8;

    margin-bottom:20px;

    color:#444;

}




.role-cards {

    width:100%;

    display:grid;

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

    gap:25px;

}



/*
   Role Cards
   Top aligned + centered
*/


.role-cards .card {

    min-height:240px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    padding:35px 30px 30px;

}




/* ==========================================
   Common Cards
========================================== */


.card {

    background:white;

    padding:30px;

    border-radius:12px;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.08);

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}



.card:hover {

    transform:translateY(-8px);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.15);

}



.card h3 {

    color:#0F3D2E;

    margin-bottom:15px;

}



.card p {

    color:#444;

}





/* ==========================================
   Dark Sections
========================================== */


.dark {

    background:#0F3D2E;

}



.dark h2 {

    color:white;

}




.dark-card {

    background:
    rgba(255,255,255,0.08);

    color:white;

}



.dark-card h3 {

    color:white;

}



.dark-card p {

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

}




/* ==========================================
   Challenge Section
========================================== */


.challenge-section {

    text-align:center;

}



.challenge-text {

    max-width:850px;

    margin:0 auto 45px;

    color:white;

    font-size:18px;

    line-height:1.8;

}





/* ==========================================
   Grid Layout
========================================== */


.cards {

    display:grid;

    gap:25px;

}



.three-col {

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

}



.four-col {

    grid-template-columns:repeat(4,1fr);

}




/* ==========================================
   Approach Process
========================================== */


.approach-flow {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.approach-card {

    min-height:330px;

}



.approach-card span {

    display:block;

    font-size:34px;

    font-weight:bold;

    color:#F28C28;

    margin-bottom:20px;

}



.approach-card h3 {

    margin-bottom:15px;

}
/* ==========================================
   Mission Banner
========================================== */


.mission-banner {

    text-align:center;

}



.mission-banner h2 {

    color:white;

    margin:0;

}





/* ==========================================
   Contact
========================================== */


.contact {

    text-align:center;

}



.contact .text {

    max-width:850px;

    margin:auto;

    font-size:18px;

}





/* ==========================================
   Google Translate Cleanup
========================================== */


.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate {

    display:none!important;

}



body {

    top:0!important;

}



.goog-tooltip,
.goog-tooltip:hover,
.goog-te-balloon-frame,
#goog-gt-tt {

    display:none!important;

}



.goog-text-highlight {

    background:none!important;

    box-shadow:none!important;

}





/* ==========================================
   Responsive
========================================== */


@media(max-width:1100px){


.role-cards {

    grid-template-columns:1fr;

}



.four-col {

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

}



.approach-flow {

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

}



}





@media(max-width:700px){


section {

    padding:60px 0;

}




.about-hero {

    min-height:600px;

}





/*
   Mobile Hero
*/


.about-hero-container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



.about-hero-content {

    width:100%;

    max-width:100%;

    padding:30px;

    transform:none;

}



.about-hero-content::before {

    left:0;

    right:0;

    border-radius:14px;

}



.about-hero h1 {

    font-size:36px;

}



.about-hero p {

    font-size:17px;

}





.three-col,
.four-col,
.approach-flow {

    grid-template-columns:1fr;

}




h2 {

    font-size:30px;

}



}