.high-box {
    width: 100%;
    height: 300px;
}

.hero-block {
    display: grid;
    grid-template-columns: 4fr 7fr;
    min-height: 30vh;
    margin-top: 80px;
     border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    overflow: hidden;
}

.hero-block__btn-box {
    gap: 20px;
}

.txt-color-1 {
    color: var(--main-color);
}

.main-header {
    font-size: clamp(1.875rem, 1.6959rem + 0.9554vw, 3.75rem);
}

.main-subheader {
    font-size: clamp(1.5625rem, 1.4431rem + 0.6369vw, 2.8125rem);
}

.block-header {
    font-size: clamp(1.375rem, 1.2914rem + 0.4459vw, 2.25rem);
}

.base-btn {
    color: var(--main-txt-color);
    padding: 10px 35px;
    border: solid 1px var(--main-txt-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    &:hover {
        color: #fff;
        background: var(--main-color);
        border: solid 1px var(--main-color);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    &:hover .btn-icon {
        background: #fff;
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
}

.base-btn__filled {
    padding: 10px 35px;
    border: solid 1px var(--main-color);
    background: var(--main-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    color: #fff;
    &:hover {
        background: var(--main-color-hover);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
}


.btn-icon {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    background: var(--main-txt-color);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.icon-download {
    mask: url(/assets/img/icon-download.svg) no-repeat center / contain;
}

.hero-block__video {
    position: relative;
    min-height: 50vh;
    &:before {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 70%;
        height: 100%;
        background: linear-gradient(to right, var(--body-bg) 7%, transparent);
        z-index: 1;
    }
}

.base-block__view {
    background: #fff;
    border: solid 1px var(--border-color);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    padding: 30px;
}

.profits-block {
    background: #fff;
    border: solid 1px var(--border-color);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    padding: 30px;
}

.single-profit {
    position: relative;
    padding: 10px;
    &:after {
        position: absolute;
        content: '';
        right: -10px;
        top: 10%;
        width: 1px;
        height: 80%;
        background: #efefef;
        z-index: 1;
    }
    &:last-child:after {
        display: none;
    }
}

.profit-icon {
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: var(--main-color);
}

.icon-production {
    mask: url(/assets/img/icon-production.svg) no-repeat center / contain;
}

.icon-machine {
    mask: url(/assets/img/icon-machine.svg) no-repeat center / contain;
}

.icon-map {
    mask: url(/assets/img/icon-map.svg) no-repeat center / contain;
}

.icon-client {
    mask: url(/assets/img/icon-client.svg) no-repeat center / contain;
}

.icon-clock {
    mask: url(/assets/img/icon-clock.svg) no-repeat center / contain;
}

.why-us__grid {
    grid-gap: 20px;
}

.why-us__icon {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background: var(--main-color);
}

.why-one__icon {
    mask: url(/assets/img/why-us-icon-one.svg) no-repeat center / contain;
}

.why-two__icon {
    mask: url(/assets/img/why-us-icon-two.svg) no-repeat center / contain;
}

.why-three__icon {
    mask: url(/assets/img/why-us-icon-three.svg) no-repeat center / contain;
}

.why-four__icon {
    mask: url(/assets/img/why-us-icon-four.svg) no-repeat center / contain;
}

.why-five__icon {
    mask: url(/assets/img/why-us-icon-five.svg) no-repeat center / contain;
}

.why-six__icon {
    mask: url(/assets/img/why-us-icon-six.svg) no-repeat center / contain;
}

.our-product__box {
    padding: 15px;
    border: solid 1px var(--border-color);
    color: var(--main-txt-color);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    & img {
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
         transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    &:hover {
        color: var(--main-color);
        box-shadow: 0 0 45px rgba(0, 0, 0, .05);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    &:hover img {
         filter: grayscale(0);
         -webkit-filter: grayscale(0);
         transition: all .3s;
         -webkit-transition: all .3s;
         -moz-transition: all .3s;
         -ms-transition: all .3s;
         -o-transition: all .3s;
    }
}

.form__select {
    width: 100%;
    padding: 15px 30px 15px 15px;
    border: solid 1px var(--border-color);
    background: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}

.engineer-help {
    display: flex;
    flex-wrap: nowrap;
}

.img-help {
    max-width: 28%;
}

.dialog-btn {
    color: var(--main-txt-color);
    border: solid 1px var(--border-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    &:hover {
        color: #fff;
        background: var(--main-color);
        border: solid 1px var(--main-color);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    &:hover .dialog-btn__txt {
        border-right: solid 1px #fff;
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    &:hover .dialog-btn__icon {
        background: #fff;
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
}

.dialog-btn__txt {
    padding: 10px 35px;
    border-right: solid 1px var(--border-color);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.dialog-btn__icon__box {
    padding: 10px 15px;
}

.dialog-btn__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    background: var(--main-color);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.icon-dialog {
    mask: url(/assets/img/icon-dialog.svg) no-repeat center / contain;
}

.view-all__btn {
    color: var(--main-color);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    &:hover {
        color: var(--main-color-hover);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    &:hover .arrow-right__icon {
        transform: translateX(-5px);
        -webkit-transform: translateX(-5px);
        -moz-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        -o-transform: translateX(-5px);
        background: var(--main-color-hover);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
}

.arrow-right__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 17px;
    height: 17px;
    background: var(--main-color);
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    mask: url(/assets/img/icon-arrow-right.svg) no-repeat center / contain;
    margin-left: 15px;
}

.solutions {
    padding: 20px;
    border: solid 1px var(--border-color);
    color: var(--main-txt-color);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    &:hover {
        box-shadow: 0 0 45px rgba(0, 0, 0, .05);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
    &:hover .solution-icon {
        background: var(--main-color-hover);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
    }
}

.solution-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background: var(--main-color);
    margin-bottom: 15px;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;   
}

.icon-furniture {
    mask: url(../img/icon-furniture.svg) no-repeat center / contain;
}

.icon-cars {
    mask: url(../img/icon-cars.svg) no-repeat center / contain;
}

.icon-concrete {
    mask: url(../img/icon-concrete.svg) no-repeat center / contain;
}

.icon-heating {
    mask: url(../img/icon-heating.svg) no-repeat center / contain;
}

.icon-tractor {
    mask: url(../img/icon-tractor.svg) no-repeat center / contain;
}

.icon-sport {
    mask: url(../img/icon-sport.svg) no-repeat center / contain;
}

.icon-electro {
    mask: url(../img/icon-electro.svg) no-repeat center / contain;
}