@charset "UTF-8";
/* CSS Document */

/******************Basic Styles**********************/

body{
	font-family:poppins, sans-serif;
	background-color:#D8DBE2;
	}

h1{font-family:megrim, sans-serif;
text-align: left;
font-size:8em;
margin:0;
color:#dadbe2;}

h1 a:link{
	text-decoration:none;
	color:#D8DBE2;
}
h1 a:visited{
	color:#D8DBE2;
}
 h2, h3{ 
	 font-family:megrim, sans-serif;
	 color:#373f51;
	 font-size:3em;
	}

.your{
    font-family: give you glory, poppins;
    color: #daa49a;
    font-weight: bold;
    transform: translateY(-5%) rotate(-18deg);
    display: inline-block;
    font-size: 1.7em;
}


#time{
	color:#daa49a;
	font-size:1.9em;
}


/**************hero img and nav styles*****************/

.h1{font-family:poppins, sans-serif;
	font-size:2em;
	color:#D8DBE2;
    padding-top:35px;}

.hero-img{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/cover1020x680.jpg");
    height: 100vh;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}
.hero-text{
	text-align: center;
  position:absolute;
  top: 80%;
  left: 52%;
  transform: translate(-50%, -50%);
	
}
.navfix{display:flex;
		align-items:baseline;
		}
nav ul{
	display:flex;
	}

nav ul li{

	list-style-type:none;
	margin:10px;
	padding:10px;
}

nav ul li a{
	
	text-decoration:none;
	color: #96BBBB;
	font-family:'Poppins', sans-serif;
	font-size: 1.2em;
	position:relative;
	}
nav ul li a:hover{
	color:#96BBBB;
	}

nav ul li a:before{
	content:"";
	position:absolute;
	width:100%;
	height:2px;
	bottom:0;
	left:0;
	background-color:#daa49a;
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.2s ease-in-out 0s;
}

nav ul li a:hover:before{
	visibility: visible;
	transform: scaleX(1);
	
}

/*******************Top Styles*********************/

 
	
#top{
	display:flex;
	padding:20px;
	background-color:#C19875;
	 }
#different{
	padding: 30px;
	background-color: #36453B;
	flex: 1;
	background-image: url(images/herbivore-products800x533.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 10px;
}
#meet{
	padding: 30px;
	background-color: #D8DBE2;
	flex: 2;
	
	background-size:cover;
	background-repeat:no-repeat;
	
}
#meet h2{
	color:#373f51;
}
#meet p{
	font-weight: 900;
	padding-top: 20px;
	line-height:1.3em;
	color:#373f51;
}

#different p{
	color:#D8DBE2;
	font-weight:900;
	line-height:1.4em;
	
}
#different h2{
	color:#D8DBE2;
	text-align:center;
}



/******************Services******************************/
#services h3{
    color: #d8dbe2;
    text-align: center;
    text-decoration: underline #c19875;
    	
}
#services{
  	margin-left:0px;
    padding-bottom:20px;
	padding-left:0px;
	}
.h2{
	text-align: center;
	font-size:4em;
	
	
}
/************** Card Flip Styles ********************/
.flip-container{
	background-color:transparent;
	width:375px;
	height:250px;
	perspective: 1000px;
}

.flipper{
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
	padding:0px;
	transition:transform 0.9s;
	transform-style: preserve-3d;
	
}

.flip-container:hover .flipper{
	transform:rotateY(180deg);
}
.front, .back{
	position:absolute;
	width:100%;
	height:100%;
	-webkit-backface-visibility: hidden;
}
.back{
    background-color: #96BBBB;
    color: #D8DBE2;
    font-size: .96em;
	line-height:1em;
    transform: rotateY(180deg);
    
}
/***************Testimonial/sign up*************************/
#testimonial p{ color:#c19875;
	font-size:1.5em;
	font-weight:bold;}

#testimonial{
	text-align:center;
}
.quotation{
  font-size: 30px;
  margin: 0 auto;
  quotes: "\201C""\201D""\2018""\2019";
  padding: 10px 20px;
  line-height: 1.4;
}

.quotation:before {
  content: open-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: -10px;
  position: relative;
  top: 10px;
  color:#36453b;
  font-size: 2em;
	font-family:"times new roman";
}
.quotation::after {
  content: close-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: 10px;
  position: relative;
  top: 10px;
  color: #36453b;
  font-size: 2em;
	font-family:"times new roman";
}
.gwyen{ margin:0;
	text-align: right;
  font-size: 1.5em;
  font-style: italic;}

.form-container{
	color:#373f51;
}
.form-container .btn{
	color:#373f51;
	background-color:#f4f4f9;
	font-weight:bold;
}
.form-container input[type=name], .form-container input[type=email]{
	background-color:#F4F4F9;
	font-family:'poppins', 'sans serif';
	font-weight:200;
}

.location{
	font-weight:bolder;
	color:#F4F4f1;
}
.free{
	color:#373f51;
}

.grand{
	font-size:4em;
}


/***********************Footer Styles************************/
footer {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/leaves600x296.jpg);
	padding:10px;
}

footer section{
	display:flex;
}
footer p {
	text-align:center;
	font-size:1.5em;
	color:#D8DBE2;
	
}
footer h2{
	color:#D8DBE2;
	font-size:3em;
}

footer article{
	margin-left:150px;
}
footer article a{
	padding:10px;
	margin-left:10px;
}



/********************************Media***************************/

@media only screen and ( min-width : 375px )
{ 
	nav ul{
		display:flex;
		flex-wrap:wrap;
	}
	
	.hero-img{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/cover362x566.jpg");
    height: 90vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-attachment:scroll;
    }
	#time{
		font-size:1.5em;
		padding-bottom:20px;
		color:#daa49a;
	}
	
	#top{
		display:flex;
		flex-direction: column;
		}
	
	#top article{
		order:1;
	}
	
	#meet h2{
	font-size:3em;
	}
	
	#meet{
		background-image: url(images/desk600x801.jpg);
		background-size:cover;
		margin-bottom:4px;
		}
	#different{
		margin-right:0px;
	}
	#meet p{
		font-size:1em;
	}
	.good{
		color:#daa49a;
		font-family:'give you glory', 'sans serif';
		font-size:1.3em;
	}
	#services{
    
  	margin-left:20px;
    padding-bottom:20px;
	padding-left:0px;
	}
  
	#services h3{
		font-size:2em;
		color:#36453B;
	}
	.h2{font-size:2em;}
	
	.h1{ font-size:1.5em;}
	footer{
		background-image: url("images/leaves600x296.jpg");
		background-size:cover;
		}
	
	
	footer h2{
		font-size:2em;
	}
	footer p{
		font-size:1.5em;
	}
}
/************************768******************/

@media only screen and ( min-width : 768px ){
	
	.hero-img{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/cover1020x680.jpg");
   	 height: 100vh;
    	width: auto;
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: cover;
   		position: relative;
    	background-attachment: fixed;
}
	#meet{
	background-image: url("images/desk600x801.jpg");
	order:1;
	margin:20px;
	 }
	
	#time{
	color:#daa49a;
	font-size:2em;
}


	#meet h2{
		font-size:5em;
		color:#373f51;
	}
	#meet p{
		font-size:2em;
	}
	#top{
		display:flex;
		flex-direction: row;
	}
	#different{
    background-size: contain;}
	
	#different h2{
		color:#DADBE2;
		font-size:3.2em;
	}
	#different p{
		color:#d8dbe2;
		font-size:1.3em;
	}
	
	#services{
		display:block;
	}
	#facial{
		float:left;
		
	}
	
	#massage{
		float:right;
		
	}
	
	#nails{
		float:left;
		padding-left:230px;
		
	}
	
	footer article{
		margin-left:200px;
	}
	footer aside{
		margin-left:50px;
	}
	.good{
		color:#daa49a;
		font-family:'give you glory', 'sans serif';
	}
	
	#testimonial{
			clear:both;
			margin:0px;
			padding:20px;
		}
	.h2{
			background:#D8DBE2;
			 font-size:3.5em;
		}
	

}
	
	
	



/*****************************1024px*************************/
@media only screen and ( min-width : 1024px){
	
	#meet h2{
		color:#373f51;
		font-size:4.5em;
		}

	#meet{
		background-image: url("images/flowerhand1000x425.jpg");
			
	}
	#time{
	color:#daa49a;
	font-size:3em;
	padding-bottom:10px;
}

	#meet p{
		font-size:2em;
		color:#F4F4F9;
	}
	#top{
		height:60vh;
	}
	#different h2{
		font-size:3em;
		color:#d8dbe2;
	}
	#different p{
		color:#F4F4F9;
		font-size:1.1em;
		text-align: center;
	}
	
	#different{
		background-size:cover;
	}
	
	footer{
		background-image: url("images/leaves1000x493.jpg");
	}
	footer article{
		margin-left:220px;
	}
	footer aside{
		margin-left:100px;
	}
		
	.good{
		color:#36463b;
	}
	#nails{
		clear:both;
		margin-left:85px;
	}
	#services{
		margin:20px;
	}
	.back{
    background-color: #96BBBB;
    color: #D8DBE2;
    font-size: 1.2em;
	line-height:1.3em;
    transform: rotateY(180deg);
    
}
	.h1{
		font-size:3em;
	}
	
}


	
/*************************1440px*****************************/
	
	@media only screen and ( min-width : 1440px){
	footer article{
		margin-left:500px;
	}
	footer aside{
		margin-left:200px;
	}
	#different p{
			font-size:1.3em;
	}	
	#time{
	color:#daa49a;
	font-size:4em;
	padding-bottom:20px;
}
	#services{
			display:flex;
		    justify-content: space-around;
		}
		#services h3{
			font-size:3em;
			
			}
		#meet h2{
			font-size:5em;
		}
		.h2{
			font-size:4em;
		
		}
		#nails{
			margin:0px;
			padding:0px;
		 }
	.h1{
		padding-top:100px;
	}
	
}
/*/******************************1800***********************/
 @media only screen and ( min-width : 1850px){
		footer article{
		margin-left:900px;
	}
	
	 	#different h2{
		font-size:4em;
		color:#DADBE2;
	}
	#different p{
		color:#F4F4F9;
		font-size:1.6em;
	}
	
}