.moydom{ background: red; } .m-block{ &-lastWork{ &__slide{ height: auto; display: flex; flex-direction: column; justify-content: space-between; } .swiper-slide{ height: auto; } } &-product{ &__item{ background: linear-gradient(104.04deg, #000000 0%, #3D5257 100%); border-radius: 10px; padding: 100px 10px; margin-bottom: 24px; overflow: hidden; position: relative; &-content{ max-width: 650px; margin: 0 auto; text-align: center; color: white; position: relative; z-index: 3; } &-img-left{ display: inline-block; position: absolute; left: 0; bottom: 0; z-index: 1; } &-img-right{ display: inline-block; position: absolute; right: 0; bottom: 0; z-index: 1; } &-label{ display: inline-block; background: #38A45080; padding: 5px 10px; font-size: 13px; line-height: 20px; border-radius: 5px; color: #38A450; } &-title{ font-weight: 700; font-size: 32px; line-height: 40px; margin: 50px auto; max-width: 600px; } &-description{ font-size: 16px; line-height: 25px; color: #8D9293; margin-bottom: 50px; } &:nth-child(2n){ background: linear-gradient(104.04deg, #3D5257 0%, #000000 100%); } @media (max-width: 992px) { &:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 2; } } @media (max-width: 576px) { padding: 35px 15px; .m-block-product__item{ &-img-left{ display: none; } &-title{ font-size: 26px; line-height: 35px; margin: 25px 0; } &-description{ font-size: 14px; line-height: 20px; margin-bottom: 25px; } } } } } &-tech{ display: block; height: 80px; background: white; position: relative; z-index: 11; &__wrapper{ position: relative; display: flex; overflow: hidden; user-select: none; gap: 10px; &:before, &:after{ content: ""; height: 100%; top: 0; width: 15px; position: absolute; z-index: 1; pointer-events: none; } &:before{ left: 0; background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% ); } &:after{ right: 0; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% ); } &:hover{ .m-block-tech__content{ //animation-play-state: paused; } } } &__item{ color: white; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; font-size: 14px; line-height: 20px; margin: 7px 0; position: relative; } &__content{ flex-shrink: 0; display: flex; gap: 40px; counter-reset: item; justify-content: space-around; min-width: 100%; animation: sufler 80s linear infinite; } @keyframes sufler { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 20px)); } } @media (max-width: 992px) { height: 60px; &__item{ img{ height: 60px; width: auto; } } } @media (max-width: 576px) { height: 50px; &__item{ img{ height: 50px; width: auto; } } } } } .m-bg-headBlock{ &-default{ overflow: hidden; background-size: cover; background-position: center; background-image: url("../images/pages/bg-head-default.svg"); max-width: 3070px; margin: 0 auto; } } .m-footer{ &-contactBlock{ display: flex; justify-content: space-between; gap: 50px; margin-bottom: 80px; &__item{ div{ text-transform: uppercase; font-size: 14px; line-height: 20px; font-weight: 600; color: #8D9293; margin-bottom: 15px; } a{ display: inline-block; font-size: 18px; line-height: 25px; font-weight: 500; color: #000; &:hover{ color: #574fec; } } } } &-promoForm{ display: block; padding: 40px; background: linear-gradient(90.85deg, #000000 0.5%, #35918A 99.46%); border-radius: 10px; margin-bottom: 80px; position: relative; &__content{ padding-right: 320px; color: white; } &__title{ display: block; color: #CAFAD5 !important; margin-bottom: 10px; } &__button{ display: inline-block; position: absolute; height: 52px; top: 50%; margin-top: -26px; right: 40px; } } &-map{ iframe{ border: 0px !important; width: 100% !important; border-radius: 10px !important; } } &-info{ &__logo{ img{ height: 30px; margin-top: 6px; margin-bottom: 1rem; } } &__about{ color: #8D9293; text-align: center; } &__copyright{ color: #8D9293; text-align: right; } } @media (max-width: 768px) { &-contactBlock{ display: grid; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } &-promoForm{ padding: 20px; &__content{ padding-right: 0; } &__button{ display: block; position: relative; height: auto; top: auto; margin-top: 30px; right: auto; } } &-info{ &__logo{ text-align: center; img{ height: 30px; margin: 0 auto 1rem; } } &__about{ text-align: center; } &__copyright{ text-align: center; } } } } .w-90{ width: 90%; }