/*==================================================
FLOATING CARDS
==================================================*/

.hero-phone{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==============================
COMMON CARD
==============================*/

.floating-card{

    position:absolute;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:16px 18px;

    min-width:170px;

    box-shadow:0 25px 60px rgba(15,23,42,.12);

    backdrop-filter:blur(18px);

    animation:floatCard 5s ease-in-out infinite;

    z-index:5;

}

.floating-card span{

    display:block;

    font-size:13px;

    color:#64748b;

    margin-bottom:6px;

}

.floating-card strong{

    display:block;

    font-size:22px;

    font-weight:800;

    color:#111827;

}

/*==============================
CARD POSITIONS
==============================*/

.card-sales{

    top:40px;

    left:-90px;

}

.card-orders{

    bottom:70px;

    left:-120px;

    animation-delay:1.5s;

}

.card-ai{

    top:150px;

    right:-110px;

    animation-delay:3s;

}

/*==============================
ANIMATION
==============================*/

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0px);

    }

}