.elementor-46 .elementor-element.elementor-element-20341b5{--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;}.elementor-46 .elementor-element.elementor-element-6e79ab2{--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;}.elementor-46 .elementor-element.elementor-element-df47df7{--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;}.elementor-46 .elementor-element.elementor-element-bb68057{--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;}.elementor-46 .elementor-element.elementor-element-28e97f7{--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-645fcf9 */:root{

/*--------------------------
General
---------------------------*/

--chart-size:360px;
--ring-thickness:20;
--progress:15;

/*--------------------------
Colors
---------------------------*/

--progress-color:#59c8c1;
--ring-bg:#2e7d8d;

--percentage-color:#0d2933;
--subtitle-color:#7a8b91;

--legend-text:#52656b;

--orange:#ff7b3e;
--green:#083a3b;

--border:#dfe6ea;

--background:#ffffff;

/*--------------------------
Typography
---------------------------*/

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

--percentage-size:56px;
--subtitle-size:15px;
--legend-size:22px;

--percentage-weight:700;
--subtitle-weight:600;
--legend-weight:500;

--letter-spacing:3px;

/*--------------------------
Spacing
---------------------------*/

--padding:40px;

--border-radius:28px;

--legend-gap:60px;

--box-shadow:none;

}

.seo-chart{

background:var(--background);

padding:var(--padding);

border:2px solid var(--border);

border-radius:var(--border-radius);

box-shadow:var(--box-shadow);

font-family:var(--font-family);

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

.chart-wrapper{

position:relative;

width:var(--chart-size);

height:var(--chart-size);

}

.progress-ring{

width:100%;

height:100%;

transform:rotate(-90deg);

}

.ring-bg{

fill:none;

stroke:var(--ring-bg);

stroke-width:var(--ring-thickness);

}

.ring-progress{

fill:none;

stroke:var(--progress-color);

stroke-width:var(--ring-thickness);

stroke-linecap:round;

stroke-dasharray:534;

stroke-dashoffset:454;

transition:1.2s;

}

.chart-center{

position:absolute;

top:50%;

left:50%;

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

text-align:center;

}

.percentage{

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

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

color:var(--percentage-color);

line-height:1;

}

.subtitle{

margin-top:12px;

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

letter-spacing:var(--letter-spacing);

font-weight:var(--subtitle-weight);

color:var(--subtitle-color);

}

.chart-legend{

margin-top:35px;

display:flex;

gap:var(--legend-gap);

flex-wrap:wrap;

justify-content:center;

}

.legend-item{

display:flex;

align-items:center;

gap:12px;

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

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

color:var(--legend-text);

}

.dot{

width:16px;

height:16px;

border-radius:50%;

display:block;

}

.orange{

background:var(--orange);

}

.green{

background:var(--green);

}

strong{

margin-left:8px;

font-weight:700;

color:#304348;

}

@media(max-width:768px){

:root{

--chart-size:260px;

--percentage-size:42px;

--legend-size:17px;

--padding:25px;

}

.chart-legend{

gap:25px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-835c913 *//*==========================
    SETTINGS
==========================*/

.seo-chart{

    /* Card */

    --card-bg:#ffffff;
    --card-border:#d9e2e8;
    --card-radius:36px;
    --card-padding:40px;

    /* Chart */

    --chart-size:420px;
    --chart-thickness:42px;

    /* Typography */

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

    --percent-size:58px;
    --percent-weight:700;
    --percent-color:#08393d;

    --label-size:14px;
    --label-weight:600;
    --label-color:#7f9498;
    --letter-spacing:4px;

    /* Legend */

    --legend-font-size:26px;
    --legend-weight:500;
    --legend-value-weight:700;

    --gap:18px;

    /* Colors */

    --google:#59c6bd;
    --bing:#062f2f;
    --yandex:#ff7539;
    --yahoo:#f7c23c;
    --duck:#8dbab8;
    --baidu:#d5e2e3;
    --background:#edf3f5;
}

.seo-chart{

    background:var(--card-bg);

    border:1px solid var(--card-border);

    border-radius:var(--card-radius);

    padding:var(--card-padding);

    font-family:var(--font-family);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:40px;

}

/*==========================
      DONUT
==========================*/

.chart{

    width:var(--chart-size);

    height:var(--chart-size);

    border-radius:50%;

    position:relative;

    background:

    conic-gradient(

        var(--google) 0deg 325.656deg,

        white 325.656deg 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.7deg,

        var(--duck)357.7deg 360deg

    );

}

.chart:before{

    content:"";

    position:absolute;

    inset:var(--chart-thickness);

    background:white;

    border-radius:50%;

}

.chart-center{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:2;

}

.percentage{

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

    font-weight:var(--percent-weight);

    color:var(--percent-color);

    line-height:1;

}

.label{

    margin-top:16px;

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

    font-weight:var(--label-weight);

    color:var(--label-color);

    letter-spacing:var(--letter-spacing);

}

/*==========================
      LEGEND
==========================*/

.legend{

    width:100%;

    display:grid;

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

    gap:18px 70px;

}

.item{

    display:grid;

    grid-template-columns:22px auto auto;

    align-items:center;

    gap:12px;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

}

.google{background:var(--google);}
.bing{background:var(--bing);}
.yandex{background:var(--yandex);}
.yahoo{background:var(--yahoo);}
.duck{background:var(--duck);}
.baidu{background:var(--baidu);}

.name{

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

    color:#46656b;

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

}

.value{

    justify-self:end;

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

    font-weight:var(--legend-value-weight);

    color:#143d41;

}

/*==========================
      MOBILE
==========================*/

@media(max-width:767px){

.chart{

    width:290px;

    height:290px;

}

.percentage{

    font-size:42px;

}

.legend{

    grid-template-columns:1fr;

}

.name,
.value{

    font-size:18px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-06b4708 *//*=========================================================
    SEARCH ENGINE MARKET SHARE CHART
    Version: 1.0
    Framework: Elementor Compatible
    Author: ChatGPT
=========================================================*/



/*=========================================================
=            1. ROOT VARIABLES
=========================================================*/

:root{

    /*------------------------------------
        CARD
    ------------------------------------*/

    --card-width:100%;

    --card-max-width:760px;

    --card-background:#ffffff;

    --card-border:1px solid #D7E3E7;

    --card-radius:34px;

    --card-padding:48px;

    --card-shadow:none;



    /*------------------------------------
        CHART
    ------------------------------------*/

    --chart-size:420px;

    --chart-ring-width:42px;

    --chart-background:#ECF3F5;

    --chart-gap:6;



    /*------------------------------------
        TYPOGRAPHY
    ------------------------------------*/

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

    --font-size-percentage:62px;

    --font-size-label:15px;

    --font-size-legend:26px;

    --font-weight-percentage:700;

    --font-weight-label:600;

    --font-weight-legend:500;

    --font-weight-value:700;

    --letter-spacing:4px;



    /*------------------------------------
        COLORS
    ------------------------------------*/

    --color-heading:#08393D;

    --color-text:#6A8087;

    --color-value:#103F45;



    /*------------------------------------
        BRAND COLORS
    ------------------------------------*/

    --google:#5EC8BE;

    --bing:#08373D;

    --yandex:#FF7A3A;

    --yahoo:#F4C546;

    --duckduckgo:#89B7B7;

    --baidu:#D9E4E7;



    /*------------------------------------
        LEGEND
    ------------------------------------*/

    --legend-gap:20px;

    --legend-column-gap:60px;

    --legend-dot-size:15px;

    --legend-padding-top:45px;



    /*------------------------------------
        TRANSITIONS
    ------------------------------------*/

    --transition:.35s ease;

}

/*=========================================================
=            RESET
=========================================================*/

.seo-chart-card,
.seo-chart-card *{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

.seo-chart-card{

    font-family:var(--font-family);

}

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

.seo-chart-card{

    width:var(--card-width);

    display:flex;

    justify-content:center;

}

.seo-chart-card__inner{

    width:100%;

    max-width:var(--card-max-width);

    background:var(--card-background);

    border:var(--card-border);

    border-radius:var(--card-radius);

    padding:var(--card-padding);

    box-shadow:var(--card-shadow);

}

/*=========================================================
=            CHART
=========================================================*/

.seo-chart{

    position:relative;

    width:var(--chart-size);

    height:var(--chart-size);

    margin:0 auto;

}

.seo-chart__svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);

    overflow:visible;

}

/*=========================================================
=            BACKGROUND RING
=========================================================*/

.seo-chart__background{

    fill:none;

    stroke:var(--chart-background);

    stroke-width:var(--chart-ring-width);

}

/*=========================================================
=            SVG SEGMENTS
=========================================================*/

.seo-chart__segment{

    fill:none;

    stroke-width:var(--chart-ring-width);

    stroke-linecap:round;

    transform-origin:center;

    transition:all var(--transition);

}

/* Google */

.seo-chart__segment--google{

    stroke:var(--google);

}

/* Bing */

.seo-chart__segment--bing{

    stroke:var(--bing);

}

/* Yandex */

.seo-chart__segment--yandex{

    stroke:var(--yandex);

}

/* Yahoo */

.seo-chart__segment--yahoo{

    stroke:var(--yahoo);

}

/* DuckDuckGo */

.seo-chart__segment--duckduckgo{

    stroke:var(--duckduckgo);

}

/* Baidu */

.seo-chart__segment--baidu{

    stroke:var(--baidu);

}

/*=========================================================
=            CENTER CONTENT
=========================================================*/

.seo-chart__center{

    position:absolute;

    top:50%;

    left:50%;

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

    width:70%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    z-index:5;

    pointer-events:none;

}

.seo-chart__percentage{

    color:var(--color-heading);

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

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

    line-height:1;

}

.seo-chart__label{

    margin-top:18px;

    color:var(--color-text);

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

    font-weight:var(--font-weight-label);

    letter-spacing:var(--letter-spacing);

    text-transform:uppercase;

}

/*=========================================================
=            LEGEND
=========================================================*/

.seo-legend{

    display:grid;

    grid-template-columns:repeat(2,minmax(220px,1fr));

    gap:var(--legend-gap) var(--legend-column-gap);

    margin-top:var(--legend-padding-top);

}

.seo-legend__item{

    display:flex;

    align-items:center;

    transition:var(--transition);

}

.seo-legend__dot{

    width:var(--legend-dot-size);

    height:var(--legend-dot-size);

    border-radius:50%;

    flex-shrink:0;

    margin-right:16px;

}

.seo-legend__name{

    flex:1;

    color:var(--color-text);

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

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

    line-height:1.3;

}

.seo-legend__value{

    color:var(--color-value);

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

    font-weight:var(--font-weight-value);

    margin-left:18px;

}

/* Colors */

.seo-legend__dot--google{background:var(--google);}
.seo-legend__dot--bing{background:var(--bing);}
.seo-legend__dot--yandex{background:var(--yandex);}
.seo-legend__dot--yahoo{background:var(--yahoo);}
.seo-legend__dot--duckduckgo{background:var(--duckduckgo);}
.seo-legend__dot--baidu{background:var(--baidu);}

/*=========================================================
=            HOVER EFFECTS
=========================================================*/

.seo-chart-card__inner{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.seo-chart-card__inner:hover{

    transform:translateY(-4px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);

}

.seo-legend__item:hover{

    transform:translateX(6px);

}

.seo-chart__segment{

    transition:
        stroke-width .3s ease,
        filter .3s ease;

}

.seo-chart__segment:hover{

    stroke-width:calc(var(--chart-ring-width) + 3px);

    filter:brightness(1.05);

}

/*=========================================================
=            TABLET
=========================================================*/

@media (max-width:1024px){

    :root{

        --chart-size:360px;

        --font-size-percentage:50px;

        --font-size-legend:22px;

        --card-padding:36px;

        --legend-column-gap:40px;

    }

}

/*=========================================================
=            MOBILE
=========================================================*/

@media (max-width:767px){

    :root{

        --chart-size:280px;

        --chart-ring-width:34px;

        --font-size-percentage:40px;

        --font-size-label:13px;

        --font-size-legend:18px;

        --card-padding:24px;

        --legend-gap:16px;

    }

    .seo-legend{

        grid-template-columns:1fr;

    }

    .seo-legend__item{

        padding:4px 0;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-04dbd0c *//* ==========================================================
   SEARCH ENGINE DONUT CHART
   Version: 1.0
   Pure HTML + CSS
   Elementor Compatible
========================================================== */


/*==========================================================
ROOT VARIABLES
==========================================================*/

:root{

    /* CARD */

    --card-bg:#ffffff;
    --card-border:#dce7ea;
    --card-radius:36px;
    --card-padding:48px;
    --card-shadow:
        0 10px 30px rgba(2,57,80,.05),
        0 30px 60px rgba(2,57,80,.08);

    /* CHART */

    --chart-size:430px;
    --ring-width:42px;
    --inner-gap:42px;

    /* TYPOGRAPHY */

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

    --number-size:60px;
    --number-weight:700;

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

    --legend-size:25px;
    --legend-weight:500;
    --legend-value-weight:700;

    /* TEXT */

    --heading:#063b43;
    --body:#6c8187;

    /* BRAND COLORS */

    --google:#5fc9bf;
    --bing:#06373d;
    --yandex:#ff7b39;
    --yahoo:#f5c44a;
    --duck:#8eb9b8;
    --baidu:#dce7e8;

    /* SPACING */

    --legend-gap:22px;
    --legend-column-gap:70px;

    --dot-size:15px;

}


/*==========================================================
RESET
==========================================================*/

.seo-card,
.seo-card *{

    box-sizing:border-box;

}

.seo-card{

    font-family:var(--font-family);

}


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

.seo-card{

    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 WRAPPER
==========================================================*/

.seo-chart{

    display:flex;

    justify-content:center;

}


/*==========================================================
DONUT
==========================================================*/

.seo-donut{

    width:var(--chart-size);

    aspect-ratio:1;

    border-radius:50%;

    position:relative;

    background:

    conic-gradient(

        /* Google */

        var(--google) 0deg 325.66deg,

        #fff 325.66deg 327deg,

        /* Bing */

        var(--bing) 327deg 341.76deg,

        #fff 341.76deg 343deg,

        /* Yandex */

        var(--yandex) 343deg 350.68deg,

        #fff 350.68deg 352deg,

        /* Yahoo */

        var(--yahoo) 352deg 356.68deg,

        #fff 356.68deg 357.8deg,

        /* Duck */

        var(--duck) 357.8deg 359.8deg,

        #fff 359.8deg 360deg

    );

}


/*==========================================================
INNER CIRCLE
==========================================================*/

.seo-donut::before{

    content:"";

    position:absolute;

    inset:var(--ring-width);

    background:#fff;

    border-radius:50%;

    box-shadow:

        inset 0 0 20px rgba(0,0,0,.03);

}


/*==========================================================
CENTER CONTENT
==========================================================*/

.seo-center{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:2;

    text-align:center;

}

.seo-value{

    color:var(--heading);

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

    font-weight:var(--number-weight);

    line-height:1;

}

.seo-title{

    margin-top:18px;

    color:var(--body);

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

    font-weight:var(--title-weight);

    letter-spacing:var(--title-spacing);

}

/*==========================================================
LEGEND
==========================================================*/

.seo-legend{

    display:grid;

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

    gap:22px 70px;

    margin-top:48px;

}

.seo-item{

    display:grid;

    grid-template-columns:
        var(--dot-size)
        1fr
        auto;

    align-items:center;

    column-gap:16px;

}

.seo-dot{

    width:var(--dot-size);

    height:var(--dot-size);

    border-radius:50%;

}

/* Brand Colors */

.seo-dot.google{

    background:var(--google);

}

.seo-dot.bing{

    background:var(--bing);

}

.seo-dot.yandex{

    background:var(--yandex);

}

.seo-dot.yahoo{

    background:var(--yahoo);

}

.seo-dot.duck{

    background:var(--duck);

}

.seo-dot.baidu{

    background:var(--baidu);

}

.seo-name{

    color:var(--body);

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

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

    line-height:1.2;

}

.seo-percent{

    color:var(--heading);

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

    font-weight:var(--legend-value-weight);

    justify-self:end;

}

/*==========================================================
HOVER EFFECTS
==========================================================*/

.seo-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.seo-card:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 40px rgba(2,57,80,.08),

        0 40px 80px rgba(2,57,80,.10);

}

.seo-item{

    transition:

        transform .25s ease,

        opacity .25s ease;

}

.seo-item:hover{

    transform:translateX(6px);

}

.seo-donut{

    transition:transform .35s ease;

}

.seo-card:hover .seo-donut{

    transform:scale(1.015);

}

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

@keyframes seoFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.seo-card{

    animation:seoFade .6s ease;

}

@media (prefers-reduced-motion:reduce){

    .seo-card,

    .seo-item,

    .seo-donut{

        animation:none;

        transition:none;

    }

}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:1024px){

    :root{

        --chart-size:360px;

        --ring-width:36px;

        --number-size:50px;

        --legend-size:21px;

        --card-padding:36px;

    }

}

/*==========================================================
MOBILE
==========================================================*/

@media (max-width:767px){

    :root{

        --chart-size:280px;

        --ring-width:30px;

        --number-size:38px;

        --legend-size:18px;

        --card-padding:24px;

        --title-size:12px;

    }

    .seo-legend{

        grid-template-columns:1fr;

        row-gap:18px;

        column-gap:0;

        margin-top:36px;

    }

}/* End custom CSS */