/*
|--------------------------------------------------------------------------
| VALORABANK
| FILE : assets/css/about.css
| ABOUT US PAGE
|--------------------------------------------------------------------------
*/

:root{

    --primary:#081F4D;
    --primary-light:#103A8C;
    --secondary:#FFD447;
    --accent:#FFB56A;
    --success:#7DBE8A;
    --dark:#0F172A;
    --light:#F8FAFC;
    --gray:#64748B;

    --gradient-primary:
    linear-gradient(
        135deg,
        #081F4D 0%,
        #103A8C 100%
    );

    --gradient-gold:
    linear-gradient(
        135deg,
        #FFD447 0%,
        #FFB56A 100%
    );

    --shadow-sm:
    0 10px 25px rgba(0,0,0,.05);

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

    --shadow-lg:
    0 25px 70px rgba(0,0,0,.12);

}

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

.about-section{

    padding:110px 0;

}

.section-title{

    font-size:3rem;
    font-weight:800;
    color:var(--primary);
    margin-bottom:20px;

}

.section-subtitle{

    color:var(--gray);
    line-height:2;
    font-size:1.05rem;

}

.btn-about{

    background:var(--gradient-gold);
    color:var(--primary);

    border:none;

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.4s;

}

.btn-about:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-md);

}

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

.about-hero{

    min-height:70vh;

    position:relative;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
    rgba(8,31,77,.85),
    rgba(8,31,77,.75)),
    url('../images/about/about-hero.jpg');

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

    overflow:hidden;

}

.about-hero::before{

    content:'';

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

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

    top:-150px;
    right:-150px;

}

.about-hero h1{

    color:#fff;

    font-size:4rem;

    font-weight:800;

}

.about-hero p{

    color:#e5e7eb;

    font-size:1.2rem;

    line-height:2;

    max-width:750px;

}

/* ===================================================
STORY
=================================================== */

.story-image{

    min-height:500px;

    border-radius:35px;

    background:#e5e7eb;

    box-shadow:var(--shadow-lg);

}

.story-content{

    padding-left:20px;

}

.story-content p{

    color:var(--gray);

    line-height:2;

}

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

.mission-section{

    background:#f8fafc;

}

.mission-card{

    background:#fff;

    border-radius:25px;

    padding:40px;

    height:100%;

    text-align:center;

    transition:.4s;

    box-shadow:var(--shadow-sm);

}

.mission-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.mission-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#FFD447;

    display:flex;

    align-items:center;
    justify-content:center;

    margin:auto;

    font-size:32px;

    margin-bottom:25px;

}

/* ===================================================
VALUES
=================================================== */

.value-card{

    background:#fff;

    border-radius:25px;

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:.4s;

    height:100%;

}

.value-card:hover{

    transform:translateY(-10px);

}

.value-icon{

    font-size:40px;

    color:#FFD447;

    margin-bottom:20px;

}

/* ===================================================
STATISTICS
=================================================== */

.stats-section{

    background:var(--gradient-primary);

}

.stat-box{

    text-align:center;

    color:#fff;

}

.stat-number{

    font-size:3.2rem;

    font-weight:800;

}

.stat-title{

    color:#dbe4ff;

}

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

.why-card{

    background:#fff;

    border-radius:25px;

    padding:35px;

    margin-bottom:25px;

    box-shadow:var(--shadow-sm);

    transition:.4s;

}

.why-card:hover{

    transform:translateX(8px);

}

.why-card i{

    color:#FFD447;

    margin-right:10px;

}

/* ===================================================
EXPERTISE
=================================================== */

.expertise-section{

    background:#f8fafc;

}

.expertise-image{

    min-height:500px;

    border-radius:35px;

    background:#e5e7eb;

}

.expertise-content p{

    color:var(--gray);

    line-height:2;

}

/* ===================================================
SERVICES
=================================================== */

.service-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:.4s;

    height:100%;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-image{

    height:250px;

    background:#e5e7eb;

}

.service-content{

    padding:30px;

}

.service-content h4{

    color:var(--primary);

    font-weight:700;

}

.service-content p{

    color:var(--gray);

    line-height:1.8;

}

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

.cta-box{

    background:var(--gradient-primary);

    color:#fff;

    border-radius:35px;

    padding:80px 40px;

    text-align:center;

}

.cta-box h2{

    font-size:3rem;

    font-weight:800;

}

.cta-box.gold{

    background:var(--gradient-gold);

    color:var(--primary);

}

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

.team-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:.4s;

}

.team-card:hover{

    transform:translateY(-10px);

}

.team-image{

    height:320px;

    background:#e5e7eb;

}

.team-content{

    padding:25px;

    text-align:center;

}

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

@media(max-width:991px){

    .about-hero h1{

        font-size:3rem;

    }

    .section-title{

        font-size:2.2rem;

    }

    .story-content{

        padding-left:0;
        margin-top:40px;

    }

}

@media(max-width:576px){

    .about-hero{

        min-height:60vh;

    }

    .about-hero h1{

        font-size:2.3rem;

    }

    .section-title{

        font-size:2rem;

    }

    .cta-box h2{

        font-size:2rem;

    }

}