:root {
	--primary-color: #3F7DE8;
    --primary-dark-color: #294F92;
	--section-bg: #F6F9FE;
	--secondary-color: #4AC24A;
    --border-color: #D9E4F6;
	--white-color: #ffffff;
	--black-color: #000000;
    --error-border: #FFCBD7;
    --font-family: 'Epilogue';
    --body-text: 16px;
}

/* only ipad 1024 and bigger screen landscape screen */
@media only screen and (min-width: 1025px) {
	a, input[type="button"], input[type="submit"], button, table th, table td { -webkit-transition: background-color 350ms cubic-bezier(0,.34,.74,.99), color 350ms cubic-bezier(0,.34,.74,.99); transition: background-color 350ms cubic-bezier(0,.34,.74,.99), color 350ms cubic-bezier(0,.34,.74,.99); }
	.allanim, .getintouchinfo li a:before, .servicesbtn:before , .btn:before, .btn span:after, #header, a, .sliderarrow, .contactinfo li a:before, #mainmenu li a:before { -webkit-transition: all 350ms cubic-bezier(0,.34,.74,.99); transition:all 350ms cubic-bezier(0,.34,.74,.99); }
	a:hover { text-decoration:underline; }
	
	#mainmenu li a:hover { color: var(--primary-color); text-decoration: none; }
	#mainmenu li a:hover:before { bottom: 0; opacity: 1; }

	input[type="button"]:hover, input[type="submit"]:hover, button:hover { background:#d71802; color:var(--white-color); }
	.tabnav li a:hover { background-color: #D9E4F6; color: var(--black-color); }
	.tabnav li.active a:hover { background-color:var(--primary-color); color:var(--white-color) }
	.tabcontent p a:hover, .accordion-data p a:hover { color:var(--secondary-color) }

	.sliderarrow:hover { background-color: var(--primary-color); }
	.prevsliderarrow:hover { background-position: -47px 0; }
	.nextsliderarrow:hover { background-position: 0 0; }

	.btn:hover { background-color: var(--secondary-color); text-decoration: none; }
	.contactinfo li a:hover { text-decoration: none; color: var(--black-color); }

	.contactinfo li a:hover:before { background-color: var(--primary-color); border-color: var(--primary-color); background-position: 0 -40px; }

	.btn.btn-xl:hover { background-color: var(--primary-color); }
}

/*==========================================================================================================*/
@media only screen and (max-width: 1440px) {
	#mainmenu li a { padding: 12px 20px; }

	.serviceslistingwrapper .cols .col { flex:0 0 50%; max-width: 50%; }
	
	h1,h2 { font-size:58px; }
	h3 { font-size:54px; }
	h4 { font-size:40px; }

	.secpadding, .sectionbg.sectionbg-b { padding: 70px 0; }

	.aboutsectioninfo:before { height: 70%; }
	.aboutelement.lefttopelement { display: none; }

	.sectitlewrapper { margin-bottom: 30px; }
	#services .sectitlewrapper { margin-bottom: 0; }

	
}

/*==========================================================================================================*/
@media only screen and (max-width: 1300px) {
	
	h1,h2 { font-size:50px; }
	h3 { font-size:50px; }
	h4 { font-size:38px; }
	h5 { font-size:32px; }
	h6 { font-size:26px; }

	#mainmenu > ul > li { margin: 0 0 0 20px; }

	.secpadding, .sectionbg.sectionbg-b { padding: 50px 0; }

	.getintouchdetails .map { flex: 0 0 55%; max-width: 55%; padding: 10px 20px 10px 30px; }
	.getintouchdetails .contactblockleft { flex: 0 0 calc(100% - 55%); max-width: calc(100% - 55%); padding: 26px 20px 26px 0; }
}

/*==========================================================================================================*/
@media only screen and (max-width: 1150px) {
	

	h1,h2 { font-size:42px; }
	h3 { font-size:36px; }
	h4 { font-size:32px; }
	h5 { font-size:30px; }
	h6 { font-size:24px; }

	.sectitlewrapper .bgline { width: calc(100% - 70px); }
}
/*==========================================================================================================*/
@media only screen and (max-width: 1150px) and (min-width: 880px) {
	.servicebtnleft { flex: 0 0 100%; padding-right: 0; margin-bottom: 15px; }
	.servicebtnright { flex: 0 0 100%; }
}
/*==========================================================================================================*/
@media only screen and (max-width: 1024px) {
	body { min-width:320px; }
	img{ max-width: 100%; width:auto; height:auto; }
	.wrap { width:100%; padding:0 20px; }

	h1,h2 { font-size:40px;  }
	h3 { font-size:40px; }
	h4 { font-size:34px; }
	h5 { font-size:28px; }

	.cols { margin: 0 -10px; }
	.cols .col { padding-left:10px; padding-right:10px; }
	.serviceslisting .col { margin-bottom: 20px; }
	.servicebox { padding: 26px; }

	.secpadding, .sectionbg.sectionbg-b { padding: 60px 0; }

	.contactblockswrapper .contactblockleft { flex:0 0 40%; max-width: 40%; }
	.contactuslogo { max-width: 280px; }
	.sectionbg:before { top: -70px; height: 70px; }
	.sectionbg:after { bottom: -70px; height: 70px; }

	.secpadding.sectionbg { margin: 110px 0; }

	#header { padding: 10px 0; }
	#logo { width: 58px; }

	#mainmenu li a { padding: 10px 20px; }

	.headerpadding { padding-top: 120px !important; }

	.herobannercontent h1 { flex: 0 0 calc(100% - 200px); max-width: calc(100% - 200px); }

	#innerbanner { height: 300px; }
	#innerbanner .innerbannertitle { margin: 45px 0 0; }
	#innerbanner .innerbannertitle:after { width: 60px; height: 5px; }
} 
/*==========================================================================================================*/
@media only screen and (min-width: 1024px) {
	.col-reverse { flex-direction: row-reverse; }
	.herobannercontent h1 span:before { bottom: 3px; }
}
/*==========================================================================================================*/
@media only screen and (max-width: 1023px) {
	body { font-size: 15px; line-height: 24px; }
	
	#header { padding: 10px 0; }

	.cols2 .col, .cols3 .col, .cols4 .col { flex:0 0 100%; max-width:100%; width:100%; }
	.secpadding, .sectionbg.sectionbg-b { padding: 40px 0; }

	h1,h2 { font-size:36px;  }
	h3 { font-size:36px; }
	h4 { font-size:30px; }
	h5 { font-size:26px; }

	.aboutusblockcontent { margin-top: 25px; text-align: center; }

	.contactinfo li a { font-size: 16px; padding: 14px 12px 10px; }
	.contactuslogo { max-width: 200px; }
	.inputgroup { margin-bottom: 20px; }

	.titlerow  { display: flex; flex-direction: column; }

	.contactblockswrapper { flex-direction: column-reverse; }
	.contactblockswrapper .contactblockleft, .contactblockswrapper .contactblockright { flex: 0 0 100%; max-width: 100%; }
	.contactblockswrapper .contactblockright { margin-bottom: 25px; }

	.titlerowright { flex:0 0 auto; max-width: auto; }

	.herobannercontent h1 span:before { bottom: 7px; right: -32px; width: 27px; height: 26px; }

	.aboutusblockwrapper .bgimg { height: 610px; }
	.aboutusfrontblockwrapper .bgimg { height: 450px; }

	.sectitle, .titlerow { margin-bottom: 30px; }
	.whowearetop { text-align: center; }
	.whowearetop figure img { display: block; margin: 0 auto; }
	.whowearetop + .whowearetop .cols { margin: 0; }
	.whowearetop .cols .col { margin: 0 0 20px; }
	.whowearetop .cols .col:last-child { margin-bottom: 0; }
	.whowearetop .cols .col p { margin: 0; }

	.ourvisioncontent, .ourmissioncontent { text-align: left; }
	.dashtitle { padding: 0 0 0 16px; }
	.ourvisioncontent p, .ourmissioncontent p { margin-bottom: 0; }
	.ourmissioncontent { margin-top: 30px; }
	.sectionbg.sectionbg-b { padding: 20px 0; }

	.servicelistingwrapper .servicelistbox { display: block; }
	.servicelistbox .bgimg { max-width: 100%; height: 300px; margin: 0 0 25px; }
	.servicelistbox .servicelistboxcontent { max-width: 100%; padding: 0 25px 25px; }

	.getintouchdetails .map { flex: 0 0 100%; max-width: 100%; padding: 0; }
	.getintouchdetails .contactblockleft { flex: 0 0 100%; max-width: 100%; padding: 20px; }

}
@media only screen and (min-width: 768px) {
	.onmobilevisible { display: none !important; }
	#mainmenu > ul { display: flex !important; }
}
/*==========================================================================================================*/
@media only screen and (max-width: 767px) {	
	#mainmenu > ul { display:none; position:absolute; left:0; width:100%; top:100%; background: var(--primary-color); z-index:5; }
	#mainmenu ul li { float:none; margin:0; padding:0; border-bottom: solid 2px rgba(255, 255, 255, 0.1); }
	#mainmenu ul li a { padding:14px; display:block; color: var(--white-color); opacity: 0.5; }
	#mainmenu ul li.active a { background-color: transparent; color: var(--white-color); opacity: 1; }
	
	/* Responsive Menu line icon*/
	#menu { display: flex; align-items: center; background-color: var(--primary-color); border-radius: 50%; width: 50px; height: 50px; display: block; padding: 9px 15px 12px; }
	.menulines-button { padding:0; cursor: pointer; user-select: none; text-transform:uppercase; font-size:16px; color:var(--primary-color); text-decoration:none; }
	.menulines-button em { font-style:normal; font-weight:bold; margin-left:10px; }
	.menulines-button:hover { text-decoration:none; }
	.menulines { display: inline-block; width: 25px; height: 2px; background: var(--white-color); position: relative; top: -2px; left: -2px; margin:0; -moz-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -ms-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000);  border-radius: 50px; opacity:1; }
	.menulines:before, .menulines:after { display: inline-block; width:25px; height: 2px; background: var(--white-color); position: absolute; left: 0; content:''; -moz-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -ms-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transform-origin: 0.28571rem center; -moz-transform-origin: 0.28571rem center; -ms-transform-origin: 0.28571rem center; transform-origin: 0.28571rem center; border-radius: 50px; }
	.menulines:before { top: 7px; }
	.menulines:after { top: -7px; }
	.menuopen .menulines { background:none; }
	.menuopen .menulines:before, .menuopen .menulines:after {  -webkit-transform-origin: 50% 50%;  -moz-transform-origin: 50% 50%;  -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; } 
	.menuopen .menulines:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } 
	.menuopen .menulines:after {  -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); }

	#mainmenu li.active a:before { display: none; }

	.default-grid.cols3 .col { width:50%; }
	/*.tabnav { display:none; }
	 .tab-container { padding:0; border:none;}
	.tab-data { margin:0 0 30px; }
	.tab-data .tabnav { display:none; }
	.tab-container .tabMobiletrigger { background:var(--section-bg); border:medium none; font-size:15px !important; text-transform:uppercase; margin:15px 0 0; padding:16px 54px 16px 16px; position:relative; cursor:pointer; font-weight:bold; }
	.tab-container .tabMobiletrigger.rotate { background-color: var(--primary-color); color: var(--white-color); margin-bottom: 0; }
	.tab-container .tabMobiletrigger.rotate + .tabcontent { background-color: #F2F7FE; }
	.tabMobiletrigger:after { border-left:8px solid rgba(0, 0, 0, 0); border-right:8px solid rgba(0, 0, 0, 0); border-top:8px solid #3f7de8; content:""; margin-top:-3px; position:absolute; right:19px; top:50%; }
	.tabMobiletrigger:before { background:rgba(63, 125, 232, 0.1); content:""; height:100%; position:absolute; right:0; top:0; width:54px; z-index:1; }
	.tab-container .tabMobiletrigger.rotate:before { background-color: rgba(255, 255, 255, 0.1); }
	.tab-container .tabMobiletrigger.rotate:after { border-top-color: var(--white-color); }
	.tabcontent { padding:15px 0; margin:0; }
	.tabMobiletrigger.rotate:after { border-top-color:#272c2f; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg); }
	.servicelistingwrapper .tab-data { border-radius: 0; } */

	h1,h2 { font-size:34px; }
	h3 { font-size:34px; }
	h4 { font-size:26px; }
	h5, h6 { font-size:22px; }


	.header-row > .btn.btn-secondary { display: none; }
	#logo, .flogo { width: 55px; }
	#menu { width: 40px; height: 40px; padding: 6px 12px; }
	.menulines, .menulines::before, .menulines::after { width: 20px; }

	.ondesktopvisible { display: none !important; }

	.herobannercontent  { flex-direction: column; text-align: center; }
	.herobannercontent .herobannersliderarrow, .herobannercontent h1 { flex: 0 0 100%; max-width: 100%; }
	.herobannercontent .herobannersliderarrow { justify-content: center; }
	.herobannercontent .herobannersliderarrow .prevsliderarrow { margin-right: 10px; }

	.aboutusblockwrapper .bgimg { height: 510px; }
	.aboutusblockwrapper .bgimg figcaption { font-size: 22px; padding: 14px 10px; }
	.aboutusfrontblockwrapper .bgimg { height:350px; }
	.aboutusfrontblockwrapper .bgimg figcaption { font-size: 22px; padding: 14px 10px; }

	#herobanner { height: auto; min-height: inherit; }
	.herobannerslider .item .bgimg { height: 250px; }

	.slick-dots li .slickcustomdot { width: 10px; height: 10px; }
	.herobannerslider .slick-dots { margin: 15px 0 22px; }

	#footer > .wrap > .d-flex { flex-direction: column; justify-content: center; text-align: center; }

	#innerbanner { height: 250px; }
	#innerbanner .innerbannertitle { margin: 15px 0 0; }
	#innerbanner .innerbannertitle:after { width: 60px; height: 5px; }

	.testimonialsliderbox { padding: 22px 20px; }

	.servicelistbox .servicelistboxcontent .starlisting { margin: 0 0 25px; }

	.getintouchdetails .map iframe { height: 350px; }
	
	#footer { padding: 20px 0; }

	/* .servicelistingwrapper .tab-data { border: 0; }
	.tabcontent { padding: 15px; }
	.tab-container { background-color: transparent; } */

	.tab-container, .servicelistingwrapper .tab-container .servicelistbox { padding: 10px; }
	.tabnav li a { padding: 16px 5px; }
	.servicelistbox .servicelistboxcontent { max-width: 100%; padding: 0 5px 10px; }
	.btn.btn-xl { padding: 13px 33px 12px; }
}

/*==========================================================================================================*/
@media only screen and (max-width: 567px) {
	.sectionbg:after { bottom: -32px; height: 32px; }
	.sectionbg:before { top: -32px; height: 32px; }
	.secpadding.sectionbg { margin: 80px 0; }
	.herobannercontent h1 { margin: 0 0 20px; }
	.headerpadding { padding-top: 100px !important; }
	#logo, .flogo { width: 46px; }
	h1,h2, h3 { font-size:30px; }
	.herobannercontent h1 span { padding-right: 23px; }
	.herobannercontent h1 span:before { width: 20px; height: 19px; right: 0; }
	.contactinfo li a { font-size: 14px; }
	.contactinfo li a:before { width: 30px; height: 30px; }
	.testimonialsliderarrow { flex: 0 0 105px; max-width: 105px; }
	.sectitle, .titlerow { margin-bottom: 20px; }
	#innerbanner { height: 220px; }
	#innerbanner .innerbannertitle { margin: 18px 0 0; }
	#innerbanner .innerbannertitle:after { width: 40px; height: 4px; }
	.contactinfo li a { padding: 10px 8px 8px; }
	.getintouchdetails .map iframe { height: 280px; }
	#footer { padding: 16px 0; }
}