/*==================================================
ABOUT PAGE
Aarohan Wealth
==================================================*/
/*==============================
Hero
==============================*/
.about-hero{
    position:relative;
    overflow:hidden;
    padding:160px 0 90px;
    background:linear-gradient(135deg,#0f2746 0%,#123C73 100%);
    color:#fff;
    }
    .about-hero::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-250px;
    right:-180px;
    }
    .about-hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    bottom:-180px;
    left:-120px;
    }
    .about-hero .container{
    position:relative;
    z-index:2;
    }
    .about-badge{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem 1rem;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    font-size:.9rem;
    font-weight:600;
    margin-bottom:1.25rem;
    }
    .about-hero h1{
    font-size:clamp(2.5rem,5vw,4.2rem);
    font-weight:700;
    line-height:1.15;
    margin-bottom:1.5rem;
    color: white;
    }
    .about-hero p{
    max-width:760px;
    margin:auto;
    color:rgba(255,255,255,.88);
    font-size:1.12rem;
    line-height:1.9;
    }
    /*==============================
    Common
    ==============================*/
    .section-tag{
    display:inline-block;
    padding:.55rem 1rem;
    border-radius:40px;
    background:rgba(18,60,115,.08);
    color:var(--primary-color,#123C73);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.5px;
    margin-bottom:1rem;
    }
    .about-story,
    .values-section,
    .advisor-section,
    .about-process{
    padding:90px 0;
    }
    .about-story h2,
    .values-section h2,
    .advisor-section h2,
    .about-process h2{
    font-size:clamp(2rem,4vw,2.8rem);
    font-weight:700;
    margin-bottom:1.4rem;
    color:var(--heading-color,#1f2937);
    }
    .about-story p,
    .advisor-section p{
    color:#667085;
    line-height:1.9;
    margin-bottom:1rem;
    }
    .about-story img,
    .advisor-section img{
    border-radius:24px;
    transition:.45s;
    }
    .about-story img:hover,
    .advisor-section img:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(0,0,0,.12);
    }
    /*==============================
    Mission
    ==============================*/
    .mission-section{
    padding:90px 0;
    background:#f8fafc;
    }
    .mission-card{
    background:#fff;
    padding:50px 40px;
    border-radius:24px;
    height:100%;
    text-align:center;
    transition:.35s;
    border:1px solid #edf2f7;
    box-shadow:0 12px 40px rgba(15,23,42,.05);
    }
    .mission-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(0,0,0,.08);
    }
    .mission-card i{
    width:85px;
    height:85px;
    border-radius:50%;
    background:var(--primary-color,#123C73);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto auto 25px;
    font-size:2rem;
    }
    .mission-card h3{
    font-size:1.6rem;
    margin-bottom:1rem;
    font-weight:700;
    }
    .mission-card p{
    color:#667085;
    line-height:1.9;
    margin:0;
    }
    /*==============================
    Values
    ==============================*/
    .value-card{
    background:#fff;
    border:1px solid #edf2f7;
    border-radius:22px;
    padding:35px 28px;
    text-align:center;
    transition:.35s;
    height:100%;
    }
    .value-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 50px rgba(0,0,0,.08);
    }
    .value-card i{
    width:75px;
    height:75px;
    border-radius:50%;
    background:rgba(18,60,115,.08);
    color:var(--primary-color,#123C73);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto auto 22px;
    font-size:1.8rem;
    transition:.35s;
    }
    .value-card:hover i{
    background:var(--primary-color,#123C73);
    color:#fff;
    }
    .value-card h4{
    font-size:1.25rem;
    font-weight:700;
    margin-bottom:.8rem;
    }
    .value-card p{
    color:#667085;
    line-height:1.8;
    margin:0;
    }
    /*==============================
    Advisor
    ==============================*/
    .advisor-section{
    background:#fff;
    }
    .advisor-section .btn{
    padding:.95rem 2rem;
    border-radius:50px;
    font-weight:600;
    }
    /*==============================
    Process
    ==============================*/
    .about-process{
    background:#f8fafc;
    }
    .process-box{
    position:relative;
    background:#fff;
    border-radius:22px;
    padding:40px 30px;
    text-align:center;
    height:100%;
    transition:.35s;
    border:1px solid #edf2f7;
    }
    .process-box:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 55px rgba(0,0,0,.08);
    }
    .process-box span{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 25px;
    background:var(--primary-color,#123C73);
    color:#fff;
    font-size:1.3rem;
    font-weight:700;
    }
    .process-box h4{
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:1rem;
    }
    .process-box p{
    color:#667085;
    line-height:1.8;
    margin:0;
    }
    /*==============================
    Animation
    ==============================*/
    .mission-card,
    .value-card,
    .process-box,
    .about-story img,
    .advisor-section img{
    transition:all .35s ease;
    }
    /*==============================
    Responsive
    ==============================*/
    @media(max-width:991px){
    .about-hero{
    padding:110px 0 70px;
    }
    .about-story,
    .values-section,
    .advisor-section,
    .about-process,
    .mission-section{
    padding:70px 0;
    }
    .about-story img{
    margin-bottom:20px;
    }
    }
    @media(max-width:767px){
    .about-hero h1{
    font-size:2.3rem;
    }
    .about-hero p{
    font-size:1rem;
    }
    .mission-card,
    .value-card,
    .process-box{
    padding:30px 22px;
    }
    .about-story h2,
    .values-section h2,
    .advisor-section h2,
    .about-process h2{
    font-size:2rem;
    }
    }