/*==================================================
Aarohan Wealth
Hero CSS - Part 1
Hero Layout & Content
==================================================*/
/*==================================
Hero Section
==================================*/
.hero{
    position:relative;
    overflow:hidden;
    padding:185px 0 120px;
    background:
    radial-gradient(circle at top left,
    rgba(18,60,115,.08),
    transparent 35%),
    radial-gradient(circle at top right,
    rgba(199,155,61,.10),
    transparent 28%),
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%);
    }
    /*==================================
    Grid Background
    ==================================*/
    .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
    background-size:70px 70px;
    opacity:.6;
    pointer-events:none;
    }
    /*==================================
    Top Right Glow
    ==================================*/
    .hero::after{
    content:"";
    position:absolute;
    top:-180px;
    right:-180px;
    width:520px;
    height:520px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(18,60,115,.08),
    transparent 72%);
    filter:blur(18px);
    pointer-events:none;
    }
    /*==================================
    Container
    ==================================*/
    .hero .container{
    position:relative;
    z-index:2;
    }
    /*==================================
    Hero Content
    ==================================*/
    .hero-content{
    max-width:620px;
    }
    /*==================================
    Badge
    ==================================*/
    .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    margin-bottom:30px;
    border-radius:50px;
    background:rgba(255,255,255,.90);
    border:1px solid rgba(18,60,115,.08);
    backdrop-filter:blur(16px);
    box-shadow:
    0 12px 35px rgba(15,23,42,.05);
    color:var(--primary);
    font-size:.88rem;
    font-weight:700;
    letter-spacing:.2px;
    }
    .hero-badge i{
    color:var(--secondary);
    font-size:15px;
    }
    /*==================================
    Heading
    ==================================*/
    .hero h1{
    margin-bottom:26px;
    font-size:clamp(3.3rem,6vw,5.4rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-2px;
    color:var(--dark);
    }
    .hero h1 span{
    display:block;
    color:var(--primary);
    }
    /*==================================
    Description
    ==================================*/
    .hero p{
    max-width:560px;
    margin-bottom:42px;
    font-size:1.15rem;
    line-height:1.95;
    color:var(--text-light);
    }
    /*==================================
    Fade Animation
    ==================================*/
    .hero-content{
    animation:heroFadeUp .9s ease;
    }
    @keyframes heroFadeUp{
    from{
    opacity:0;
    transform:translateY(40px);
    }
    to{
    opacity:1;
    transform:translateY(0);
    }
    }

    /*==================================================
Aarohan Wealth
Hero CSS - Part 2
Buttons, Features & Hero Image
==================================================*/
/*==================================
Hero Buttons
==================================*/
.hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:45px;
    flex-wrap:wrap;
    }
    .hero-buttons .btn-theme,
    .hero-buttons .btn-outline-theme{
    min-width:220px;
    height:58px;
    font-size:1rem;
    font-weight:600;
    }
    .hero-buttons .btn-theme i,
    .hero-buttons .btn-outline-theme i{
    transition:.35s ease;
    }
    .hero-buttons .btn-theme:hover i,
    .hero-buttons .btn-outline-theme:hover i{
    transform:translateX(6px);
    }
    /*==================================
    Hero Features
    ==================================*/
    .hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:20px 30px;
    margin:0;
    padding:0;
    }
    .hero-features li{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:.96rem;
    font-weight:600;
    color:var(--dark);
    }
    .hero-features li i{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(34,197,94,.12);
    color:#16a34a;
    font-size:13px;
    flex-shrink:0;
    }
    /*==================================
    Hero Image Area
    ==================================*/
    .hero-image{
        position:relative;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        min-height:auto;
    }
    /*==================================
    Background Circle
    ==================================*/
    .hero-image::before{
    content:"";
    position:absolute;
    width:640px;
    height:640px;
    border-radius:50%;
    background:
    radial-gradient(circle,
    rgba(18,60,115,.08),
    rgba(18,60,115,.03) 60%,
    transparent 75%);
    z-index:1;
    transition:.4s;
    }
    /*==================================
    Dashed Ring
    ==================================*/
    .hero-image::after{
    content:"";
    position:absolute;
    width:540px;
    height:540px;
    border-radius:50%;
    border:1px dashed rgba(18,60,115,.10);
    animation:heroRotate 45s linear infinite;
    z-index:1;
    }
    @keyframes heroRotate{
    from{
    transform:rotate(0deg);
    }
    to{
    transform:rotate(360deg);
    }
    }
    /*==================================
    Hero Image
    ==================================*/
    .hero-image img{
    position:relative;
    z-index:3;
    width:100%;
    max-width:640px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 35px 60px rgba(15,23,42,.16));
    transition:.45s ease;
    }
    .hero-image:hover img{
    transform:translateY(-10px);
    }
    .hero-image:hover::before{
    transform:scale(1.05);
    }
    /*==================================
    Bottom Glow
    ==================================*/
    .image-glow{
    position:absolute;
    bottom:25px;
    width:340px;
    height:70px;
    background:rgba(18,60,115,.12);
    border-radius:50%;
    filter:blur(40px);
    z-index:0;
    }
    /*==================================
    Floating Statistics Card
    ==================================*/
    .hero-card{
    position:absolute;
    left:-25px;
    bottom:45px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:16px;
    min-width:240px;
    padding:18px 22px;
    border-radius:22px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.70);
    box-shadow:
    0 20px 50px rgba(15,23,42,.10);
    transition:.35s ease;
    }
    .hero-card:hover{
    transform:translateY(-8px);
    box-shadow:
    0 28px 60px rgba(15,23,42,.15);
    }
    .hero-card-icon{
    width:60px;
    height:60px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient-primary);
    color:#fff;
    font-size:1.5rem;
    flex-shrink:0;
    }
    .hero-card h5{
    margin:0;
    font-size:2rem;
    font-weight:800;
    color:var(--primary);
    }
    .hero-card p{
    margin:4px 0 0;
    font-size:.92rem;
    color:var(--text-light);
    line-height:1.4;
    }
    /*==================================
    Hero Image Animation
    ==================================*/
    .hero-image{
    animation:heroImage .9s ease;
    }
    @keyframes heroImage{
    from{
    opacity:0;
    transform:translateX(50px);
    }
    to{
    opacity:1;
    transform:translateX(0);
    }
    }

    /*==================================================
Aarohan Wealth
Hero CSS - Part 3
Decorative Elements & Responsive
==================================================*/
/*==================================
Hero Decorative Shapes
==================================*/
.hero-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    }
    .hero-shape-1{
    width:320px;
    height:320px;
    top:-120px;
    left:-120px;
    background:
    radial-gradient(circle,
    rgba(18,60,115,.10),
    transparent 72%);
    filter:blur(10px);
    }
    .hero-shape-2{
    width:260px;
    height:260px;
    right:-70px;
    bottom:60px;
    background:
    radial-gradient(circle,
    rgba(199,155,61,.18),
    transparent 72%);
    filter:blur(18px);
    }
    .hero-shape-3{
    width:18px;
    height:18px;
    left:52%;
    top:24%;
    background:var(--secondary);
    opacity:.28;
    animation:shapeFloat 7s ease-in-out infinite;
    }
    .hero-shape-4{
    width:12px;
    height:12px;
    right:14%;
    bottom:18%;
    background:var(--primary);
    opacity:.25;
    animation:shapeFloat 5.5s ease-in-out infinite;
    }
    @keyframes shapeFloat{
    0%,100%{
    transform:translateY(0);
    }
    50%{
    transform:translateY(-18px);
    }
    }
    /*==================================
    Premium Floating Dots
    ==================================*/
    .hero-dot{
    position:absolute;
    border-radius:50%;
    z-index:1;
    animation:dotFloat 8s ease-in-out infinite;
    }
    .hero-dot-1{
    width:14px;
    height:14px;
    top:16%;
    left:15%;
    background:var(--secondary);
    opacity:.35;
    }
    .hero-dot-2{
    width:10px;
    height:10px;
    top:34%;
    right:12%;
    background:var(--primary);
    opacity:.25;
    }
    .hero-dot-3{
    width:16px;
    height:16px;
    bottom:22%;
    left:20%;
    background:var(--secondary);
    opacity:.30;
    }
    .hero-dot-4{
    width:12px;
    height:12px;
    bottom:30%;
    right:18%;
    background:var(--primary);
    opacity:.22;
    }
    @keyframes dotFloat{
    0%,100%{
    transform:translateY(0);
    }
    50%{
    transform:translateY(-12px);
    }
    }
    /*==================================
    Hero Scroll
    ==================================*/
    .hero-scroll{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:60px;
    color:var(--text-light);
    font-size:.95rem;
    font-weight:600;
    }
    .hero-scroll i{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#ffffff;
    color:var(--primary);
    box-shadow:0 10px 30px rgba(15,23,42,.08);
    animation:scrollBounce 2.5s infinite;
    }
    @keyframes scrollBounce{
    0%,100%{
    transform:translateY(0);
    }
    50%{
    transform:translateY(8px);
    }
    }
    /*==================================
    Image Hover Effects
    ==================================*/
    .hero-image:hover .hero-card{
    transform:translateY(-12px);
    }
    .hero-card{
    animation:cardFloat 5s ease-in-out infinite;
    }
    @keyframes cardFloat{
    0%,100%{
    transform:translateY(0);
    }
    50%{
    transform:translateY(-10px);
    }
    }
    /*==================================
    Responsive
    ==================================*/
    @media(max-width:1199px){
    .hero{
    padding-top:170px;
    }
    .hero-image{
    min-height:560px;
    }
    .hero-image img{
    max-width:560px;
    }
    .hero-card{
    left:0;
    bottom:25px;
    }
    }
    @media(max-width:991px){
    .hero{
    padding-top:150px;
    padding-bottom:90px;
    text-align:center;
    }
    .hero-content{
    max-width:100%;
    }
    .hero p{
    margin-inline:auto;
    }
    .hero-buttons{
    justify-content:center;
    }
    .hero-features{
    justify-content:center;
    }
    .hero-image{
    margin-top:50px;
    min-height:480px;
    }
    .hero-card{
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    min-width:260px;
    display:none !important;
    }
    .hero-scroll{
    justify-content:center;
    }
    }
    @media(max-width:767px){
    .hero{
    padding-top:130px;
    padding-bottom:70px;
    }
    .hero h1{
    font-size:2.7rem;
    letter-spacing:-1px;
    }
    .hero p{
    font-size:1rem;
    }
    .hero-buttons{
    flex-direction:column;
    gap:14px;
    }
    .hero-buttons .btn-theme,
    .hero-buttons .btn-outline-theme{
    width:100%;
    min-width:100%;
    }
    .hero-features{
    flex-direction:column;
    align-items:center;
    gap:14px;
    }
    .hero-image{
    min-height:auto;
    }
    .hero-image img{
    max-width:100%;
    }
    .hero-card{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin:25px auto 0;
    width:100%;
    max-width:320px;
    }
    .hero-scroll{
    display:none;
    }
    .hero-image::after{
    display:none;
    }
    }
    @media(max-width:480px){
    .hero{
    padding-top:120px;
    }
    .hero h1{
    font-size:2.3rem;
    }
    .hero-badge{
    font-size:.78rem;
    padding:10px 16px;
    }
    .hero-card{
    padding:16px 18px;
    }
    .hero-card-icon{
    width:52px;
    height:52px;
    font-size:1.2rem;
    }
    .hero-card h5{
    font-size:1.6rem;
    }
    .hero-card p{
    font-size:.85rem;
    }
    .hero-shape-1,
    .hero-shape-2,
    .hero-dot{
    display:none;
    }
    }

    /*==================================================
Aarohan Wealth
Hero CSS - Part 4
Premium Finishing Effects
==================================================*/
/*==================================
Image Reveal Animation
==================================*/
.hero-image img{
    animation:heroImageReveal 1.1s ease both;
    }
    @keyframes heroImageReveal{
    0%{
    opacity:0;
    transform:translateY(40px) scale(.92);
    }
    100%{
    opacity:1;
    transform:translateY(0) scale(1);
    }
    }
    /*==================================
    Content Animation
    ==================================*/
    .hero-badge{
    animation:fadeUp .5s ease both;
    }
    .hero h1{
    animation:fadeUp .7s ease both;
    }
    .hero p{
    animation:fadeUp .9s ease both;
    }
    .hero-buttons{
    animation:fadeUp 1.1s ease both;
    }
    .hero-features{
    animation:fadeUp 1.3s ease both;
    }
    @keyframes fadeUp{
    from{
    opacity:0;
    transform:translateY(35px);
    }
    to{
    opacity:1;
    transform:translateY(0);
    }
    }
    /*==================================
    Hero Overlay
    ==================================*/
    .hero-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
    linear-gradient(
    90deg,
    rgba(255,255,255,.15),
    transparent 20%,
    transparent 80%,
    rgba(255,255,255,.08)
    );
    z-index:1;
    }
    /*==================================
    Floating Glow
    ==================================*/
    .hero-glow{
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(199,155,61,.18);
    filter:blur(70px);
    top:10%;
    right:8%;
    animation:glowMove 8s ease-in-out infinite;
    z-index:0;
    }
    @keyframes glowMove{
    0%,100%{
    transform:translateY(0);
    }
    50%{
    transform:translateY(-25px);
    }
    }
    /*==================================
    Cursor Interaction
    ==================================*/
    .hero-card,
    .hero-buttons .btn-theme,
    .hero-buttons .btn-outline-theme{
    transition:all .35s ease;
    }
    .hero-card:hover{
    transform:translateY(-10px) scale(1.02);
    }
    .hero-buttons .btn-theme:hover{
    transform:translateY(-3px);
    }
    .hero-buttons .btn-outline-theme:hover{
    transform:translateY(-3px);
    }
    /*==================================
    Accessibility
    ==================================*/
    .hero :focus-visible{
    outline:3px solid rgba(18,60,115,.18);
    outline-offset:4px;
    }
    /*==================================
    Reduced Motion
    ==================================*/
    @media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
    }
    }
    /*==================================
    Ultra Wide Screens
    ==================================*/
    @media(min-width:1600px){
    .hero{
    padding-top:210px;
    padding-bottom:150px;
    }
    .hero-content{
    max-width:700px;
    }
    .hero h1{
    font-size:5.8rem;
    }
    .hero p{
    font-size:1.22rem;
    max-width:620px;
    }
    .hero-image{
    min-height:760px;
    }
    .hero-image img{
    max-width:700px;
    }
    .hero-image::before{
    width:700px;
    height:700px;
    }
    .hero-image::after{
    width:600px;
    height:600px;
    }
    }
    /*==================================
    Large Desktop
    ==================================*/
    @media(min-width:1400px) and (max-width:1599px){
    .hero-image img{
    max-width:650px;
    }
    .hero-image{
    min-height:700px;
    }
    }
    /*==================================
    Landscape Tablets
    ==================================*/
    @media (min-width:768px) and (max-width:991px){
    .hero-image img{
    max-width:500px;
    }
    .hero-card{
    max-width:320px;
    }
    }
    /*==================================
    Very Small Devices
    ==================================*/
    @media(max-width:380px){
    .hero{
    padding-top:110px;
    }
    .hero h1{
    font-size:2rem;
    }
    .hero p{
    font-size:.95rem;
    }
    .hero-badge{
    padding:8px 14px;
    font-size:.72rem;
    }
    .hero-card{
    padding:15px;
    }
    .hero-card-icon{
    width:46px;
    height:46px;
    font-size:1rem;
    }
    .hero-card h5{
    font-size:1.4rem;
    }
    .hero-card p{
    font-size:.8rem;
    }
    .hero-image img{
    max-width:260px;
    }
    }
    /*==================================
    Print
    ==================================*/
    @media print{
    .hero{
    background:#fff !important;
    padding:40px 0;
    }
    .hero::before,
    .hero::after,
    .hero-shape,
    .hero-dot,
    .hero-glow,
    .hero-scroll{
    display:none !important;
    }
    .hero-card{
    box-shadow:none;
    border:1px solid #ddd;
    }
    .hero-buttons{
    display:none;
    }
    }