/*==================================================
Aarohan Wealth
Home CSS
Services Part 1
==================================================*/
/*==================================
Services Section
==================================*/
.services{
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
    );
    }
    /* Decorative Background */
    .services::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-180px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(18,60,115,.05),
    transparent 70%
    );
    }
    .services::after{
    content:"";
    position:absolute;
    left:-140px;
    bottom:-160px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(200,155,60,.08),
    transparent 70%
    );
    }
    /*==================================
    Heading
    ==================================*/
    .services .section-heading{
    margin-bottom:70px;
    }
    .services .section-title{
    max-width:760px;
    margin:auto;
    }
    .services .section-description{
    max-width:700px;
    margin:auto;
    }
    /*==================================
    Featured Service
    ==================================*/
    .featured-service{
    position:relative;
    background:#fff;
    border-radius:32px;
    padding:70px;
    border:1px solid rgba(18,60,115,.08);
    overflow:hidden;
    box-shadow:
    0 20px 60px rgba(15,23,42,.06);
    margin-bottom:60px;
    }
    /* Decorative Glow */
    .featured-service::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-200px;
    top:-180px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(18,60,115,.06),
    transparent 70%
    );
    }
    .featured-service::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    left:-120px;
    bottom:-120px;
    border-radius:50%;
    background:
    radial-gradient(
    circle,
    rgba(200,155,60,.08),
    transparent 70%
    );
    }

    /*==================================================
Aarohan Wealth
Home CSS
Services Part 2
==================================================*/
/*==================================
Featured Content
==================================*/
.featured-content{
    position:relative;
    z-index:2;
    }
    /*==================================
    Featured Tag
    ==================================*/
    .featured-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    margin-bottom:22px;
    border-radius:999px;
    background:rgba(18,60,115,.08);
    color:var(--primary);
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    }
    .featured-tag::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--secondary);
    }
    /*==================================
    Heading
    ==================================*/
    .featured-content h3{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.2;
    font-weight:800;
    color:var(--dark);
    margin-bottom:22px;
    }
    /*==================================
    Description
    ==================================*/
    .featured-content p{
    font-size:1.08rem;
    line-height:1.9;
    color:var(--text-light);
    margin-bottom:30px;
    max-width:620px;
    }
    /*==================================
    Service List
    ==================================*/
    .service-list{
    list-style:none;
    padding:0;
    margin:0 0 38px;
    }
    .service-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
    font-size:1rem;
    color:var(--dark);
    font-weight:600;
    }
    .service-list li:last-child{
    margin-bottom:0;
    }
    /*==================================
    List Icon
    ==================================*/
    .service-list i{
    flex-shrink:0;
    margin-top:2px;
    font-size:1.1rem;
    color:var(--secondary);
    }
    /*==================================
    CTA Button
    ==================================*/
    .featured-content .theme-btn{
    min-width:220px;
    justify-content:center;
    }

    /*==================================================
Aarohan Wealth
Home CSS
Services Part 3
==================================================*/
/*==================================
Featured Image
==================================*/
.featured-image{
    position:relative;
    z-index:2;
    max-width:480px;
    margin-left:auto;
    }
    /*==================================
    Image Frame
    ==================================*/
    .featured-image img{
    width:100%;
    display:block;
    border-radius:28px;
    border:8px solid #ffffff;
    box-shadow:
    0 30px 70px rgba(15,23,42,.12);
    transition:all .45s ease;
    }
    /*==================================
    Outer Decorative Frame
    ==================================*/
    .featured-image::before{
    content:"";
    position:absolute;
    inset:-18px;
    border-radius:40px;
    border:2px dashed rgba(200,155,60,.35);
    z-index:-1;
    transition:.45s ease;
    }
    /*==================================
    Background Card
    ==================================*/
    .featured-image::after{
    content:"";
    position:absolute;
    top:35px;
    left:35px;
    right:-35px;
    bottom:-35px;
    background:linear-gradient(
    135deg,
    rgba(18,60,115,.08),
    rgba(200,155,60,.10)
    );
    border-radius:34px;
    z-index:-2;
    }
    /*==================================
    Floating Badge
    ==================================*/
    .featured-image .image-badge{
    position:absolute;
    left:-35px;
    bottom:40px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 22px;
    background:#ffffff;
    border-radius:18px;
    border:1px solid rgba(18,60,115,.08);
    box-shadow:
    0 18px 40px rgba(15,23,42,.10);
    }
    .featured-image .image-badge i{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--gradient-primary);
    color:#ffffff;
    font-size:22px;
    }
    .featured-image .image-badge h5{
    margin:0;
    font-size:1rem;
    font-weight:800;
    color:var(--dark);
    }
    .featured-image .image-badge span{
    display:block;
    margin-top:4px;
    font-size:.9rem;
    color:var(--text-light);
    }
    /*==================================
    Hover Effects
    ==================================*/
    .featured-service:hover .featured-image img{
    transform:translateY(-8px) scale(1.02);
    }
    .featured-service:hover .featured-image::before{
    transform:rotate(3deg);
    border-color:rgba(200,155,60,.6);
    }

    /*==================================================
Aarohan Wealth
Home CSS
Services Part 4
==================================================*/
/*==================================
Service Cards
==================================*/
.service-card{
    position:relative;
    height:100%;
    padding:38px 34px;
    background:#ffffff;
    border-radius:24px;
    border:1px solid rgba(18,60,115,.08);
    overflow:hidden;
    transition:all .4s ease;
    box-shadow:
    0 12px 35px rgba(15,23,42,.05);
    }
    /*==================================
    Top Accent
    ==================================*/
    .service-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
    ==================================*/
    .service-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:.4s ease;
    }
    /*==================================
    Icon
    ==================================*/
    .service-icon{
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    border-radius:20px;
    background:
    linear-gradient(
    135deg,
    #F7FAFF,
    #EEF5FF
    );
    border:1px solid rgba(18,60,115,.08);
    transition:.4s ease;
    }
    .service-icon i{
    font-size:30px;
    color:var(--primary);
    transition:.4s ease;
    }
    /*==================================
    Heading
    ==================================*/
    .service-card h4{
    font-size:1.35rem;
    font-weight:800;
    color:var(--dark);
    margin-bottom:16px;
    }
    /*==================================
    Description
    ==================================*/
    .service-card p{
    margin:0;
    color:var(--text-light);
    line-height:1.85;
    font-size:.98rem;
    position:relative;
    z-index:2;
    }
    /*==================================
    Hover
    ==================================*/
    .service-card:hover{
    transform:translateY(-10px);
    border-color:rgba(18,60,115,.12);
    box-shadow:
    0 28px 60px rgba(15,23,42,.10);
    }
    .service-card:hover::before{
    transform:scaleX(1);
    }
    .service-card:hover::after{
    opacity:1;
    }
    .service-card:hover .service-icon{
    background:var(--gradient-primary);
    transform:rotate(-8deg);
    }
    .service-card:hover .service-icon i{
    color:#ffffff;
    transform:scale(1.08);
    }

    /*==================================================
Aarohan Wealth
Home CSS
Services Part 5
==================================================*/
/*==================================
Desktop Enhancement
==================================*/
@media (min-width:1200px){
    .featured-content{
    padding-right:40px;
    }
    }
    /*==================================
    Large Tablet
    ==================================*/
    @media (max-width:1199.98px){
    .featured-service{
    padding:60px;
    }
    .featured-content h3{
    font-size:2.4rem;
    }
    }
    /*==================================
    Tablet
    ==================================*/
    @media (max-width:991.98px){
    .featured-service{
    padding:50px 40px;
    }
    .featured-content{
    text-align:center;
    }
    .featured-content p{
    max-width:100%;
    }
    .service-list{
    display:inline-block;
    text-align:left;
    margin-bottom:35px;
    }
    .featured-content .theme-btn{
    min-width:200px;
    }
    .featured-image{
    max-width:480px;
    margin:20px auto 0;
    }
    .featured-image .image-badge{
    left:20px;
    bottom:20px;
    }
    }
    /*==================================
    Mobile
    ==================================*/
    @media (max-width:767.98px){
    .services .section-heading{
    margin-bottom:50px;
    }
    .featured-service{
    padding:35px 25px;
    border-radius:24px;
    }
    .featured-tag{
    font-size:.78rem;
    padding:8px 16px;
    }
    .featured-content h3{
    font-size:2rem;
    }
    .featured-content p{
    font-size:1rem;
    }
    .featured-image{
    margin-top:35px;
    }
    .featured-image img{
    border-width:6px;
    }
    .featured-image::before{
    inset:-12px;
    }
    .featured-image::after{
    top:20px;
    left:20px;
    right:-20px;
    bottom:-20px;
    }
    .featured-image .image-badge{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:20px;
    width:100%;
    }
    .service-card{
    padding:30px 26px;
    }
    .service-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    }
    .service-icon i{
    font-size:26px;
    }
    .service-card h4{
    font-size:1.25rem;
    }
    }
    /*==================================
    Small Mobile
    ==================================*/
    @media (max-width:575.98px){
    .featured-service{
    padding:28px 20px;
    }
    .featured-content h3{
    font-size:1.75rem;
    }
    .featured-content .theme-btn{
    width:100%;
    }
    .featured-image::before,
    .featured-image::after{
    display:none;
    }
    .featured-image .image-badge{
    padding:16px;
    gap:12px;
    }
    .featured-image .image-badge i{
    width:46px;
    height:46px;
    font-size:20px;
    }
    .service-card{
    padding:26px 22px;
    border-radius:20px;
    }
    .service-icon{
    width:58px;
    height:58px;
    margin-bottom:20px;
    }
    .service-icon i{
    font-size:22px;
    }
    }
    /*==================================
    Reduced Motion Support
    ==================================*/
    @media (prefers-reduced-motion: reduce){
    .featured-service *,
    .service-card,
    .featured-image img{
    transition:none !important;
    animation:none !important;
    }
    }