@media (max-width: 567px) { 
	
}

@media (max-width: 767px) {
	.ftr-btm-link{ margin-bottom: 10px;}
	.ftr-btm-link a{ position: relative;  margin-right: 10px;}
	.ftr-btm-link a::after{ position: relative; content: "|"; padding-left: 10px;}
	.portfolio .read-more.ms-3, .services .read-more.ms-3{ display: block; margin-left: 0 !important;}
}

@media (min-width: 768px) {
	.banner-bg{ min-height: 350px;}
	.page-banner-inner{background: linear-gradient(to right, rgba(255,255,255,0.9) 30%, transparent 57%);}
	.page-banner{ padding: 30px 0px 50px; text-align: unset;}
	.page-banner .row{ display: flex; flex-direction: row;}
	.page-banner h1{ font-size: 60px; line-height: 60px; margin-bottom: 30px; margin-top: 0px;}
	.page-banner p{ font-size: 20px; line-height: 24px;}
	.page-banner .hban-img img{ height: unset;}
	.why-us h1{ font-size: 60px; line-height: 60px; margin-bottom: 30px;}
	.why-us p{ font-size: 20px; line-height: 24px;}
	.gr-inner-rht p{font-size: 20px; line-height: 24px;}
	.site-slider .swiper-pagination {left: 0; right: unset;}
	.site-slider .swiper-pagination-bullet {width: 50px; height: 3px; bottom: 10px;}
	.accred-row{ align-items: center; display: flex; justify-content: space-evenly;}
	.footer-top{ padding-bottom: 50px;}
	ul.ftr-menu{display: flex; flex-direction: column; padding: unset;}
	ul.ftr-menu li{ list-style-type: none; font-size: 20px; padding-bottom: 10px; margin: 0px;}
	.ftr-btm-inner{ display: flex; flex-direction: row; font-size: 16px;}
	.ftr-btm-link a{ position: relative;  margin-left: 10px;}
	.ftr-btm-link a::before{ position: relative; content: "|"; padding-right: 10px;}
	.site-slider .swiper-button-next::after, .site-slider .swiper-button-prev::after {font-size: 30px;}
	.service_slider .swiper-slide{ margin-bottom: 30px; text-align: left;}
	.service-box .service-icon{ margin-bottom: 30px; min-height: 152px; display: flex; align-items: center; justify-content: flex-start;}
	.why-us-inner{background: linear-gradient(to right, #fff 30%, transparent 57%);}
	.portfolio_slider .swiper-slide{ margin-bottom: 30px; text-align: left;}
	.prod-box .prod-icon{ margin-bottom: 30px; min-height: 152px; display: flex; align-items: center; justify-content: flex-start;}
	.ftr-btm-link a::before{ position: relative; content: "|"; padding-right: 10px;}
	.sideBar{ padding-left: 30px;}
	.services--page .service-box{ margin-bottom: 50px; text-align: left;}
	.portfolio--page .prod-box{ margin-bottom: 50px; text-align: left;}
	.portfolio--banner .page-banner-inner{background: linear-gradient(to right, rgba(255,255,255,0.2) 30%, transparent 57%);}
	.red-box{margin:-50px auto 50px;}
}

@media (min-width: 992px) {
	.main-navigation{ display:block;}
	span.db{ display: block;}
	body{ font-size:18px;}
	.sp-50{ padding-top:50px; padding-bottom:50px;}
	.spt-50{ padding-top:50px;}
	.spb-50{ padding-bottom:50px;}
	.header .logo img{ height: auto;}
	.gr-inner{ padding: 100px 0px;}
	.service-inner-content h2{ font-size: 30px;}
}


@media (min-width: 1200px) {
	.container {max-width: 1440px; width: 90%;}
	.header.my-fixed{animation: growDown 1000ms ease-in-out forwards; transform: translateX(0); transform-origin: top center; box-shadow: 0 3px 5px 0 rgba(0,0,0,.03);}
	@keyframes growDown {
		0% {opacity: 0;}
		100% {opacity: 1; }
		}
	.header.my-fixed .logo img{ height: 50px; transition: all 300ms linear;}
	.gr-info-box{ font-size: 20px; line-height: 22px; border-radius: 30px 0px 0px 0px; margin: 0px; position: absolute; top: 6%; left: 32%;}
	.banner-bg{ min-height: 500px;}
	.sideBar li{padding-bottom: 20px;}
	.red-box{max-width: 70%; font-size: 24px; margin:-90px auto 50px;}
	.red-box a:after{ top: 5px;}
	
}

@media (min-width: 1336px) {
	body{ font-size:20px;}
	.page-banner h1{ font-size: 80px; line-height: 80px; margin-bottom: 30px;}
	.page-banner p{ font-size: 30px; line-height: 34px;}
	.why-us h1{ font-size: 80px; line-height: 80px; margin-bottom: 30px;}
	.why-us p{ font-size: 30px; line-height: 34px;}
	.service_slider .swiper-container {width: 95%; height: 100%;} 
	.portfolio_slider .swiper-container {width: 95%; height: 100%;} 
	.gr-inner-rht p{font-size: 30px; line-height: 34px;}
	.gr-info-box{top: 12%; left: 32%;}
}

@media (min-width: 1440px) {

}

@media (min-width: 1600px) {
	.why-us{ max-width: 1440px; margin: auto;}
	.why-us .container{ width: 100%;}
	.gr-info-box{top: 10%; left: 32.5%;}
}