@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');



:root {

    --color-title: #22292E;

    --color-dark-grey: #5E5E5E;

    --color-light-grey: #949494;

    --color-light-green: #339966;

    --color-dark-green: #24574D;

    --color-white: #FFFFFF;

    --color-bg: #F4F4F4;

    --color-second-light: #F1F5F3;

}



html, body {

    width: 100%;

    /* height: 100%; - do not include,

    the scrolling animation will not work*/

    font-family: 'Montserrat', sans-serif;

    color: var(--color-dark-grey);

    background-color: var(--color-bg);

    font-size: 15px;

    font-weight: 400;

    line-height: 1.5;

    scroll-behavior: smooth;

    overflow-x: hidden;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



body.lock {

    overflow: hidden;

}



.container {

    max-width: 1920px;

    width: 100%;

    padding: 0 16px;

    margin: 0 auto;

}

section:not(.main-banner):not(.map) {

    margin-bottom: 50px;

}

.section__container {

    position: relative;

    display: flex;

    flex-direction: column;

}



.header__logo {

    width: 142px;

}

.logo img {

    width: 100%;

}



.animate-on-scroll{

    opacity: 0;

    transform: translateY(200px);

    transition: opacity 1s ease-out,

    transform 1s ease-out;

    will-change: transform, opacity;

}

/* .animate-interval:not(.lightSlider) > * {

    opacity: 0;

    transform: translateY(50px);

    transition: opacity 0.3s ease-out,

        transform 0.2s ease-out;

    will-change: transform, opacity;

} */

.animate-on-scroll.visible{

    opacity: 1;

    transform: translateY(0);

}





/****FORM***/

.form {

    max-width: 1042px;

    width: 100%;

}

.form .inputs{

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-bottom: 30px;

}

.input {

    font-size: 15px;

    width: 100%;

    padding: 15px 30px;

    border-radius: 15px;

    border: 1px solid var(--color-light-grey);

    background-color: transparent;

    -webkit-appearance: none;

    -moz-appearance: none;

     appearance: none;

    box-shadow: none;

    -webkit-transition: 0.3s;

    -o-transition: 0.3s;

    transition: 0.3s;

}

.input::placeholder {

    color: var(--color-light-grey);

    font-size: 15px ;

}

.input:hover {

border: 1px solid var(--color-light-green);

}

.input:active,

.input:focus {

    color: var(--color-title);

    border: 1px solid var(--color-title);

}

.input.error {

    border: 1px solid #F04141;

}

.error-msg {

    display: none;

    font-size: 14px;

    padding-top: 10px;

    color: #F04141;

    -webkit-transition: 0.6s;

        -o-transition: 0.6s;

        transition: 0.6s;

}

.textarea {

    resize: none;

    height: 132px;

}

.checkbox-container {

    display: flex;

    align-items: center;

    position: relative;

    padding-left: 39px;

    cursor: pointer;

    margin-bottom: 30px;

}



.checkbox-container input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    width: 0;

    height: 0;

    font-size: 0;

   }



.checkmark {

    position: absolute;

    top: 50%;

    left: 0;

    transform: translate(0, -50%);

    height: 24px;

    width: 24px;

    border-radius: 5px;

    background: transparent;

    border: 1px solid var(--color-dark-grey);

    -webkit-transition: 0.3s;

    -o-transition: 0.3s;

    transition: 0.3s;

}



.checkbox-container input:checked+.checkmark::before {

    content: url(../assets/icons/checked.svg);

    position: absolute;

    top: 64%;

    transform: translate(-5%, -50%);

}



.checkbox-container input:checked+.checkmark {

    background-color: var(--color-light-green);

    border: 1px solid var(--color-light-green);

}

.checkbox-container input:not(:checked)+.checkmark::before {

    content: '';

}



.checkbox-label {

       display: inline-block;

}

.checkmark.error {

    border: 1px solid #F04141;

}

/*********************/

.details {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.details__block {

    height: 0;

    max-height: 0;

    visibility: hidden;

}



.details.opened .details__block {

    height: auto;

    max-height: 2000px;

    visibility: visible;

}

.details__summary {

    display: flex;

    gap: 10px;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

}



.details__arrow {

    width: 42px;

    height: 42px;

    background-color: transparent;

    border-radius: 50%;

    border: 1px solid var(--color-light-grey);

    flex-shrink: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    transition: all 0.6s;

}



.details.opened .details__arrow,

.details__arrow:hover {

    background-color: var(--color-light-green);

    border: 1px solid var(--color-light-green);

}



.details.opened .details__arrow:hover {

    background-color: var(--color-dark-green);

    border: 1px solid var(--color-dark-green);

}



.details .details__arrow svg {

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    transition: all 0.6s;

}

.details__arrow:hover svg path{

    stroke: #fff;

}



.details.opened .details__arrow svg {

    transform: rotate(180deg);

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    transition: all 0.6s;

}



.details.opened .details__arrow svg path {

    stroke: var(--color-white);

}

/*****BUTTONS*****/

.btn {

    font-size: 14px;

    font-weight: 600;

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 15px 30px;

    border-radius: 30px;

    white-space: nowrap;

    overflow: hidden;

    position: relative;

    flex-shrink: 0;

    -webkit-transition: 0.6s;

    -o-transition: 0.6s;

    transition: 0.6s;

}

.btn:after {

    width: 24px;

    height: 24px;

    flex-shrink: 0;

    z-index: 1;

    -webkit-transition: 0.6s;

    -o-transition: 0.6s;

    transition: 0.6s;

}

.btn::before {

    content: "";

    display: block;

    height: 0;

    opacity: 0;

    left: 50%;

    position: absolute;

    top: 50%;

    width: 0;

    z-index: -1;

    -webkit-transition: 0.6s;

    -o-transition: 0.6s;

    transition: 0.6s;

}

.btn:hover:before {

    opacity: 1;

    border-radius: 100px;

    height: 120%;

    left: -21px;

    top: -6px;

    width: 120%;

}

.header__btn {

    z-index: 2;

    background-color: transparent;

    border: 1px solid var(--color-dark-grey);

    color: var(--color-title) !important;

}



.header__btn:hover:before {

    background-color: var(--color-light-green);

}

.header__btn:after {

    content: url(../assets/icons/btn-arrow-dark.svg);

}

.header__btn:hover {

    background-color: var(--color-light-green);

    border: 1px solid var(--color-light-green);

    color: var(--color-white) !important;

}

.header__btn:hover:after {

    content: url(../assets/icons/btn-arrow-white.svg);

}



.section__btn {

    background-color: var(--color-light-green);

    border: 1px solid var(--color-light-green);

    color: var(--color-white) !important;

}



.section__btn:before,

.section__btn:hover:before {

    background-color: var(--color-dark-green);

}



.section__btn:after {

    content: "";

    display: inline-block;

    background: url(../assets/icons/btn-arrow-white.svg) no-repeat center center;

    background-size: contain;

}



.section__btn:hover {

    background-color: var(--color-dark-green);

    border: 1px solid var(--color-dark-green);

    color: var(--color-white) !important;

}

.form__btn:after {

    background: url(../assets/icons/btn-arrow-white-fill.svg) no-repeat center center;

    background-size: contain;

}



/*****BUTTONS END*****/

/*****COOKIES***********/

.cookie {

    width: 100%;

    max-height: 0;

    position: fixed;

    left: 0;

    bottom: 0;

    background-color: var(--color-white);

    border-radius: 50px 50px 0px 0px;

    z-index: 9999;

    -webkit-transition: 0.6s;

    -o-transition: 0.6s;

    transition: 0.6s;

}

.cookie.active {

    max-height: 500px;

    overflow: hidden;

    padding: 30px 0;

}

.cookie__text {

    margin-bottom: 30px;

}

.cookie__text a {

    font-weight: 700;

    -webkit-transition: 0.3s;

    -o-transition: 0.3s;

    transition: 0.3s;



}

.cookie__text a:hover {

    color: var(--color-light-green);

}

.cookie__btn {

    margin-right: unset !important;

}

/*******COOKIES END ****/

/*******VIDEO**********/

.video {

    position: relative;

    width: 100%;

    padding-bottom: 50%;

    height: 0;

    overflow: hidden;

    border-radius: 20px;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

.video__iframe {

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

    z-index: 999;

}



.video__thumbnail {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    cursor: pointer;

    object-fit: contain;

}

.video__btn {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 9;

    cursor: pointer;

}

.video__btn:hover svg path:first-child{

    fill: var(--color-dark-green);

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

     transition: all 0.3s;

}

/*******VIDEO end******/



.title {

    font-size: 24px;

    line-height: 1.3;

    color: var(--color-title);

    margin-bottom: 15px;

    font-weight: 700;

    opacity: 1;

    text-transform: uppercase;

}

.title.mb30 {

    margin-bottom: 30px;

}

.main__title {

    color: var(--color-title);

   text-align: center;

   font-size: 28px;

   font-weight: 700;

   line-height: 130%;

   text-transform: uppercase;

   margin-bottom: 20px;

}

.subtitle {

    margin-bottom: 30px;

}

.main__title span,

.title span {

    color: var(--color-light-green);

}



/***********************/

.header {

    position: fixed;

    min-height: 55px;

    width: 100%;

    top: 0;

    left: 0;

    margin: 0;

    padding: 10px 0;

    z-index: 9999;

}

.header__container {

    display: flex;

    gap: 1rem;

    justify-content: space-between;

    align-items: center;

    position: relative;

    z-index: 9999;

}

.header__scroll {

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(5px);

}



.header__right {

    order: 2;

    display: none;

}

.menu {

    order: 3;

}

.menu__nav {

    display: flex;

    align-items: center;

}

.menu__list {

    display: inline-flex;

    width: 100%;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;

  }



  .menu__list  * {

    width: 100%;

  }



.menu__item a{

    font-size: 14px;

    color: var(--color-title) !important;

    width: 100%;

    line-height: 1;

    display: flex;

    white-space: nowrap;

    display: flex;

    flex-direction: column;

    gap: 15px;

    -webkit-transition: 0.3s;

    -o-transition: 0.3s;

    transition: 0.3s;

}

.menu__item a::after {

    content: "";

    display: block;

    width: 100%;

    height: 1px;

    background-color: #E4E8EB;

}

.menu__item:hover a,

.menu__item:active a{

    color: var(--color-light-green) !important;

}



.menu__icon {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    cursor: pointer;

    position: relative;

    -webkit-transition: 0.3s;

    -o-transition: 0.3s;

    transition: 0.3s;

}



.menu__icon span,

.menu__icon::after,

.menu__icon::before {

    background-color: var(--color-title);

    position: absolute;

    left: 5px;

    height: 1px;

    width: 25px;

    -webkit-transition: 0.3s;

    -o-transition: 0.3s;

    transition: 0.3s;

    }



.menu__icon::after,

.menu__icon::before {

    content: "";

}



.menu__icon::before {

    top: 11.5px;

}



.menu__icon::after {

    bottom: 11.5px;

}

.menu__icon span {

    top: 50%;

    -webkit-transform: scale(1) translate(0, -50%);

    -ms-transform: scale(1) translate(0, -50%);

    transform: scale(1) translate(0, -50%);

}



.menu__icon.active span {

    background: #343434;

    -webkit-transform: scale(0) translate(0, -50%);

    -ms-transform: scale(0) translate(0, -50%);

    transform: scale(0) translate(0, -50%);

}



.menu__icon.active::before {

    top: 50%;

    left: 12px;

    width: 19px;

    background: #343434;

    -webkit-transform: rotate(-45deg) translate(0, -76%);

    -ms-transform: rotate(-45deg) translate(0, -76%);

    transform: rotate(-45deg) translate(0, -76%);

}



.menu__icon.active::after {

    bottom: 50%;

    left: 12px;

    width: 19px;

    background: #343434;

    -webkit-transform: rotate(45deg) translate(0, 50%);

    -ms-transform: rotate(45deg) translate(0, 50%);

    transform: rotate(45deg) translate(0, 50%);

}



.menu_wrapper {

    opacity: 0;

    width: 0;

    height: 0;

    position: fixed;

    top: -100%;

    right: 0;

    padding: 30px 20px 20px 20px;

    border-radius: 0px 40px 0px 0px;

    background: var(--color-white);

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    transition: all 0.6s;

    z-index: 99999;

    overflow: auto;

}



.menu_wrapper.active {

    opacity: 1;

    top: 70px;

    width: 100%;

    height: auto;

}

/***LANG ***/

.lang__list {

    display: none;

}

.lang__list-mob {

    display: flex;

    margin: 15px 0 30px 0;

}

.lang__item,

.lang__active {

    font-size: 15px;

    font-weight: 600;

    width: 43px;

    height: 26px;

    box-sizing: content-box;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    cursor: pointer;

}

.lang__list-mob .lang__item,

.lang__list-mob .lang__active {

    padding: 0 10px;

}

.lang__list-mob .lang__item:first-child {

    padding-left: 0;

}

.lang__list-mob .lang__item:last-child {

    padding-right: 0;

}



.lang__list-mob .lang__item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    display: block;

    width: 1px;

    height: 100%;

    background-color: #E4E8EB;

}

.lang__item.active,

.lang__item:hover {

    color: var(--color-light-green);

}

.lang__summary {

    display: none;

}

/***LANG END***/

/*** CIRCLE ANIMATION****/

.circle {

    width: 80vh;

    height: 81vh;

    border-radius: 50%;

    margin: 0 auto;

}



.main-banner__circle {

    position: absolute;

    top: 18vh;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;

    grid-area: circle;

}



.circle>div {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

}



.circle1 {

    width: 100%;

    height: 100%;

    z-index: 1;

    pointer-events: none;

}



.circle2 {

    width: 85%;

    height: 85%;

    z-index: 3;

    pointer-events: none;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}



.circle3 {

    width: 68%;

    height: 68%;

    z-index: 4;

    pointer-events: none;

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    transition: all 0.6s;

}



.circle4 {

    width: 55%;

    height: 55%;

    z-index: 5;

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    transition: all 0.6s;

}

.circle5 {

    width: 85%;

    height: 85%;

    transform: translate(-50%, -50%) scale(0);

    z-index: 2;

    pointer-events: none;

    -webkit-transition: all 0.6s;

     -o-transition: all 0.6s;

    transition: all 0.6s;

}

.main-banner__img {

    width: 100%;

    height: 100%;

 }



.main-banner__img img {

    display: block;

    position: absolute;

    width: auto;

    height: 44vh;

    left: 50%;

    transform: translateX(-50%);

 }



.main-banner__circle>.circle1 {

    background: rgba(255, 255, 255, 0.2);

    box-shadow: 0px 4px 84px 0px rgba(168, 223, 112, 0.04);

}



.main-banner__circle>.circle2 {

    background: rgba(255, 255, 255, 0.3);

    box-shadow: 0px 4px 84px 0px rgba(168, 223, 112, 0.06);

}



.main-banner__circle>.circle3 {

    background: rgba(255, 255, 255, 0.4);

    box-shadow: 0px 4px 84px 0px rgba(168, 223, 112, 0.08);

}



.main-banner__circle>.circle4 {

    background-color: rgba(255, 255, 255, 1);

}

.main-banner__circle>.circle5 {

    background: rgba(255, 255, 255, 0.3);

    transform: translate(-50%, -50%) scale(0);

}



.about-company__circle>.circle1 {

    background-color: rgba(51, 153, 102, 0.1);

    box-shadow: 0px 4px 84px 0px rgba(168, 223, 112, 0.04);

}



.about-company__circle>.circle2 {

    width: 85%;

    height: 85%;

    background-color: rgba(51, 153, 102, 0.2);

    box-shadow: 0px 4px 84px 0px rgba(168, 223, 112, 0.06);

}



.about-company__circle>.circle3 {

    width: 85%;

    height: 85%;

    background-color: rgba(51, 153, 102, 0.4);

    box-shadow: 0px 4px 84px 0px rgba(168, 223, 112, 0.08);

    display: none;

}



.about-company__circle>.circle4 {

    background-color: rgba(51, 153, 102, 1);

    width: 70%;

    height: 70%;

}

.about-company__circle>.circle5 {

    background-color: rgba(51, 153, 102, 0.4);

    transform: translate(-50%, -50%) scale(0);

}



.circle__text {

    display: none;

    height: 100%;

    width: 100%;

    justify-content: center;

    align-items: center;

    padding: 20px;

    text-align: center;

    font-size: 17px;

    font-weight: 600;

    color: var(--color-white);

}

.circle__text a {

    text-decoration: underline;

}

.circle__text.active {

    display: inline-flex;

    flex-direction: column;

}

.about-company__circle {

    position: relative !important;

    top: 0;

    left: 50%;

    transform: translate(-50%, 0);

    width: 120%;

    max-width: 570px;

    margin: 0;

    aspect-ratio: 1/1;

    height: 100%;

}



.main-banner__circle.animated-circle .circle1 {

    animation: animate-circle 1.5s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}

.main-banner__circle.animated-circle .circle2 {

    animation: main-animate-circle2 1s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}



.main-banner__circle.animated-circle .circle3 {

    animation: animate-circle 0.9s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}



.about-company__circle.animated-circle .circle3 {

    animation: animate-circle  1.2s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}



.about-company__circle.animated-circle .circle2 {

    animation: about-animate-circle2 1.3s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}

.about-company__circle.animated-circle .circle3 {

    animation: animate-circle 1.2s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}

.about-company__circle.animated-circle>.circle4 {

    animation: animate-circle 1s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}

.about-company__circle.animated-circle>.circle5 {

    animation: about-animate-circle5 1.8s cubic-bezier(0.25, 0.46, 0.17, 1.15);

}



@keyframes main-animate-circle2 {

    0% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

    30% {

        transform: translate(-50%, -50%) scale(0.9);

        transform-origin: center;

    }

    100% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

}

@keyframes about-animate-circle2 {

    0% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

    30% {

        transform: translate(-50%, -50%) scale(0.3);

        transform-origin: center;

    }

    80% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

    100% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

}

@keyframes about-animate-circle5 {

    0% {

         transform: translate(-50%, -50%) scale(0);

    }

    40% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

    100% {

        transform: translate(-50%, -50%) scale(0);

        transform-origin: center;

    }

}

@keyframes animate-circle {

    0% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

    30% {

        transform: translate(-50%, -50%) scale(0.8);

    }

    100% {

        transform: translate(-50%, -50%) scale(1);

        transform-origin: center;

    }

}

/*** CIRCLE ANIMATION END****/

/**FOOTER****/

.footer{

    border-radius: 30px 30px 0px 0px;

    background: var(--color-white, #FFF);

    padding: 35px 0 0 0;

}

.footer__nav {

    display: flex;

    flex-direction: column;

    gap: 30px;

}

.footer__logo {

    display: block;

    max-width: 142px;

}

.footer__social {

    display: flex;

    gap: 15px;

}

.footer__social a svg rect{

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}

.footer__social a svg {

    width: 31px;

    height: 31px;

}

.footer__social a:hover svg rect {

    fill: var(--color-dark-green);

}

.footer__flex {

    display: flex;

    /* flex-wrap: wrap; */

    gap: 10px;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

}

.footer__link {

    font-family: 'Montserrat',sans-serif;

    font-size: 14px;

    color: var(--color-title);

    font-weight: 600;

      -webkit-transition: all 0.3s;

        -o-transition: all 0.3s;

        transition: all 0.3s;

}

.footer__link:hover {

    color: var(--color-light-green);

}

.footer__label {

    font-size: 12px;

    opacity: 0.6;

}

.footer__contact:last-child{

    flex-basis:34%;

}

.footer__h5 {

    margin-bottom: 10px;

    font-size: 12px;

}

.footer__menu {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.footer__item {

    color: var(--color-title) !important;

    font-size: 14px;

    display: block;

}

.footer__item:hover {

    color: var(--color-light-green) !important;

        -webkit-transition: all 0.3s;

            -o-transition: all 0.3s;

            transition: all 0.3s;

}

.footer__row {

    padding: 30px 0;

    border-top: 1px solid #E4E8EB;

    order: 5;

}

.footer__main {

    order: 1;

}

.footer__brands {

    order: 3;

}

.footer__brands .footer__flex {

    flex-wrap: wrap;

}

.footer__contacts {

    order: 2;

    flex-wrap: wrap;

}

.footer__contact,

.footer__contact:last-child {

    flex-basis: calc(50% - 5px);

}

.footer__grid {

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}

.footer__bottom {

    display: flex;

    flex-direction: column;

    gap: 10px;

    align-items: center;

    padding: 15px 0;

    border-top: 1px solid #E4E8EB;

}

.footer__copyright,

.footer__terms {

    font-size: 12px;

}

.footer__develop {

    font-size: 14px;

}



/*****page*****/

.page .main {

    margin-top: 70px;

}

.breadcrumbs__item-main {

    -webkit-transition: 0.6s;

    -o-transition: 0.6s;

    transition: 0.6s;

}

.breadcrumbs__item-main:hover {

    color: var(--color-light-green);

}

.breadcrumbs__container {

    display: flex;

    gap: 10px;

    margin-bottom: 25px;

}

.breadcrumbs__container * {

    color: var(--color-light-grey);

    font-size: 12px;

}



.breadcrumbs__item-active {

    color: var(--color-title);

}

.section__wrapper {

    background: linear-gradient(180deg, #FFF 0%, #FFF 53.64%, rgba(255, 255, 255, 0.00) 99.98%);

    padding-top: 35px;

}

.section__wrapper-left {

    border-radius: 40px 0px 0px 0px;

}

.section__wrapper-right {

    border-radius: 0px 40px 0px 0px;

}

    .error-page .circle {

        top: 20vh;

        width: 50vh;

        height: 51vh;

    }

   .error-page .main-banner__img img {

        height: 38vh;

    }

    .error-page .main-banner {

        padding-top: unset;

        height: 85vh

    }



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

    .btn {

        width: fit-content;

        justify-content: center;

        padding: 12px 25px;

        margin-left: auto;

        }

    .section__btn {

        margin-right: auto;

    }

    .career__btn {

        margin-left: 0 !important;

    }

    .btn:after {

        width: 30px;

        height: 30px;

    }



}



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

    .container {

        padding: 0 40px;

    }

    .header {

        padding: 20px 0;

    }

    section:not(.main-banner):not(.map) {

        margin-bottom: 80px;

    }

    .section__container {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        gap: 30px;

    }

    .section__container.gap {

        gap: 15px;

    }

    .title {

        font-size: 24px;

        width: 60%;

       }

    .section__container .title {

        margin-bottom: 0;

    }

    .subtitle {

        width: 60%;

    }

    .main-banner__img img {

        top: -21%;

        height: 45vh;

        left: 52%;

    }

    .main-banner__circle {

        width: 58vh;

        height: 58vh;

    }

    .section__container .title {

        flex-basis: 60%;

    }

    .section__container .section__btn {

        height: auto;

    }

    .header__logo {

        width: 172px;

        order: 1;

    }

    .btn {

        padding: 15px 30px;

    }

    .header__btn {

        padding: 12px 25px !important;

    }



    .section__btn {

        gap: 30px;

        height: auto;

    }

    .lang-mob, .btn-mob {

        display: none;

    }

    .lang__list {

        display: flex;

        flex-direction: column;

        height: 0;

        opacity: 0;

    }

    .lang__list .lang__item {

        display: none;

    }

    .lang__list.open .lang__item {

        display: flex;

    }

    .lang__item,

    .lang__active {

        justify-content: start;

    }

    .lang__item {

        width: 100%;

    }

    .lang__active {

        width: auto;

    }

    .lang__summary {

        height: 0;

        opacity: 0;

        -webkit-transition: all 0.3s;

        -o-transition: all 0.3s;

        transition: all 0.3s;

    }

    .lang__summary.show {

        width: 88px;

        opacity: 1;

        display: flex;

        gap: 5px;

        align-items: center;

        justify-content: right;

        height: 26px;

        margin-left: 10px;

        cursor: pointer;

        -webkit-transition: all 0.3s;

            -o-transition: all 0.3s;

            transition: all 0.3s;

    }



    .lang__arrow {

        display: flex;

        align-items: center;

    }



    .lang__list.open {

        gap: 10px;

        height: 72px;

        opacity: 1;

        padding: 5px 10px;

        border-radius: 5px;

        background: rgba(255, 255, 255, 0.85);

        /* position: relative; */

        width: 88px;

        margin-left: unset;

        z-index: 999999;

        -webkit-transition: all 0.2s;

            -o-transition: all 0.2s;

            transition: all 0.2s;

    }

    .lang__list.open:after {

        content: url(../assets/icons/arrow-up.svg);

        position: absolute;

        right: 10px;

        top: 4px;

    }

    .header__right {

        display: flex;

        align-items: center;

        gap: 40px;

        margin-left: auto;

    }

    .header__lang {

        position: relative;

        width: 88px;

        height: 26px;

    }

    .lang {

        position: absolute;

        top: 0;

        right: 0;

    }



    .menu_wrapper.active {

        top: 100px;

        width: auto;

        min-width: 480px;

        padding: 50px 30px 30px 50px;

        border-radius: 40px 0px 00px 40px;

    }

    .menu__list li:last-child a::after {

        content: unset;

    }

    .checkbox__wrapper {

        display: flex;

        align-items: center;

        justify-content: space-between;

        grid-gap: 15px;

    }

    .form .inputs {

        margin-bottom: 30px;

    }

    .footer__logo {

        max-width: 160px;

    }

    .footer__social a svg {

        width: 38px;

        height: 38px;

    }

    .footer__contacts {

        display: flex;

    }

    .footer__contacts .footer__block {

        flex-basis: 50%;

        justify-content: flex-start;

        gap:0;

    }

    .footer__contact,

    .footer__contact:last-child {

            flex-basis: auto;

        }

    .footer__row {

        justify-content: start;

        gap: 30%;

    }

    .footer__row .footer__flex {

    flex-basis: 50%;

    }

    .footer__bottom {

        flex-direction: row;

        justify-content: space-between;

    }

    .footer__develop {

    margin-left: 8%;}



     .checkbox-container {

         margin-bottom: 0;

     }

     .video {

        padding-bottom: 53.6%;

     }



 /* полоса прокрутки (скроллбар) */

 ::-webkit-scrollbar {

     width: 3px;

 }



::-webkit-scrollbar-button {

     display: none;

 }

::-webkit-scrollbar-track {

     background-color: #E4E8EB;

 }

::-webkit-scrollbar-track-piece {

     background-color: #E4E8EB;

 }

 ::-webkit-scrollbar-thumb {

     height: 20px;

     background-color: var(--color-light-green);

     border-radius: 1px;

 }

 ::-webkit-scrollbar-corner {

     background-color: #E4E8EB;

 }

::-webkit-resizer {

     background-color: var(--color-light-green);

 }



 /*****COOKIES***********/

 .cookie__container {

     display: flex;

     justify-content: space-between;

     align-items: center;

     gap: 50px;

 }

 .cookie__text {

    margin-bottom: 0;

 }

 .cookie__btn {

     max-width: 215px;

     max-height: 60px;

 }

 /*******COOKIES END ****/



 /******/

    .page .main {

        margin-top: 110px;

    }

    .page .title {

        width: 100%;

    }

    .breadcrumbs__container {

        margin-bottom: 30px;

    }



     .error-page .circle {

         top: 30vh;

         width: 58vh;

         height: 58vh;

     }

}



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

    html,body {

        font-size: 15px;

    }

    .main__title {

        font-size: 30px;

    }

    .title {

        font-size: 26px;

        width: 100%;

    }

    .subtitle {

        width: 100%;

    }



    .about-company__circle {

        max-width: unset;

        margin: unset;

    }

    .about-company__circle>.circle2 {

           width: 90%;

           height: 90%;

    }

    .about-company__circle>.circle3 {

        width: 74%;

        height: 74%;

        display: block;

    }

    .about-company__circle>.circle4 {

        width: 64%;

        height: 64%;

    }

    .rd-laboratory__title {

        width: 75%;

    }

    .rd-laboratory__slider {

        gap: 20px !important;

    }

    .input {

        width: 100%;

        padding: 20px 30px;

    }

   .form .inputs {

        display: grid;

        grid-gap: 15px;

        grid-template-columns: calc(50% - 7.5px)calc(50% - 7.5px)!important;

           }

    .input.textarea {

        grid-column: span 2;

    }

    .career__collage {

        flex: 0 0 42%;

    }

     .footer__h5 {

        font-size: 12px;

    }

    .checkbox-container {

       margin-bottom: 0;

    }

}



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

    .checkbox-container:hover .checkmark:not(.error) {

            background-color: transparent;

            border: 1px solid var(--color-light-green);

        }

        .checkbox-container:hover input:checked+.checkmark {

            background-color: var(--color-light-green);

            border: 1px solid var(--color-light-green);

        }



    .btn {

        padding: 12px 25px;

        gap: 15px;

    }

    .menu_wrapper {

        overflow: unset;

    }

    html,body {

        font-size: 16px;

    }

    .container {

        padding: 0 60px;

    }

    .main__title {

        font-size: 35px;

    }

    .title {

        font-size: 28px;

    }

    .header__logo{

        width: 140px;

    }

    .input,

    .input::placeholder {

        font-size: 16px;

    }

    .menu__item a{

        font-size: 15px;

    }

    .header__right {

        gap: 24px;

    }

    .video {

        padding-bottom: 46%;

    }



    .footer__link {

        font-size: 15px;

    }

    .footer__h5 {

        margin-bottom: 12px;

        font-size: 13px;

    }

    .footer__nav {

        flex-direction: row;

        justify-content: space-between;

    }

    .footer__flex {

        flex-direction: column !important;

        align-items: start;

        flex-wrap: nowrap;

    }

    .footer__row {

        flex-direction: row !important;

        border-top: unset;

        padding-top: unset;

        gap: 20%;

        flex-basis: 20%;

        order: 3;

    }

    .footer__contacts {

        order: 4;

        display: grid;

        grid-template-columns: auto auto;

        grid-template-rows: auto auto;

         align-content: flex-start;

         grid-column-gap: 10%;

        grid-row-gap: 20px;

         flex-basis: 24%;

    }

    .footer__contact {

        flex-basis: calc(50% - 5px);

        white-space: nowrap;

        }

    .footer__brands {

        flex-basis: 10%;

    }

    .footer__item {

        white-space: nowrap;

    }

    .footer__main {

        flex-basis: 15%;

    }

    .footer__nav > div:nth-child(2) {

        margin-left: 7%;

    }

    .footer__nav > div:nth-child(3) {

        margin-right: 7%;

    }

    .footer__nav {

        padding: 60px 0;

    }

    .footer__bottom {

        font-size: 13px;

    }

    .footer__copyright,

    .footer__terms,

    .footer__label {

        font-size: 13px;

    }



    .footer__develop {

        font-size: 15px;

    }

    .footer__brands .footer__flex {

        gap: 15px;

    }

    .error-page .main-banner {

        height: calc(100vh - 160px);

    }

    .error-page .main-banner__img img {

        height: 52vh;

    }

    .error-page .main {

        padding-bottom: unset;

    }

    .error-page .main-banner__container {

        padding-bottom: 12vh;

    }

    .error-page .circle {

        top: 50%;

    }

     /*****COOKIES***********/

    .cookie__btn {

        max-width: 197px;

        max-height: 54px;

    }

    /*******COOKIES END ****/

}



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

    .section__container.gap {

        gap: 30px;

    }

    .main__title {

        font-size: 40px;

    }

    .title {

        font-size: 30px;

    }

    section:not(.main-banner):not(.map) {

        margin-bottom: 110px;

    }

    .title.mb30 {

        margin-bottom: 50px;

    }

    .section__container .title {

        margin-bottom: 0;

    }

    .section__container {

        gap: 50px !important;

    }

    .btn {

        font-size: 15px;

    }

    .menu {

        order: 2;

    }

    .menu__icon {

            display: none;

        }



    .menu_wrapper {

        opacity: 1;

        width: auto;

        height: auto;

        position: static;

        background: none;

        padding: 0;

        }

    .menu__item a::after {

        content: unset;

    }

    .menu__list {

        width: auto;

        flex-direction: row;

        gap: 30px;

        align-items: center;

    }

    .header__right {

        order: 3;

        margin-left: unset;

    }

    .circle {

        width: 638px;

        height: 614px;

    }

    .footer__item {

        font-size: 14px;

    }

    .breadcrumbs__container * {

        font-size: 13px;

    }

    .breadcrumbs__container {

        margin-bottom: 50px;

    }

    .section__wrapper {

        padding-top: 50px;

    }

    .section__wrapper-left {

        border-radius: 150px 0px 0px 0px;

    }

    .section__wrapper-right {

        border-radius: 0px 150px 0px 0px;}

   .error-page .main-banner__container {

            padding-bottom: 15vh;

        }

    .video__btn svg {

        width: 123px;

        height: 86px;

    }

     /*****COOKIES***********/

    .cookie__container {

        gap: 100px;

    }

 /*******COOKIES END ****/

}



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

    html, body {

        font-size: 18px;

    }

    .main__title {

        font-size: 45px;

    }

    .title {

        font-size: 40px;

    }

    .btn {

        font-size: 16px;

        padding: 15px 30px;

        gap: 30px;

    }

    .circle {

        width: 738px;

        height: 714px;

    }

    .career__block {

        gap: 95px

}

}

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

    html, body {

        font-size: 20px;

    }

    .title {

        font-size: 45px;

    }

    .lang__item,

    .lang__active {

        font-size: 17px;

    }

    section:not(.main-banner):not(.map) {

        margin-bottom: 120px;

    }

    .section__container {

        gap: 60px !important;

    }

    .title.mb30 {

        margin-bottom: 60px;

    }

    .input,

    .input::placeholder {

        font-size: 20px;

    }

    .error-msg {

       padding-top: 15px;

    }

    .menu__list {

        gap: 60px;

    }

    .btn,

    .vacancy__btn,

    .header__btn {

        font-size: 17px;

        gap: 30px;

        padding: 15px 30px !important;

    }

    .header__logo {

        width: 202px;

    }

    .menu__item a{

        font-size: 16px;

    }

    .header__right {

        gap: 40px;

    }

    .footer__logo {

        max-width: 202px;

    }

     .footer__bottom {

        font-size: 14px;

    }

    .footer__link {

        font-size: 16px;

    }

    .footer__label,

    .footer__h5 {

        font-size: 14px;

    }

    .footer__item {

        font-size: 16px;

    }

    .footer__copyright,

    .footer__terms,

    .footer__label {

        font-size: 14px;

    }

    .breadcrumbs__container * {

        font-size: 14px;

    }

    .breadcrumbs__container {

        margin-bottom: 60px;

    }

    .section__wrapper {

        padding-top: 60px;

    }

    .page .main {

        margin-top: 147px;

    }

    .page .header {

        background: rgba(247, 247, 247, 0.85);

        backdrop-filter: blur(5px);

    }

     /*****COOKIES***********/

    .cookie__container {

        gap: 220px;

    }

    .cookie__btn {

        max-width: 235px;

        max-height: 60px;

    }

 /*******COOKIES END ****/

}



#vacancies {
    scroll-margin-top: 192px;
}

.section__wrapper-left.animate-on-scroll {
    transform: translateY(0);
}

@media (max-width: 768px) {
    #vacancies {
        scroll-margin-top: 110px;
    }
}

/* .contacts form .checkbox__wrapper, */
/* .career form .checkbox__wrapper{
    display: grid;
    grid-template-areas:
        "checkbox btn"
        "captcha btn";
    grid-template-columns: 1fr 1fr;
} */

/* .contacts form  .career__checkbox, */
/* .career form .career__checkbox {
    grid-area: checkbox;
} */

[data-name="recaptcha"] {
    position: static !important;
    grid-area: captcha;
    max-width: fit-content;
}

/* .contacts form .career__btn, */
/* .career form .career__btn {
    grid-area: btn;
} */

[data-name="recaptcha"] .g-recaptcha.wpcf7-not-valid {
    border: 1px solid red;
    display: block;
    height: 78px;
    width: 303px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    [data-name="recaptcha"] {
        margin-bottom: 20px;
        display: block;
    }
    /* .contacts form .checkbox__wrapper, */
    /* .career form .checkbox__wrapper {
        grid-template-areas:
            "checkbox"
            "captcha"
            "btn";
        grid-template-columns: 1fr;
    } */
}

/* @media (max-width: 768px) {
    .contacts form .career__btn,
    .pop-up form .pop-up__btn,
    .career form .career__btn {
        margin-top: 20px;
    }
} */