
:root{

    --primary:#ff4d79;

    --secondary:#ff7a3d;

    --gradient:linear-gradient(135deg,#ff4d79 0%,#ff7a3d 100%);

    --heading:#1f2937;

    --text:#6b7280;

    --border:#f2e6eb;

    --bg:#ffffff;

    --radius:18px;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --transition:.35s;

}


.cloud-process {
    background: #fff;
}

.hero-features {
    grid-template-columns: repeat(4, 1fr);
}
/*==========================================================
RIGHT
==========================================================*/


.rpa-hero-image {

    position: relative;

    text-align: center;

}

.rpa-hero-image img {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 700px;

}

.hero-bg-circle {

    position: absolute;

    width: 650px;

    height: 650px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 77, 121, .16),
            transparent 70%);

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

}

/*==========================================================
FLOATING CARDS
==========================================================*/

.floating-card {

    position: absolute;

    background: #fff;

    border-radius: 18px;

    padding: 18px 22px;

    box-shadow: var(--shadow);

    z-index: 10;

    animation: floatCard 4s ease-in-out infinite;
    width: auto;
    display: block;

}

.floating-card span {

    display: block;

    font-size: 12px;

    color: #888;

    margin-bottom: 8px;

    font-weight: 700;

}

.floating-card h3 {

    margin: 0;

    font-size: 32px;

    font-weight: 800;

    color: var(--primary);

}

.floating-card i {

    color: var(--secondary);

    font-size: 22px;

    margin-top: 10px;

}

.top-card {

    left: -20px;

    top: 50px;

    width: 260px;

}

.efficiency-card {

    right: -20px;

    top: 120px;

    width: 180px;

}

.saving-card {

    right: 10px;

    bottom: 30px;

    width: 180px;

}

/*==========================================================
PROCESS FLOW
==========================================================*/

.automation-flow {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 12px;

}

.automation-flow div {

    text-align: center;

}

.automation-flow i {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    border-radius: 50%;

    background: var(--gradient);

    color: #fff;

    margin-bottom: 8px;

}

.automation-flow small {

    display: block;

    font-size: 11px;

    color: #666;

    line-height: 1.3;

}

/*==========================================================
ANIMATION
==========================================================*/

@keyframes floatCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

@media(max-width:991px) {

    .floating-card {

        display: none;

    }
}

.stats-card{
    background:#fff;
    border:1px solid #f3dede;
    border-radius:20px;
    padding:40px 25px;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.stat-box{
    padding:10px;
    text-align: center;
    border: 1px dashed pink !important;
    height: 169px !important;
}

.stat-box:hover{
    background-color: var(--pink);
}

.stat-box:hover .stat-icon i{
    color: #fff;
}

.stat-box:hover span{
    color: #fff;
}


.stat-icon{
    width:70px;
    height:70px;
    margin:0 auto 13px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 0;
    background: transparent;
}

.stat-icon i{
    font-size:42px;
    color:#ff3b6b;
}

.stat-box span{
    display:block;
    font-size:15px;
    font-weight:600;
    color:#222;
}

@media(max-width:767px){

    .stat-icon{
        width:58px;
        height:49px;
    }

    .stat-icon i{
        font-size:32px;
    }

    .stat-box span{
        font-size:15px;
    }

}

.erp-industry-icon {
    display: flex;
    width: 55px;
    height: 55px;
    margin-bottom: 10px;
    align-items: center;
    justify-content: center;
    color: var(--pink);
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 35px;
    transition: all 0.3s ease;
}