/**************** ROOT ****************//**************** ROOT ****************//**************** ROOT ****************/
/**************** ROOT ****************//**************** ROOT ****************//**************** ROOT ****************/
/**************** ROOT ****************//**************** ROOT ****************//**************** ROOT ****************/

:root {
    --color-first: hsla(210,80%,20%,1);
    --color-first-bg-light: hsla(210,25%,95%,1);
    --color-second: hsla(50,100%,50%,1);
    --color-second-bg-light: hsla(50,100%,95%,1);
    --color-second-border: hsla(50,90%,45%,1);
    --color-second-border-light: hsla(50,85%,85%,1);
    --color-black: hsla(0,0%,12%,1);
    --color-black-text-light: hsla(0,0%,24%,1);
    --color-white: hsla(0,0%,100%,1);
    --color-grey-bg-light: hsla(0,0%,96%,1);
    --color-grey-border: hsla(0,0%,78%,1);
    --color-grey-border-dark: hsla(0,0%,72%,1);
    --color-grey-text: hsla(0,0%,60%,1);
    --color-grey-text-light: hsla(0,0%,78%,1);
    --color-error-border: hsla(5,75%,75%,1);
    --color-error-text: hsla(5,90%,45%,1);
}



/**************** GLOBAL ****************//**************** GLOBAL ****************//**************** GLOBAL ****************/
/**************** GLOBAL ****************//**************** GLOBAL ****************//**************** GLOBAL ****************/
/**************** GLOBAL ****************//**************** GLOBAL ****************//**************** GLOBAL ****************/

/**************** BTN ****************/

.btn {
    display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-align-content: center; align-content: center;
    position: relative; min-height: 54px; padding: 15px 18px 15px 18px; font-weight: 600; font-size: 16px; line-height: 24px; text-align: center;
    color: var(--color-first); background: var(--color-second); border-radius: 12px; cursor: pointer; transition: opacity linear 200ms;
}
.btn:hover {opacity: 0.84;}

.btn > svg {display: block; height: 24px; aspect-ratio: 1; fill: var(--color-first);}
.btn > b {display: block; font-weight: inherit; margin-bottom: 0px; margin-right: 0px;}
.btn > svg + b {margin-left: 9px;}
.btn > b + svg {margin-left: 9px;}


/***/ html[dir="rtl"] .btn > svg {transform: scale(-1,1);}
/***/ html[dir="rtl"] .btn > svg + b {margin-left: 0px; margin-right: 9px;}
/***/ html[dir="rtl"] .btn > b + svg {margin-left: 0px; margin-right: 9px;}


@media screen and (max-width: 1400px){
    .btn {min-height: 48px; padding: 14px 18px 14px 18px; font-size: 14px; line-height: 20px; border-radius: 9px;}
    .btn > svg {height: 20px;}
}



/**************** TAIL TITLE ****************/

.tail-title {width: 100%;}
.tail-title h1, .tail-title h2, .tail-title h3, .tail-title h4 {display: inline; font-weight: 800; font-size: 30px; line-height: 36px; color: var(--color-first);}
.tail-title h1 {font-size: 30px; line-height: 36px;}
.tail-title h2 {font-size: 24px; line-height: 30px;}
.tail-title .tail {display: inline-block; height: 36px; margin: 0px 0px 0px 9px; aspect-ratio: 0.25; fill: var(--color-second); vertical-align: bottom;}


/***/ html[dir="rtl"] .tail-title .tail {margin: 0px 9px 0px 0px;}


@media screen and (max-width: 1400px){
    .tail-title b {height: 30px; font-size: 24px; line-height: 30px;}
    .tail-title .tail {height: 30px;}
}

@media screen and (max-width: 660px){
    .tail-title b {height: 26px; font-size: 20px; line-height: 26px;}
    .tail-title .tail {height: 26px;}
    .tail-title .no-mobile {display: none;}
}



/**************** MAP BG ****************//**************** MAP BG ****************//**************** MAP BG ****************/
/**************** MAP BG ****************//**************** MAP BG ****************//**************** MAP BG ****************/
/**************** MAP BG ****************//**************** MAP BG ****************//**************** MAP BG ****************/

#map-bg {position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1;}
#map-bg img {display: none; width: 100%; height: 100%; object-fit: cover;}
#map-bg img.map-2560 {display: block;}
#map-bg .map-fix {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-first-bg-light); opacity: 0.78;}


@media screen and (max-width: 1920px){
    #map-bg img.map-2560 {display: none;} #map-bg img.map-1920 {display: block;}
}

@media screen and (max-width: 1400px){
    #map-bg img.map-1920 {display: none;} #map-bg img.map-1366 {display: block;}
}

@media screen and (max-width: 1024px){
    #map-bg img.map-1366 {display: none;} #map-bg img.map-1024 {display: block;}
}

@media screen and (max-width: 720px){
    #map-bg img.map-1024 {display: none;} #map-bg img.map-720 {display: block;}
}



/**************** BODY ****************//**************** BODY ****************//**************** BODY ****************/
/**************** BODY ****************//**************** BODY ****************//**************** BODY ****************/
/**************** BODY ****************//**************** BODY ****************//**************** BODY ****************/

body {font-family: 'Newember', sans-serif; font-weight: 400; font-stretch: 100%; font-size: 16px; line-height: 1; color: var(--color-black); background-color: var(--color-white);}

#body .scwbox {width: 100%; max-width: 1600px; margin: 0px auto; padding-left: 60px; padding-right: 60px;}


@media screen and (max-width: 1400px){
    #body .scwbox {padding-left: 36px; padding-right: 36px;}
}

@media screen and (max-width: 660px){
    #body .scwbox {padding-left: 18px; padding-right: 18px;}
}



/**************** HEADER ****************//**************** HEADER ****************//**************** HEADER ****************/
/**************** HEADER ****************//**************** HEADER ****************//**************** HEADER ****************/
/**************** HEADER ****************//**************** HEADER ****************//**************** HEADER ****************/

#header {width: 100%;}

#header-main {padding-top: 36px; padding-bottom: 60px; }
#header-main .logo-side {width: 420px; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; justify-content: space-between;}
#header-main .contacts-side {width: auto; max-width: 100%; -webkit-flex: 1 1 auto; flex: 1 1 auto; -webkit-justify-content: flex-end; justify-content: flex-end;}

#header-main .main-menu-link {width: 39px; height: 36px; margin: 9px 30px 9px 0px;}
#header-main .main-menu-link i {display: block; position: absolute; left: 0px; width: 100%; height: 1.75px; background: var(--color-first); transition: all ease 300ms;}
#header-main .main-menu-link i.line1 {top: 0px;}
#header-main .main-menu-link i.line2 {top: 17px;}
#header-main .main-menu-link i.line3 {bottom: 0px; width: 15px;}
#header-main .main-menu-link span {display: block; position: absolute; bottom: -5px; left: 24px; font-weight: 700; font-size: 14px; line-height: 15px; color: var(--color-first); transition: all ease 300ms;}

#header-main .logo {display: block; position: relative; width: 212px; height: 54px; overflow: hidden;}
#header-main .logo svg {display: block; width: 100%; height: 100%; fill: var(--color-first);}
#header-main .logo::after {
    content: ''; display: block; position: absolute; top: 0%; left: -150%; width: 150%; height: 100%;
    background: linear-gradient(60deg, hsla(210,24%,92%,0) 20%, hsla(210,24%,92%,0.6) 50%, hsla(210,24%,92%,0) 80%);
    animation: logo-blink 3350ms linear infinite; animation-delay: 2800ms;
}
@keyframes logo-blink { 0% {left: -150%;} 50% {left: 100%;} 99.9999999% {left: 100%;} 100% {left: -150%;} }

#header-main .lang-box {padding: 3px 0px 3px 0px;}
#header-main .lang-box .lang-lnk {position: relative; height: 48px; margin: 0px 0px 0px 6px; aspect-ratio: 5 / 9;}
#header-main .lang-box .lang-lnk span {margin: 2px 0px 0px 0px; font-weight: 700; font-size: 12px; line-height: 1; color: var(--color-first); z-index: 2;}
#header-main .lang-box .lang-lnk svg {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill: var(--color-second); opacity: 0; z-index: 1;}
#header-main .lang-box .lang-lnk:hover svg {opacity: 0.12;}
#header-main .lang-box .lang-lnk.sel {pointer-events: none;}
#header-main .lang-box .lang-lnk.sel svg {opacity: 0.36;}

#header-main .contacts-line {width: auto; padding: 6px 0px 6px 0px;}
#header-main .contacts-line .icon {width: 42px; aspect-ratio: 1; margin: 0px 0px 0px 24px; border-radius: 9px;}
#header-main .contacts-line .icon svg {display: block; width: 100%; height: 100%; fill: var(--color-white);}
#header-main .contacts-line .icon.whatsapp {display: block; background-color: #25D366;}
#header-main .contacts-line .icon.telegram {display: block; background-color: #2AABEE;}

#header-main .contacts-line .phone {margin: 0px 24px 0px 0px;}
#header-main .contacts-line .phone .icon {margin: 0px 24px 0px 0px; height: 42px; padding: 9px; background-color: var(--color-second); box-sizing: border-box;}
#header-main .contacts-line .phone .text {display: block; padding: 10px 0px 8px 0px; font-weight: 600; font-size: 24px; line-height: 24px; color: var(--color-first);}



/**************** HEADER MENU ****************//**************** HEADER MENU ****************//**************** HEADER MENU ****************/
/**************** HEADER MENU ****************//**************** HEADER MENU ****************//**************** HEADER MENU ****************/
/**************** HEADER MENU ****************//**************** HEADER MENU ****************//**************** HEADER MENU ****************/