/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
html{
  font-size: 62.5%;
}
body {
  font-family: 'EB Garamond', serif;
  font-size: 1.8rem;
  
  /* Add some padding on document's body to prevent the content
    to go underneath the header */
  padding-top: 60px;
}
a{
  text-decoration: none;
  color: #000;
}

/*************** font size ****************/
h1{
  font-size: 4.8rem;
}
h2{
  font-size: 3.6rem;
}
h3{
  font-size: 2.1rem;
}
a{
  font-size: 1.8rem;
}
.wrapper-for-story p{
  font-size: 2.1rem;
}

/******************************************
/* LAYOUT
/*******************************************/

/*************** header style ****************/
header{
  height:fit-content;
  background-color: rgb(56, 55, 55);
  font-family: 'Jost', 'Roboto';
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
}
header > *{  
  margin: 20px 0;
}
header nav{
  flex: 2;
  text-align: center;
}
header nav ul{
  display: flex;
  justify-content: center;
  margin: 0;
  list-style: none;
}
header nav ul li{
  padding: 0 2%;
  text-decoration: none;
}
header a{
  color: #fff;
}
button{
}

/*************** main style ****************/
main{
  background-image: url("../img/mainpic3.jpg");
  background-size:cover;
  background-repeat: no-repeat;
  background-position:right;
  height: 550px;
  display: flex;
  align-items: center;
}
.container-for-h1{
  flex-basis: 50%;
  margin: 0 0 0 5%;
}
h1{
  margin-bottom: 30px;
  line-height: 1.25;
  color: #000;
  text-align: left;
  font-size: 4.8rem;
}
button{
  background-color: rgb(88, 90, 92);
  color: white;
  padding: 5px 2%;
}

/*************** services-page style ****************/
#services-page{
  padding: 20px 0;
  height: 550px;
}
#services-page h2{
  text-align: center;
}
.sub-section{
  display: flex;
  justify-content: center;
}
.sub-section a{
  border-bottom: 2px solid gray;
  margin: 0 2%;
}
.wrapper-for-sub-services{
  display: flex;
  padding: 0 20%;
  flex-basis: 60%;
  height: 400px;
  align-items: center;
}
.wrapper-for-sub-services span{
  font-weight: bold;
} 
#left-side-services,
#right-side-services{
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}
#left-side-services{
  padding:0 5% 0 0;
}
#right-side-services{
  padding:0 0 0 5%;
  border-left: 2px solid gray;
}

.items{
  height: 120px;
}
#services-page h3{
  display: inline-block;
  width: 85%;
}
.items p{
  margin: 0;
}

/*************** story-page style ****************/
#story-page{
  display: flex;
}
.wrapper-for-story-pic,
.wrapper-for-story{
  flex-basis: 50%;
  height: 550px;
}
.wrapper-for-story-pic{
  background-image: url(../img/Our-Story.png);
  background-size: cover;
  background-position: center;
}
.wrapper-for-story{
  padding: 0 10% 0 5%;
  text-align: justify;
  background-color: rgb(244, 228, 208);
}

/*************** shop-page style ****************/
#shop-page{
  display: flex;
  height: 450px;
  margin-top: 50px;
  padding: 30px 10%;
  justify-content: center;
}
.product{
  min-width: 20%;
  text-align: center;
  padding: 0 4%;
}
.product-image{
  height:300px;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  /* border: 1px solid gray; */
}
#product-1-image{
  background-image: url(../img/facial-gel.jpg);
}
#product-2-image{
  background-image: url(../img/wonderglow.jpg);
}
#product-3-image{
  background-image: url(../img/pureshine.png);
}
#product-4-image{
  background-image: url(../img/gelwonder.jpg);
}
.product h4,
.product span{
}

/*************** contact-page style ****************/
#contact-page{
  height: 300px;
  display: flex;
  align-items: center;
  padding: 0 15%;
  text-align: center;
  background-color: rgb(244, 228, 208);
}
.left-side-contact,
.right-side-contact{
  flex-basis: 50%;
  height: 200px;
}
.left-side-contact{
  border-right: 2px solid gray;
}
.right-side-contact form{
  display: inline-block;
}
.right-side-contact input,
.right-side-contact button{
  max-height: 30px;
}

/*************** footer style ****************/
footer{
  height: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-content{
  flex-basis: 75%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: top;
  padding: 50px 5%;
}
.footer-content > *{
  flex: 1;
  padding: 0 2%;
}
.footer-content h4
{  
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(179, 179, 179);
}
.footer-content ul{
  padding-left: 0;
}
.footer-content li{  
  list-style: none;
  display: block;
  padding: 5px 0;
}
/*************** ob-banner style ****************/
.ob-banner{
  flex-basis: 25%;
  background-color: black;
  color: lightgray;
  font-family: 'Roboto', 'sans-serif';
  padding: 1% 0;
  width: 100%;
  height: 100px;
}
.ob-banner p{  
  font-size:1.8rem;
  text-align:center;
  margin: 0;
}
.ob-banner div{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.ob-banner div a{
  margin: 10px;
}

/******************************************
/* TWITTER LOGO
/*******************************************/
.fa {
  padding: 1rem;  
  font-size:2.5rem;
  width: 5rem;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

/* Twitter */
.fa-twitter {
  background: #55ACEE;
  color: white;
}
/* Github */
.fa-github {
  background: white;
}

/******************************************
/* ADDITIONAL STYLES
/*******************************************/