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

html{
     scroll-behavior: smooth;
}

body{
     font-family: 'Segoe UI', sans-serif;
     color: #2e2e2e;
     max-width: 99vw;
     height: 100vh;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body::selection{
     color: #e86600;
}

/* Navigation Section */

nav{
     width: 100%;
     height: max-content;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     background-color: dimgrey;
     position: sticky;
     top: 0;
     z-index: 1;
}

 nav a{ /* Logo*/
     color: #fff;
     text-decoration: none;
     padding: 1rem;
}

nav ul{
     list-style-type: none;
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
     gap: 2rem;
}

nav ul a{
     text-decoration: none;
     color: #fff;
}


/* Home Page Section */

.home-page, .home-search{
     width: 100%;
     height: 100vh;
}

.logo-btn{
    display: inline-block;
    background-color: #ff7a00;
    border-radius: 12px;
    padding: 10px 14px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;
    font-weight: bold;
    max-height: 50px;
    max-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2rem;
  }

  .logo-btn:hover {
    background-color: #e86600;
    transform: scale(1.05);
  }

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

.marquee-container {
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     box-sizing: border-box;
     padding: 10px 0;
}

.marquee-content {
     display: inline-block;
     font-size: 22px;
     font-weight: bold;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(90deg, #00ffe0, #ff00c8, #00ffe0);
     background-size: 20% auto;
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: scroll-left 12s linear infinite, shine 3s ease-in-out infinite alternate;
     animation-play-state: running;
}

.marquee-container:hover .marquee-content {
     animation-play-state: paused;
}

@keyframes scroll-left {
     0% {
          transform: translateX(100%);
     }
     100% {
          transform: translateX(-100%);
     }
}

@keyframes shine {
     0% {
          background-position: 0% center;
     }
     100% {
          background-position: 100% center;
     }
}

/*  */

.home-page, .home-search{
     width: 90%;
     height: 90%;
     margin: 2rem auto;
     border-radius: 2rem;
     background-image: url('../images/food-horizontal-cropped.jpg');
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.home-page .home-details{
     width: 50vw;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
}

.home-page .home-details h5{
     color: #FFF;
     font-weight: 600;
     margin: 5rem 0;
     font-size: 2rem;
}

.home-page .home-details .section-okemwa-recipe-h1{
     display: flex;
     align-items: center;
     font-size: 3rem;
     color: #e86600;
}

/* Home search Section */

.home-search{
     /* width: 80%;
     height: 80%;
     border-radius: 2rem;
     margin: auto; */
     /* display: flex;
     align-items: first baseline;
     justify-content: flex-end;
     background: linear-gradient(to left, #ff7a00 0%, rgba(255, 122, 0, 0) 100%); */
     margin: 2rem auto !important;
     background-image: url('../images/meal-plate-horizontal-cropped.jpg');
     /* background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     */
     display: flex;
     flex-direction: column;
     align-items: flex-end;
     justify-content: space-around;
     color: #fff;
     font-weight: bolder;
     font-size: 2rem; 
}

/* .home-search .home-search-flex-div{
     width: 700px;
     display: flex;
     height: 70%;
     flex-direction: column;
     margin: auto 5rem auto 0;
}

.home-search .home-search-flex-div > * {
     margin: 1rem 0;
} */

.home-search > div{
     max-width: 800px;
     margin: auto;
}

.home-search div:first-of-type{
     /* background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(83,113,245,1) 0%, rgba(107,228,184,1) 72.3% ); */
     background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(100,43,115,1) 0%, rgba(4,0,4,1) 90% );
     padding: 3rem;
     border-radius: 2rem;
     color: #e86600;
}

.home-search .search{
     display: flex;
     align-items: center;
     position: relative;
     width: 400px;
     height: 50px;
     border-radius: 1rem;
     padding: 1rem;
     background-color: #d38943;
}

.home-search .search .search-input{
     display: flex;
     margin: 0 3rem;
     border: none;
     border-radius: 20px;
     outline: none;
     font-size: 2rem;
     width: 100%;
     height: 290%;
     text-transform: capitalize;
     background-color: transparent;
     /* padding-left: 3rem */
}

.home-search .search .search-input:hover{
     outline: transparent;
     background-color: transparent;
}
.home-search .search .meal-search-logo, .home-search .search #searchBtn{
     position: absolute;
     top: .3rem;
     color: black;
     cursor: pointer;
     display: inline-block;
     background-color: #ff7a00;
     border-radius: 12px;
     width: 40px;
     height: 40px;
     /* padding: 10px 14px; */
     text-decoration: none;
     transition: background-color 0.3s ease, transform 0.2s ease;
     color: white;
     font-weight: bold;
     display: flex;
     justify-content: center;
     align-items: center;
} 

.home-search .search .meal-search-logo{
     left: .4rem;
}

.home-search .search #searchBtn{
     right: .2rem;
}

  .logo-btn:hover {
    background-color: #e86600;
    transform: scale(1.05);
  }

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


button{
     cursor: pointer;
}

.navigate{
   width: 90vw;  
   margin-left: 2rem;
}

.navigate a{
     text-decoration: none;
}

.all-meals{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     margin: 0 auto;
     /* position: relative; */
}

/* .all-meals #bac-to-top{
     position: absolute;
     bottom: 0;
     right: 0;
} */

.show-meal {
  width: 300px;
  max-width: 350px;
  margin: 1rem auto ;
  height: 400px;
  border: 2px solid red;
  /* display: flex;
  flex-direction: column; */
  /* flex: 1; */
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  background-color: aquamarine;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #f1e0c8;
  transition: transform 0.3s;
  animation: fadeIn .5s ease-in forwards;
}

@keyframes fadeIn {
     from{
          opacity: 0;
     }
     to{
          opacity: 1;
     }
}

.show-meal:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.meal-name {
  font-size: 1.3rem;
  font-weight: 600;
  color: #3d3d3d;
  border-bottom: 1px dashed #d9d9d9;
  padding-bottom: 0.5rem;
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

.show-meal .meal-img {
  width: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* .meal-instructions {
  width: 100%;
  flex-grow: 1;    
  overflow-y: auto;    
  font-size: 0.95rem;
  line-height: 2;
  background: #fff3db;
  border-left: 5px solid #e2b76d;
  padding: 1rem;
  border-radius: 8px;
} */

.marquee{
     width: 100%;
     padding: 1rem;
     text-align: center;
}


/* Start Of Meal Details*/

.meal-details{
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
     margin: 2rem;
     align-items: start;
}

.meal-details img{
     width: 500px;
     object-fit: contain;
     border-radius: 2rem;
     margin-bottom: 2rem;
}

.meal-details .meal-ingredients ul{
     list-style-type: none;
     padding: 0 1rem 1rem;
}

.meal-details .measure-and-ing ul li{
     padding: .1rem;
     line-height: 2rem;
}

.meal-details .meal-instructions {
     /* width: 550px;
     height: 600px; */
     overflow: auto;
     line-height: 2rem;
}

.meal-details .meal-instructions h1{
     position: sticky;
     top: 0;
     left: 0;
     background-color: #00ffe0;
     width: 100%;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.meal-details .meal-instructions p{
     line-break: loose;
     padding: 1rem;
}

@media (max-width: 400px) {
     html{
          height: 100vh !important;
     }
     nav ul{
          display: none;
     }
     .home-page .home-details-bg{
          height: 100vh !important;
     }
     .home-page .home-details-bg{
          background-image: url('../images/meal-vertical.jpg');
          width: 100%;
          height: 100%;
     }

     .home-details{
          width: 90% !important;
          height: 100vh !important;
          margin: 1rem !important;
          display: flex;
          justify-content: space-between;
     }
     .section-okemwa-recipe-h1{
          font-size: 1rem !important;
     }

     .home-page .home-details h5{
          margin: 1rem 0;
          font-size: 1rem;
          background-color: rgba(100, 30, 12, .4);
     }

     .home-details button{
          padding: 0 !important;
          position: relative;
     }

     .home-details button .logo-btn {
          position: absolute;
          font-weight: bold;
          max-height: 40px;
          max-width: 40px;
          margin-left: 0rem;
          right: 1rem;
     }

     .home-details button a{
          font-size: 1rem !important;
          padding: 1rem !important;
     }

     .home-search{
          margin: 0 !important;
          height: 100vh !important;
     }

     .home-search .only-for-bg{
          width: 100%;
          height: 100%;
          background-image: url('../images/pasta-vertical.jpg');
          margin: 10rem 0;
          padding: 1rem;
     }

     .home-search .home-search-flex-div{
          margin: 0 !important;
          width: 100%;
     }

     .home-search .search .meal-search-logo, .home-search .search #searchBtn {
          width: 40px;
          height: 40px;
          font-weight: 500;
     }

     .home-search .home-search-flex-div > *{
          margin: 1rem 0;
          font-size: 1rem;
     }

     .home-search .search {
               width: 97%;
               height: 3.3rem;
     }

     .home-search .search .search-input {
          margin-left: 1.3rem;
          font-size: 2rem;
          max-width: 83%;
          height: 90px !important;
     }

     input, button{
          width: 90vw !important;
     }
}

@media (max-width: 600px){
     input, button{
          width: 30vw;
     }
     .meal-details{
          flex-direction: column;
          align-items: center;
     }

     /* .only-for-bg{
          margin: 0;
          padding: 0;
     } */

     .meal-details img{
          width: 300px;
          margin-bottom: 2rem;
     }
     .meal-details .meal-instructions {
          width: 100%;
          line-height: 2rem;
     }

}
/* 
@media (max-widht: 500px) {
     .home-search .home-search-flex-div{
          max-width: 90%;
          display: flex;
          height: 70%;
          flex-direction: column;
          margin: 0;
     }

     .home-search .home-search-flex-div > * {
          margin: 0 !important;
     }
} */

@media (max-width: 900px){

     .home-page .home-details-bg{
          height: 90vh !important;
          width: 100%;
     }
     /* .home-page .home-details-bg{
          background-image: url('../images/meal-vertical.jpg');
          width: 90%;
          height: 100%;
     }  */

     .home-details{
          width: 100% !important;
          height: 70% !important;
          display: flex;
          justify-content: space-between;
     }
     .section-okemwa-recipe-h1{
          margin-top: 2rem;
          font-size: 1rem !important;
     }

     .home-page .home-details h5{
          margin: 1rem 2rem;
          font-size: 2.5rem;
          background-color: rgba(100, 30, 12, .4);
     }

     /* .home-details button{
          padding: 0 !important;
          position: relative;
     }

     .home-details button .logo-btn {
          position: absolute;
          font-weight: bold;
          max-height: 40px;
          max-width: 40px;
          margin-left: 0rem;
          right: 1rem;
     } */

     /* .home-details button a{
          font-size: 1rem !important;
          padding: 1rem !important;
     }

     .home-search{
          margin: 0 !important;
          height: 100vh !important;
     } */

     /* .home-search .only-for-bg{
          width: 100%;
          height: 100%;
          background-image: url('../images/pasta-vertical.jpg');
          margin: 10rem 0;
          padding: 1rem;
     }

     .home-search .home-search-flex-div{
          margin: 0 !important;
          width: 100%;
     } */

     /* .home-search .search .meal-search-logo, .home-search .search #searchBtn {
          width: 40px;
          height: 40px;
          font-weight: 500;
     }

     .home-search .home-search-flex-div > *{
          margin: 1rem 0;
          font-size: 1rem;
     }

     .home-search .search {
               width: 97%;
               height: 3.3rem;
     } */

     /* .home-search .search .search-input {
          margin-left: 1.3rem;
          font-size: 2rem;
          max-width: 83%;
          height: 90px !important;
     }

     input, button{
          width: 90vw !important;
     } */
}

@media (max-width: 1200px){
     .meal-details{
          flex-direction: column;
          align-items: center;
     }

     .meal-details img{
          width: 300px;
          margin-bottom: 2rem;
     }

     .home-search .home-search-flex-div {
          margin: 0 !important;
          width: 100%;
          text-align: center;
     }

     .home-search .search {

          margin: 4rem auto;
}
}



/* Start Of Meal Category SPage */
.meal-categories{
     display: flex;
     flex-wrap: wrap;
}

.meal-categories .meal-category h3{
     text-align: center;
     border-bottom: 3px dotted #d9d9d9;
     padding-bottom: .5rem;
     margin-bottom: 1rem;
     text-transform: uppercase;
}

.meal-categories .meal-category{
     display: flex;
     flex-direction: column;
     flex: 1;
     gap: 1rem;
     margin: 1rem;
     box-sizing: border-box;
     background-color: aquamarine;
     background: #ffffff;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
     border-radius: 12px;
     padding: 1rem;
     border: 1px solid #f1e0c8;
     cursor: pointer;
}

.meal-categories .meal-category img{
     border-radius: 2rem;
     object-fit: contain;
     max-width: 600px;
}


footer{
     display: none;
     height: 100px;
     background-image: linear-gradient( 135deg, #FFF3B0 10%, #CA26FF 100%);
     justify-content: center;
     align-items: center;
     text-align: center;
     flex-wrap: wrap;
}

@media screen and (max-width: 450px){
     
input, button{
     padding: 1rem;
     margin: 1rem;
}
}


/* Cuisine */

.cuisines{
     max-width: 90%;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     text-align: center;
}

.cuisine{
     min-width: 200px;
     height: 250px;
     flex: 1;
     text-align: center;
     border: 2px solid #111;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 2rem;
     cursor: pointer;
     position: relative; 
}

.cuisine::before {
    content: "Work in Progress";
    position: absolute;
    border-radius: inherit;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: transparent;
    opacity: 0;
    text-align: center;
    display: flex; 
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-weight: bold;
    transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
    z-index: -1;
}

.cuisine:hover{
      filter: brightness(0.4);
}

.cuisine:hover::before {
     opacity: 1;
     background-color: #CA26FF;
     z-index: 1;
     color: #00ffe0;
}