body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    background-color: #692076;
  }
  input, textarea {
    font-family: 'Poppins', sans-serif;
    outline: none;
  }
  #firstP {
    margin-top: 10%;
    text-shadow:  2px 1px 2px rgb(147, 123, 59);
  }
 
  header {
    width: 100%;
    height: 90vh;
    background-image: linear-gradient(to bottom, #f3d2a8, #692076);
    /* background-image: url('public/images/wallpaper.png'); */
    background-position: left;
    background-size: cover;
    text-shadow:  2px 1px 2px rgb(133, 113, 58);
  }
  .imgWrapper {
    /* margin-left: -20%; */
    display: flex;
    justify-content: space-between;
    width: 360px;
  }
  .firstImg {
    width: 100px;
    height: 300px;
    margin-left: 30%;
    box-shadow: 1px 3px 3px rgb(28, 22, 7);
  }
  #fourthImg{
    display: none;
  }
  #fifthImg{
    display: none; 
  }
  nav {
    /* background-image: linear-gradient(to left,  #91ac41, #e4b476, #f69dad); */
    background-image: linear-gradient(to left, #f3d2a8, #692076);
    width: 10%;
    height: 577px;
    display: flex;
    margin-top: 15%;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px;
    box-sizing: border-box;
    position: fixed;
    z-index: 10;
  }
  .nav.active .nav__links{
    top: 3em;
  }
  .nav__icon-menu {
    display: block;
    cursor: pointer;
  }
  .nav__links {
   margin-left: -10%;
  }
  .nav__content{
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  #close {
    display: block;
    position: absolute;
    margin-top: -300%;
    text-align: center;
    border: 2px solid red;
    width: 20px;
    z-index: 1;
  }
  .nav__links{
    position: absolute;
    /* top: -150vh; */
    left: 0;
    margin-left: -25%;
    /* background-color: rgba(255,255,255, .8); */
    /* backdrop-filter: blur(5px); */
    background-image: linear-gradient(to left, #f3d2a8, #692076);
    width: 73%;
    height: 90%;
    padding-top: 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .8s ease;
  }
  
  .nav__link{
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: -30%;
  }
  
  .nav__link a{
    font-size: var(--middle-font-size);
    font-weight: 500;
    color: var(--second-text-color);
   margin-left: -8%;
  }
  
  li{
    list-style-type: none;
  }
  
  a{
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    animation: neon 4s ease infinite
  }
  .logo {
    width: 40px;
  }
  
  .menu-item {
    color: black;
    font-weight: 600;
    font-size: 14px;
    margin-right: 24px;
    cursor: pointer;
  }

  
  .menu-item i {
    padding-left: 4px;
  }
  
  
  #landing-section {
    width: 100%;
    height: 100vh;
  }
  
  #main-text-wrapper {
    width: 100%;
    height:60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  #main-text-wrapper h1 {
    /* margin-top: -20%; */
    width: 100%;
    max-width: 1100px;
    font-size: 20px;
    font-weight: 600;
    /* letter-spacing: 8.8px; */
    /* line-height: 1.2; */
    text-align: center;
    /* margin: 0; */
    animation: neon 4s ease infinite
  }
  @keyframes neon {
    0%,
    100% {
        text-shadow: 0 0 10px #554a55a8, 0 0 20px #ef00e3a8, 0 0 20px #7a0777a8, 0 0 20px #d885d4a8, 0 0 2px #fed128, 2px 2px 2px #806914;
        color: #0f3484;
    }
    50% {
        text-shadow: 0 0 2px #891715, 0 0 5px #da4e4a, 0 0 5px #800e0b, 0 0 5px #3209fb, 0 0 2px #800e0b, 4px 4px 2px #40340a;
        color: #eda0d3;
    }
  }
  
  #main-text-wrapper p {
    width: 100%;
    max-width: 1100px;
    /* font-size: 14px; */
    letter-spacing: 0.5px;
    font-weight: 400;
    color: white;
    text-align: center;
    /* padding-top: 32px; */
  }

  #firstImg1 {
    animation: 2s ease-out 0s 1 slideInFromLeft;
  }
  #secondImg {
    animation: 2.5s ease-out 0s 1 slideInFromLeft;
  }
  #thirdImg {
    animation: 3.5s ease-out 0s 1 slideInFromLeft;
  }
  #fourthImg {
    animation: 4.5s ease-out 0s 1 slideInFromLeft;
  }
  #fifthImg {
    animation: 5.5s ease-out 0s 1 slideInFromLeft;
  }

  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-500%);
    }
    100% {
      transform: translateX(0);
    }
  }

  /* STEPS SECTION STYLES START */
  #steps-section, #address-section {
    background-image: linear-gradient(to top, #f3d2a8, #a03eb2, #692076);
    width: 100%;
    /* height: 2150px; */
    display: flex;
    flex-direction: row;
    justify-content: stretch;
  }
  
  .step-item, .step-item2{ 
    /* width: 400px; */
    /* height: 500px; */
    padding: 70px 48px;
    text-align: center;
    color: white;
    box-sizing: border-box;
  }
  
  .step-item img {
    width: 100px;
    height: 100px;
  animation: zoomin 0.5s ease-in-out;
  border-radius: 10px;
}
  .step-item2 img {
    border-radius: 10px;
    margin-left: 17%;
    font-size: 96px;
    width: 100px;
    height: 100px;
  animation: zoomin 1s ease-in-out;
}

#third-step img {
  width: 100px;
  height: 100px;
  animation: zoomin 1.5s ease-in-out;
}

#fourth-step img {
  width: 100px;
  height: 100px;
  animation: zoomin 2s ease-in-out;
}

@keyframes zoomin {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.1);
  }
  95% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}
  
  
  .step-item:hover img, .step-item2:hover img{
    transform: scale(1.5, 1.5);
    -webkit-text-stroke: 1px #212121;
    transition: 0.25s;
  }
  
  .step-item h3, .step-item2 h3 {
    margin-left: 17%;
    font-weight: 600;
    font-size: 24px;
  }
  
  .step-item p, .step-item2 p {
    margin-left: 17%;
    /* font-size: 14px; */
    letter-spacing: 0.5px;
    line-height: 1.6;
    margin-top: 0;
  }

  
  
  /* STORE SECTION STYLES START */
  #store-section {
    width: 100%;
    background-image: linear-gradient(to bottom, #f3d2a8, #a03eb2, #692076);
    padding-top: 75px;
    padding-bottom: 75px;
    text-align: center;
  }
  
  #fresh-food-heading {
    color: #91ac41;
    font-size: 24px;
    font-family: 'Caveat', cursive;
    margin: 0;
    margin-top: 35px;
  }
  
  #store-section > h3 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 80px;
    margin-left: 8%;
    margin-bottom: 8px;
    text-shadow:  2px 1px 2px rgb(147, 123, 59);
    animation: neon 4s ease infinite
  }
  
  #store-desc {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: white;
    letter-spacing: 0.5px;
    margin-left: 6%;
    margin-bottom: 55px;
  }
  
  #store-items-wrapper {
    width: 100%;
    max-width: 1140px;
    display: flex;
    justify-content: stretch;
    margin: 0 auto;
  }
  
  .store-item {
    width: 25%;
    text-align: center;
    padding: 24px;
  }
  .icon-wrapper2 {
    /* !!! */
    opacity: 0;
  }
  .icon-wrapper {
    display: inline-block;
    border-radius: 50%;
    color: white;
    opacity: 0;
    transform: translateX(0px);
    transition: all 0.8s ease-out;
    transition-delay: 0.6s;
  }
  .icon-wrapper img {
    box-shadow: 0 2px 5px #1a0303;
    border-radius: 50%;
    height: 110px;
    width: 110px;
    margin-left: 15%;
  }

   .scroll-animation3 {
    opacity: 1;
    transform: translateX(1);
  }
  .scroll-animation2 {
    opacity: 1;
    transform: translateX(1);
  }
  
  .store-item:hover .icon-wrapper{
    transform: scale(1.1, 1.1);
  }
  
  .store-item h3 {
    font-size: 24px;
    font-weight: 600;
    margin-left: 15%;
    padding: 15px;
    text-shadow:  2px 1px 2px rgb(147, 123, 59);
    animation: neon 4s ease infinite
  }
  
  .store-item p {
    font-size: 16px;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: white;
    /* min-width: 250px; */
    margin-left: 15%;
  }
  /* STORE SECTION STYLES ENDS */
  
  
  
  /* VIDEO SECTION STYLES START */
  /* #video-section h3 {
    color: #8b8b99;
    font-size: 44px;
    font-weight: 400;
  } */

  
  #line-separator {
    width: 96px;
    display: inline-block;
    height: 1px;
    background-color: #e4b476;
    margin-bottom: 36px;
  }
  
  #video-section iframe {
    width: 100%;
    height: 425px;
  }
  
  /* VIDEO SECTION STYLES END */
  
  
  
  /* ADDRESS SECTION STYLES START */
  #address-section{
    background-image: linear-gradient(to bottom, #f3d2a8, #a03eb2, #692076);
    width: 100%;
    height: 550px;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
  }
  
  /* ADDRESS SECTION STYLES END */
  
  
  
  /* FOOTER SECTION STYLES START */
  footer {
    background-image: linear-gradient(to left, #f3d2a8, #a03eb2, #692076);
    color: white;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 30px 0px;
  }
  a {
    color: white;
  }
  a span {
    text-decoration: underline;
  }
 
  /* FOOTER SECTION STYLES END */



  /* logo animation */

  .home .tree p span {
    font-size: 3.8vw;
    color: grey;
    font-weight: 500;
    display: none;
  }
  
  .home .tree p span.text-in {
    display: block;
    animation: textIn 0.5s ease;
  }
  .home .tree p span.text-out {
    animation: textOut 0.5s ease;
  }
  @keyframes textIn {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0%);
    }
  }
  @keyframes textOut {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(-100%);
    }
  }

  #brown, #brown2, #brown3, #brown4 {
    margin-left: 15%;
    box-shadow: 1px 3px 3px rgb(28, 22, 7);
  }


  #video-section {
    background-image: linear-gradient(to top, #f3d2a8, #a03eb2, #692076);
  }
  
  .container{
    /* width: 70%;
    max-width: 1140px; */
    /* margin-left: 25%; */
    /* text-align: center; */
    color: white;
    text-shadow:  2px 1px 2px rgb(147, 123, 59);
  }
  #price {
    margin-left: 25%;
    color: black;
    text-shadow:  2px 1px 2px rgb(147, 123, 59);
  }

  #price > h2 {
    animation: neon 4s ease infinite
  }
  .moving{
    margin-left: 32%;
    width: 300px;
    animation: 14s ease-out 0s 1 slideLeft;
  }
  @keyframes slideLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  .moving2{
    margin-left: 25%;
    width: 300px;
    animation: 14s ease-out 0s 1 slideInFromRight;
  }
  @keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(50);
    }
  }
 
 #address-wrapper {
  margin-top: 10%;
  margin-left: 25%;
  text-shadow:  2px 1px 2px rgb(147, 123, 59);
  animation: neon 4s ease infinite
 }
 #lastImage, #lastImage2 {
  display: none;
 }