
.site-header {
    padding: 14px 0;

    background: white;
    position: relative;
    z-index: 1;
}
.site-header-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-links {
    display: inline-flex;
}
.header-links li {
    display: inline-flex;
}
.header-links a:not(.button) {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.1px;
    font-weight: 600;
    color: #8a94a7;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 16px;
    padding: 8px 24px;
}
@media (min-width: 641px) {
    .site-header {
        position: relative;
    }
    .site-header22::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 700px;
        background: #242830;
        background: linear-gradient(
            80deg,
            rgba(36, 40, 48, 0.5) 0%,
            rgba(36, 40, 48, 0) 100%
        );
        -webkit-transform-origin: 0;
        transform-origin: 0;
        -webkit-transform: skewY(-12deg);
        transform: skewY(-12deg);
    }
}
.hero {
    text-align: center;
    padding-top: 113px;
    padding-bottom: 79px;
}
.hero-copy {
    position: relative;
    z-index: 1;
}
.hero-cta {
    margin-bottom: 40px;
}
.hero-figure {
    position: relative;
}
.hero-figure svg {
    width: 100%;
    height: auto;
}
.hero-figure::before,
.hero-figure::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
}
.has-animations .hero-figure::before,
.has-animations .hero-figure::after {
    opacity: 0;
    transition: opacity 2s ease;
}
.anime-ready .has-animations .hero-figure::before,
.anime-ready .has-animations .hero-figure::after {
    opacity: 1;
}
body {
    background-image: url("../images/hero-back-illustration.svg") ;
    background-repeat: no-repeat;
    background-position: right top;
}
.hero-figure::before {
    top: -57.8%;
    left: -1.3%;
    width: 152.84%;
    height: 178.78%;
    background-image: url("../images/hero-back-illustration.svg");
}
.hero-figure::after {
    top: -35.6%;
    left: 99.6%;
    width: 57.2%;
    height: 87.88%;
    background-image: url("../images/hero-top-illustration.svg");
}
.hero-figure-box {
    position: absolute;
    top: 0;
    will-change: transform;
}
.hero-figure-box-01,
.hero-figure-box-02,
.hero-figure-box-03,
.hero-figure-box-04,
.hero-figure-box-08,
.hero-figure-box-09 {
    overflow: hidden;
}
.hero-figure-box-01::before,
.hero-figure-box-02::before,
.hero-figure-box-03::before,
.hero-figure-box-04::before,
.hero-figure-box-08::before,
.hero-figure-box-09::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.hero-figure-box-01 {
    left: 103.2%;
    top: 41.9%;
    width: 28.03%;
    height: 37.37%;
    background: linear-gradient(to left top, #00bffb, rgba(0, 191, 251, 0));
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.hero-figure-box-01::before {
    background: linear-gradient(to left, #15181d 0%, rgba(21, 24, 29, 0) 60%);
    -webkit-transform: rotateZ(45deg) scale(1.5);
    transform: rotateZ(45deg) scale(1.5);
}
.hero-figure-box-02 {
    left: 61.3%;
    top: 64.1%;
    width: 37.87%;
    height: 50.5%;
    background: linear-gradient(to left top, #0270d7, rgba(2, 112, 215, 0));
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.hero-figure-box-02::before {
    background: linear-gradient(to top, #15181d 0%, rgba(21, 24, 29, 0) 60%);
    -webkit-transform: rotateZ(-45deg) scale(1.5);
    transform: rotateZ(-45deg) scale(1.5);
}
.hero-figure-box-03 {
    left: 87.7%;
    top: -56.8%;
    width: 56.81%;
    height: 75.75%;
    background: linear-gradient(to left top, #00bffb, rgba(0, 191, 251, 0));
}
.hero-figure-box-03::before {
    background: linear-gradient(to left, #15181d 0%, rgba(21, 24, 29, 0) 60%);
    -webkit-transform: rotateZ(45deg) scale(1.5);
    transform: rotateZ(45deg) scale(1.5);
}
.hero-figure-box-04 {
    left: 54.9%;
    top: -8%;
    width: 45.45%;
    height: 60.6%;
    background: linear-gradient(to left top, #0270d7, rgba(2, 112, 215, 0));
    -webkit-transform: rotateZ(-135deg);
    transform: rotateZ(-135deg);
}
.hero-figure-box-04::before {
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0) 60%
    );
    -webkit-transform: rotateZ(-45deg) scale(1.5);
    transform: rotateZ(-45deg) scale(1.5);
}
.hero-figure-box-05,
.hero-figure-box-06,
.hero-figure-box-07 {
    background-color: #242830;
    box-shadow: -20px 32px 64px rgba(0, 0, 0, 0.25);
}
.hero-figure-box-05 {
    left: 17.4%;
    top: 13.3%;
    width: 64%;
    height: 73.7%;
    -webkit-transform: perspective(500px) rotateY(-15deg) rotateX(8deg)
        rotateZ(-1deg);
    transform: perspective(500px) rotateY(-15deg) rotateX(8deg) rotateZ(-1deg);
}
.hero-figure-box-06 {
    left: 65.5%;
    top: 6.3%;
    width: 30.3%;
    height: 40.4%;
    -webkit-transform: rotateZ(20deg);
    transform: rotateZ(20deg);
}
.hero-figure-box-07 {
    left: 1.9%;
    top: 42.4%;
    width: 12.12%;
    height: 16.16%;
    -webkit-transform: rotateZ(20deg);
    transform: rotateZ(20deg);
}
.hero-figure-box-08 {
    left: 27.1%;
    top: 81.6%;
    width: 19.51%;
    height: 26.01%;
    background: #0270d7;
    -webkit-transform: rotateZ(-22deg);
    transform: rotateZ(-22deg);
}
.hero-figure-box-08::before {
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.48) 100%
    );
    -webkit-transform: rotateZ(45deg) scale(1.5);
    transform: rotateZ(45deg) scale(1.5);
}
.hero-figure-box-09 {
    left: 42.6%;
    top: -17.9%;
    width: 6.63%;
    height: 8.83%;
    background: #00bffb;
    -webkit-transform: rotateZ(-52deg);
    transform: rotateZ(-52deg);
}
.hero-figure-box-09::before {
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.64) 100%
    );
    -webkit-transform: rotateZ(45deg) scale(1.5);
    transform: rotateZ(45deg) scale(1.5);
}
.hero-figure-box-10 {
    left: -3.8%;
    top: 4.3%;
    width: 3.03%;
    height: 4.04%;
    background: rgba(0, 191, 251, 0.32);
    -webkit-transform: rotateZ(-50deg);
    transform: rotateZ(-50deg);
}
@media (max-width: 640px) {
    .hero-cta {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-cta .button {
        display: flex;
    }
    .hero-cta .button + .button {
        margin-top: 16px;
    }
    .hero-figure::after,
    .hero-figure-box-03,
    .hero-figure-box-04,
    .hero-figure-box-09 {
        display: none;
    }
}
@media (min-width: 641px) {
    .hero {
        text-align: left;
        padding-top: 64px;
        padding-bottom: 88px;
    }
    .hero-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hero-copy {
        padding-right: 64px;
        min-width: 552px;
        width: 552px;
    }
    .hero-cta {
        margin: 0;
    }
    .hero-cta .button {
        min-width: 170px;
    }
    .hero-cta .button:first-child {
        margin-right: 16px;
    }
    .hero-figure svg {
        width: auto;
    }
}
.features-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-right: -32px;
    margin-left: -32px;
}
.features-wrap:first-of-type {
    margin-top: -16px;
}
.features-wrap:last-of-type {
    margin-bottom: -16px;
}
.feature {
    padding: 16px 32px;
    width: 380px;
    max-width: 380px;
    flex-grow: 1;
}
.feature-inner {
    height: 100%;
}
.feature-icon {
    display: flex;
    justify-content: center;
}
.feature-icon img{
    max-width: 100px;
}
@media (min-width: 641px) {
    .features-wrap:first-of-type {
        margin-top: -24px;
    }
    .features-wrap:last-of-type {
        margin-bottom: -24px;
    }
    .feature {
        padding: 32px 32px;
    }
}
.pricing-header {
    margin-bottom: 48px;
}
.pricing-tables-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: -12px;
    margin-left: -12px;
}
.pricing-tables-wrap:first-child {
    margin-top: -12px;
}
.pricing-tables-wrap:last-child {
    margin-bottom: -12px;
}
.pricing-table {
    position: relative;
    padding: 12px;
    width: 368px;
    max-width: 368px;
    flex-grow: 1;
}
.pricing-table::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 200%;
    max-width: 200%;
    height: 435px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    bottom: 18.8%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-image: url("../images/pricing-illustration.svg");
}
.pricing-table-header,
.pricing-table-features-title,
.pricing-table-features li {
    border-bottom: 1px solid rgba(138, 148, 167, 0.24);
}
.pricing-table-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: #2c3039;
    padding: 24px;
    height: 100%;
}
.pricing-table-inner > * {
    position: relative;
    width: 100%;
}
.pricing-table-inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 24px 48px rgba(21, 24, 29, 0.24);
    mix-blend-mode: multiply;
}
.pricing-table-price-currency {
    color: #8a94a7;
}
.pricing-table-features-title {
    color: #fff;
    font-weight: 700;
}
.pricing-table-features li {
    display: flex;
    align-items: center;
    padding: 14px 0;
}
.pricing-table-features li::before {
    content: "";
    width: 16px;
    height: 12px;
    margin-right: 16px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUuNiA2LjRMMS42IDQgMCA1LjYgNS42IDEyIDE2IDEuNiAxNC40IDB6IiBmaWxsPSIjMDJDQkIxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=);
    background-repeat: no-repeat;
}
.pricing-table-cta {
    align-self: flex-end;
}
@media (min-width: 641px) {
    .pricing .section-paragraph {
        padding-left: 90px;
        padding-right: 90px;
    }
    .pricing-header {
        margin-bottom: 52px;
    }
}
.cta {
    text-align: center;
}
.cta .section-inner {
    padding: 48px 16px;
}
.cta .section-title {
    margin-bottom: 40px;
}
.cta-inner {
    position: relative;
    background: #e2edff;
    overflow: hidden;
}
.cta-inner::before {
    content: "";
    position: absolute;
    right: 98px;
    top: -117px;
    width: 160px;
    height: 187px;
    background-image: url("../images/cta-illustration.svg");
    background-repeat: no-repeat;
}
.cta-inner > * {
    position: relative;
}
@media (min-width: 641px) {
    .cta {
        text-align: left;
    }
    .cta .section-inner {
        padding: 64px 32px;
    }
    .cta .section-title {
        margin-bottom: 0;
        padding-right: 24px;
    }
    .cta-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.body-wrap {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.boxed-container {
    max-width: 1440px;
    margin: 0 auto;
    box-shadow: 0 24px 48px rgba(21, 24, 29, 0.24);
    mix-blend-mode: multiply;
    mix-blend-mode: normal;
}
main {
    flex: 1 0 auto;
}
.section-inner {
    position: relative;
    padding-top: 48px;
    padding-bottom: 48px;
}
@media (min-width: 641px) {
    .section-inner {
        padding-top: 88px;
        padding-bottom: 88px;
    }
}
.site-footer {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0px;
}
.site-footer a {
    color: #8a94a7;
    text-decoration: none;
}
.site-footer a:hover,
.site-footer a:active {
    text-decoration: underline;
}
.site-footer-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-top: 48px;
    padding-bottom: 48px;
}
.footer-brand,
.footer-links,
.footer-social-links,
.footer-copyright {
    flex: none;
    width: 100%;
    display: inline-flex;
    justify-content: center;
}
.footer-brand,
.footer-links,
.footer-social-links {
    margin-bottom: 24px;
}
.footer-social-links li {
    display: inline-flex;
}
.footer-social-links li + li {
    margin-left: 16px;
}
.footer-social-links li a {
    padding: 8px;
}
.footer-links li + li {
    margin-left: 24px;
}
@media (min-width: 641px) {
    .site-footer {
        margin-top: 20px;
    }
    .site-footer-inner {
        justify-content: space-between;
        padding-top: 64px;
        padding-bottom: 64px;
    }
    .footer-brand,
    .footer-links,
    .footer-social-links,
    .footer-copyright {
        flex: 50%;
    }
    .footer-brand,
    .footer-copyright {
        justify-content: flex-start;
    }
    .footer-links,
    .footer-social-links {
        justify-content: flex-end;
    }
    .footer-links {
        order: 1;
        margin-bottom: 0;
    }
}



.counter-block { margin-bottom: 88px;}
.counter-section i { display:block; margin:0 0 10px; color: black;}
.counter-section span.counter { font-size:40px; color:#000; line-height:60px; display:block; font-family: "Oswald",sans-serif; letter-spacing: 2px}
.counter-title{ font-size:12px; letter-spacing:2px; text-transform: uppercase}
.counter-icon {top:25px; position:relative}
.counter-style2 .counter-title {letter-spacing: 0.55px; float: left;}
.counter-style2 span.counter {letter-spacing: 0.55px; float: left; margin-right: 10px;}
.counter-style2 i {float: right; line-height: 26px; margin: 0 10px 0 0}
.counter-subheadline span {float: right;}  

.counter-section i {
    background: -webkit-linear-gradient(#abc7e0, #0275e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.medium-icon {
    font-size: 40px !important;
    margin-bottom: 15px !important;
} 


/*new board*/
h1 {font-size: 60px;}
h2 {
	/* color: #000; 
	/* font-weight: 300; */

	font-size: 50px;
	text-align: center;
	position: relative;
	margin: 30px 0 80px;
}
h2::after {
	content: "";
	width: 100px;
	position: absolute;
	margin: 0 auto;
	height: 4px;
	border-radius: 1px;
	background: #0270d7;
	left: 0;
	right: 0;
	bottom: -32px;
}
.carousel .carousel-item {
	color: #999;
	overflow: hidden;
	min-height: 120px;
	font-size: 16px;
}
.carousel .media {
	position: relative;
	padding: 0 0 0 20px;
}
.carousel .media img {
	width: 75px;
	height: 75px;
	display: block;
	border-radius: 50%;
}
.carousel .testimonial-wrapper {
	padding: 0 10px;
}
.carousel .testimonial {
	color: #808080;
	position: relative;
	padding: 15px;
	background: #f1f1f1;
	border: 1px solid #efefef;
	border-radius: 3px;
	margin-bottom: 43px;
}
.carousel .testimonial::after {
	content: "";
	width: 15px;
	height: 15px;
	display: block;
	background: #f1f1f1;
	border: 1px solid #efefef;
	border-width: 0 0 1px 1px;
	position: absolute;
	bottom: -8px;
	left: 46px;
	transform: rotateZ(-46deg);
}
.carousel .star-rating li {
	padding: 0 2px;
}
.carousel .star-rating i {
	font-size: 16px;
	color: #ffdc12;
}
.carousel .star-rating i.gray {
	color: #e2e2e2;
}
.carousel .overview {
	padding: 3px 0 0 15px;
}
.carousel .overview .details {
	padding: 5px 0 8px;
}
.carousel .overview b {
	text-transform: uppercase;
	color: #0270d7;
}
.carousel .carousel-indicators {
	bottom: -70px;
}
.carousel-indicators li, .carousel-indicators li.active {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin: 1px 2px;
	box-sizing: border-box;
}
.carousel-indicators li {	
	background: #e2e2e2;
	border: 4px solid #fff;
    cursor: pointer;
}
.carousel-indicators li.active {
	color: #fff;
	background: #0270d7;
	border: 5px double;    
}
