:root {
  --font-family: "Raleway", sans-serif;
  --second-family: "Lora", sans-serif;
  --third-family: "Playfair Display", sans-serif;
  --text-color: #3f4243;
  --background-color: white;
  --primary-color: #F06E1A;
  --hover-color: #F06E1A;
  --hover-primary-color: #c06930;
  --hover-btn-color: #ef8741;
  --white: #fff;
  --product-bg-color: #FFCC25;
}


body { font-family: var(--second-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(--hover-color); }

ul.nav .nav-link { padding: 0; }
ul.nav .nav-link:focus { background-color: unset; color: var(--hover-color); }
ul.nav .nav-link:hover{ color: var(--hover-color); }
ul.nav .nav-link.is-active { color: var(--light-red); }

ul.nav .dropdown-menu { flex-direction: column; flex-wrap: wrap; gap: 14px 100px; background-color: var(--background-color); border-radius: 0; border: unset; padding: 30px 26px; padding-right: 60px; max-height: 325px; width: max-content; }
ul.nav .dropdown-menu .dropdown-item { font: 500 16px var(--second-family); color: var(--primary-color); background-color: transparent; padding: 0; width: min-content; width: 100%; white-space: normal; text-underline-offset: 4px; }
ul.nav .dropdown-menu .dropdown-item:hover { background-color: transparent; color: var(--hover-primary-color); }
ul.nav .dropdown-menu .dropdown-item.active { background-color: transparent; text-decoration: underline; }
ul.nav .nav-link[data-drupal-link-system-path="products"] + .dropdown-menu .dropdown-item { max-width: 230px; }
ul.nav .dropdown-toggle::after {
    background-image: url(/sites/all/themes/vesta_theme/image/icons/arrow-down.svg);
    width: 9px;
    height: 5px;
    background-repeat: no-repeat;
    border: none;
    margin-left: 4px;
    vertical-align: 3px;
} 
ul.nav a:hover.dropdown-toggle::after {
    background-image: url(/sites/all/themes/vesta_theme/image/icons/arrow-down-orange.svg);
    width: 9px;
    height: 5px;
    background-repeat: no-repeat;
    border: none;
    margin-left: 4px;
    vertical-align: 3px;
} 

.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);
}

.btn {
    background: var(--primary-color);
    padding: 13px 24px;
    color: var(--white);
    font: 500 18px var(--font-family);
    text-align: center;
    box-shadow: 0 4px 9px 0 rgba(72, 35, 11, 0.29);
    border-radius: 10px;
    transition: all ease-in-out .3s;
}
.btn:hover, .btn:active, .btn:focus, .btn:focus-visible, .btn:disabled{
    color: var(--white)!important;
    background: var(--hover-btn-color);
}

.block-title { font: 600 40px / 1.5 var(--second-family); text-align: center; color: var(--text-color); margin-bottom: 60px; }

.vpa-container .vpa-wrapper { background-color: var(--primary-color); }
.vpa-container .vpa-wrapper .vpa-content { font: 300 14px / 1.35714 var(--font-family); }
.vpa-container .vpa-wrapper .vpa-content p:first-of-type strong { font: 600 14px / 1.99286 var(--font-family); margin-bottom: 10px; }
.vpa-container .vpa-wrapper .btn.btn-primary,
.vpa-container .vpa-wrapper .btn.btn-secondary { font: 500 14px / 1.35714 var(--font-family); background-color: var(--white); color: var(--primary-color); border: 1px solid var(--white)!important; }
.vpa-container .vpa-wrapper .btn.btn-primary:hover,
.vpa-container .vpa-wrapper .btn.btn-secondary:hover { background-color: var(--primary-color); }
/*.vpa-container .vpa-wrapper .vpa-actions { margin-top: 25px; }*/


.contacts {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px 34px;
}
.contacts .contact {
    font: 400 16px var(--second-family);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: 236px;
}
.social-contacts { display: flex; flex-direction: row; gap: 16px; }



.region-search form { position: relative; }
.region-search form > * { display: block; }
.region-search form .form-control { 
    background: transparent;
    font: 500 12px var(--font-family);
    color: rgba(255, 255, 255, 0.42);
    padding: 11px 8px;
    padding-left: 43px;
    border: 1px solid #fff;
    border-radius: 10px;
}
.region-search form .form-control::placeholder { color: rgba(255, 255, 255, 0.42); }
.region-search form .btn-primary::after { display: none; }
.region-search form .btn-primary {
    position: absolute;
    background: url(/sites/all/themes/vesta_theme/image/icons/search.svg) no-repeat center;
    font-size: 0;
    width: 38px;
    height: 38px;
    padding: 0 11px;
    margin-left: 5px;
    background-color: transparent !important;
    box-shadow: none!important;
    left: 0;
    top: 0;
    z-index: 2;
}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 992px) {
    .block-title { font-size:  32px; }
}
@media screen and (max-width: 767px) {
    .block-title { font-size:  28px; }
}
@media screen and (max-width: 576px) {
}
/*=====================HEADER=====================*/
header#header .wr-top .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}
header#header .wr-top .logo { margin-right: 100px; }
header#header .wr-top .logo a { display: block; width: 176px; height: 77px; }
header#header .wr-top .logo img { width: 100%; height: 100%; object-fit: cover; }
header#header .wr-top .contacts .contact.phone { font: 600 18px var(--second-family); }
header#header .wr-top .contacts .contacts-container { display: flex; flex-direction: column; gap: 13px 34px; }
header#header .wr-top .contacts .contact:first-of-type { align-items: flex-start; }
header#header .wr-top .social-contacts img { width: 40px; height: 40px; }

header#header .wr-bottom { background-color: var(--primary-color); }
header#header .wr-bottom .container { display: flex; justify-content: center; }
header#header .wr-bottom .container ul.nav .nav-link { padding: 20px 26px; font: 600 18px var(--second-family); color: var(--white); }
header#header .wr-bottom .container ul.nav .nav-link:hover { color: var(--hover-color); background-color: var(--white); }
header#header .wr-bottom .container ul.nav .nav-item.dropdown .dropdown-menu { top: 48px; }

@media screen and (max-width: 1200px) {
    header#header .wr-top .contacts { flex-wrap: wrap; }
    header#header .wr-top .contacts .contacts-container { flex-direction: row; }
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 576px) {
}
/*================================================*/

/*=====================HEADER-MOB=====================*/
header#header-mob { background-color: var(--text-color); padding: 8px 20px; color: var(--white); }
header#header-mob a.logo { display: flex; align-items: center; }
header#header-mob a.logo img { width: 110px; height: auto; object-fit: cover; }

header#header-mob a { color: var(--white); }
header#header-mob a:hover{ color: var(--hover-color); }

header#header-mob .contacts { height: 100%; gap: 20px; }
header#header-mob .contacts > div { display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; }


.offcanvas { --bs-offcanvas-bg: var(--text-color); color: var(--white); }
.offcanvas a, .offcanvas a.nav-link, .offcanvas a.dropdown-item { color: var(--white)!important; }
.offcanvas ul.nav .nav-item { margin-bottom: 6px; }
.offcanvas ul.nav .nav-item:last-of-type { margin-bottom: 0px; }
.offcanvas ul.nav .dropdown-menu { max-height: none!important; }
.offcanvas ul.nav .dropdown-menu .nav-item { margin-bottom: 8px; }
.offcanvas ul.nav .dropdown-menu .nav-item:last-of-type { margin-bottom: 0px; }
.offcanvas a:hover{ color: var(--hover-color)!important; }
.offcanvas-body { display: flex; flex-direction: column; gap: 18px; }
.offcanvas .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 1;
}

@media screen and (max-width: 767px) {
}
@media screen and (max-width: 576px) {
    header#header-mob .contacts > div:last-of-type { display: none; }
}
/*====================================================*/


/*=====================BANNER=====================*/
#banner-block {
    background-image: url(/sites/all/themes/vesta_theme/image/banner-bg.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin-bottom: 0!important;
    margin-top: -30px;
}
#banner-block .region-banner {
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.51);
    display: flex;
    align-items: center;
    justify-content: center;
    
}
#banner-block .region-banner #block-vesta-theme-tekstnabannere .field.field--name-body { padding: 120px 0; max-width: 1100px; }
#banner-block .region-banner #block-vesta-theme-tekstnabannere .field.field--name-body h1 { font: 600 48px / 1.5625 var(--second-family); text-transform: uppercase; text-align: center; color: var(--white); }

@media screen and (max-width: 1200px) {
    #banner-block .region-banner #block-vesta-theme-tekstnabannere .field.field--name-body h1 { font-size: 36px; }
} 
@media screen and (max-width: 992px) {
    #banner-block .region-banner #block-vesta-theme-tekstnabannere .field.field--name-body h1 { font-size: 30px; }
}
@media screen and (max-width: 767px) {
    #banner-block .region-banner #block-vesta-theme-tekstnabannere .field.field--name-body h1 { font-size: 24px; }
}
@media screen and (max-width: 576px) {
    #banner-block .region-banner #block-vesta-theme-tekstnabannere .field.field--name-body h1 { font-size: 18px; }
}
/*================================================*/

/*=====================ABOUT=====================*/
#about-block {
    padding: 90px 0;
    background-color: transparent;
    position: relative;
    margin-bottom: 0!important;
}
#about-block::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-image: url(/sites/all/themes/vesta_theme/image/about-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    opacity: 0.08;
    z-index: -1;
}
#about-block .wr-about {
    display: flex;
    flex-direction: row;
    gap: 70px;
}
#about-block .wr-about > img { width: 500px; height: 559px; object-fit: cover; box-shadow: 0 4px 9px 0 rgba(72, 35, 11, 0.29); border-radius: 10px; flex: 0 0 auto; }
#about-block .wr-about > div { display: flex; flex-direction: column; gap: 87px; align-items: flex-start; }
#about-block .wr-about > div > a.btn { padding: 13px 64px; }
#about-block .wr-about #block-vesta-theme-obomne .field.field--name-body { font: 500 24px / 1.5 var(--font-family); color: #383e42; }
#about-block .wr-about #block-vesta-theme-obomne .field.field--name-body span { font: 600 24px / 1.5 var(--font-family); }

@media screen and (max-width: 1200px) {
} 
@media screen and (max-width: 992px) {
    #about-block { padding: 45px 0; }
    #about-block .wr-about { gap: 35px; }
    #about-block .wr-about #block-vesta-theme-obomne .field.field--name-body,
    #about-block .wr-about #block-vesta-theme-obomne .field.field--name-body span { font-size: 18px; }
    #about-block .wr-about > img { width: 350px; height: 450px; }
}
@media screen and (max-width: 767px) {
    #about-block { padding: 30px 0; }
    #about-block .wr-about { flex-direction: column-reverse; }
    #about-block .wr-about > img { width: 100%; height: 250px; }
    #about-block .wr-about > div { gap: 45px; }
}
@media screen and (max-width: 576px) {
}
/*===============================================*/

/*=====================SERVICES=====================*/
#services-block {
    margin-bottom: 0!important;
    padding: 90px 0;
}
#services-block #block-vesta-theme-uslugi { display: flex; flex-direction: column; align-items: center; }
#services-block #block-vesta-theme-uslugi .block-title { margin-bottom: 31px; }
#services-block #block-vesta-theme-uslugi .field.field--name-body { font: 600 24px / 1.5 var(--second-family); text-align: center; color: var(--text-color); max-width: 621px; margin-bottom: 60px; }

#services-block .view.view-services { display: flex; flex-direction: column; align-items: center; gap: 53px; }
@media screen and (max-width: 992px) {
    #services-block { padding: 45px 0; }
}
@media screen and (max-width: 767px) {
    #services-block { padding: 30px 0; }
    #services-block #block-vesta-theme-uslugi .field.field--name-body { font-size: 22px; margin-bottom: 20px; }
}
/*==================================================*/

/*=====================PRODUCTS=====================*/
#products-block {
    margin-bottom: 0!important;
    padding: 90px 0;
    background-color: #F9F9F9;
}
@media screen and (max-width: 992px) {
    #products-block { padding: 45px 0; }
}
@media screen and (max-width: 767px) {
    #products-block { padding: 30px 0; }
}
/*==================================================*/

/*=====================ADVANTAGES=====================*/
#advantages-block {
    margin-bottom: 0!important;
    padding: 90px 0;
}
@media screen and (max-width: 992px) {
    #advantages-block { padding: 45px 0; }
}
@media screen and (max-width: 767px) {
    #advantages-block { padding: 30px 0; }
}
/*====================================================*/

/*=====================CTA=====================*/
#cta-block {
    padding: 90px 0;
    background-color: transparent;
    position: relative;
    margin-bottom: 0!important;
}
#cta-block::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-image: url(/sites/all/themes/vesta_theme/image/about-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    opacity: 0.08;
    z-index: -1;
}
#cta-block .region-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 61px;
}

#cta-block #block-vesta-theme-instrukciyadlyaocenkiveschey .field.field--name-body { font: 500 32px / 1.3 var(--second-family); text-align: center; max-width: 650px; }
#cta-block #block-vesta-theme-socialnyesetikontakty .field.field--name-body::after { display: none; }
#cta-block #block-vesta-theme-socialnyesetikontakty .field.field--name-body { display: flex; flex-direction: row; gap: 30px; }
#cta-block #block-vesta-theme-socialnyesetikontakty .field.field--name-body a > img { width: 65px; height: 65px; object-fit: cover; }

@media screen and (max-width: 992px) {
    #cta-block #block-vesta-theme-instrukciyadlyaocenkiveschey .field.field--name-body { font-size: 28px; }
    #cta-block { padding: 45px 0; }
}
@media screen and (max-width: 767px) {
    #cta-block #block-vesta-theme-instrukciyadlyaocenkiveschey .field.field--name-body { font-size: 26px; }
    #cta-block { padding: 30px 0; }
}
/*=============================================*/

/*=====================GALLERY=====================*/
#gallery-block { padding: 90px 0; margin-bottom: 0!important; }
#gallery-block .view.view-fotogalereya.view-id-fotogalereya { display: flex; flex-direction: column; align-items: center; gap: 40px; }

@media screen and (max-width: 992px) {
    #gallery-block { padding: 45px 0; }
}
@media screen and (max-width: 767px) {
    #gallery-block { padding: 30px 0; }
}
/*=================================================*/

/*=====================MAP=====================*/
#map-block { position: relative; margin-bottom: 0!important; }
#map-block > .container  {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}
#map-block .wr-contacts {
    max-width: 569px;
    padding: 35px 40px;
    padding-right: 30px;
    border-radius: 8px;
    background-color: var(--white);
    pointer-events: all;
    box-shadow: 0 4px 9px 0 rgba(72, 35, 11, 0.29);
}
#map-block .wr-contacts > .block-title { font: 600 24px / 1.3 var(--second-family); color: var(--primary-color); text-align: start; margin-bottom: 41px; max-width: 490px; }
#map-block .wr-contacts .contacts { flex-direction: column; align-items: flex-start;  gap: 21px; }
#map-block .wr-contacts .contacts .contact { max-width: 100%; font: 400 24px var(--second-family); gap: 20px; }
#map-block .wr-contacts .contacts .contact.phone { font: 600 26px var(--second-family); }
#map-block .wr-contacts .contacts .contact.address { align-items: flex-start; }

#map-block .wr-contacts .contacts > .social-contacts-title { font: 400 18px / 1.3 var(--second-family) }
#map-block .wr-contacts .contacts .social-contacts a > img { width: 50px; height: 50px; object-fit: cover; }


@media screen and (max-width: 767px) {
    #map-block .wr-contacts > .block-title { font-size: 22px; }
    #map-block .wr-contacts .contacts .contact,
    #map-block .wr-contacts .contacts .contact.phone { font-size: 18px; }
}
/*=============================================*/

/*=====================FOOTER=====================*/
footer#footer {
    background-color: var(--text-color);
    color: var(--white);
    font-family: var(--font-family);
    padding: 56px 0 30px 0;
}
footer#footer a, footer#footer a.nav-link{ color: var(--white); }
footer#footer a:hover{ color: var(--hover-color); }
footer#footer .block-title { font: 600 18px var(--second-family); color: var(--white); border-bottom: 1px solid var(--white); width: min-content; margin-bottom: 15px; }

footer#footer .wr-logo {  font: 400 14px / 1.14286 var(--font-family); color: #e9e9e9; }
footer#footer .wr-logo .logo { display: block; margin-bottom: 43px; }
footer#footer .wr-logo .logo > img { width: 176px; height: 77px; object-fit: cover; }
footer#footer .wr-logo .copyright { margin-bottom: 24px; }
footer#footer .wr-logo a.politika { display: block; max-width: 190px; color: #e9e9e9; }
footer#footer .wr-logo a.politika:hover { color: var(--hover-color); }

footer#footer .menu-products { display: flex; flex-direction: row; gap: 15px; }
footer#footer .menu-products .menu { display: flex; flex-direction: column; gap: 20px; flex: 0 0 auto; max-width: 150px; }
footer#footer .menu-products .menu .navigation #block-vesta-theme-osnovnayanavigaciya-menu { font: 600 18px var(--second-family); color: var(--white); border-bottom: 1px solid var(--white); width: min-content; margin-bottom: 15px; }
footer#footer .menu-products .menu .navigation ul.nav { display: flex; flex-direction: column; gap: 15px; font: 300 16px var(--font-family); }
footer#footer .menu-products .menu .navigation ul.nav .nav-item > a::after { display: none; }
footer#footer .menu-products .menu .region-footer-services .view-services .view-content { display: flex; flex-direction: column; gap: 15px; font: 300 16px / 1.25 var(--font-family); }
footer#footer .menu-products .products .view-products .view-content { display: flex; flex-direction: column; gap: 15px; font: 300 16px / 1.1 var(--font-family); }
footer#footer .menu-products .products .view-products .view-content .views-row { padding: 0; }

footer#footer .contacts-search { display: flex; flex-direction: row; justify-content: space-between; }
footer#footer .contacts-search .contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
footer#footer .contacts-search .contacts .block-title { margin: 0; }
footer#footer .contacts-search .contacts .contact { font: 300 16px var(--font-family); gap: 14px; }
footer#footer .contacts-search .contacts .contact.phone { font-weight: 400; }
footer#footer .contacts-search .contacts .social-contacts { margin-top: 10px; }
footer#footer .contacts-search .contacts .social-contacts a > img { width: 42px; height: 42px; }

footer#footer .contacts-search .wr-search { width: min-content; min-width: 200px; }


footer#footer .webvesta { margin-top: 100px; display: flex; flex-direction: row; justify-content: center; font: 300 16px var(--font-family); }

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 992px) {
    footer#footer .contacts-search .wr-search { display: none; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 576px) {
    footer#footer .wr-logo { text-align: center; }
    footer#footer .wr-logo a.politika { max-width: 100%; }

    footer#footer .contacts-search { justify-content: center; }
    footer#footer .contacts-search .contacts { align-items: center; }
}
/*================================================*/