:root {
  --font-family: "Inter", sans-serif;
  --second-family: "Nunito", sans-serif;

  --primary-color: #0773b0;
  --secondary-color: #17587d;
  --hover-primary-color: #2890cb;
  --text-color: #000;
  --background-color: white;
}

body { font-family: var(--font-family); color: var(--text-color); background: var(--background-color); }
a, a.nav-link{ color: var(--text-color); text-decoration: none; transition: all 0.4s ease; }
a:hover{ color: var(--primary-color); }

.logo a { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 396px; height: 88px; }
.logo a img { width: 88px; height: 88px; object-fit: cover; }
.logo a .logo-title p { font: 500 13px var(--font-family); color: #000; }
.logo a .logo-title p:first-of-type { font: 800 25px var(--font-family); margin-bottom: 7px; }

.search-js-btn,
.search-mobile-js-btn {
    display: block;
    position: relative;
    z-index: 11;
}
.search-js-btn > img,
.search-mobile-js-btn > img { margin-right: 1px; }
.search-js-btn > span,
.search-mobile-js-btn > span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    transform: rotate(45deg);
    font-size: 32px;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-js-btn.active > span,
.search-mobile-js-btn.active > span {
    opacity: 1;
}
.search-js-btn.active img,
.search-mobile-js-btn.active img {
    opacity: 0;
}
.search-js-btn > span,
.search-js-btn > img ,
.search-mobile-js-btn > span,
.search-mobile-js-btn > img {
    transition: all 0.4s ease;
}

ul.nav .nav-link { padding: 0; color: var(--text-color); }
ul.nav .nav-link:focus { background-color: unset; color: #85d3ff; }
ul.nav .nav-link:hover{ color: #85d3ff; }
/* ul.nav .nav-link.is-active { color: #fff; } */

.pager { display: flex; justify-content: center; margin-top: 20px; }
.pager .page-link { box-shadow: none!important; }
.pagination {
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--hover-primary-color);
    --bs-pagination-focus-color: var(--primary-color);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
}

.contacts { display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px 28px; }
.contacts .contact { display: flex; flex-direction: row; align-items: center; column-gap: 15px; font: 500 16px var(--font-family); color: var(--primary-color); }
.contacts .contact img { width: 20px; height: 20px; object-fit: cover; }
.contacts .contact a { color: var(--primary-color); }
.contacts .contact a:hover { color: var(--hover-primary-color); }

.btn {
    background: var(--primary-color);
    padding: 13px 24px;
    color: #fff;
    font: 500 16px var(--font-family);
    line-height: 19px;
    text-align: center;
    border-radius: 10px;
    transition: all ease-in-out .3s;
}
.btn:hover, .btn:active, .btn:focus, .btn:focus-visible, .btn:disabled{
    color: #fff!important;
    background: var(--hover-primary-color)!important;
}

.block-title {
    font: 500 15px var(--font-family);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.block-title::before { content: ''; border-radius: 5px; width: 15px; height: 15px; background: #2dc3f0; }

div#vpa-short-wrapper { margin-left: auto; margin-right: 30px; max-width: 641px; gap: 55px; padding: 30px; align-items: flex-start; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; box-shadow: none; }
div#vpa-short-wrapper .vpa-content { font: 400 15px var(--font-family); }
.vpa-content p, .vpa-content { color: var(--text-color) }
div#vpa-short-wrapper .vpa-content a { color: var(--text-color); text-decoration: none; }
div#vpa-short-wrapper .vpa-content a:hover { color: var(--hover-primary-color); }
.vpa-actions .btn-primary { background-color: var(--secondary-color); padding: 11px 24px; }
.vpa-actions .btn-primary:hover { background-color: #1d72a3!important; }

@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
    div#vpa-short-wrapper { margin: 0 auto; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 575px) {
    div#vpa-short-wrapper { flex-direction: column; gap: 24px; }
}

/*============================== HEADER ==============================*/
header#header .header-top {
    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
    padding: 16px 0;
}
header#header .header-top .wr-logo { margin-right: 20px; }
header#header .header-top .wr-contacts .contacts {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
}

header#header .header-top .wr-right-side { display: flex; flex-direction: row; align-items: center; gap: 10px; }
header#header .header-top .wr-right-side .wr-search .region.region-search { position: relative; }
header#header .header-top .wr-right-side .wr-search .search-js-btn { padding: 13px; }
header#header .header-top .wr-right-side .wr-search .search-api-page-block-form-search.search-api-page-block-form.search-form {
    width: 0;
    overflow: hidden;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: white;
    border-radius: 10px;
}
header#header .header-top .wr-right-side .wr-search .search-api-page-block-form-search.search-api-page-block-form.search-form form {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    border-right: 0;
}
header#header .header-top .wr-right-side .wr-search .search-api-page-block-form-search.search-api-page-block-form.search-form form .form-item.form-type-search { width: 100%; }
header#header .header-top .wr-right-side .wr-search .search-api-page-block-form-search.search-api-page-block-form.search-form form .form-item.form-type-search input { border: none; padding-right: 0; outline: none; padding-left: 20px; }

header#header .header-top .wr-right-side .wr-search .search-api-page-block-form-search.search-api-page-block-form.search-form.active{ width: 345px; }
header#header .header-top .wr-right-side .wr-search .search-api-page-block-form-search.search-api-page-block-form.search-form.active form { opacity: 1; transition: opacity 0.3s ease; transition-delay: 0.15s;}
header#header .header-top .wr-callback a.btn { padding: 13px 30px; }

header#header .header-bottom .wr-nav { display: flex; flex-direction: column; align-items: center; background: var(--secondary-color); padding: 17px 0; border-radius: 10px; }
header#header .header-bottom .wr-nav ul.nav { gap: 30px; }
header#header .header-bottom .wr-nav ul.nav .nav-link { font: 500 16px var(--font-family); text-transform: uppercase; color: #fff; }
header#header .header-bottom .wr-nav ul.nav .nav-link:focus { background-color: unset; color: #85d3ff; }
header#header .header-bottom .wr-nav ul.nav .nav-link:hover{ color: #85d3ff; }

@media screen and (max-width: 1199px) {
    header#header .header-top .wr-contacts .contacts { max-height: unset; }
    header#header .header-top .wr-contacts .contacts { grid-template-rows: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 575px) {
}
/*====================================================================*/

/*============================== HEADER-MOB ==============================*/
header#header-mob { border-bottom: 2px solid var(--secondary-color); background: white; }

header#header-mob .logo a { height: 55px; }
header#header-mob .logo a img { width: 55px; height: 55px; }

header#header-mob .region.region-search-mobile { display: none; }
header#header-mob .region-search-mobile form { position: relative; }
header#header-mob .region-search-mobile .form-item.form-type-search { width: 100%; }
header#header-mob .region-search-mobile .form-item.form-type-search input { padding-right: 48px; }
header#header-mob .region-search-mobile .form-actions { display: block; }
header#header-mob .region-search-mobile .form-actions button {
    position: absolute;
    background: url(/sites/all/themes/vesta_theme/image/icons/search.svg) no-repeat center !important;
    font-size: 0;
    width: 38px;
    height: 38px;
    border: 0px solid;
    box-shadow: none;
    top: 0;
    right: 0;
    z-index: 2;
}

.offcanvas ul.nav { display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.offcanvas ul.nav a.nav-link:hover { color: var(--primary-color); }
.offcanvas .wr-callback a.btn { width: 100%; }

@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 850px) {
    header#header-mob .logo a { width: auto; }
    header#header-mob .logo a .logo-title p:last-of-type { display: none; }
}
@media screen and (max-width: 680px) {
    header#header-mob .wr-callback { display: none; }
}
@media screen and (max-width: 575px) {
    header#header-mob .logo a .logo-title p { display: none; }
}
@media screen and (max-width: 380px) {
    header#header-mob .wr-contacts { display: none; }
}
/*========================================================================*/

/*============================== BANNER ==============================*/
#banner-block {
    margin-top: -204px;
    background: url(/sites/all/themes/vesta_theme/image/bg-banner.png) no-repeat bottom / cover;
    height: 708px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 116px;
}

#banner-block #block-vesta-theme-bannernaglavnoy .block-title { margin-bottom: 20px; }
#banner-block #block-vesta-theme-bannernaglavnoy .field.field--name-body h1 { font: 700 50px var(--font-family); margin-bottom: 40px; }
#banner-block #block-vesta-theme-bannernaglavnoy .field.field--name-body p { font: 400 16px var(--font-family); max-width: 470px; margin-bottom: 20px; }
#banner-block #block-vesta-theme-bannernaglavnoy .field.field--name-body a.btn { padding: 13px 43px; }

@media screen and (max-width: 1199px) {
}
@media screen and (max-width: 991px) {
    #banner-block {
        margin-top: -30px;
        height: auto;
        padding: 24px 0;
    }
    #banner-block #block-vesta-theme-bannernaglavnoy .field.field--name-body h1 { font-size: 32px; }
}
@media screen and (max-width: 767px) {
    #banner-block #block-vesta-theme-bannernaglavnoy .field.field--name-body h1 { font-size: 24px; margin-bottom: 30px; }
}
@media screen and (max-width: 575px) {
}
/*====================================================================*/

/*============================== SERVICES ==============================*/
#services-block #block-vesta-theme-zagolovokuslugi .field.field--name-body::after { display: none; }
#services-block #block-vesta-theme-zagolovokuslugi .field.field--name-body { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
#services-block #block-vesta-theme-zagolovokuslugi .field.field--name-body h2 { max-width: 470px; }
#services-block #block-vesta-theme-zagolovokuslugi .field.field--name-body a { flex: 0 0 auto; font: 700 16px var(--font-family); text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: 3px; }
@media screen and (max-width: 575px) {
    #services-block #block-vesta-theme-zagolovokuslugi .field.field--name-body { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/*======================================================================*/

/*============================== ADVANTAGES ==============================*/
#advantages-block {
    padding: 80px 0;
    background: url(/sites/all/themes/vesta_theme/image/bg-advantages.png) center / cover no-repeat;
}
#advantages-block #block-vesta-theme-zagolovokpreimushchestva .field.field--name-body {  margin-bottom: 40px; }

@media screen and (max-width: 767px) {
    #advantages-block { padding: 40px 0; }
}
/*========================================================================*/

/*============================== GALLERY ==============================*/
#gallery-block #block-vesta-theme-zagolovokproekty .field.field--name-body::after { display: none; }
#gallery-block #block-vesta-theme-zagolovokproekty .field.field--name-body { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
#gallery-block #block-vesta-theme-zagolovokproekty .field.field--name-body h2 { max-width: 420px; }
/*=====================================================================*/

/*============================== COMPANY LOGOS ==============================*/
#company-logos-block .view.view-logos.view-id-logos .node.node--type-logos .field.field--name-field-image {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 155px;
    align-items: center;
}

@media screen and (max-width: 1199px) {
    #company-logos-block .view.view-logos.view-id-logos .node.node--type-logos .field.field--name-field-image { gap: 10px 50px; justify-content: center; }
}
/*===========================================================================*/

/*============================== WEBFORM ==============================*/
#webfrom-block { padding: 80px 0; background: url(/sites/all/themes/vesta_theme/image/bd-webform.png) center / cover no-repeat; }
#webfrom-block .wr-info { display: flex; flex-direction: column; gap: 108px; }
#webfrom-block .wr-info .block-title { margin-bottom: 0; }
#webfrom-block .wr-info .wr-contacts { display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px; }
#webfrom-block .wr-info .wr-contacts > div { display: flex; flex-direction: column; gap: 15px; }
#webfrom-block .wr-info .wr-contacts > div > p { font: 400 16px / 1.45 var(--font-family); color: rgba(25, 25, 25, 0.5); }
#webfrom-block .wr-info .wr-contacts > div > div { display: flex; flex-direction: column; gap: 10px; }
#webfrom-block .wr-info .wr-contacts > div > div a { font: 700 20px var(--font-family); color: var(--primary-color); }
#webfrom-block .wr-info .wr-contacts > div > div a:hover { color: var(--hover-primary-color); }
#webfrom-block .wr-info .wr-contacts > div > div.social-contact a { display: flex; flex-direction: row; align-items: center; gap: 13px; }

#webfrom-block .wr-webfrom h2 { margin-bottom: 30px; max-width: 530px; }
#webfrom-block .wr-webfrom button.btn { width: 100%; }

@media screen and (max-width: 767px) {
    #webfrom-block { padding: 40px 0; }
    #webfrom-block .wr-info { gap: 30px; }
}
/*=====================================================================*/

/*============================== FOOTER ==============================*/
footer#footer .footer-top { border-top: 1px solid rgba(0, 0, 0, 0.5); padding-bottom: 40px; }
footer#footer .footer-top .logo { padding: 20px 0; display: flex; }
footer#footer .footer-top .logo a { width: auto; }
footer#footer .footer-top .logo a img { width: 70px; height: 70px; object-fit: cover; }
footer#footer .footer-top .logo a .logo-title p:first-of-type { font: 800 20px var(--font-family); margin-bottom: 5px; }
footer#footer .footer-top .wr > p { font: 600 16px var(--font-family); color: rgba(0, 0, 0, 0.5); margin-bottom: 15px; }

footer#footer .footer-top .wr-nav ul.nav { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font: 500 16px var(--font-family); }
footer#footer .footer-top .wr-nav ul.nav .nav-link:hover { color: var(--primary-color); }

footer#footer .footer-top .wr-contacts .contact { font: 500 16px var(--font-family); margin-bottom: 5px; }
footer#footer .footer-top .wr-contacts .social-contact { margin-top: 20px; }
footer#footer .footer-top .wr-contacts .social-contact a { display: flex; align-items: center; gap: 10px; font: 500 20px var(--font-family); }

footer#footer .footer-top .wr-services a { display: block; font: 500 16px var(--font-family); margin-bottom: 5px;}

footer#footer .footer-bottom { border-top: 1px solid rgba(0, 0, 0, 0.5); display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 18px 6px 10px 6px; font: 400 15px var(--font-family); color: #828282; }
footer#footer .footer-bottom a { font: 400 15px var(--font-family); color: #828282; }
footer#footer .footer-bottom a:hover { color: var(--primary-color); }

/*====================================================================*/