/* CSS Document */
html { background-color: #6E8C8D; } 
body {
    min-height: 100vh;
    max-width: 1440px;
    /*background-color: papayawhip;*/ 
    margin: 0 auto;
}
.body{
   font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 100%;
	background-color: #6E8C8D;
/*	margin: 0px;*/
	padding: 0px;
	margin: 0px;

	/*margin:auto;
	/*display: flex;
	justify-content: center;*/
	/*padding: 20px 40px 50px 40px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"active;
	background-color :#6F8C8F; 	
	/*max-width:1430;*/
	}
.wrapper{
   /* width: 1430px;*/
    height: 732px;
    background-image: url("images/bgheader.png");
	background-repeat: no-repeat;
	}
.logo{	
	/*display: block;*/
	display: flex;
justify-content: center;
	padding-bottom: 20px;
	}
.container{
	position:relative;
  	width: 1430px;		
	}
/*This is the Grid for the nav bar pics and nav buttons*/
.grid-8-columns{	
	width: 1430px;
	display: grid;
    grid-template-columns: 149.2px  171px  149.2px  171px 149.2px  171px  149.2px 171px  149.2px; 
	grid-template-rows:171px 50px;
grid-gap: 0px;
	place-items:center;
	font-size: 22px;
	}
.grid-8-columns a{
	padding-top:10px;
	text-decoration: none;	
	color: #f7eccc;	
	}
.grid-8-columns a:hover{
	background-color: #ddd;
	transition: background-color 0.5s;
	 color: white;
	}
.yelbox{
	height:171px;
	width:149.2px;
	background-image: url("images/yelbox.jpg")
	}
.massage{
	height:171px;
	width:171px;
	background-image: url("images/massage.jpg")
	}
.physio{
	height: 171px;
	width:171px;
	background-image: url("images/physio.jpg")
	}
.acupuncture{
	height: 171px;
	width:171px;
	background-image: url("images/acu.jpg")
	}
.contact{
	height: 171px;
	width:171px;
	background-image: url("images/contact.jpg")
	}
/*This is the reception picture*/
.reception-image{
		display: flex;
justify-content: center;
	}
/*this is a container for the bottom part of the page*/
.botwrap{
	position: relative;
    width: 1430px; 
    margin: 0;
    background-size: cover;
	}
/*This is the heading just bellow the nav bar*/
.topic_hed{
	/*position:center; */
	display: flex;
justify-content: center;
	/*padding-bottom: 20px;*/
	padding-top: 50px;
	padding-bottom: 85px;
/*	background-color: aqua;
	max-width: 700px;*/
	/*width:600px;*/
	color:#f7eccc;
	/*font-weight: bold;*/ 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	
	letter-spacing: 2px;
	
	}
.topic_hedaboutus{
	display: flex;
	justify-content: center;
	padding-top: 20px;
	padding-bottom:60px;
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.topic_hed{
	display: flex;
	justify-content: center;
	padding-top: 50px;
	/*padding-bottom:20px;*/
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.topic_hedphys{
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 60px;
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.topic_hedmas{
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 60px;
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.topic_hedacu{
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 60px;
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.topic_hedbook{
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 60px;
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.topic_hedfacilities{
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 60px;
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.topic_hedcontact{
	display: flex;
	justify-content: center;
	padding-top: 40px;
	padding-bottom:10px;
	color:#f7eccc; 
	font-size: 55px;
	text-align: center;
	font-style: italic;
	letter-spacing: 2px;
	}
.welcome-text{
	background: #f7eccc;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px
		padding-right: 20px
	line-height: 36px;
	text-align: center;
	font-size: 30px;
}
.welcome-textaboutus
{
	background: #f7eccc;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px
	line-height: 36px;
	font-size: 30px;
}
/*.about_us{
	font-size: 30px;
	color: #f7eccc;
/*	padding-left: 50px;*/

.welcome-textfacilities{
	background: #f7eccc;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px
	line-height: 36px;
	font-size: 30px;
}
.welcome-textbooking{
	background: #f7eccc;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px
		padding-right: 20px;
	line-height: 36px;
	text-align: center;
	font-size: 30px;
}
.welcome-textbooking a{
	
	/*background:#408e96;*/
	colour: #00000;
}
.welcome-textbooking a:hover {
  	background-color: #ddd;
  	color: white;
	transition: background-color 0.5s;
}
.fees{
font-size: 40px;
	color: #00000;
text-align: center;
		font-style: italic;
}
img {
  margin: auto;
  display: block;
		
}
	.media {
 width: 1430px;
  display: grid;
  grid-template-columns: 2fr 3fr;	
  grid-template-areas: "img content";
   column-gap: 40px;
}

.media .image_m1 {
  grid-area: img;
	height:645px;	
	background-image: url("images/massage_07.jpg");
	background-repeat: no-repeat;
	background-position: center;
}
.media .image_p1 {
  grid-area: img;
	height:450px;	
	padding-top: 60px;
	background-image: url("images/physio_05.jpg");
	background-repeat: no-repeat;
	background-position: center;
}
.media .image_a1 {
  grid-area: img;
	height:500px;	
	background-image: url("images/acu_06.jpg");
	background-repeat: no-repeat;
	background-position: center;
}
.media .text {
  grid-area: content;
	padding-left: 25px;
	padding-right: 20px;
	padding-top: 0px;
  /*padding:0 20px 0 20px;*/
  font-size: 24px;
	background-color: #f7eccc;
}
.media .textm {
  grid-area: content;
	padding-left: 25px;
	padding-right: 20px;
	padding-top: 30px;
  /*padding:0 20px 0 20px;*/
  font-size: 24px;
	background-color: #f7eccc;
}
.media .textp {
  grid-area: content;
	padding-left: 25px;
	padding-right: 20px;
	padding-top: 25px;
  font-size: 24px;
	background-color: #f7eccc;
}

	.media2 {
  width:1430px;
  display: grid;
  grid-template-columns: 3fr 2fr;	
  grid-template-areas: "content img";
  margin-bottom: 10px;
			grid-gap: 10px; 
	 column-gap: 40px;
}

.media2 .image_m2 {
  grid-area: img;
	height:450px;
	background-image: url("images/massage_08.jpg");
	background-repeat: no-repeat;
	background-position: center;
}
.media2 .image_p2 {
  grid-area: img;
	height:450px;
	background-image: url("images/physio_07.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

.media2 .image_a2 {
  grid-area: img;
	height:400px;
	padding-top: 60px;
	background-image: url("images/acu_07.jpg");
	background-repeat: no-repeat;
	background-position: center;

}
.media2 .textm {
  grid-area: content;
text-align: center;
  font-size: 24px;
	padding-left: 40px;
	background-color: #f7eccc;	
	padding-top: 0px;
}
.media2 .textp {
  grid-area: content;
text-align: center;
word-break:keep-all;
  font-size: 24px;
	padding-left: 40px;
	background-color: #f7eccc;	
	padding-top: 0px;
}
.media2 .texta {
 grid-area: content;
text-align: center;
word-break:keep-all;
/*	text-align: center;*/
  font-size: 24px;
	padding-left: 40px;
	padding-right: 40px;
	background-color: #f7eccc;	
}
/*this is the staff bio section*/

.biogrid {
  /*border: 0px solid #408e96;*/
  display: grid;
  grid-template-areas:
    "one  two two";  
	grid-template-rows: auto;
  gap: 5 30px;
  grid-template-columns: 200px 400px;
 

}

.grid > * {
  border-radius: 5px;
  
}

.one {
  grid-area: one;
	  display: flex;
        align-items: center;
        justify-content: center;
	padding-left: 20px;
	
}

.two {
  grid-area: two;
	color: #F4EBCF;
	font-size: 22px;
	padding-left: 40px;
	padding-right: 40px
	
}
.treatmentheading{
	font-size: 30px;
	position:center; 
	font-size: 40px;
	color:#f7eccc;
	text-decoration-line:underline;
	font-style: italic;
	font-weight: bolder;
	padding-bottom: 30px;
	font-weight:100;  
	letter-spacing: 2px;
	padding-left: 20px;
	
}
/*this is for contact page*/
.flex {
  display: flex;
}

.flex > * {
  width: 50%;
	padding-left: 150px;
}
.right{
	color: #f7eccc;
	padding-left: 40px;
	font-size: 30px;
}
.facilitiestext{
	color: #f7eccc;
	font-size: 30px;
}
.botwrap{align-content: center;
}
/*This is the bottom slogan above footer*/
.slogan{
	color: #f7eccc;
	font-size: 24px;
	padding: 5px;		
	}
.slogan p:nth-of-type(1) {
  	color: #f7eccc;
	float: center;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: 5px;
	text-align: center;
	padding:40px 0 20px ;
	}

/*This is the footer of each page*/

.footer{
	margin:auto;
	background-color:#408e96;
	list-style: none;
	margin-top: 30px;
	width: 1425px;
	
	}

.footer ul {
	list-style-type: none;
	display: inline-block;
	}
.footer ul li a {
	
	text-decoration: none;
	color: #f7eccc;
	display: inline-block;
	text-transform: uppercase;
	padding: 25px;
	
	}

.footer li{
	display: inline-block;	
	}
.footer a:hover {
  	background-color: #ddd;
  	color: white;
	transition: background-color 0.5s;
}