@import "../fonts/Raleway/Raleway.css";
:root {
    --margin-deault: 8px;
    --margin-middle: 20px;
    --text-color-white: #fff;
    --bg-color-white: #fff;
    --text-color-primary: #000000;
    --text-color-heading: #111827;
    --text-color-body: #4B5563;
    --text-color-secondary: #374151;
    --text-color-placeholder: #6B7280;
    --text-color-red: #EF4444;
    --text-btn-color-secondary: #374151;

    --color-primary: #456DB1;
    --color-primary-dark: #29549F;


    --color-secondary: #527CC533;
    --color-secondary-dark: #527CC559;
    --color-border-primary:#D1D5DB;
    --color-border-active:#0072DE;
    --color-border-secondary: rgba(209, 213, 219, 0.05);
    --color-border-error: #FCA5A5;
    
    --color-purple: #7D52F4;
}

html * { max-height: 1000000px; }
* { -webkit-text-size-adjust: none; margin: 0; padding: 0; box-sizing: border-box; outline: none; }
html, body { font-family: "Raleway", Arial, sans-serif; font-size: 16px; line-height: 1.375;  color: var(--text-color-primary); width: 100%; height: 100%;}

li { list-style: none; }
img { display: block; height: auto; max-width: 100%; }
a img { border: none; }
a { text-decoration: none; color: inherit; }
input, select, button, textarea { outline: none;
    font-family: "Raleway", Arial, sans-serif; font-size: 14px;
    -moz-appearance: none;-webkit-border-radius: 0; -moz-border-radius: 0; -webkit-appearance: none;
}
input[type=file], button, input[type="submit"],
input[type=file]::-webkit-file-upload-button { cursor: pointer; }
.bg-blue {background-color: #F3F2F8}

.btn {display: inline-block; font-size: 18px; font-weight: 600; color:var(--text-color-white); padding: 10px 32px;  text-align: center; line-height: 1.5; cursor: pointer; transition: 0.2s; border: 0px solid transparent;border-radius: 12px;}
.btn.btn-small {font-size: 14px; padding: 6px 16px; border-radius: 10px;}
.btn.btn-primary{background-color: var(--color-primary);color:var(--text-color-white);
    box-shadow: 0 2px 4px 0 rgba(27, 78, 163, 0.2),0 4px 8px 0 rgba(41, 121, 255, 0.2);}
.btn.btn-primary:hover{  background-color: var(--color-primary-dark);}
.btn.btn-secondary{background-color: var(--color-secondary); color:var(--color-primary);}
.btn.btn-secondary:hover{background-color: var(--color-secondary-dark);}
.btn.btn-icon {background-repeat:  no-repeat; background-position: center; background-size: 24px;font-size: 0;padding: 24px;}
.btn.close {background-image: url("../img/icon_close.svg");}
.btn.logout {background-image: url("../img/icon_logout.svg"); }
.btn.menu {background-image: url("../img/icon_menu.svg"); border:1px solid var(--color-primary); }

.link {color: var(--color-primary);font-size: 14px; cursor: pointer; line-height: 20px;font-weight: 600; transition: 0.2s;}
.link.link-primary {color: var(--color-primary);}
.link.link-primary:hover{color: var(--color-primary-dark);}
.link:focus:not(:hover){text-shadow: 0 0 1px #29549fd1;}

.badge {font-size: 12px; line-height: 16px; font-weight: 500; color:var(--text-color-white); font-family: Inter, 'Raleway', sans-serif;background-color: var(--color-purple); padding:2px 8px;border-radius: 16px;}


h2 {font-size: 32px;font-weight: 700; color: var(--text-color-primary);}
.page-subtitle {font-size: 24px;font-weight: 400; color: var(--text-color-primary);margin-top: 36px;}
.admin-line .page-subtitle{margin-top: 0;}
main {width: 100%;     height: calc(100% - 106px); display: flex; ;flex-direction: column;padding-bottom: 60px; justify-content: space-between; }
section { padding-top: 40px;min-height: 100vh;}
.container { max-width: 1360px; width: 100%; padding: 0 40px; margin: 0 auto; }


header{width: 100%; height: auto; display: block;padding: 24px 0;}
header nav {display: flex; justify-content: space-between; align-items: center;}

header nav > div {display: flex; justify-content: flex-start; align-items: center}
header nav > div:last-child {justify-content: flex-end;}
header nav > div:last-child .btn{margin-right: 12px;}
header nav > div:last-child .btn:last-child{margin-right: 0;}
header nav .main_logo{display: flex; justify-content: flex-start; align-items: center; position: relative;}
header nav .main_logo img {width: 60px; height: auto; object-position: center; object-fit: contain;}
header nav .main_logo span{font-size: 13px;  font-weight: 500; line-height: 1.5; color: #2E364A;margin-left: 6px;}
header nav .main_logo a{width: 100%; height: 100% ;display: block ; position: absolute; top:0; left:0;}
header nav  > ul{flex:  0 0 auto; display: flex; align-items: center; justify-content: space-between; }

header nav  > ul > li {flex: 1 1 auto;margin: 0 14px; position: relative; display: flex; align-items: center;}
header nav  > ul > li.with_submenu:after {content: ""; background-image: url("../img/icon_arrow_bottom.svg"); background-size: 12px auto; background-position: center; height: 24px; width: 24px;display: inline-block; background-repeat: no-repeat;}

header nav  > ul a  {font-weight: 600; color:var(--text-color-primary);font-size: 18px;transition: 0.3s; cursor: pointer;}
header nav  > ul a:hover {color:var(--color-primary);}

header nav  > ul > li > ul{display: none; background-color: var(--bg-color-white); position: absolute; top: 100%;  padding: var(--margin-deault); box-shadow: 0 0 2px 0 rgba(0,0,0,0.06), 0 6px 12px 0 rgba(17, 19, 35, 0.12); border-radius: 10px; min-width: 200px}
header nav  > ul > li > ul > li{padding:12px; }
header nav  > ul > li > ul > li > a {font-size: 15px; font-weight: 500; color: var(--text-color-primary); line-height: 1.5;}
header nav > ul > li:hover > ul, header nav > ul > li.active > ul {display: block;z-index: 50;}
header nav .btn.menu {display: none;}
.main_page_block {display: flex; align-content: center; justify-content: space-between;padding: 80px 0;}
.main_page_block .btn {border-radius: 16px; padding: 14px 32px;}
.main_page_block .left_side{max-width: 715px;padding-top: 65px;}
.main_page_block .right_side{width: 33%; flex: 0 0 auto;margin-right: 60px;}

.square_slider {position: relative;}
.square_slider:before {content: "";background-color: rgba(89, 136, 227, 0.2); filter: blur(60px);     width: 125%;height: 100%;position: absolute;top: 10%;left: -2%;border-radius: 50%;}
.square_slider .slide{  background-repeat: no-repeat; background-position: center;position: relative;}
.square_slider .slide > div {width: 335px; height: 335px; display: block;}
.square_slider .slide > div img {width: 100% ;height: 100%; object-fit: contain; object-position: center;}
.square_slider .slide > div:last-child{position: absolute; top:55px; left: 100px;}


.container.with_square_slider .right_side form {display: none;}
.form-activated .btn-form-activator {display: none;}
.form-activated .right_side form{display: block !important;}
.form-activated .right_side .square_slider {display: none;}


.main_page_block .left_side h1 {font-size: 72px;line-height: 68px;font-weight: bold; }
.main_page_block .left_side p { font-size: 24px;line-height: 1.5; color:var(--text-color-primary); font-weight: 400;margin-top: 20px;margin-bottom: 20px;}

.center_block {display: flex; justify-content: center; align-items: center; flex-direction: column;
    margin-top: 100px;}
.center_block .block_image{max-height: 175px; width: 100%; text-align: center; display: flex; justify-content: center;}
.center_block .block_image img{height: 100%; width: auto; object-fit: contain; object-position: center; display: block;}
.center_block h2 {font-size: 48px; color: var(--text-color-primary); text-align: center;margin-top: 40px; font-weight: 500;line-height: 50px;}
.center_block p{margin-top: var(--margin-deault);
    font-size: 18px;
    line-height: 28px; color:var(--text-color-body);}
.button_group .btn {text-wrap: nowrap;}
.center_block .button_group{max-width: 554px; display: flex; justify-content: space-between; align-items: center;
    margin-top: 40px;}
.center_block .button_group .btn{margin-left: 12px;display: block; flex:1 1  auto;}
.center_block .button_group .btn:first-child{margin-left: 0;}



form { display: block; background-color: var(--bg-color-white);    padding:40px;border-radius: 24px;}

.gradient_border {background-clip: padding-box; border: solid 1px transparent;
    position: relative;border-radius: 24px;}

.gradient_border:before {content: ""; position: absolute; top:0 ;left:0; right:0; bottom:0;
    z-index: -1; background: linear-gradient(50deg, #d633ff7a, #33CEFF );margin:-1px;border-radius: 24px;box-shadow: 0 1px 2px rgba(27,76,163,24) ; transition: 0.3s; opacity: 1}
.gradient_border_on_hover:before{opacity: 0}
.gradient_border_on_hover:hover:before{opacity: 1}
.container.with_square_slider .right_side form {max-width: 424px}
.form-group {margin-top: 20px;}
.form-group .error-message{display: none;}
.form-group.inline {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center;}
.form-title {color:var(--text-color-primary);font-size: 24px; font-weight: 700 ; text-align: center; width: 100%; }
.form-description {color:var(--text-color-primary);font-size: 16px; line-height: 1.5; text-align: center; width: 100%;margin-top: 20px;}
.form-error{}
.form-label { display:block; font-weight: 500;font-size: 14px;line-height: 20px;color: var(--text-color-secondary);}
.form-control {border:1px solid var(--color-border-secondary); line-height: 24px; font-size: 16px; font-weight: 400;color:var(--text-color-heading);width:100%;padding:10px 12px;margin-top: var(--margin-deault);box-shadow:0 0 2px 0 #121A2B; border-radius: 10px;}
.form-control::placeholder { color:var(--text-color-placeholder);}
.form-control:active, .form-control:focus {border-width: 1px; border-color:transparent;box-shadow: 0 0 0 3px #B3DAFF;}

.form-group.validation-error {}
.form-group.validation-error .error-message, .form-group .form-control.invalid {border-width: 2px; border-color:var(--color-border-error);box-shadow:0 0 2px 0 #121A2B;}
.form-group.validation-error .error-message, .form-group .form-control.invalid ~ .error-message{display: block}
.error-message{color:var(--text-color-red);font-size: 14px; font-weight: 400; line-height: 20px;
    margin-top: var(--margin-deault); text-align: center;}
.form-group .error-message {text-align: left;}
.form-group .checkbox{position: relative;color:var(--text-color-body);font-size: 14px; font-weight: 400; line-height: 20px;display: flex; justify-content: flex-start; align-items: center;cursor: pointer;user-select: none;
     }
.form-group .checkbox input{width:0; height: 0; position: absolute; opacity: 0; }
.form-group .checkbox input ~ i {width: 16px; height: 16px;margin-right: var(--margin-deault);border: 1px solid var(--color-border-primary); border-radius: 4px;background-color: transparent;transition:0.2s;background-position: center; background-size: 8px auto; background-repeat: no-repeat;}
.form-group .checkbox input:focus ~ i {border-color: #0072DE;}
.form-group .checkbox input:checked ~ i { background-image: url('../img/icon_checkbox.svg'); background-color: #F0F8FF;}


form .btn {width: 100%;}  
.form-footer {width: 100%;margin-top: var(--margin-middle); text-align: center;}
.form-footer p{
    font-size: 14px;}

.information_block {}
.information_block > * {width: 100%;margin-top: var(--margin-middle);}


.information_block h3{color:var(--text-color-primary);font-size: 24px; font-weight: 700 ; text-align: center; width: 100%; }
.information_block p{color:var(--text-color-primary);font-size: 16px; line-height: 1.5; text-align: center; width: 100%;margin-top: var(--margin-middle);}
.information_block .information_image {display: flex; justify-content: center;}
.information_block .information_image img{width: 100% ;height: auto; object-fit: contain; object-position: center;display: block;}
.information_block .btn {
    }

.services_list {display: flex; justify-content: flex-start; align-items: center;margin: 24px calc(0px - var(--margin-deault));  flex-wrap: wrap;}
.services_list > .service {position: relative;padding: var(--margin-middle);background-color: var(--bg-color-white);border-radius: 24px; margin: 8px; min-height: 184px; width:calc(100% / 4 - 16px); 
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);  
}
/*.services_list > .service:active:before{content: ""; border: 2px solid red;   position: absolute;top: -2px;left: -2px; right: -2px; bottom: -2px; border-radius: 24px;  background-color: var(--bg-color-white);}*/
.services_list .service:active{box-shadow: 0 0 0 3px #B3DAFF;}
.services_list > .service .service_image_box {height: 52px; width: 100%;}
.services_list > .service .service_image_box img {width: auto; height: 100%; object-position: left;object-fit: contain;}
.services_list > .service p {font-size: 18px;font-weight: 500; color:var(--text-color-primary);line-height: 1.5; text-align: left;margin-top: var(--margin-deault);}
.services_list > .service .badge {display: inline-block; margin-top: var(--margin-deault);}
.services_list > .service a{position: absolute; top:0; left: 0; width: 100%; height: 100%;}

.bottom_project_slider {position: relative;
    margin-top: 155px;max-height: 100px; display: none}
.bottom_project_slider:before, .bottom_project_slider:after {content: ""; height: 100%; width: 180px; background: lightcoral; top:0; bottom: 0; position: absolute; z-index: 5;}
.bottom_project_slider:before{left:0; background:linear-gradient(to right, #fff, rgba(255, 255, 255, 0.15));}
.bottom_project_slider:after{right:0; background:linear-gradient(to right, rgba(255, 255, 255, 0.15), #fff);}

.bottom_project_slider .slide{position: relative; height: 66px;display: flex !important; justify-content: flex-start; align-items: center;margin:0 46px;}
.bottom_project_slider .slide img{height: 100%; width: auto; object-position: center; object-fit: contain; display: block; flex:  0 1 auto;}
.bottom_project_slider .slide p{font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--text-color-primary);  margin-left: var(--margin-deault)}
.bottom_project_slider .slide a{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.notification{padding: 16px 48px 16px 48px; z-index: 50; display: block; position: fixed; top:24px; left:0; right:0; margin:auto;box-shadow: 0 4px 12px 0 rgba(0,0,0,0.12); background-color: #fff;border:1px solid var(--color-border-primary); border-radius: 10px;max-width: 680px; width: 100%;}
.notification:before{content:""; left: 16px; top:16px; width: 32px; height: 32px; display: block; background-size: contain;position:absolute;}

.notification.notification_success{padding-left: 60px;}
.notification.notification_success:before{ background-image: url('../img/icon_success.svg'); }
.notification.notification_error{}
.notification.notification_error:before{margin-left: 60px;}

.notification h6{font-weight: 500; font-size: 18px; line-height: 20px; color:var(--text-color-heading);}
.notification p{margin-top: var(--margin-deault); font-weight: 400; font-size: 15px; line-height: 20px; color: var(--text-color-body); }

.notification .btn-small{margin-top:var(--margin-deault);}
.notification a.close{position: absolute; right: 16px; top:16px; width: 20px; height: 20px; cursor: pointer;padding:0;background-size: 20px; background-position: top;  }

.only_mobile_br br {display: none;}
.only_mobile {display: none;}
.only_table_desktop{display: block;}
/* Слайдеры */
.slick-slider{ position: relative;display: block;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;}
.slick-list {position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
.slick-list:focus{outline: none;}
.slick-list.dragging{cursor: hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);        transform: translate3d(0, 0, 0);}
.slick-track {position: relative;top: 0;left: 0;display: block;}
.slick-track:before,.slick-track:after{display: table; content: '';}
.slick-track:after{clear: both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide{display: none;float: left;height: 100%;min-height: 1px;}
[dir='rtl'] .slick-slide{float: right;}
.slick-slide img{display: block;}
.slick-slide.slick-loading img{ display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block;}
.slick-loading .slick-slide{visibility: hidden;}
.slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent;}

.cursor-pointer { cursor: pointer; }


@media (max-width: 1440px){
    .main_page_block .left_side{max-width: 670px;}
}
@media (max-width: 1200px) {
    .services_list > .service {width: calc(100% / 3 - 16px);}
    .support_button{background-image: url("../img/icon_support.svg"); background-position: center; background-repeat: no-repeat; background-size: 24px; font-size: 0;    padding: 24px;}
    
}
@media (max-width: 1140px) {
    header nav .main_logo span {display: none;}
}
@media (max-width: 1024px){
    h2 {font-size: 24px;}
    .page-subtitle {font-size: 20px;}
    
    header nav > ul a {font-size: 15px;}
    .square_slider .slide > div {width:280px; height: 280px;}
    .main_page_block {padding-top: 36px;}
    .main_page_block .left_side {padding-top: 48px;}
    .main_page_block .left_side h1 {font-size: 64px;  }
    .main_page_block .left_side p {font-size:24px;line-height: 1.5;}
    .main_page_block .right_side {width: 44%;margin-right: 0px;}
    .services_list > .service {width: calc(100% / 2 - 16px);}
    .fz-m-12 {font-size: 12px !important;}
    .fz-m-12 a {font-size: 12px !important;}
}

@media (max-width: 768px){
    h2 {font-size: 20px;}
    
    .page-subtitle {font-size: 18px;} 
    .container {padding: 0 32px;}
    header nav .btn.menu {display: block;}
    header nav .main_logo img {max-width: 60px;}
    header nav > ul {display: none; position: fixed; top:100px;left:0; width: 100% ; bottom:0; background-color: var(--bg-color-white); z-index: 50;padding: 0 32px;}
    header nav.active > ul{display: block;}
    header nav.active .btn.menu{background-image: url("../img/icon_close.svg");}
    
    header nav  > ul > li.with_submenu:after{display: none;}
    header nav > ul > li  {padding:0;}
    header nav > ul > li > a {font-size: 40px;font-weight: 500; line-height: 1.5}
    header nav > ul > li > ul {display: block;width: 100%; background-color: transparent; box-shadow: none;min-width: 0; padding-inline: 0}
    header nav > ul > li > ul > li {padding: 0}
    header nav > ul > li > ul > li > a{font-size: 30px; }
    .main_page_block {flex-wrap: wrap;}
    
    .main_page_block .left_side {max-width: 100%; width: 100%;text-align: center;padding-top: 0;}
    .main_page_block .left_side h1{font-size:48px;line-height: 48px;}
    .main_page_block .left_side p{font-size:24px;margin-top: 16px;margin-bottom: 16px;}
    .main_page_block .right_side {max-width: 100%; width: 100%;}
    .main_page_block .right_side {margin-top: 40px    ;}
    .container.with_square_slider .right_side form {width: 100%; max-width: 100%;}
    .bottom_project_slider {margin-top: 0;}
    .with_square_slider:not(.form-activated) .left_side{order:2;margin-top: 80px;}
    .with_square_slider:not(.form-activated) .right_side{order:1;margin-top: 0;    display: flex;justify-content: center;margin-left: -50px;}
    .with_square_slider:not(.form-activated) .right_side .square_slider:before{width: 146%;height: 123%;}
    .center_block h2 {font-size: 32px;line-height: 34px}
}
@media (max-width: 700px) {
    .container {padding: 0 12px;}
    .services_list {margin: 24px 0;}
    .services_list > .service {width: calc(100%);}
    main{padding-bottom: 16px;}
    header nav .main_logo span {display: block;}
    .main_page_block {
        padding-bottom: 34px;}
    .main_page_block .btn {width: 100%;}
 
   section{ padding-top: 28px;}
    .only_mobile_br br {display: block;}
    .only_mobile {display: block;}
    .only_table_desktop {display: none;}
    .page-subtitle {margin-top: 22px;}
    .center_block .button_group {flex-wrap: wrap;}
    .center_block .button_group .btn{display: block; width: 100%; flex: 0 0 auto;margin-left: 0;
        margin-bottom: 10px;}
    .center_block p {text-align: center;}
    .bottom_project_slider:before, .bottom_project_slider:after {width:50px}
    header nav > ul > li > a {font-size: 22px;}
    header nav > ul > li > ul > li > a {font-size: 18px;}
    header nav.active > ul {  padding-bottom: 50px;}
    .only_mobile.logout {background-image: none;font-size: 18px;color: white;padding: 10px 32px;position:absolute; bottom:0;left: 0;right: 0;margin: 0 32px;}
    .center_block .button_group {width: 100%;}
    
}
@media (max-width: 400px) {
    .main_page_block .left_side h1 {font-size: 36px; line-height: 40px;}
    .main_page_block .left_side p {font-size: 18px;margin-top: 12px;}
    .main_page_block .right_side form {border:0;}
    .main_page_block .right_side form:before {display: none}
    form{padding:0;}
    
    .form-description {margin-top: 16px;}
    header nav > ul > li {padding: 9px 0}
    header nav > ul > li > a {font-size: 20px;}
    header nav > ul > li > ul > li > a {font-size: 16px;}
    header nav > ul {padding: 0 12px;}
    .main_page_block .right_side {margin-top: 20px;}
}