website-on-bootstrap/css/style.css

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;
	}
}