/* =====================================
   MARUWATA ABOUT US PAGE
   FIXED - NO HEADER / FOOTER CONFLICT
===================================== */


/* ONLY ABOUT PAGE RESET */

.about-page *,
.about-hero *,
.about-section *,
.mission-section *,
.why-section *,
.about-cta *{

    box-sizing:border-box;

    font-family:'Poppins',Arial,sans-serif;

}




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


.about-hero{


    height:500px;


    background:

    linear-gradient(
    rgba(2,23,63,.5),
    rgba(0,0,0,.55)
    ),

    url("../image/about.jpg");


    background-size:cover;

    background-position:center;


    display:flex;

    justify-content:center;

    align-items:center;


    text-align:center;


}



.about-hero .hero-content{


    max-width:800px;

    padding:20px;


}



.about-hero h1{


    font-size:60px;

    color:white;

    margin-bottom:20px;

    font-weight:700;


}



.about-hero h1 span{


    color:#F53333;


}




.about-hero p{


    color:white;

    font-size:19px;

    line-height:1.7;

    margin-bottom:35px;


}




.about-hero .hero-btn{


    display:inline-block;


    background:#F53333;


    color:white;


    padding:14px 35px;


    border-radius:50px;


    text-decoration:none;


    font-weight:600;


    transition:.3s;


}



.about-hero .hero-btn:hover{


    background:white;

    color:#F53333;


}





/* ==========================
 ABOUT SECTION
========================== */


.about-section{


    padding:90px 0;


}



.about-section .container{


    max-width:1200px;

    margin:auto;

    padding:0 20px;


}



.about-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:60px;


    align-items:center;


}




.about-image img{


    width:100%;


    height:450px;


    object-fit:cover;


    border-radius:25px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.12);


}





.about-content h2{


    font-size:42px;


    color:#222;


    margin-bottom:25px;


}



.about-content h2 span{


    color:#F53333;


}




.about-content p{


    font-size:16px;


    line-height:1.9;


    margin-bottom:18px;


    color:#555;


}







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


.mission-section{


    background:white;


    padding:80px 0;


}



.mission-grid{


    display:grid;


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


    gap:30px;


}





.mission-card{


    text-align:center;


    padding:40px 30px;


    border-radius:20px;


    background:#f6f7fb;


    transition:.3s;


}



.mission-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 15px 35px rgba(0,0,0,.1);


}





.mission-card i{


    font-size:45px;


    color:#F53333;


    margin-bottom:20px;


}





.mission-card h3{


    font-size:25px;


    color:#222;


    margin-bottom:15px;


}





.mission-card p{


    line-height:1.8;


    color:#666;


}







/* ==========================
 WHY CHOOSE US
========================== */


.why-section{


    padding:90px 0;


}




.why-section .section-title{


    text-align:center;


    margin-bottom:50px;


}




.why-section .section-title h2{


    font-size:40px;


    color:#222;


}



.why-section .section-title h2 span{


    color:#F53333;


}




.why-section .section-title p{


    margin-top:15px;


    color:#666;


}






.feature-grid{


    display:grid;


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


    gap:30px;


}





.feature-box{


    background:white;


    padding:40px 30px;


    text-align:center;


    border-radius:20px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


    transition:.3s;


}



.feature-box:hover{


    transform:translateY(-10px);


}





.feature-box i{


    font-size:40px;


    color:#F53333;


    margin-bottom:20px;


}





.feature-box h3{


    font-size:22px;


    color:#222;


    margin-bottom:15px;


}




.feature-box p{


    line-height:1.8;


    color:#666;


}







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


.about-cta{


    background:

    linear-gradient(
    rgba(0,0,0,.7),
    rgba(0,0,0,.7)
    ),

    url("../image/about-banner.jpg");


    background-size:cover;


    background-position:center;


    padding:80px 20px;


    text-align:center;


    color:white;


}




.about-cta h2{


    font-size:38px;


    margin-bottom:15px;


}




.about-cta p{


    font-size:18px;


    margin-bottom:30px;


}




.about-cta a{


    display:inline-block;


    background:#F53333;


    color:white;


    padding:14px 35px;


    border-radius:50px;


    text-decoration:none;


    font-weight:600;


}





.about-cta a:hover{


    background:white;


    color:#F53333;


}








/* ==========================
 RESPONSIVE
========================== */


@media(max-width:900px){


.about-grid{


    grid-template-columns:1fr;


}




.feature-grid{


    grid-template-columns:1fr;


}




.mission-grid{


    grid-template-columns:1fr;


}




.about-hero h1{


    font-size:40px;


}



.about-content h2{


    font-size:32px;


}


}




@media(max-width:600px){


.about-hero{


    height:400px;


}




.about-hero p{


    font-size:16px;


}




.about-image img{


    height:300px;


}



}