@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}
:root{
    --white: #fff;
    --orange: #FCC341;
    --black: #000;
    --grey:#7E7E7E;
    --grey-light:#E4E5E8;
    --footer-bg: #494848;
}
*{
    font-family: "Roboto Flex", sans-serif;
}
.body-hidden{
    /*overflow: hidden;*/
}
.container{
    width: 100%;
    max-width: 1600px;
    padding: 0 80px;
    margin: 0 auto;
}
/*hover*/
.effect_line{
    display: block;
    position: relative;
    padding-bottom: 5px;
    overflow: hidden;
}
.effect_line:before{
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--grey-light);
    transform:  translateX(-101%);
    content: '';
    position: absolute;
    transition: transform .5s ease;
}
.effect_line:hover:before {
    transform:  translateX(0);
}
/*hover end*/
/*header*/

.header{
    width: 100%;
    background: rgba(255, 255, 255, 0.60);
    position: fixed;
    z-index: 30;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all .4s ease-in-out;
}
.header-opacity{
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
}

.container--header{
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
.nav-bar{
    width: 65%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.nav-bar__wrapper{
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.nav-bar__contact{
    display: flex;
    gap: 80px;
}
.nav-bar__social,
.nav-bar__tel,
.nav-bar__menu{
    display: flex;
    gap: 25px;
}
.nav-bar__submenu{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    padding: 20px 25px;
    top: 26px;
    left: 0;
    z-index: 25;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 3px;
    border: 1px solid var(--grey-light);
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.4s ease-in-out;
}
.nav-bar__submenu:before{
    content: "";
    position: absolute;
    width: 80px;
    height: 10px;
    top: -10px;
    left: 0;
}
.nav-bar__item{
    position: relative;
    transition: all 0.4s ease-in-out;
}


.language{
    display: flex;
    gap: 23px;
}
.nav-bar__tel__link{
    font-weight: 600;
    font-size: 16px;
    color: var(--grey);
}
.nav-bar__social__link svg{
    transition: all .4s ease-in-out;
}
.nav-bar__social__link:hover svg{
    scale: 1.5;
}
.logo-hover{
    transition: all .4s ease-in-out;
}
.logo:hover svg>.logo-hover{
    scale: 1.05;
    transform: scale(1.05) rotate(6deg) translate(-3px, -3px)
}
.nav-bar__menu__link{
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
    position: relative;
    cursor: pointer;
}
.nav-bar__submenu__link{
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    color: var(--black);
    white-space: nowrap;
}
.effect_line--orange:before{
    background: var(--orange);
}
.language__link{
    font-weight: 700;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--grey);
    transition: all .4s ease-in-out;
}
.language__link:hover{
    color: var(--orange);
}
.language__link--active{
    color: var(--orange);
}
/*.btn-burger {*/
/*    appearance: none;*/
/*    outline: none;*/
/*    background: transparent;*/
/*    position: relative;*/
/*    width: 31px;*/
/*    height: 21px;*/
/*    border-bottom: 5px solid var(--orange);*/
/*    display: none;*/
/*    border-radius: 3px;*/
/*}*/
/*.btn-burger::after {*/
/*    content: '';*/
/*    width: 100%;*/
/*    height: 5px;*/
/*    background: var(--orange);*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: calc(50% + 3px);*/
/*    transform: translateY(-50%);*/
/*    border-radius: 3px;*/
/*}*/
/*.btn-burger::before {*/
/*    content: '';*/
/*    width: 100%;*/
/*    height: 5px;*/
/*    background: var(--orange);*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    border-radius: 3px;*/
/*}*/
/*.menu_button {*/
/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/
/*    appearance: none;*/
/*    background: none;*/
/*    border: none;*/
/*    outline: none;*/
/*}*/
.menu_button,
.menu_button span {
    display: none;
    /*box-sizing: border-box;*/
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
.menu_button {
    position: relative;
    top: 13px;
    left: 0;
    width: 2.5rem;
    height: 1.8rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.menu_button_line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.3rem;
    background: var(--orange);
    border-radius: 3px;
}
.menu_button .menu_button_line.top {
    top: 0;
}
.menu_button .menu_button_line.mid {
    top: 0.75rem; /* (heght(.menu_button)  - height(.menu_button span)) / 2 */
}
.menu_button .menu_button_line.bot {
    bottom: 0;
}
.menu_button.on_menu .menu_button_line {
    background: var(--black);
}
.menu_button.on_menu .menu_button_line.top {
    -webkit-transform: translateY(1rem) rotate(-40deg);
    -moz-transform: translateY(1rem) rotate(-40deg);
    -ms-transform: translateY(1rem) rotate(-40deg);
    -o-transform: translateY(1rem) rotate(-40deg);
    transform: translateY(1rem) rotate(-40deg);
    top: -4px;
}
.menu_button.on_menu .menu_button_line.mid {
    opacity: 0;
}
.menu_button.on_menu .menu_button_line.bot {
    -webkit-transform: translateY(-1rem) rotate(40deg);
    -moz-transform: translateY(-1rem) rotate(40deg);
    -ms-transform: translateY(-1rem) rotate(40deg);
    -o-transform: translateY(-1rem) rotate(40deg);
    transform: translateY(-1rem) rotate(40deg);
    bottom: -4px;
}

/*main*/
/*.main{*/
/*    padding-top: 80px;*/
/*}*/
/*main-slider*/
.banner{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.banner__wrapper{
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 15px;
    padding-bottom: 60px;
    position: relative;
}
.banner__title{
    color: var(--black);
    font-size: 38px;
    font-weight: 500;
    max-width: 585px;
}

/*тут*/
/*.shop__category__title {*/
/*    position: relative;*/
/*}*/

/*.shop__category__title::before {*/
/*    content: '';*/
/*    display: block;*/
/*    height: 80px; !* Розмір відступу *!*/
/*    margin-top: 80px; !* Зміщення вгору *!*/
/*    visibility: hidden; !* Робить блок невидимим *!*/
/*    !*background-color: blue;*!*/
/*}*/
/*i tyt*/

.banner__wrapper:after,
.about__wrapper:after,
.projects__wrapper:after,
.career__wrapper:after,
.projects-page__project:after,
.shop__wrapper:after,
.projects-page__project:after{
    content: "";
    width: 50%;
    height: 3px;
    position: absolute;
    background-color: var(--orange);
    bottom: 3px;
    right: 0;
}
/*main-slider end*/
/*about*/
.about__wrapper{
    margin-top: 60px;
    padding-bottom: 50px;
    margin-bottom: 70px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.about__wrapper:after,
.career__wrapper:after{
    left: 0;
}
.section__title1{
    padding: 15px 100px;
    background-color: var(--orange);
    color: var(--white);
    font-weight: 500;
    font-size: 42px;
    margin-bottom: 85px;
    border-radius: 3px;
}
.about__img{
    border-radius: 3px;
    max-width: 370px;
}
.about__content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 90px;
}
.text__title{
    font-size: 30px;
    font-weight: 500;
    color: var(--black);
    margin-bottom: 70px;
    border-radius: 3px;
}
.text__list{
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-left: 30px;
}
.text__list--about{
    padding-right: 200px;
}
.text__item{
    position: relative;
    color: var(--black);
    font-size: 20px;
    font-weight: 500;
}
.text__item:before{
    content: url(../img/arr.svg);
    position: absolute;
    top: 0;
    left: -30px;
}


/*about end*/
/*services*/
.services__wrapper {
    padding-bottom: 60px;
    margin-bottom: 85px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.services__img--mobile,
.career__img--mobile,
.textarea--mobile,
.text__title--projects-page--mobile,
.banner-page--mobile,
.menu_arrow--mobile
/*.nav-bar__item--shop_mobile*/
{
    display: none;
}
.contact_page__content:after,
.services__wrapper:after,
.projects-page__wrapper:after,
.project-page__wrapper:after,
.partners__wrapper:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: var(--orange);
    border-radius: 5px;

}
.services__content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
}
.services__img{
    border-radius: 3px;
}
.text__list__grey{
    padding-left: 17px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;

}
.text__list__grey__item{
    list-style: disc;
    font-size: 16px;
    color: var(--grey);
}
.services__plan-wrapper{
    display: flex;
    flex-direction: column;
}
.services__plan__img{
    margin-top: 30px;
    position: relative;
    padding: 10px 20px;
    margin-bottom: 20px;

}
.glass{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(126, 126, 126, 0.3);
    padding: 100px;
    opacity: 0;
    transition: all .4s ease-in-out;
    border-radius: 3px;
    cursor: help;
}
.services__plan__img:hover .glass{
    opacity: 0.85;
}
.link-btn{
    width: fit-content;
    margin-left: 50px;
    padding: 6px 12px;
    background-color: var(--grey-light);
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    border-radius: 3px;
    position: relative;
    transition: all .4s ease-in-out;
}
.svg_download{
    margin: auto 0 auto 15px;
}
.svg_download path{
    fill: var(--black);
    transition: all 0.4s ease-in-out;
}
.link-btn:hover,
.link-btn:hover .svg_download path{
    background-color: var(--orange);
    color: var(--white);
    fill: var(--white);
}

/*services end*/
/*project*/
.section__title2{
    font-size: 68px;
    font-weight: 800;
    color: white;
    letter-spacing: 5px;
    text-shadow:
            -2px -2px 0 var(--orange),
            2px -2px 0 var(--orange),
            -2px  2px 0 var(--orange),
            2px  2px 0 var(--orange);
    margin-bottom: 70px;
}
.projects__wrapper {
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 60px;
}
.swiper--projects__img{
    border-radius: 2px 2px 0 0;
}
.swiper--projects__title{
    padding: 15px 20px;
    background-color: var(--grey-light);
    color: var(--black);
    font-weight: 500;
    font-size: 18px;
    border-radius: 0 0 2px 2px;
}
.swiper-wrapper--projects{
    padding: 0 40px 60px;
}

/*project end*/
/*career*/
.career__wrapper{
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 120px;
}
.career__content{
    display: flex;
    justify-content: space-between;
    gap: 160px;
}
.career__img{
    max-width: 350px;
}

/*career end*/
/*form*/
.form{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
    gap: 80px;
}
.form__side{
    width: calc(100% / 2 - 80px);
}
.form__side--left{
    max-width: 35%;
}

.textarea{
    width: 100%;
    height: 100%;
    resize: none;
    padding: 18px 29px;
    border-radius: 3px;
    border: 2px solid var(--grey);
}
.section__title1--form{
    padding: 10px 40px;
    margin-bottom: 15px;
    font-size: 32px;
    width: fit-content;
}
.form__side--left{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;

}
.form__side--left>input{
    padding: 0 0 5px 10px;
    border-bottom: 2px solid var(--grey);
}
.textarea,
.form__side--left>input,
.textarea::placeholder{
    font-size: 18px;
    font-weight: 400;
}
#form-btn{
    border: none;
    width: fit-content;
    padding: 6px 13px;
    background-color: var(--grey-light);
    border-radius: 3px;
    margin-left: auto;
    font-size: 16px;
    transition: all .4s ease-in-out;
}
#form-btn:hover{
    background-color: var(--orange);
    color: var(--white);

}

/*form end*/

/*footer*/
.footer_anim{
    position: relative;
    margin-top: 30px;
    padding-top: 60px;
}
.arr_up{
    position: absolute;
    bottom: 80px;
    right: 100px;
}
.footer_anim__img{
    width: 100%;
    height: auto;
}
.footer__arr,
.light,
.city,
.sun{
    position: absolute;
}
.light{
    top: 74%;
    right: 41%;
    animation: light linear 5s infinite;
}
@keyframes light {
    0% {
        top: 74%;
        right: 41%;
    }
    10% {
        top: 72.5%;
        right: 44%;
    }
    20% {
        top: 66.5%;
        right: 47%;
    }
    30% {
        top: 60.5%;
        right: 49%;
    }
    40% {
        top: 51.5%;
        right: 51.7%;
    }
    50% {
        top: 59.5%;
        right: 54.3%;
    }
    60% {
        top: 65.5%;
        right: 56.3%;
    }
    70% {
        top: 70.8%;
        right: 59.4%;
    }
    80% {
        top: 74.5%;
        right: 63.4%;
    }
    90% {
        top: 73.9%;
        right: 67.4%;
    }
    100% {
        top: 70.9%;
        right: 70%;
    }
}
.footer__arr1{
    top: 34%;
    right: 29%;
    animation: footer-arr1 linear 3.5s infinite;

}
.footer__arr2{
    top: 44%;
    right: 29%;
    animation: footer-arr2 linear 2.5s infinite;
}
.footer__arr3{
    top: 43%;
    right: 27%;
    animation: footer-arr3 linear 3s infinite;
}

@keyframes footer-arr1 {
    0% {
        top: 34%;
        right: 29%;
        opacity: 0;
    }

    50% {
        opacity: 1;
        top: 39%;
        right: 30%;
    }

    100% {
        top: 44%;
        right: 31%;
        opacity: 0;
    }
}
@keyframes footer-arr2 {
    0% {
        top: 44%;
        right: 29%;
        opacity: 0;
    }

    50% {
        opacity: 1;
        top: 50%;
        right: 29.99%;
    }

    100% {
        top: 55%;
        right: 30.99%;
        opacity: 0;
    }
}
@keyframes footer-arr3 {
    0% {
        top: 43%;
        right: 27%;
        opacity: 0;
    }

    50% {
        opacity: 1;
        top: 48%;
        right: 28%;
    }

    100% {
        top: 53%;
        right: 29%;
        opacity: 0;
    }
}
.sun{
    top: 0;
    right: 22%;
    animation: sun linear 15s infinite;
}

@keyframes sun {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.city{
    top: 30%;
    right: 71%;
    animation: city linear 5s infinite;
}
.footer_anim:before{
    content: "";
    position: absolute;
    width: 22%;
    height: 83%;
    background-color: rgba(240, 233, 48, 1);
    top: 48px;
    left: 98px;
    border-radius: 60%;
    z-index: -1;
    box-shadow: 0 0 20px 14px rgba(240,233,48,1);
    animation: city_light ease-in 6s infinite;
}
@keyframes city_light {
    0% {
        opacity: 0;
    }
    50%{
        opacity: 45%;
    }

    100% {
        opacity: 0;
    }
}
.footer__wrapper{
    background-color: var(--footer-bg);
    padding-bottom: 25px;
}
.footer__wrapper>.container{
    display: flex;
    justify-content: space-between;
    gap: 120px;
}
.footer__list-copywriting__item{
    font-size: 14px;
    color: var(--white);
    font-weight: 400;
    width: fit-content;
}
.footer__list-copywriting__link{
    color: var(--white);
    font-weight: 500;
    font-size: 16px;

}
.footer__left{
    display: flex;
    justify-content: space-between;
    gap: 300px;
}
.footer__list-copywriting{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: fit-content;
}
/*footer end*/


/*page contacts*/
.banner-page{
    width: 100%;
    object-fit: contain;
    margin-bottom: 40px;
}
.contact_page{
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contact_page__content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 90px;
    position: relative;
    margin-bottom: 80px;
    padding-bottom: 30px;
}
.section__title2--contact-page{
    margin-bottom: 40px;
}
.contact_page__content__side{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.contact_page__content__side{
   width: calc(100% / 2 - 120px);
}
.contact_page__content__side__block{
    display: flex;
    gap: 50px;
}
.text__item--not-list{
    font-size: 18px;
}
.text__item--projects-page:before,
.text__item--not-list:before{
   content: none;
}
.contact_page__content__side__block__text{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contacts-page__svg{
    min-width: 40px;
}

/*contacts-page end*/

/*projects-page*/
.projects-page{
    /*padding-top: 40px;*/
}

.projects-page__wrapper{
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    gap: 90px;
    position: relative;
}
.projects-page__project{
    display: flex;
    gap: 120px;
    position: relative;
    padding-bottom: 60px;
}
.project-page__slider{
     display: flex;
    gap: 10px;
 }
.project-page__slider>.swiper{
    margin: 0;
}
.swiperProjectPage {
    height: 450px;
    width: 80%;
}
.swiperProjectPage--thumb {
    height: 450px;
    width: 25%;
    box-sizing: border-box;
}
.swiperProjectPage--thumb .swiper-slide {
    width: 100%;
    height: 100px;
    opacity: 0.4;
}
.swiperProjectPage--thumb .swiper-slide-thumb-active {
    opacity: 1;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text__title--projects-page{
    margin-bottom: 0;
}
.projects-page__project__text{
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}
.projects-page__project__img{
    border-radius: 3px;
}
.link-btn-nosvg{
    margin-left: auto;
    padding: 6px 12px;
}
.link-btn-nosvg:after{
    content: none;
}
.projects-page__project:last-child{
    padding: 0;
}
.projects-page__project:last-child::after{
    content: none;
}
.projects-page__wrapper{
    padding-bottom: 70px;
    margin-bottom: 85px;
}
.projects-page__project__img{
    height: 100%;
    max-width: 300px;
}
.project-date{
    font-size: 14px;
    color: var(--grey);
}
/*projects-page end*/

/*project-page*/
.section__title1--project-page{
    width: fit-content;
    font-size: 32px;
    margin-bottom: 50px;
}
.project-page__slider{
    margin-top: 15px;
    margin-bottom: 50px;
}
.project-page__wrapper{
    position: relative;
    padding-bottom: 70px;
    margin-bottom: 80px;
}
/*project-page end*/


/*shop*/

.shop__wrapper{
    display: flex;
    gap: 50px;
    padding-bottom: 70px;
    margin-bottom: 80px;
    position: relative;

}
.sidebar{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.sidebar__list{
    min-width: 280px;
    max-width: 300px;
    border-radius: 3px;
    border: 1px solid var(--grey-light);
    display: flex;
    flex-direction: column;
    /*gap: 15px;*/
}
.sidebar__list__item{
    padding: 15px 25px;
    border-bottom: 1px solid var(--grey-light);
    position: relative;
}
.sidebar__category__link{
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
}
.sidebar__list__item--title{
    font-size: 20px;
    color: #fff;
    background-color: var(--orange);
}
.shop__block{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 70px;
    /*justify-content: space-between;*/
}
.shop__category__title{
    font-weight: 500;
    font-size: 22px;
    color: #fff;
    background-color: var(--orange);
    padding: 15px 25px;
    margin-bottom: 5px;
    border-radius: 3px;
}
.shop__product{
    width: calc(100% / 3 - 25px);
    padding: 25px 40px;
    border-radius: 3px;
    border: 1px solid var(--grey-light);
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.shop__product .link-btn{
    margin-left: 0;
}
.btn--product-cart{
    margin-top: auto;
}
.shop__product__title{
    font-weight: 500;
    font-size: 20px;
    color: var(--black)
}

.partners__wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 80px;
    justify-content: space-around;
    position: relative;
    margin-bottom: 80px;
    padding-bottom: 70px;
}
.partners__wrapper__img{
    object-fit: contain;
}
.shop__product__img{
    object-fit: contain;
    width: fit-content;
    text-align: center;
    margin: 0 auto;
}

/*shop end*/