@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

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

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  font-family: "Roboto", sans-serif;

}

/*Stylings for whole site*/

header {

  box-shadow: 0px 15px 10px -15px #111;

  position: fixed;

  top: 0;

  left: 0;

  background: rgba(255, 255, 255, 0.95);

  z-index: 99;

  width: 100%;

}

a {

  text-decoration: none;

}

.danger {

  background: rgb(244, 208, 208);

  border: 1px solid rgb(246, 51, 51);

  margin-bottom: 0.5rem;

  border-radius: 0.25rem;

  padding: 0.5rem;

}

.success {

  background: rgb(213, 244, 208);

  border: 1px solid rgb(38, 172, 47);

  margin-bottom: 0.5rem;

  border-radius: 0.25rem;

  padding: 0.5rem;

}

button {

  cursor: pointer;

  background: none;

  border: none;

}

img {

  width: 100%;

}

.container {

  width: 1300px;

  max-width: 95%;

  margin: 0 auto;

}

.spacer {

  padding: 5rem 0;

}

.row {

  display: flex;

  gap: 3rem;

  flex-wrap: wrap;

  margin: 0 auto;

}

.col {

  flex: 1 250px;

}

.value {

  font-weight: 900;

  color: rgb(120, 62, 0);

  font-size: 1.5rem;

  margin-bottom: 0.5rem;

}

/*navbar*/

.navbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0.5rem;

  height: 100%;

}



.navbar .nav-menu {

  display: flex;

  gap: 1rem;

  justify-content: center;

  align-items: center;

  list-style: none;

}



.navbar .nav-menu .nav-item a {

  color: rgb(120, 62, 0);

  transition: 0.5s;

  font-size: 1.1rem;

  font-weight: 600;

}



.navbar .nav-menu .nav-item a:hover {

  color: rgb(255, 149, 0);

}



.navbar .nav-menu .nav-item:last-child {

  background: rgb(255, 149, 0);

  padding: 10px 18px;

  border-radius: 0.5rem;

  color: white;

  transition: 0.5s;

}



.navbar .nav-menu .nav-item:last-child:hover {

  background: rgb(120, 62, 0);

}



.navbar .nav-menu .nav-item:last-child a {

  color: white;

}



.navbar .nav-menu .nav-item:last-child a:hover {

  color: rgb(120, 62, 0);

  font-weight: 600;

}

.nav-logo {

  width: 150px;

}

/*hero*/
.hero {
  min-height: calc(100vh - 149.36px - 67px);
  background: radial-gradient(ellipse at 34% 42%, #FFFFFF 0%, #FFFCF8 24%, #F5E5D4 58%, #FFF8F0 78%, #FFFFFF 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 149.36px;
  display: flex;
  align-items: center;
}
h1 { font-size: 3rem; font-weight: 900; color: #54202A; }
.hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hero-text span {
  color: #54202A;
  text-transform: uppercase;
  font-weight: 900;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-shadow: none;
}
.hero-image { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.hero-image img { width: 100%; height: auto; display: block; }
.primary-button {
  background: rgb(255, 149, 0); padding: 1rem 2rem; color: white;
  font-size: 1.1rem; border-radius: .5rem; border: 2px solid rgb(255, 149, 0);
  font-weight: 600; display: inline-block; margin-top: 1rem; transition: .5s;
}
.primary-button:hover {
  background: rgb(120, 62, 0); border-color: rgb(120, 62, 0); color: white;
}
.hero-content {
  display: flex; flex-direction: row; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  min-height: min(78vh, 760px); width: min(1300px, 92%); max-width: 92%; margin: 0 auto;
}
.hero-content p { color: #4A403D; width: 100%; font-weight: 500; margin: 1rem 0; font-size: 1.1rem; text-shadow: none; }
/*food packages*/

.title {

  color: rgb(120, 62, 0);

  font-size: 2.5rem;

  font-weight: 800;

  text-align: center;

  margin-bottom: 5rem;

}



.title::after {

  content: "";

  background: rgb(255, 149, 0);

  width: 5%;

  height: 4px;

  display: block;

  margin: auto;

}

.wrap {

  display: flex;

  gap: 2rem;

  flex-wrap: wrap;

}

.wrap-item {

  flex: 1 250px;

  background: rgb(250, 240, 225);

  border-radius: 0.5rem;

}

.wrap-header {

  padding: 0.5rem;

  color: brown;

}

.wrap-header h2 {

  font-size: 1.1rem;

  text-align: center;

  font-weight: 400;

}

.wrap-price {

  text-align: center;

  margin: 0.5rem 0;

  font-size: 1.5rem;

  font-weight: 900;

  color: #333;

}

.wrap-price span {

  margin-right: 0.25rem;

  font-size: 1.5rem;

}

.wrap-image {

  background: url("../images/wrap1.jpg");

  width: 100%;

  height: 100px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  border-radius: 0.5rem 0.5rem 0 0;

}



.wrap-image2 {

  background: url("../images/wrap2.jpg");

  width: 100%;

  height: 100px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  border-radius: 0.5rem 0.5rem 0 0;

}



.wrap-image3 {

  background: url("../images/wrap3.jpg");

  width: 100%;

  height: 100px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  border-radius: 0.5rem 0.5rem 0 0;

}



.wrap-image4 {

  background: url("../images/wrap4.jpg");

  width: 100%;

  height: 100px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  border-radius: 0.5rem 0.5rem 0 0;

}

.wrap-text {

  padding: 0.5rem;

  text-align: center;

  color: #555;

}

/*tagline*/

.tagline {

  background:

    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),

    url("../images/tagline.jpg");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  background-attachment: fixed;

  height: 300px;

}

.tagline p {

  font-size: 2rem;

  font-weight: 900;

  margin: 0 auto;

  text-align: center;

  color: white;

}

.write {

  font-family: "Pacifico", cursive;

  font-weight: 400;

  font-style: normal;

}

.center {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  text-shadow: 0 0 10px black;

}

/*marquee*/

.marquee {

  background: radial-gradient(circle, rgb(120, 62, 0), #333);

  color: white;

  padding: 1.5rem;

}

.marquee p {

  font-weight: 600;

}

/*surprise Bag*/

.order {

  font-size: 1.2rem;

  text-align: center;

  margin-bottom: 1rem;

}

.cat-item {

  background: rgb(255, 149, 0, 0.1);

  border-radius: 0 0.5rem 0.5rem 0;

  box-shadow: 0px 15px 10px -15px #111;

}

.cat-item-header {

  color: white;

  padding: 1rem;

  background: rgb(120, 62, 0);

  font-weight: 600;

  font-size: larger;

}

.cat-item-list {

  padding: 1rem 0 1rem 3rem;

}

.cat-item-image {

  height: 200px;

}

.cat-list-item ul {

  list-style: circle;

  list-style-position: inside;

}

.cat-item-list li {

  margin-bottom: 0.5rem;

}



.cat-item-list li::marker {

  color: rgb(120, 62, 0);

  font-size: 1.5rem;

  line-height: 1.5rem;

}

.sweet {

  background: url("../images/choco.png");

  background-size: cover;

  background-position: center;

}

.jollof {

  background: url("../images/jollof.png");

  background-size: cover;

  background-position: center;

}



.groceries {

  background: url("../images/groceries.jpg");

  background-size: cover;

  background-position: center;

}

/*how it works*/

.how {

  background: #f2f2f2;

}

.how-it-works {

  background: white;

  padding: 2rem;

  border-radius: 0.5rem;

}

.text-header {

  color: #333;

  font-size: 1.3rem;

  margin-bottom: 1rem;

  font-weight: 700;

  text-align: center;

}

.text-body {

  text-align: center;

}

.icon {

  width: 60px;

  height: 60px;

  background: linear-gradient(45deg, orange, rgb(246, 188, 105));

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 2rem;

  border-radius: 50%;

  margin: 0 auto 2rem auto;

}

.icon ion-icon {

  color: white;

  font-size: 2rem;

  font-weight: 900;

}

/*login*/

.login {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

.form-group {

  width: 100%;

  height: 2.5rem;

  padding: 1rem;

  margin-bottom: 0.5rem;

}

.login-image {

  width: 150px;

  margin: 0 auto;

}

.login-wrapper {

  border-radius: 0.5rem;

  padding: 2rem;

  max-width: 400px;

  width: 95%;

  background: linear-gradient(white, rgb(238, 216, 174));

  border: 2px solid rgb(248, 225, 192);

}



.login-wrapper h2 {

  color: rgb(120, 62, 0);

  margin-bottom: 1rem;

  text-align: center;

}

.push {

  background: linear-gradient(rgb(120, 62, 0), brown);

  border: none;

  color: white;

  padding: 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 600;

}

.new-user {

  display: flex;

  justify-content: space-between;

  font-size: 0.9rem;

}

.new-user p a {

  color: brown;

  font-weight: 600;

}



.new-user p a:hover {

  color: orange;

  font-weight: 600;

}

/*footer*/

footer {

  background: #583726;

}

.footer-logo {

  width: 75px;

  float: left;

  background: white;

  margin-right: 0.5rem;

}

.footer-col {

  color: white;

  text-align: justify;

  line-height: 1.5;

}

.footer-col h2 {

  font-size: 1.2rem;

  margin-bottom: 1rem;

  color: rgb(246, 188, 105);

}



.footer-col ul {

  list-style: none;

}



.footer-col ul li a {

  color: white;

  font-size: 0.9rem;

  transition: 0.5s;

}



.footer-col ul li a:hover {

  color: rgb(255, 149, 0);

}



.copyright-row {

  margin-top: 2rem;

  color: white;

  font-size: 0.85rem;

  border-top: 1px solid rgba(255, 255, 255, 0.3);

  padding-top: 1rem;

}

.copyright {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

/*main*/

.main {

  margin-top: 149.36px;

  min-height: calc(100vh - 509.23px);

}

.food1 {

  font-weight: 800;

  color: rgb(120, 62, 0);

}



.food2 {

  font-weight: 800;

  color: rgb(255, 149, 0);

}

/*why*/

.why {

  background: #fff5ee;

}

.why-list {

  width: 90%;

  margin: 0 auto;

}

.why-list-item {

  display: flex;

  align-items: center;

  margin-bottom: 0.5rem;

  width: 100%;

}

.number {

  color: rgb(120, 62, 0);

  font-size: 1.5rem;

  font-weight: 900;

  padding: 0.5rem;

  width: 10%;

  text-align: right;

}

.words {

  border: 2px solid rgb(255, 149, 0);

  font-size: 1.2rem;

  font-weight: 500;

  padding: 0.5rem;

  border-radius: 0.25rem;

  background: rgba(255, 149, 0, 0.1);

  width: 90%;

}

/*how to*/

.how-to {

  background: linear-gradient(rgb(246, 218, 167), rgb(246, 230, 202));

  padding: 2rem;

  border-radius: 0.5rem;

}

.col-item-text {

  font-weight: 400;

  font-size: 1rem;

  padding: 1rem;

  background: white;

  margin-bottom: 1rem;

  border-left: 8px solid rgb(120, 62, 0);

}

.select_food {

  background: #783a01;

  color: white;

  display: block;

  padding: 0.75rem;

  border-radius: 0.25rem;

  transition: 300ms ease;

}

.select_food:hover {

  background: #f8bf6f;

  color: #333;

  font-weight: 600;

}

/**=== hamburger menu ===**/

.menu {

  width: 30px;

  cursor: pointer;

  display: none;

}

.menu div {

  height: 3px;

  margin: 5px 0;

  background: #333;

  transition: 0.4s;

}

.menu.active div:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}



.menu.active div:nth-child(2) {

  opacity: 0;

}



.menu.active div:nth-child(3) {

  transform: rotate(-45deg) translate(6px, -6px);

}

.super {

  align-self: self-start;

}

/***======= MOBILE BREAKPOINT ========***/



@media (max-width: 1323px) {

  .hero-content {

    display: flex;

    flex-direction: column;

  }

  .hero-content {

    border: 1px solid seagreen;

  }



  .image {

    border: 1px solid #783a01;

    position: static;

    bottom: auto;

    right: auto;

    width: 100%;

  }

  .image img {

    position: static;

    bottom: auto;

    right: auto;

    width: 100%;

    height: auto;

    display: block;

  }

}

@media (max-width: 850px) {

  .menu {

    display: block;

  }

  .nav-menu {

    position: absolute;

    top: 100%;

    left: 0;

    height: calc(100vh - 140.23px);

    width: 260px;

    background: rgba(255, 255, 255, 0.95);

    padding: 2rem 1rem;

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 1rem;



    /* start hidden off-screen */

    transform: translateX(-100%);

    transition: transform 0.3s ease;

    z-index: 999;

  }



  .nav-menu.active {

    transform: translateX(0);

  }

  .hero-content p {

    width: 100%;

    font-size: 1rem;

    text-align: center;

    text-shadow: 2px 4px 8px #111;

  }

  .hero-text h1 {

    font-size: 2rem;

    text-align: center;

    text-shadow: 2px 4px 8px #111;

  }

  .super {

    text-align: center;

    margin: 1rem auto;

    display: inline-block;

    font-size: 1rem;

  }

}



/* =========================================================

   FOODIN2 PASSWORD RESET PAGES

   ========================================================= */



.password-page {

    min-height: 60vh;

    padding: 70px 20px;

    background: #fafafa;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top:135px;

}



.password-container {

    width: 100%;

    max-width: 560px;

    margin: 0 auto;

}



.password-card {

    background: #ffffff;

    padding: 45px 40px;

    border-radius: 10px;

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);

    text-align: center;

}



.password-icon {

    width: 65px;

    height: 65px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #f2e8e2;

    color: #eb7d0f;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

}



.password-card h1 {

    margin: 0 0 15px;

    font-size: 30px;

    color: #333;

}



.password-intro {

    max-width: 450px;

    margin: 0 auto 30px;

    color: #666;

    line-height: 1.7;

    font-size: 16px;

}



.password-form {

    text-align: left;

}



.password-field {

    margin-bottom: 22px;

}



.password-field label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    color: #333;

}



.password-field input {

    width: 100%;

    box-sizing: border-box;

    padding: 14px 16px;

    border: 1px solid #ddd;

    border-radius: 5px;

    font-size: 16px;

    outline: none;

}



.password-field input:focus {

    border-color: #eb7d0f;

}



.password-button {

    width: 100%;

    border: none;

    padding: 15px;

    background: #eb7d0f;

    color: #ffffff;

    border-radius: 5px;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.2s ease;

}



.password-button:hover {

    opacity: 0.9;

}



.password-back {

    margin-top: 25px;

}



.password-back a {

    color: #eb7d0f;

    text-decoration: none;

    font-weight: 600;

}



.password-back a:hover {

    text-decoration: underline;

}



.password-card .danger,

.password-card .success {

    margin-bottom: 20px;

    padding: 12px 15px;

    border-radius: 5px;

}



@media (max-width: 600px) {



    .password-page {

        padding: 45px 15px;

    }



    .password-card {

        padding: 35px 22px;

    }



    .password-card h1 {

        font-size: 25px;

    }



    .password-intro {

        font-size: 15px;

    }

}





/* FoodIN2 hero: edge-to-edge photo with a narrow, smooth left fade */
.hero{position:relative;overflow:hidden;min-height:min(78vh,760px);margin-top:149.36px;display:flex;align-items:stretch;background:radial-gradient(ellipse at 34% 42%,#FFFFFF 0%,#FFFCF8 24%,#F5E5D4 58%,#FFF8F0 78%,#FFFFFF 100%)}
.hero .hero-content{display:flex;flex-direction:row;align-items:stretch;gap:0;width:100%;max-width:none;min-height:inherit;margin:0}
.hero .hero-text{box-sizing:border-box;flex:0 0 49%;width:49%;min-width:0;padding:clamp(2rem,6.4vw,7rem) 1rem clamp(2rem,5vw,5rem) clamp(1.5rem,6.4vw,7rem);display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;text-align:left}
.hero .hero-text h1,.hero .hero-text h1 span{color:#54202A;text-shadow:none}
.hero .hero-text p{color:#4A403D;text-shadow:none;line-height:1.6}
.hero .hero-text .primary-button{align-self:flex-start;margin-left:0}
.hero .hero-image{position:relative;overflow:hidden;flex:1 1 51%;width:51%;min-width:0;align-self:stretch;border-radius:0;background:transparent}
.hero .hero-image:before{content:none}
.hero .hero-image img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center center;opacity:1;mix-blend-mode:normal;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 8%,#000 24%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 8%,#000 24%)}
@media(max-width:768px){.hero{min-height:0;margin-top:149.36px}.hero .hero-content{flex-direction:column;align-items:stretch;min-height:0}.hero .hero-text{flex:none;width:100%;padding:2rem 1.25rem 1rem;text-align:center}.hero .hero-text h1{font-size:clamp(2rem,8vw,3rem);line-height:1.12;overflow-wrap:normal}.hero .hero-text p{font-size:1rem;line-height:1.55}.hero .hero-text .primary-button{align-self:center;display:inline-flex;justify-content:center;align-items:center;max-width:100%}.hero .hero-image{flex:none;width:100%;height:clamp(280px,75vw,480px)}.hero .hero-image img{height:100%;object-position:center center;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)}}