.elementor-82 .elementor-element.elementor-element-b5c43ac{--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-4d40e54 *//*==============================
CUSTOMIZATION
==============================*/

.seo-stats-card{

--card-width:100%;
--card-max-width:760px;

--padding:42px;
--radius:28px;
--border:1px solid #D8E0E3;

--background:#ffffff;

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

--number-size:72px;
--number-weight:700;
--number-color:#043A4D;

--text-size:20px;
--text-color:#69838A;

--label-size:22px;
--label-weight:600;

--value-size:22px;

--progress-height:16px;

--track:#EDF2F4;

--bar-dark:#2E6562;
--bar-green:#58D3BF;

--badge-bg:#58D3BF;
--badge-color:#ffffff;

--icon-size:22px;

--row-gap:34px;

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

background:var(--background);

border:var(--border);

border-radius:var(--radius);

padding:var(--padding);

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

box-sizing:border-box;

}

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

.ssc-top{

display:flex;

justify-content:space-between;

gap:40px;

margin-bottom:45px;

align-items:flex-start;

}

.ssc-big-number{

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

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

color:var(--number-color);

line-height:1;

white-space:nowrap;

}

.ssc-description{

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

line-height:1.45;

color:var(--text-color);

max-width:330px;

}

.ssc-bars{

display:flex;

flex-direction:column;

gap:var(--row-gap);

}

.ssc-item{

display:flex;

flex-direction:column;

gap:12px;

}

.ssc-label-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}

.ssc-label{

display:flex;

align-items:center;

gap:12px;

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

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

color:#244E55;

}

.ssc-label svg{

width:var(--icon-size);

height:var(--icon-size);

color:#244E55;

flex:none;

}

.ssc-value{

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

font-weight:700;

color:#244E55;

}

.ssc-progress{

height:var(--progress-height);

background:var(--track);

border-radius:100px;

overflow:hidden;

}

.ssc-fill{

height:100%;

border-radius:100px;

animation:growBar 1.3s ease forwards;

transform-origin:left center;

}

.fill1{

width:68.01%;

background:var(--bar-dark);

}

.fill2{

width:42.5%;

background:var(--bar-green);

}

.fill3{

width:58.2%;

background:var(--bar-dark);

}

.fill4{

width:31.99%;

background:var(--bar-dark);

}


@media(max-width:768px){

.seo-stats-card{

--padding:28px;

--number-size:52px;

--text-size:17px;

--label-size:18px;

--value-size:18px;

}

.ssc-top{

flex-direction:column;

gap:18px;

}

.ssc-description{

max-width:none;

}

}

/*====================================
ANIMATIONS
====================================*/

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes growBar {
    from {
        width: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}/* End custom CSS */