@import url("font/Gilroy/stylesheet.css");

:root{
    --color1:#535353;
    --color2:#6980D2;
    --color3:#D24A43;
    --color4:rgb(243 246 249 / 80%);
    --color5:#5369b7;
    --red:#D24A43;

}
HTML{}

BODY{line-height:1.5; font-size:14px; font-weight: 500; font-family: 'Gilroy', sans-serif; color: var(--color1)}
BODY._inner{ }

.__wrapper{   padding-top: 80px }
.__container{ max-width: 1320px; margin:0  auto; }

/***/
h1{ font-weight: 800}
h2{ font-size: 22px; line-height: 1.2}
h3{ font-size: 18px; line-height: 1.2}
a{ color: inherit}


.button{ font-size: 14px; font-weight: 500; letter-spacing: 1px; color: #fff; background-color: var(--color3); width: 100%; max-width: 210px; line-height: 36px; text-align: center; border-radius: 10px; box-shadow: 0px 16px 7px -9px rgb(43 65 92 / 18%); display: block;   text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; padding: 0px 15px; box-sizing: border-box; }
.button:hover{ box-shadow: 3px 5px 13px rgba(13, 38, 79, 0.4); background-color: var(--red)}

/***/
header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100;  background: #fff   }
.header-items{ border-bottom: 1px solid rgb(0 0 0 / 10%);  padding: 12px 0 }
.header-item-logo{ flex-grow: 1; z-index: 10}
.header-item-logo .header-logo{display: inline-block; width: 120px; height: 36px; background-image: url(../images/logo.svg); background-size: contain; background-position: left; background-repeat: no-repeat;}

.header-item-menu{ display: none}

.header-item-contacts{ display: flex; align-items: center;margin-right: 20px;}
.header-item-phones  a{ display:block; background-size: 20px; background-repeat: no-repeat; background-position: 0 center; display: block; font-weight: 400; font-size: 13px; }
.header-item-phones{ margin-right: 20px;}

.header-item-cosial{ margin-right: 20px}

.header-item-adress,
.header-item-button,
.header-menu{ display: none}

.cosial-link{display: block; width: 24px; height: 24px; background-position: center; background-size: contain; background-repeat: no-repeat;}
.cosial-link.tg{ background-image: url(../images/social-tg.svg)}
.cosial-link.wt{ background-image: url(../images/whatsapp.svg)}

/***/
.menu-button{ display:block; width: 22px; height:22px; z-index: 7100;  -webkit-transition: all 0.5s ease; transition: all 0.5s ease; right: 0; }
.menu-button .menu-icon{ display:block; width:22px;position:absolute; height:2px;  top:0; bottom:0; left:0; right:0; margin:auto;
    background: var(--color1);border-radius: 2px;}
.menu-button .menu-icon:before,
.menu-button .menu-icon:after{ display:block; content:""; position:absolute; height:2px; width:100%; left:0;
    margin:auto; background: var(--color1); -webkit-transition: all .3s ease; transition: all 0.3s ease; border-radius: 2px;}
.menu-button .menu-icon:before{ top:7px;}
.menu-button .menu-icon:after{ bottom:7px;}
.menu-button.is_open .menu-icon, .menu-button.is_open .menu-icon:before, .menu-button.is_open .menu-icon:after{  background: var(--red);}
.menu-button.is_open { -webkit-transform: rotate(-180deg)}
.menu-button.is_open .menu-icon{ height:0; }
.menu-button.is_open .menu-icon:before{-webkit-transform: rotate(-45deg);    transform: rotate(-45deg);      width: 100%;   top: 0; bottom:0;}
.menu-button.is_open .menu-icon:after{-webkit-transform: rotate(45deg);    transform: rotate(45deg);      width: 100%;   top: 0; bottom:0;}

.over-content .header-menu{ display: flex;  height: 100%; flex-direction: column; justify-content: center}
.over-content .menu-items a{ color: var(--color1) !important}


/***/
.page{ }
.page p{ }
.page ol li,
.page ul li,
.page .ol .li,
.page .ul .li { }

article img{ width: 100% !important; max-width: 100%; max-height: 360px; object-fit: cover; margin: 15px 0}

article .price-block-wrapper{ border: 1px solid var(--color2); padding: 10px; margin: 20px 0}
article .section-title{ margin: 10px; font-size: 22px !important}
    /**/
.double-block{ }
.double-block-content{ background-color: rgb(243 246 249 / 80%); z-index: 10}
.double-block-image{ overflow: hidden; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%}
.double-block-image img{height: 100%; width: 100%; object-fit: cover}

.detale-link{ padding: 10px 0}
.detale-link a{ display: inline-block; background-repeat: no-repeat; background-position: right center; background-size: 14px; background-image:url(../images/detale-arrow.svg); color: var(--color2); padding-right: 20px }

.block-link{ position: absolute; top: 0; left: 0; width: 100%; height: 100%}


/***/
.topbanner-content{ padding: 60px 20px;}
.topbanner-content h1{ margin: 0; line-height: 1;  margin-bottom: 20px; position: relative; padding-bottom: 15px;}
.topbanner-content h1:after{ content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 40%; height: 2px; background: var(--color2); opacity: .7}
.topbanner-content h1 span:first-child{ display: block; font-size: 40px; max-width: 200px; }
.topbanner-content h1 span:nth-child(2){ display: block; font-size: 32px; color: var(--color2) }
.topbanner-content h1 span.city{display: block; font-size: 18px; line-height: 1.4}
.topbanner-content p{ font-size: 18px;}
.topbanner-content .button-wrapper{margin-top: 20px}


/***/
.price-block {   margin: auto}
.price-item-wrap{ background:rgb(243 246 249 / 100%); padding: 15px; margin-bottom: 15px; }
.price-item{ font-size: 18px; display: flex; flex-direction: column; justify-content: space-between}
.price-item h3{ margin-top: 0; font-size: 18px; flex: 1}
.price-item .price-title{ font-size: 14px;}
.price-item .price{ font-size: 16px; font-weight: 700; color: var(--color2)}
.price-item .price span{ font-size: 26px; font-weight: 800}
.price-item .button-wrap{ margin-top: 20px;}
.price-item .button{ background: var(--color1)}

    /**/
.embla__viewport { overflow: hidden; width: 100%;}
.embla__viewport.is-draggable {cursor: move;cursor: grab;}
.embla__viewport.is-dragging {cursor: grabbing;}
.embla__container {display: flex; user-select: none;-webkit-touch-callout: none; -khtml-user-select: none; -webkit-tap-highlight-color: transparent;}
.embla__slide { position: relative; flex: 0 0 100%;  min-width: 0; }
.embla__slide img{ width: 100%; max-width: 100%}


/**/
.filials-block{ margin: 30px 0}
.filials-block .embla__viewport{ padding-left:15px; box-sizing: border-box}
.filials-block .embla__container{ align-items: stretch  }
.filials-block .embla__slide{ }
.filials-block .__line-block-wrap{ margin-right: 15px; flex-basis: calc(100% - 80px); transition: all 0.3s ease;}
filials-block .__line-block-wrap:hover{  /* box-shadow: 0 6px 10px -5px rgb(0 0 0 / 15%)*/ }

.filials-block .__line-block-item{ box-sizing: border-box;     display: flex; flex-direction: column; height: 100%; justify-content: center;  border: 1px solid #eee;   transition: all 0.3s ease;  justify-content: space-between}
.filials-block .__line-block-item:hover{ border: 1px solid var(--color2)}

.filial-item-image{ height: 200px; object-fit: cover; margin-bottom: 10px;}
.filial-item h3{ margin-top: 0; margin-bottom: 10px}
.filial-item-content{ padding: 0 15px; flex: 1}
.filial-item-icon{ width: 50px; height: 50px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.filial-item.all-link-item{ border: 1px solid #eee; display: flex; flex-direction: column; justify-content: center; padding: 30px; height: 100% }
.filial-item.all-link-item .filial-item-title{ font-weight: 600; text-transform: uppercase; font-size: 18px; margin: 20px 0}
.section-title{font-size: 22px;font-weight: 300;margin-bottom: 20px; text-align: center; text-transform: uppercase; letter-spacing: 1px; margin: 40px 0 20px;}

/**/
.page-item{ display: flex; flex-direction: column;   margin: auto; margin-top: 20px }
.page-item aside{ order: 2}
aside .sticky{}

.page-banner-content {padding: 40px 20px; background:rgb(243 246 249 / 80%)}
.page-banner-content h1{ margin-top: 0; margin-bottom: 20px; line-height: 1.2}
.page-banner-content .button-wrapper{ padding-top: 20px}
.page-banner-content .button{ background: none; color: var(--red); border: 1px solid var(--red); max-width: 280px; }

    /**/
.sidebar-title{ font-size: 22px; text-align: center;   margin-bottom: 30px; margin-top: 15px; text-transform: uppercase;}
.sidebar-block{ margin:0 -15px 25px -15px; padding: 0 5px}
.sidebar-benefits{    width: 100%; overflow: auto;display: flex; padding-bottom: 15px}
.sidebar-benefits a{ display: flex; align-items: center; background-repeat: no-repeat; background-position: center 10px; background-size: 32px 32px; padding-top: 50px; margin:0  10px; min-height: 40px; border: 1px solid #eee; flex-basis: 37%; flex-shrink: 0   }
.sidebar-benefits h4{ font-size: 14px; font-weight: 400; margin: 0; line-height: 1.2; text-align: center; padding: 10px 20px}

.sidebar-services{    width: 100%; overflow: auto;display: flex; padding-bottom: 15px}
.sidebar-services a{ display: flex; align-items: center;  margin:0  10px; min-height: 40px; border: 1px solid #eee; flex-basis: 37%; flex-shrink: 0; background: var(--color4)   }
.sidebar-services h4{ width: 100%; display: block; font-size: 14px; font-weight: 500; margin: 0; line-height: 1.2; text-align: center; padding: 20px}


/**/
.reviews-block{ margin: 30px 0}
.reviews-block .embla__viewport{ padding-left:15px; box-sizing: border-box}
.reviews-block .__line-block-wrap{ margin-right: 15px; flex-basis: calc(100% - 80px)}
.reviews-block .__line-block-item{ background: var(--color4); padding: 15px; box-sizing: border-box;   }
.reviews-item-head{ display: flex; justify-content: space-between; align-items: center }
.reviews-item-title{    font-size: 18px;line-height: 1.2;font-weight: 600;}
.embla__slide img.reviews-item-image{width: 80px;border-radius: 50%; }

.page .reviews-block{ margin: 30px -15px;}


/**/
footer{ padding: 15px 0; background: #4A5C9B; color: #fff}
.footer{ padding-top: 25px; padding-bottom: 15px}
.footer-item{ text-align: center; margin-bottom: 15px}
.footer-logo a{ width: 150px; height: 60px; display: inline-block; background-image: url(../images/logo-w.svg); background-size: contain; background-position: center top; background-repeat: no-repeat;}
.footer-item-adress{ font-size: 14px;}
.footer-item-phones  a{ display:block; background-size: 20px; background-repeat: no-repeat; background-position: 0 center; display: block; font-weight: 400;
    font-size: 16px; font-weight: 600 }
.footer-item-phones{ margin-right: 20px;}

.footer-item-cosial .cosial-link{ margin: auto }
.footer-text{font-size: 12px; opacity: .8; border-top: 1px solid rgb(255 255 255 / 10%); }

.checkbox label:before, .checkbox label:after{ cursor: pointer}

@media only screen and (min-width: 480px) {
    .filials-block .__line-block-wrap{  flex-basis: calc(45%)}

    .page-item section{ max-width: 500px; margin: auto;  }
    .reviews-block .__line-block-wrap{ flex-basis: 60%; }


}


@media only screen and (min-width: 768px) {
    BODY{ font-size:15px;}
    .__wrapper{ padding-top: 84px;}

    h2{ font-size: 24px; line-height: 1.2}
    h3{ font-size: 20px; line-height: 1.2}


    /**/
    .header-items{ padding: 15px 0 }
    .header-item-phones{ display: flex; }
    .header-item-phones .header-phone { padding-left: 35px;background-size: 26px;line-height: 26px; margin-right: 20px; }
    .header-item-phones .phone-mob{background-image: url(../images/phone.svg) }
    .header-item-phones a{font-size: 14px; font-weight: 500}
    .header-item-logo .header-logo{ width: 140px}
    .header-item-cosial{ margin-right: 40px}


    .price-block{ max-width: none; display: flex; }
    .price-block{ margin: 0 -10px; }
    .price-block .price-item-wrap{ flex-basis: 33.33%; margin: 0 10px; padding: 15px;  }

    .filials-block .__line-block-wrap{   flex-basis: calc(28%)}


    /***/
    .topbanner-content{ padding: 60px}
    .topbanner-content h1 span:first-child{font-size: 50px;}
    .topbanner-content h1 span:nth-child(2){  font-size: 32px;  }
    .topbanner-content h1 span:last-child{ display: block; font-size: 22px;   }
    .topbanner-content p{ font-size: 16px;}

    /**/
    .page-banner{ display: flex;}
    .page-banner > div{ flex-basis: 50%; box-sizing: border-box;}
    .page-banner-image{ order: 2}
    .page-banner-image img{ height: 100%; width: 100%; object-fit: cover;}

    .page-item section{ max-width: 800px; margin: 0 auto;  }
    .page-banner-content{  display: flex; flex-direction: column; justify-content: center; padding: 20px 40px}
    .page-banner-content h1{ font-size: 34px}
    .page-banner-content p{ margin: 0}
    .page-item .innerform-page-form{ display: flex; margin: 30px 0;}
    .page-item .innerform-page-form > div { flex-basis: 50%}

    .sidebar-benefits a { flex-basis: 27% }
    .sidebar-services a{ flex-basis: 27%}

    /**/
    article .innerform-side-desc{ background: rgb(227 235 243); }
    article .innerform-side-desc * {color: var(--color1) !important}

    .reviews-block .__line-block-wrap{ flex-basis: 40%;  }
}

@media only screen and (min-width: 1024px) {

    .__wrapper{  padding-top: 140px;}

    .header-item-adress, .header-item-button, .header-menu{ display: block}
    .header-items{ padding: 20px 0}
    .header-item-logo{ flex-grow: 0; width: 260px; height: 40px}
    .header-item-logo .header-logo{width: 160px;height: 44px}
    .header-item-contacts,
    .header-item-cosial{margin-right: 0px;}
    .header-item-contacts{ display: flex; flex-direction: column; align-items: flex-start}
    .header-item-contacts > div{ margin: 7px 0}
    .header-item-phones a { font-size: 14px;}

    .header-item-adress {display: block;background-size: 26px;background-repeat: no-repeat;background-position: 0 center;display: block;font-weight: 400;font-size: 13px;
        background-image: url(../images/location.svg); padding-left: 35px;}

    .header-menu{ border-bottom: 1px solid rgb(0 0 0 / 10%)}
    .header-menu ul{display: flex; margin: 0; padding: 0; list-style: none; justify-content: center;}
    .header-menu li{ margin: 0 25px; }
    .header-menu a{ line-height: 38px; text-transform: uppercase}

    .section-title{font-size: 32px;  margin: 50px 0 30px;}

    .price-block .price-item-wrap{ margin: 0 15px; padding: 25px;  }
    .price-item h3{ margin-top: 0; font-size: 20px;}

    .cosial-link{width: 28px; height: 28px;}

    .double-block{ display: flex; }
    .double-block > div{ flex-basis: 50%; height: auto}
    .double-block-content{ display: flex; align-items: center}
    .double-block-image{position: relative;top: auto; left: auto }


    .filials-block .__line-block-wrap{   flex-basis: calc(25% - 30px); margin: 0 15px}


    .page-banner-content h1{ font-size: 38px}
    .page-item{ display: flex; flex-direction: row}
    .page-item aside{ flex-basis: 240px; order: 0; flex-grow: 0}
    .page-item section{ max-width: none; margin-left: 20px;}

    .page-item .price-block .price-item-wrap{ margin: 0 10px; padding: 20px;  }
    .page-item .price-item h3 { font-size: 18px;}
    .page-item .price-item .button{ padding: 0 5px}

    article .price-block-wrapper{  margin: 30px 0}



    /**/
    aside .sticky{position: sticky; top: 125px}
    .sidebar-title{ font-size: 18px; font-weight: 600; padding-bottom: 5px; border-bottom: 2px solid var(--color2); margin-top: 5px; margin-bottom: 15px; text-transform: none; text-align: left}
    .sidebar-block{ margin: 0; padding: 0; margin-bottom: 25px;}
    .sidebar-benefits{ flex-direction: column;}
    .sidebar-benefits a{ padding-top: 0; background-size: 38px 38px; padding-left: 50px; border: none; background-position: left center; }
    .sidebar-benefits h4{  text-align: left}
    .sidebar-benefits a:hover{ text-decoration: underline}
    .sidebar-benefits a:hover h4{  }
    .sidebar-services{ flex-direction: column;}
    .sidebar-services a{ padding: 0; margin: 0; background: 0; border: none; border-bottom: 1px dashed  rgb(105 128 210 / 40%); padding-bottom: 8px; margin-bottom: 8px; min-height: unset; box-sizing: border-box}
    .sidebar-services a:hover{border-bottom: 1px dashed  rgb(105 128 210 / 100%); font-weight: 600 }
    .sidebar-services a:hover h4{  font-weight: 600 }

    .sidebar-services h4{ font-size: 15px; font-weight: 500; text-align: left; padding: 0; }

    .reviews-block .embla__viewport{padding: 0 15px;}
    .reviews-block .__line-block-wrap{ flex-basis: calc(25% - 30px); margin: 0 15px  }

    /***/
    .topbanner-content{ padding: 60px}
    .topbanner-content h1 span:first-child{font-size: 60px;  }
    .topbanner-content p{ font-size:18px;}

    .footer-items{ gap:25px}
    .footer-item{ text-align: left; margin-bottom: 0px; max-width: 250px}
    .footer-item-title{ display: block; font-weight: 600; margin-bottom: 15px}
    .footer-menu ul{ justify-content: left; flex-direction: column }
    .footer-menu ul li{  margin: 0; margin-bottom: 5px; min-width: 200px}
    .footer-phones{ margin-bottom: 15px}
    .footer-phones a{ display: flex; flex-direction: column; }
}

@media only screen and (min-width: 1280px) {

    .header-item-logo .header-logo{width: 180px;height: 50px}
    .header-item-menu{ font-size: 15px}
    .header-menu a{ line-height: 42px; font-size: 16px}

    /***/
    .topbanner-content h1 span{ line-height: 1}
    .topbanner-content h1 span:first-child{font-size: 70px; }
     .topbanner-content h1 span:nth-child(2){  font-size: 40px;  }
    .topbanner-content h1 span:last-child{  font-size: 32px;   }
    .topbanner-content .button-wrapper{margin-top: 40px}

    /**/
    .page-item section{ margin-left: 40px;}

    aside .sticky{position: sticky; top: 130px}

}