@import url('https://fonts.googleapis.com/css2?family=Abel&family=Cairo:wght@200&family=Montserrat:wght@300;500;700&family=Poppins:wght@200;300;400;500;600;700&display=swap');

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

html{
   font-size: 62.5%;
}

body{
   font-family: 'Poppins', sans-serif;
}

/* ############ utility classes ########## */

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

.btn{
   display: inline-block;
   padding: 1em 2.5em;
   text-decoration: none;
   border-radius: 40px;
   cursor: pointer;
   outline: none;
   margin-top: 1em;
   text-transform: uppercase;  
   font-weight: 500;
}

.btn-primary{
   color: #fff;
   background: #16a083;
}

/* ############ navbar styling############# */

/* for desktop mode */

.navbar input[type="checkbox"],
.navbar .hamburger-lines{
   display: none;
}

.navbar{
   box-shadow: 0px 5px 10px 0px #aaa;
   position: fixed;
   width: 100%;
   background: #fff;
   color: #000;
   opacity: 0.85;
   z-index: 999;
}

.navbar .navbar-container{
   display: flex;
   justify-content: space-between;
   height: 64px;
   align-items: center;
}

.menu-items{
   display: flex; 
   order: 2;
}

.menu-items li{
   list-style: none;
   margin-left: 1.5rem;
   font-size: 1.8rem;
}

.logo{
   order: 1;
   font-size: 3rem;
}

.navbar a{
   color: #444;
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease-in-out;
}

.navbar a:hover{
   color: #117664;
}

/* ############ showcase styling######### */

.showcase-area{
   height: 50vh;
   background: url("./img/header-image2.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.showcase-container{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   font-size: 1.6rem;
}

.main-title{
   text-transform: uppercase;
}

/* ########### about us styling ############### */

#about{
   padding: 50px 0px;
   background: #f6f6f7;
}

.about-wrapper{
   display: flex;
   flex-wrap: wrap;
}

#about h2{
   font-size: 3.2rem;
}

#about p{
   font-size: 1.6rem;
   color: #555;
}

#about .small{
   font-size: 1.6rem;
   color: #666;
   font-weight: 600;
}

.about-img{
   flex: 1 1 400px;
   padding: 30px;
   transform: translateX(150%);
   animation: about-img-animation 1s ease-in-out forwards ;
}

@keyframes about-img-animation{
   100%{
      transform: translateX(0);
   }
}

.about-text{
   flex: 1 1 400px;
   padding: 30px;
   margin: auto;
   transform: translateX(-150%);
   animation: about-text-animation 1s ease-in-out forwards ;
}

@keyframes about-text-animation{
   100%{
      transform: translateX(0);
   }
}

.about-img img{
   display: block;
   height: 400px;
   max-width: 100%;
   margin: auto;
   object-fit: cover;
   object-position: right;
}

/* ########## food section styling ####### */

#food{
   margin: 5rem 0 10rem 0;
}

#food h2{
   text-align: center;
   font-size: 3rem;
   font-weight: 400;
   color: #555;
   text-transform: uppercase;
   margin-bottom: 40px;
}

.food-container{
   display: flex;
   justify-content: space-between;
}

.food-container img{
   display: block;
   width: 100%;
   margin: auto;
   max-height: 300px;
   object-fit: cover;
   object-position: center;
}

.img-container{
   margin: 0 1rem;
   position: relative;
}

.img-content{
   position: absolute;
   top: 70%;
   left: 50%;
   transform: translate(-50%,-50%);
   opacity: 0;
   z-index: 2;
   text-align: center;
   transition: all 0.3s ease-in-out 0.1s;
}

.img-content h3{
   color: #fff;
   font-size: 2.6rem;
}

.img-content a{
   font-size: 1.2rem;
}

.img-container::after{
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.871);
   /* opacity: ; */
   z-index: 1;
   transform: scaleY(0);
   transform-origin: 100% 100%;
   transition: all 0.3s ease-in-out;
}

.img-container:hover::after{
   opacity: 1;
   transform: scaleY(1);
}

.img-container:hover .img-content{
   opacity: 1;
   top: 40%;

}

/* ################ food menu styling######### */

.food-menu-container{
   display: flex;
   flex-wrap: wrap;
   padding: 50px 0 30px 0;
}

.food-menu-container img{
   display: block;
   width: 250px;
   height: 250px;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
}

.food-menu-item{
   display: flex;
   flex: 1 1 600px;
   justify-content: space-evenly;
   margin-bottom: 3rem;
}

.food-description{
   margin: auto 1.5rem;
}

.food-menu-heading{
   font-size: 4rem;
   color: #666;
   text-align: center;
   font-weight: 400;
}

.food-title{
   font-size: 2.2rem;
   font-weight: 400;
   color: #444;
}

.food-description p{
   font-size: 1.4rem;
   color: #555;
   font-weight: 500;
}

.food-description .food-price{
   color: #117964;
   font-weight: 700;
}


/* ############ testimonial styling############# */

#testimonials{
   padding: 5rem 0;
   background: rgb(246, 246, 246);
}

.testimonial-box .checked{
   color: #ff9529;
}

.testimonial-title{
   text-align: center;
   font-size: 3rem;
   font-weight: 400;
   color: #555;
}

.testimonial-container{
   display: flex;
   justify-content: space-between;
   font-size: 1.6rem;
   padding: 1rem ;
}

.testimonial-box .testimonial-text{
   margin: 1rem 0;
   color: #444;
}

.testimonial-box{
   text-align: center;
   padding: 1rem;
}

.customer-photo img{
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
   margin: auto; 
}

/* ############## contact us styling########### */

#contact{
   padding: 5rem 0;
   background: rgb(226,226,226);
}

.contact-container{
   display: flex;
   background: #fff;
}

.contact-image{
   width: 50%;
}

.contact-image img{
   display: block;
   height: 400px;
   width: 100%;
   object-fit: cover;
   object-position: center;
}

.form-container{
   padding: 1rem;
   width: 50%;
   margin: auto;
}

.form-container input{
   display: block;
   width: 100%;
   border: none;
   border-bottom: 2px solid #ddd;
   padding: 1rem 0;
   box-shadow: none;
   outline: none;
   margin-bottom: 1rem;
   color: #444;
   font-weight: 500;
}

.form-container textarea{
   display: block;
   width: 100%;
   border: none;
   border-bottom: 2px solid #ddd;
   padding: 1rem 0;
}

.form-container h2{
   font-size: 3rem;
   font-weight: 400;
   color: #444;
   margin: 1rem;
}


/* ########### footer styling######### */

#footer h2{
   text-align: center;
   font-size: 2rem;
   padding: 3rem;
   font-weight: 500;
   color: #fff;
   background: rgb(65,65,65);

}

/* ########## media queries ########### */

@media (max-width: 768px){
   .navbar{
      opacity: 0.95;
   }

   .navbar-container input[type="checkbox" ],
   .navbar-container .hamburger-lines{
      display: block;
   }

   .navbar-container{
      display: block;
      position: relative;
      height: 64px;
   }

   .navbar-container input[type="checkbox"]{
      position: absolute;
      display: block;
      height: 32px;
      width: 40px;
      top: 20px;
      left: 20px;
      z-index: 5;
      opacity: 0;
   }

   .navbar-container .hamburger-lines{
      display: block;
      height: 32px;
      width: 40px;
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }

   .navbar-container .hamburger-lines .line{
      display: block;
      height: 4px;
      width: 100%;
      border-radius: 15px;
      background: #333;
   }

   .navbar-container.hamburger-lines .line1{
      transform-origin: 0% 0%;
      transition: transform 0.4s ease-in-out;
   }
   .navbar-container.hamburger-lines .line2{ 
      transition: transform 0.4s ease-in-out;
   }
   .navbar-container.hamburger-lines .line3{
      transform-origin: 0% 100%;
      transition: transform 0.4s ease-in-out;
   }

   .navbar .menu-items{
      padding-top: 325px;
      background: #fff;
      height: 100vh;
      max-width: 300px;
      transform: translateX(-150%);
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      padding-left: 30px;
      transition: transform 0.5s ease-in-out;
      box-shadow: 5px 0px 10px 0px #aaa;
   }

   .navbar .menu-items li{
      margin-bottom: 3rem;
      font-size: 2rem;
      font-weight: 500;
   }

   .logo{
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 3rem;
   }

   .navbar-container input[type="checkbox"]:checked ~ .menu-items{
      transform: translateX(0);
   }

   .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
      transform: rotate(45deg);
   }
   .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
      transform: scaleY(0);
   }
   .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
      transform: rotate(-45deg);
   }

   /* ############## food category######## */

   .food-container{
      flex-direction: column;
      align-items: stretch;
   }

   .food-type:not(:last-child){
      margin-bottom: 3rem;
   }

   .food-type{
      box-shadow:  5px 5px 10px 0px #aaa;
   }

   .img-container{
      margin: 0;
   }
}

/* ############### small screen ####### */

@media (max-width: 500px){
   html{
      font-size: 50%;
   }

   .testimonial-container{
      flex-direction: column;
      text-align: center;
   }

   .food-menu-item{
      flex-direction: column;
      text-align: center;
   }

   .food-menu-container img{
      margin: auto;
   }

   .form-container{
      width: 90%;
   }

   .contact-container{
      display: flex;
      flex-direction: column;
   }

   .contact-image{
      width: 90%;
      max-width: 3rem auto;
   }
}

/* ########## landscape mode ######## */

@media (orientation: landscape) and (max-height: 500px){
   .showcase-area{
      height: 50vmax;
   }
}