/* 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
/*******************************************/

li{
  list-style: none;

}
body{
  font-family: 'Open Sans';
}


/* set the parent elements to width 100% */
html, body, .section-images {
    width:100%;
    height:100%;
    margin:0;
    font-size: 10px;
}
/* first section */

/* video */

/*first section */

.navC{
  display: flex;
  justify-content: space-between;
  font-family: 'Inter';
  width: 100%;
}

.logo{
width: auto;
height: auto;
}

.navC ul *{
  font-size: 10px;
}

.ulC li img{
  width: 50px;
}


.hi{
  font-size: 10px;
}

.containerNav{
  width: 100%;
  display: flex;
  justify-content: center; 
}

.containerBG{
  background: url('image.png') no-repeat;
  background-position: center bottom;
  background-size: cover;
  width: 100%;
  height:100vh;
  display: flex;
  align-items:start;
  justify-content:start;
  flex-direction: column;
  z-index: -1;
}

.containerMain section{
  color: blue;
  justify-content: start;
  align-items:start;
  display: flex;
  padding: 7vw 0 0 3vw;
}


.xxl{
  font-family: 'Playfair Display';
  font-size:9vmax; 
  width: 60%;
  color:black;
  text-align: center;
}

.mainText{
  display: flex;
  justify-content:start;
  align-items:start;
  color: whitesmoke;
}

.subText{
  font-size:80vh;
  display: flex;
  justify-content:start;
  flex-flow: column;
}

.list{
  display: flex;
  color: black;
  padding: 100px;
}

.containerNav ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:5vw;
}

.containerNav{
display: flex;
justify-content:end;

}

.containerNav li{
  color:black;
  font-size:28px;
  font-weight: 450;  
  
}


.containerNav a{
  color:black;
  font-size:28px;
  font-weight: 450;  
  
}

main h2{
  font-size: 150vh;
  color:blue;
  justify-content: center;
}

.list{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:8vw;
}

.facebook{
  width:1vw;
  margin: 0 0 .1vw 0;
  height:2vw;
}

.instagram{
  width:2vw;
}

/* Search Bar */



.containerSearch{
  display: flex;
  justify-content: start;
  padding:0 0 50px 8vw;
  flex-flow: column;
}


.searchBar{
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}



.box{
  height:3vw;
  display: flex;
  cursor: pointer;
  padding: 10px 20px;
  background: #fff;
  border-radius:60px;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.box:hover input{
  width:30vw;
}

.box input{
  width:10vw;
  outline: none;
  border: none;
  font-weight: 500;
  transition: 0.8s;
  background: transparent;
}

.box a .fas{
  color: black;
  font-size: 10vh;

}


/* Second Container */

.containerAboutUsSecondHalf{
  display: flex;
  flex-flow: row;
  justify-content: end;
}

.oatmealPhoto{
display: flex;
justify-content: end;
}

.oatmealPhoto img{
  width: 50%;
  height: 50%;
}

.piePhoto{
  max-width: 100%;
  max-height: 100%;
}

.containerAboutUs{
  display: flex;
  color: orange;
  background-image: url('newSecondBG.png');
  background-position: center bottom;
  background-size:cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  justify-content: center;
}

.containerAboutUsContent{
  width: 50%;
  padding: 5vw 0 0 10vw;
}

.abtUsContent{
  font-size: 50px;
  color: black;
  font-weight: 500;
}

.abtUsContentMobile{
  display: none;
  font-size:25px;
  color: black;
  font-weight: 500;
}

.containerAboutUs span{
  display: flex;
  color:black;
  font-size: 20px;
  font-family: 'Playfair Display';
}

.xl{
  font-family: 'Playfair Display';
  font-size: 5vw;
  color: black;
  padding: 0 0 4vw 0;
}

.second{
  padding: 2vw 0 0 0;
}

/* BUTTON */
.btnCont{
  display: flex;
  width: auto;
  height: auto;
  padding: 40px 0 0 0;
}

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --gradient-color: linear-gradient(90deg,
                    hsl(48, 100%, 50%) 0%,
                    hsl(28, 100%, 54%, 100%));
  --black-color: hsl(225, 15%, 6%);
  --reflection-color: hsla(48, 30%, 95%, .3);
  --body-color: hsl(48, 100%, 98%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat", sans-serif;
  --normal-font-size: 1rem;
}

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

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
}

a {
  text-decoration: none;
}

/*=============== BUTTON ===============*/
.container {
  height: auto;
  display: grid;
  place-items: center;
}

.button {
  position: relative;
  transition: transform .4s;
}

.button__content {
  position: relative;
  background: var(--gradient-color);
  padding: 1.25rem 3rem;
  border-radius: 4rem;
  border: 3px solid var(--black-color);
  color: var(--black-color);
  display: flex;
  align-items: center;
  column-gap: .5rem;
  overflow: hidden;
}

.button__text {
  font-weight: 700;
}

.button__icon {
  font-size: 1.5rem;
}

.button__text, 
.button__icon {
  position: relative;
  z-index: 2;
}

/* Reflection shapes */
.button__reflection-1, 
.button__reflection-2 {
  width: 8px;
  height: 120px;
  background-color: var(--reflection-color);
  rotate: 30deg;
  position: absolute;
  inset: 0;
  top: 0;
  left: -180%;
  margin: auto;
  transition: left .6s cubic-bezier(.2, .5, .2, 1.2);
}

.button__reflection-1::after {
  content: "";
  width: 26px;
  height: 100%;
  background-color: var(--reflection-color);
  position: absolute;
  top: -1rem;
  left: 1.25rem;
}

.button__reflection-2::after {
  content: "";
  width: 40px;
  height: 100%;
  background-color: var(--reflection-color);
  position: absolute;
  top: -1rem;
  left: .8rem;
}

/* Moving geometric shapes */
.button img {
  position: absolute;
  opacity: 0;
  transition: transform .5s, opacity .5s;
}

.button__star-1 {
  width: 20px;
  top: -14px;
  left: -16px;
  transform: rotate(48deg) scale(.1);
}

.button__star-2 {
  width: 40px;
  right: -10px;
  top: -4px;
  transform: rotate(-48deg) scale(.1);
}

.button__circle-1, 
.button__circle-2 {
  width: 8px;
}

.button__circle-1 {
  top: -8px;
  left: 58px;
  transform: scale(.1);
}

.button__circle-2 {
  right: 34px;
  bottom: -8px;
  transform: scale(.1);
}

.button__diamond {
  width: 18px;
  top: -18px;
  right: 62px;
  transform: scale(.1);
}

.button__triangle {
  width: 30px;
  left: 15px;
  bottom: -16px;
  transform: rotate(-48deg) scale(.1);
}

/* Gradient shadow */
.button__shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--gradient-color);
  padding: 1.25rem 3rem;
  border-radius: 4rem;
  border: 3px solid var(--black-color);
  z-index: -1;
  transition: transform .3s;
}

/* View shadow gradient */
.button:hover .button__shadow {
  transform: translate(-.5rem, .5rem);
}

/* Move reflection */
.button:hover .button__reflection-1 {
  left: 120%;
}

.button:hover .button__reflection-2 {
  left: -70%;
}

/* View geometric shapes */
.button:hover {
  transform: rotate(-4deg) scale(1.1);
}

.button:hover img {
  opacity: 1;
}

.button:hover .button__star-1 {
  transform: scale(1.1);
  transition-delay: .1s;
}

.button:hover .button__star-2 {
  transform: scale(1.1);
}

.button:hover .button__circle-1 {
  transform: translateY(-8px) scale(1.1);
  transition-delay: .1s;
}

.button:hover .button__circle-2 {
  transform: translate(-20px, 20px) scale(1.1);
}

.button:hover .button__diamond {
  transform: translateY(7px) rotate(-24deg) scale(1.1);
}

.button:hover .button__triangle {
  transform: rotate(-12deg) scale(1.1);
}


/* Third Container */

.containerOrderNow{
  display: flex;
  justify-content:center;
  flex-flow: column;
  align-items: center;
  background-color: rgb(241, 241, 241);
  width: 100%;
  height:auto;
  padding: 80px 0 0 0;
}


.containerOrderNow *{
  color:black;
} 


.containerOrderNow h2{
  font-size: 10vh;
  font-family: 'Playfair Display';
  text-align: center;
}

.orderNow{
  font-size: 30px;

}

.containerOrderPhotos{
  display: flex;
  flex-flow: column;
  gap: 20px;
}

.containerOrderList{
  padding: 3vw 0 0 0;
  max-width: 100%;
  width: 100%;
  display: flex ;
  justify-content: center;
}

.containerOrderList ul{
  display: flex;
  flex-flow: row;
  gap: 44px;
  font-size:40px;
  border-bottom: 2px solid grey;
  margin: 0 1vw 1vw 1vw;
  padding: 0 1vw 0 1vw;
}

.containerOrderList ul *{
  font-weight: 500;
  font-size: 3vw;
}

.containerOrderPhotos ul{
  display: flex;
  flex-flow: row;
  gap: 20px;
  padding-left: 4vw;
}

.containerOrderPhotos ul *{
  width:80%; 
  display: flex;
}

.coverImg{
  object-fit:cover;
  height:80%;
  width: 100%;
}

.img1{
  
}

img2{
  object-position: 30px 30px ;
}

img3{
  object-position: 30px 30px ;
}

img4{

  object-position: 30px 30px ;
}
img5{

  object-position: 30px 30px ;
}
img6{

  object-position: 30px 30px ;
}

img7{

  object-position: 30px 30px ;
}
img8{

  object-position: 30px 30px ;
}




/* fourth section */

.containerOpeningHours{
  display: flex;
  justify-content:start;
  align-items: center;
  width: 100%;
  height:auto;
  flex-flow: column;
  padding: 130px 0 0 0 ;
  background-image: url('brooke-lark-bg-breakfast.jpg');
  background-repeat: no-repeat; 
  background-size:cover;
  gap: 30px;
  
}

.containerOpeningHours *{
  color: black;
}

.containerOpeningHours img{
  width: 50px;
  color: orange;
}

.book{
  font-size:30px;
  font-family: 'Playfair Display';
  color: orange;
}

.phoneNum{
  color: orange;
  font-family: 'Playfair Display';
  font-size: 30px;
}

.containerOpeningHours h2{
  font-size: 10vh;
  font-family:'Playfair Display';
  color: black;
}


.containerOpeningHours video{
  width:60%;
  box-shadow: 5px 5px 10px 2px rgb(0 0 0 / .4);
}


.containerHours{
  display: flex;
}

.containerHours div{
  display: flex;
  justify-content: center;
  flex-flow: column;
}

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

.call{
  font-size: 20px;
  font-weight: 600;
}

.time{
  font-size: 40px;
  font-weight: 600;
}

.vidContainer{
  display: flex;
  justify-content: center;
  padding: 0 0 3vw 0;
}


/* media queries */
@media (max-width: 1990px){
  .abtUsContent{
    font-size: 45px;
  }
}

@media (max-width: 1390px){
  .abtUsContent{
    font-size: 35px;
  }
}

@media (max-width: 850px){
  .abtUsContent{
    font-size: 25px;
  }
}

@media all and (max-width: 500px){
  section .containerOrderList, 
  section .call, section .phoneNum,
  section .iconPhone, .abtUsContent,
  section .abtUsContent1, .orderlist{ 
    display: none;
  }

  section .Specialty,
  section .openHr, .time, 
  section .xl, section .xxl{
    text-align: center;
  }
  .containerOpeningHours{
    height: 100vh;
    padding: 2vh 0 0 0;
  }
  .xxl, .navC{
    padding: 0 0 0 0;
  }
  .vidContainer, .xxl{
    width: 100%;
    height: auto;
  }
  .containerBG, .containerAboutUs{
    height: 100vh;
  }
  video{
    width: 90% !important;
  }
  .abtUsContentMobile{
    display: inline-block;
  }
  .containerAboutUsContent{
    width: 100%;
    padding: 0 0 0 3vw;
  }
  .btnCont, .containerNav{
    justify-content: center;
    align-items: center;
  }
  .containerAboutUs{
    background-position: 80% 80%;
  }
  .containerAboutUs{
    background: url('secondBGNewMobile.png');
    background-position: 35% 0;
  }
  .containerBG{
    background-color: white;
    background-position: 90% 10%;
    background-size: auto;
  }

}


/* order now */



/******************************************
/* LAYOUT
/*******************************************/
header {
}

footer {

}

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