@font-face {
    font-family: 'Regular';
    src: url('/wp-content/themes/NkH/fonts/Jost-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Medium';
    src: url('/wp-content/themes/NkH/fonts/Jost-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Bold';
    src: url('/wp-content/themes/NkH/fonts/Jost-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{
    color: #323232 !important;
}
p{
    color: #686868 !important;
}
h2{
    margin-bottom: 30px !important;
}

#UpForm .input-form p input, #UpForm .input-form p textarea{
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #f0f4ff;
    border: none;
    background: #f0f4ff;
    font-size: 16px;
    font-family: 'Medium';
}

.asdww{
    background: #9b0d0d;
    border-radius: 5px;
    color: #fff !important;
}

#UpForm .input-form p .send-form {
    background: #9b0d0d;
}

#UpForm .input-form p .send-form:hover {
    background: #a91414 !important;
}

/*Шапка сайта*/
#shapka {
    padding: 0 !important;
    border-radius: 0 !important;
    background-size: cover;
}

#PC-header {
    position: fixed;
    z-index: 407;
    top: 0px;
    width: 100%;
    background: #00000050;
    /* box-shadow: rgba(255, 255, 255, 0.25) 0px 25px 50px -12px; */
    margin-bottom: 8vh;
}

.shapan {
    width: 100%;
    /*background: #548ae8;*/
}

.shapans {
    transition: 0.3s ease-in-out;
    /* Плавное изменение фона */
}

.shapans.scrolled {
    /* top: -150px !important; */
    background: #000000b0 !important;
    /* box-shadow: rgb(18 0 255 / 46%) 0px 20px 50px -18px; */
}

.shapan .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
}

.shapan .top .content {
    width: 250px;
    display: inherit;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.shapan .top .content p,
.shapan .top .content a {
    color: white;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

.shapka {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*border-bottom: 1px solid white;*/
    /*background: #e7e7e7;
    border-radius: 80px;*/
    align-items: center;
    padding: 10px;
    margin: 0;
}

.shapka .left {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: 15px;
}

li nav a {
    color: white;
    font-size: 18px;
}

.shapka-logo {
    width: 100%;
}

.shapka-logo:hover {
    transform: scale(1.02);
}

.shapka-logo:active {
    transform: scale(1);
}

#PC-header .shapka .logo {
    display: flex;
    width: 50px;
    align-items: center;
}

#PC-header .top .content .logo {
    width: 100px !important;
    box-shadow: none !important;
    padding: 0;
}

.shapka_button {
    position: relative;
    overflow: hidden;
    background: #b82121;
    border-radius: 8px;
    padding: 17px 40px;
    font-weight: 500;
    color: white;
    font-size: 18px;
    display: block;
    width: max-content;
    text-align: center;
    height: max-content;
    transition: .3s ease-in-out;
}
.shapka_button1 {
    background: #b82121;
    border-radius: 40px;
    padding: 15px 40px;
    font-weight: 500;
    color: white;
    font-size: 15px;
    transition: 0.5s;
    display: block;
    width: max-content;
    text-align: center;
    height: max-content;
    transition: .3s ease-in-out;
}
.shapka_button:hover {
    color: white;
    transform: scale(1.02);
}

.shapka_button:active {
    transform: scale(1);
}

#buthead {
    text-align: center;
}

#buthead .input-form p {
    width: 100%;
    margin: 0;
}

#buthead .input-form .num-head,
#buthead .input-form .tel-head,
#buthead .input-form .but-head {
    width: 100%;
    padding: 15px;
    color: #4C545E;
    background: #f7f7f5;
    border-radius: 15px;
    border: 1px solid #f7f7f5;
    margin-bottom: 10px;
}

#buthead .input-form .but-head {
    cursor: pointer;
    background: #c5a47e;
    color: black;
    margin: 0;
}

nav.main-navigation-PC {
    width: 80%;
}

nav.main-navigation div.menu ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

nav.main-navigation .menu-menu-container .menu-item a {
    font-size: 16px;
    color: white;
    font-weight: 400;
    margin: 0;
}

nav.main-navigation .menu-menu-container .menu-item {
    transition: .3s ease-in-out;

    &:hover {
        color: rgb(224, 207, 207);
        transform: translateY(-2px);
    }

    &:active {
        transform: translateY(0);
    }
}

.shapan .main-navigation .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0;
    align-items: center;
}

.shapan .main-navigation .menu .menu-item {
    font-size: 16px;
    font-weight: 400;
    color: white;
    visibility: hidden !important;
}

.shapan .container nav {
    margin: 0;
}

.sub-menu {
    display: none;
    transform: translateY(0px);
}

#menu-item-14:hover>.sub-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    z-index: 2;
    background: #000000d5;
    border-radius: 15px;
    padding: 15px;
    width: 400px;
    transform: translateY(2px);
}

#menuToggle {
    display: none;
}

.shapan .main-navigation .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.shapan .main-navigation .menu .menu-item {
    font-size: 16px;
    font-weight: 400;
    color: white;
    z-index: 2;
}

.shapan .container nav {
    margin: 0;
}

#menu-item-11 li a:hover {
    text-decoration: underline !important;
}






#shapka {
    margin-bottom: 65px;
}

#shapka .shapka_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#shapka .fortochka_cont {
    position: absolute;
    z-index: -1;
    background: black;
    width: 100%;
    margin: 0;
}

#shapka .fortochka {
    width: 100%;
    opacity: .3;
    /* Прозрачность фонового изображения */
    object-fit: cover;
    background: transparent;
}

#shapka .fortochka_cont,
#shapka .fortochka,
#shapka .shapka_content {
    height: 100vh;
}


#shapka .shapka_content p,
#shapka .shapka_content h1,
#shapka .shapka_content .advantages .advantage {
    margin: 0;
    color: #fff !important;
}
#shapka .shapka_content .advantages.BGA{
    width: 60%;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#shapka .shapka_content .lefs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#shapka .shapka_content h1 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 20px;
}

#shapka .shapka_content .advantages .advantage {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-self: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    align-items: center;
    height: 100%;
    backdrop-filter: blur(10px);
}
#shapka .shapka_content .advantages .advantage img{
    width: 50px;
    height: 50px;
    object-fit: contain;
}

#shapka .shapka_content .advantages .rejing {
    font-size: 18px;
    display: flex;
    gap: 3px;
    height: auto;
    align-items: center;
}

#shapka .shapka_content .advantages .rejing .starsss {
    /* margin-left: 5px; */
    height: fit-content;
}

#shapka .shapka_content .cont-form {
    margin-top: 15px;
    width: 100%;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

#shapka .shapka_content .cont-form a {
    padding: 20px 45px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 40px;
    transition: .3s ease-in-out;
}

#shapka .shapka_content .cont-form .bottom1 {
    position: relative;
    overflow: hidden;
    background: #b82121;
    border-radius: 8px;
    padding: 20px 51px;
    font-weight: 500;
    color: white;
    font-size: 18px;
    display: block;
    width: max-content;
    text-align: center;
    height: max-content;
    transition: .3s ease-in-out;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;

    &:hover {
        background: #9b0d0d;
        color: white;
    }

    &::after {
        content: "";
        display: block;
        width: 20px;
        height: 200px;
        margin-left: 50px;
        background: #fff;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.5) 100%);
        left: -40px;
        top: -80px;
        z-index: 1;
        transform: rotate(45deg);
        position: absolute;
        animation: movingFlare 3s ease-in-out 0.05s infinite;
    }
}

#shapka .shapka_content .cont-form .bottom2 {
    background: transparent;
    color: #303030;
    border: 1px solid #303030;
}

#shapka .shapka_content .cont-form .bottom2:hover {
    background: #303030;
    color: white;
}

#shapka .content-z {
    position: relative;
    z-index: 2;
}

.Usluga {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
}

.Usluga .image,
.Usluga .content {
    width: 49%;
}
.Usluga .content .info-card{
    color: #0A0A0A;
}

.Usluga .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.Usluga .image img {
    border-radius: 20px;
}

.Usluga .bottom_2 {
    position: relative;
    overflow: hidden;
    background: #b82121;
    border-radius: 8px;
    padding: 20px 51px;
    font-weight: 500;
    color: white;
    font-size: 18px;
    display: block;
    width: max-content;
    text-align: center;
    height: max-content;
    transition: .3s ease-in-out;

    &:hover {
        background: #9b0d0d;
        color: white;
    }
}

#contactForm .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}


#HowWork .item .image {
    height: 100px;
    display: flex;
}

#HowWork .item .image img {
    position: absolute;
    z-index: -1;
    background: none;
    width: auto;
    height: 100px;
    margin-top: 0px;
    align-self: flex-end;
}

#HowWork .item .image .Number {
    color: rgba(255, 0, 0, 0.1);
    position: absolute;
    font-size: 170px;
    z-index: -2;
    line-height: 75%;
    margin-left: 20px;
}

#HowWork .item .image {
    border-bottom: 2px solid black;
    height: 130px;
}

#HowWork .item .info-card {
    color:#686868;
}
#HowWork .item .zag-card{
    margin-top: 10px;
    font-size: 20px;
}

#ustanovkaSlhacbaumov p {
    padding: 20px 30px;
    border-radius: 20px;
    background: #f4f4f4;
    color:#686868;
    font-size: 17px;
}

#contactForm .container .content {
    width: 49%;
}

#contactForm .container .image img {
    border-radius: 20px;
}

#contactForm .container .contForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#contactForm .container .contForm h2{
    margin-bottom: 10px !important;
}
#contactForm .container .contForm .wpcf7 {
    width: 60%;
}

#contactForm .container .contForm .input-form .name-form,
#contactForm .container .contForm .input-form .num-form,
#contactForm .container .contForm .input-form .send-form {

    padding: 15px;
    border-radius: 5px;
    border: 1px solid #9b0d0d;
    width: 100%;
}

#contactForm .container .contForm .input-form {
    width: 100%;
}


#contactForm .container .contForm .input-form .send-form {
    background: #9b0d0d;
    color: #fff;
    transition: .3s ease-in-out;
}

#contactForm .container .contForm .input-form .send-form:hover {
    transform: scale(1.02);
}


#contactForm .container .content .main-navigation div.menu ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

#contactForm .container .content .main-navigation-PC {
    width: 80%;
}

#contactForm .container .content .main-navigation div.menu ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

#contactForm .container .content .main-navigation .menu-menu-container .menu-item a {
    font-size: 16px;
    color: black;
    font-weight: 400;
    margin: 0;
}

#contactForm .privacy-policy-div {
    margin-top: 10px;
}

#contactForm .container .content .main-navigation .menu-menu-container .menu-item {
    margin-top: 10px;
    transition: .3s ease-in-out;

    &:hover {
        color: rgb(224, 207, 207);
        transform: translateY(-2px);
    }

    &:active {
        transform: translateY(0);
    }
}

#contactForm .logo {
    background: #A5A5A5;
}

.archive .titles .zag {
    margin: 0 !important;
    margin-bottom: 25px !important;
}

#Branche-card .zag {
    font-size: 32px;
}

.Branche {
    grid-template-columns: repeat(auto-fit, minmax(451px, 1fr));
    align-items: stretch;

}

.Branche_item .image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: black;
    width: 100%;
    height: 100%;
    margin: 0;
    transition: .3s ease-in-out;
}
.Branche_item{
    transition: .3s ease-in-out;
}
.Branche_item:hover .image{
    transform: scale(1.04);
}



.Branche_item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    opacity: 0.55;
    
   
 }   

.Branche .image {
    border-radius: 20px;
}

.Branche_item {
    position: relative;
    background: none;
    border-radius: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    overflow: hidden;
    height: 350px;
}

#Branche-card .Branche_item .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    position: relative;
    z-index: 2;
}


.Branche_item .zag-card {
    font-size: 22px;
    font-weight: 600;
    color: #fff !important;
}
.Branche_item .bottom {
    margin-top: 0;
}
.Branche_item .bottom{
    height: 100%;
}
.Branche_item .bottom .bottom_2 {
    transition: .3s ease;
    color: #ffffff;
    transition: 0.5s;
    font-size: 16px;
    font-weight: 500;
    padding: 35px;
    border-radius: 5px;
    background: transparent;
    width: fit-content;
    display: flex;

    width: 100% !important;
    height: 100%;

}

.Branche_item .bottom .bottom_2:hover {
    color: #ffffff;
    box-shadow: none !important;
}

#ustanovkaSlhacbaumov .galereya_grin li{
    height: 250px;
}

#ustanovkaSlhacbaumov .galereya_grin img, #ustanovkaSlhacbaumov .galereya_grin video{
    height: 100%;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

#ustanovkaSlhacbaumov .galereya_grin a{
    display: block;
    height: 100%;
    transition: .3s ease-in-out;
}
#ustanovkaSlhacbaumov .galereya_grin a:hover{
    transform: scale(1.02);
}
#ustanovkaSlhacbaumov ul{
    padding-bottom: 15px;
}




#contactForm .info, #menuToggle .infocian{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 350px;
}
#contactForm .info .da, #menuToggle .infocian .da{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}
#contactForm .info .da img, #menuToggle .infocian .da img{
    width: 35px;
    height: 35px;
}
#contactForm .info a, #menuToggle .infocian a{
    color: #000;
}
#menuToggle .infocian{
    align-items: end;
    width: 100%;
}


@media (max-width: 1280px) {
    #shapka .shapka_content .advantages.BGA{
        width: 80%;
    }
    #HowWork .BGA{
        grid-template-columns: repeat(auto-fit, minmax(241px, 1fr));
    }
}
@media (max-width: 1024px){
    #ustanovkaSlhacbaumov .BGA{
        grid-template-columns: repeat(auto-fit, minmax(241px, 1fr));
    }
}
@media (max-width: 768px){
    #shapka .shapka_content .advantages.BGA{
        width: 100%;
    }
    .Usluga{
        flex-direction: column-reverse;
    }
    #VideoNabludenie .Usluga{
        flex-direction: column;
    }
    .Usluga .image, .Usluga .content{
        width: 100%;
    }
    #contactForm .container .contForm .wpcf7{
        width: 100%;
    }
    /*Toggler-menu*/
    #PC-header{
        display: none;
    }    
    #menuToggle
    {
    display: block;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 15;
    left: 0px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    background: rgba(0, 0, 0, 0.82);
}
    #menuToggle input
    {
    display: block;
    width: 50px;
    height: 41px;
    position: absolute;
    top: -7px;
    left: -5px;
    
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 17; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
    }

    #menuToggle .class_menu{
        position: fixed;
        top: 25px;
        right: 20px;
    }
    /*
    * Just a quick hamburger
    */
    #menuToggle span
    {
    display: block;
    width: 40px;
    height: 4px;
    margin-bottom: 7px;
    position: relative;
    
    background: #fc6938 ;
    
    z-index: 16;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
    transform-origin: 0% 0%;
    }
    #menuToggle span:nth-last-child(2)
    {
    transform-origin: 0% 100%;
    }
    #menuToggle input:checked ~ span
    {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
    }
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
    }
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
    transform: rotate(-45deg) translate(0, -1px);
    }
    #overlay{
        position: absolute;
    width: 100vw;
    height: 100vh;
    margin: -100px 0 0 55px;
    padding: 50px;
    padding-top: 125px;
    z-index: 14;
    background: #FFFFFF;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    #overlay li > a{
        text-align: right;
        width: 100%;
        display: block;
        font-size: 20px;
        font-family: 'Inter_medium' sans-serif;
        margin-bottom: 10px;
        color: black;
    }
    #overlay a.header-cta{
        margin: auto;
        margin-bottom: 15px;
    }
    .main-navigation{
        margin-bottom: 70%;
    }
    #overlay a.mob-link{
        width: 100%;
        display: block;
    }
    #menuToggle input:checked ~ #overlay
    {
    transform: translate(calc(30px - 100%), 0);
    }
    #menuToggle .content{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 15px;
        width: 70%;
        padding: 15px 0;
    }
    #shapka .fortochka_cont, #shapka .fortochka, #shapka .shapka_content{
        height: 88vh;
    }
    #menuToggle .mobilemob .logo{
        display: flex;
        align-items: center;
        width: 110px;
    }
    #menuToggle .mobilemob .logo img{
        width: 100%;
        height: 36px;
    }
    #menuToggle .content{
        justify-content: space-around;
    }
    #contactForm .container .content{
        width: 100%;
    }
}
@media (max-width: 568px){
    #shapka .shapka_content h1{
        font-size: 30px;
    }
    #shapka .shapka_content .advantages.BGA{
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    #HowWork .BGA{
        gap: 30px;
    }
    .shapka_button{
        padding: 13px 28px;
        font-size: 15px;
    }
    #menuToggle .content{
        width: 80%;
    }
    #contactForm .container{
        flex-direction: column;
    }
    .main-navigation{
        margin: 0;
    }
    #Livewater .Usluga{
        flex-direction: column;
    }
    #menuToggle .mobilemob .logo{
        height: fit-content;
    }
    .Branche {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        align-items: stretch;
    }
}
@media (max-width: 450px){
    #shapka .shapka_content h1{
        font-size: 22px;
    }
    .shapka_button{
        padding: 10px 16px;
    }
    #menuToggle .mobilemob .logo{
        width: 96px;
    }
}