@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');


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




/*#centered{
  background-color: #abaaa9;
  height:100%;
  width:100%;
  position: fixed;
  z-index:100;
margin:0;
padding:0;

	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	

}

.blob-1,.blob-2{
	width:70px;
	height:70px;
	position:absolute;
	background:#fff;
	border-radius:50%;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
}
.blob-1{
	left:20%;
	animation:osc-l 2.5s ease infinite;
  color:gray;
  text-align:center;
  line-height: 70px;
  font-size: 22px;
}
.blob-2{
	left:80%;
	animation:osc-r 2.5s ease infinite;
	background:#0ff;
  color:gray;
  text-align:center;
  line-height: 70px;
  font-size: 22px;
}
@keyframes osc-l{
	0%{left:20%;}
	50%{left:50%;}
	100%{left:20%;}
}
@keyframes osc-r{
	0%{left:80%;}
	50%{left:50%;}
	100%{left:70%;}
}
.disappear{
  animation:vanish 1.7s forwards;
}

@keyframes vanish{
  100%{
    opacity:0;
    
  }
  50%{
    opacity:1;
    visibility: hidden;
  }
}*/

html{
  font-family:'Lora', serif;
  font-size:10px;
  color: #515151;
  scroll-behavior: smooth;
}

body{
  overflow-x:hidden;
}

section{
  padding:3.9rem 0;
}
img{
  width:100%;
  max-width:100%;
}
a{
  text-decoration: none;
}
p{
  font-size:1.6rem;

}
.containornav{
  width:100%;
  max-width:122.5rem;
  margin:0 auto;
  padding:0 2.4rem;
}
/*header*/
header{
width:100%;
position: absolute;
top:0;
left:0;
z-index:1;
background-image: -moz-linear-gradient(to bottom, rgba(0,0,0,5), to transparent);
}
.nav{
  height:7.2rem;
  display:flex;
  align-items:center;
  justify-content: center;
}
.menu-toggle{
  color:#fff;
  font-size:2.2rem;
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  right:2.5rem;
  cursor:pointer;
  z-index:1500;
}
.fa-times{
  display:none;
}
.nav-list{
  list-style: none;
  position: fixed;
  top:0;
  left:0;
  width:80%;
  height:100vh;
  background-color: #252525;
  padding:4.4rem;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  z-index:1250;
  transform:translateX(-100%);
  transition: transform .5s

}
.nav::before{
  content:"";
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color: rgba(0,0,0,8);
  z-index:1000;
  opacity:0;
  transform: scale(0);
  transition: opacity .5s;
}
.open  .fa-times{
  display:block;
}
.open .fa-bars{
  display:none;

}

.logo{
  font-size: 3rem;
  color:white;
  font-family:Lora', serif';
  margin-left:10px;
  overflow: hidden;
    animation: animated-text 5s steps(29,end) 1s 1 normal both,
               animated-cursor 600ms steps(29,end) infinite;
  }
  @keyframes animated-text{
    from{width: 0;}
    to{width: 120px;}
  }
  

.logo:hover{
  border-bottom:2px solid white;
  transform:scale(1.2);
 
  transition:border-bottom, 5s;

}

.open .nav-list{
  transform:translateX(0);
}
 .open .nav::before{
opacity:1;
transform:scale(1);
 }

 .nav-item{
  border-bottom: 2px solid rgba(255,255,255,3);
 }
 .nav-link{
  display: block;
  color:#fff;
  text-transform: uppercase;
  font-size:1.6rem;
  letter-spacing: 2px;
  margin-right:-2px;
  transition:color .5s;
  margin:8px;
  cursor:pointer;
 }
 .nav-link:hover{
  color: #785c33;

 }
 /*hero*/
 .hero{
  width:100%;
  height:100vh;
  background: url('https://static.ucraft.net/fs/ucraft/userFiles/hayk/images/0020481566979-3332284820708653698357227954445355368579072o-15296532058166.webp' ) center no-repeat;
 background-size:cover;


 display:flex;
 justify-content: center;
 text-align:center;


}
.sub-headline{
font-size:8.5rem;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color:#795e35;
font-weight:100;
opacity:0;
line-height:4;
letter-spacing: 2px;
animation: fadeUp .5s forwards;
animation-delay: .5s;
margin-bottom:-100px;

}
.first-letter{
  text-transform:uppercase;
  font-size:10.3rem;
}


.headline{
color:rgb(20, 2, 2);
font-size:3.7rem;
font-family:'Lora', serif;
text-transform: uppercase;
font-weight:900;
letter-spacing: .5rem;
margin-right:-.5rem;
animation: scale .5s forwards;



}

.separator{
display:flex;
align-items:center;
justify-content: center;

}

.line{
  width:100%;
  max-width:8.4rem;
  height:.25rem;
  background-color:#fff;
  position:relative;
  opacity:0;
  animation:grow 2s forwards;
  animation-delay:.9s;
}

.line-right::before,
.line-left::before{
  content:'';
  position: absolute;
  top:50%;
  
  transform:translateY(-50%);
  border: .6rem solid transparent;
  border-right-color: #fff;
  
 

}
.line-right::before{
  border-right-color: #fff;
  right:0;

}
.line-left::before{
  border-left-color: #fff;
 left:0;

}
.asterisk{
  font-size: 1.2rem;
  color:#c59d5f;
  margin:0.16rem;
  opacity:0;
  animation:spin .5s forwards;
  animation-delay:.7s;
}
.single-animation{
  opacity:0;
  animation:fadeDown .5s forwards;
  animation-delay:.10s;
}

.headline-description h5{
  color:#fff;
  font-size: 1.4rem;
  font-weight:100;
  text-transform: uppercase;
  margin-bottom:1.2rem;
  letter-spacing: 3px;
  margin-right: -3px;
}
.btn{
  display:inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: -2px;
}
.cta-btn{
  font-size: 1.1rem;
  background-color: #fff;
  padding:.9rem 1.8rem;
  color:#470808;
  border-radius: .4rem;
  transition: background-color .5s;
}
.cta-btn:hover,
.cta-btn:focus{
  color:#fff;
  background-color: #c59d5f;
}
.gloabal-headline{
  text-align:center;
  margin-top: 3.9rem;
  font-family:Passions Conflict', cursive';
}
.discover-our-story .global-headline{
  margin-top: 2rem;
}
.global-headline .asterisk{
  color:rgb(203, 64, 64);
  margin:2.4rem 0;
}
.headline-dark{
  color:#515151;
  letter-spacing: .7rem;
  margin-right: -.7rem;
  margin-top:-100px;
}
.global-headline .sub-headline{
  letter-spacing: -1px;
  line-height: 42;
}

.restaurant-info{
  text-align: center;
}
.restaurant-description{
  margin-bottom: 3rem;
  margin-top:-100px;
  
}
.restaurant-description p{
  line-height: 1.6;
  margin-bottom: 1rem;
 
}


.body-btn{
  font-size: 1.5rem;
  color:#c59d5f;
  position:relative;
  transition: color .5s;
}

.body-btn::before{
content:"";
position: absolute;
left:0;
bottom:-3px;
background-color: gray;
transition: background-color .5s;
width:100%;
height:2px;


}
.body-btn:hover,
.body-btn:focus{
  color:rgb(171, 146, 146);
 
}
.tasteful-recepies .sub-headline{

text-align: center;
}


.body-btn:hover::before,
.body-btn:focus::before{
color: rgb(74, 95, 82);
}
/*testful recept*/
.tasteful-recepies{
  background: url("https://scontent.fevn7-1.fna.fbcdn.net/v/t1.6435-9/44393569_743036762697165_7445879141137645568_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=730e14&_nc_ohc=T_F0jBg2jRkAX9bxt_w&_nc_ht=scontent.fevn7-1.fna&oh=00_AT-sNsELV07M7akTafgMuet-_ti7qQe90_HuyDI6WQnEPA&oe=63647689" ) center no-repeat;
background-size:  100% cover

}
.between{
  min-height:65vh;
  display:flex;
  align-items:center;
}
/*discover menu*/
.image-group{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-gap:1.5rem;
}
.img-group img{
  height:100px;
}
.discover-our-menu .restaurant-description{
  padding-top: 0;
  margin-bottom: 0;
}

.perfect-blend{
  background: url("https://scontent.fevn7-1.fna.fbcdn.net/v/t1.6435-9/110305837_1218778751789628_363188267365126451_n.jpg?_nc_cat=108&ccb=1-7&_nc_sid=730e14&_nc_ohc=zoWD7_nYaucAX87Xzvd&tn=_xEwsB59Raa2FSHN&_nc_ht=scontent.fevn7-1.fna&oh=00_AT9JB2t6NpCMFrnW5NV6ReGxD2ieE-wqIY3eDQIz07XcoQ&oe=6365AFCA")center no-repeat;
background-size: cover;
}



/*footer*/
footer{
  padding:7.9rem 0;
  background-color: #ada6a6;
  color:#fff;
  text-align:center;
  position:relative;
}
.back-to-top{
  width:7rem;
  height:7rem;
  background-color:  #7a6e6e;
  position: absolute;
  top:-3rem;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
 
}
.back-to-top i{
  display:block;
  color:#fff;
  font-size: 2rem;
  padding:2rem;
  animation:up 2s infinite;
  
  

}

.footer-content{
  /*overflow:hidden;*/
}
.back-to-top{
  margin-left:2%;
}
.footer-content h4{
  font-size: 1.9rem;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 3px;
  margin-left:55px;
}
.footer-content .asterisk{
  margin:2.4rem 0;

}
.footer-content-about{
  margin-bottom: 5.4rem;
}
.footer-content-about p{
  line-height:2;
}
.social-icons{
  list-style:none;
  margin-bottom: 5.4rem;
  display:flex;
  justify-content: center;
  margin-top:15px;
  margin-left:25%;
}
.social-icons a{
  font-size: 2rem;
  color:#fff;
  padding: .10rem 2rem;
  opacity: .5;
  transition: color .5s;
  
}
.social-icons i:hover,
.social-icons i:focus{
  color:#c59d5f;
}
.newsletter-form{
  width:100%;
  position: absolute;
  display:flex;
  justify-content: center;
}
.newsletter-input{
  width:100%;
  max-width:25rem;
  padding:1rem;
  margin-top:7px;
  outline:none;
  
  border-radius: .4rem gray;
}
.newsletter-btn{
  background-color: transparent;
  border:none;
  color:#9b9090;
  cursor:pointer;
  font-size: 1.6rem;
  padding: 1px .6rem;
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  margin-left: 10.5rem;
}
.fa-chevron-up{
  color:#fff;
  font-size: 3rem;
}

/*Media queries*/
@media screen and (min-width:900px){
  section{
    padding:7.9rem;
  }
  .menu-toggle{
    display:none;
  }

  .nav{
    justify-content: space-between;
  }
  .nav-list{
    position:initial;
    width:initial;
    height:initial;
    background-color: transparent;
    padding:0;
    justify-content: initial;
    flex-direction: row;
    transform:initial;
    transition:initial;
  }

  .nav-item{
    margin-left:0 0.24rem;
    border:none;

  }
  .nav-item:last-child{
    margin-right: 0;
  }
  .nav-link{
    font-size: 1.3rem;
  }
  .active{
    position: relative;
  }
  .active::before{
    content:"";
    position: absolute;
    width:100%;
    height:2px;
    background-color: #fff;
    left:0;
    bottom:-3px;
    
  }
 
  .sub-headline{
    font-size: 10rem;
  }
  .first-letter{
    font-size: 12.2rem;
  }
  .headline{
    font-size: 4.7rem;
    letter-spacing: .8rem;
  }
  .line{
    max-width:11.4rem;
  }
  .restaurant-info{
    display:flex;

  align-items: center;
  }
  .restaurant-info>div{
    flex:1;
  }
  .padding-right{
    padding-right:7rem;
  }
  .footer-content{
    max-width:77.5rem;
    margin: auto;
  }

  .footer-content-about{
    max-width:51.3rem;
    margin:0 auto 5.4rem;
  }
  .footer-content-divider{
    display:flex;
    justify-content: space-between;
  }
  .social-media,.newsletter-form{
    width:100%;
    max-width:27.3rem;
    margin:0 1rem;
  }
  .social-icons{
opacity:1;


  }
  .newsletter-btn{
    margin-left: 7.5rem;
  }
}

/*animations*/
@keyframes fadeUp{
  0%{
    transform:translateY(4rem);

  }
  100%{

    opacity:1;
    transform:translateY(0);
  }
}

@keyframes scale{
  0%{
    transform:scale(2);
  }
  100%{

    opacity:1;
    transform:scale(1);
  }
}


@keyframes grow{
  0%{
    width:0;
  }
  100%{

    opacity:1;
   width:100%;
  }
}
@keyframes fadeDown{
  0%{
    transform:translateY(-1rem);
  }
  100%{

    opacity:1;
    transform:translateY(0);
  }
}
@keyframes spin{
  0%{
    transform:rotate(0);
  }
  100%{

    opacity:1;
    transform:rotate(-360deg);
  }
}
@keyframes up{
  0%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{

    opacity:0;
    transform:translateY(-1rem);
  }
}