body{ font-family: 'Fira Sans', sans-serif; color: #8d8d8d; } button{ display: block; background: transparent; } ul, li{ display: block; margin: 0; padding: 0; } .vh-dependent{ height: 46vh; display: flex; align-items: center; } .be-static{ position: static; } h1, h2, h3, h4, h5, h6{ font-style: normal; font-weight: 700; color: #151515; margin: 0; padding: 0; } h2{ font-size: 38px; } h3{ font-size: 22px; } .btn{ background: #4737ff; color: #fff; text-transform: uppercase; font-weight: 500; font-size: 14px; padding: 13px 26px; border: none; display: inline; border-radius: 3px; letter-spacing: 0.3em; text-align: center; transition: all 0.3s ease; } .btn:hover{ background: #3516f2; color: #fff; } .header{ height: 90vh; } .nav{ padding-top: 59px; margin-bottom: 127px; } .logo{ } .search{ border: none; } .menu{ border: none; } .offer-cont__title{ font-size: 60px; letter-spacing: -0.01em; line-height: 1.2em; } .offer-cont__text{ margin: 30px 0 56px; } .offer-cont__btn{ } .hero{ background: url('../img/image-1.jpg') no-repeat right top; background-size: 80% 100%; width: 55%; height: 800px; position: absolute; right: 0; top: 142px; } .video{ position: absolute; left: 0; bottom: 25%; width: 40%; height: 36%; display: block; background: url('../img/video.jpg') no-repeat center center; display: flex; justify-content: center; text-align: center; } .video::after{ content: ''; display: block; background: url('../img/play.svg'); width: 65px; height: 65px; border-radius: 4px; } .problems{ padding-top: 440px; } .about{ } .about__title{ margin-bottom: 30px; } .about__text{ } .about__author{ background: url('../img/author.jpg') no-repeat left center; padding: 7px 0 7px 96px; margin-top: 61px; } .about__name{ font-size: 22px; } .about__dop{ margin-bottom: 0; } .services{ padding-top: 142px; } .section-title{ } .section-title__label{ text-transform: uppercase; font-size: 14px; letter-spacing: 0.25em; color: #8f8f8f; margin-bottom: 40px; } .section-title__heading{ } .serv-list{ color: #8d8d8d; margin-top: 67px; } .serv-list__item{ margin-bottom: 20px; } .left{ margin-left: 37px; } .works-carousel{ margin-top: 99px; } /* @media screen and (min-width: 992px){ .works-carousel, .item, .works-carousel .owl-item{ width: 825px !important; position: relative; } } */ .owl-theme .owl-dots, .owl-theme .owl-nav{ text-align: left; } .owl-theme .owl-nav [class*=owl-]{ margin: 0; } .works-carousel .owl-nav{ margin-top: 50px !important; } .works-carousel .owl-prev{ margin-right: 25px !important; } .owl-carousel__play{ display: block; background: url('../img/play.svg'); width: 65px; height: 65px; position: absolute; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px; cursor: pointer; border-radius: 4px; } .collage{ padding-top: 219px; width: 50%; background: url('../img/res-1.jpg') no-repeat left top / 80% 70%; height: 540px; position: absolute; left: 0; } .collage img{ display: block; width: 350px; height: 450px; position: absolute; right: 0; bottom: 0; box-shadow: 30px 80px 130px rgba(0, 0, 0, 0.25); } .result{ padding-top: 219px; } .easy{ margin-left: 65px; margin-top: 30px; } .easy__title{ margin-bottom: 30px; } .easy__text{ margin-bottom: 62px; } .easy__point{ text-transform: uppercase; padding-left: 83px; letter-spacing: 0.1em; color: #000; font-weight: 500; font-size: 14px; padding-top: 20px; padding-bottom: 20px; margin-bottom: 25px; } .first{ background: url('../img/icon100.svg') no-repeat left center; } .second{ background: url('../img/bag.svg') no-repeat left center; } .works{ padding-top: 283px; } .work-tabs{ margin-left: 60px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.3em; margin-top: 70px; } .work-tabs__item a{ text-decoration: none; color: #8d8d8d; } .work-tabs__item.active a{ color: #1434e1; } .works-wrap{ flex-wrap: wrap; margin-top: 108px; } .works-wrap__item{ margin-bottom: 30px; display: block; position: relative; } .works-wrap__item img{ transition: all 0.4s ease; display: block; } .works-wrap__item:hover img{ box-shadow: -30px 80px 200px rgba(0, 0, 0, 0.25); -moz-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg); -webkit-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg); -o-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg); -ms-transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg); transform: rotate(3deg) translate(0px, -3px) skew(2deg, 2deg); } .works-wrap__item:hover:after{ visibility: visible; } .works-wrap__item:after{ content: ''; visibility: hidden; display: block; background: url('../img/play.svg'); width: 65px; height: 65px; position: absolute; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px; transition: all 0.3s ease; } .testimonials{ padding-top: 248px; } .contributor{ margin-top: 121px; } .contributor__title{ margin-bottom: 20px; } .contributor__desc{ } .cont-photo{ display: block; } .contributor-carousel .owl-nav{ display: flex; margin-top: -50px; position: relative; } .contributor-carousel .owl-prev{ margin-right: 25px; } .clients{ padding-top: 278px; } .clients-row{ margin-top: 127px; } .footer{ height: 240px; background: #515151; margin-top: 136px; } .footer-logo{ margin-top: 109px; margin-bottom: 109px; } .section-title__heading_review{ font-size: 28px; } @media screen and (max-width: 1200px){ .work-tabs{ margin-left: 0; } .works-wrap__item{ width: 30%; } .works-wrap__item img{ display: block; width: 100%; } .contributor{ margin-top: 50px; } } @media screen and (max-width: 992px){ .works-carousel .item, .works-carousel .owl-item{ width: auto !important; } } @media screen and (max-width: 720px){ .hero{ position: relative; width: 100%; height: 200px; top: 0; margin-top: 60px; } .vh-dependent{ height: auto; display: flex; align-items: center; } .about{ margin-top: 60px; } .collage{ position: relative; width: 100%; } .easy{ margin-left: 0; margin-top: 70px; } .contributor-carousel .owl-nav{ margin-top: 40px; } } @media screen and (max-width: 576px){ .left{ margin-left: 0; } .works-wrap__item{ width: 100%; margin-bottom: 40px; } .clients-row{ flex-direction: column; justify-content: center; } .clients-row__item{ margin-bottom: 30px; text-align: center; } .work-tabs{ flex-direction: column; } .work-tabs__item{ margin-bottom: 40px; } }