/*=========================================================
            SCPM ABOUT PAGE - PART 1
        Hero + About + Mission + Vision
=========================================================*/

:root{

    --primary:#002147;
    --secondary:#ff671f;
    --white:#ffffff;
    --light:#f5f7fb;
    --dark:#1a1a1a;
    --text:#555;
    --border:rgba(255,255,255,.25);

}

/*=========================
GENERAL
=========================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;
    background:#fff;
    color:var(--dark);
    overflow-x:hidden;

}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

section{

    position:relative;

}

/*=========================
SECTION TITLE
=========================*/

.section-title{

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

}

.section-title h2{

    font-size:42px;
    color:var(--primary);
    font-weight:700;
    position:relative;
    display:inline-block;

}

.section-title h2::after{

    content:"";
    width:80px;
    height:4px;
    background:var(--secondary);
    display:block;
    margin:15px auto;
    border-radius:20px;

}

/*=========================
ABOUT HERO
=========================*/

.about-hero{

    position:relative;
    min-height:70vh;

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

    background:
    linear-gradient(rgba(0,33,71,.82),rgba(0,33,71,.82)),
    url("../images/about/about-banner.jpg");

    background-size:cover;
    background-position:center;

    overflow:hidden;

}

.about-hero::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-150px;
    left:-150px;

    filter:blur(25px);

}

.about-hero::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    background:rgba(255,103,31,.15);

    border-radius:50%;

    right:-100px;
    bottom:-100px;

    filter:blur(35px);

}

.about-hero-content{

    position:relative;
    z-index:2;
    max-width:850px;

}

.about-hero h5{

    color:#ffd38d;
    letter-spacing:3px;
    font-size:18px;
    margin-bottom:15px;

}

.about-hero h1{

    color:#fff;
    font-size:58px;
    font-weight:700;
    margin-bottom:25px;

}

.about-hero p{

    color:#eee;
    font-size:18px;
    line-height:1.9;
    margin-bottom:35px;

}

.about-btn{

    display:inline-block;

    padding:16px 40px;

    border-radius:50px;

    background:linear-gradient(135deg,#ff671f,#ff8c42);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

    box-shadow:0 15px 35px rgba(255,103,31,.30);

}

.about-btn:hover{

    background:linear-gradient(135deg,#002147,#0d4e8b);

    transform:translateY(-6px);

}

/*=========================
ABOUT INTRO
=========================*/

.about-intro{

    padding:100px 0;
    background:#f8fbff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:25px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.03);

}

.about-image::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:#ff671f;

    opacity:.08;

    border-radius:25px;

    top:-25px;
    left:-25px;

    z-index:-1;

}

.about-content h6{

    color:var(--secondary);

    font-size:18px;

    letter-spacing:2px;

    margin-bottom:10px;

}

.about-content h2{

    font-size:42px;

    color:var(--primary);

    margin-bottom:25px;

}

.about-content p{

    color:var(--text);

    line-height:2;

    font-size:17px;

    margin-bottom:20px;

}

/*=========================
MISSION SECTION
=========================*/

.mission-section{

    padding:100px 0;

    background:#ffffff;

}

.mission-grid{

    display:grid;

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

    gap:35px;

}

.mission-box{

    position:relative;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(255,255,255,.35);

    border-radius:25px;

    padding:45px;

    text-align:center;

    overflow:hidden;

    transition:.45s;

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

}

.mission-box::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:rgba(255,103,31,.08);

    border-radius:50%;

    top:-100px;
    right:-100px;

}

.mission-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}

.mission-box i{

    width:90px;
    height:90px;

    background:linear-gradient(135deg,#ff671f,#ff914d);

    color:#fff;

    font-size:34px;

    line-height:90px;

    border-radius:50%;

    margin-bottom:25px;

    box-shadow:0 15px 30px rgba(255,103,31,.30);

}

.mission-box h3{

    color:var(--primary);

    font-size:30px;

    margin-bottom:20px;

}

.mission-box p{

    color:#666;

    line-height:1.9;

    font-size:16px;

}

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

.about-hero-content,
.about-image,
.about-content,
.mission-box{

    animation:fadeUp 1s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
/*=========================================================
        SCPM ABOUT PAGE - PART 2
    Why SCPM + Counter + Director + CTA
=========================================================*/


/*=========================
WHY SCPM
=========================*/

.why-scpm{

    padding:100px 0;

    background:#f5f8fc;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-box{

    position:relative;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(20px);

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

    border:1px solid rgba(255,255,255,.35);

    border-radius:25px;

    padding:40px 30px;

    text-align:center;

    overflow:hidden;

    transition:.45s;

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

}

.why-box::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:rgba(255,103,31,.08);

    border-radius:50%;

    top:-120px;

    right:-120px;

}

.why-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}

.why-box i{

    width:85px;

    height:85px;

    line-height:85px;

    border-radius:50%;

    background:linear-gradient(135deg,#ff671f,#ff9a56);

    color:#fff;

    font-size:32px;

    margin-bottom:25px;

    transition:.4s;

}

.why-box:hover i{

    transform:rotateY(180deg);

}

.why-box h4{

    font-size:24px;

    color:#002147;

    margin-bottom:15px;

}

.why-box p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}


/*=========================
COUNTER
=========================*/

.counter-section{

    padding:90px 0;

    background:

    linear-gradient(rgba(0,33,71,.90),rgba(0,33,71,.90)),

    url("../images/about/counter-bg.jpg") center/cover no-repeat;

}

.counter-grid{

    display:grid;

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

    gap:25px;

}

.counter-box{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:20px;

    text-align:center;

    padding:40px;

    transition:.4s;

}

.counter-box:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.14);

}

.counter-box h2{

    color:#ffb347;

    font-size:52px;

    margin-bottom:10px;

    font-weight:700;

}

.counter-box p{

    color:#fff;

    font-size:18px;

    letter-spacing:1px;

}


/*=========================
DIRECTOR
=========================*/

.director-section{

    padding:100px 0;

    background:#ffffff;

}

.director-card{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:50px;

    align-items:center;

    background:#fff;

    border-radius:25px;

    overflow:hidden;

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

}

.director-image{

    height:100%;

}

.director-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.director-content{

    padding:50px;

}

.director-content h6{

    color:#ff671f;

    font-size:17px;

    letter-spacing:2px;

    margin-bottom:12px;

}

.director-content h2{

    color:#002147;

    font-size:38px;

    margin-bottom:25px;

}

.director-content p{

    color:#555;

    line-height:2;

    font-size:17px;

    margin-bottom:30px;

}

.director-content h4{

    color:#002147;

    font-size:26px;

    margin-bottom:8px;

}

.director-content span{

    color:#ff671f;

    font-weight:600;

}


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

.about-cta{

    padding:100px 20px;

    text-align:center;

    background:

    linear-gradient(rgba(0,33,71,.88),rgba(0,33,71,.88)),

    url("../images/about/cta.jpg") center/cover no-repeat;

}

.about-cta h2{

    color:#fff;

    font-size:48px;

    margin-bottom:20px;

}

.about-cta p{

    color:#f1f1f1;

    font-size:18px;

    margin-bottom:35px;

}

.about-cta .about-btn{

    padding:18px 45px;

    font-size:17px;

}


/*=========================
HOVER EFFECTS
=========================*/

.about-image img,

.director-image img{

    transition:.6s;

}

.about-image:hover img,

.director-card:hover img{

    transform:scale(1.05);

}

.director-card:hover{

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}


/*=========================
SCROLL ANIMATION
=========================*/

.why-box,

.counter-box,

.director-card,

.about-cta{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*=========================================================
        SCPM ABOUT PAGE - PART 3
        RESPONSIVE + FINAL POLISH
=========================================================*/


/*=========================
LARGE TABLET
=========================*/

@media screen and (max-width:1200px){

.container{

    width:95%;

}

.about-grid{

    gap:40px;

}

.why-grid{

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

}

.counter-grid{

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

    gap:20px;

}

.director-card{

    grid-template-columns:300px 1fr;

}

}


/*=========================
TABLET
=========================*/

@media screen and (max-width:992px){

.about-hero{

    min-height:60vh;

    padding:80px 20px;

}

.about-hero h5{

    font-size:16px;

}

.about-hero h1{

    font-size:42px;

    line-height:1.3;

}

.about-hero p{

    font-size:16px;

}

.about-grid{

    grid-template-columns:1fr;

}

.about-image{

    order:1;

}

.about-content{

    order:2;

    text-align:center;

}

.about-content h2{

    font-size:34px;

}

.mission-grid{

    grid-template-columns:1fr;

}

.why-grid{

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

}

.counter-grid{

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

}

.director-card{

    grid-template-columns:1fr;

}

.director-image{

    height:450px;

}

.director-content{

    text-align:center;

}

.about-cta h2{

    font-size:38px;

}

}


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

@media screen and (max-width:768px){

section{

    padding:70px 0 !important;

}

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:32px;

}

.about-hero{

    min-height:55vh;

    padding:70px 15px;

}

.about-hero h5{

    font-size:14px;

    letter-spacing:2px;

}

.about-hero h1{

    font-size:34px;

}

.about-hero p{

    font-size:15px;

    line-height:1.8;

}

.about-btn{

    width:100%;

    text-align:center;

    padding:15px;

}

.about-image img{

    border-radius:18px;

}

.about-content h2{

    font-size:30px;

}

.about-content p{

    font-size:15px;

}

.mission-box{

    padding:30px 25px;

}

.mission-box i{

    width:70px;

    height:70px;

    line-height:70px;

    font-size:28px;

}

.mission-box h3{

    font-size:24px;

}

.why-grid{

    grid-template-columns:1fr;

}

.why-box{

    padding:30px;

}

.why-box h4{

    font-size:22px;

}

.counter-grid{

    grid-template-columns:1fr;

}

.counter-box{

    padding:30px;

}

.counter-box h2{

    font-size:42px;

}

.director-image{

    height:350px;

}

.director-content{

    padding:30px 25px;

}

.director-content h2{

    font-size:30px;

}

.director-content p{

    font-size:15px;

}

.director-content h4{

    font-size:22px;

}

.about-cta{

    padding:70px 20px !important;

}

.about-cta h2{

    font-size:32px;

}

.about-cta p{

    font-size:16px;

}

}


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

@media screen and (max-width:480px){

.container{

    width:92%;

}

.about-hero{

    min-height:50vh;

}

.about-hero h5{

    font-size:13px;

}

.about-hero h1{

    font-size:28px;

}

.about-hero p{

    font-size:14px;

}

.about-btn{

    font-size:14px;

    padding:14px;

}

.about-content h6{

    font-size:14px;

}

.about-content h2{

    font-size:26px;

}

.about-content p{

    font-size:14px;

}

.mission-box{

    padding:25px 20px;

}

.mission-box h3{

    font-size:22px;

}

.mission-box p{

    font-size:14px;

}

.why-box{

    padding:25px;

}

.why-box i{

    width:65px;

    height:65px;

    line-height:65px;

    font-size:26px;

}

.why-box h4{

    font-size:20px;

}

.why-box p{

    font-size:14px;

}

.counter-box{

    padding:25px;

}

.counter-box h2{

    font-size:36px;

}

.counter-box p{

    font-size:15px;

}

.director-image{

    height:280px;

}

.director-content{

    padding:20px;

}

.director-content h6{

    font-size:14px;

}

.director-content h2{

    font-size:24px;

}

.director-content p{

    font-size:14px;

    line-height:1.8;

}

.director-content h4{

    font-size:20px;

}

.about-cta h2{

    font-size:26px;

}

.about-cta p{

    font-size:14px;

}

}


/*=========================
SMOOTH ANIMATION
=========================*/

.about-image,
.about-content,
.mission-box,
.why-box,
.counter-box,
.director-card{

    transition:all .4s ease;

}

.about-image:hover{

    transform:translateY(-8px);

}

.mission-box:hover,
.why-box:hover,
.counter-box:hover{

    transform:translateY(-10px);

}


/*=========================
CUSTOM SCROLLBAR
=========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:#ff671f;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#002147;

}


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

::selection{

    background:#ff671f;

    color:#fff;

}