/*==================================================
Aarohan Wealth
Home CSS
Why Choose Us Part 1
==================================================*/
/*==================================
Why Section
==================================*/
.why{
    position:relative;
    overflow:hidden;
    background:#ffffff;
    }
    /*==================================
    Background Shapes
    ==================================*/
    .why::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(18,60,115,.05),
    transparent 70%);
    top:-180px;
    right:-120px;
    }
    .why::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(200,155,60,.08),
    transparent 70%);
    bottom:-150px;
    left:-120px;
    }
    /*==================================
    Section Heading
    ==================================*/
    .why .section-heading{
    margin-bottom:70px;
    }
    .why .section-title{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    }
    .why .section-description{
    max-width:680px;
    font-size:1.08rem;
    }
    /*==================================
    Cards
    ==================================*/
    .why-card{
    position:relative;
    height:100%;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:24px;
    padding:40px 35px;
    transition:.4s ease;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(15,23,42,.05);
    }
    /*==================================
    Top Accent
    ==================================*/
    .why-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:var(--gradient-primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s;
    }
    .why-card:hover::before{
    transform:scaleX(1);
    }

    /*==================================================
Aarohan Wealth
Home CSS
Why Choose Us Part 2
==================================================*/
/*==================================
Icon Wrapper
==================================*/
.why-icon{
    position:relative;
    width:78px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    border-radius:22px;
    background:linear-gradient(
    135deg,
    #F8FBFF 0%,
    #EEF5FF 100%
    );
    border:1px solid rgba(18,60,115,.08);
    transition:all .4s ease;
    }
    /* Decorative Ring */
    .why-icon::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:28px;
    border:1px dashed rgba(18,60,115,.10);
    transition:.4s ease;
    }
    /* Icon */
    .why-icon i{
    font-size:30px;
    color:var(--primary);
    transition:.4s ease;
    }
    /*==================================
    Heading
    ==================================*/
    .why-card h4{
    font-size:1.4rem;
    font-weight:800;
    margin-bottom:16px;
    color:var(--dark);
    line-height:1.35;
    }
    /*==================================
    Description
    ==================================*/
    .why-card p{
    color:var(--text-light);
    line-height:1.9;
    margin-bottom:0;
    }
    /*==================================
    Hover
    ==================================*/
    .why-card:hover{
    transform:translateY(-12px);
    border-color:rgba(18,60,115,.12);
    box-shadow:
    0 25px 60px rgba(15,23,42,.10);
    }
    .why-card:hover .why-icon{
    background:var(--gradient-primary);
    transform:rotate(-6deg);
    }
    .why-card:hover .why-icon i{
    color:#ffffff;
    transform:scale(1.08);
    }
    .why-card:hover .why-icon::before{
    transform:rotate(20deg);
    border-color:rgba(200,155,60,.35);
    }

    /*==================================================
Aarohan Wealth
Home CSS
Why Choose Us Part 3/4
==================================================*/
/*==================================
Bottom Arrow
==================================*/
.why-card .card-arrow{
    position:absolute;
    right:30px;
    bottom:28px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--background-light);
    color:var(--primary);
    opacity:0;
    transform:translateY(15px);
    transition:.4s ease;
    }
    .why-card:hover .card-arrow{
    opacity:1;
    transform:translateY(0);
    background:var(--primary);
    color:#fff;
    }
    /*==================================
    Card Number
    ==================================*/
    .why-card .card-number{
    position:absolute;
    top:28px;
    right:28px;
    font-family:var(--heading-font);
    font-size:3.5rem;
    font-weight:800;
    line-height:1;
    color:rgba(18,60,115,.04);
    user-select:none;
    transition:.4s ease;
    }
    .why-card:hover .card-number{
    color:rgba(18,60,115,.08);
    }
    /*==================================
    Soft Glow
    ==================================*/
    .why-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    bottom:-90px;
    border-radius:50%;
    background:radial-gradient(
    circle,
    rgba(18,60,115,.08),
    transparent 70%
    );
    opacity:0;
    transition:.45s ease;
    }
    .why-card:hover::after{
    opacity:1;
    }
    /*==================================
    Subtle Border Highlight
    ==================================*/
    .why-card:hover{
    background:linear-gradient(
    180deg,
    #ffffff,
    #fbfcfe
    );
    }
    /*==================================
    Icon Pulse
    ==================================*/
    .why-card:hover .why-icon{
    animation:iconPulse .8s ease;
    }
    @keyframes iconPulse{
    0%{
    transform:scale(1);
    }
    50%{
    transform:scale(1.08) rotate(-6deg);
    }
    100%{
    transform:scale(1) rotate(-6deg);
    }
    }
    /*==================================
    Content Layer
    ==================================*/
    .why-icon,
    .why-card h4,
    .why-card p{
    position:relative;
    z-index:2;
    }

    /*==================================================
Aarohan Wealth
Home CSS
Why Choose Us Part 4
==================================================*/
/*==================================
Premium Stagger Layout
==================================*/
@media (min-width:992px){
    .why .row.g-4 > div:nth-child(2),
    .why .row.g-4 > div:nth-child(4){
    margin-top:40px;
    }
    }
    /*==================================
    Hover Transition
    ==================================*/
    .why-card{
    will-change:transform;
    }
    .why-card:hover{
    transform:translateY(-12px);
    }
    /*==================================
    Tablet
    ==================================*/
    @media (max-width:991.98px){
    .why .section-heading{
    margin-bottom:50px;
    }
    .why-card{
    padding:35px 30px;
    }
    .why-icon{
    width:70px;
    height:70px;
    margin-bottom:24px;
    }
    .why-icon i{
    font-size:28px;
    }
    .why-card h4{
    font-size:1.3rem;
    }
    }
    /*==================================
    Mobile
    ==================================*/
    @media (max-width:767.98px){
    .why{
    overflow:hidden;
    }
    .why-card{
    padding:30px 24px;
    border-radius:20px;
    }
    .why .section-heading{
    margin-bottom:40px;
    }
    .why-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    }
    .why-icon i{
    font-size:24px;
    }
    .why-card h4{
    font-size:1.2rem;
    margin-bottom:12px;
    }
    .why-card p{
    font-size:.95rem;
    line-height:1.8;
    }
    }
    /*==================================
    Small Mobile
    ==================================*/
    @media (max-width:575.98px){
    .why::before,
    .why::after{
    display:none;
    }
    .why-card{
    padding:26px 22px;
    }
    .why-icon{
    width:60px;
    height:60px;
    }
    .why-icon i{
    font-size:22px;
    }
    }