/*=========================================
Hero Section
=========================================*/
.hero-section{
    padding:50px 0;
    background:linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 100%);
    overflow:hidden;
    }

    
    .hero-section .row{
        align-items:flex-start;
    }
    /*=========================================
    Badge
    =========================================*/
    .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    background:#EAF3FF;
    color:var(--primary);
    font-weight:700;
    border-radius:50px;
    margin-bottom:25px;
    font-size:.95rem;
    }
    /*=========================================
    Heading
    =========================================*/
    .hero-section h1{
    max-width:720px;
    margin-bottom:25px;
    font-weight:800;
    }
    .hero-section h1 span{
    color:var(--primary);
    }
    .hero-description{
    max-width:620px;
    font-size:1.1rem;
    color:var(--light-text);
    margin-bottom:35px;
    line-height:1.8;
    }
    /*=========================================
    Buttons
    =========================================*/
    .hero-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:40px;
    }
    /*=========================================
    Features
    =========================================*/
    .hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    }
    .hero-features div{
    padding:12px 18px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:50px;
    box-shadow:var(--shadow-sm);
    font-weight:600;
    }
    /*=========================================
    Dashboard
    =========================================*/
    .hero-dashboard{
        position:relative;
        width:100%;
        display:block;
        padding:60px 0;
    }
    .hero-image{
        display:block;
        width:170%;
        max-width:620px;
        margin:0 auto;

    }
    /*=========================================
    Floating Cards
    =========================================*/
    .floating-card{
        position:absolute;
        display:flex;
        align-items:center;
        gap:14px;
        width:220px;
        padding:14px 16px;
        background:rgba(255,255,255,.97);
        backdrop-filter:blur(10px);
        border:1px solid #E8EDF5;
        border-radius:18px;
        box-shadow:0 20px 40px rgba(15,23,42,.08);
        animation:cardFloat 5s ease-in-out infinite;
        z-index:5;
        }
        .card-icon{

            width:48px;
            height:48px;
        
            display:flex;
            align-items:center;
            justify-content:center;
        
            border-radius:14px;
        
            background:#EEF5FF;
        
            color:var(--primary);
        
        }

        .card-icon i{

            font-size:22px;
        
        }
        .card-content{
        display:flex;
        flex-direction:column;
        }
        .card-content strong{
        font-size:15px;
        color:#0F172A;
        line-height:1.2;
        margin-bottom:3px;
        }
        .card-content span{
        font-size:13px;
        color:#64748B;
        line-height:1.4;
        }
    /*=========================================
    Card Positions
    =========================================*/
    .enquiry{
    top:20px;
    left:-0px;
    }
    .seo{
    top:40px;
    right:-20px;
    animation-delay:.8s;
    }
    .whatsapp{
    bottom:110px;
    left:-40px;
    animation-delay:1.6s;
    }
    .ssl{
    bottom:40px;
    right:0px;
    animation-delay:2.4s;
    }
    /*=========================================
    Animations
    =========================================*/
    @keyframes heroFloat{
    0%{
    transform:translateY(0);
    }
    50%{
    transform:translateY(-12px);
    }
    100%{
    transform:translateY(0);
    }
    }
    @keyframes cardFloat{
    0%{
    transform:translateY(0);
    }
    50%{
    transform:translateY(-10px);
    }
    100%{
    transform:translateY(0);
    }
    }
    /*=========================================
    Large Devices
    =========================================*/
    @media(max-width:1199px){
    .hero-section{
    padding:90px 0;
    }
    .hero-section h1{
    font-size:3rem;
    }
    .hero-dashboard{
    min-height:560px;
    }
    .hero-image{
    max-width:520px;
    }
    .floating-card{
    width:170px;
    padding:16px;
    }
    }
    /*=========================================
    Tablet
    =========================================*/
    @media(max-width:991px){
    .hero-section{
    padding:70px 0;
    text-align:center;
    }
    .hero-description{
    margin:0 auto 35px;
    }
    .hero-buttons{
    justify-content:center;
    }
    .hero-features{
    justify-content:center;
    }
    .hero-dashboard{
    min-height:auto;
    margin-top:40px;
    }
    .hero-image{
    max-width:90%;
    }
    .floating-card{
    display:none;
    }
    }
    /*=========================================
    Mobile
    =========================================*/
    @media(max-width:767px){
    .hero-section{
    padding:60px 0;
    }
    .hero-badge{
    font-size:.85rem;
    padding:8px 16px;
    }
    .hero-section h1{
    font-size:2.2rem;
    line-height:1.25;
    }
    .hero-description{
    font-size:1rem;
    }
    .hero-buttons{
    flex-direction:column;
    gap:15px;
    }
    .hero-buttons .btn{
    width:100%;
    justify-content:center;
    }
    .hero-features{
    flex-direction:column;
    gap:12px;
    }
    .hero-features div{
    width:100%;
    text-align:center;
    }
    .hero-image{
    max-width:100%;
    }
    }
    /*=========================================
    Small Mobile
    =========================================*/
    @media(max-width:575px){
    .hero-section{
    padding:50px 0;
    }
    .hero-section h1{
    font-size:1.9rem;
    }
    .hero-description{
    font-size:.95rem;
    }
    .hero-badge{
    width:100%;
    justify-content:center;
    }
    }