/* Main Styles */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
 }

 
 main{
	width: 90%;
    margin: 0 auto;
 }
 

@font-face {
    font-family:"actor regular";
    src: url("../fonts/actor/actor-regular.ttf")
}



 nav{
     background-color: #875A69;
     height: 50px;
 }
 
 nav ul {
    padding: 0;
    margin: 0;
    text-align: center; 
}

nav ul li {
    display: inline-block;
    padding: 15px;
	padding-bottom: 50px;
    margin: 0 100px;
}
 
 nav ul li a{
     display: inline-block;
     text-decoration: none;
     color: #FCF6F6;
	 font-size: 18px;
	 font-family:"actor regular";
 
 }



/* Page one */


.container {
    display: flex;
    align-items: center;
	padding-top: 90px;
	padding-bottom: 80px;
	justify-content: center;
}

.container {
    max-width: 1200px; 
	margin: 0 auto;
}




.pink-box {
    width: 45%;
    background-color: #FCF6F6;
    height: 550px;
	color: #875A69;
	font-size: 30px;
	text-align: center;
	padding: 100px;


}

.pink-box p {
  	color: #8A8782;
	font-family:"actor regular";
	font-size: 18px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
	line-height: 1.4;
	

}

.photo, .text-box {
    width: 50%;
    margin: 0 5px;

}



.photo {
    width: 55%;
    height: 550px; 
    object-fit: cover;
}



.booking-button {
    color: #3b3b3b;
    border: 1px solid #3b3b3b;
    padding: 10px 30px;
    display: inline-block;
    text-align: center;
    font-size: 15px;
	font-family: "pf-marlet-display", sans-serif;
    text-decoration: none;
    cursor: pointer;
    margin: auto; 
	
}


.linelogo {
    font-family: "pf-marlet-display", sans-serif;
    font-weight: 200;
    font-style: normal;
    color: #596856;
    text-align: center;
    margin-top: 90px;
    margin-bottom: 90px;
    font-size: 20px;
    border-top: 1px #8A8782;
    border-bottom: 1px #8A8782;
    padding: 150px;
}





/* page 1 */

 

.pink-section {
	display:flex;
    background-color: #FCF6F6;
    padding: 10px;
	width: 100%;
	height: 100%;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 60px;
}

.photo1 { 
 	width: 500px;
    height: 500px; 
    object-fit: cover;
}

.photo2 { 
 	width: 500px;
    height: 500px; 
    object-fit: cover;
	
}


.text-box1 {
	
	width: 400px;
	background-color: #D3C0C6;
	height: 300px;
	color: white;
	font-family:"actor regular";
	font-size: 20px;
	padding-top: 10px;
	padding: 35px;
	text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-left: -50px;
    z-index: 1;
	line-height: 1.5;
}


.innerpinksection{
	display:flex;
	align-items: center;
	justify-content: center;
	width: 70%;
	padding-top: 5%;
	
}




  .text-box2 {
	
	width: 400px;
	background-color: #D3C0C6;
	height: 300px;
	color: white;
	font-family:"actor regular";
	font-size: 20px;
	padding-top: 10px;
	padding: 35px;
	text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-right: -50px; 
    z-index: 1;
	line-height: 1.5;
	
}


.innerpinksection2{
	display:flex;
	align-items: center;
	width: 70%;
	padding-top: 10%;
	justify-content: center;
	
}


.logoandmenu{
	display:flex;
	align-items: center;
	justify-content: center;
	padding-top: 10px;
}

.logo{
	
	width: 120px;
	height: 120px;
	object-fit: cover;
}



.stars{
	
	width: 200px;
	height: 45px;
}

.ratings{
	display: flex;
	justify-content: center;
	height: 400px;
	width: 100%;
	padding-top: 80px;

	
}


.feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}




.feedback p {
  	color: #8A8782;
	font-family:"actor regular";
	font-size: 20px;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 20px;
	

}

.footer {
    background-color: #8A8782;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer-content {
    margin: 0 auto; 
}




/* Page two */




.text h2 {
    margin-bottom: 10px;
}



 h3 {
    font-family: "pf-marlet-display", sans-serif;
	font-weight: 400;
	font-style: normal;
}





	 


h4 {
	font-size: 24px;
	font-family: "pf-marlet-display", sans-serif;
	font-weight: 400;
	font-style: italic;
	color: #875A69;
 }



.greyparagraphtext{
	
	font-family:"actor regular";
	color: #8A8782;
	font-size: 20px;
	text-align: center;
}




.steepsandsweetstxt {
	font-size: 35px;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 20px;
	
}

.steepsandsweetstxt h3{
	color: #596856;
}


.steepsandsweetstxt p{
	font-size: 24px;
	font-family: "pf-marlet-display", sans-serif;
	font-weight: 400;
	font-style: italic;
	color: #875A69;
	padding-top: 10px;
 }



.steepsandsweetscontainer{

    display: flex;
    align-items: center;
	padding-top: 80px;
	padding-bottom: 80px;
	justify-content: center;
	max-width: 1200px; 
	margin: 0 auto;
}


.pastriespinkbox {
    background-color: #FCF6F6;
    height: 350px;
	color: #8A8782;
	display:flex;
	justify-content: center;
	text-align: center;
	padding-top: 40px;
	 width: 60%;
    margin: 0 5px;
	
}

.pastriespinkbox p {
  	color: #875A69;
	font-family:"actor regular";
	font-size: 20px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 20px;
	line-height: 1.4;
	

}

.pastriestxt h2{
	font-family: "actor regular";
	text-align: center;
	color: #8A8782;
	font-size: 22px;
	padding-bottom: 10px;
	
}


.pastriestxt{
	width: 75%
}

.cookiesandscones{
	width: 15%;
    margin: 0 5px;
	height: 350px;
	object-fit: cover;
}



.pinkteacontainer {
    display: flex;
    padding-top: 50px;
    padding-bottom: 80px;
    justify-content: center;
    max-width: 1200px; 
    margin: 0 auto;
}

.pinkteatxtboxes {
    background-color: #FCF6F6;
    height: 350px;
    color: #875A69;
    font-family: "actor regular";
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 40px;
    width: 65%;
    font-size: 20px;
    margin: 0 5px;
    position: relative; 
    z-index: 1;
line-height: 1.5;
}

.greybox {
    width: 400px; 
    height: 300px; 
    background-color: #8A8782;
    position: absolute; 
    z-index: 0;
	margin: 0 auto;
    right: 22%; 
    margin-top: -30px;
}


.greybox2 {
    width: 400px; 
    height: 300px; 
    background-color: #8A8782;
    position: absolute; 
    z-index: 0;
	margin: 0 auto;
	left: 22%;
 margin-top: -30px;
}



/* Page 3 */


.cateringservicesimg{
	
    width: 80%;
    height: 600px;
    object-fit: cover; 
	opacity: 0.1;
    top: 0;
    left: 0;
    z-index: -1; 
}


.cateringandservicestitle {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1; 
    color: white; 
}

.cateringandservicestitle h1 {
    font-size: 50px;
    font-family: "pf-marlet-display", sans-serif;
	font-weight: 400;
}

.cateringimgcontainer {
    width: 100%;
    height: auto;
	display: flex;
    justify-content: center;
	padding-top: 0%;
    
}

 .gallerycontainer {
    display: flex;
    height: 500px; 
	width: 100%;
	justify-content: center;
	align-items: center;
	padding-top: 50px;

  }


.itemscontainer {
    display: flex;
    height: 100%; 
	flex-wrap: wrap;
	width: 70%;
	align-items: center;

  }

.itemscontainer2 {
    display: flex;
    height: 100%; 
	flex-wrap: wrap;
	width: 70%;
	align-items: center;

  }


  .square {
    width: 50%; 
    height: 50%; 
    border: 8px solid white; 
	object-fit: cover;

	  
  }

.rectangle {
    width: 100%; 
    height: 50%;
    border: 8px solid white;
	object-fit: cover;
	object-position: center bottom;
  }

.rectangle2 {
    width: 30%; 
    height: 100%;
    border: 8px solid white; 
	object-fit: cover;
  }






.divider {
    width: 1px;
    height: 230px;
    background-color: #3b3b3b;
    margin: 0 50px;
    border: none;
}

.cateringcontainer {
    width: 100%;
    height: 700px;
	display: flex;
    justify-content: center;
	padding-top: 10%;
    
}


.lightpinksection {
    background-color: #FCF6F6;
    height: 100%;
	width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.catering-options {
    display: flex;
	justify-content: center;

   
}

.hightea {
    font-size: 16px;
    width: 100%;
    text-align: center;
}


.lightpinksection p{
	color: #596856;
	font-family: "actor italic";
	font-size: 20px;

}

.lightpinksection h4{
	color: #875A69;
	font-family: "actor regular";
	font-size: 20px;

}



.darkpurple-parentcontainer {
    width: 100%;
    height: 600px;
	display: flex;
    justify-content: center;
	padding-bottom: 40px;
	padding-top: 100px
	
}



.darkerpurplecontainer{
	background-color: #D3C0C6;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 70%;
    height: 100%;


	
		
}



.darkerpurplecontainer h3{
	text-align: center;
	color: white;
	
}

.darkpurpletextcontainer{

	display: flex;
    justify-content: center;
	width: 70%;
	height: 430px;
	flex-direction: column;
	padding-bottom: 40px;
	
}



.darkpurpletextcontainer2{
	background-color: #D3C0C6;
	display: flex;
    justify-content: center;
	width: 50%;
	height: 140px;
	flex-direction: column;
	
}

.darkpurple-parentcontainer2 {
    width: 100%;
    height: 600px;
	display: flex;
    justify-content: center;
	padding-bottom: 40px;
	padding-top: 100px
	
}



.darkerpurplecontainer2{
	background-color: #D3C0C6;
	display: flex;
    justify-content: center;
    align-items: center;
	width: 70%;
    height: 100%;


	
		
}



.darkerpurplecontainer2 h3{
	text-align: center;
	color: white;
	
}



/* Page 4 */




.shopbackgroundimg{
	
    width: 80%;
    height: 600px;
    object-fit: cover; 
    top: 0;
    left: 0;
    z-index: -1; 
}


.shopbackgroundtitle {
    position: absolute;
    top: 65%;
    left: 65%;
    transform: translate(-50%, -50%);
    text-align: left;
    z-index: 1; 
    color: white; 
}

.shopbackgroundtitle h2 {
    font-size: 35px;
    font-family: "pf-marlet-display", sans-serif; 
	font-weight: 400;
	font-style: italic;
}


.shopcontainer{
	display: flex;
	justify-content: center;
}


.brewingguides {
    position: absolute;
    bottom: 80px;
    left: 15%;
    background-color: #FCF6F6;
    padding: 90px;
	width: 25%;
    z-index: 1;
    color: white;
}

.brewingguides p {
    margin: 0;
	color: #875A69;
	text-align: center;
	font-family: "actor regular";
	font-size: 18px;
}

.brewingguides h2{
	font-size: 35px;
    font-family: "pf-marlet-display", sans-serif; 
	font-weight: 400;
	color: #596856;
	text-align: center;
}



.products1-container{
	
 display: flex;
  flex-direction: column;
  align-items: center;
	background-color: white;
	  justify-content: center;
}

.row {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
	align-items: center;
	align-content: center;
}

.row img {
    width: 150px; 
    height: 150px;
    margin: 50px; 
	object-fit: cover;
}



.piccontainer {
    text-align: center;
    margin-bottom: 10px;
}

.caption {
    margin-top: 5px;
    font-size: 18px;
    color: #875A69;
	text-align: center;
	font-family: "actor regular";
}

.dividerhorizontal{
	border-top: 1px solid #ccc; 
	width: 200px;
	margin: 10px auto;
	padding-bottom: 30px;
}



/* Page 5 */


.getintouch {
	background-color: #FCF6F6;
    padding: 150px;
	width: 50%;
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.getintouch p {
    margin: 0;
	color: #8A8782;
	text-align: center;
	font-family: "actor regular";
	font-size: 18px;
}

.getintouch h2{
	font-size: 35px;
    font-family: "pf-marlet-display", sans-serif; 
	font-weight: 400;
	color: #875A69;
	text-align: center;
	padding-bottom: 30px;
}


.getintouchcontainer{
	display: flex;
	justify-content: center;
	padding-top: 80px;
	padding-bottom: 50px;
}


.steepsandsweetstxtgrey p{
	font-size: 24px;
	font-family: "pf-marlet-display", sans-serif;
	font-weight: 400;
	font-style: italic;
	color: #8A8782;
	padding-top: 50px;
	padding-bottom: 60px;
	display: flex;
	justify-content: center;
 }




form {
    width: 60%;
    margin: 0 auto;
    overflow: hidden;
	text-align: center;
	padding-bottom: 20px;
}

.input-container {
    width: 50%;
    float: left;
    margin-bottom: 30px;
}

label {
    display: block;
    margin-bottom: 20px;
 	font-family: "actor regular";
	font-size: 18px;
	color: #875A69;


}


input[type="text"],
textarea {
    width: calc(100% - 22px);
    padding: 20px;
    border: 1px solid #707070;
    box-sizing: border-box;
	background-color: transparent; 
}

.textarea-container {
    clear: both;
    margin-bottom: 20px;
	
}

textarea {
    height: 200px;
}

input[type="submit"] {
     color: #FCF6F6;
    border: 1px solid #3b3b3b;
    padding: 10px 30px;
    display: inline-block;
    text-align: center;
    font-size: 15px;
	font-family: "pf-marlet-display", sans-serif;
    text-decoration: none;
	background-color: #596856;
    cursor: pointer;
    margin: auto; 
}



.contact-sectioncontainer{
	display: flex;
	justify-content: center;
	padding-top: 150px;

}

.contact-section {
    display: flex;
    justify-content: space-between;
	padding-top: 10px;
	width: 60%
}

.contact-method {
    text-align: center;
    width: 35%;
}

.contact-method h3 {
   font-family: "pf-marlet-display", sans-serif;
font-weight: 400;
font-style: normal;
	color: #596856;
	font-size: 22px;
}

.contact-method p {
    font-size: 20px;
    margin-top: 5px;
	color: #875A69;
	font-family: "actor regular";
}




.contact-page {
    background-image: url("../images/Good morning22.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.steepsandsweetstxt3 p{
	font-size: 24px;
	font-family: "pf-marlet-display", sans-serif;
	font-weight: 400;
	font-style: italic;
	color: #875A69;
	background-color: white;
	padding-top: 50px;
	padding-bottom: 60px;
	display: flex;
	justify-content: center;
 }





.steepsandsweetstxt3{
	background-color: white;
}







/* media queries */



















 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
 
 main {
 max-width: 600px;
 }
	 
	 
	 
nav ul li {
	padding: 10px;
    margin: 0 2%;
    }
	 
	 
	 
.container {
    padding-top: 80px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pink-box {
    width: 90%;
    padding: 60px;
    margin-bottom: 20px;
    text-align: center; 
}

.photo,.text-box {
    width: 90%;
    margin: 10px 0;
}

.photo {
    height: auto;
}

.booking-button {
    padding: 8px 20px;
    margin-top: 20px; 
}
	 
	 
.linelogo {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    padding: 30px;
 }	 
	 
	

.photo1,.photo2 {
 	width: 50%;
	height: 100%;
	margin: auto;
		

}

	 
	 
.pink-section {
    display: flex;
	justify-content: space-evenly;
}
	 
.text-box1,.text-box2 {
	width: 50%;
	height: 100%;
	padding: 20px;
	font-size: 14px;
	margin: auto;
	line-height: 1.4; 
		

}
	 
	 
.pastriespinkbox {
        width: 90%;
}

.pastriespinkbox p {
   font-size: 14px;
}

.cookiesandscones {
    width: 40%;
}
	 
	 
	 
	 
.pinkteatxtboxes {
   width: 90%;
   font-size: 15px;
}

.greybox,.greybox2 {
    width: auto;
    max-width: 300px;
    height: 250px;
}
	 
	 
.itemscontainer {
	width: 100%; 
}
	 
	
.itemscontainer2 {
    width: 90%;
}

.rectangle {
   	height: 30%;
	width: 100%;
}

.rectangle2 {
    width: 100%; 
    height: 30%;

}
	 
	 
	 
.lightpinksection {
   width: 90%;
}
	 
.catering-options {

	align-items: center;
	justify-content: center;
	width: 100%;
	display: flex;
	flex-direction: column;
}
	 
	 
	 
.lightpinksection p{
	font-size: 16px;

}

.lightpinksection h4{
	
	font-size: 16px;

}
	 
.hightea{
		 
	width: 90%;
	height: 50%;
	
}
	 
 .divider {
	height: 1px;
	margin: 20px 0;
	width: 10%;
}
	 
	 
	 
.brewingguides {

    padding-bottom: 80px;
    width: 70%; 
    text-align: center;
}

.brewingguides h2 {
        font-size: 25px; 
}

.brewingguides p {
        font-size: 16px;
}

.shopcontainer {
   flex-direction: column;
   align-items: center;
}

   
.shopbackgroundimg{
	
    width: 90%;
    height: 500px;
    object-fit: cover; 
    z-index: -1; 
}
	 
.shopbackgroundtitle{
	top: 45%;
    left: 45%;
 } 
	 
	 
.shopbackgroundtitle h2{
	font-size: 22px;
}
	 
	 
	 
	 
.row img {
     width: 100px;
     height: 100px;
     margin: 22px;
}

.products1-container {
        padding: 10px;
}

.caption {
 	font-size: 16px;
 }
	 
	 
	 
.getintouch {
    width: 90%;
    padding: 50px;
}

.getintouch h2 {
    font-size: 28px;
    padding-bottom: 20px;
}

  .getintouch p {
    font-size: 16px;
  }
	 
	 
	 
form {
    width: 90%;
}

.input-container {
    width: 100%;
    float: none;
}

label {
    font-size: 16px;
}

  input[type="text"],
  textarea {
    padding: 15px;
    width: calc(100% - 20px);
  }

  input[type="submit"] {
    font-size: 14px;
    padding: 8px 20px;
} 
	 
	 
 .contact-sectioncontainer {
    padding-top: 100px;
}

 .contact-section {
    flex-direction: column;
    align-items: center;
    width: 90%;
    padding-top: 20px;
}

  .contact-method {
    width: 100%;
    margin-bottom: 20px;
  }
	 
	 
  .darkpurple-parentcontainer {
    height: auto;
    padding-top: 50px;
    padding-bottom: 20px;
  }

  .darkerpurplecontainer {
    width: 90%;
  }

  .darkpurpletextcontainer {
    width: 70%;
    height: auto;
    padding-bottom: 20px;
  }
	 
	 .darkerpurplecontainer2 {
    width: 100%;
  }
	 
}	 
	 
 
 

@media only screen and (min-width: 601px) and (max-width: 992px) {
	
nav {

  height: 60px;
}

nav ul li {
   padding: 10px;
   margin: 0 3.5%;
}

    
	
.container {
   padding-top: 60px; 
   padding-bottom: 40px;
}

.pink-box {
    width: 80%;
    padding: 50px;
}

.photo, .text-box {
	width: 80%;
    margin: 10px 0;
    }

.booking-button {
    padding: 8px 15px;
    margin-top: 15px;
}

.linelogo {
	margin-top: 15px;
    margin-bottom: 15px;
    font-size: 12px;
    padding: 20px;
}
	

.photo1,.photo2 {
    width: 45%;
    height: 80%;
	margin: auto;

}

.text-box1, .text-box2 {
    width: 45%;
	height: 80%;
    padding: 30px;
    font-size: 16px;
	margin: auto;
}

.pastriespinkbox {
    width: 80%;
}

.pastriespinkbox p {
     font-size: 17px;
}

.cookiesandscones {
	width: 30%; 
}

.pinkteatxtboxes {
    width: 80%;
    font-size: 18px;
}

.greybox, .greybox2 {
	width: auto;
    max-width: 250px;
    height: 200px;

    }

.itemscontainer2 {
	width: 80%;
}

.lightpinksection {
    width: 70%;
}

.catering-options {
    width: 100%;
}

.lightpinksection p {
    font-size: 20px;
}

.lightpinksection h4 {
    font-size: 24px;
}

.hightea {
    width: 45%;
    height: 40%; 
}

.divider {
    margin: 10px 0;
    width: 0.5px;
	height: auto;
}

.brewingguides {

    width: 35%;
	top: 55%;
    left: 20%;
	
}

.brewingguides h2 {
    font-size: 24px;
}

.shopcontainer {
    width: 90%;
	padding-left: 10%;
	margin-bottom: 15%;
}
	

   
.shopbackgroundimg{
	
    width: 90%;
    height: 500px;
    object-fit: cover; 
    z-index: -1; 
		 
}
	 
.shopbackgroundtitle{
	top: 50%;
    left: 65%;
} 
	 
	 
.shopbackgroundtitle h2{
	font-size: 22px;
}
	

.row img {
    width: 130px;
    height: 130px;
    margin: 30px;
}

.products1-container {
    padding: 10px;
}

.caption {
    font-size: 16px;
}

.getintouch {
    padding: 90px;
}

.getintouch h2 {
    font-size: 24px;
    padding-bottom: 15px;
}

.getintouch p {
     font-size: 16px;
}

form {
     width: 80%;
}

input[type="text"], textarea {
	padding: 10px;
    width: calc(100% - 10px);
}

input[type="submit"] {
    font-size: 12px;
    padding: 6px 15px;
}

.contact-sectioncontainer {
    padding-top: 100px;
}

.contact-section {
    flex-direction: column;
    align-items: center;
    width: 90%;
    padding-top: 20px;
}

.contact-method {
    width: 100%;
    margin-bottom: 50px;
}

.darkpurple-parentcontainer {
    padding-top: 40px;
}

.darkpurpletextcontainer {
    padding-bottom: 10px;
}

.darkerpurplecontainer2 {
    width: 90%;
}

	
	
	
	
	
}