body {
    font-family: var(--moserrat);
}

h3 {
    margin: 0;
}

img {
    width: 100%;
}

.container {
    max-width: 1086px;
    margin: 0 auto;
    padding: 0 15px;
}

.hidden {
    display: none;
}

.main-bg-dark {
    background-color: var(--main-bg-dark);
}

.burg-line {
    font-size: 18px;
    color: var(--white);
}

/* header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change:transform;
}

.header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 122px;
    padding-right: 15px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change:transform;
}

.nav {
    display: flex;
}

.nav-item {
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: baseline;
    
}

.nav-item:hover, .contacts-text-desc:hover {
    color: #FFF281;
}

.nav-item:not(:last-child) {
    margin-right: 35px;
}

.nav .nav-item:last-child {
    padding-left: 20px;
    
}

.map-icon {
    background: url(../images/map-icon.png) no-repeat;
    background-position: left center;
}
.map-icon:hover {
    background: url(../images/map-icon-yelow.png) no-repeat;
    background-position: left center;
}

.nav-mob {
    display: none;
    position: relative;
}

.phon-icon {
    margin-right: 100px;
}

/* burger */
.burger {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    width: 48px;
    cursor: pointer;
}

.burg-line {
    display: block;
    width: 100%;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    height: 2px;
    background: #fff;
    transition: all .3s;
    position: relative;
}

.burg-line+.burg-line {
    margin-top: 10.5px;
}

.active .burg-line:nth-child(1) {
    animation: ease .7s top forwards;
}

.not-active .burg-line:nth-child(1) {
    animation: ease .7s top-2 forwards;
}

.active .burg-line:nth-child(2) {
    animation: ease .7s scaled forwards;
}

.not-active .burg-line:nth-child(2) {
    animation: ease .7s scaled-2 forwards;
}

.active .burg-line:nth-child(3) {
    animation: ease .7s bottom forwards;
}

.not-active .burg-line:nth-child(3) {
    animation: ease .7s bottom-2 forwards;
}

@keyframes top {
    0% {
        top: 0;
        transform: rotate(0);
    }

    50% {
        top: 12.5px;
        transform: rotate(0);
    }

    100% {
        top: 12.5px;
        transform: rotate(45deg);
    }
}

@keyframes top-2 {
    0% {
        top: 12.5px;
        transform: rotate(45deg);
    }

    50% {
        top: 12.5px;
        transform: rotate(0deg);
    }

    100% {
        top: 0;
        transform: rotate(0deg);
    }
}

@keyframes bottom {
    0% {
        bottom: 0;
        transform: rotate(0);
    }

    50% {
        bottom: 12.5px;
        transform: rotate(0);
    }

    100% {
        bottom: 12.5px;
        transform: rotate(135deg);
    }
}

@keyframes bottom-2 {
    0% {
        bottom: 12.5px;
        transform: rotate(135deg);
    }

    50% {
        bottom: 12.5px;
        transform: rotate(0);
    }

    100% {
        bottom: 0;
        transform: rotate(0);
    }
}

@keyframes scaled {
    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes scaled-2 {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.nav-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 122px;
    right: 0;
    width: 330px;
    padding: 25px 0;
    align-items: center;
    background: var(--main-bg-dark);
    transition: all .8s ease;
    z-index: 1;
}

.nav-list-noactive {
    visibility: hidden;
    transform: translateY(-333px);
}

.burger-nav-active {
    visibility: visible;
    transform: translateY(0);
}

.logo-mob {
    display: none;
}
/* end burger */
/* header */


/* offer */

.offer {
    margin-top: 122px;
    background-color: var(--main-bg-dark);
    color: var(--white);
    position: relative;
}

.offer-description {
    width: 60%;
    position: relative;
}

.promise .yelow-text {
    color: var(--yelow);
}

.btn-pos {
    width: 52%;
}


.button {
    box-sizing: border-box;
    background: var(--btn-bg);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    transition: all .3s ease;
    cursor: pointer;
}

.button:not([disabled]):hover {
    background: var(--btn-bg-active);
}



.btn-pos {
    display: flex;
    justify-content: flex-end;
}

.wrapper-offer-bgr {
    max-width: 1366px;
    position: relative;
    height: 100%;
    margin: 0 auto;
}

/* animation*/
.offer-bgr {
    position: absolute;
    bottom: -40px;
    right: 0;
    animation: terms 2s ease-in-out;
    background: url(../images/offer-bgr.png) no-repeat;
    background-position: center right;
    width: 854px;
    height: 603px;
}

.company-name {
    font-size: 25px;
    padding: 133px 0 37px;
    animation: company-name 2s ease-in-out;
}

@keyframes company-name {
    0% {
        transform: translateY(-500px);
        opacity: 0;
    }

    50% {
        transform: translateY(0px);
        opacity: 1;
    }

    75% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(0px)
    }

}

.promise {
    font-size: 45px;
    line-height: 55px;
    animation: promise 3s ease-in-out;

}

@keyframes promise {

    0% {
        transform: translateX(-500px);
        opacity: 0;
    }

    50% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(0px)
    }

}

.terms {
    width: 52%;
    animation: terms 2s ease-in;

}

@keyframes terms {

    0% {

        opacity: 0;
    }

    50% {

        opacity: 1;
    }

    75% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.info-button {
    width: 250px;
    border: var(--btn-border-yelow);
    margin: 43px 0 85px;
    animation: btn-pos 2s ease-in;
}

@keyframes btn-pos {

    0% {

        transform: rotateX(90deg);
        opacity: 0;
    }

    50% {
        transform: rotateX(0deg);
        opacity: 1;
    }

    75% {
        background: var(--btn-bg-active);
    }

    100% {
        background: var(--btn-bg);
    }


}
/* end animation rows */
/* end offer */

/* about */
.about {
    padding-bottom: 100px;
    background-color: var(--main-bg-light);
}

.section-name-black {
    color: var(--black);
}

.section-name-white {
    color: var(--white);
}

.section-name-black,
.section-name-white {
    font-size: 40px;
    text-transform: uppercase;
}

.ubout-name-position {
    padding: 100px 0 80px 85px;
}

.about-discription {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    position: relative;
}

.about-discription-text {
    width: 40%;
    font-size: 18px;
    line-height: 25.2px;
}

.about-discription-img-wrapper {
    position: relative;
    padding-left: 28px;

}

.about-discription-img {
    position: relative;
    z-index: 2;
}

.about-discription-img img {
    width: 100%;
}

.about-discription-img-border {
    position: absolute;
    border: 1px solid var(--black);
    top: 19px;
    left: 0;
    width: calc(100% - 28px);
    height: 100%;
    z-index: 1;
}

.about-discription-wrapper {
    display: block;
}

/* facts */
.facts {
    background-color: var(--main-bg-dark);
}

.section-name-white {
    text-align: center;
    padding: 60px 0;
}

.facts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.facts-items {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: var(--white);
    text-align: center;
    margin: 50px 0;
    font-size: 16px;
    padding: 6px;
    box-sizing: border-box;
    min-height: 240px;
}

.nowrap {
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
/* end facts */
/* end about */

/* distinction */
.distinction {
    background: var(--main-bg-light);
}

.pos-left {
    text-align: end;
}

.distinction-bgr {
    background: url(../images/distinction-bgr.png) no-repeat center center;
    background-size: cover;
}

.distinction-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 200px 0;
    gap: 20px;
}


.distinction-item {
    background: var(--main-bg-light);
    width: 30%;
    padding: 15px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.distinction-title {
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0;
}

.distinction-desc {
    font-size: 14px;
    width: 75%;
    margin: 0 auto;
}

/* end distinction */


/* price */
.price {
    background: var(--main-bg-light);
}

.price-name-position {
    text-align: center;
    padding: 100px 180px 80px;
}

.price-list {
    display: flex;
    justify-content: space-between;
    padding: 0 100px;
}

.prise-item {
    position: relative;
    box-sizing: border-box;
    padding-left: 21px;
}

.price-card {
    background: var(--main-bg-dark);
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    padding: 25px 40px;
    z-index: 2;
    position: relative;
}

.price-card-name,
.price-card-desc {
    text-align: left;
    line-height: 140%;
}

.price-card-name {
    color: var(--yelow);

}

.price-card-desc {
    color: var(--white);
}

.project2 .big-block-desc-num {
    text-align: right;
}

.price-card-border {
    position: absolute;
    border: 1px solid var(--black);
    top: 16px;
    left: 0;
    width: calc(100% - 21px);
    height:100%;
    z-index: 1;
}

.details {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 80px;
}

.details-info {
    background: var(--yelow);
    flex-grow: 1;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 21px;
}

.details-info-text {
    font-size: 16px;
    color: var(--black);
    margin: 0;
    padding-left: 15px;
}

.details-info-btn {
    width: 228px;
    margin: 0;
}
/* end price */

/* clients */
.bloks-wrapper {
    display: flex;
    flex-direction: column;
}

.block {
    width: 50%;
}

.clients-main {
    position: relative;
}

.client-main-wrapper {
    padding: 102px 0 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background: var(--main-bg-dark);
    box-sizing: border-box;

}

.clients-photo1 {
    align-self: flex-end;
    margin-top: -169px;
    position: relative;
}
.clients-photo2 {
    margin-top: -25px;
    margin-bottom: 32px;
    position: relative;
}

.section-name-white-clients {
    padding: 0;
    margin-bottom: 37px;
    text-align: start;
    width: 100%;
    padding-left: 33%;
}

.clients-main-desc {
    color: var(--white);
    padding: 0 17%;
}

.block img {
    width: 100%;
    height: 100%;

}

.clients-logo3 {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clients-photo1::before,
.clients-main::before,
.clients-logo3::before
{
    content: '';
    position: absolute;
    bottom: 62%;
    height: 1px;
    border: solid 1px #1F1F1F;
    border-top: none;
    border-left: none;
    border-right: none;
    z-index: -1;
}

.clients-photo1::before {
    width: calc(50vw - 9px);
    left: 0;
    bottom: -20px;
    right: -100vw;
}

.clients-main::before {
    right: 0;
    bottom: -20px;
    left: calc(0px + -100vw);
    left: -100vw;
}

.clients-logo3::before {
    width: calc(100vw - 9px);
    bottom: 0;
    left: calc((-100vw + 100%) / 2); 
}

.client-logo:not(:last-child) {
    margin-right: 5px;
}

.client-logo img {
    width: 100%;
    height: 100%;
}
/* end clients */

/* projects */
.projects img {
    height: 100%;
}

.project {
    display: flex;
    margin-bottom: 80px;
}

.big-block {
    width: 75%;
    display: flex;
}

.big-block-desc {
    width: 55%;
    background: var(--main-bg-dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 25px;
    padding: 30px 15px;
}

.big-block-desc-title {
    text-align: center;
    padding: 0 60px 0;
    line-height: 30px;
}

.big-block-desc-subtitle {
    text-align: right;
    padding-right: 60px;
}

.big-block-photo {
    width: 45%;
}

.litle-blocks {
    width: 25%;
}

.litle-block {
    height: 32%;
    margin: 0 0 9px 30px;
}

.project2 .big-block {
    order: 2;
}

.project2 .litle-block {
    margin: 0 30px 9px 0;
}

.project2 .litle-block {
    margin: 0 30px 9px 0;
}

.project2 .big-block-desc {
    order: 2;
}

.swiper-button-next,
.swiper-button-prev {
    color: #333232;
    top: 93%;
}

/* end projects */


/* comments */

.comments {
    background: var(--main-bg-light);
    margin-bottom: 43px !important;
}

.comments-wrapper {
    display: flex;
    flex-direction: column;

}

.comment-item {
    display: flex;
    align-items: center;
}

.comment-item:nth-child(2n) {
    justify-content: end;
}

.comment-item:nth-child(2n) .comment-desc {
    text-align: right;
}

.comment-item:nth-child(2n) .comment-photo {
    order: 1;
    margin-left: 35px;
    margin-right: 0;
}

.comment-photo {
    width: 30%;
    max-width: 156px;
    margin-right: 35px;
}

.comment-photo img {
    border-radius: 50%;
}

.comment-desc {
    width: 70%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
}

.comment {
    font-size: 18px;
}

.autor {
    font-size: 18px;
    font-weight: 300;
}

.bordered {
    margin: 40px 20px 20px;
    padding: 1px 20px 20px;
    position: relative;
}

.bordered:before {
    content: '';
    position: absolute;
    top: 0px;
    right: -20px;
    left: 50%;
    height: 70%;
    border: solid 1px #1F1F1F;
    border-bottom: none;
    border-left: none;
}

.bordered:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    left: -20px;
    height: 70%;
    border: solid 1px #1F1F1F;
    border-top: none;
    border-right: none;
}

/* end comments */

/* section-form */
.section-form {
    background: var(--btn-bg);
    padding: 37px 0 80px;
    position: relative;
}

.section-form-container {
    max-width: 900px;
    margin: 0 auto;
}

.section-form-desc {
    width: 100%;
    color: var(--white);
    margin-bottom: 60px;
}

.section-form-desc-title {
    margin: 0;
    padding: 0;
    font-size: 40px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 25px;
}

.section-form-desc-text {
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.form-wrapper {
    max-width: 435px;
    min-width: 331px;
    box-sizing: border-box;
    border: 30px solid var(--yelow);
    background: var(--white);
    padding: 35px 26px 40px 33px;
    max-height: 468px;
    position: relative;
    z-index: 2;
    margin: 0 3.3% 0px 0;
}

.form {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.form input {
    margin-bottom: 50px;
    max-width: 264px;
    border: none;
    border-bottom: 1px solid var(--black);
    outline: none;
    height: 32px;
    padding-left: 8px;
}

.form input:autofill {
    background: #1F1F1F;
}

.form input::placeholder {
    color: #797070;
    padding-bottom: 12px;

}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset;
    box-shadow: 0 0 0 30px white inset ;
}


.btn-submit {
    margin-top: -12px;
    align-self: flex-end;
    border: 1px solid var(--black);
    cursor: pointer;
}

.btn-submit:disabled {
    background: var(--btn-bg-disable);
    cursor: not-allowed;
}

.form-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--black);
}

.form-block {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 88px;
}

.form-images,
.form-wrapper {
    width: 50%;
}

.form-images {
    display: flex;
    flex-direction: column;
    margin: 17px 0;
    align-items: flex-end;
}

.form-images img {
    width: 100%;
    max-width: 435px;
}

.float {
    position: absolute;
    bottom: -15px;
    left: calc(50% - 15px - 75px);
}

.form-img {
    display: flex;
}

.form-img img {
    object-fit: cover;
}

/* end section-form */

/* footer */
.footer {
    background: var(--btn-bg);
    border-top: 1px solid #FFF281;
}

.footer-logo {
    align-self: flex-start;
    padding-top: 6px;
}

.footer-logo {
    width: 81px;
}

.footer-content-wrapper,
.footer-contacts {
    display: flex;
    justify-content: space-between;
}

.footer-content-wrapper {
    padding: 30px 0 40px;
    align-items: center;
}

.footer-contacts {
    justify-content: space-between;
    padding: 0 35px;
    width: 100%;
}

.no-word-wrap {
    white-space: nowrap;
}

.contacts-text p {
    margin: 0;
    color: var(--white);
}

.contacts-text-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px 0 !important;
}

.contacts-text-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.tell {
    text-align: left;
}

.address {
    text-align: right;
}

.social-icons {
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
}

.social-icons a::before {
    content: "";
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    left: .65rem;
    top: .65rem;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
}

.fb-icon {
    background-image: url(../images/fb-icon.svg);
}

.inst-icon {
    background-image: url(../images/inst-icon.svg);
}

.inst-icon {
    margin-bottom: 15px;
}

/* end footer */


.form ._error {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255,0,43,0.35);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(255,0,43,0.35);
    box-shadow: inset 0px 0px 10px 0px rgba(255,0,43,0.35);
}
.form ._valid {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(32,207,41,1);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(32,207,41,1);
    box-shadow: inset 0px 0px 10px 0px rgba(32,207,41,1);
}


.form-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4f4f4fb3 url('../images/Spinner-2.gif') center/50px no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease 0s;
}

.form-wrapper._sending::after{
    opacity: 1;
    visibility: visible;
}

/* popup */

.popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #4f4f4f;
    z-index: -100;
    visibility: hidden;
    opacity: 0;

    display: flex;
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;


}

.popup-arrow {

    background: url(../images/errow.png) no-repeat left top;
    width: 5%;
    min-width: 63px;
    height: 30px;
    align-self: flex-start;
    justify-self: flex-start;
    margin-left: 10%;
    margin-top: 6%;


}

.notscroll {
    overflow: hidden;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

.open {
    position: fixed;
    visibility: visible;
    opacity: 1;
    z-index: 20000;
    animation: open-popup 1s ease-in-out;
}
@keyframes open-popup  {
    0% {
        transform: translateX(100%);
        opacity: 1;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }



}


.close {
    position: fixed;
    opacity: 1;
    z-index: 20000;
    animation: close-popup 1s ease-in-out;
}

@keyframes close-popup  {
    0% {
        position: fixed;
        visibility: visible;
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        position: absolute;
        visibility: hidden;
        transform: translateX(-200%);
        opacity: 1;
    }
}


.popup-message {
    font-weight: 600;
    font-size: 40px;
    line-height: 49px;
    text-align: center;
    color: #fff;
    position: relative;
    width: 90%;
    margin-top: -10%;
    margin-right: 17%;

}

.popup-message::before {
    content: '';
    position: absolute;
    top: calc(50px + 155px);
    left: calc(50% - (119px/2));
    background: url(../images/success-icon.png) no-repeat center center;
    width: 119px;
    height: 119px;
}

.collaps-icone::before {
    background: url(../images/collapse-icon.png) no-repeat center center;

}