@-ms-viewport
{
	width:device-width;
}
@-viewport
{
	width:device-width;
}
@media only screen and (max-width:1200px)
{
	img
	{
		max-width:100%;
	}
	.site-header h1, .header-button, .header-contact, .social-icon
	{
		position:relative;
		z-index:99999999;
	}
	.site-header{
		padding: 0 80px;
	}
	.nav ul li {	
		margin: 0 7px;
	}
}
@media only screen and (max-width:1024px)
{
	.nav-shrink .site-header h1 {
		margin: -12px 0;
	}
	.site-header aside {
		padding-top: 0px;
	}
	.left_mission {		
		padding: 0px 50px 50px;
	}
	.left_mission ul li {	
		margin: 0px 0px 25px;
	}
	.planning_phase {
		padding: 45px 50px;
	}
	.inner_planning ul li {		
		padding: 40px 15px;
		
	}
}
@media only screen and (max-width:960px)
{
	.header-button {
		margin-top: -5px;
		display: none;
	}

	.site-header aside {
		padding-top: 32px;
	}
	.site-header
	{
		padding: 0px 20px;
	}
	.site-header h1
	{
		margin: 10px 0;
	}
	.nav-shrink .nav
	{
		margin-top: 0px;
	}
	.nav ul li ul.meganav
	{
		padding:20px;
	}
	.banner
	{
		margin-top: 85px;
		height: 300px;
	}
	.mission_title{
		padding: 0px 50px;
	}
	.river_stream_structure {	
		padding: 45px 50px;
	}
	.foot-right {
		margin-right: 12%;
	}
	.foot-right:nth-of-type(2) h3 span {
		transform: translate(-25%, 20px);
	}

	.profile_section {	
		padding: 60px 65px 0px;
	}
	.what_h2o {	
		padding: 0px 65px;
	}
	.what_h2o aside.right {	
		padding: 20px;
	}
	
	
	
}
@media only screen and (max-width:768px)
{
	.about_us{
		margin-top: 0em;
	}
	.inner_about_section {
		display: block;
		margin: auto;
		justify-content: center;
	}


	.left_abt, .right_abt {
		width: auto;
		padding: 0px 40px 65px;
	}

	.faci_icon{
		height:fit-content;
	}
	.mission_vission:before {
		content: '';
		position: absolute;
		left: 0px;
		width: 3em;
		height: 13em;
		background: #df0024;
		top: 10em;
		z-index: -1;
	}

	.small_case:before {
		position: absolute;
		content: '';
		left: 8%;
		top: 18px;
		width: 68px;
		height: 1px;
		background: #df0024;
	}



	.inner_planning h3.small_case:before {
		left: -7%;
	}





	.mission_title {
		padding: 0px 30px;
	}
	.mission_title h1 span {
	
		transform: translate(-14%, 50px);
	}
	.inner_miission {
		display: block;
	}
	.left_mission{
		width:auto;
		text-align: center;
	}
	.right_mission {
		width: auto;
		text-align: right;
	}
	.planning_phase {
		padding: 45px 30px;
	}

	.inner_planning h1 span {

		transform: translate(-16%, 50px);
	}

	.inner_planning ul li {
		width: 49.333%;
		padding: 20px 15px;
	}

	.river_stream_structure {
		padding: 0px 30px;
	}

	.title_case h1::before {	
		transform: translate(-15%, 50px);
	}

	.inner_structure {
		display: block;
		margin: 25px auto;
	}
	.left_stream {
		width: auto;
		text-align: center;
	}
	.right_stream {
		width: auto;		
	}
	.inner_footer{
		display: block;
	}
	.foot-right {
		float: none;
		width: auto;
		text-align: center;
		margin-right: 0;
	}
	.foot-right h3 {
		margin: 30px 0px 20px;
	}
	.foot-right h3 span {
		display: none;
	}

	.foot-right:nth-of-type(2){
		width:auto;
	}

	.header-button, .header-contact
	{
		display:none;
	}

	.site-header aside, .contactus-info aside
	{
		width:auto;
		float:none;
		padding-top:0;
	}
	.social-icon
	{
		margin: 33px 70px 33px 0px;
	}
	.banner
	{
		height: 400px;
	}
	.nav
	{
		display:none;
	}
	.navbar
	{
		display:block;
	}
	.what_h2o{
		display: block;
	}
	.what_h2o aside {
		width: auto;
		float: none;
	}
	.what_h2o aside.right{
		width:auto;
		float: none;
	}
	.planing_main {
		padding: 50px 50px;
	}
	.action_plan {
		display: block;
		padding: 50px 10px 20px;
	}
	.action_plan aside{
		width: auto;
    padding: 40px;
    margin: auto;
    float: none;
	}
	.block{
		display: block;
		
	}
	.block aside{
		float: none;
		text-align: center;	
	}
	.execution_sec {
		padding: 40px 40px;
		align-items: center;
	}
	.execution_sec aside {
		width: auto;
		padding: 25px;
		float: none;
	}
	.success, .empsection, .awards {
		display: block;
		position: relative;
		padding: 25px 40px;
	}
	.empsection aside{
		width: auto;
		float: none;
		text-align: center;
	}
	.contact_form fieldset {
		width: 100%;
		margin: auto;
	}
	
}


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

	.about_us{
		margin-top: 0em;
	}

	.faci_icon{
		height:fit-content;
	}
	.mission_vission:before {
		content: '';
		position: absolute;
		left: 0px;
		width: 3em;
		height: 13em;
		background: #df0024;
		top: 10em;
		z-index: -1;
	}

	.small_case:before {
		position: absolute;
		content: '';
		left: 8%;
		top: 18px;
		width: 68px;
		height: 1px;
		background: #df0024;
	}



	.inner_planning h3.small_case:before {
		left: -7%;
	}




	.left_abt, .right_abt {
		width: auto;
		padding: 0px 30px 0px;
	}
	.right_abt h1 {
		font-size: 30px;		
		margin-bottom: 45px;
	}
	.right_abt h1 span {	
	
		width: 50%;
		height: 20px;
		transform: translate(-30%, 30px);
	}
	.mission_vission {
		padding-top: 40px;
	}
	.mission_title {
		padding: 0px 20px;
	}
	.mission_title h1 {
		font-size: 30px;
	}
	.planning_phase {
		padding: 20px 30px;
	}
	.inner_planning h1 {
		font-size: 30px;
	}
	.inner_planning h1 span {
		transform: translate(-27%, 40px);
		width: 50%;
	}
	.inner_planning ul li {
		width: auto;
		text-align: center;
		padding: 20px 0px;
	}

	.inner_planning ul li .context{
		display: block;
		position: absolute;
		left: 8%;
		top: 72%;
		background: #fff;
		width: 83%;
	}
	.inner_planning ul li .context .price{
		position: absolute;
		bottom: 9em;
		right: 1em;
		background: #df0024;
		padding: 13px 34px;
		font-size: 18px;
	}


	.river_stream_structure {
		padding: 68px 30px;
	}

	.river_case h3.small_case:before{
		opacity: 0;
	}


	.inner_structure {
		display: block;
		margin: 25px auto;
		padding: 0;
	}

	.desc {
		background: #fff;
		height: fit-content;
	}

	.inner_group h3.small_case:before{
		display: none;
	}
	.inner_group{
		padding: 50px 40px;
	}
	.inner_group ul{
		display: block;
	}
	.inner_group ul li {
		width: auto;
	}
	.get_in_touch{
		padding: 80px 20px;
	}

	i.fas.fa-map-marker-alt {
		
		left: -83px;
		top: 1px;
		
	}

	.inner_get_in h1{
		width: auto;
	}
	.newsletter {
		width: 100%;
		float: none;
	}


	.title_case h1 {
		font-size: 30px;
	}
	.title_case h1::before {
		transform: translate(-29%, 60px);
		width: 50%;
	}
	.right_stream {	
		padding: 0 0px;
	}
	.inner_get_in {	
		padding: 60px 24px
	}
	.get_in_touch::before {
		height: 73%;
	}
	.foot_wave_effect {
		display: block;
		position: absolute;
		margin-top: -14px;
	}
	.inner_get_in h1 {
		text-transform: uppercase;
		font-size: 30px;
	}
	.comman_main{
		padding: 130px 31px;
	} 
	.comman_main h1 {
		font-size: 30px;
	}
	.profile_section {
		padding: 40px 30px 0px;
	}
	.what_h2o {
		padding: 0px 30px;
	}
	.what_h2o aside.right {
		
		padding: 0px;
	}
	.section_main div {
		padding: 0px;
	}

	.planing_main {	
		padding: 40px 30px;
	}
	.action_plan {	
		padding: 30px 30px 20px;
		display: block;
	}
	.action_plan aside {
		float: none;
		width:auto;
		padding: 0;
	}
	.block {
		display: block;
		padding: 0px 30px;
	}
	.execution_sec {
		padding: 40px 30px;
		align-items: center;
	}
	.execution_sec aside {
		width: auto;
		padding: 0px;
		float: none;
	}

	.success, .empsection, .awards {
		display: block;
		position: relative;
		padding: 20px 20px;
	}
	.empsection aside{
		width: auto;
		float: none;
		padding: 0;
		text-align: center;
	}
	.contact_form {
		padding: 15px;
		display: block;
	}
	.contact_form fieldset {
		width: auto;
		margin: auto;
	}
	.inner_btm_foot .left, .inner_btm_foot .right{
		float: none;
		text-align: center;
	}
	.nav-shrink .site-header{
		padding: 15px 0px 30px;
	}
	.inner_planning{
		margin-bottom: 6em;
	}
	.facilities1 {
		display: block;
		margin: auto;
	}
	.facilities1 .item {
		width: 85%;
		float: none;
		margin: auto;
	}
	.facilities1 .item .faci_icon {
		height:auto;
	}
	.success .quality_room {
		width: 90%;
		margin: 20px;
	}
	.address {	
		padding: 30px;
	}
	.address .inner_contact{
		display: block;
		padding-left: 0px;
	}
	.branch_add{
		width:auto;
		margin: 30px 5px;
		box-shadow:none;
	}
	input[type=submit]{
		width:45% !important;
	}
	.ct-addrs{
		width:auto;
	}

	
}


@media only screen and (max-width:480px)
{
	.services ul li, .productlink ul li
	{
		width: 100%;
	}
}
@media only screen and (max-width:320px)
{
	
}