/***********************************************
Template Name:UIX 
Author URL: https://themeforest.net/user/enventer
Website: www.enventer.com
***********************************************/

/* TABLE OF CONTENTS:
----------------------------------------------------------------

--------------------------------------------------------------

1. Default Theme CSS
    1.1 preloader
    1.2 section heading
    1.3 section margin
2. Header Area CSS
	2.1 main menu
	2.2 sticky menu
	2.3 header image
	2.4 header text
	2.5 header social
3. About Area CSS
	3.1 about image
	3.2 about content
4. Expertise Area CSS
5. Experience Area CSS
	5.1 single experience
	5.2 experience slick button
6. Service Area CSS
	6.1 single service
7. Counter Area CSS
8. Projects Area CSS
	8.1 project filter
	8.2 single project
	8.3  project pagination
9. Projects Area CSS
	9.1 single testimonial
	9.2 testimonial slick dots
10. Blog Area CSS
	10.1 single blog
	10.2 blog content
11. Footer Area CSS
	11.1 contact form
	11.2 copyright text
12. Blog Details Area CSS
	12.1 left widget
	12.2 right widget


--------------------------------------------------------------

--------------------------------------------------------------*/

/*==================== 1. Default Theme CSS ===================*/

html,
body {
	height: 100%;
	font-family: 'Tajawal', sans-serif;
	margin: 0px;
	padding: 0px;
}

::-moz-selection {
	background: #212121;
	color: #fff;
	text-shadow: none;
}

::selection {
	background: #212121;
	color: #fff;
	text-shadow: none;
}

a:focus {
	outline: 0px solid
}

img {
	width: auto;
	height: auto
}

p {
	margin: 0;
	font-size: 19px;
	line-height: 30px;
	color: #212121;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 10px;
}

a {
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	text-decoration: none;
}

a:hover {
	color: #6b6fff;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0 none;
}

ul {
	list-style: outside none none;
	margin: 0;
	padding: 0
}

.default-margin-mt {
	margin-top: 30px
}

#scrollUp {
	bottom: 10px;
	right: 10px;
}

/* 1.1 preloader*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 99999999999999;
	height: 100%;
}

#status {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200px;
	height: 200px;
	padding: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 99999999999999;
}

#status img {
	height: 200px;
	width: 200px;
}

/*1.2 section heading*/

.section-heading-1 h4 {
	font-size: 35px;
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 0;
	color: #FFD15A
}

.section-heading-1 h2 {
	text-transform: capitalize;
	font-weight: 900;
	position: relative;
	font-size: 55px;
	display: inline-block
}

.section-heading-1 h2:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: -15px;
	background-color: #FFD15A;
	height: 8px;
	width: 70px;
}

.section-heading-1 h2::after {
	position: absolute;
	content: '';
	right: -128px;
	bottom: 10px;
	background-image: url(img/heading-pattern.png);
	height: 40px;
	width: 100px;
	background-repeat: no-repeat;
}

.section-heading-1 h2::after {
	-webkit-animation: leftright 3s linear infinite;
	animation: leftright 3s linear infinite;
}

@keyframes leftright {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(-30px, 0px);
	}

	to {
		transform: translate(0, -0px);
	}
}

.section-heading-2 {
	text-align: right
}

.section-heading-2 h4 {
	font-size: 35px;
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 0;
	color: #fff
}

.section-heading-2 h2 {
	text-transform: capitalize;
	font-weight: 900;
	position: relative;
	font-size: 55px;
	display: inline-block;
	color: #FFD15A
}

.section-heading-2 h2:before {
	position: absolute;
	content: '';
	right: 0;
	bottom: -15px;
	background-color: #FFD15A;
	height: 8px;
	width: 70px;
}

.section-heading-2 h2::after {
	position: absolute;
	content: '';
	left: -83px;
	bottom: 10px;
	background-image: url(img/heading-pattern-2.png);
	height: 40px;
	width: 100px;
	background-repeat: no-repeat;
}

.section-heading-2 h2::after {
	-webkit-animation: leftright 3s linear infinite;
	animation: leftright 3s linear infinite;
}

@keyframes leftright {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(-30px, 0px);
	}

	to {
		transform: translate(0, -0px);
	}
}

.section-heading-3 {
	text-align: right
}

.section-heading-3 h4 {
	font-size: 35px;
	text-transform: capitalize;
	font-weight: 700;
	margin-bottom: 0;
	color: #FFD15A
}

.section-heading-3 h2 {
	text-transform: capitalize;
	font-weight: 900;
	position: relative;
	font-size: 55px;
	display: inline-block;
	color: #212121
}

.section-heading-3 h2:before {
	position: absolute;
	content: '';
	right: 0;
	bottom: -15px;
	background-color: #FFD15A;
	height: 8px;
	width: 70px;
}

.section-heading-3 h2::after {
	position: absolute;
	content: '';
	left: -83px;
	bottom: 10px;
	background-image: url(img/heading-pattern.png);
	height: 40px;
	width: 100px;
	background-repeat: no-repeat;
}

.section-heading-3 h2::after {
	-webkit-animation: leftright 3s linear infinite;
	animation: leftright 3s linear infinite;
}

@keyframes leftright {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(-30px, 0px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*1.3 section margin*/
.m-top-30 {
	margin-top: 30px
}

.m-top-15 {
	margin-top: 15px
}

/*=========2. Header Area CSS==========*/
.main-navigation {
	width: 100%;
	background-color: transparent;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
}

.logo-area img {
	width: 180px;
	padding-top: 0;
	transition: .5s;
	padding-bottom: 20px;
}
.logo-area.singl-topic{margin:10px 0 0;}
/*2.1 main menu*/

.main-menu ul li {
	display: inline-block;
	margin-left: 25px;
	position: relative;
}

.main-menu ul li a {
	color: #212121;
	display: inline-block;
	text-transform: capitalize;
	font-size: 20px;
	line-height: 1;
	position: relative;
	font-weight: 700;
	-webkit-transition: .5s;
	transition: .5s;
	padding-top: 60px;
}

.main-menu ul li a:hover {
	color: #505262;
}

.main-menu ul li a:before {
	content: '';
	position: absolute;
	width: 0px;
	height: 3px;
	background-color: #323657;
	left: 0;
	top: 105%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply
}

.main-menu ul li a:after {
	content: '';
	position: absolute;
	width: 0px;
	height: 3px;
	background-color: #323657;
	right: 0;
	top: 105%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply;
	z-index: 999
}

.main-menu ul li a.current:before {
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background-color: #323657;
	left: 0;
	top: 105%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply;

}

.main-menu ul li a.current:after {
	content: '';
	position: absolute;
	width: 50%;
	height: 3px;
	background-color: #323657;
	right: 0;
	top: 105%;
	-webkit-transition: .7s;
	transition: .7s;
	mix-blend-mode: multiply;
	z-index: 9
}

.main-menu ul li a.current {
	color: #323657;
}

.main-menu ul li a:hover:before {
	width: 50%;
	-webkit-transform: translateX(100%);
	transform: translateX(100%)
}

.main-menu ul li a:hover:after {
	width: 50%;
	-webkit-transform: translateX(100%);
	transform: translateX(-100%)
}


.mean-container .mean-nav {
	margin-top: 0;
	background: rgba(50, 54, 87, 0.9);
}

.main-menu ul li i {
	margin-left: 5px
}

#mobile-menu {
	display: block;
}

/*2.2 sticky menu*/
.main-navigation.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99;
	background-color: #FFD15A;
	-webkit-box-shadow: 0px 0px 4px rgba(160, 149, 10, 0.7);
	box-shadow: 0px 0px 50px rgba(160, 149, 10, 0.7);
	-webkit-transition: all 1s ease 0s;
	transition: all 1s ease 0s;
	-webkit-animation: sticky 1s;
	animation: sticky 1s;
}

.main-navigation.sticky .main-menu ul {
	text-align: right
}

.main-navigation.sticky .main-menu ul li a {
	padding-top: 32px
}

.main-navigation.sticky .logo-area img {
	padding-top: 0;
	width: 100px;
	padding-bottom: 10px
}

@-webkit-keyframes sticky {
	0% {
		top: -120px;
	}

	100% {
		top: 0;
	}
}

@keyframes sticky {
	0% {
		top: -120px;
	}

	100% {
		top: 0;
	}
}

/*2.3 header image*/
.header-content-area {
	height: 100vh;
	width: 100%;
	background-color: #FFD15A;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	overflow: hidden;
}

.myself-img {
	position: absolute;
	top:230px;
	right: 150px;
	-webkit-animation: sp 3s linear infinite;
	animation: sp 3s linear infinite;
}
.myself-img img{ width: 100%; display: block; border: 3px solid #000; border-radius: 50%; padding: 10px; }

@keyframes sp {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 40px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*2.4 header text*/
.intro-text {
	text-align: left;
	padding-top: 60px;
}

.intro-text h1 {
	text-transform: uppercase;
	font-size: 45px;
	line-height: 55px;
	color: #212121;
	margin-bottom: 10px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 900
}

.learnmore {
	margin-top: 25px;
	position: relative;
	display: inline-block
}

.learnmore2 {
	position: absolute;
	right: -55px;
	top: 7px;
	z-index: 9 display: inline-block;
}

.learnmore .skill-btn {
	background: #212121;
	-webkit-box-shadow: 0px 1px 26px rgba(41, 147, 34, 0.62);
	box-shadow: 0px 1px 26px rgba(41, 40, 40, 0.62);
	border-radius: 50px;
	text-decoration: none;
	color: #fff;
	text-transform: capitalize;
	display: inline-block;
	padding: 15px 40px;
	-webkit-transition: .5s;
	transition: .5s;
	font-size: 16px;
	font-weight: 700;
}

.skill-btn-youtube i {
	color: #212121;
	font-size: 40px;
	transition: .5s
}

.skill-btn-youtube i:hover {
	color: #fff
}

.learnmore .skill-btn:hover {
	color: #323657;
	background-color: #fff
}

/*2.5 header social*/
.mobile-social-icon {
	padding: 25px 0;
	display: none
}

.mobile-social-icon ul li {
	display: inline-block;
	margin-right: 10px
}

.mobile-social-icon ul li:last-child {
	margin-right: 0
}

.mobile-social-icon a {
	color: #212121;
	font-size: 23px;
}


.social-icon-area {
	position: fixed;
	left: 50px;
	width: 1px;
	height: 65%;
	background-color: #3c3b3b;
	top: 5%;
	z-index: 1;
}

.social-icon {
	position: absolute;
	bottom: -90px;
	left: -9px;
	padding: 20px 0;
}

.social-icon a {
	color: #3c3b3b;
	font-size: 22px;
	margin-bottom: 10px !important;
}

/*===============3. About Area CSS===================*/
.about-us-area {
	padding: 150px 0
}

/*3.1 about image*/
.about-img {
	padding: 0px 30px;
	position: relative;
}

.about-img img {
	border-radius: 25px;
	width: 100%;
}

.about-img a::after, .workstation a::before {
	content: '';
	position: absolute;
	top: -25px;
	left: 5px;
	background-color: #FFF0C9;
	height: 180px;
	width: 180px;
	border-radius: 25px;
	z-index: -1;
}

.about-img a::before, .workstation a::after {
	content: '';
	position: absolute;
	bottom: -25px;
	right: 5px;
	background-color: #FFF0C9;
	height: 180px;
	width: 180px;
	border-radius: 25px;
	z-index: -1;
}

/*3.2 about content*/
.about-content {
	padding-left: 15px;
}

.about-text {
	margin-top: 35px;
}

.about-info {
	margin-top: 20px
}

.about-info span {
	font-weight: 700;
	text-transform: capitalize;
	font-size: 20px
}

/*===========4. Expertise Area CSS============*/
.expertise-area {
	padding: 150px 0;
	background-color: #FFFDF6
}

.singl-topic {
	margin-top: 60px;
	-webkit-animation: updown 3s linear infinite;
	animation: updown 3s linear infinite;
}

.singl-topic p {
	font-weight: 700;
	margin-top: 10px;
	font-size: 20px
}

.workstation {
	text-align: center;
}

.workstation img {
	border-radius: 25px;
	/*padding-left: 65px;*/
	width: 100%;
}


@keyframes updown {
	from {
		transform: scale(1);
	}

	65% {
		transform: scale(1.15);
	}

	to {
		transform: scale(1);
	}
}

/*==============5. Experience Area CSS==============*/
.experience-area {
	padding: 150px 0;
	background-image: url(img/experience.jpg);
	position: relative;
}

.experience-area:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.78);
}

.experience-item-slider {
	margin-top: 75px;
	padding: 0 50px;
}

/*5.1 single experience*/
.single-experience {
	background-color: #fff;
	padding: 40px;
	border-radius: 20px;
	transition: .5s
}

.single-experience:hover {
	background-color: #FFD15A
}

.single-experience h3 {
	/*text-transform: uppercase;*/
	font-weight: 700;
	font-size: 18px
}

.single-experience h4 {
	text-transform: uppercase;
	font-weight: 700
}

.single-experience span {
	font-size: 22px;
	text-transform: capitalize;
}

/*5.2 experience slick button*/
.fas.fa-chevron-left.left-arrow.slick-arrow {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	background-color: #fff;
	color: #212121;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 50%;
	cursor: pointer;
	transition: .5s
}

.fas.fa-chevron-right.right-arrow.slick-arrow {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	background-color: #fff;
	color: #212121;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 50%;
	cursor: pointer;
	transition: .5s
}

.fas.fa-chevron-left.left-arrow.slick-arrow:hover,
.fas.fa-chevron-right.right-arrow.slick-arrow:hover {
	background-color: #FFD15A
}

.slick-current .single-experience {
	background-color: #FFD15A
}

/*================6. Service Area CSS=====================*/
.services-area {
	padding: 150px 0
}

.servive-box {
	margin-top: 45px
}

/*6.1 single service*/
.single-services {
	margin-top: 30px
}

.single-services h4 {
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	;
	margin-top: 30px
}

.single-services img {
	height: 90px
}

/*============7. Counter Area CSS============*/
.portfolio-counter-area {
	background-image: url('img/counter-bg.png');
	padding: 70px 0 100px 0;
	background-size: cover
}

.single-count-area {
	color: #212121;
	text-transform: uppercase;
	margin-top: 30px
}

.single-count-area span {
	font-size: 40px;
	font-weight: 700;
}

.single-count-area strong {
	font-size: 40px;
	font-weight: 700;
	color: #FFD15A
}

.single-count-area p {
	font-size: 20px;
	color: #212121;
	font-weight: 700;
}

/*=============8. Projects Area CSS==============*/
.projects-area {
	padding: 150px 0 75px 0
}

.porjects-h-f {
	margin-bottom: 50px
}

/*8.1 project filter*/

.projects-filter li {
	display: inline-block;
	position: relative;
	padding: 7px 30px;
}

.projects-filter li a {
	display: inline-block;
	color: #212121;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 20px;
}

.projects-filter li.active {
	background-color: #FFD15A;
	border-radius: 20px;
	padding: 7px 30px;
	text-align: center;
	-webkit-transition: 1s;
	transition: .5s;
	box-shadow: 0px 4px 64px #FFEDBF;
}

/*8.2 single project*/
.single-projects {
	position: relative;
	overflow: hidden;
	;
	margin-top: 30px;
	border-radius: 15px;
}

.single-projects img {
	width: 100%;
}

.image-content-area {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -100%;
	left: 0;
	transition: .7s;
	background: linear-gradient(to top, #1C1C1C 0%, rgba(23, 23, 23, 0.815475) 39.37%, rgba(0, 0, 0, 0) 100%);
	border-radius: 15px;
}

.single-projects:hover .image-content-area {
	bottom: 0
}

.hover-text {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.hover-text h4 {
	color: #fff;
	text-transform: uppercase;
	;
	font-size: 24px;
	font-weight: 700
}

.hover-text p {
	color: #fff;
	font-size: 18px;
	line-height: 24px
}

.hover-text a {
	color: #F9A52E;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 19px;
	display: inline-block;
	margin-top: 5px;
	transition: .5s
}

.hover-text a:hover {
	color: #FFD15A
}

/*8.3  project pagination*/
.pagination-area {
	text-align: center;
	margin-top: 75px
}

.pagination-button {
	display: inline-block;
	position: relative
}

.pagination-button span {
	height: 35px;
	width: 35px;
	border: 1px solid #FFD15A;
	display: inline-block;
	border-radius: 50%;
	line-height: 35px;
	margin-right: 25px;
	font-weight: 700;
	cursor: pointer;
	background-color: #fff
}

.pagination-button span.active {
	background-color: #FFD15A
}

.pagination-button::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background: #FFD15A;
	left: 0;
	top: 50%;
	z-index: -1;
	transform: translateY(-50%)
}

.pagination-button span:last-child {
	margin-right: 0
}

/*==========9. Projects Area CSS=========*/
.testimonial-area {
	padding: 150px 0;
	background-color: #FFFDF6
}

/*9.1 single testimonial*/
.single-testimonial {
	margin-top: 75px;
	background-image: url(img/testimonial/qoute.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.client-image {
	width: 30%;
	float: left;
}

.client-image img {
	width: 100%;
	border-radius: 25px
}

.client-comments {
	width: 70%;
	overflow: hidden;
	padding: 0 75px 0 50px
}

.client-comments h4 {
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
}

.client-comments span {
	font-size: 20px;
	font-weight: 700
}

.client-comments p {
	margin-top: 10px
}

/*9.2 testimonial slick dots*/
.slick-dots {
	display: flex;
	justify-content: center;
}

.slick-dots button {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 100%;
	background-color: rgba(0, 0, 0, 0.19);
	text-indent: -9999px;
	margin-right: 6px;
}

.slick-dots li.slick-active button {
	background-color: #212121
}

.slick-dots button:focus {
	outline: none
}

/*=========10. Blog Area CSS==========*/
.blog-area {
	padding: 150px 0
}

.blog-post-area {
	margin-top: 45px
}

/*10.1 single blog*/
.single-blog-post {
	background-color: #fff;
	border-radius: 25px;
	box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.05);
	transition: .5s;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin-top: 30px
}

.single-blog-post::before {
	content: '';
	position: absolute;
	left: 0;
	top: -100%;
	height: 100%;
	width: 100%;
	background-color: #FFFDF6;
	z-index: -1;
	transition: .7s;
	border-radius: 25px;
}

.single-blog-post:hover:before {
	top: 0;
}

.single-blog-post:hover {
	box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.15);
}

.single-blog-post:hover .blog-thumbnail img {
	transform: rotate(15deg) scale(1.4);
	opacity: .8
}

.single-blog-post:hover .blog-post-text a {
	color: #F9A52E
}

.blog-thumbnail {
	overflow: hidden
}

.blog-thumbnail img {
	width: 100%;
	border-radius: 25px 25px 0 0;
	overflow: hidden;
	transition: .9s;
}

/*10.2 blog content*/
.blog-post-text {
	padding: 20px;
}

.blog-post-text h3 {
	font-weight: 700;
	margin-top: 10px;
	font-size: 23px;
	margin-bottom: 0;
	color: #212121
}

.blog-post-text span {
	text-transform: capitalize;
	font-size: 20px;
	display: block;
	margin-bottom: 10px
}

.blog-post-text p {
	font-size: 18px;
	line-height: 24px;
}

.blog-post-text a {
	margin-top: 10px;
	display: inline-block;
	font-weight: 700;
	text-transform: capitalize;
	color: #FFD15A;
	font-size: 20px
}

/*==========11. Footer Area CSS===========*/
.mian-footer {
	background-color: #202224;
	padding: 75px 0;
	margin-top: 75px;
	position: relative;
}

.contact-pattern {
	position: absolute;
	right: 0;
	top: 0;
	-webkit-animation: contact 3s linear infinite;
	animation: contact 3s linear infinite;
}

@keyframes contact {
	from {
		transform: translate(0, 0px);
	}

	65% {
		transform: translate(0, 30px);
	}

	to {
		transform: translate(0, -0px);
	}
}

/*11.1 contact form*/
.contact-form input[type="email"] {
	width: 100%;
	margin-bottom: 30px;
	padding: 17px;
	border-radius: 65px;
	border: none;
}

.contact-form span {
	font-weight: 700;
	font-size: 22px;
	color: #FFD15A;
	display: block;
	margin-bottom: 15px
}

.contact-form textarea {
	width: 100%;
	margin-bottom: 30px;
	padding: 15px;
	border-radius: 15px;
	border: none;
}

.contact-form input[type="button"], .contact-form input[type="submit"] {
	background: #FFD15A;
	box-shadow: 0px 4px 64px rgba(255, 209, 90, 0.15);
	border-radius: 65px;
	padding: 10px 45px;
	border: none;
	text-transform: capitalize;
	font-weight: 700;
	font-size: 20px;
	cursor: pointer;
	transition: .5s
}

.contact-form input[type="button"]:hover, .contact-form input[type="submit"]:hover {
	color: #fff
}

.contact-image {
	position: absolute;
	right: 0;
	bottom: -100px;
}

/*11.2 copyright text*/
.copyright {
	background-color: #2B2D2F;
	padding: 15px 0;
	text-align: center;
	position: relative;
}

.copyright p {
	color: #FFD15A;
}

.copyright a {
	font-weight: 700;
	color: #FFD15A
}

/*=========12. Blog Details Area CSS========*/
.blog-details {
	padding: 60px 0 0 0
}

.details-content-blog {
	height: 45vh;
	width: 100%;
	background-image: url(img/blog/blog-details.jpg);
	overflow: hidden;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background-position: center;
}

.details-content-blog:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 45vh;
	background: rgba(52, 52, 52, 0.58);
}

.details-intro-text h1 {
	color: #fff;
	display: inline-block;
	position: relative;
	font-size: 40px
}

.details-intro-text {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
}

.details-intro-text h1:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -15px;
	width: 50px;
	height: 3px;
	background-color: #FFD15A;
	-webkit-transform: translate(-50%);
	transform: translate(-50%)
}

/*12.1 left widget*/
.left-sidebar {
	padding-right: 30px
}

.left-sidebar img {
	width: 100%;
	margin: 40px 0
}


/*12.2 right widget*/
.right-sidebar h4 {
	color: #212121;
	font-weight: 700;
	font-size: 20px;
	border-bottom: 1px solid rgba(199, 199, 199, 0.28);
	text-transform: capitalize;
	padding-bottom: 20px;
}

.right-sidebar ul li a {
	padding: 10px 0;
	display: inline-block;
	color: #646464;
	font-size: 19px;
	text-transform: capitalize;
}

.right-sidebar ul li a:hover {
	color: #FFD15A
}

.social-icon-blog ul li {
	display: inline-block;
	margin: 0 5px
}
.font-15-biger{
	font-size: 22px;
	font-weight: bolder;
}



/* url changes */
.single-projects:hover > #project1 {
    content: url('../viralmehtaprofile/img/projects/1.gif');
}