html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Manrope', sans-serif;
	font-size: 14px;
	overflow: hidden;
}

body.scrolled {
	padding-top: 72.9167px;
}

body.control {
	overflow: auto;
}

/* Templates */
.f-16 {
	font-size: 16px;
}

.btn-sm {
	padding: .25rem 1rem !important;
}

img {
	max-width: 100%;
}

.header-2x {
	font-size: 48px;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
}

.header {
	font-size: 36px;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
}

.poppins {
	font-family: 'Poppins', sans-serif !important;
}

.bold {
	font-weight: bold;
}

.opac {
	opacity: .7;
}

.btn {
	border-radius: 100px;
	padding: .5rem 1.5rem;
}

.no-wrap {
	flex-wrap: nowrap;
}

.title-top {
	margin-bottom: 2rem;
}

.hr {
	height: 4px;
	background: #0779e4;
	border:0;
}

.contact-call:hover {
	background: #fff !important;
	color: #0779e4;
	transition: .2s ease;
}

.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.preloader.control {
	transition: 1s ease;
	transform: translateY(-100vh);
}


/* Navbar */
.navbar-toggler {
	border: 0;
}

.navbar-toggler:focus {
	outline: 0 !important;
}

.navbar.scrolled {
	position: fixed;
	width: 100%;
	top: 0;
	transition: .5s ease;
	background: rgba(255,255,255, .99) !important;
	z-index: 9999;
	-webkit-box-shadow: 0 20px 20px -20px rgba(0,0,0,.1);
}

.nav-link {
	padding: .5rem !important;
	position: relative;
	font-weight: bold;
}

.nav-link:after {
	content: '';
	width: 5px;
	height: 5px;
	border-bottom: 5px solid #007bff;
	position: absolute;
	bottom: 0;
	left: 0%;
	right: 50%;
	transition: .5s ease;
	opacity: 0;
}

.nav-link:hover:after {
	left: calc(50% - 2.5px);
	right: calc(50% - 2.5px);
	transition: .5s ease;
	opacity: 1;
}

.to-top {
	height: 48px;
	width: 48px;
	background: rgba(0, 123, 255, .5);
	position: fixed;
	border:0;
	color: #fff;
	right: 1rem;
	bottom: 1rem;
	transform: translateX(100px);
	transition: .5s ease;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
}

.to-top:hover {
	color: #fff;
}

.to-top.scrolled {
	transform: translateX(0px);
	transition: .5s ease;
	-webkit-box-shadow: 0 20px 20px -10px rgba(0,0,0,.1);
}

.dropdown:hover > .dropdown-menu {
	display: block !important;
	animation: .2s nav-dropdown;
	top: 30px;
	-webkit-box-shadow: 0 10px 20px -10px rgba(0,0,0,.1);
}

@keyframes nav-dropdown {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}

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

.navlink-dropdown i {
	transition: .5s ease;
}

.dropdown:hover > .navlink-dropdown i {
	transform: rotate(180deg);
	transition: .5s ease;
}

.nav-drop {
	border:0;
	padding: 1rem;
}

.nav-drop-item {
	padding: .75rem;
	font-size: 14px;
}

.nav-drop-item i {
	transition: .2s ease;
}

.nav-drop-item:hover i {
	transform: translateX(5px);

}

.nav-drop-item:hover {
	background: transparent;
	color: #007bff;
}



/* Content */
.wrapper {
	min-height: 600px;
}

.banner-1 {
	background: url('../img/misc/architect-resume-sample.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.banner-1:before {
	content: '';
	position: absolute;
	width: 2000px;
	height: 100%;
	background: -webkit-linear-gradient(0deg, #fff, rgba(255,255,255,.8));
	top: 0;
	left: 0;
	z-index: -1;
}

.header-title {
	display: flex;
	align-items: center;
	height: 100%;
}

.header-image img {
	height: 400px;
	width: auto;
	object-fit: cover;
}

.banner-2 {
	background: #0779e4;
	padding: 3rem 0;
}

.service-wrapper {
	color: #fff !important;
	padding: 1rem;
	transition: .2s ease;
}

.service-wrapper:hover {
	cursor: default;
	transform: scale(1.02);
}

.banner-3 {
	background: #fff;
	padding: 3rem 0;
}

.reason-wrapper {
	color: #000 !important;
	padding: 1rem 0;
	transition: .2s ease;
}

.banner-4 {
	background: #f7fafc;
	padding: 3rem 0;
}

.banner-4 #title-recent-artikel:before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 1px;
	background: #333;
	top: 50%;
	bottom: 50%;
	margin-right: .5rem;
} 

#title-recent-artikel {
	display: flex;
	align-items: center;
}

.home-blog-wrapper {
	color: #000 !important;
	transition: .2s ease;
	border-radius: 10px;
	display: inline-block;
	cursor: pointer;
}

.home-blog-wrapper img{
	border-radius: 5px;
}

.home-blog-wrapper:hover {
	color: #0779e4 !important;
	transform: scale(1.02);
	text-decoration: none;
}

.banner-5 {
	background: #007bff;
	color: #fff;
	position: relative;
}

.about-outer {
	padding: 3rem 0;
}

.about-img {
	position: absolute;
	bottom: 0;
	right: 50px;
}

.banner-6 {
	padding: 3rem 0;
	text-align: center;
	background: #f5f5f5;
	color: #181818;
}


/* Blog Section */
.blog-wrapper {
	min-height: 600px;
}

.blog-outer {
	padding: 2rem 0;
}

.blog-header {
	padding: 5rem 0;
	position: relative;
	z-index: 1;
	color: #fff;
	background: url('https://dynaimage.cdn.cnn.com/cnn/c_fill,g_auto,w_1200,h_675,ar_16:9/https%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F200416164101-3-underscored-creative-writing-lead.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	min-height: 300px;
	align-items: center;
	display: flex;
}

.blog-header:before {
	content: '';
	position: absolute;
	width: 1000px;
	height: 100%;
	background: -webkit-linear-gradient(0deg, #007bff, transparent);
	top: 0;
	left: 0;
	z-index: -1;
}


.blog-button {
	color: #000 !important;
	transition: .2s ease;
	border-radius: 10px;
	display: inline-block;
	cursor: pointer;
}

.blog-button-img {
	height: 250px;
}

.blog-button-img img{
	border-radius: 5px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-button:hover {
	color: #0779e4 !important;
	transform: scale(1.02);
	text-decoration: none;
}

.blog-content-wrapper {
	position: relative;
	margin-top: -40px;
}

.blog-content {
	border-radius: 5px;
}

.blog-content p {
	opacity: .7;
}

.blog-read-title {
	margin: 2rem 0 1rem 0;
}

.blog-read-wrapper {
	min-height: 600px;
}

.blog-read-image img {
	border-radius: 10px;
	min-width: 100%;
	max-height: 400px;
	object-fit: cover;
}

.blog-read-description p {
	font-size: 16px;
}

.blog-read-side {
	padding: 2rem 1rem;
	background: -webkit-linear-gradient(90deg, transparent, #fafafa);
	border-radius: 5px;
}

.blog-read-side-img img{
	border-radius: 5px;
}


/* Services Section */
.services-header {
	padding: 5rem 0;
	color: #fff;
	position: relative;
	z-index: 1;
	overflow: hidden;
	height:400px;
	align-items: center;
	display: flex;
}

.services-header img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -2;
	position: absolute;
	top: 0;
}

.services-header:before {
	content: '';
	position: absolute;
	width: 1000px;
	height: 100%;
	background: -webkit-linear-gradient(0deg, #007bff, transparent);
	top: 0;
	left: 0;
	z-index: -1;
}

.services-card {
	text-align: center;
	border-radius: 5px;
	background: #fff;
	transition: .5s ease;
	border:1px solid #007bff;
	display: block;
	transition: .2s ease;
}

.services-card:hover {
	text-decoration: none;
	transform: scale(1.025);
	-webkit-box-shadow: 0 20px 20px -10px rgba(0,0,0,.1);
}

.services-card img {
	width: 100%;
	padding: 1.5rem;
}

.services-legend {
	display: flex;
	align-items: center;
}

.services-legend:after {
	content: '';
	display: block;
	width: 100px;
	height: 1px;
	background: #fff;
	margin-left: 1rem;
}

.services-home-wrapper {
	display: block;
	overflow: hidden;
}

.services-home-img {
	height: 400px;
}

.services-home-img img {
	height:400px;
	width: 100%;
	object-fit: cover;
	object-position: center;
}


/* Gallery Section */
.gallery-header {
	padding: 5rem 0;
	color: #fff;
	position: relative;
	z-index: 1;
	overflow: hidden;
	height:400px;
	align-items: center;
	display: flex;
}

.gallery-header img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	z-index: -2;
	position: absolute;
	top: 0;
}

.gallery-header:before {
	content: '';
	position: absolute;
	width: 1000px;
	height: 100%;
	background: -webkit-linear-gradient(0deg, #007bff, transparent);
	top: 0;
	left: 0;
	z-index: -1;
}

.gallery-img-wrapper {
	display: inline-block;
	height:400px;
	text-decoration: none;
	position: relative;
	width: 100%;
}

.gallery-img-wrapper img{
	height:400px;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* Carousel */
.owl-item {
	height: 400px !important;
	object-fit: cover;
}

.owl-item img {
	height: 400px;
	object-fit: cover;
}

/* Footer */
.footer {
	padding: 1rem;
	background: #181818;
	color: #fff;
}

.footer img {
	transform: translateY(-.25rem);
	margin-left: .25rem;
}





/* Error Section */
.oops404 {
	text-align: center;
	overflow: hidden;
}
.oops404 img {
	animation: 5s anim infinite;
}

@keyframes anim {
	0% {
		transform: translateY(-50px);
	}

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

	100% {
		transform: translateY(-50px);
	}
}






@media (min-width: 992px) {
	/* Hover Services min 992px */
	.services-caption {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		color: #fff;
		font-weight: bold;
		font-family: 'poppins', sans-serif;
		font-size: 21px;padding: 2rem;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		opacity: 0;
		transition: .5s ease;
	}

	.services-home-wrapper:hover > .services-home-img .services-caption {
		transition: .5s ease;
		opacity: 1;
	}

	/* Hover Gallery min 992px */
	.gallery-caption {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		color: #fff;
		font-weight: bold;
		font-family: 'poppins', sans-serif;
		font-size: 21px;padding: 2rem;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		opacity: 0;
		transition: .5s;
	}

	.gallery-img:hover > .gallery-caption {
		transition: .5s;
		opacity: 1;

	}
}

@media (max-width: 992px) {
	.navbar-nav {
		text-align: center;
	}

	.navbar-collapse::-webkit-scrollbar {
	  width: 10px;
	}

	.navbar-collapse::-webkit-scrollbar-track {
	  background: #fff;
	}

	.navbar-collapse::-webkit-scrollbar-thumb {
	  background-color: #007bff	 ;
	  border-radius: 5px;
	  border: 3px solid #fff;
	}

	.navbar-collapse {
		overflow-y: auto;
		max-height: 100vh;
	}

	.dropdown-menu {
		box-shadow:none !important;
	}

	.services-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		color: #fff;
		padding: 1rem;
		background: -webkit-linear-gradient(90deg, #000, transparent);
		width: 100%;
	}

	.gallery-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		color: #fff;
		padding: 1rem;
		background: -webkit-linear-gradient(90deg, #000, transparent);
		width: 100%;
	}


}

@media (max-width: 768px) {
	.title-wrapper {
		text-align: center;
	}

	.header-image img {
		height: 250px;
	}

	.banner-5 .about-img {
		display: none;
	}

	.contact-call {
		margin: .5rem 0 !important;
		display: block;
	}

	.gallery-img-wrapper, .gallery-img-wrapper img {
		height: 200px;
	}
}