@font-face {
    font-family: 'Geologica';
    src: url('../font/Geologica-Medium.eot');
    src: local('../font/Geologica Medium'), local('../font/Geologica-Medium'),
        url('../font/Geologica-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/Geologica-Medium.woff2') format('woff2'),
        url('../font/Geologica-Medium.woff') format('woff'),
        url('../font/Geologica-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('../font/Geologica-Light.eot');
    src: local('../font/Geologica Light'), local('../font/Geologica-Light'),
        url('../font/Geologica-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/Geologica-Light.woff2') format('woff2'),
        url('../font/Geologica-Light.woff') format('woff'),
        url('../font/Geologica-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('../font/Geologica-ExtraLight.eot');
    src: local('../font/Geologica ExtraLight'), local('../font/Geologica-ExtraLight'),
        url('../font/Geologica-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../font/Geologica-ExtraLight.woff2') format('woff2'),
        url('../font/Geologica-ExtraLight.woff') format('woff'),
        url('../font/Geologica-ExtraLight.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geologica';
    src: url('../font/Geologica-Regular.eot');
    src: local('../font/Geologica Regular'), local('../font/Geologica-Regular'),
        url('../font/Geologica-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/Geologica-Regular.woff2') format('woff2'),
        url('../font/Geologica-Regular.woff') format('woff'),
        url('../font/Geologica-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
  --color_white:#FFFFFF;
  --color_dark:#40444f;
  --color_gray:#f8fafd;
  --blue_light: #E6F3FF; 
   --blue_light2:#B8E0FF;
   --blue_light3:#91D5FF;
   --blue_light4:#69C7FF;
   --color_blue:#2F54EB;
   --color_blue2:#1136CD;
  --transition100: 100ms ease-in-out;
  --transition300: 300ms ease-in-out;
  
  --color_dark_light: #818181;
  --red: #9C341F;
  
  
 
}
* {padding: 0;	margin: 0; -webkit-tap-highlight-color:transparent;}
*, *:before, *:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
:focus, :active, a:focus, a:active {outline: none;}
input, button, textarea, select {
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
}
button{
	border:none;
	outline:none;
	transition-duration: 0.2s;
}
body {
    font-family: 'Geologica';
    font-size: 20px;
    line-height: 115%;
    font-weight: 300;
    color: var(--color_dark);
}
.container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
h1,h3,h4,h5,.h1,.h3,.h4,.h5{
	font-weight:400;
	line-height:120%;
}
h2,.h2{
	font-weight:500;
	line-height:120%;
	color: var(--color_dark);
}
/* h3,.h1,.h2,.h3{
	color:var(--color_blue);
} */
h2,.h2{
	font-size:32px;
}
h3,.h3{
	font-size:24px;
}
h4,.h4{
	font-size:20px;
}
input[type="text"] {
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid #E2E3E8;
    height: 50px;
    transition-duration: 0.2s;
    font-family: 'Geologica';
    font-weight: 100;
}
footer{
    padding: 20px 0;
    font-size: 14px;
    line-height: 16px;
    margin-top: auto;
}
.img-responsive{
	max-width:100%;
	object-fit: contain;
}
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="email"] {
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    height: 54px;
    transition-duration: 0.2s;
    font-family: 'Geologica';
    font-weight: 100;
	outline:none;
	font-size:18px;
	    -webkit-appearance: none;
    -moz-appearance: none;
	 background-color: var(--color_white);
}
input:not(:placeholder-shown) ,
input:-webkit-autofill,
input:invalid,
input:valid,
input::not(:placeholder-shown) {
  background-color: var(--color_white);
}
	input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important; /* Белый фон */
  -webkit-text-fill-color: #333 !important; /* Цвет текста */
}
textarea {
    padding: 20px 20px 10px 20px;
    border-radius: 10px;
    border: none;
    height: 120px;
    width: 100%;
    transition: 0.2s;
    font-family: 'Geologica';
    font-weight: 100;
	outline:none;
	font-size:18px;
}
#popup button,
.default__btn {
    background: var(--color_blue);
    color: #fff;
}
#popup button,
.default__btn {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    height: 54px;
    padding: 0 30px;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition-duration: 0.2s;
    white-space: nowrap;
    cursor: pointer;
	outline:none;
	
}
#popup button:hover,
.default__btn:hover{
	transition-duration: 0.2s;
	/* background: var(--blue_light4); */
	background: var(--color_blue2);
}
footer .footer, header .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section{
	padding-top:40px;
	padding-bottom:40px;
}
ul {
	list-style-type:none;
}
/* header */
.header-right{
	display:flex;
	align-items:center;
	gap:20px;
}
.header-right a{
	text-decoration:none;
}
.header-right .icon-container{
	display:flex;
	align-items:center;
	gap:10px;
}
header{
	padding:10px 0;
}
.top-bg-body{
	position:relative;
}
.svgicon-container {
	    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
}
.top-bg-container{
	position:relative;
	z-index:2;
}
.top-bg-all{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
}
.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2s ease-in-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
.top-bg-right{
	display:flex;
	justify-content:flex-end;
}


/* top bg*/
header,
.top-section{
	background: var(--blue_light);
}
.top-bg{
	display:flex;
	flex-direction:column;
	gap:20px;
}
.top-bg h1{
	display: flex;
    flex-direction: column;
    font-size: 46px;
    align-items: flex-start;
    gap: 10px;
	/*font-weight: 100;*/
	text-transform: uppercase;
}
.top-bg h1 b{
	font-weight:700;
}
.top-bg h1 span{
	color:var(--color_dark);
	 border-bottom: 5px solid var(--color_blue);
	 font-weight:700;
	
}
.top-bg ul{
	display:flex;
	flex-direction:column;
	gap:10px;
	font-size:20px;
	/*font-weight: 100;*/
}
/* services */
.how-tariff-grid{
    gap: 20px;
	display: flex;
    justify-content: space-between;
}
.tariff-grid{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.services-grid{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.service-item-body.step{
	justify-content: center;
    font-weight: 900;
	padding: 0;
}
.service-item-body{
    padding: 20px;
    display: flex;
    gap: 20px;
    border-radius: 10px;
	align-items: center;
}

.service-item-body.bg{
	background: var(--blue_light);
}
.service-item-body .service-step{
	    font-size: 200px;
    line-height: 100%;
}
.service-ico span{
	/* background: var(--blue_light2); */
	background: var(--color_blue);
	/* color: var(--blue_light2); */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    min-width: 90px;
    height: 90px;
    border-radius: 10px;
}
.service-item{
	 display: flex;
	 flex-direction:column;
	 gap:10px;
}
.service-item p{
	font-size: 20px;
/*font-weight: 100;*/
	line-height:120%;
}
.service-item-body svg{
	min-width:60px;
}
.tariff-right-col{
	display:flex;
	flex-direction:column;
	gap:20px;
}
.services-col{
	display:flex;
	flex-direction:column;
	gap:40px;
}
.service-item h3{
	/* display:flex;
	flex-direction:column; */
	font-weight: 500;
}
.services-main{
	font-size: 50px;
    line-height: 120%;
    font-weight: 500;
	display:flex;
	flex-direction:column;
	gap: 20px;
	margin-top: 50px;
}
.services-main .services-animation{
	display:flex;
	justify-content:end;
	min-height:65px;
}
.services-main #insert-placeholder{	
    border-bottom:5px solid var(--color_dark);    
	font-weight:500;
}

@media (min-width: 1199px) {
	.services-col h2{
		font-size: 50px;
	}
	.top-section{
		position:relative;
		
		margin-bottom:150px;
	}
	.top-bg{
		position: relative;
		z-index: 1;
	}
	.top-section-after{
		content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: var(--blue_light);
        height: 100%;
        bottom: -100px;
        width: 100%;
        display: flex;
        clip-path: ellipse(100% 100% at 50% 0%);
        -webkit-clip-path: ellipse(100% 100% at 50% 0%);
		
	}
	
}
/* tariff */
.how-tariff{
	  background: var(--blue_light);
	  padding-top: 60px;
    padding-bottom: 60px;
}
.how-tariff-left{
	display: flex;
    flex-direction: column;
    gap: 25px;
    min-width: calc(100% / 3 - (40px / 3));
   /*  background: var(--blue_light2); */
    background: var(--color_blue);
    color:var(--color_white);
    padding: 30px 20px;
    border-radius: 10px;
	
}
.how-tariff-left h2{
	color: var(--color_white);
}
.how-subtitle{
	display: flex;
    flex-direction: column;
    font-size: 22px;
    line-height: 120%;
	gap: 10px;
}
/* .our-tariff-main{
	color: var(--color_dark_light);
} */
.tariff-item{
	background: var(--color_white);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 10px;
}
.tariff-item .tariff-caption{
	display: flex;
    flex-direction: column;
    gap: 10px;
}
.ul-body,
.how-tariff-left ul{
	display: flex;
    flex-direction: column;
    gap: 15px;
    /*font-weight: 100;*/
}

.how-subtitle b{
color:var(--color_white);
    border-bottom:3px solid var(--color_white);
    text-transform: uppercase;
    font-weight: 500;
}
.how-tariff-left ul li:before{
	background: var(--color_white);
}
.tariff-number{
	display:flex;
	justify-content:flex-start;
}
.tariff-number b{
	/* color: var(--blue_light2); */
	color: var(--color_white);
    /*font-weight: 100;*/
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-width: 60px;
    height: 60px;
    /* background: var(--blue_light); */
	background: var(--color_blue);
    border-radius: 10px;
}
ul li{
	display:flex;
	align-items:center;
	gap:10px;
}

/* ul li b:before{
	content:'';
	width:18px;
	height:18px;
	min-width:18px;
	border-radius:50%; 
	display:flex;
	background:var(--color_blue);
} */
ul li b{
	width:23px;
	height:23px;
	min-width:23px;
	border-radius:50%; 
	display:flex;
	position:relative;
}
ul.white b{
	background:var(--color_white);
}
ul.white b:after{
	background: url(/img/svg/check_blue.svg);
}
ul.blue b{
	background:var(--color_blue);
}
ul.blue b:after{
	background: url(/img/svg/check_white.svg);
}
ul li b:after{
	content:'';
	width:18px;
	height:18px;
	min-width:18px;
	display:flex;
	position:absolute;
    top: 0px;
    left: 0px;
}

.more-grid{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.more-item {
   justify-content: center;
    padding: 20px 40px;
    display: flex;
	flex-direction:column;
    gap: 20px;
    border-radius: 10px;
}
.more-item.bg{
	align-items: center;
}
.more-item.bg img{
	max-height: 300px;
    width: auto;
}
.more-item.blue-light{
	 background: var(--blue_light);
}
.more-item.blue{
	 background: var(--color_blue);
	color:var(--color_white);
}
.more-item.blue h2{
	color:var(--color_white);
}
.more-item.blue ul li:before{
	background:var(--color_white);
}
.more-caption{
	font-size: 20px;
    line-height: 120%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /*font-weight: 100;*/
}
.more-caption ul{
	display: flex;
    flex-direction: column;
    gap: 5px;
}
.why-form-all{
	display: grid;
    grid-template-columns: repeat(1, 1fr);
	gap: 40px;
}
.why-form-left{

    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 10px;
}
.why-grid{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.why-item{
	display: flex;
    flex-direction: column;
    /* background: var(--blue_light); */
	background:var(--color_blue);
	color:var(--color_white);
    padding: 25px 20px 20px 20px;
    gap: 10px;
    border-radius: 10px;
	position:relative;
}
.why-item .why-ico{
	position:absolute;
	right:20px;
	top:20px;
}


.why-caption strong{
	font-size: 24px;
    font-weight: 500;
    line-height: 120%;
	padding-right: 50px;
}
.why-caption{
	display: flex;
    flex-direction: column;
	 gap: 10px;
}
.why-caption p{
	font-size:20px;
	/*font-weight: 100;*/
    line-height: 120%;
}
.why-ico span {
    color: var(--blue_light2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    /* background: var(--blue_light2); */
	/* background: var(--color_blue); */
	 background:var(--color_white);
    border-radius: 50%;
}
.why-ico span svg{
	max-width:28px;
}
/* contact form */
.section-form{
	background: var(--blue_light);
    padding-bottom: 60px;
    padding-top: 60px;
} 
.contact-grid input{
	width:100%;
}
.contact-left .h4{
	/* color: var(--blue_light4); */
    text-transform: uppercase;
}
@media (min-width: 768px) {
    .contact-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 20px;
    }
}
@media (min-width: 1199px) {
    .contact-caption {
        display: flex;
        gap: 20px;
        justify-content: space-between;
    }
	
    .contact-left {
        padding-top: 5px;
		display: flex;
        flex-direction: column;
        gap: 5px;
		min-width: 480px;
    }
	.contact-right {
		width: 100%;
	}
}
.contact-form-all{
	display: flex;
    flex-direction: column;
	gap:20px;
}
.contact-form-item{
	display: flex;
    flex-direction: column;
	gap:10px;
	align-items: flex-end;
}
.contact-agree{
	font-size:14px;
	font-weight:100;
	text-align:right;
}
.contact-agree a{
	color: var(--color_blue);
}
textarea:hover, textarea:focus, input[type="text"]:hover, input[type="text"]:focus,
input[type="tel"]:hover, input[type="tel"]:focus {
    background: #f7f7f7;
    transition-duration: 0.2s;
	background: #f7f7f7;
}

.services-grid{
    background: #fff url(/img/f-bg11.png) repeat fixed center;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    overflow: hidden;
}
.services-grid .service-step{
	color: transparent;
}
.default__btn,
textarea,
input[type="text"], input[type="tel"], input[type="url"], input[type="email"],
.why-item,
.tariff-number b,
.service-ico span,
.default__btn,
.more-item,
.how-tariff-left,
.tariff-item,
.service-item-body{
	
}
.footer-copy{
	text-align:right;
}
.tariff-item h4{
	font-weight:500;
}
@media (max-width: 1199px) {
	.contact-caption {
        display: flex;
		flex-direction:column;
        gap: 20px;
    }
	.contact-left{
		display: flex;
		flex-direction:column;
        gap: 5px;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.tariff-grid{
		grid-template-columns: repeat(1, 1fr);
	}
	.why-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.tariff-item{
		flex-direction: inherit;
	}
	.top-bg h1{
		font-size: 38px;
	}
	.services-main {
		font-size: 40px;
	}
}
@media (max-width: 992px) {
	.how-tariff-grid{
		flex-direction:column;
	}
	.more-item.bg{
		display:none;
	}
	.more-grid{
		grid-template-columns: repeat(1, 1fr);
	}
}
@media (min-width: 768px) and (max-width:992px) {
	.why-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.top-bg h1{
		font-size: 28px;
	}
	.services-main .services-animation{
		min-height: 45px;
	}
	.services-main {
		font-size: 30px;
		line-height: 120%;
	}
	.tariff-caption p{
		font-size:18px;
	}
}
@media (max-width: 768px) {
	.contact-grid{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
	}
	.tariff-grid{
		grid-template-columns: repeat(1, 1fr);
	}
	.tariff-grid,
	.services-grid,
	.contact-grid,
	.more-grid,
	.why-grid,
	.contact-form-all{
		gap: 15px;
	}
	.more-item{
		padding:40px 20px!important;
	}
	.tariff-item{
		flex-direction:inherit;
	}
	.service-ico span{
		min-width:60px;
		width:60px;
		height:60px;
	}
	.service-item-body svg {
		min-width: 48px;
		width: 48px;
	}
	.services-grid{
		grid-template-columns: repeat(1, 1fr);
	}
	.service-item-body.step{
		display:none;
	}
	footer .footer{
		flex-direction: column;
        gap: 10px;
	}
	.top-bg-right{
		display:none;
	}
	.top-bg-all {
		grid-template-columns: repeat(1, 1fr);
		        gap: 0;
	}
	.why-form{
		padding-top:0;
	}
	.services-col{
		gap:20px;
	}
	.services-main{
		margin-top:0;
	}
	.our-tariff-main{
		
	}
}
@media (min-width: 580px) and (max-width:768px) {
	.why-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.service-item-body{
		align-items: flex-start;
	}
	
	.services-main .services-animation{
		min-height: 45px;
	}
	.services-main {
		font-size: 26px;
		line-height: 120%;
	}
	h2, .h2{
    font-size: 28px;
   }
	.top-bg h1{
		font-size: 40px;
	}
}
@media (min-width: 580px) {	
	.visible-xs{
		display:none;
	}
}
@media (max-width: 580px) {
	.why-grid{
		grid-template-columns: repeat(1, 1fr);
	}
	
	.service-item-body{
		align-items: flex-start;
	}
	.services-main .services-animation{
		min-height: 25px;
	}
	.services-main {
		font-size: 20px;
		line-height: 120%;
	}
	.services-animation{
		display:none!important;
	} 
	.services-main .visible-xs{
		
	}
	h2, .h2{
    font-size: 20px;
   }
	.top-bg h1{
		font-size: 22px;
	}
	h3,.h3{
		font-size:18px;
	}
	.header-right .default__btn{
		display:none;
	}
	/* .tariff-item,
	.service-item-body{
		flex-direction:column;
	} */
	.tariff-number b,
	.service-ico span {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }
	.tariff-number b{
		font-size:30px;
	}
	.service-item-body svg {
        min-width: 32px;
        width: 32px;
		height: 32px;
    }
	.tariff-item,
	.service-item-body.bg{
		padding:15px;
		gap:15px;
	}
	.why-caption strong,
	.how-subtitle{
		font-size: 20px;
	}
	.top-bg ul,
	.service-item p,
	.why-caption p,
	.more-caption,
	.more-item,
	body{
		font-size:16px;
	}
	.contact-form-item .default__btn{
		width:100%;
	}
	.footer-copy,
	.contact-agree{
		text-align: left;
	}
	footer .footer{
		align-items: flex-start;
	}
	.services-main #insert-placeholder {
    border-bottom: 3px solid var(--color_dark);
	}
	.how-tariff {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.default__btn{
		padding: 0 10px;
        font-size: 17px;
        width: 100%;
	}
}
.top-bg h1 b {
    color:var(--color_blue);
    font-size: 180%;
    line-height: 100%;
}
.header__logo a,
.footer-logo a{
	display:flex;
	align-items:center;
	gap:10px;
	text-decoration:none;
	color:#3577D1;
}
#popup{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
    background:#fff;
	border:none;
	padding:20px;
	z-index:99;
	width: 100%;
    max-width: 320px;
    text-align: center;
	border-radius: 10px;
	box-shadow: rgba(34, 60, 80, 0.2) 4px 4px 8px 0px;
}
#popup:before{
	content:'';
	display:flex;
}