/*
Theme Name: Loyalty AI
Theme URI: https://wordpress.org/
Description: Тема для Wordpress
Author: Divster
Author URI: https://divster.name/
Version: 100.0
*/
@font-face {
font-family: 'Manrope';
src: url('fonts/Manrope-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Manrope';
src: url('fonts/Manrope-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Manrope';
src: url('fonts/Manrope-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Manrope';
src: url('fonts/Manrope-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Manrope';
src: url('fonts/Manrope-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
}
/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
list-style-type: none;
list-style: none;
}
details summary::-webkit-details-marker {
display:none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */
*{
box-sizing: border-box;
}
html {
height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
body{
font-family: 'Manrope', sans-serif;
font-size: 14px;
line-height: 1;
color: #222;
height: 100%;
}
@media (prefers-color-scheme: dark) {
body {
background: #FFF;
color: #222;
}
}
body.not-scroll{
overflow-y: hidden;
}
textarea,input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=number]{
font-family: 'Manrope', sans-serif;
border: 1px solid #666;
background: #fff;
color: #001A04;
outline: none;
}
input[type=submit], button{
margin: 0;
-webkit-appearance: none;
font-family: 'Manrope', sans-serif;
outline: none;
cursor: pointer;
}
button::-moz-focus-inner{
border: 0;
}
.inner {
min-width: 280px;
max-width: 1160px;
margin: 0 auto;
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
a {
color: #001A04;
text-decoration: underline;
outline: none;
}
a:hover {
text-decoration: none;
}
.slick-slide{
outline: none !important;
}
img {
max-width: 100%;
height: auto;
}
:invalid {
box-shadow: none;
}
strong{
font-weight: bold;
}
em{
font-style: italic;
}
.site-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
overflow: hidden;
position: relative;
background: #FFF;
}
.site-container{
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
/* Common
-----------------------------------------------------------------------------*/
.title {
font-weight: 500;
line-height: 110%;
color: #001A04;
}
.title_h1 {
font-size: 56px;
font-weight: 600;
letter-spacing: -0.02em;
}
.title_h2 {
font-size: 44px;
font-weight: 500;
letter-spacing: -0.02em;
}
.title_h3 {
font-size: 30px;
font-weight: 500;
letter-spacing: -0.01em;
}
.title_h4 {
font-size: 26px;
font-weight: 500;
}
.title_h5 {
font-size: 20px;
font-weight: 700;
}
.text-body{
font-size: 16px;
line-height: 150%;
color: #4E4E4E;
}
.text-body p{
margin-bottom: 20px;
}
.text-body ul{
margin: 0 0 0 14px;
list-style: disc;
}
.text-body ul li{
margin-bottom: 20px;
}
.text-body hr{
border: none;
border-top: 1px solid #D6D6D6;
margin: 60px 0 64px;
}
.text-body hr:last-child{
margin-bottom: 0;
}
.text-body h2{
font-weight: 500;
font-size: 30px;
line-height: 110%;
letter-spacing: -0.01em;
color: #001A04;
margin-bottom: 19px;
}
.text-body a{
color: #448F50;
text-decoration: none;
}
.button {
display: inline-flex;
justify-content: center;
align-items: center;
height: 49px;
padding: 10px 25px;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
line-height: 17px;
letter-spacing: -0.02em;
color: #001A04;
text-decoration: none;
transition: all 0.2s;
}
.button_green {
background: linear-gradient(91.96deg, #4FAA5E 0.79%, #377140 98.52%);
color: #fff;
transition: none 0.2s;
}
.button_green:hover{
background: #000;
}
.button_green:disabled{
background: #C6C6C6;
cursor: default;
}
.button_black {
background: #001A04;
color: #fff;
}
.button_black:hover{
background: #fff;
color: #001A04;
}
.button_black:disabled{
background: #001A04;
cursor: default;
}
.only-mobile{
display: none;
}
/* Header
-----------------------------------------------------------------------------*/
.site-header {
position: absolute;
top: 24px;
left: 0;
right: 0;
z-index: 102;
}
.site-header__container {
display: flex;
align-items: center;
padding: 11px 26px;
background: #FFFFFF;
border: 1px solid #EBEBEB;
box-shadow: 0px -2.56064px 15.3638px rgba(186, 186, 186, 0.05), 0px 32.4347px 12.8032px rgba(186, 186, 186, 0.01), 0px 17.9245px 11.0961px rgba(186, 186, 186, 0.05), 0px 7.68191px 7.68191px rgba(186, 186, 186, 0.09), 0px 1.70709px 4.26773px rgba(186, 186, 186, 0.1);
backdrop-filter: blur(10.7721px);
border-radius: 20px;
}
.site-header__left {
width: 100%;
}
.header-logo {
width: 85px;
margin: 5px 30px 0 3px;
}
.site-header__center {
flex-shrink: 0;
}
.header-nav ul,
.welcome__nav ul,
.mobile-nav ul{
display: flex;
font-weight: 600;
font-size: 15px;
line-height: 17px;
text-align: center;
letter-spacing: -0.02em;
color: #001A04;
margin-bottom: 2px;
}
.header-nav ul li,
.welcome__nav ul li,
.mobile-nav ul li{
margin: 0 12px;
}
.header-nav ul a,
.welcome__nav ul a,
.mobile-nav ul a{
display: inline-block;
color: #001A04;
text-decoration: none;
}
.header-nav ul a:hover,
.welcome__nav ul a:hover,
.mobile-nav ul a:hover{
color: #6B6B6B;
}
.header-nav ul li.current-menu-item a,
.welcome__nav ul li.current-menu-item a,
.mobile-nav ul li.current-menu-item a{
position: relative;
color: #448F50;
}
.header-nav ul li.current-menu-item a:before,
.welcome__nav ul li.current-menu-item a:before,
.mobile-nav ul li.current-menu-item a:before{
content: '';
display: block;
width: 26px;
height: 2px;
background: #448F50;
position: absolute;
bottom: -7px;
left: calc(50% - 13px);
}
.site-header__right {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-lang {
display: flex;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #A3A3A3;
text-transform: uppercase;
margin-bottom: 2px;
}
.header-lang li:not(:last-child):after{
content: '';
display: inline-block;
width: 1px;
height: 14px;
background: #D6D6D6;
margin: 0 8px;
transform: translateY(2px);
}
.header-lang li a{
color: #A3A3A3;
text-decoration: none;
}
.header-lang li a:hover{
color: #001A04;
}
.header-lang li span{
cursor: default;
color: #001A04;
}
.header-btn{
margin-left: 26px;
}
.header-btn a{
display: inline-flex;
justify-content: center;
align-items: center;
height: 49px;
padding: 10px 23px;
border: 1px solid #D6D6D6;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
line-height: 17px;
letter-spacing: -0.02em;
color: #001A04;
text-decoration: none;
transition: all 0.2s;
}
.header-btn a:hover{
background: #001A04;
border-color: #001A04;
color: #fff;
}
.short-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 35px 0 29px;
border-bottom: 1px solid #D6D6D6;
z-index: 1;
}
.short-header .header-logo {
width: 110px;
margin: 1px 30px -2px 2px;
}
/* Middle
-----------------------------------------------------------------------------*/
.welcome {
position: relative;
}
.welcome__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 0;
}
.welcome__bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.welcome__container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 732px;
padding: 142px 0 100px;
position: relative;
text-align: center;
}
.welcome__title {
width: 100%;
font-weight: 600;
font-size: 56px;
line-height: 56px;
letter-spacing: -0.02em;
color: #448F50;
margin-bottom: 45px;
}
.welcome__slider{
color: #001A04;
margin: -10px 0;
}
.welcome__slide{
padding: 10px 0 10px;
}
.welcome__slide:not(:first-child){
display: none;
}
.welcome__slider .slick-slide.process-in .welcome__slide{
animation: fadeInUp 1s ease-out 0s forwards;
}
.welcome__slider .slick-slide.process-out .welcome__slide{
animation: fadeOutUp 1s ease-out 0s forwards;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translateY(-30px);
}
}
.steps {
padding: 80px 0 0;
}
.steps__step {
display: flex;
align-items: center;
position: relative;
}
.steps__content {
width: 42%;
position: relative;
z-index: 1;
}
.steps__num {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: #E4F6E7;
border-radius: 20px;
font-size: 14px;
line-height: 21px;
color: #448F50;
margin-bottom: 24px;
}
.steps__num i{
width: 16px;
height: 17px;
display: block;
line-height: 0;
margin-right: 7px;
}
.steps__title {
margin-bottom: 23px;
}
.steps__text{
font-size: 18px;
line-height: 150%;
color: #4E4E4E;
}
.steps__text ul{
margin: 0 0 0 14px;
list-style: disc;
}
.steps__text ul li{
margin-bottom: 12px;
}
.steps__image {
width: 58%;
position: relative;
}
.steps__image span{
position: relative;
display: block;
}
.steps__step:nth-child(odd){
flex-direction: row-reverse;
}
.steps__step:nth-child(odd) .steps__content {
padding: 0 0 0 15px;
}
.steps__step:nth-child(odd) .steps__image{
padding: 0 22px 0 0;
}
.steps__step:nth-child(odd) .steps__image span{
margin: 0 0 0 -50px;
}
.steps__step:nth-child(even) .steps__content {
padding: 0 15px 0 0;
}
.steps__step:nth-child(even) .steps__image{
padding: 0 0 0 50px;
}
.steps__step:nth-child(even) .steps__image span{
margin: 0 -80px 0 0;
}
.steps__step:nth-child(1) .steps__image:before{
content: '';
display: block;
width: 963px;
height: 904px;
background: url('data:image/svg+xml,') no-repeat 0 0 / 100% auto;
position: absolute;
top: -100px;
left: -100px;
}
.steps__step:nth-child(2) .steps__image:before{
content: '';
display: block;
width: 1440px;
height: 1304px;
background: url('data:image/svg+xml,') no-repeat 0 0 / 100% auto;
position: absolute;
top: -500px;
right: -800px;
}
.steps__step:nth-child(3) .steps__image:before{
content: '';
display: block;
width: 1215px;
height: 663px;
background: url('data:image/svg+xml,') no-repeat 0 0 / 100% auto;
position: absolute;
top: 0;
left: -700px;
}
.how {
padding: 100px 0 94px;
color: #fff;
position: relative;
}
.how__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 0;
}
.how__bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.how .inner{
position: relative;
}
.how .title {
color: #fff;
}
.how__image{
margin: 42px -8px 48px;
}
.how__container {
display: flex;
margin: 0 -20px;
}
.how__col {
padding: 0 20px;
}
.how__content {
max-width: 100%;
padding-left: 20px;
position: relative;
}
.how__content:before{
content: '';
display: block;
width: 1px;
background-image: linear-gradient(rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 10px;
background-repeat: repeat-y;
position: absolute;
left: 0;
bottom: 5px;
}
.how__col:nth-child(1){width: 48.4%;}
.how__col:nth-child(2){width: 28.2%;}
.how__col:nth-child(3){width: 23.4%;}
.how__col:nth-child(1) .how__content{width: 305px;margin-left: 59px;}
.how__col:nth-child(2) .how__content{width: 260px;}
.how__col:nth-child(3) .how__content{width: 240px;}
.how__col:nth-child(1) .how__content:before{height: 210px;}
.how__col:nth-child(2) .how__content:before{height: 290px;}
.how__col:nth-child(3) .how__content:before{height: 200px;}
.how__subtitle {
margin-bottom: 10px;
}
.how__text {
color: #fff;
}
.get {
padding: 120px 0;
background: #F7F7F7;
}
.get__container {
display: flex;
flex-wrap: wrap;
margin: 30px -10px 0;
}
.get__col {
padding: 10px;
}
.get__col:nth-child(1),
.get__col:nth-child(4){
width: 41.8%;
}
.get__col:nth-child(2),
.get__col:nth-child(3){
width: 58.2%;
}
.get__item {
height: 100%;
display: flex;
padding: 40px;
background: #FFF;
border: 1px solid #EBEBEB;
box-shadow: 0px 20px 8px rgba(186, 186, 186, 0.01), 0px 11px 7px rgba(186, 186, 186, 0.05), 0px 5px 5px rgba(186, 186, 186, 0.09), 0px 1px 3px rgba(186, 186, 186, 0.1);
border-radius: 30px;
position: relative;
overflow: hidden;
}
.get__content {
position: relative;
}
.get__subtitle {
margin-bottom: 11px;
}
.get__image{
max-width: 100%;
line-height: 0;
position: relative;
}
.get__bg {
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -50px;
line-height: 0;
}
.get__bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.get__btn {
position: relative;
}
.get__item_1{
flex-direction: column;
justify-content: space-between;
}
.get__item_1 .get__image{
width: 380px;
margin: 62px auto -40px;
}
.get__item_2 .get__image{
width: 224px;
flex-shrink: 0;
margin: 18px -40px -40px 75px;
}
.get__item_3 .get__image{
width: 273px;
flex-shrink: 0;
margin: 46px -40px -40px 30px;
}
.get__item_4{
flex-direction: column;
justify-content: space-between;
}
.get__item_4 .get__subtitle,
.get__item_4 .get__text{
color: #fff;
}
.page-id-131 .get__item_1 .get__image {
margin: 30px auto -40px;
}
.page-id-131 .get__item_2 .get__image {
margin: -1px -13px -40px 35px;
}
.client {
padding: 102px 0;
text-align: center;
}
.client__tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: #E4F6E7;
border-radius: 20px;
font-size: 14px;
line-height: 21px;
color: #448F50;
margin-bottom: 18px;
}
.client__tag i{
width: 16px;
height: 17px;
display: block;
line-height: 0;
margin-right: 7px;
}
.client__title {
width: 850px;
max-width: 100%;
margin: 0 auto;
}
.client__title span{
color: #A3A3A3;
}
.client__marquee{
margin: 63px 0 0;
}
.client__marquee-inner{
display: flex;
animation: marquee 50s linear 0s infinite;
}
@keyframes marquee{
from {transform: translateX(0%);}
to {transform: translateX(-90%);}
}
.client__slider{
display: none;
}
.client__item {
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 111px;
/* padding: 15px;*/
flex-shrink: 0;
border: 1px solid #EBEBEB;
border-radius: 16px;
margin: 0 12px;
}
.tools {
background: #F7F7F7;
padding: 98px 0 121px;
overflow: hidden;
}
.tools__items {
display: flex;
margin: 100px 20px 100px 304px;
}
.tools__item {
width: 33.3333333333%;
padding: 0 42px;
}
.tools__num {
font-weight: 700;
font-size: 24px;
line-height: 29px;
margin-bottom: 10px;
}
.tools__desc {
font-size: 16px;
line-height: 24px;
color: #6B6B6B;
}
.tools__container {
display: flex;
margin-top: 38px;
}
.tools__left {
width: 33.9%;
padding-right: 42px;
}
.tools__nav {
font-weight: 500;
font-size: 16px;
line-height: 19px;
}
.tools__nav li{
margin-right: 12px;
border-top: 1px solid #DEDEDE;
}
.tools__nav li:first-child{
border-top-color: transparent;
}
.tools__nav li:last-child{
border-bottom: 1px solid#DEDEDE;
}
.tools__nav li.active + li{
border-top-color: transparent;
}
.tools__nav li.active:last-child,
.tools__nav li:last-child:hover{
border-bottom-color: transparent;
}
.tools__nav li span{
display: block;
border: 1px solid transparent;
padding: 23px 51px 19px;
border-radius: 14px;
position: relative;
cursor: pointer;
user-select: none;
}
.tools__nav li:hover{
border-color: transparent;
}
.tools__nav li:hover span{
border-color: #fff;
background: #fff;
}
.tools__nav li.active{
border-color: transparent;
}
.tools__nav li:hover + li{
border-top-color: transparent;
}
.tools__nav li.active span{
border-color: #EBEBEB;
background: #fff;
box-shadow: 0px 20px 8px rgba(186, 186, 186, 0.01), 0px 11px 7px rgba(186, 186, 186, 0.05), 0px 5px 5px rgba(186, 186, 186, 0.09), 0px 1px 3px rgba(186, 186, 186, 0.1);
cursor: default;
}
.tools__nav li span:before{
content: '';
display: block;
width: 14px;
height: 14px;
border: 1px solid #A3A3A3;
background: #fff;
border-radius: 50%;
position: absolute;
top: calc(50% - 7px);
left: 23px;
}
.tools__nav li.active span:before{
width: 16px;
height: 16px;
background: linear-gradient(91.96deg, #4FAA5E 0.79%, #377140 98.52%);
border: none;
}
.tools__right {
width: 66.1%;
}
.tools__switcher{
display: none;
}
.tools__slider {
border: 1px solid #DEDEDE;
border-radius: 30px;
background: #fff;
box-shadow: 0px 20px 8px rgba(186, 186, 186, 0.01), 0px 11px 7px rgba(186, 186, 186, 0.05), 0px 5px 5px rgba(186, 186, 186, 0.09), 0px 1px 3px rgba(186, 186, 186, 0.1);
}
.tools__slide:not(:first-child){
display: none;
}
.tools__wrapper{
padding: 39px 40px 40px;
display: flex;
}
.tools__content {
width: 365px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tools__title {
margin-bottom: 17px;
}
.tools__bottext{
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #001A04;
}
.tools__image {
width: calc(100% - 400px);
padding: 0;
text-align: center;
position: relative;
}
.tools__image span{
display: block;
line-height: 0;
margin: -40px -76px -40px 0;
}
.tools__foot{
display: none;
}
.why {
padding: 98px 0 59px;
}
.why__container {
display: flex;
}
.why__left {
width: 33.9%;
padding-right: 42px;
}
.why__right {
width: 66.1%;
padding: 11px 0 0;
}
.why__items {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.why__item {
width: 50%;
padding: 0 10px 31px;
}
.why__subtitle span{
/* display: block; */
color: #448F50;
}
.why__text{
width: 330px;
max-width: 100%;
}
.why__text:not(:first-child){
margin: 9px 0;
}
.demo{
position: relative;
padding: 80px 0 83px;
text-align: center;
color: #fff;
}
.demo__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 0;
}
.demo__bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.demo__container {
position: relative;
}
.demo__icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: linear-gradient(18.15deg, rgba(255, 255, 255, 0.4) 11.42%, rgba(255, 255, 255, 0.04) 90.14%);
border: 1px solid rgba(222, 225, 220, 0.11);
border-radius: 10px;
margin: 0 auto 17px;
}
.demo__title {
color: #fff;
margin-bottom: 23px;
}
.demo__btn {
margin-bottom: 20px;
}
.safe {
padding: 100px 0 71px;
background: #F7F7F7;
text-align: center;
}
.safe__tag {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: #E4F6E7;
border-radius: 20px;
font-size: 14px;
line-height: 21px;
color: #448F50;
margin-bottom: 22px;
}
.safe__tag i{
width: 16px;
height: 17px;
display: block;
line-height: 0;
margin-right: 7px;
}
.safe__container {
display: flex;
flex-wrap: wrap;
text-align: left;
margin: 39px 88px 19px;
}
.safe__col {
width: 50%;
padding: 0 10px 20px;
}
.safe__item {
height: 100%;
padding: 39px 39px;
background: #FFF;
border: 1px solid #EBEBEB;
box-shadow: 0px 20px 8px rgba(186, 186, 186, 0.01), 0px 11px 7px rgba(186, 186, 186, 0.05), 0px 5px 5px rgba(186, 186, 186, 0.09), 0px 1px 3px rgba(186, 186, 186, 0.1);
border-radius: 20px;
}
.safe__icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: #F7F7F7;
border: 1px solid #EBEBEB;
border-radius: 10px;
margin-bottom: 32px;
}
.safe__subtitle{
margin-bottom: 15px;
}
.faq {
padding: 100px 0;
}
.faq__container {
width: 964px;
max-width: 100%;
margin: 40px auto 0;
}
.faq__item {
border-bottom: 1px solid #EBEBEB;
padding: 24px 0 22px;
}
.faq__item:first-child{
border-top: 1px solid #EBEBEB;
}
.faq__question {
cursor: pointer;
padding-right: 50px;
font-weight: 500;
font-size: 20px;
line-height: 24px;
position: relative;
user-select: none;
}
.faq__question:hover{
color: #6B6B6B;
}
.faq__question i{
display: block;
line-height: 0;
position: absolute;
top: 7px;
right: 5px;
}
.faq__item.active .faq__question i svg{
transform: rotate(180deg);
}
.faq__answer {
display: none;
padding-top: 15px;
}
.page-form {
padding: 200px 0 108px;
}
.page-form__container {
display: flex;
margin: 0 -10px;
}
.page-form__col {
width: 50%;
padding: 0 10px;
}
.form-author {
display: flex;
align-items: center;
margin-top: 32px;
}
.form-author__image {
width: 64px;
height: 64px;
flex-shrink: 0;
line-height: 0;
margin-right: 12px;
}
.form-author__image img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.form-author__name {
font-size: 18px;
line-height: 27px;
}
.form-author__status {
font-size: 16px;
line-height: 24px;
color: #6B6B6B;
}
.page-form__form {
width: 472px;
max-width: 100%;
margin: 12px 0 0;
}
.form-input{
margin-bottom: 25px;
}
.form-input_other{
display: none;
}
.form-input input{
width: 100%;
height: 48px;
padding: 0 20px;
border: 1px solid #D6D6D6;
border-radius: 12px;
font-weight: 500;
font-size: 15px;
color: #001A04;
}
.form-input input:hover{
border-color: #A3A3A3;
}
.form-input input:focus{
border-color: #001A04;
}
.form-label {
display: block;
font-size: 14px;
line-height: 21px;
color: #6B6B6B;
margin-bottom: 4px;
}
.form-label i{
display: inline-block;
vertical-align: super;
line-height: 0;
margin-left: 5px;
transform: translateY(-5px);
}
.form-label i svg{
fill: #FA450B;
}
.form-radio{
margin-bottom: 24px;
}
.form-radio .wpcf7-form-control{
margin: 14px 0 0;
}
.form-radio .wpcf7-list-item{
display: block;
margin: 0 0 9px;
}
.form-radio .wpcf7-list-item label{
display: inline-block;
}
.form-radio .wpcf7-list-item label input{
opacity: 0;
position: absolute;
left: -20000px;
}
.form-radio .wpcf7-list-item label span{
display: inline-block;
padding-left: 23px;
font-weight: 500;
font-size: 14px;
line-height: 22px;
color: #001A04;
position: relative;
}
.form-radio .wpcf7-list-item label span:before{
content: '';
display: block;
width: 12px;
height: 12px;
border: 1px solid #A3A3A3;
border-radius: 50%;
position: absolute;
top: 4px;
left: 0;
}
.form-radio .wpcf7-list-item label:hover span{
color: #4E4E4E;
}
.form-radio .wpcf7-list-item label:hover span:before{
border-color: #001A04;
}
.form-radio .wpcf7-list-item label input:checked + span:before{
border-color: #001A04;
}
.form-radio .wpcf7-list-item label input:checked + span{
color: #001A04 !important;
}
.form-radio .wpcf7-list-item label input:checked + span:before{
width: 4px;
height: 4px;
border-width: 5px;
}
.form-checkbox {
margin-bottom: 24px;
}
.form-checkbox .wpcf7-list-item{
margin: 0;
}
.form-checkbox label{
display: inline-block;
}
.form-checkbox label input{
opacity: 0;
position: absolute;
left: -20000px;
}
.form-checkbox label span{
display: inline-block;
padding-left: 23px;
font-weight: 500;
font-size: 12px;
line-height: 17px;
color: #001A04;
position: relative;
}
.form-checkbox label span:before{
content: '';
display: block;
width: 12px;
height: 12px;
border: 1px solid #A3A3A3;
border-radius: 2px;
position: absolute;
top: 3px;
left: 0;
}
.form-checkbox label:hover span{
color: #4E4E4E;
}
.form-checkbox label:hover span:before{
border-color: #001A04;
}
.form-checkbox label input:checked + span:before{
border-color: #001A04;
}
.form-checkbox label input:checked + span{
color: #001A04 !important;
}
.form-checkbox label input:checked + span:before{
border-color: #001A04;
background: #001A04 url('data:image/svg+xml,') no-repeat center center / 10px auto;
}
.form-checkbox label span a{
color: #448F50;
}
.form-text{
font-weight: 500;
font-size: 12px;
line-height: 17px;
color: #001A04;
margin-top: 20px;
}
.wpcf7-form:not(.invalid) .wpcf7-not-valid-tip,
.wpcf7-response-output{
display: none !important;
}
.wpcf7-not-valid-tip{
margin-top: 5px;
font-weight: 500;
font-size: 12px;
line-height: 17px;
color: #FA450B;
}
.wpcf7-form.invalid .wpcf7-not-valid{
border-color: #FA450B;
}
.intl-tel-input.separate-dial-code .selected-flag{
background: none !important;
}
.grecaptcha-badge { visibility: hidden; }
.page-info {
position: relative;
}
.page-info__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 0;
}
.page-info__bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.page-info__container {
padding: 217px 0;
}
.page-info__block {
width: 736px;
max-width: 100%;
margin: 0 auto;
position: relative;
}
.page-info__decor {
width: 612px;
position: absolute;
top: -51px;
left: 54px;
}
.page-info__content {
position: relative;
text-align: center;
}
.page-info__tag{
display: inline-flex;
align-items: center;
padding: 6px 16px;
background: #E4F6E7;
border-radius: 20px;
font-size: 16px;
line-height: 24px;
color: #448F50;
margin-bottom: 16px;
}
.page-info__tag i{
width: 24px;
height: 24px;
display: block;
line-height: 0;
margin-right: 4px;
}
.page-info__title {
margin-bottom: 25px;
}
.page-info__text {
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #1B1B1B;
margin-bottom: 24px;
}
.page-welcome {
position: relative;
}
.page-welcome__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 0;
}
.page-welcome__bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.page-welcome__container {
height: 389px;
padding: 135px 0 50px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.page-welcome__title {
color: #448F50;
}
.page-content{
padding: 99px 0;
}
.page-content__text{
width: 764px;
max-width: 100%;
margin: 0 auto;
}
/* Footer
-----------------------------------------------------------------------------*/
.site-footer {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
position: relative;
background: #F7F7F7;
}
.site-footer__container {
display: flex;
padding: 80px 0 47px;
margin: 0 -10px;
}
.site-footer__col {
padding: 0 10px;
}
.site-footer__col:nth-child(1){width: 33.3%;}
.site-footer__col:nth-child(2){width: 25%;}
.site-footer__col:nth-child(3){width: 25%;}
.site-footer__col:nth-child(4){width: 16.7%;}
.footer-logo {
width: 166px;
}
.footer-menu ul{
font-weight: 600;
font-size: 15px;
line-height: 17px;
letter-spacing: -0.02em;
color: #001A04;
margin-bottom: 2px;
}
.footer-menu ul li{
margin-bottom: 30px;
}
.footer-menu ul a{
color: #001A04;
text-decoration: none;
}
.footer-menu ul a:hover{
color: #6B6B6B;
}
.footer-menu ul li.current-menu-item a{
position: relative;
color: #448F50;
}
.footer-menu ul li.current-menu-item a:before{
content: '';
display: block;
width: 26px;
height: 2px;
background: #448F50;
position: absolute;
bottom: -5px;
left: calc(50% - 13px);
}
.site-footer__title {
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #001A04;
margin-bottom: 20px;
}
.footer-contact {
font-size: 14px;
line-height: 21px;
color: #6B6B6B;
}
.footer-contact li{
margin-bottom: 15px;
}
.footer-contact a{
color: #6B6B6B;
text-decoration: none;
}
.footer-contact a:hover{
color: #001A04;
}
.footer-contact a i{
display: inline-block;
line-height: 0;
margin-left: 8px;
vertical-align: middle;
}
.footer-contact a i svg{
fill: #6B6B6B;
}
.footer-contact a:hover i svg{
fill: #001A04;
}
.site-footer__bottom {
display: flex;
border-top: 1px solid #D6D6D6;
padding: 24px 0 40px;
}
.site-footer__bottom-item {
width: 43.7%;
font-size: 12px;
line-height: 16px;
color: #6B6B6B;
}
.site-footer__bottom-item a{
color: #6B6B6B;
text-decoration: none;
}
.site-footer__bottom-item a:hover{
color: #001A04;
}
.site-footer__bottom-item ul{
display: flex;
flex-wrap: wrap;
}
.site-footer__bottom-item ul li:not(:last-child):after{
content: '|';
display: inline-block;
margin: 0 4px;
}
/* Mobile
-----------------------------------------------------------------------------*/
.mobile-panel-overlay{
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 40;
overflow-y: scroll;
transition: all 0.2s;
}
.mobile-panel-overlay.show{
visibility: visible;
opacity: 1;
}
.mobile-panel{
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
padding: 115px 20px 26px;
background: #fff;
transition: all 0.2s ease-out 0s;
z-index: 101;
}
.mobile-panel.show{
visibility: visible;
opacity: 1;
}
.mobile-panel__body {
height: calc(100% - 70px);
overflow-y: auto;
margin-bottom: 20px;
}
.mobile-nav{
padding-bottom: 15px;
border-bottom: 1px solid #EBEBEB;
margin-bottom: 32px;
}
.mobile-nav ul li{
margin: 0 32px 20px 0;
}
.mobile-lang__title {
font-size: 14px;
line-height: 21px;
margin-bottom: 12px;
}
.mobile-lang__list {
display: flex;
flex-wrap: wrap;
}
.mobile-lang__list li{
margin: 0 10px 10px 0;
}
.mobile-lang__list li a,
.mobile-lang__list li span{
display: inline-flex;
min-width: 68px;
padding: 7px 24px;
border: 1px solid #D6D6D6;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
color: #001A04;
text-decoration: none;
}
.mobile-lang__list li span{
border-color: #000;
color: #000;
cursor: default;
}
.mobile-panel__btn .button{
width: 100%;
}
/* Redactor Styles
-----------------------------------------------------------------------------*/
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
margin: auto;
text-align: center;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float:left;
margin: 5px 20px 20px 0;
}
.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
a img.alignright {
float:right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float:left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
max-width: 100%;
padding: 0 0 10px;
text-align: center;
margin-top:20px !important;
margin-bottom:20px !important;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border:3px solid #dbdddd;
height: auto;
margin:0 0 5px 0;
max-width: 98.5%;
padding:0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size:12pt;
line-height:17px;
margin:0;
padding:0 4px 5px;
}
/* Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px){
.inner{
margin-left: 20px;
margin-right: 20px;
}
.site-header__container{
margin: 0 -9px;
}
.welcome__container{
height: 600px;
padding: 130px 0 50px;
}
.how,
.get,
.client,
.tools,
.faq{
padding: 80px 0;
}
.why{
padding: 80px 0 50px;
}
.why__container{
flex-direction: column;
}
.why__title.title{
margin-bottom: 24px;
}
.why__title.title br{
display: none;
}
.why__left{
width: 100%;
padding: 0;
}
.why__right{
width: 100%;
padding: 0;
}
.safe {
padding: 80px 0 50px;
}
.safe__container{
margin: 39px -10px 0;
}
.tools__items {
margin: 50px -42px;
}
.tools__left{
padding-right: 20px;
}
.tools__wrapper{
min-height: auto;
padding: 20px 15px;
}
.tools__image{
width: 200px;
flex-shrink: 0;
}
.tools__image span{
margin: -20px -20px -20px 0;
}
.tools__content{
width: 100%;
}
}
@media only screen and (max-width: 992px){
.site-header {
top: 20px;
}
.site-header__container {
padding: 14px 17px;
border-radius: 10px;
}
.header-logo {
width: 75px;
margin: 5px 30px 0 2px;
}
.site-header__center,.header-lang,.header-btn{
display: none;
}
.touch-menu {
position: relative;
overflow: hidden;
padding: 0;
width: 25px;
height: 25px;
font-size: 0;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
margin: 1px 0 0 33px;
}
.touch-menu:focus {
outline: none;
}
.touch-menu span {
display: block;
position: absolute;
top: 10px;
left: 0;
right: 0;
height: 2px;
background: #001A04;
-webkit-transition: background 0 0.3s;
transition: background 0 0.3s;
}
.touch-menu span::before,
.touch-menu span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background-color: #001A04;
content: '';
-webkit-transition-duration: 0.3s, 0.3s;
transition-duration: 0.3s, 0.3s;
-webkit-transition-delay: 0.3s, 0;
transition-delay: 0.3s, 0;
}
.touch-menu span::before {
top: -8px;
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform;
}
.touch-menu span::after {
bottom: -8px;
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
}
.touch-menu.active span {
background: none;
}
.touch-menu.active span::before {
top: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.touch-menu.active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.touch-menu.active span::before,
.touch-menu.active span::after {
-webkit-transition-delay: 0, 0.3s;
transition-delay: 0, 0.3s;
}
.site-footer__container{
flex-direction: column;
padding: 60px 0 0;
}
.site-footer__col{
width: 100% !important;
padding-bottom: 20px;
}
}
@media only screen and (max-width: 767px){
.title_h1 {
font-size: 30px;
}
.title_h2 {
font-size: 28px;
letter-spacing: -0.01em;
}
.title_h3 {
font-size: 28px;
}
.text-body ul li {
margin-bottom: 9px;
}
.welcome__container {
height: 688px;
padding: 207px 0 50px;
justify-content: flex-start;
}
.welcome__nav{
margin-bottom: 28px;
}
.welcome__title{
font-size: 30px;
line-height: 33px;
margin-bottom: 24px;
}
.steps{
padding: 64px 0 0;
}
.steps__container{
margin-bottom: -13px;
}
.steps__step{
flex-direction: column !important;
margin: 0 0 36px;
}
.steps__content{
width: 100%;
padding: 0 0 12px !important;
}
.steps__num {
font-size: 12px;
line-height: 19px;
margin-bottom: 15px;
}
.steps__title {
margin-bottom: 17px;
}
.steps__text {
font-size: 16px;
}
.steps__image{
width: 100%;
padding: 0 !important;
}
.steps__step:nth-child(1) .steps__image:before{
width: 600px;
height: 600px;
top: -100px;
left: -100px;
}
.steps__step:nth-child(2) .steps__image:before{
width: 600px;
height: 600px;
top: 0;
right: -200px;
}
.steps__step:nth-child(3) .steps__image:before{
width: 600px;
height: 300px;
top: 0;
left: -200px;
}
.steps__image span{
margin: 0 auto !important;
}
.how{
padding: 64px 0 29px;
}
.how__title{
text-align: center;
}
.how__image {
text-align: center;
margin: 22px 2px 33px;
}
.how__container{
flex-direction: column;
}
.how__col{
width: 100% !important;
padding: 0 20px 35px;
}
.how__content{
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.how__content:before{
display: none !important;
}
.get {
padding: 64px 0 36px;
}
.get__container {
margin: 14px -10px;
}
.get__col{
width: 100% !important;
padding: 10px 10px 14px;
}
.get__item {
flex-direction: column !important;
padding: 23px;
border-radius: 20px;
}
.get__subtitle.title{
font-size: 22px;
margin-bottom: 8px;
}
.get__item_1 .get__image {
margin: 52px auto -23px;
}
.get__item_2 .get__image{
width: 195px;
margin: 4px -17px -24px auto;
}
.get__item_3 .get__image {
width: 240px;
margin: 13px -24px -24px auto;
}
.get__item_4 .get__subtitle.title{
width: 230px;
max-width: 100%;
margin-bottom: 12px;
}
.get__item_4 .get__text{
width: 230px;
max-width: 100%;
margin-bottom: 35px;
}
.page-id-131 .get__item_2 .get__image {
width: 150px;
margin: -2px 18px -60px auto;
}
.client{
padding: 63px 0;
}
.client__tag{
padding: 5px 12px;
font-size: 12px;
line-height: 19px;
margin-bottom: 17px;
}
.client__marquee {
display: none;
}
.client__item{
width: 100%;
height: auto;
padding-top: 60%;
position: relative;
border-radius: 6px;
margin: 0;
}
.client__item img{
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
}
.client__slider{
display: block;
margin: 41px -20px 0;
}
.client__slide{
padding: 0 10px;
}
.only-mobile{
display: block;
}
.only-desktop{
display: none;
}
.tools {
padding: 65px 0;
}
.tools__container{
flex-direction: column;
margin-top: 25px;
}
.tools__left{
display: none;
}
.tools__switcher{
display: block;
width: calc(100% + 20px);
margin: 0 -20px 15px 0;
}
.tools__switch{
padding-right: 8px;
}
.tools__switch span{
display: block;
border: 1px solid #D6D6D6;
border-radius: 10px;
padding: 13px 19px 13px 31px;
position: relative;
font-weight: 500;
font-size: 16px;
line-height: 20px;
cursor: pointer;
user-select: none;
overflow: hidden;
transition: color 0.2s;
}
.tools__switch span:before{
content: '';
display: block;
width: 10px;
height: 10px;
border: 1px solid #A3A3A3;
border-radius: 50%;
position: absolute;
top: 17px;
left: 12px;
}
.slick-current .tools__switch span{
background: #fff;
}
.slick-current .tools__switch span:before{
width: 12px;
height: 12px;
border: none;
background: linear-gradient(91.96deg, #4FAA5E 0.79%, #377140 98.52%);
}
.tools__right{
width: 100%;
padding: 0;
}
.tools__slider{
border-radius: 20px;
}
.tools__slider .slick-track{
display: flex !important;
}
.tools__slider .slick-slide{
height: inherit !important;
}
.tools__slider .slick-slide > div{
height: 100% !important;
}
.tools__slide{
height: 100%;
}
.tools__wrapper{
height: 100%;
flex-direction: column-reverse;
align-items: flex-end;
padding: 15px 17px 23px 22px;
}
.tools__info{
margin-bottom: 20px;
}
.tools__title.title_h3 {
font-size: 22px;
margin-bottom: 12px;
}
.tools__image {
width: 166px;
margin-bottom: 14px;
}
.tools__image span{
margin: 0;
}
.tools__content {
flex-grow: 1;
}
.tools__text{
margin: 0 10px 0 0;
}
.tools__foot{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
}
.slider-nums{
font-size: 16px;
line-height: 24px;
}
.slider-arrows{
display: flex;
}
.slider-arrows__prev,
.slider-arrows__next{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: #F7F7F7;
border: 1px solid #A3A3A3;
border-radius: 8px;
cursor: pointer;
margin-left: 12px;
}
.slider-arrows__prev{
transform: rotate(90deg);
}
.slider-arrows__next{
transform: rotate(-90deg);
}
.why {
padding: 63px 0 38px;
}
.why__subtitle.title{
font-size: 22px;
margin-bottom: 12px;
}
.why__subtitle br{
display: none;
}
.why__item{
width: 100%;
padding: 0 10px 17px;
}
.why__item:nth-child(1){
padding: 0 10px;
}
.demo {
padding: 63px 0 68px;
}
.demo__title {
margin-bottom: 17px;
}
.safe{
padding: 63px 0 29px;
}
.safe__tag{
font-size: 12px;
line-height: 19px;
margin-bottom: 17px;
}
.safe__container {
margin: 23px -10px;
}
.safe__col{
width: 100%;
padding: 0 10px 12px;
}
.safe__item {
padding: 23px 23px;
}
.safe__subtitle.title{
font-size: 22px;
margin-bottom: 12px;
}
.faq {
padding: 63px 0;
}
.faq__container {
margin: 25px auto 0;
}
.faq__item {
padding: 12px 0 11px;
}
.faq__question{
font-size: 16px;
line-height: 130%;
}
.faq__answer.text-body{
font-size: 14px;
padding: 8px 55px 0 0;
}
.faq__question i{
top: calc(50% - 4px);
}
.short-header{
padding: 25px 0 19px;
}
.short-header .header-logo{
width: 75px;
margin: 1px 0 0 10px;
}
.page-form {
padding: 129px 0 64px;
}
.page-form__container{
flex-direction: column;
}
.page-form__col{
width: 100%;
}
.form-author {
margin: 16px 0 27px;
}
.form-author__image{
width: 48px;
height: 48px;
}
.form-author__name{
font-size: 16px;
}
.form-author__status{
font-size: 12px;
line-height: 22px;
}
.page-info__container {
padding: 221px 0;
}
.page-info__decor {
width: 350px;
top: -12px;
left: -6px;
}
.page-info__tag{
font-weight: 500;
font-size: 12px;
line-height: 18px;
}
.page-info__tag i{
width: 18px;
height: 18px;
}
.page-info__title {
margin-bottom: 16px;
}
.page-info__text{
font-size: 16px;
line-height: 21px;
}
.page-welcome__container {
height: 296px;
padding: 91px 0 50px;
}
.page-content {
padding: 63px 0;
}
.text-body hr {
margin: 32px 0 36px;
}
.text-body h2 {
font-size: 28px;
margin-bottom: 20px;
}
.site-footer__container{
padding: 40px 0 0;
}
.site-footer__col{
padding-bottom: 0;
}
.footer-logo{
width: 94px;
margin-bottom: 23px;
}
.footer-menu{
margin-bottom: 15px;
}
.footer-menu ul{
display: flex;
}
.footer-menu ul li{
margin: 0 33px 15px 0;
}
.site-footer__title{
margin-bottom: 12px;
}
.footer-contact{
margin-bottom: 24px;
}
.footer-contact li {
margin-bottom: 10px;
}
.site-footer__bottom{
flex-direction: column;
padding: 10px 0 30px;
}
.site-footer__bottom-item{
width: 100%;
margin-bottom: 12px;
}
}