.elementor-55 .elementor-element.elementor-element-6f7ef5e{--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-a1deef1 *//*======================================================
GOOGLE SEARCH STATS CHART
Version 2.0
======================================================*/

.gs-chart{

    /* ---------- Container ---------- */

    --chart-width:100%;
    --chart-max-width:980px;

    --background:#FFFFFF;

    --border-color:#D9E1E6;
    --border-width:2px;
    --border-radius:38px;

    --shadow:none;

    --padding-top:48px;
    --padding-right:55px;
    --padding-bottom:45px;
    --padding-left:55px;

    /* ---------- Grid ---------- */

    --column-gap:48px;

    --bar-area-height:330px;

    /* ---------- Bars ---------- */

    --bar-width:72px;

    --bar-radius:10px;

    --bar-height-1:145px;
    --bar-height-2:210px;
    --bar-height-3:250px;
    --bar-height-4:305px;

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

    --bar-color-1:#357F8C;
    --bar-color-2:#58BCB8;
    --bar-color-3:#65C5A4;
    --bar-color-4:#083F3B;

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

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

    /* Numbers */

    --number-size:34px;
    --number-weight:700;
    --number-color:#163E49;
    --number-spacing:18px;

    /* Labels */

    --label-size:18px;
    --label-weight:400;
    --label-color:#294850;
    --label-spacing:18px;

    /* Caption */

    --caption-size:16px;
    --caption-weight:400;
    --caption-color:#8E9DA5;
    --caption-margin:42px;

    /* ---------- Animation ---------- */

    --animation-speed:.8s;

    /* ---------- Hover ---------- */

    --hover-scale:1.03;
    --hover-brightness:1.08;

    /* ---------- Responsive ---------- */

    --mobile-padding:30px;
    --mobile-gap:22px;

    --mobile-bar-width:52px;

    --mobile-number:24px;
    --mobile-label:14px;
    --mobile-caption:13px;

}
/*======================================================
MAIN CONTAINER
======================================================*/

.gs-chart{

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

    margin:auto;

    background:var(--background);

    border:var(--border-width) solid var(--border-color);

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

    box-shadow:var(--shadow);

    padding:
        var(--padding-top)
        var(--padding-right)
        var(--padding-bottom)
        var(--padding-left);

    box-sizing:border-box;

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

    display:grid;

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

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

    align-items:end;

}

/*======================================================
EACH COLUMN
======================================================*/

.gs-item{

    display:grid;

    grid-template-rows:

        auto

        var(--bar-area-height)

        auto;

    justify-items:center;

}

/*======================================================
NUMBER
======================================================*/

.gs-number{

    margin-bottom:var(--number-spacing);

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

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

    color:var(--number-color);

    line-height:1;

    text-align:center;

}

/*======================================================
BAR AREA
======================================================*/

.gs-bar-wrap{

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

}

/*======================================================
BAR
======================================================*/

.gs-bar{

    width:var(--bar-width);

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

}

/*======================================================
BAR HEIGHTS
======================================================*/

.bar-1{

    height:var(--bar-height-1);

    background:var(--bar-color-1);

}

.bar-2{

    height:var(--bar-height-2);

    background:var(--bar-color-2);

}

.bar-3{

    height:var(--bar-height-3);

    background:var(--bar-color-3);

}

.bar-4{

    height:var(--bar-height-4);

    background:var(--bar-color-4);

}

/*======================================================
LABEL
======================================================*/

.gs-label{

    margin-top:var(--label-spacing);

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

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

    color:var(--label-color);

    text-align:center;

    line-height:1.35;

}

/*======================================================
CAPTION
======================================================*/

.gs-caption{

    grid-column:1/-1;

    text-align:center;

    margin-top:var(--caption-margin);

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

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

    color:var(--caption-color);

    line-height:1.5;

}

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

@media (max-width:767px){

.gs-chart{

    padding:var(--mobile-padding);

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

}

.gs-item{

    grid-template-rows:

        auto

        calc(var(--bar-area-height) * .75)

        auto;

}

.gs-bar{

    width:var(--mobile-bar-width);

}

.gs-number{

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

}

.gs-label{

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

}

.gs-caption{

    font-size:var(--mobile-caption);

}

}

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

@media (max-width:480px){

.gs-chart{

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

    row-gap:35px;

}

.gs-caption{

    margin-top:20px;

}

}

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

.gs-bar{

    transform-origin:bottom center;

    transform:scaleY(0);

    animation:growBar var(--animation-speed) ease-out forwards;

    transition:
        transform .30s ease,
        filter .30s ease,
        box-shadow .30s ease;

}

/* Stagger animation */

.bar-1{ animation-delay:.10s; }

.bar-2{ animation-delay:.25s; }

.bar-3{ animation-delay:.40s; }

.bar-4{ animation-delay:.55s; }

@keyframes growBar{

    from{

        transform:scaleY(0);

    }

    to{

        transform:scaleY(1);

    }

}

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

.gs-item:hover .gs-bar{

    transform:scaleY(1) scale(var(--hover-scale));

    filter:brightness(var(--hover-brightness));

}

/*======================================================
PREMIUM LOOK
======================================================*/

.gs-bar{

    box-shadow:
        0 10px 25px rgba(0,0,0,.06);

}

/* Slight vertical gradient */

.bar-1{

    background:
    linear-gradient(
        to bottom,
        #3C8A99,
        var(--bar-color-1)
    );

}

.bar-2{

    background:
    linear-gradient(
        to bottom,
        #69CCC6,
        var(--bar-color-2)
    );

}

.bar-3{

    background:
    linear-gradient(
        to bottom,
        #78D3B5,
        var(--bar-color-3)
    );

}

.bar-4{

    background:
    linear-gradient(
        to bottom,
        #0A4C47,
        var(--bar-color-4)
    );

}

/*======================================================
TEXT RENDERING
======================================================*/

.gs-number,
.gs-label,
.gs-caption{

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/*======================================================
ACCESSIBILITY
======================================================*/

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

    .gs-bar{

        animation:none;

        transition:none;

        transform:none;

    }

}

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

@media (max-width:900px){

    .gs-chart{

        --column-gap:30px;

    }

}

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

@media (max-width:767px){

    .gs-chart{

        border-radius:26px;

    }

}

/*======================================================
VERY SMALL PHONES
======================================================*/

@media (max-width:420px){

    .gs-chart{

        padding:22px;

    }

}/* End custom CSS */