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

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. large desktop
	5. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:640px) {
/*--------- home page ------------*/
h1, .h1{ font-size: 32px; line-height: 40px; }
h2, .h2{ font-size: 32px; line-height: 40px; }
h3, .h3{ font-size: 20px; line-height: 26px; }
h4, .h4{ font-size: 18px; line-height: 24px; }
h5, .h5{ font-size: 16px; line-height: 23px; }
h6, .h6{ font-size: 14px; line-height: 20px; }

#wrapper{ padding-top: 115px; }
.content-box ul li{ font-size: 18px; line-height: 24px; }

p{ font-size: 18px; line-height: 24px; }

.container{ padding: 0 20px; box-sizing: border-box; }
.banner{ padding-top: 10px; }
.banner-slider .item .inner-banner{ display: block; width: 100%; height: 200px; }
.slick-dots li{ margin: 0 1px; }
.gallery-sec{ padding: 20px 0 30px 0; }
.gallery-grp .gallery-cell{ width: calc(50% - 5px); height: 90px; margin-bottom: 10px; }
.our-services-sec h2{ margin-bottom: 25px; }
.services-icon figure{ height: 60px; width: auto; }
.services-icon figure img{ display: block; width: auto; height: 100%; }
.services-icon{ padding: 0px; margin-bottom: 15px; }
.center-img{ padding: 0px 0 0px 0; }
nav ul li{ margin: 0 6px; padding: 0; }
header .logo-text{ font-size: 30px; line-height: 38px; }
.logo-slogan{ font-size: 10px; line-height: 14px; }	
.header-btm{ padding: 21px 0px; position: relative; }
.header-top{ padding: 10px 0px; }
.welcome-sec p{ font-size: 18px; line-height: 24px; }
.welcome-sec{ padding-top: 25px; }
.our-services-sec{ padding: 40px 0 40px 0; }
.services-box{ padding: 25px 25px 25px; width: 100%; }
.services-grp{ padding: 0 0 10px 0; gap: 10px; }
footer .two-col .col-left{ width: 100%; text-align: center; }
footer .two-col .col-right{ width: 100%; text-align: center; }
footer{ padding: 15px 0; }
.center-img .img-box{ width: 100%; }
footer span{ font-size: 13px; line-height: 26px; }
footer a{ font-size: 13px; line-height: 26px; text-decoration: underline; }
.align-right-img{ max-width: 100%; width: 100%; }
.content-sec h3{ font-size: 20px; line-height: 28px; }
.content-box{ padding: 20px 0; }
.content-box h4:before{ left: 4px; top: 9px; width: 5px; height: 5px; }
.content-sec{ padding: 30px 0 30px 0; }
.content-sec h1{ font-size: 32px; line-height: 40px; margin-bottom: 20px; }
.contact-sec .two-col{ flex-wrap: wrap; }
.contact-sec .two-col .col-left figure{ margin-top: 0px; }
.contact-sec .two-col .col-left{ width: 100%; padding-right: 0px; margin-bottom: 30px; }
.contact-sec .two-col .col-right{ width: 100%; }
.contact-sec .two-col .col-left p{ font-size: 16px; line-height: 24px; }
.header-btm nav{ display: none; }
.mb-toggled.mb-closed{ display: block; top: 9px; right: 0; }
#mobile-menu nav{ display: block; }

}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (min-width:641px) and (max-width:767px) {

h1, .h1{ font-size: 32px; line-height: 40px; }
h2, .h2{ font-size: 32px; line-height: 40px; }
h3, .h3{ font-size: 20px; line-height: 26px; }
h4, .h4{ font-size: 18px; line-height: 24px; }
h5, .h5{ font-size: 16px; line-height: 23px; }
h6, .h6{ font-size: 14px; line-height: 20px; }

#wrapper{ padding-top: 124px; }

p{ font-size: 18px; line-height: 24px; }
.content-box ul li{ font-size: 18px; line-height: 24px; }

.container{ padding: 0 20px; box-sizing: border-box; }
.banner{ padding-top: 10px; }
.banner-slider .item .inner-banner{ display: block; width: 100%; height: 300px; }
.gallery-sec{ padding: 20px 0 40px 0; }
.gallery-grp .gallery-cell{ width: calc(20% - 10px); height: 90px; }
.our-services-sec h2{ margin-bottom: 25px; }
.services-icon figure{ height: 60px; width: auto; }
.services-icon figure img{ display: block; width: auto; height: 100%; }
.services-icon{ padding: 15px 15px 15px; }
.center-img{ padding: 15px 0 20px 0; }
nav ul li{ margin: 0 8px; }
header .logo-text{ font-size: 40px; line-height: 43px; }
.logo-slogan{ font-size: 12px; line-height: 15px; }	
.header-btm{ padding: 21px 10px; position: relative; }
.header-top{ padding: 10px 10px; }
.welcome-sec p{  font-size: 20px; line-height: 25px; }
.welcome-sec{ padding-top: 35px; }
.our-services-sec{ padding: 40px 0 30px 0; }
.services-box{ padding: 25px 25px 25px; width: calc(33.3% - 10px); }
.services-grp{ padding: 0 0 10px 0; gap: 10px; }
footer .two-col .col-left{ width: 70%; }
footer .two-col .col-right{ width: 30%; }
footer{ padding: 15px 0; }
.align-right-img{ max-width: 300px; }
.content-sec h3{ font-size: 20px; line-height: 28px; }
.content-box{ padding: 20px 0; }
.content-box h4:before{ left: 4px; top: 9px; width: 5px; height: 5px; }
.content-sec{ padding: 30px 0 30px 0; }
.content-sec h1{ font-size: 30px; line-height: 35px; margin-bottom: 40px; }
.contact-sec .two-col .col-left figure{ margin-top: 30px; }
.contact-sec .two-col .col-left{ padding-right: 30px; }
.contact-sec .two-col .col-left p{ font-size: 16px; line-height: 24px; }
.header-btm nav{ display: none; }
.mb-toggled.mb-closed{ display: block; top: 9px; right: 0; }
#mobile-menu nav{ display: block; }

}

/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px){

h1, .h1{ font-size: 32px; line-height: 40px; }
h2, .h2{ font-size: 32px; line-height: 40px; }
h3, .h3{ font-size: 20px; line-height: 26px; }
h4, .h4{ font-size: 18px; line-height: 24px; }
h5, .h5{ font-size: 16px; line-height: 23px; }
h6, .h6{ font-size: 14px; line-height: 20px; }

#wrapper{ padding-top: 158px; }

.container{ padding: 0 20px; box-sizing: border-box; }
.banner{ padding-top: 10px; }
.banner-slider .item .inner-banner{ display: block; width: 100%; height: 400px; }
.gallery-sec{ padding: 20px 0 50px 0; }
.gallery-grp .gallery-cell{ width: calc(20% - 10px); height: 90px; }
.our-services-sec h2{ margin-bottom: 25px; }
.services-icon figure{ height: 60px; width: auto; }
.services-icon figure img{ display: block; width: auto; height: 100%; }
.services-icon{ padding: 15px 15px 15px; }
.center-img{ padding: 15px 0 20px 0; }
nav ul li{ margin: 0 10px; }
header .logo-text{ font-size: 40px; line-height: 43px; }
.logo-slogan{ font-size: 12px; line-height: 15px; }	
.header-btm{ padding: 17px 15px; }
.header-top{ padding: 20px 15px; }
.welcome-sec p{ font-size: 22px; line-height: 27px; }
.welcome-sec{ padding-top: 35px; }
.our-services-sec{ padding: 40px 0 30px 0; }
.services-box{ padding: 25px 25px 25px; width: calc(33.3% - 10px); }
.services-grp{ padding: 0 0 10px 0; gap: 10px; }
footer .two-col .col-left{ width: 70%; }
footer .two-col .col-right{ width: 30%; }
footer{ padding: 15px 0; }
.align-right-img{ max-width: 300px; }
.content-sec h3{ font-size: 20px; line-height: 28px; }
.content-box{ padding: 20px 0; }
.content-box h4:before{ left: 4px; top: 9px; width: 5px; height: 5px; }
.content-sec{ padding: 30px 0 30px 0; }
.content-sec h1{ font-size: 30px; line-height: 35px; margin-bottom: 40px; }
.contact-sec .two-col .col-left figure{ margin-top: 30px; }
.contact-sec .two-col .col-left{ padding-right: 30px; }
.contact-sec .two-col .col-left p{ font-size: 16px; line-height: 24px; }

}

/* 4. large desktop responsive css 1024px to 1199px
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1199px){	

.container{ padding: 0 20px; box-sizing: border-box; }
.banner{ padding-top: 10px; }
.banner-slider .item .inner-banner{ display: block; width: 100%; height: 500px; }
.gallery-sec{ padding: 20px 0 50px 0; }
.gallery-grp .gallery-cell{ width: calc(20% - 15px); }
.our-services-sec h2{ margin-bottom: 30px; }
.services-icon figure{ height: 60px; width: auto; }
.services-icon figure img{ display: block; width: auto; height: 100%; }
.services-icon{ padding: 25px 25px 25px; }
.center-img{ padding: 15px 0 20px 0; }
nav ul li{ margin: 0 10px; }
header .logo-text{ font-size: 40px; line-height: 43px; }
.logo-slogan{ font-size: 12px; line-height: 15px; }
.align-right-img{ max-width: 400px; }
.content-sec h3{ font-size: 22px; line-height: 28px; }
.content-box{ padding: 20px 0; }
.contact-sec .two-col .col-left figure{ margin-top: 40px; }

}

/* 5. Other media-query
------------------------------------------------------------------------------*/
@media (min-width:1200px) and (max-width:1299px){	

.container{ padding: 0 20px; box-sizing: border-box; }
.banner{ padding-top: 10px; }
.banner-slider .item .inner-banner{ display: block; width: 100%; height: 500px; }
.gallery-sec{ padding: 20px 0 60px 0; }
.gallery-grp .gallery-cell{ width: calc(20% - 15px); }
.our-services-sec h2{ margin-bottom: 30px; }
.services-icon figure{ height: 60px; width: auto; }
.services-icon figure img{ display: block; width: auto; height: 100%; }
.services-icon{ padding: 25px 25px 25px; }

}