*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.navbar-brand{
    font-size: 2rem;
    font-family: "Lobster", serif;
    color: black;
}
.navbar-brand:hover{
    color:black;
}
.nav-link{
    margin-right: 10px;
    font-family: "Lato", serif;
    margin-left: 10px;
    color:black;
    text-transform: uppercase;
}
.nav-link:hover{
    color:black;
}
.search{
    height: 40px;
    font-family: "Lato", serif;
    width: 80%;
    border-radius:60px;
    outline:none;
    border:2px solid rgb(248, 26,92);
}
.btn0{
    height:40px;
    font-family: "Lato", serif;
    width:40%;  
    outline:none;
    border:none;
    background:rgb(248, 26,92);
    color:white;
    border-radius: 60px;
    font-weight:700;
    margin-left: -35px;
    
}
.main{
    background: url(./img/img0.jpg)no-repeat ;
    background-size:cover;
    height:100vh;
    background-position:50% 50%;
    width:100%;
      
}
.main h1{
    font-size:4rem;
    font-weight:700;
}
.btn1{
    height:45px;
    width:35%;
    border:none;
    outline:none;
    background-color: rgb(248, 26,92);
    color:white;
    font-weight:700 ;
    border-radius:60px;
}
.btn1:hover{
    background-color: rgb(117, 8, 41);
    transition:0.5s;
}
h1{
    font-size:70px;
}
.fixed-card {
    width: 300px; 
    height: 400px; 
  }
  
  .fixed-card .card-body img {
    height: 250px;
    width: 100%; 
    object-fit: cover; 
  }
  .products  {
    display: flex; 
    justify-content: center;
    flex-wrap: wrap; 
  }
  .card:hover{
    -webkit-box-shadow: -10px 5px 42px 4px rgba(0,0,0,0.75);
-moz-box-shadow: -10px 5px 42px 4px rgba(0,0,0,0.75);
box-shadow: -10px 5px 42px 4px rgba(0,0,0,0.75);
transition:0.5 s;
  }
  .apple{
    background : url(./img/apple.jpg) no-repeat;
    background-size:cover;
    height:80vh;
    width:100%

  }
  .apple h1{
    font-family: "Lato", serif;
    color:black;
  }
  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .news{
    background-color:black;
    color:white;
  }
  .btn2{
    height:45px;
    width: 100px;
    margin-left: -10px;
    border:2px solid white;
    font-weight: 600;
  }
  .news input{
    height:45px;
    width:55%;
    border:2px solid white;
    outline:none;
    background: black;
    color:white;
    margin-top:20px;
    font-weight: 600;
  }
  .news::placeholder{
    color:white;
  }
  .fab{
    font-size: 2.5rem;
    cursor:pointer;
    padding-right:5px;
  }





                                                 /* the plant button is from uiverse.io */

               /* From Uiverse.io by MuhammadHasann */ 
               .plantBtn {
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  transition: all .3s ease-in-out;
}

.icon-1 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -1;
}

.icon-2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-3 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-4 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-5 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.plantBtn:hover {
  padding: 13px 25px;
  border-radius: 8px 8px 24px 24px;
}

.plantBtn:hover .icon-1 {
  top: -250%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
  height: auto;
  animation: inIcon1 1s ease .45s forwards;
}

@keyframes inIcon1 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(1deg);
  }

  65% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-2 {
  position: absolute;
  top: -200%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 75px;
  height: auto;
  animation: inIcon2 1s ease .45s forwards;
}

@keyframes inIcon2 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(10deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(4deg);
  }

  80% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-3 {
  position: absolute;
  top: -130%;
  left: 20%;
  transform: translate(-50%, 0);
  width: 60px;
  height: auto;
  animation: inIcon3 1s ease .45s forwards;
}

@keyframes inIcon3 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-2deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-4 {
  position: absolute;
  top: -300%;
  left: 10%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon4 1s ease .45s forwards;
}

@keyframes inIcon4 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  40% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-5 {
  position: absolute;
  top: -350%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon5 1s ease .45s forwards;
}

@keyframes inIcon5 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.fil-leaf-1 {
  fill: #7B9B3A
}

.fil-leaf-2 {
  fill: #556729;
  fill-rule: nonzero
}

.fil-leaf-3 {
  fill: #556729
}

.fil-leaf-4 {
  fill: #3C4819
}

.fil-leaf-5 {
  fill: #3C4819
}/* From Uiverse.io by MuhammadHasann */ 
.plantBtn {
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  transition: all .3s ease-in-out;
}

.icon-1 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -1;
}

.icon-2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-3 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-4 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-5 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.plantBtn:hover {
  padding: 13px 25px;
  border-radius: 8px 8px 24px 24px;
}

.plantBtn:hover .icon-1 {
  top: -250%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
  height: auto;
  animation: inIcon1 1s ease .45s forwards;
}

@keyframes inIcon1 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(1deg);
  }

  65% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-2 {
  position: absolute;
  top: -200%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 75px;
  height: auto;
  animation: inIcon2 1s ease .45s forwards;
}

@keyframes inIcon2 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(10deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(4deg);
  }

  80% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-3 {
  position: absolute;
  top: -130%;
  left: 20%;
  transform: translate(-50%, 0);
  width: 60px;
  height: auto;
  animation: inIcon3 1s ease .45s forwards;
}

@keyframes inIcon3 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-2deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-4 {
  position: absolute;
  top: -300%;
  left: 10%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon4 1s ease .45s forwards;
}

@keyframes inIcon4 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  40% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.plantBtn:hover .icon-5 {
  position: absolute;
  top: -350%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon5 1s ease .45s forwards;
}

@keyframes inIcon5 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.fil-leaf-1 {
  fill: #7B9B3A
}

.fil-leaf-2 {
  fill: #556729;
  fill-rule: nonzero
}

.fil-leaf-3 {
  fill: #556729
}

.fil-leaf-4 {
  fill: #3C4819
}

.fil-leaf-5 {
  fill: #3C4819
}



                                                       /*the Submit button*/


  /* from uiVerse*/

  /* From Uiverse.io by AlimurtuzaCodes */ 
.btn {
  border: none;
  width: 15em;
  height: 5em;
  border-radius: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #1C1A1C;
  cursor: pointer;
  transition: all 450ms ease-in-out;
}

.sparkle {
  fill: #AAAAAA;
  transition: all 800ms ease;
}

.text {
  font-weight: 600;
  color: #AAAAAA;
  font-size: medium;
}

.btn:hover {
  background: linear-gradient(0deg,#A47CF3,#683FEA);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(255, 255, 255, 0.2),
  0px 0px 180px 0px #9917FF;
  transform: translateY(-2px);
}

.btn:hover .text {
  color: white;
}

.btn:hover .sparkle {
  fill: white;
  transform: scale(1.2);
} 


                                   /*the social media links*/
                                   /*from uiverse.io*/

/* From Uiverse.io by wilsondesouza */ 
ul {
  list-style: none;
}

.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
  padding: 0.5rem;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: 100%;
  right: 110%;
  transform: translateY(200%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}

.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
  background-color: #0274b3;
}

.example-2 .icon-content a[data-social="github"] .filled,
.example-2 .icon-content a[data-social="github"] ~ .tooltip {
  background-color: #24262a;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #ff0000;
}



                                       /*the scroll animation*/
 
                                       

 @keyframes fade-in {
from{
scale: .8; opacity: 0;
}
to{
scale: 1; opacity: 1;
}
                                        
}
                                    
section{
animation: fade-in linear;
animation-timeline: view();
animation-range-start:cover;
animation-range-end: 700px;
}                                       


                                /*the boxes animation*/


.wrapper{
    border: 0px solid black;
    width: 90%;
    max-width:1536px;
    margin-inline: auto;
   position:relative;
   height: 100px;
   margin-top: 5rem;
   overflow: hidden;
}

@keyframes scrollleft{

    to{
        left: -200px;

    }
}


.item{
    width: 200px;
    height: 100px;
   /* background-color: red;*/
    border-radius: 6px ;
    position:absolute;
    left: 100%;
    animation-name: scrollleft ;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count:  infinite;
    margin-left: auto;
    margin-right: auto;
}
.item1 {
    background-image: url(./img/Lemon\ Poppy\ Seed\ Shortbread\ Cookies\ -\ ideal\ for\ afternoon\ tea!.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
}

.item2 {
    background-image: url(./img/apple.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
}

.item3 {
    background-image: url(./img/kiwi.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
}

.item4 {
    background-image: url(./img/Coconut.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
}

.item5 {
    background-image: url();
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 5));
}

.item6 {
    background-image: url(./img/mango.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 6));
}

.item7 {
    background-image: url();
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 7));
}

.item8 { background-image: url(./img/Study_Finds_Evidence_That_the_MIND_Diet_May_Protect_Patients_From___-removebg-preview.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation-delay: calc(30s / 8 * (8 - 8));
}