.elementor-96 .elementor-element.elementor-element-ae0a314{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-7ad865a *//*=============================
    CUSTOMIZE EVERYTHING HERE
==============================*/

:root{

    /* Card */

    --card-width:700px;
    --card-padding:40px;
    --card-radius:30px;
    --card-bg:#fff;
    --card-border:#e8edf2;
    --card-shadow:0 20px 50px rgba(0,0,0,.06);

    /* Chart */

    --chart-size:380px;
    --hole-size:250px;

    /* Fonts */

    --font-family:'Poppins',sans-serif;

    --percentage-size:40px;
    --percentage-weight:700;

    --title-size:14px;
    --title-weight:600;

    --legend-size:20px;

    /* Colors */

    --google:#58C2B8;
    --bing:#062E2F;
    --yandex:#FF7C3A;
    --yahoo:#F4C43C;
    --duck:#9BBEBC;
    --baidu:#D7E1DD;

    /* Animation */

    --animation-time:2s;

}

/*============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:var(--font-family);
    background:#f7f8fa;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;

}

.chart-card{

    width:var(--card-width);
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:var(--card-radius);
    padding:var(--card-padding);
    box-shadow:var(--card-shadow);

}

.chart{

    width:var(--chart-size);
    height:var(--chart-size);

    margin:auto;

    position:relative;
    border-radius:50%;

    background:
    conic-gradient(

        var(--google) 0deg 325.65deg,

        white 325.65deg 327deg,

        var(--bing) 327deg 341.76deg,

        white 341.76deg 343deg,

        var(--yandex) 343deg 350.92deg,

        white 350.92deg 352deg,

        var(--yahoo) 352deg 356.68deg,

        white 356.68deg 357.5deg,

        var(--duck) 357.5deg 359.7deg,

        white 359.7deg 360deg

    );

    animation:spinIn var(--animation-time) ease;

}

.chart::before{

    content:"";

    position:absolute;

    width:var(--hole-size);
    height:var(--hole-size);

    background:#fff;

    border-radius:50%;

    left:50%;
    top:50%;

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

}

.chart:hover{

    transform:scale(1.03);
    transition:.4s;

}

.center{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);
    z-index:10;

    text-align:center;

}

.center h2{

    font-size:var(--percentage-size);
    font-weight:var(--percentage-weight);

    color:#062E2F;

    animation:fadeUp 1.5s;

}

.center span{

    letter-spacing:4px;
    font-size:var(--title-size);
    font-weight:var(--title-weight);

    color:#7c8d98;

}

.legend{

    margin-top:40px;

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:18px 40px;

}

.item{

    display:flex;
    align-items:center;
    justify-content:space-between;

    font-size:var(--legend-size);

    animation:fadeUp .8s ease forwards;

}

.dot{

    width:14px;
    height:14px;

    border-radius:50%;

    margin-right:12px;

}

.item span:first-child{

    margin-right:10px;

}

.item{

    gap:10px;

}

.item strong{

    margin-left:auto;
    color:#062E2F;

}

.google{

    background:var(--google);

}

.bing{

    background:var(--bing);

}

.yandex{

    background:var(--yandex);

}

.yahoo{

    background:var(--yahoo);

}

.duck{

    background:var(--duck);

}

.baidu{

    background:var(--baidu);

}

/*=========================
Animations
==========================*/

@keyframes spinIn{

    from{

        transform:rotate(-180deg) scale(.5);
        opacity:0;

    }

    to{

        transform:rotate(0) scale(1);
        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*=========================
Responsive
==========================*/

@media(max-width:768px){

    :root{

        --card-width:95%;
        --chart-size:320px;
        --hole-size:180px;

        --percentage-size:46px;

        --legend-size:16px;

    }

    .legend{

        grid-template-columns:1fr;

    }

}/* End custom CSS */