/* ================================================== 
*	Version: 1.0.0
*	css code for responsive layout
*	To make Responsive
================================================== */

/* ==================================================
*	1 - media screen and (max-width: 1199px)
*	2 - media screen and (max-width: 991px)
*	3 - media screen and (max-width: 767px)
*	4 - media screen and (max-width: 680px)
*	5 - media screen and (max-width: 480px)
*	6 - media screen and (max-width: 320px)
================================================== */





@media screen and (max-width: 1920px) {
	/* - 0.3 - about-section - start
	================================================== */
	.about-section {padding: 0px 100px;}

/* about-video - start
-------------------------------------------------- */
.about-section .about-video {
	width:30%;
	float: left;
	overflow: hidden;
	border-radius: 3px;
	position: relative;
}
.about-section .about-video img {
	width: 100%;
	height: auto;
}
.about-section .overlay-yellow {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}
.about-section .overlay-yellow a.play-btn {
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 70px;
	height: 70px;
	color: #f26836;
	font-size: 36px;
	line-height: 75px;
	text-align: center;
	position: absolute;
	border-radius: 100%;
	background-color: #ffffff;

	transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);

	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
/* about-video - end
-------------------------------------------------- */



/* about-contant - start
-------------------------------------------------- */
.about-section .about-contant {
	width:70%;
	float: right;
	padding: 5px 40px;
}
.about-section .about-contant h2.title {
	font-size: 42px;
	margin-bottom: 50px;
}
.about-section .about-contant h2>small {
	float: left;
	color: #f26836;
	font-size: 72px;
	font-weight: 700;
	margin-right: 30px;
}
.about-section .about-contant h2>span {
	display: table;
}

.about-section .about-contant .about-tab {
	border-radius: 3px;
	margin-bottom: 50px;
	background-color: #ffffff;
}
.about-section .about-contant .nav-link {
	color: #151515;
	font-size: 16px;
	font-weight: 700;
	padding: 15px 0px;
	position: relative;
	font-family: 'Oxygen', sans-serif;
}

.about-section .about-contant .nav-link:hover:after,
.about-section .about-contant .nav-link.active:after {
	left: 0;
	right: 0;
	content: '';
	width: 100%;
	height: 2px;
	bottom: -2px;
	position: absolute;
	background-color: #f26836;
}
.about-section .about-contant .nav-link:hover,
.about-section .about-contant .nav-link.active {
	background: rgba(255,193,7,0.1);
}
/* about-contant - end
-------------------------------------------------- */
/* - 0.3 - about-section - end
================================================== */



/* - 0.5 - funfact-section - start
================================================== */
.funfact-section {
	padding:80px;
	background-color: #f7f7f7;
}

.funfact-section .funfact-contant {
	width: 53%;
	float: left;
	padding:0px 0px;
	padding-right: 40px;
}
.funfact-section .funfact-contant h2.title-xlarge {font-size:47px;}

.funfact-section .funfact-counter .funfact-item {
	height: auto;
	width: 33.333%;
	text-align: center;
	border-right: 2px dashed #cccccc;
	padding-right:10px;
}

.funfact-section .funfact-counter .funfact-item:last-child {border-right: none;}
.funfact-section .funfact-counter .funfact-item h3 {
	color: #f26836;
	font-size: 52px;
	font-weight: 700;
	margin-bottom: 15px;
}

.funfact-section .funfact-img {
	width: 47%;
	float: right;
}
/* - 0.5 - funfact-section - end
================================================== */



/* - 0.9 - contact-section - start
================================================== */
.contact-section {padding: 0px 100px;}
.contact-section #google-map {
	width: 50%;
	float: left;
	height: 600px;
}
.contact-section .contact-form {
	width: 50%;
	float: right;
	padding-left: 30px;
}
/* - 0.9 - contact-section - end
================================================== */
}



@media screen and (max-width: 1380px) {
	.about-section {padding: 0px 50px;}
	.about-section .about-contant {
		padding: 0px;
		padding-left: 60px;
	}
	.about-section .about-contant h2.title {font-size: 30px;}
	.about-section .about-contant h2>small {font-size: 66px;}

	.funfact-section .funfact-contant {
		padding: 0px;
		padding-right: 30px;
	}
	.funfact-section .funfact-contant h2.title-xlarge {
		font-size: 36px;
		margin-bottom: 30px;
	}

	.contact-section {padding: 0px 50px;}
}




/*  ====================================================================================================
1 - media screen and (max-width: 1199px) - start
==================================================================================================== */

@media screen and (max-width: 1199px) {
	.header-bottom .mainmenu>li>a {padding: 0px 15px;}
	.header-bottom .search-quote-area button {width: 70px;}
	.aminitie-section .aminitie-item {width: 33%;}
	.aminitie-section .aminitie-item h4.title-small {font-size: 18px;}

	.about-section {padding: 0px 15px;}
	.funfact-section {padding: 100px 15px;}

	.contact-section {padding: 0px 15px;}
	.contact-section #google-map {
		width: 100%;
		height: 400px;
		margin-bottom: 30px;
	}
	.contact-section .contact-form {
		width: 100%;
		padding: 0px;
	}

	.partner-section .partner-list li {width: 17.1111%;}

	.aboutv1 .about-section .about-contant h2.title {font-size: 24px;}
	.aboutv1 .about-section .about-contant {padding: 0px;}

	.aboutv1 .funfact-section .funfact-contant h2.title-xlarge {font-size: 30px;}

	.blog-section .blog-item {
		max-width: 370px;
		margin: 0 auto 30px;
	}
	.blog-section .blog-item .blog-img img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.blog-section-v2 .blog-contantv2 {padding: 15px;}
	.blog-section .blog-list .blog-img,
	.blog-section .blog-list .blog-contant {width: 100%;}
	.blog-section .blog-list .blog-img img {width: 100%;}

	.error-contant {max-width: 50%;}

	.personal-details .myservice ul li {
		width: 150px;
		height: 150px;
	}
	.team-contact-section .basic-contact-info ul li small {min-width: 45px;}

	.team-section-v2 .member-img,
	.team-section-v2 .member-contant {
		width: 100%;
		height: auto;
	}
}

/* ====================================================================================================
1 - media screen and (max-width: 1199px) - end
==================================================================================================== */





/* ====================================================================================================
2 - media screen and (max-width: 991px) - start --->>>for medium device
==================================================================================================== */

@media screen and (max-width: 991px) {
	body {padding-top: 84px;}
	.header-section {display: none;}
	.alt-navbar {display: block;}

	.slider-contant {
		margin: 0 auto;
		max-width: 500px;
	}

	.about-section .about-video,
	.about-section .about-contant {width: 100%;}
	.about-section .about-contant {
		padding: 0px;
		margin-top: 30px;
	}

	.funfact-section .funfact-img,
	.funfact-section .funfact-contant {width: 100%;}
	.funfact-section .funfact-contant {
		padding: 0px;
		margin-bottom: 30px;
	}

	.portfolio-section .element-item {width: 50%;}
	.partner-section .partner-list li {width: 29.42%;}

	.footer-bottom .copyright {text-align: left!important;}

	.aboutv1 .about-section .about-contant h2.title {font-size: 18px;}
	.aboutv1 .about-section .about-contant h2>small {
		font-size: 36px;
		margin-right: 15px;
	}

	.sidebar-section {
		max-width: 370px;
		margin: 100px auto 0px;
	}

	.post-mate .hero-img {display: none;}
	.blog-details-section .blockquote {padding: 30px 30px;}
	.blog-details-section .share-links ul {
		float: none;
		width: 100%;
		display: block;
		margin-top: 15px;
		text-align: left!important;
	}
	.blog-section .blog-list .blog-img {width: 40%;}
	.blog-section .blog-list .blog-contant {
		width: 60%;
		padding: 15px 30px;
	}
	.blog-section .blog-list .blog-contant .blog-title {font-size: 18px;}

	.contactv1-section .contact-left,
	.contactv1-section .contact-right {width: 100%;}
	.contactv1-section #google-map {height: 300px;}

	.contactv1-section .basic-info-item,
	.contactv2-section .basic-info-item {margin: 0 auto 30px;}

	.error-contant {padding: 100px 20px;}
	.breadcrumb-section h2.page-title {font-size: 36px;}

	.service-sidebar {
		max-width: 370px;
		margin: 0 auto 50px;
	}
	.team-sidebar {
		padding: 30px;
		margin-bottom: 30px;
	}
	.team-sidebar .member-img {
		max-width: 370px;
		margin: 0 auto 30px;
	}
	.team-testimonial {margin-bottom: 50px;}
	.team-contact-section .basic-contact-info {margin-bottom: 50px;}
	.team-contact-section .basic-contact-info ul li {
		max-width: 370px;
		margin: 0 auto 30px;
	}
	.team-contact-section .basic-contact-info ul li small {min-width: 80px;}

	.team-section-v2 .member-img,
	.team-section-v2 .member-contant {
		width: 48.5%;
		height: 312px;
	}
}

/* ====================================================================================================
2 - media screen and (max-width: 991px) - end --->>>for medium device
==================================================================================================== */





/* ====================================================================================================
3 - media screen and (max-width: 767px) - start --->>>For Mobile Device
==================================================================================================== */

@media screen and (max-width: 767px){}

/* ====================================================================================================
3 - media screen and (max-width: 767px) - end --->>>For Mobile Device
==================================================================================================== */





/* ====================================================================================================
4 - media screen and (max-width: 680px) - start
==================================================================================================== */

@media screen and (max-width: 680px){}

/* ====================================================================================================
4 - media screen and (max-width: 680px) - end
==================================================================================================== */





/* ====================================================================================================
5 - media screen and (max-width: 480px) - start
==================================================================================================== */

@media screen and (max-width: 480px){
	.slider-section .slider-contant h1 {font-size: 30px;}

	.slider-section .overlay-black {padding:80px 0px;}

	.slider-section .slider-number,
	.slider-section .slick-dots {right: 15px;}

	.aminitie-section .aminitie-item {
		width: 100%;
		margin-bottom: 60px;
	}

	.about-section .about-contant h2.title {
		font-size: 18px;
		font-weight: 700;
	}
	.about-section .about-contant h2>small {
		font-size: 36px;
		margin-right: 15px;
	}

	.funfact-section .funfact-contant h2.title-xlarge {font-size: 24px;}
	.funfact-section .funfact-counter .funfact-item h3 {font-size: 30px;}

	.portfolio-section .button-group .button {width: 50%;}
	.portfolio-section .element-item {width: 100%;}
	.portfolio-section .ei-child .contant h3 {font-size: 24px;}

	.partner-section .partner-list {text-align: center;}
	.partner-section .partner-list li {
		float: none;
		width: 300px;
		margin: 0 auto 15px;
	}

	.footer-bottom .social,
	.footer-bottom .copyright,
	.footer-bottom .language-select {text-align: center!important;}
	.footer-bottom .language-select {
		float: none;
		margin: 30px auto 0px;
	}

	.breadcrumb-section {text-align: center;}
	.breadcrumb {
		float: none;
		width: 100%;
		display: table;
		text-align: center;
	}
	.breadcrumb .breadcrumb-item {display: inline-block;}
	.breadcrumb-section .overlay-black {
		padding: 80px 0px;
	}

	.aboutv1 .about-section {padding: 100px 0px;}
	.aboutv1 .about-section .about-contant {margin: 0;}
	.aboutv1 .about-section .about-img {display: none;}
	.aboutv1 .funfact-section .funfact-contant h2.title-xlarge {font-size: 24px;}

	.breadcrumb-section h2.page-title {font-size: 30px;}

	.blog-section .blog-list .blog-img,
	.blog-section .blog-list .blog-contant {width: 100%;}
	.blog-section .blog-list .blog-contant {padding: 15px;}
	.post-mate .hero-img {display: none;}

	.contactv1-section .contact-left .basic-info h2.title-small {text-align: center;}
	.error-contant {
		max-width: 100%;
		padding: 50px 15px;
	}
	.error-contant h1 {font-size: 96px;}
	.blog-section h2.title-xlarge {font-size: 30px;}

	.project-cost ul li span {min-width: 150px;}
	.service-details-section .service-details h2.title-xlarge {font-size: 30px;}

	.personal-details .myservice ul li {margin-bottom: 15px;}
	.team-contact-section .basic-contact-info ul li small {min-width: 50px;}
	.team-section-v2 .member-img,
	.team-section-v2 .member-contant {
		width: 100%;
		height: auto;
	}
}

/* ====================================================================================================
5 - media screen and (max-width: 480px) - end
==================================================================================================== */





/* ====================================================================================================
6 - media screen and (max-width: 320px) - start
==================================================================================================== */

@media screen and (max-width: 320px){
	.slider-section .slider-contant {text-align: center;}
	.slider-section .overlay-black {padding: 115px 0px;}
	.slider-section .slider-contant h1 {font-size: 24px;}

	.about-section .about-contant h2.title {font-size: 16px;}
	.about-section .about-contant h2>small {font-size: 30px;}
	.about-section .about-contant .nav-link {font-size: 14px;}

	.testimonial-section h2.title-xlarge {font-size: 30px;}

	.blog-section .blog-item .blog-contant .blog-title {font-size: 18px;}
	.aboutv1 .about-section .about-contant h2.title {font-size: 16px;}
	.aboutv1 .about-section .about-contant h2>small {font-size: 30px;}
	.blog-section-v2 .blog-contantv2 .post-mate li {margin-right: 25px;}
	.service-sidebar .cost-calculator h2,
	.service-sidebar .download-links h2 {font-size: 18px;}
	.download-links .custom-btn {padding: 10px 5px;}
	.servicev1 .service-section .service-item .service-title > a {font-size: 16px;}
	.servicev2 .service-section .service-item .service-contant > a.title-small {font-size: 18px;}
	.servicev2 .service-section .service-item .service-img img {height: 100%;}

	.servicev2 .service-section .service-item span {
		top: -30px;
		width: 60px;
		height: 60px;
		line-height: 55px;
	}

	.team-sidebar {padding: 15px;}
	.team-contact-section .basic-contact-info ul li {
		padding: 15px;
		padding-left: 35px;
	}
	.team-contact-section .basic-contact-info ul li .icon {
		left: -20px;
		width: 40px;
		height: 40px;
		font-size: 18px;
		line-height: 40px;
	}
}

/* ====================================================================================================
6 - media screen and (max-width: 320px) - end
==================================================================================================== */