@font-face {

  font-family: "FilsonProBlack-bold";

  src: url("../font/FilsonProBold.otf");

}

@font-face {

  font-family: "FilsonProBlack-Medium";

  src: url("../font/FilsonProMedium.otf");

}

@font-face {

  font-family: "second-font";

  src: url("../font/CCGibbonsGazette.ttf");

}

:root {

  --nav-color: #006e41;

  --hero-header-color: #b8358b;

  --hero-para-color: #6f3975;

  --tofu-tikka: #ef4137;

  --highight-color: #c8da2c;

  --yellow-color: #f3d511;

}

a {

  font-size: inherit;

  text-decoration: none;

  color: inherit;

  font-weight: inherit;

}

.logo {

  width: 100px;

  height: 100px;

  padding: 5px 0;

}

/* .logo img {

  width: 100%;

  height: 100%;

} */

.navlinks {

  display: flex;

  align-items: center;

  gap: 40px;

  justify-content: center;

  list-style: none;

  font-size: 1.5rem;

  font-weight: 600;

  font-family: "FilsonProBlack-bold";

  color: var(--nav-color);

  transition: color 0.3s ease-in-out;

}
.navlinks li a{ text-decoration: none;}
.navlinks li:hover {

  color: red;

}

header {

  /* height: 100vh;

  width: 100%;

  position: relative; */

    /* position: absolute;

  width: 100%;

  left: 0px;

  z-index: 9;

top: 0px */

}

header .container {

  position: relative;

  z-index: 30px;

}

nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.nav-con {

  width: 95%;

}

.hero-section {

  height: 85%;

  align-items: center;

  justify-content: space-between;

}

.hero-section-left-img {

  position: absolute;

  top: 0;

  left: 0;

  z-index: 10px;

}

.bg-Img img {

  width: 28vw;

}



.hero-heading {

  font-family: "FilsonProBlack-bold";

  font-size: 4rem;

  line-height: 1;

}

.para {

  font-family: "FilsonProBlack-Medium";

  font-size: 1.25rem;

  color: var(--hero-para-color);

}

.hero-left {

  width: 56%;

  text-align: center;

  margin: auto;

  color: var(--hero-header-color);

}

.hero-right {

  width: 100%;

  height: 100%;

}

.hero-right img {

  width: 100%;

  height: 100%;

}

.btns {

  color: white;

  font-family: "FilsonProBlack-Medium";

  font-size: 1.25rem;

  background-color: var(--hero-header-color);

  padding: 10px 20px;

  border-radius: 10px;

  transition: all 0.3s ease-in-out;

}

.btns:hover {

  background-color: var(--hero-para-color);

}

.header-bottom {

  padding: 30px;

  background-color: #006e41;

}

.sub-heding {

  color: var(--highight-color);

  font-family: "second-font";

  font-size: 2rem;

  line-height: 1;

  text-align: center;

}

.header-bottom-img {

  height: 100%;

  width: 100%;

}

.header-bottom-img img {

  width: 100%;

  margin-top: -100px;

}

.header-bottom-con {

  display: flex;

}

.header-bottom ul {

  padding: 0;

  padding-left: 30px;

  margin: 0;

  list-style: none;

  display: flex;

  align-items: center;

  gap: 60px;

}

/* grilled-veg */



.comm-pd {

  padding: 80px 0;

}

.comm-hd {

  font-size: 5.5rem;

  font-family: "FilsonProBlack-bold";

  margin: 0;

}

.small-hd {

  font-size: 3rem;

  font-family: "second-font";

}

.grilled-veg {

  color: white;

  background: var(--hero-para-color);

}

.grilled-veg .para {

  color: white;

}

.grilled-veg-right,

.tofu-tikka-right {

  text-align: center;

}

.img-con {

  height: 100%;

  width: 100%;

}

.img-con img {

  width: 100%;

  height: 100%;

}

.grilled-veg {

  background-image: url("./img/grilled-veg-bg.png");

  background-repeat: no-repeat;

  background-position: left;

}

.grilled-veg-con,

.tofu-tikka-con {

  align-items: center;

  justify-content: space-between;

}

.grilled-veg-left,

.tofu-tikka-left {

  position: relative;

}



.grilled-veg-left .protein {

  position: absolute;

  bottom: 5%;

  right: 5%;

}

.tofu-tikka {

  background-image: url("./img/tofu-tikka-bg.png");

  background-repeat: no-repeat;

  background-position: right;

  background-size: contain;

}

.tofu-tikka {

  background-color: var(--tofu-tikka);

  color: white;

}



.tofu-tikka .para {

  color: white;

}



.tofu-tikka-left .protein {

  position: absolute;

  bottom: 5%;

  left: 5%;

}



/* sproutin */

.sproutin {

  background-color: var(--nav-color);

  position: relative;

  /* overflow: hidden; */

}

.carrot-img {

  position: absolute;

  width: 16%;

  bottom: -10%;

  left: 0;

  z-index: 1;

}

.carrot-img img {

  width: 100%;

  height: 100%;

}



.sproutin-con {

  color: white;

  text-align: center;

}

.sproutin-con .para {

  margin-top: 20px;

  color: var(--highight-color);

}

.sproutin-img {

  width: 120px;

  height: 120px;

}

.sproutin-img img {

  height: 100%;

  width: 100%;

}

.sproutin-con-2 {

  display: flex;

  align-items: center;

  color: white;

  gap: 25px;

  justify-content: center;

  margin-top: 25px;

}

.plants {

  position: relative;

  z-index: 99;

  background-color: #fff;

}

.eggplant-img {

  position: absolute;

  width: 18%;

  top: -40%;

  right: 0;

}

.eggplant-img img {

  width: 100%;

  height: 100%;

}

.plants-con {

  text-align: center;

}

.plants .hero-heading {

  color: var(--hero-header-color);

}

.plants .para {

  color: var(--hero-header-color);

}



.mid-hd {

  font-size: 1.5rem;

  font-family: "FilsonProBlack-bold";

  margin: 0;

}

.plants-con-2 {

  margin-top: 30px;

  align-items: center;

  justify-content: center;

  gap: 50px;

}

.plants-con-2 .mid-hd {

  text-align: center;

  color: var(--hero-para-color);

}

/* send-email */



.send-email {

  padding: 40px;

  background-color: var(--hero-para-color);

}

.send-email-con {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.send-email-hd {

  font-family: "FilsonProBlack-bold";

  font-size: 2.083rem;

  font-size: 600;

  color: white;

  margin: 0;

}

.send-email .mid-hd {

  color: var(--yellow-color);

}

.email-box {

  width: 30%;

  background: white;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px;

  border-radius: 10px;

}

.email-box input {

  width: 75%;

  border: none;

  outline: none;

  font-family: "FilsonProBlack-bold";

  color: var(--hero-header-color);

  font-size: 1.2rem;

  padding: 0 10px;

}

.email-box input::placeholder {

  opacity: 0.7;

  color: var(--hero-header-color);

}

.email-box button {

  border: none;

  outline: none;

  padding: 10px 25px;

  background: var(--hero-header-color);

  border-radius: 5px;

  font-family: "second-font";

  transition: background 0.2s ease-in-out;

}

.email-box button img {

  width: 20px;

  height: 20px;

  filter: invert();

}

.email-box button:hover {

  background-color: var(--hero-para-color);

}

footer {

  background-color: var(--hero-header-color);

  font-family: "FilsonProBlack-bold";

}



.footer-con ul {

  padding: 0;

  margin: 0;

  list-style: none;

  font-size: 1.5rem;

}



.footer-con ul li {

  padding-bottom: 5px;

  color: var(--yellow-color);

  transition: all 0.3s ease-in;

}

.footer-con ul li:hover {

  color: var(--hero-para-color);

}

.footer-bottom {

  text-align: center;

  padding-bottom: 30px;

  font-size: 1.5rem;

  color: var(--hero-para-color);

}

/* meet - page */

.meet-header {

  height: 81vh;

}

.meet-hero {

  width: 60%;

  margin: auto;

  text-align: center;

}

.meet-hero-headers {

  padding: 0 0 30px;

  color: var(--hero-header-color);

}



.bg-Img .meet-second {

  width: 10vw;

}

.mert-mid-hd {

  font-size: 2.875rem;

  font-family: "FilsonProBlack-bold";

}

.meet-hero-images {

  margin-top: 40px;

  display: flex;

  justify-content: center;

  gap: 35px;

}

.meet-img {

  width: 150px;

  height: 150px;

}

.meet-img img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.our-mission {

  background-color: var(--hero-para-color);

  color: white;

  text-align: center;

}

.our-mission .para {

  margin: auto;

  width: 70%;

  padding: 20px 0;

  color: white;

}

.our-kitchen {

  position: relative;

}

.yellow_pods-con {

  position: absolute;

  top: -20%;

  left: 2%;

}

.yellow_pods-con img {

  width: 18vw;

}

.our-kitchen .hero-heading {

  color: var(--hero-header-color);

  text-align: center;

}

.our-kitchen span {

  color: var(--nav-color);

}

.grid-container {

  display: grid;

  grid-template-columns: 0.8fr 1fr;

  gap: 20px 30px;

  align-items: start;

  width: 55%;

  margin: auto;

  padding-top: 40px;

}



.title {

  font-family: "FilsonProBlack-bold";

  font-size: 1.4rem;

  color: var(--nav-color);

}



.description {

  font-family: "FilsonProBlack-Medium";

  font-size: 1.1rem;

  color: var(--hero-para-color);

}

.hero-section-right-img {

  position: absolute;

  top: 0;

  right: 0;

  z-index: 10px;

}

.bg-Img .meet-eggplant-full {

  width: 18vw;

}

/* eat */

.eat-header .hero-section-right-img {

  top: -20%;

}

.eat-header .hero-section-right-img .bg-Img img {

  width: 20vw;

}

.eat-hero-headers {

  padding: 0 0 30px;

  color: var(--hero-para-color);

  text-align: center;

}

.eat-prodcts {

  justify-content: space-between;

  align-items: center;

}

.eat-prodcts-img {

  width: 100%;

  height: 100%;

}

.eat-prodcts-img img {

  width: 100%;

  height: 100%;

}

.eat-prodcts-con {

  text-align: center;

  color: var(--hero-para-color);

  display: flex;

  flex-direction: column;

  gap: 20px;

}

.eat-prodcts-con {

  width: 80%;

  margin: auto;

}

.eat-prodcts-con .para {

  margin: 0;

}

.product-sub-hd {

  padding: 0;

  margin: 0;

  font-size: 1.5rem;

  font-family: "second-font";

}



.product-small-hd {

  font-size: 1.5rem;

  margin: 0;

  font-family: "second-font";

  color: var(--hero-header-color);

}

.product-branding {

  display: flex;

  gap: 20px;

  align-items: center;

  justify-content: space-between;

  padding: 0 30px;

}

.product-branding img {

  width: 80px;

}



.product-gallery-img {

  width: 80px;

  height: 80px;

  border-radius: 8px;

  overflow: hidden;

}

.product-gallery {

  display: flex;

  gap: 10px;

  justify-content: space-between;

}

.product-gallery-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.tikka-tofu {

  color: var(--tofu-tikka);

}



.compare-products .hero-heading {

  color: white;

}

.compare-products-con {

  padding: 80px;

  text-align: center;

}

.grilled-left {

  background-color: var(--hero-para-color);

}

.grilled-left .product-sub-hd,

.tikka-right .product-sub-hd {

  color: var(--hero-header-color);

  font-size: 2rem;

}

.compare-products-img {

  padding-top: 20px;

  height: 550px;

}

.compare-products-img {

  padding-top: 20px;

  height: 550px;

}

.compare-products-img img {

  height: 100%;

  width: 100%;

}

.tikka-right {

  background-color: var(--tofu-tikka);

}

.compare-products-bottom-img {

  height: 800px;

}

.compare-products-bottom-img img {

  height: 100%;

  width: 100%;

  object-fit: cover;

  object-position: top;

}

.eat-tikka {

  position: relative;

}

.eat-tikka .green_onions {

  position: absolute;

  width: 250px;

  bottom: -15%;

  right: 0;

}

.eat-tikka .green_onions img {

  width: 100%;

  height: 100%;

}



/* sprout page*/

.sprout-header {

  height: 40vh;

}

.sprout-header .hero-section-left-img{

  z-index: 10;

}

.sprout-hero {

  margin: auto;

  width: 45%;

  text-align: center;

}

.sprout-hero .hero-heading{

  color: var(--hero-header-color);

}

.sprout-left-2 img{

  width: 20vw;

}

.sprout-header .bg-Img .sprout-right-img {

  width: 14vw;

}

.sprouting {

  background: var(--nav-color);

  text-align: center;

  color: white;

  position: relative;

}

.sprouting-right-img{

  position: absolute;

  bottom: 0;

  right: 0;

}

.sprouting-right-img img{

  width: 18vw;

}

.sprouting-con {

  padding: 20px;

  width: 45%;

  margin: auto;

}

.sprouting-block .para {

  color: var(--highight-color);

}

.what-we-sprout {

  text-align: center;

}

.what-we-sprout .hero-heading {

  color: var(--hero-header-color);

}



.what-we-sprout-con {

  justify-content: center;

}

.what-we-sprout-box img {

  width: 100%;

  height: 100%;

}

.what-we-sprout-box .mid-hd{

  padding-top: 5px;

  color: var(--nav-color);

}

/* find-page */

.find-heder {

  height: 85vh;

}

.find-heder .hero-left {

  width: 65%;

  margin: 0 auto;

}
.top-banner-section{
  padding-top: 150px;
}
.sub-heding a{
  color: #c8da2c;
  text-decoration: none;
}
.footer-con a{
    color: #f3d511;
    text-decoration: none;
}
.footer-bottom h5 a{
  color: #6f3975;
  text-decoration: none;
  font-weight: bold;
}