/*=================================
        PLATFORM
=================================*/

.platform{

    position:relative;

    padding:180px 0;

    overflow:hidden;

}

.platform::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(37,99,235,.10),

            transparent 72%

        );

    filter:blur(120px);

    pointer-events:none;

}

/*=================================
        SHOWCASE
=================================*/

.platform-showcase{

    position:relative;

    margin-top:120px;

    height:1150px;

}

/*=================================
        WIDGETS
=================================*/

.platform-kpi{

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%) rotate(-3deg);

    z-index:6;

}

.platform-chart{

    position:absolute;

    top:220px;

    left:170px;

    transform:rotate(-5deg) scale(1.06);

    z-index:3;

}

.platform-calendar{

    position:absolute;

    top:180px;

    right:120px;

    transform:rotate(5deg);

    z-index:5;

}

.platform-reservations{

    position:absolute;

    top:560px;

    left:40px;

    transform:rotate(-2deg);

    z-index:4;

}

.platform-donut{

    position:absolute;

    top:650px;

    right:70px;

    transform:rotate(3deg);

    z-index:5;

}

.platform-stat{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    z-index:7;

}

/*=================================
        FLOAT
=================================*/

.platform-kpi,
.platform-chart,
.platform-calendar,
.platform-reservations,
.platform-donut,
.platform-stat{

    transition:

        transform .5s ease,

        filter .5s ease;

}

.platform:hover .platform-kpi{

    transform:

        translateX(-50%)

        translateY(-12px)

        rotate(-1deg);

}

.platform:hover .platform-chart{

    transform:

        translateY(-10px)

        rotate(-2deg)

        scale(1.08);

}

.platform:hover .platform-calendar{

    transform:

        translateY(-10px)

        rotate(2deg);

}

.platform:hover .platform-reservations{

    transform:

        translateY(-10px)

        rotate(0deg);

}

.platform:hover .platform-donut{

    transform:

        translateY(-10px)

        rotate(1deg);

}

.platform:hover .platform-stat{

    transform:

        translateX(-50%)

        translateY(-12px);

}

/*=================================
        RESPONSIVE
=================================*/

@media(max-width:1200px){

    .platform-showcase{

        height:auto;

        display:grid;

        grid-template-columns:1fr;

        gap:35px;

    }

    .platform-kpi,
    .platform-chart,
    .platform-calendar,
    .platform-reservations,
    .platform-donut,
    .platform-stat{

        position:relative;

        inset:auto;

        left:auto;

        right:auto;

        bottom:auto;

        top:auto;

        transform:none !important;

        margin:auto;

    }

}