
/* TABLET MEDIA STYLESHEET */


/*	 HOME TABLET MEDIA QUERY	*/

@media only screen and (min-width: 600px) and (max-width: 970px){

	header{
/*		display: none;*/
	}

	.welcome-banner{
		width: 100%;
		height: 500px;
		padding-top: 140px;
		padding-left: 5%;
	}

	.welcome-banner-content{
		padding-right: 5px;
		width: 100%;
/*		border: 4px solid green;*/
	}

	.welcome-banner-content h1{
		font-size: 40px;
	}

	.header-icon-container a{
		margin-right: 20px;
	}

	.header-icon-container i{
		margin-right: 5px;
	}

	.header-icon-wrapper1{
		width: 70%;
		padding: 5px 20px;
/*		border: 2px solid white;*/
	}

	.header-icon-wrapper2{
		width: 30%;
		padding: 5px 20px;
	}

	.icon-section{
/*		border: 2px solid black;*/
		width: 100%;
		margin: auto;
		margin-top: 60px;
		margin-bottom: 80px;
	}

	.thriving{
		font-size: 15px;
	}

	.icon-content-wrapper{
		width: 50%;
		height: 350px;
	}

	.clear{
		clear: left;
	}

	.icon-text-container h2{
		font-size: 20px;
	}

	.newsletter-container{
		width: 100%;
/*		text-align: right;*/
		padding-right: 30px;
/*		border: 2px solid black;*/
	}

	.newsletter-container1{
		display: none;
	}

	.newsletter-container2{
		width: 80%;
		height: 100%;
/*		border: 2px solid blue;*/
		float: right;
	}

	.newsletter-container2 h2{
		font-size: 20px;
	}

	.newsletter-container2 form{
		height: 56px;
		width: 500px;
	}

	.first-footer-container{
		width: 80%;
	/*	border: 2px solid green;*/
		float: left;
		padding: 10px 40px;
	}

	.second-footer-container{
		width: 40%;
/*		border: 2px solid green;*/
		float: left;
		padding: 10px 30px;
	}

	.third-footer-container{
		width: 60%;
/*		border: 2px solid green;*/
		float: left;
		padding: 10px 30px;
		margin-bottom: 150px;
	}

	.footer-header{
		font-size: 20px;
	}




}

@media only screen and (max-width: 500px){
	.footer-wrapper{
		padding-bottom: 40px;
/*		border: 2px solid white;*/

	}

	.first-footer-container h2, .second-footer-container h2, .third-footer-container h2{
		font-size: 20px;
	}
}



/*	 CONTACT TABLET MEDIA QUERY	*/

@media only screen and (min-width: 849px) and (max-width: 1130px){

	.contact-page-wrapper{
		padding: 0px 10px;
		width: 100%;
/*		border: 4px solid black;*/
	}

	

}



/*	CONTACT PHONE MEDIA STYLESHEET  */

@media only screen and (min-width: 600px) and (max-width: 1130px){

	.email-container{
/*		border: 2px solid black;*/
		padding: 10px 0px;
	}

	.call{
		width: 100%;
	}

	.address-container{
		width: 100%;
	}

	.container{
		width: 80%;
	}
}


/*  ABOUT TABLET STYLESHEET  */

@media only screen and (min-width: 700px) and (max-width: 1000px){
	.whoarewe-section{
		width: 100%;
/*		border: 2px solid blue;*/
		padding-left: 20px;
		padding-right: 20px;
	}

	.imgbox img{
		width: 100%;
		min-width: 350px;
	}

	.textbox{
		width: 55%;
/*		border: 2px solid blue;*/
		padding: 0px 20px;
		padding-left: 60px;
		line-height: 1px;
		margin-top: 20px;
	}

	.imgbox2 img{
		width: 100%;
		min-width: 450px;
	}

	.textbox2{
		width: 55%;
	/*	border: 2px solid blue;*/
		padding: 0px 20px;
		padding-left: 60px;
		line-height: 1px;
		margin-top: 10px;
		float: left;
	}
}





/* ABOUT PHONE MEDIA STYLESHEET  */

@media only screen and (max-width: 700px){

	.about-page-container{
		padding-top: 40px;
	}

	.whoarewe-section{
		width: 100%;
/*		border: 2px solid blue;*/
		padding-left: 5px;
		padding-right: 5px;
	}

	.main-content{
		line-height: 23px;
		text-align: justify;
		padding: 0px 5px;
	}

	.whoarewe-section h2{
		font-size: 20px;
	}

	.whoarewe-section h1{
		font-size: 23px;
	}

	.our-mission-wrapper{
/*		border: 2px solid black;*/
		overflow: hidden;
		padding-top: 20px;
	}

	.imgbox{
		width: 100%;
		min-width: 200px;
/*		border: 2px solid black;*/
		padding-right: 0px;
		text-align: center;
		float: none;
	}

	.imgbox img{
		width: 100%;
		min-width: 200px;
	}

	.textbox{
		width: 100%;
	/*	border: 2px solid blue;*/
		text-align: left;
		padding: 0px 5px;
		padding-right: 0px;
		margin-top: 20px;
		float: none;
	}

	.textbox h2{
		text-align: center;
	}

	.imgbox2{
		width: 100%;
		margin-top: 30px;
		min-width: 200px;
/*		border: 2px solid black;*/
		padding-left: 0px;
		aspect-ratio: 1;
		text-align: center;
		float: none;
	}

	.imgbox2 img{
		width: 100%;
		min-width: 200px;
	}

	.textbox2{
		width: 100%;
	/*	border: 2px solid blue;*/
		text-align: left;
		padding: 0px 5px;
		padding-right: 0px;
		margin-top: 20px;
		float: none;
	}

	.textbox2 h2{
		text-align: center;
	}
}


/*  SERVICES TABLET MEDIA QUERY  */

@media only screen and (min-width: 1030px) and (max-width: 1100px){

	.services-container{
/*		border: 2px solid black;*/
		width: 99%;
	}


	.why-choose-us{
		width: 100%;
		border: 2px solid black;
	}

	.why-choose-us .imgbox{
/*		border: 2px solid green;*/
/*		float: left;*/
		width: 45%;
	}


	.why-choose-us .content-box{
		float: left;
		width: 55%;
/*		border: 2px solid black;*/
		margin-top: 25px;
	}
}



@media only screen and (min-width: 700px) and (max-width: 1030px){

	.services-container{
/*		border: 2px solid black;*/
		width: 99%;
	}

	.services-container .contents{
		width: 45%;
		margin: 2.5%;
	}

	.why-choose-us{
/*		border: 2px solid black;*/
		width: 100%;
	}

	.why-choose-us .imgbox{
/*		border: 2px solid green;*/
/*		float: left;*/
		width: 50%;
		margin-top: 20px;
	}


	.why-choose-us .content-box{
		width: 50%;
/*		border: 2px solid black;*/
		margin-top: 0px;
	}


}



/*  SERVICES PHONE MEDIA STYLESHEET  */

@media only screen and (max-width: 700px){

	.services-container{
/*		border: 2px solid black;*/
		width: 99%;
	}

	.services-container .contents{
		width: 95%;
		margin: 2.3%;
		margin-bottom: 30px;
		height: 100%;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.services-container h1{
		font-size: 25px;
	}

	.contents h2{
		font-size: 20px;
	}

	.why-choose-us{
/*		border: 2px solid black;*/
		overflow: hidden;
		width: 100%;
		margin: auto;
		margin-top: 60px;
	}

	.why-choose-us .imgbox{
	/*	border: 2px solid green;*/
		float: none;
		width: 100%;
	}


	.why-choose-us .content-box{
		float: none;
		width: 100%;
	/*	border: 2px solid black;*/
		margin-top: 25px;
		padding-right: 10px;
	}

	.why-choose-us .content-box h2{
		font-size: 20px;
	}

}






/*  PHONE MEDIA STYLESHEET  */


/*	 HOME PHONE MEDIA QUERY	*/

@media only screen and (max-width: 600px){

	.welcome-banner{
		width: 100%;
		height: 80vh;
		padding-top: 100px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.welcome-banner-content{
		width: 100%;
		text-align: center;
	}

	.welcome-banner-content h1{
		font-size: 34px;
	}

	.welcome-text{
		font-size: 20px;
		word-spacing: 1.5px;
		line-height: 25px;
	}

	.icon-section{
		width: 100%;
		margin-top: 40px;
/*		border: 2px solid black;*/
		margin-bottom: 40px;
	}

	.thriving{
		font-size: 14px;
		padding: 0px 10px;
	}

	.icon-content-wrapper{
		width: 100%;
		height: 300px;
		float: none;
		margin-bottom: 50px;
	}

	.icon-text-container h2{
		font-size: 21px;
	}

	.newsletter-container{
		width: 100%;
		padding-right: 10px;
		padding-left: 10px;
	}

	.newsletter-container1{
		display: none;
	}

	.newsletter-container2{
		width: 100%;
		height: 100%;
		float: none;
	}

	.newsletter-container2 h2{
		font-size: 20px;
	}

	.newsletter-container2 form{
		width: 100%;
	}

	.newsletter-container2 form input{
		width: 70%;
		float: right;
		height: 100%;
	}

	iframe{
		height: 300px;
	}

	.first-footer-container{
		width: 100%;
	/*	border: 2px solid green;*/
		float: left;
		padding: 10px 10px;
	}

	.second-footer-container{
		width: 30%;
/*		border: 2px solid green;*/
		float: left;
		padding: 10px 10px;
	}

	.third-footer-container{
		width: 70%;
/*		border: 2px solid green;*/
		float: left;
		padding: 10px 10px;
		padding-left: 30px;
		margin-bottom: 170px;
	}

	.footer-header{
		font-size: 20px;
	}

	.footer-links hr{
		display: none;
	}

	.footer-links a{
		display: none;
	}

}



/*   CONTACT PHONE MEDIA QUERY	*/

@media only screen and (max-width: 850px){

	.contact-page-wrapper{
		padding: 0px 5px;
		margin-top: 50px;
		width: 100%;
/*		border: 4px solid black;*/
	}

	.contact-page-wrapper h1{
		font-size: 25px;
	}

	.contact-page-wrapper h2{
		font-size: 23px;
	}

	.address-container{
		width: 100%;
		max-width: 300px;
		height: 100%;
/*		border: 2px solid black;*/
		float: none;
		display: block;
		padding: 1px;
		margin-bottom: 40px;
	}

	.email-container{
		width: 100%;
		height: 100%;
		float: none;
		padding: 0px;

	}

	.call{
/*		min-width: 100%;*/
		max-width: 100%;
		padding: 5px 5px;
		margin-bottom: 10px;
		border-radius: 10px;
	}

}




/*   GET STARTED PHONE MEDIA QUERY	*/

@media only screen and (max-width: 600px){
	.container{
		margin-top: 40px;
		width: 98%;
/*		border: 2px solid black;*/
	}


	.welcome{
		margin-bottom: 16px;
	}


	.content-wrapper{
		font-size: 15px;
		width: 100%;
	}

	.content-wrapper h2{
		font-size: 20px;
	}


	form{
		width: 100%;
	}

	form input{
		font-size: 15px;
	}

	#inputBox, textarea{
		width: 100%;
		height: 56px;
		font-size: 15px;
	}

	.content-wrapper textarea{
		height: 150px;
		max-height: 200px;
		max-width: 100%;
		min-width: 100%;
	}
}









/* 	HOME LET'S-TALK MEDIA STYLESHEET  */

@media only screen and (min-width: 600px) and (max-width: 980px){

	.lets-talk-container{
		width: 90%;
	/*	height: 500px;*/
		margin: auto;
/*		border: 2px solid black;*/
	}

	.rgt-container{
		width: 100%;
		height: 180px;
/*		border: 1px solid green;*/
		float: none;
		padding: 40px 0px;
	}

	.left-container{
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: #f6f7f8;
/*		border: 1px solid red;*/
		overflow: hidden;
		float: none;
	}

	.rgt-container h1{
		text-align: center;
		font-weight: bolder;
		font-size: 36px;
		color: white;
	}

	.box{
		width: 50px;
		aspect-ratio: 1;
		background-color: #152644;
	/*	margin: auto;*/
		position: relative;
		left: 45%;
		top: 20px;
	}

	.message-wrapper{
		width: 100%;
		height: 100%;
		float: none;
/*		border: 2px solid black;*/
		padding: 40px 10px;
	}

	.message-wrapper form input{
		width: 500px;
		padding: 15px 16px;
		display: block;
		margin-bottom: 30px;
		font-size: 16px;
		border-radius: 20px;
		border: 1px solid grey;
	}

	.message-wrapper form{
		display: flex;
/*		border: 2px solid green;*/
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.message-wrapper textarea{
		height: 150px;
		width: 500px;
		max-width: 500px;
		max-height: 180px;
	}

	.message-wrapper .submit-btn{
		background-color: #152644;
		border: none;
		color: white;
		font-size: 16px;
		padding: 15px 5px;
		border-radius: 20px;
	}
}


@media only screen and (max-width: 600px){

	.lets-talk-container{
		width: 100%;
	/*	height: 500px;*/
		margin: auto;
/*		border: 2px solid black;*/
	}

	.rgt-container{
		width: 100%;
		height: 180px;
/*		border: 1px solid green;*/
		float: none;
		padding: 40px 0px;
	}

	.left-container{
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: #f6f7f8;
/*		border: 1px solid red;*/
		overflow: hidden;
		float: none;
	}

	.rgt-container h1{
		text-align: center;
		font-weight: bolder;
		font-size: 34px;
		color: white;
	}

	.box{
		width: 50px;
		aspect-ratio: 1;
		background-color: #152644;
	/*	margin: auto;*/
		position: relative;
		left: 45%;
		top: 20px;
	}

	.message-wrapper{
		width: 100%;
		height: 100%;
		float: none;
/*		border: 2px solid black;*/
		padding: 40px 10px;
	}

	.message-wrapper form input{
		width: 100%;
		padding: 15px 16px;
		display: block;
		margin-bottom: 30px;
		font-size: 16px;
		border-radius: 10px;
		border: 1px solid grey;
	}

	.message-wrapper form{
		display: flex;
/*		border: 2px solid green;*/
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.message-wrapper textarea{
		height: 150px;
		width: 100%;
/*		max-width: 500px;*/
		max-height: 180px;
	}

	.message-wrapper .submit-btn{
		background-color: #152644;
		border: none;
		color: white;
		font-size: 16px;
		padding: 15px 5px;
		border-radius: 20px;
	}
}










/*  RESPONSIVE NAV-BAR MEDIAQUERRY  */

@media only screen and (min-width: 800px) and (max-width: 970px){

	.logo-image-wrapper{
		width: 15%;
		padding-left: 50px;
	}

	.nav-container{
		width: 60%;
	}

	.get-started-container{
		width: 25%;
		padding-right: 20px;
	}

}


@media only screen and (max-width: 800px){

	.header-icon-container{
		display: none;
	}

	.logo-image-wrapper{
		width: 15%;
		padding-left: 50px;
	}

	.nav-container{
		display: none;
	}

	.get-started-container{
		display: none;
	}

	.menu-toggle-btn{
		display: block;
		float: right;
/*		border: 2px solid black;*/
		margin: 20px 30px;
	}

	.menu-toggle-btn button{
		border: none;
		background-color: white;
	}

	.responsive-nav-container{
		display: block;
		color: black;
		background-color: white;
		padding: 20px;
		position: fixed;
		top: 78px;
		left: -1100px;
		z-index: 1000;
		height: 100%;
		padding-top: 40px;
		text-align: center;
		width: 100%;
/*		border: 2px solid black;*/
/*		margin-top: -50px;*/
	}

	.links ul li{
		list-style-type: none;
		margin-left: -40px;
		margin-bottom: 40px;
	}

	.links ul li a{
		text-decoration: none;
		color: black;
		font-weight: bold;
		font-size: 16px;
	}

	.links ul li a:hover{
		color: red;
		transition: .5s;
		text-decoration: underline;
	}

	.links a{
		color: antiquewhite;
		text-decoration: none;
	}

	.links button{
		color: white;
 		background-color: #152644;
 		border: none;
 		padding: 10px 20px;
 		font-size: 14px;
 		border-radius: 5px;
	}

}