@charset "utf-8";
/* CSS Document */

/* Table of Contents
---------------------------------------------------
	1. Mobile
	2. iPad
	3. desktop
	4. Other
*/
.nav-mobile{display: none;}
/* 1. Mobile 
---------------------------------------------------*/
@media (max-width: 640px){	
	.container{max-width: 100%; padding: 0 15px;}
	img{max-width: 100%;}
	h1{font-size: 20px;}
	h2{font-size: 20px;}
	header{height: 60px;}
	header .logo{width: 90px;}
	header nav{display: none;}
	header .contact-number{display: none;}
	.banner{margin-top: 60px;}
	.banner .iteam{height: 350px;}
	.banner .iteam .banner-caption .text-caption{padding: 30px 35px;}
	.banner-caption .title{font-size: 20px;}
	.banner-caption p{font-size: 16px;}
	.banner .slick-arrow{width: 25px; padding: 0; height: 26px;}
	.banner .slick-prev{left: 10px; background-size: 25px;}
	.banner .slick-next{right: 10px; background-size: 25px;}
	.banner .slick-dots{bottom: 70px;}
	.banner .iteam .banner-caption .btn-more{bottom: 20px; font-size: 14px; padding: 8px 12px;}
	.our-service-block{padding: 30px 0;}
	.our-service-block h1{margin-bottom: 20px;}
	.our-service-block .contnt-block .left{padding: 0; max-width: 100%; margin-bottom: 30px;}
	.contnt-block .left .listing-service ul{padding-right: 0; max-width: 100%;}
	.contnt-block .left .listing-service ul li{padding-left: 20px; padding-bottom: 5px;}
	.contnt-block .left .listing-service ul li:before{width: 8px; height: 8px; top: 5px;}
	.contnt-block .left .btn-quote{padding: 7px 18px; font-size: 13px; border-width: 1px;}
	.contnt-block .left p{line-height: 1.2;}
	.contnt-block .left p br{display: none;}
	.our-service-block .contnt-block .right{max-width: 100%;}
	.recent-project-block{padding: 30px 0;}
	.recent-project-block .text-caption{padding-left: 0;}
	.recent-project-block .text-caption p{line-height: 1.2;}
	.recent-project-block .text-caption p br{display: none;}
	.recent-project-block .text-caption .btn-view{padding: 6px 18px; font-size: 13px; border-width: 1px; letter-spacing: 0;}
	.our-client{padding: 30px 0 70px;}
	.our-client h2{margin-bottom: 10px;}
	.our-client .dots{margin-bottom: 15px;}
	.client-slider{max-width: 90%;}
	.client-slider .iteam .block{margin-bottom: 20px;}
	.client-slider .slick-arrow{padding: 0; width: 25px; height: 26px;}
	.client-slider .slick-next{background-size: 25px; right: -10px;}
	.client-slider .slick-prev{background-size: 25px; left: -10px;}
	.footer-main{padding: 20px 0;}
	.footer-main .container{max-width: 100%;}
	.footer-main:before{border-width: 0 70px 25px 70px; top: -24px;}
	.footer-main .contact-form{max-width: 100%; margin-bottom: 30px;}
	.footer-main .contact-detail{max-width: 100%;}
	.footer-main h4{font-size: 20px;}
	.footer-main .contact-detail .block{margin-bottom: 0;}
	.footer-main .contact-detail p{font-size: 14px; line-height: 20px;}
	.footer-main .contact-detail .block h5{font-size: 16px; margin-bottom: 15px;}
	.contact-form .input-field input{height: 35px;}
	.contact-form .input-field .submit{font-size: 14px; height: 40px; border-width: 2px; padding: 5px;}
	.footer-copyright .copyright-text{float: none; text-align: center; display: block; margin-bottom: 10px;}
	.footer-copyright .copyright-text p{line-height: 1.2}
	.footer-copyright .abn{float: none; display: block; text-align: center;}
	.inner-heading{padding: 50px 0;}
	.inner-banner{margin-top: 60px;}
	.inner-heading h1{font-size: 22px;}
	.inner-heading h2{font-size: 22px;}
	.team-member-block{padding: 40px 0;}
	.team-member-block p{line-height: 20px; font-size: 14px;}
	.history-description{padding: 40px 0;}
	.team-member .block{max-width: 220px; float: none; display: inline-block; margin: 0 5px; margin-bottom: 20px;}
	.team-member .block:last-child{margin: 0 5px;}
	.team-member .block .name p{font-size: 14px; line-height: 20px;}
	.history-description .text-caption{margin-right: 0; max-width: 100%;}
	.history-description .img-block{max-width: 100%; padding-top: 0px; margin-bottom: 20px;}
	.history-description .text-caption p{line-height: 20px; font-size: 14px;}
	.history-description .btn-quote{padding: 7px 18px; font-size: 13px; border-width: 1px;}
	.display-product-block{padding: 30px 0;}
	.display-product-block p{line-height: 20px; font-size: 14px;}
    .display-product-block .listing-product .block{margin-bottom: 10px; /*max-width: inherit;*/ max-width: calc(100% - 64px);}
	.gallery-listing-block{padding: 30px 0;}
	.gallery-listing-block .container{max-width: 100%;}
	.gallery-listing-block .block{margin: 0 15px; margin-bottom: 30px;}
    .gallery-section h4{ margin-left: auto; text-align: center;}
	#map{height: 300px;}
}

@media (min-width: 641px) and (max-width:767px) {	
	.container{max-width: 100%; padding: 0 15px;}
	img{max-width: 100%;}
	h1{font-size: 24px;}
	h2{font-size: 24px;}
	header{height: 60px;}
	header .logo{width: 90px;}
	header nav{display: none;}
	header .contact-number{display: none;}
	.banner{margin-top: 60px;}
	.banner .iteam{height: 400px;}
	.banner .iteam .banner-caption .text-caption{padding: 20px 0;}
	.banner-caption .title{font-size: 26px;}
	.banner-caption p{font-size: 20px;}
	.banner .slick-arrow{width: 25px; padding: 0; height: 26px;}
	.banner .slick-prev{left: 10px; background-size: 25px;}
	.banner .slick-next{right: 10px; background-size: 25px;}
	.banner .slick-dots{bottom: 70px;}
	.banner .iteam .banner-caption .btn-more{bottom: 20px; font-size: 14px; padding: 8px 12px;}
	.our-service-block{padding: 40px 0;}
	.our-service-block h1{margin-bottom: 30px;}
	.our-service-block .contnt-block .left{padding: 0 20px 0 0; max-width: 65%;}
	.contnt-block .left .listing-service ul li{padding-left: 20px;}
	.contnt-block .left .btn-quote{padding: 10px 18px; font-size: 14px; border-width: 2px;}
	.contnt-block .left p{line-height: 1.2;}
	.contnt-block .left p br{display: none;}
	.contnt-block .left .listing-service ul{padding-right: 30px; max-width: 100%;}
	.our-service-block .contnt-block .right{max-width: 35%;}
	.recent-project-block{padding: 40px 0;}
	.recent-project-block .text-caption{padding-left: 10px;}
	.recent-project-block .text-caption p{line-height: 1.5;}
	.recent-project-block .text-caption .btn-view{padding: 8px 18px; font-size: 14px; border-width: 2px;}
	.our-client{padding: 40px 0 70px;}
	.our-client h2{margin-bottom: 10px;}
	.our-client .dots{margin-bottom: 15px;}
	.client-slider{max-width: 90%;}
	.client-slider .iteam .block{margin-bottom: 20px;}
	.client-slider .slick-arrow{padding: 0; width: 25px; height: 26px;}
	.client-slider .slick-next{background-size: 25px; right: -30px;}
	.client-slider .slick-prev{background-size: 25px; left: -30px;}
	.footer-main{padding: 20px 0;}
	.footer-main .container{max-width: 100%;}
	.footer-main:before{border-width: 0 100px 35px 100px; top: -34px;}
	.footer-main .contact-form{max-width: 47%;}
	.footer-main .contact-detail{max-width: 47%;}
	.footer-main h4{font-size: 22px;}
	.footer-main .contact-detail .block{margin-bottom: 0;}
	.footer-main .contact-detail p{font-size: 14px; line-height: 20px;}
	.footer-main .contact-detail .block h5{font-size: 18px; margin-bottom: 15px;}
	.contact-form .input-field input{height: 35px;}
	.contact-form .input-field .submit{font-size: 14px; height: 40px; border-width: 2px; padding: 5px;}
	.inner-heading{padding: 50px 0;}
	.inner-banner{margin-top: 60px;}
	.inner-heading h1{font-size: 24px;}
	.inner-heading h2{font-size: 24px;}
	.team-member-block{padding: 50px 0;}
	.team-member-block p{line-height: 20px;}
	.history-description{padding: 50px 0;}
	.team-member .block{max-width: 190px; float: none; display: inline-block; margin: 0 5px; margin-bottom: 20px;}
	.team-member .block:last-child{margin: 0 5px;}
	.team-member .block .name p{font-size: 16px;}
	.history-description .text-caption{margin-right: 20px;}
	.history-description .img-block{max-width: calc(50% - 20px); padding-top: 0px;}
	.history-description .text-caption p{line-height: 22px;}
	.history-description .btn-quote{padding: 10px 18px; font-size: 14px; border-width: 2px;}
	.display-product-block{padding: 40px 0;}
	.display-product-block p{line-height: 22px;}
	.gallery-listing-block{padding: 50px 0;}
	.gallery-listing-block .container{max-width: 100%;}
	.gallery-listing-block .block{margin: 0 15px; margin-bottom: 40px; max-width: 28%;}
    .gallery-section h4{ margin-left: auto; text-align: center;}
	#map{height: 350px;}
	.display-product-block .listing-product .block{max-width: inherit;}
}

/* 2. iPad
---------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {	
	.container{max-width: 100%; padding: 0 15px;}
	img{max-width: 100%;}
	h1{font-size: 28px;}
	h2{font-size: 28px;}
	header{height: 60px;}
	header .logo{width: 110px;}
	header nav{display: none;}
	header .contact-number{display: none;}
	.banner{margin-top: 60px;}
	.banner .iteam{height: 600px;}
	.banner .iteam .banner-caption .text-caption{padding: 30px 0;}
	.banner-caption .title{font-size: 35px;}
	.banner-caption p{font-size: 25px;}
	.banner .slick-prev{left: 20px; background-size: 40px;}
	.banner .slick-next{right: 20px; background-size: 40px;}
	.banner .slick-dots{bottom: 100px;}
	.banner .iteam .banner-caption .btn-more{bottom: 30px;}
	.our-service-block{padding: 50px 0;}
	.our-service-block h1{margin-bottom: 40px;}
	.our-service-block .contnt-block .left{padding: 0 20px 0 0; max-width: 70%;}
	.contnt-block .left .listing-service ul li{padding-left: 20px;}
	.contnt-block .left .btn-quote{padding: 12px 25px;}
	.contnt-block .left p{line-height: 1.5;}
	.contnt-block .left .listing-service ul{padding-right: 30px;}
	.our-service-block .contnt-block .right{max-width: 30%;}
	.recent-project-block{padding: 40px 0;}
	.recent-project-block .text-caption{padding-left: 30px;}
	.recent-project-block .text-caption p{line-height: 1.5;}
	.recent-project-block .text-caption .btn-view{padding: 12px 25px;}
	.our-client{padding: 50px 0 80px;}
	.our-client h2{margin-bottom: 10px;}
	.our-client .dots{margin-bottom: 15px;}
	.client-slider{max-width: 90%;}
	.client-slider .iteam .block{margin-bottom: 20px;}
	.client-slider .slick-arrow{padding: 0; width: 40px;}
	.client-slider .slick-next{background-size: 35px; right: -30px;}
	.client-slider .slick-prev{background-size: 35px; left: -30px;}
	.footer-main{padding: 30px 0 30px;}
	.footer-main .container{max-width: 100%;}
	.footer-main:before{border-width: 0 100px 35px 100px; top: -34px;}
	.footer-main .contact-form{max-width: 47%;}
	.footer-main .contact-detail{max-width: 47%;}
	.inner-heading{padding: 60px 0;}
	.inner-banner{margin-top: 60px;}
	.inner-heading h1{font-size: 28px;}
	.inner-heading h2{font-size: 28px;}
	.team-member-block{padding: 60px 0;}
	.team-member-block p{line-height: 22px;}
	.history-description{padding: 60px 0;}
	.team-member .block .name p{font-size: 16px;}
	.history-description .text-caption{margin-right: 30px;}
	.history-description .img-block{max-width: calc(50% - 30px); padding-top: 30px;}
	.history-description .text-caption p{line-height: 22px;}
	.history-description .btn-quote{padding: 12px 25px;}
	.display-product-block{padding: 50px 0;}
	.display-product-block p{line-height: 22px;}
	.gallery-listing-block{padding: 60px 0;}
	.gallery-listing-block .container{max-width: 100%;}
	.gallery-listing-block .block{margin: 0 15px; margin-bottom: 40px;}
    .gallery-section h4{ margin-left: auto; text-align: center;}
	#map{height: 400px;}
}

/* 3. desktop 
---------------------------------------------------*/
@media (min-width:1024px) and (max-width:1199px) {	
	.container{max-width: 100%; padding: 0 15px;}
	img{max-width: 100%;}
	h1{font-size: 34px;}
	h2{font-size: 34px;}
	header{height: 67px;}
	header .logo{width: 110px;}
	header nav ul li{padding: 19px 0;}
	header nav ul li a{padding: 5px; font-size: 12px;}
	header .contact-number{padding: 13px 15px; font-size: 13px;}
	header .contact-number strong{margin-bottom: 5px;}
	.banner{margin-top: 66px;}
	.banner .iteam{height: 750px;}
	.banner .iteam .banner-caption .text-caption{padding: 50px 0;}
	.banner-caption .title{font-size: 45px;}
	.banner-caption p{font-size: 30px;}
	.banner .slick-prev{left: 50px;}
	.banner .slick-next{right: 50px;}
	.banner .slick-dots{bottom: 150px;}
	.banner .iteam .banner-caption .btn-more{bottom: 80px;}
	.our-service-block{padding: 70px 0;}
	.our-service-block h1{margin-bottom: 80px;}
	.our-service-block .contnt-block .left{padding: 0 20px; max-width: 70%;}
	.contnt-block .left .listing-service ul{padding-right: 30px;}
	.our-service-block .contnt-block .right{max-width: 30%;}
	.recent-project-block{padding: 60px 0;}
	.recent-project-block .text-caption{padding-left: 30px;}
	.our-client{padding: 70px 0 80px;}
	.client-slider{max-width: 90%;}
	.footer-main{padding: 50px 0 40px;}
	.footer-main .container{max-width: 100%;}
	.inner-banner{margin-top: 67px;}
	.inner-heading h1{font-size: 32px;}
	.inner-heading h2{font-size: 32px;}
	.team-member-block{padding: 70px 0;}
	.history-description{padding: 70px 0;}
	.display-product-block{padding: 70px 0;}
	.gallery-listing-block{padding: 70px 0;}
	.gallery-listing-block .container{max-width: 100%;}
	.gallery-listing-block .block{margin: 0 21px; margin-bottom: 50px;}
    .gallery-section h4{ margin-left: 21px; text-align: center;}
}

/* 4. Other media-query
---------------------------------------------------*/
@media (max-width:379px) {

}

@media (min-width:1200px) and (max-width:1484px) {	
	.container{max-width: 100%; padding: 0 15px;}
	header{height: 82px;}
	header .logo{width: 145px;}
	header nav ul li{padding: 24px 0;}
	header nav ul li a{padding: 5px 8px; font-size: 13px;}
	header .contact-number{padding: 15px 15px; font-size: 15px;}
	.banner{margin-top: 81px;}
	.banner .slick-prev{left: 50px;}
	.banner .slick-next{right: 50px;}
	.banner .iteam .banner-caption .text-caption{padding: 80px 0;}
	.our-service-block{padding: 80px 0;}
	.our-service-block h1{margin-bottom: 110px;}
	.our-service-block .contnt-block .left{padding: 0 40px 0 80px; max-width: 70%;}
	.contnt-block .left .listing-service ul{padding-right: 30px;}
	.our-service-block .contnt-block .right{max-width: 30%;}
	.our-client{padding: 80px 0;}
	.client-slider{max-width: 90%;}
	.inner-banner{margin-top: 82px;}
}

@media (max-width: 1023px){
	header .logo{margin-left: 0;}
	.nav-mobile { display: block; float: right; margin: 12px; }
	.nav-mobile .btn-nav { display: block; width: 45px; height: 35px; transition: all 0.2s ease-in-out 0s; background: #03aab4;}
	.nav-mobile .btn-nav span { width: 28px; height: 2px; display: block; background: #fff; border-radius: 2px; position: relative; top: 17px; }
	.nav-mobile .btn-nav span:before { width: 28px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.2s ease-in-out 0s; content: ""; position: absolute; left: 0; top: -8px; }
	.nav-mobile .btn-nav span:after { width: 28px; height: 2px; content: ""; background: #fff; border-radius: 2px; transition: all 0.2s ease-in-out 0s;  position: absolute; right: 0; bottom: -8px; }
	.nav-mobile .btn-nav.nav-open span:before { width: 15px; }
	.nav-mobile .btn-nav.nav-open span:after { width: 15px; right: 0; }
	/*----- mobile frist lavel nav ------*/ 
	.nav-mobile-content{width: 100%; height: 0; opacity: 0; overflow-y: scroll; background: #03aab4; transition: all 0.3s ease-in-out 0s; visibility: hidden; position: fixed; right: -100%; top: 60px; z-index:9999; border-top: 1px solid rgba(255, 255, 255, 0.49); text-align: left;  height: calc(100vh - 60px);}
	.nav-mobile.nav-open .nav-mobile-content {  opacity: 1; visibility: visible; right: 0; }
	.nav-mobile-content ul { margin: 0; padding: 5px 0 20px 0; }
	.nav-mobile-content ul li { display: block; padding: 0; clear: both; color: #3f474a; position: relative; }
	.nav-mobile-content ul li a {  padding: 10px 20px; display: block;  color: #fff; font-weight:normal; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.49)}
	.nav-mobile-content ul li a:hover {text-decoration: none; }
	.nav-mobile-content ul li.active a{ color: #000; }
	.nav-mobile-content ul li em {  display: block; width: 40px; height: 36px; cursor: pointer; position: absolute; right: 15px; top: 0; }
	.nav-mobile-content ul li em:before { width: 18px; height: 1px; display: block; background: #fff; transform: translate(-9px, -0.5px); content: ""; position: absolute; left: 50%; top: 50%; }
	.nav-mobile-content ul li em:after { width: 1px; height: 18px; display: block; content: ""; background: #fff; transform: translate(-0.5px, -9px); position: absolute; left: 50%; top: 50%; }
	.nav-mobile-content ul li.active em:after { display: none; }
	/*----- mobile second lavel nav ------*/ 
	.nav-mobile-content ul li ul { margin: 0; padding: 10px 15px; display: none; }
	.nav-mobile-content ul li ul li { font-size: 13px; color: #3f474a; }
	.nav-mobile-content ul li ul li a { padding: 8px 18px; color: #fff; }
	.nav-mobile-content ul li ul li em { height: 33px; }
	.nav-mobile-content ul li ul li em:before { display: block; }
	.nav-mobile-content ul li ul li em:after { display: block !important; }
	.nav-mobile-content ul li ul li.active em:after { display: none !important; }
	.nav-mobile-content .phn{display: block; margin-bottom: 15px; padding-left: 15px; font-size: 14px; color: #fff;}
	.nav-mobile-content .phn a{font-size: 14px; color: #fff; display: inline-block; text-decoration: none;}
	.nav-mobile-content .phn a:hover{color: #000;}
}