@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --blue: #186FBB;
    --black: #000;
    --lightblue: #DEEAF5;
    --darkblue: #0D528E;
    --lightgray: #F4F4F4;
}

*{
	margin: 0px;
	padding: 0px;
	font-family: "Jost", sans-serif;
    background-repeat: no-repeat;
    color: var(--black);
}

img {border: none;}
a {
	outline: none;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {font-weight: 700;}
input, button, textarea {outline: none;}


body {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    background-color: var(--lightgray);
}

.div1400 {
    position: relative;
	width: min(1400px, 100% - 40px);
    margin: auto;
}


ul li {
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-left: 25px;
}
ul li::before {
    position: absolute;  
    left: 0; top: 4px;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-position: center;
    content: '';
}
ul.v_li li::before {background-image: url(../img/site/v_li.svg); }




.nobr {white-space: nowrap;}

a span.alert {
    position: absolute;
    right: -40px;
    top: 150%;
    width: 190px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 110%;
    font-weight: 400;
    color: var(--blue);
    text-align: center;
    background-color: white;
    border-radius: 4px;
    border: 2px solid var(--blue);
    box-shadow: 0px 4px 23px rgba(0,0,0,0.12);
    z-index: 10;    
    animation: opacity_in 300ms both;
}
@keyframes opacity_in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


/* ---------- FONT-WEIGHT ---------- */
.fw3 {font-weight: 300;}
.fw4 {font-weight: 400;}
.fw5 {font-weight: 500;}
.fw6 {font-weight: 600;}
.fw7 {font-weight: 700;}
.it {font-style: italic;}

/* ---------- FLEX ---------- */
.fnw, .fw {
    display: flex;
    align-items: center;
}

.fnw {flex-flow: row nowrap;}
.fw {flex-flow: row wrap;}

.fs {justify-content: flex-start;}
.fe {justify-content: flex-end;}
.sb {justify-content: space-between;}
.cc {justify-content: center;}

/* ---------- GRID ---------- */
.grid {display: grid;}
.grid.col2 {grid-template-columns: repeat(2, 1fr);}
.grid.col3 {grid-template-columns: repeat(3, 1fr);}
.grid.col4 {grid-template-columns: repeat(4, 1fr);}

.grid.gg11 {grid-gap: 10px;}
.grid.gg10 {grid-gap: 10px 0;}
.grid.gg01 {grid-gap: 0 10px;}
.grid.gg22 {grid-gap: 20px;}
.grid.gg20 {grid-gap: 20px 0;}
.grid.gg02 {grid-gap: 0 20px;}
.grid.gg33 {grid-gap: 30px;}
.grid.gg30 {grid-gap: 30px 0;}
.grid.gg03 {grid-gap: 0 30px;}


.grid>.h_span2 {grid-column: span 2;}
.grid>.h_span3 {grid-column: span 3;}
.grid>.h_span4 {grid-column: span 4;}
.grid>.v_span2 {grid-row: span 2;}
.grid>.v_span3 {grid-row: span 3;}
.grid>.v_span4 {grid-row: span 4;}




/* fixed */
.fixed_btns>* {
    position: fixed;
    z-index: 9;
}




/* header */
header {
    position: sticky;
    top: 0;
    padding: 10px 0;
    background-color: #fff;
    box-shadow: 0px 4px 23px rgba(0,0,0,0.12);
    z-index: 9;
    overflow: hidden;
}

.logo_block {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}
.logo {
    width: 169px;
    height: 106px;
    flex-shrink: 0;
    display: inline-block;
    background-image: url(../img/site/logo.svg);
    background-size: contain;
    background-position: left center;
}
.logo_block span {
    font-size: 23px;
    line-height: 20px;
    font-weight: 400;
    margin-left: 30px;
    margin-top: -5px;
}

header .logo_block img {
    position: absolute;
    left: -640px;
    top: -627px;
    opacity: 0.5;
}


header .top_contacts.grid {
    position: relative;
    grid-template-columns: auto auto;
    grid-gap: 0 10px;
    margin-top: -7px;
    z-index: 2;
}
header .top_contacts.grid a.mail {margin-bottom: -5px;}
header .top_contacts.grid a.tel {grid-area: 2/1/2/2;}
header .top_contacts.grid a.wa {grid-area: 2/2/2/3;}


.top_contacts a.mail {
    text-align: right;
    font-size: 16px;
    color: var(--blue);
    text-decoration: underline;    
}
.top_contacts a.tel {font-size: 32px;}


.top_contacts a.wa span {
    font-size: 12px;
    line-height: 100%;
    text-decoration: underline;
}
.top_contacts a.wa span.icon {
    width: 23px;
    height: 23px;
    background-image: url(../img/site/wa.svg);
    background-size: contain;
    background-position: center;
    margin-right: 6px;
}


div[data-modal="modal_img"] {
    position: relative;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
div[data-modal="modal_img"]::after {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    content: '';
    background-color: rgb(24, 111, 187, 0);
    transition: 230ms ease-out;
}

header .serts {margin-left: 50px;}
header .sert {    
    width: 39px;
    height: 55px;    
    border: 2px solid var(--blue);
    margin-right: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
header .sert:last-child {margin-right: 0;}





@media screen and (min-width: 768px) {
    .top_contacts.grid a.mail:hover {        
        text-decoration-style: double;
    }    
    .top_contacts.grid a.wa:hover span {color: var(--blue);}

    div[data-modal="modal_img"]:hover::after {background-color: rgb(24, 111, 187, 0.5);}
}




/* 1st_screen */
.fs_block {
    margin: 30px auto 50px;
    grid-template-columns: repeat(2, minmax(0, 50%));
    grid-gap: 0 30px;
}

.fs_block .fs_images {position: relative;}
.fs_block .fs_images .fs_slider,
.fs_block .fs_images .owl-stage-outer,
.fs_block .fs_images .owl-stage,
.fs_block .fs_images .owl-item {height: 100%;}

.fs_block .slide {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}

.fs_block .slide .grad {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 40px);
    padding: 20px;
    background: linear-gradient(180deg, rgba(14, 25, 45, 0) 0%, rgba(14, 25, 45, 0.4) 10%, rgba(14, 25, 45, 0.6) 40%, rgba(14, 25, 45, 0.9) 100%);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.fs_block .slide .grad .slide_heading {
    font-size: 18px;
    line-height: 120%;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 10px;
}
.fs_block .slide .grad .slide_heading span {
    font-weight: 600;
    color: var(--lightgray);
}

.fs_block .slide .grad .slide_desc {
    font-size: 16px;
    line-height: 120%;
    font-weight: 400;
    color: var(--lightgray);
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 60px;
    height: 60px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 230ms;
}
.arrow svg path {transition: 230ms;}

.arrow.arr_left {left: 20px;}
.arrow.arr_left svg {margin-left: -5px;}
.arrow.arr_right {right: 20px;}
.arrow.arr_right svg {margin-right: -5px;}



.fs_content h1,
.fs_content h2 {
    text-transform: uppercase;
    color: var(--blue);
    font-size: 49px;
    line-height: 100%;
    margin: 10px 0 20px;
}
.fs_content h2 {
    color: var(--black);
    font-size: 36px;
}

.fs_content h4 {
    font-size: 20px;
    line-height: 120%;
    margin: 20px 0 30px;
}
.fs_content h4 span {font-weight: 400;}
.fs_content p {
    font-size: 16px;
    line-height: 130%;
    margin-bottom: 20px;
}

.fs_content .recall_block {margin-bottom: 10px;}
.recall_block p {
    font-size: 23px;
    font-weight: 700;
    margin: 0;
}
.recall_block p a.tel {color: var(--blue);}
.recall_block p+a.wa {margin-left: 30px;}
.recall_block a.wa span {
    font-size: 20px;
    line-height: 100%;
    text-decoration: underline;
}
.recall_block a.wa span.icon {
    width: 27px;
    height: 27px;
    background-image: url(../img/site/wa.svg);
    background-size: contain;
    background-position: center;
    margin-right: 8px;
}



@media screen and (min-width: 768px) {
    .recall_block a.wa:hover span {color: var(--blue);}
    .arrow:hover svg path {stroke: var(--blue);}
}


/* content */
.line_heading {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 70px 0 30px;
}
.line_heading h2 {
    font-size: 32px;
    flex-shrink: 0;
    margin: 0 20px;
}
.line_heading span {
    width: 100%;
    height: 4px;
    background-color: var(--blue);
    border-radius: 2px;
}

.content h2,
.content h4 {line-height: 100%;}

.content h2 {font-size: 32px;}
.content h4 {font-size: 18px;}

.rails.col2 {
    grid-template-columns: auto 366px;
    grid-gap: 0 30px;
}

.rails h2,
.rails h4,
.rails h4 span {color: var(--blue);}
.rails h2 {margin: 0 0 10px;}
.rails h4 {margin: 0 0 5px;}


.table_block {margin-bottom: 20px;}
.table_block:last-child {margin-bottom: 0;}
.table_block+h2 {margin-top: 30px;}


table {
    width: 100%;
    border-spacing: 0 5px;
}
table td {
    padding: 7px 10px;
    font-size: 14px;
    line-height: 100%;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

table td:first-child {
    text-align: left;
    white-space: unset;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
table td:last-child {
    text-align: right;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
table thead td:last-child,
table thead+tbody td:last-child {text-align: center;}

thead td {
    background-color: var(--blue);
    color: var(--lightgray);
}
thead td span {color: var(--lightgray);}

tbody td {
    background-color: var(--lightblue);
    color: var(--black);
    transition: 230ms ease-out;
}
tbody td span {color: var(--black);}
tbody td span.fw3 {font-size: 12px; white-space: nowrap;}
tbody tr:last-child td {border-bottom: 2px solid var(--blue);}

.table_grid {grid-gap: 0 30px;}


@media screen and (min-width: 768px) {
    tbody tr:hover td {background-color: #C1DCF3;}
}







.right_rail .form_block {
    position: sticky;
    top: 150px;
}

.form_block {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 23px rgba(0,0,0,0.12);
}

form>div {margin-bottom: 20px;} 

form input, 
form textarea {
    width: calc(100% - 20px);
    padding: 7px 10px;
    background-color: var(--lightblue);
    border-radius: 4px;
    border: none;
    border-bottom: 2px solid var(--blue);
    font-size: 16px;
    line-height: 100%;
    color: var(--black);
}
form input.company {display: none;}
form textarea {
    height: 90px;
    resize: none;
}

form .file {position: relative;}
form .file input.user_file {
    position: absolute;
    left: 0; top: 0;
    opacity: 0;    
}

form .file .button {
    background-color: var(--blue);
    border-radius: 4px;
    border-bottom: 2px solid var(--blue);
    padding: 7px 10px;
    font-size: 16px;
    color: var(--lightgray);
    white-space: nowrap;
    margin-right: 10px;
    transition: 230ms ease-out;
}


form button {
    width: 100%;
    padding: 10px 0;
    background-color: var(--blue);
    border: none;
    border-radius: 4px;
    font-size: 18px;    
    line-height: 100%;
    font-weight: 700;
    color: var(--lightgray);
    transition: 230ms ease-out;
}



@media screen and (min-width: 768px) {
    form .file:hover .button {
        background-color: var(--darkblue);
        border-bottom: 2px solid var(--darkblue);
    }
    form button:hover {background-color: var(--darkblue);}
}




.text_colums .image {
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

.text_colums h3 {
    margin: 10px 0 20px;
    text-transform: uppercase;
    font-size: 23px;
    line-height: 110%;
}
.text_colums p {
    margin-bottom: 20px;    
    font-size: 18px;
    line-height: 140%;
}
.text_colums li {    
    font-size: 18px;
    line-height: 120%;
}


.map.text_colums .text {padding: 50px 0 150px;}





footer {
    margin-top: 100px;
    padding-top: 10px;
    background-color: var(--lightblue);
}

footer .top_contacts {
    margin-top: 23px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: end;
}
footer .top_contacts a.wa span {
    font-size: 18px;
    color: var(--blue);
}

footer .top_contacts a.mail {font-size: 18px;}


.footer_line {
    margin-top: 25px;
    background-color: var(--blue);
    padding: 10px 0;
}
.footer_line p {
    font-size: 14px;
    line-height: 100%;
    font-weight: 300;
    color: var(--lightblue);
    text-align: center;
}
.footer_line p span {color: var(--lightblue);}


@media screen and (min-width: 768px) {
    .top_contacts a.mail:hover {color: var(--black);}    
    .top_contacts a.wa:hover span {color: var(--black);}
}














/* ************************ SEND_PAGE ********************************* */
body.message_send_page {
    height: 100dvh;
    background-color: var(--lightgray);
    display: flex;
    flex-flow: column;
    justify-content: center;
}


#form_send_box {
    position: relative;	
    width: min(450px, 100% - 40px);
    margin: auto;    
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    font-size: 16px;
    color: #000;
    box-shadow: 0 4px 23px rgba(0, 0, 0, 0.12);
    animation: 320ms show_bottom both;
}

@keyframes show_bottom {
    0% {transform: translateY(150%)}
    100% {transform: translateY(0)}
}

#form_send_box p {
    font-size: 16px;
    line-height: 23px;
    margin: 20px 0 30px;
}
#form_send_box h2 {color: var(--blue);}

a.form_back_button {
    position: relative;
    width: calc(100% - 20px);
    display: block;
    padding: 10px;
    background-color: var(--lightblue);
    border: none;
    border-radius: 4px;    
    transition: 230ms ease;  
    overflow: hidden;  
}
a.form_back_button span {
    position: relative;
    font-size: 16px;    
    line-height: 100%;
    font-weight: 600;
    color: var(--black);
    z-index: 2;
    transition: 230ms ease;
}
a.form_back_button::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    content: '';
    background-color: #c1dcf3;
    transition: 230ms ease;
    z-index: 1;
    animation: 10000ms loading both;
}

@keyframes loading {
    0% {width: 0;}
    100% {width: 100%;}
}


a.form_back_button:hover,
a.form_back_button:hover::before {background-color: var(--blue);}
a.form_back_button:hover span {color: var(--lightgray);}






































.ms {display: none !important;}