/* ================================================== 
*	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)
================================================== */





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

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

	/* header-section - start
	-------------------------------------------------- */
	.header-section {padding: 50px;}
	.header-section .contact {padding: 0px 0px;}
	.header-section .contact li.contact-number {
		display: block;
		margin-right: 0px;
		padding-right: 0px;
		border-right: none;
	}
	/* header-section - end
	-------------------------------------------------- */



	/* footer-section - start
	-------------------------------------------------- */
	.footer-top .ftr-col5 {
		width: 33%;
		margin-bottom: 30px;
	}
	/* footer-section - end
	-------------------------------------------------- */



	/* right-sidebar-section - start
	-------------------------------------------------- */
	.right-sidebar-section {padding-left: 0px;}
	/* right-sidebar-section - end
	-------------------------------------------------- */



	/* home page - start
	-------------------------------------------------- */
	.service-section {padding: 0;}
	.service-area {
		left: 0;
		right: 0;
		top: unset;
		padding: 30px;
		position: unset;
		background-color: #ffffff;
		transform: unset;
		-o-transform: unset;
		-ms-transform: unset;
		-moz-transform: unset;
		-webkit-transform: unset;
	}

	.service-contant.overlay-black p,
	.service-contant.overlay-black h3.title-small {margin-bottom: 15px;}
	.service-contant.overlay-black h3.title-small {font-size: 16px;}
	.service-area .service .service-contant {padding: 30px;}
	.service-area .service:hover .service-contant {padding: 15px;}

	.recent-projects-section .owl-carousel .owl-nav .owl-prev,
	.recent-projects-section .owl-carousel .owl-nav .owl-next {height: 408px;}
	.recent-projects-carousel .projects .projects-contant {padding: 270px 25px 25px 25px;}
	.recent-projects-carousel .projects:hover .projects-contant {padding: 220px 25px 25px 25px;}

	.testimonial-section {padding: 0px;}
	.testimonial-carousel .item {padding: 0px 100px;}
	.testimonial-carousel {margin-bottom: 50px;}

	.latest-news-section .latest-news-contant h3.title-small {font-size: 18px;}
	.latest-news-section .latest-news-contant {padding: 205px 25px 25px 25px;}
	.latest-news-section .latest-news:hover .latest-news-contant {padding: 160px 25px 25px 25px;}
	/* home page - end
	-------------------------------------------------- */



	/* about page - start
	-------------------------------------------------- */
	.section-title h2 {font-size: 24px;}
	/* about page - end
	-------------------------------------------------- */



	/* blog-section - start
	-------------------------------------------------- */
	.blog-section .element-item {width: 50%;}
	.blog-section .element-item .element-contant {padding: 350px 25px 25px 25px;}
	.blog-section .element-item:hover .element-contant {padding: 300px 25px 25px 25px;}
	/* blog-section - end
	-------------------------------------------------- */



	/* contact page - start
	-------------------------------------------------- */
	.contact-form-area .contact-form {position: unset;}
	/* contact page - end
	-------------------------------------------------- */



	/* portfolio page - start
	-------------------------------------------------- */
	.portfolio-section .element-item .element-contant {padding: 235px 25px 25px 25px;}
	.portfolio-section .element-item:hover .element-contant {padding: 185px 25px 25px 25px;}
	/* portfolio page - end
	-------------------------------------------------- */
}

/* ====================================================================================================
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) {

	.section-title {margin-bottom: 60px;}

	/* header-section - start
	-------------------------------------------------- */
	.header-section {padding: 30px;}
	.header-section .contact {width: 50%;}
	.header-section .main-menu {
		width: 20%;
		padding: 0px 0px;
	}
	.header-section .brand-logo {width: 30%;}

	.header-section .search-body,
	.header-section .menu-body {padding: 200px 30px;}
	.header-section .search-body input.search-input {
		font-size: 42px;
		letter-spacing: 8px;
	}
	/* header-section - end
	-------------------------------------------------- */



	/* footer-section - start
	-------------------------------------------------- */
	.footer-top,
	.footer-section .gradient-tb-white {padding: 50px 0px;}
	.footer-top {
		padding-left: 30px;
		padding-right: 30px;
	}
	.footer-top .ftr-col5 {width: 50%;}
	/* footer-section - end
	-------------------------------------------------- */



	/* breadcrumb-section - start
	-------------------------------------------------- */
	h2.breadcrumb-title {font-size: 24px;}
	.breadcrumb {padding-top: 45px;}
	/* breadcrumb-section - end
	-------------------------------------------------- */



	/* lamsum-section - start
	-------------------------------------------------- */
	.lamsum-section {
		padding-left: 30px;
		padding-right: 30px;
	}
	/* lamsum-section - end
	-------------------------------------------------- */



	/* right-sidebar-section - start
	-------------------------------------------------- */
	.right-sidebar-section {
		margin: 0 auto;
		max-width: 360px;
		padding: 50px 0px;
	}
	/* right-sidebar-section - end
	-------------------------------------------------- */



	/* home page - start
	-------------------------------------------------- */
	.service-section .service-area .service {
		max-width: 340px;
		margin: 0 auto 30px;
	}

	.recent-projects-carousel .projects .projects-contant {padding: 330px 25px 25px 25px;}
	.recent-projects-carousel .projects:hover .projects-contant {padding: 280px 25px 25px 25px;}
	.recent-projects-section .owl-carousel .owl-nav .owl-prev,
	.recent-projects-section .owl-carousel .owl-nav .owl-next {height: 470px;}

	.service-showcase-section {background: #f5f5f5;}
	.service-showcase-section .service {
		max-width: 390px;
		margin: 0 auto 30px;
	}

	.testimonial-section .overlay-black .small-line {display: none;}
	.testimonial-carousel .item {padding: 0px 50px;}
	.testimonial-section ul.partners li.partner {width: 33%;}

	.latest-news-section .latest-news {
		max-width: 360px;
		margin: 0 auto 30px;
	}
	.latest-news-section .latest-news-contant {padding: 270px 25px 25px 25px;}
	.latest-news-section .latest-news:hover .latest-news-contant {padding: 225px 25px 25px 25px;}

	#google-map {
		left: unset;
		z-index: 1;
		height: 400px;
		bottom: unset;
		position: unset;
		transform: unset;
		-o-transform: unset;
		-ms-transform: unset;
		-moz-transform: unset;
		-webkit-transform: unset;
	}
	/* home page - end
	-------------------------------------------------- */



	/* about page - start
	-------------------------------------------------- */
	.funfact-contant {padding: 60px 0px 0px 0px;}
	.recent-projects-section2 .owl-theme .owl-nav {top: -100px;}
	.recent-projects-section2 .service {text-align: center;}
	/* about page - end
	-------------------------------------------------- */



	/* blog-section - start
	-------------------------------------------------- */
	.blog-section .element-item .element-contant {padding: 240px 25px 25px 25px;}
	.blog-section .element-item:hover .element-contant {padding: 190px 25px 25px 25px;}
	/* blog-section - end
	-------------------------------------------------- */



	/* blog-details-section - start
	-------------------------------------------------- */
	.blog-details-section .tag-list {margin-bottom: 15px;}
	.blog-details-section .tag-list,
	.blog-details-section .share-links {
		text-align: left;
	}
	/* blog-details-section - end
	-------------------------------------------------- */



	/* contact page - start
	-------------------------------------------------- */
	.contact-page .map-section {padding: 0px 30px;}

	.contact-page .location,
	.contact-page .mail-address,
	.contact-page .contact-number {
		max-width: 290px;
		text-align: center;
		margin: 0 auto 30px;
	}
	.contact-page .contact-links {
		margin-bottom: 50px;
		text-align: center;
	}
	/* contact page - end
	-------------------------------------------------- */



	/* portfolio page - start
	-------------------------------------------------- */
	.portfolio-section .element-item {width: 50%;}
	.portfolio-section .element-item .element-contant {padding: 300px 25px 25px 25px;}
	.portfolio-section .element-item:hover .element-contant {padding: 250px 25px 25px 25px;}
	/* portfolio page - end
	-------------------------------------------------- */



	/* error404 page - start
	-------------------------------------------------- */
	.error404-section {
		padding: 0px;
		padding-bottom: 150px;
	}
	.error404-contant {
		left: unset;
		bottom: unset;
		position: unset;
		padding-top: 0px;
		transform: unset;
		transform: unset;
		-o-transform: unset;
		-ms-transform: unset;
		-moz-transform: unset;
		-webkit-transform: unset;
	}
	/* error404 page - end
	-------------------------------------------------- */
}

/* ====================================================================================================
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){

	.section-title h2 {font-size: 18px;}

	/* header-section - start
	-------------------------------------------------- */
	.header-section {padding: 15px;}
	.header-section .contact {display: block;}
	.header-section .main-menu,
	.header-section .brand-logo {width: 50%;}
	.header-section .main-menu {padding-top: 12px;}
	.header-section .main-menu li {
		font-size: 24px;
		margin-right: 15px;
	}

	.header-section .menu-body {padding: 200px 15px;}
	.header-section .search-body input.search-input {
		font-size: 24px;
		letter-spacing: 5px;
	}
	/* header-section - end
	-------------------------------------------------- */



	/* footer-section - start
	-------------------------------------------------- */
	.footer-top .ftr-col5 {
		width: 100%;
	}
	.footer-top {
		padding-left: 15px;
		padding-right: 15px;
	}
	.footer-bottom .copyright,
	.footer-bottom .contact {text-align: center;}
	/* footer-section - end
	-------------------------------------------------- */



	/* breadcrumb-section - start
	-------------------------------------------------- */
	.breadcrumb-section {padding-top: 230px;}
	h2.breadcrumb-title,
	.breadcrumb {text-align: center;}
	/* breadcrumb-section - end
	-------------------------------------------------- */



	/* lamsum-section - start
	-------------------------------------------------- */
	.lamsum-section {
		padding-left: 15px;
		padding-right: 15px;
	}
	/* lamsum-section - end
	-------------------------------------------------- */



	/* home page - start
	-------------------------------------------------- */
	.slider-section .gradient-bt-white {
		padding: 200px 0px;
		text-align: center;
	}
	.slider-section h1.slider-title {font-size: 18px;}

	.recent-projects-section .section-title {position: relative;}
	.recent-projects-section .section-title a.custom-btn2 {
		right: 0;
		margin: 0;
		bottom: -45px;
		position: absolute;
	}
	.recent-projects-carousel .projects .projects-contant {padding: 320px 25px 25px 25px;}
	.recent-projects-carousel .projects:hover .projects-contant {padding: 270px 25px 25px 25px;}

	.testimonial-section ul.partners li.partner {width: 50%;}

	.latest-news-section .section-title {position: relative;}
	.latest-news-section .section-title a.custom-btn2 {
		right: 0;
		margin: 0;
		bottom: -45px;
		position: absolute;
	}
	.latest-news-section .latest-news-contant {padding: 240px 25px 25px 25px;}
	.latest-news-section .latest-news:hover .latest-news-contant {padding: 195px 25px 25px 25px;}

	.map-section {padding-top: 0px;}
	/* home page - end
	-------------------------------------------------- */



	/* about page - start
	-------------------------------------------------- */
	.about-section .about-contant {padding: 30px 0px;}
	.recent-projects-section2 .owl-theme .owl-nav {
		left: 0;
		top: 60px;
	}
	.recent-projects-section2 .owl-nav .owl-prev {position: absolute; left: 0;}
	.recent-projects-section2 .owl-nav .owl-next {position: absolute; right: 0;}
	/* about page - end
	-------------------------------------------------- */



	/* blog-details-section - start
	-------------------------------------------------- */
	.blog-details-section {padding: 50px 0px;}
	.blog-details-section h2.blog-title {font-size: 16px;}
	.blog-details-section blockquote {margin: 100px 0px;}
	.blog-details-section blockquote span {
		left: 0px;
		top: -50px;
	}
	/* blog-details-section - end
	-------------------------------------------------- */



	/* contact page - start
	-------------------------------------------------- */
	.contact-page .map-section {padding: 0px 15px;}
	/* contact page - end
	-------------------------------------------------- */



	/* portfolio page - start
	-------------------------------------------------- */
	.portfolio-section .button-group,
	.blog-section .button-group {
		width: 100%;
		display: table;
	}
	.portfolio-section .button-group .button,
	.blog-section .button-group .button {
		width: 45%;
		margin: 5px;
		padding: 5px 10px;
		background-color: #f5f5f5;
	}
	.portfolio-section .element-item,
	.blog-section .element-item {width: 100%;}
	/* portfolio page - end
	-------------------------------------------------- */



	/* error404 page - start
	-------------------------------------------------- */
	.error404-section h2.big-title {
		font-size: 100px;
		letter-spacing: 10px;
		text-shadow: 0px 0px 15px rgba(0,0,0,0.3);
	}
	.error404-section h3.title-xlarge {font-size: 30px;}
	.error404-section h4.title-xsmall {font-size: 14px;}
	/* error404 page - end
	-------------------------------------------------- */
}



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

	.blog-section .element-item .element-contant {padding: 280px 25px 25px 25px;}
	.blog-section .element-item:hover .element-contant {padding: 230px 25px 25px 25px;}
	.blog-section .element-item .element-contant h3.title-small {font-size: 24px;}

	.portfolio-section .element-item .element-contant {padding: 350px 25px 25px 25px;}
	.portfolio-section .element-item:hover .element-contant {padding: 300px 25px 25px 25px;}

	.recent-projects-carousel .projects .projects-contant {padding: 330px 25px 25px 25px;}
	.recent-projects-carousel .projects:hover .projects-contant {padding: 285px 25px 25px 25px;}

	.latest-news-section .latest-news-contant {padding: 270px 25px 25px 25px;}
	.latest-news-section .latest-news:hover .latest-news-contant {padding: 225px 25px 25px 25px;}
}



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

	.blog-section .element-item .element-contant {padding: 240px 25px 25px 25px;}
	.blog-section .element-item:hover .element-contant {padding: 190px 25px 25px 25px;}
	.blog-section .element-item .element-contant h3.title-small {font-size: 24px;}

	.portfolio-section .element-item .element-contant {padding: 300px 25px 25px 25px;}
	.portfolio-section .element-item:hover .element-contant {padding: 250px 25px 25px 25px;}

	.latest-news-section .latest-news-contant {padding: 255px 25px 25px 25px;}
	.latest-news-section .latest-news:hover .latest-news-contant {padding: 210px 25px 25px 25px;}
}



@media screen and (max-width: 360px){
	.blog-section .element-item .element-contant {padding: 245px 25px 25px 25px;}
	.blog-section .element-item:hover .element-contant {padding: 195px 25px 25px 25px;}
	.blog-section .element-item .element-contant h3.title-small {font-size: 18px;}

	.portfolio-section .element-item .element-contant {padding: 280px 25px 25px 25px;}
	.portfolio-section .element-item:hover .element-contant {padding: 230px 25px 25px 25px;}

	.recent-projects-carousel .projects .projects-contant {padding: 320px 25px 25px 25px;}
	.recent-projects-carousel .projects:hover .projects-contant {padding: 270px 25px 25px 25px;}

	.latest-news-section .latest-news-contant {padding: 240px 25px 25px 25px;}
	.latest-news-section .latest-news:hover .latest-news-contant {padding: 195px 25px 25px 25px;}
}

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





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

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

	/* header-section - start
	-------------------------------------------------- */
	.header-section .main-menu {padding-top: 0px;}
	.header-section .search-body input.search-input {
		font-size: 18px;
		letter-spacing: 3px;
	}
	/* header-section - end
	-------------------------------------------------- */



	/* breadcrumb-section - start
	-------------------------------------------------- */
	h2.breadcrumb-title {font-size: 18px;}
	.breadcrumb-section {padding-top: 200px;}
	/* breadcrumb-section - end
	-------------------------------------------------- */



	/* home page - start
	-------------------------------------------------- */
	.service-area {padding: 0px;}

	.recent-projects-carousel .projects .projects-contant {padding: 270px 25px 25px 25px;}
	.recent-projects-carousel .projects:hover .projects-contant {padding: 220px 25px 25px 25px;}

	.testimonial-carousel .item {padding: 0px 20px;}
	.testimonial-section ul.partners li.partner {width: 100%;}

	.latest-news-section .latest-news-contant {padding: 200px 25px 25px 25px;}
	.latest-news-section .latest-news:hover .latest-news-contant {padding: 155px 25px 25px 25px;}
	/* home page - end
	-------------------------------------------------- */



	/* blog-section - start
	-------------------------------------------------- */
	.blog-section .element-item .element-contant {padding: 200px 25px 25px 25px;}
	.blog-section .element-item:hover .element-contant {padding: 155px 25px 25px 25px;}
	.blog-section .element-item .element-contant h3.title-small {font-size: 18px;}
	/* blog-section - end
	-------------------------------------------------- */



	/* portfolio page - start
	-------------------------------------------------- */
	.portfolio-section .element-item .element-contant {padding: 230px 25px 25px 25px;}
	.portfolio-section .element-item:hover .element-contant {padding: 180px 25px 25px 25px;}
	/* portfolio page - end
	-------------------------------------------------- */
}

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