/*==================================================
Aarohan Wealth
Home CSS
Client Success Stories Part 1
==================================================*/
/*==================================
Stories Section
==================================*/
.stories{
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
    );
    }
    /*==================================
    Background Effects
    ==================================*/
    .stories::before{
    content:"";
    position:absolute;
    top:-220px;
    left:-180px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(18,60,115,.05),
    transparent 70%
    );
    }
    .stories::after{
    content:"";
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(200,155,60,.08),
    transparent 70%
    );
    }
    /*==================================
    Section Heading
    ==================================*/
    .stories .section-heading{
    margin-bottom:70px;
    }
    .stories .section-title{
    max-width:760px;
    margin:auto;
    }
    .stories .section-description{
    max-width:700px;
    margin:auto;
    }
    /*==================================
    Story Card
    ==================================*/
    .story-card{
    position:relative;
    height:100%;
    padding:40px;
    background:#ffffff;
    border-radius:28px;
    border:1px solid rgba(18,60,115,.08);
    overflow:hidden;
    transition:all .4s ease;
    box-shadow:
    0 20px 50px rgba(15,23,42,.05);
    }
    /*==================================
    Top Accent
    ==================================*/
    .story-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 ease;
    }
    /*==================================
    Background Glow
    ==================================*/
    .story-card::after{
    content:"";
    position:absolute;
    width:200px;
    height:200px;
    right:-100px;
    bottom:-100px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(18,60,115,.08),
    transparent 70%
    );
    opacity:0;
    transition:.4s ease;
    }

    /*==================================================
Aarohan Wealth
Home CSS
Client Success Stories Part 2
==================================================*/
/*==================================
Story Tag
==================================*/
.story-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    margin-bottom:22px;
    border-radius:50px;
    background:rgba(200,155,60,.12);
    color:var(--secondary);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    }
    .story-tag::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--secondary);
    }
    /*==================================
    Story Title
    ==================================*/
    .story-card h4{
    margin-bottom:30px;
    font-size:1.7rem;
    font-weight:800;
    color:var(--dark);
    line-height:1.35;
    }
    /*==================================
    Story Items
    ==================================*/
    .story-item{
    position:relative;
    padding:20px 0;
    }
    .story-item:not(:last-child){
    border-bottom:1px solid rgba(18,60,115,.08);
    }
    /*==================================
    Story Label
    ==================================*/
    .story-item strong{
    display:block;
    margin-bottom:10px;
    color:var(--primary);
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    }
    /*==================================
    Story Description
    ==================================*/
    .story-item p{
    margin:0;
    color:var(--text-light);
    font-size:1rem;
    line-height:1.8;
    }
    /*==================================
    Left Accent Line
    ==================================*/
    .story-item::before{
    content:"";
    position:absolute;
    left:-18px;
    top:26px;
    width:4px;
    height:28px;
    border-radius:10px;
    background:linear-gradient(
    to bottom,
    var(--secondary),
    var(--primary)
    );
    opacity:.15;
    transition:all .35s ease;
    }
    /*==================================
    Story Number (Optional)
    ==================================*/
    .story-card .story-item:first-of-type::after{
    content:"01";
    position:absolute;
    top:18px;
    right:0;
    font-size:2.8rem;
    font-weight:800;
    color:rgba(18,60,115,.05);
    line-height:1;
    pointer-events:none;
    }

    /*==================================================
Aarohan Wealth
Home CSS
Client Success Stories Part 3
==================================================*/
/*==================================
Layer Management
==================================*/
.story-card,
.story-tag,
.story-item{
position:relative;
z-index:2;
}
/*==================================
Story Card Hover
==================================*/
.story-card:hover{
transform:translateY(-10px);
border-color:rgba(18,60,115,.14);
box-shadow:
0 30px 70px rgba(15,23,42,.10);
}
.story-card:hover::before{
transform:scaleX(1);
}
.story-card:hover::after{
opacity:1;
}
/*==================================
Story Tag Hover
==================================*/
.story-card:hover .story-tag{
background:var(--gradient-primary);
color:#ffffff;
}
.story-card:hover .story-tag::before{
background:#ffffff;
}
/*==================================
Story Heading
==================================*/
.story-card h4{
transition:color .35s ease;
}
.story-card:hover h4{
color:var(--primary);
}
/*==================================
Story Item Animation
==================================*/
.story-item{
transition:
transform .35s ease,
border-color .35s ease;
}
.story-card:hover .story-item{
transform:translateX(6px);
}
.story-card:hover .story-item::before{
opacity:1;
height:38px;
}
/*==================================
Typography Polish
==================================*/
.story-item strong{
transition:color .35s ease;
}
.story-card:hover .story-item strong{
color:var(--secondary);
}
/*==================================
Card Cursor
==================================*/
.story-card{
cursor:default;
}
/*==================================
Performance
==================================*/
.story-card,
.story-tag,
.story-item{
will-change:transform;
}
/*==================================
Keyboard Accessibility
==================================*/
.story-card:focus-within{
outline:2px solid rgba(18,60,115,.15);
outline-offset:4px;
box-shadow:
0 30px 70px rgba(15,23,42,.10);
}

/*==================================================
Aarohan Wealth
Home CSS
Client Success Stories Part 4
==================================================*/
/*==================================
Illustrative Disclaimer
==================================*/
.stories-disclaimer{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:55px;
    padding:22px 26px;
    border-radius:18px;
    background:rgba(18,60,115,.04);
    border:1px solid rgba(18,60,115,.08);
    color:var(--text-light);
    font-size:.95rem;
    line-height:1.8;
    }
    .stories-disclaimer i{
    flex-shrink:0;
    margin-top:2px;
    font-size:1.1rem;
    color:var(--secondary);
    }
    /*==================================
    Desktop Refinements
    ==================================*/
    @media (min-width:1200px){
    .story-card{
    min-height:100%;
    }
    }
    /*==================================
    Laptop
    ==================================*/
    @media (max-width:1199.98px){
    .story-card{
    padding:35px;
    }
    }
    /*==================================
    Tablet
    ==================================*/
    @media (max-width:991.98px){
    .stories .section-heading{
    margin-bottom:55px;
    }
    .story-card{
    padding:32px;
    }
    .story-card h4{
    font-size:1.45rem;
    }
    }
    /*==================================
    Mobile
    ==================================*/
    @media (max-width:767.98px){
    .stories::before,
    .stories::after{
    display:none;
    }
    .story-card{
    padding:28px 24px;
    border-radius:22px;
    }
    .story-card h4{
    font-size:1.35rem;
    }
    .story-item{
    padding:18px 0;
    }
    .story-item::before{
    left:-14px;
    }
    .stories-disclaimer{
    flex-direction:column;
    gap:10px;
    padding:20px;
    margin-top:40px;
    }
    }
    /*==================================
    Small Mobile
    ==================================*/
    @media (max-width:575.98px){
    .stories .section-heading{
    margin-bottom:40px;
    }
    .story-card{
    padding:24px 20px;
    }
    .story-tag{
    font-size:.74rem;
    padding:7px 15px;
    }
    .story-card h4{
    font-size:1.25rem;
    margin-bottom:22px;
    }
    .story-item strong{
    font-size:.88rem;
    }
    .story-item p{
    font-size:.95rem;
    line-height:1.7;
    }
    .story-item::before{
    display:none;
    }
    .story-card .story-item:first-of-type::after{
    font-size:2.2rem;
    }
    }
    /*==================================
    Reduced Motion
    ==================================*/
    @media (prefers-reduced-motion: reduce){
    .story-card,
    .story-card::before,
    .story-card::after,
    .story-tag,
    .story-item,
    .story-item::before{
    transition:none !important;
    animation:none !important;
    }
    }