@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,400;0,600;1,700&display=swap');
* {
   box-sizing: border-box;
   padding: 0px;
   margin: 0px;
}

body {
   font-family: 'K2D', sans-serif !important;
   z-index: 1;
}

p {
   letter-spacing: 1px !important;
}

h1 {
   letter-spacing: 1px !important;
}

h2 {
   letter-spacing: 2px !important;
}

h3 {
   letter-spacing: 2px !important;
}
.center {
   text-align: center;
}
.left-align {
   text-align: left;
}

.mgt {
   margin-top: 1%;
}
.mgb {
   margin-bottom: 1%;
}
.mgb-para {
   margin-bottom: 5%;
}
.mgb-h3 {
   margin-bottom: 2%;
}
.head {
   margin-top: 5rem;
   margin-bottom: 1rem;
}

.dotted-hr {
   border-style: dotted;
   border-bottom: none;
   width: 5%;
   border-width: 0.5em;
   margin: 0 auto;
   color: gray;
}

.flx-imgs {
   display: flex;
   /* justify-content: space-evenly; */
   margin-top: 5%;
   text-align: center;
   /* margin-left: 10rem; */
}
.texxt {
   position: absolute;
   top: 155%;
   left: 26%;
   text-align: right;
}

.texxtt {
   text-align: left;
   position: absolute;
   left: 45%;
   top: 185%;
}

.slider {
   /* width: 1349px; */
   width: 100%;
}

.slide {
   /* width: 1349px; */
   /* width: 100%; */
   background-size: cover;
   height: 650px;
}
.logo-img {
   width: 15vw;
   height: 29px;
}

.img1-link {
   position: absolute;
   top: 170%;
   left: 26%;
   background-color: #8dbb3c;
   padding: 0.6rem 3rem;
   border-radius: 2rem;
}

/* ! */
.banner-head {
   position: absolute;
   padding-top: 25vh;
   padding-left: 5rem;
   width: 45vw;
   /* color: white; */
}

.banner-head1 {
   color: #bc2e31;
}

.banner-para {
   position: absolute;
   padding-top: 55vh;
   font-size: larger;
   width: 35vw;
   padding-left: 5rem;
   /* color: white; */
}
.slide-wh {
   color: black;
}
@media screen and (max-width: 600px) {
   .banner-head {
      position: absolute;
      padding-top: 35vh;
      padding-left: 5rem;
      width: 85vw;
      font-size: 2rem;
   }
   .banner-para {
      position: absolute;
      padding-top: 65vh;
      width: 85vw;
      padding-left: 5rem;
      font-size: 1.2rem;
   }
}

/* ! */

.img2-link {
   position: absolute;
   top: 200%;
   left: 45%;
   background-color: #8dbb3c;
   padding: 0.6rem 3rem;
   border-radius: 2rem;
}

.img1-link:hover {
   background-color: rgb(206, 206, 90);
}

.img2-link:hover {
   background-color: rgb(206, 206, 90);
}

.img1-div {
   width: 40%;
   background-color: #f4f4f4;
   padding-top: 10rem;
   padding-right: 10rem;
   margin-right: 10px;
}
.img2-div {
   width: 40%;
   margin-left: 10px;
   background-color: #f4f4f4;
}

.img1 {
   width: 488px;
   height: 323px;
}
.img2 {
   width: 235px;
   height: 386px;
   position: relative;
   left: 50%;
   top: 6rem;
}

.img3 {
   position: relative;
   bottom: 1.5rem;
}
.img4 {
   opacity: 0.5;
   /* height: 60%; */
   width: 100%;
}

.mrkt {
   display: flex;
   margin-left: 14%;
   /* justify-content: space-around; */
   /* justify-content: space-evenly; */
}

.text1 {
   /* margin: 5rem; */
   width: 25vw;
   text-align: right;
}
.text2 {
   /* margin: 5rem; */
   width: 25vw;
}
/* ! */

.prod-main {
   padding: 3rem;
   padding-top: 7rem;
}
@media screen and (min-width: 600px) {
   .prod-main {
      display: flex;
   }
   #img-prod {
      max-width: 90vw;
      width: 30vw;
   }
   .prod-ev {
      padding-top: 5rem;
      padding-left: 5rem;
   }
}

.size-div {
   padding: 3rem;
   padding-top: 0;
}

/* ! Footer */

/* body {
  margin: 0;
  overflow-x: hidden;
} */

.footer {
   /* background: #000; */
   background-image: url('../assets/footer_cover.png');
   padding: 30px 0px;
   font-family: 'Play', sans-serif;
   text-align: center;
}

.footer .row {
   width: 100%;
   margin: 1% 0%;
   padding: 0.6% 0%;
   color: black;
   font-weight: 500;
   font-size: 0.8em;
}

.footer .row a {
   text-decoration: none;
   color: black;
   transition: 0.5s;
}

.footer .row a:hover {
   color: rgb(184, 178, 97);
   /* transform: ; */
}

.footer .row ul {
   width: 100%;
}

.footer .row ul li {
   display: inline-block;
   margin: 0px 30px;
}

.footer .row a i {
   font-size: 2em;
   margin: 0% 1%;
}

@media (max-width: 720px) {
   .footer {
      text-align: left;
      padding: 5%;
   }
   .footer .row ul li {
      display: block;
      margin: 10px 0px;
      text-align: left;
   }
   .footer .row a i {
      margin: 0% 3%;
   }
}

/* ! ================================================== */

/* .qua-header {
} */

.qua-text {
   padding-top: 8%;
}

.qua-para {
   width: 90vw;
   margin: 0 auto;
   margin-bottom: 1rem;
}
.process {
   display: flex;
   /* justify-content: space-around;
  justify-content: space-between; */
   width: 90vw;
   margin: 0 auto;
}
.process-1 {
   margin-right: 50px;
   padding-top: 2rem;
}
.process-2 {
   margin-left: 50px;
   padding-top: 2rem;
}

.process-img {
   width: 100px;
   /* margin-left: 50vw; */
   margin: 0 auto;
}

.process-para-top {
   width: 90vw;
   margin: 0 auto;
}
.process-para {
   width: 40vw;
}

/* ! */
.about-header {
   display: flex;
   /* margin: 2rem; */
}
/* .about-text {
} */

.about-heading {
   position: absolute;
   top: 13rem;
   padding-left: 5rem;
   color: #bc2e31;
   width: 60vw;
}

.about-para {
   width: 90vw;
   margin: 0 auto;
   padding-bottom: 1rem;
}

.about-img {
   position: relative;
   left: 20%;
}

.misn-visn {
   display: flex;
   margin-top: 5rem;
}

.container-misn-visn {
   display: flex;
   padding-top: 4rem;
}
.mv {
   width: 37vw;
   margin: 0 auto;
}
.left-div {
   margin-right: 0;
   margin-right: 3%;
}
.right-div {
   margin-left: 0;
   margin-left: 3%;
}

.career-text {
   padding-top: 10rem;
}

.career-para {
   margin-top: 5rem;
}

.link-nav:hover {
   color: rgb(221, 201, 20);
}

.link-nav:active {
   color: rgb(221, 201, 20);
}

/* .about-text {
  background-image: url('../assets/about_banner.jpg');
} */

.footer {
   margin-top: 5rem;
}

.banner-head1 {
   padding-top: 35vh;
   color: #bc2e31;
}

.nav-lnk-clk {
   color: rgb(221, 201, 20);
}

.slide-para1 {
   padding-top: 47vh;
}
.rmmg {
   padding-top: 0;
   margin-top: 0;
}

.b-para-1 {
   padding-top: 45vh;
   letter-spacing: 0;
}
.b-para-2 {
   padding-top: 55vh;
   letter-spacing: 0;
}
.b-para-3 {
   padding-top: 48vh;
   letter-spacing: 0;
}

.banner-head-1 {
   line-height: normal;
}
.banner-head-2 {
   line-height: normal;
}
.banner-head-3 {
   width: 40vw;
   line-height: normal;
   padding-top: 30vh;
}

.about-banner {
   /* height: 452px; */
   border-bottom: 3px solid #cc3333;
}

@media screen and (max-width: 600px) {
   .container-misn-visn {
      display: inline-block;
   }
   .mv {
      width: 90vw;
      margin: 0;
      padding: 0;
      margin-left: 2rem;
   }
}

.center-nav {
   margin-left: 20vw;
}

.custom-nav {
   /* background-color: #440700; */
   background-color: #bc2e31;
   position: absolute;
   left: 0;
   right: 0;
   z-index: 100000;
   color: white;
   margin-left: 20vw;
   padding: 0.4rem;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
   padding: 0;
}

.menu-custom {
   padding-right: 4vw;
}

.nav-mob {
   background-color: white;
   border-radius: 1rem;
}

/* .bg-white::after,
.bg-white::before {
  color: white;
} */

.contact-info {
   display: flex;
}

.ph-icon {
   width: 24px;
}
.ph-span {
   padding-right: 1.5rem;
}
.mail-span {
   padding-top: 1rem;
   /* margin-left: 12rem; */
}

/* ! */

h1 {
   font-size: 2.5rem;
   font-weight: bold;
}
h2 {
   font-size: 1.5rem;
   font-weight: bold;
}
h3 {
   font-size: 1rem;
   font-weight: bold;
}
h4 {
   font-size: 0.9rem;
   font-weight: bold;
}

/* ! Index 3 column flex */

/* ! Index 3 column flex */

/* ! index exp flex 2 col */

/* ! index exp flex 2 col */

/* .prod-des {
  height: 60vh;
} */
.head-prod {
   padding-top: 2%;
   padding-bottom: 0.5%;
}

.ul-benf {
   width: 90vw;
   margin: 0 auto;
}

button {
   /* margin-top: 10%; */
   padding: 0.5rem;
   margin: 5% 0rem;
   margin-right: 0.6rem;
   border: 1px solid gray;
}

.left-side {
   background-color: rgb(214, 207, 207);
   text-align: center;
}

#desp,
#benefits,
#nutri-facts {
   border: 1px solid gray;
   padding: 1rem 5rem;
   /* border: none; */
}

.logo {
   position: absolute;
   z-index: 2;
   width: 90vw;
   background-color: transparent;
   /* left: 8vw; */
   margin-top: 0;
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 2rem;
}

.activeee {
   color: rgb(221, 201, 20);
}

@media screen and (max-width: 600px) {
   .logo {
      padding: 0.5rem;
      width: 90px;
      height: 45px;
      top: -0.2vh;
   }
   .custom-nav {
      background-color: #bc2e31;
      color: black;
      margin-left: 25vw;
      padding: 0.3rem;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
   }
   /* .menu-custom {
    padding-right: 4vw;
  } */

   .logo-img {
      margin-top: 5px;
      width: 84px;
      height: 20px;
   }

   .slide-img {
      margin-top: 35px;
      height: 200px;
   }
   .s-img-1 {
      margin-top: 44px;
   }
   .s-img-2 {
      margin-top: 44px;
   }
   .s-img-3 {
      margin-top: 44px;
   }
   .img3 {
      height: 100px;
   }
   .about-banner-img {
      margin-top: 30px;
      height: 11rem;
   }
   #slider {
      /* width: 1349px; */
      height: 250px;
   }
   .controls-1 {
      left: 0;
      margin: 0;
      padding: 0;
   }
   .controls-2 {
      right: 0;
      margin: 0;
      padding: 0;
   }

   /*  .banner-head {
       font-size: 1.2rem;
      padding: 0;
      margin: 0;
      position: absolute;
      left: 10%;
      top: 20%;
      width: 45%;
      color: #bc2e31;
   }  */

   .banner-head1 {
      /* position: absolute;
      top: -22vh;
      padding: 0;
      margin: 0;
      color: #bc2e31; */
      /* width: 500px; */
      font-size: 16px;
      position: absolute;
      top: -10.5rem;
      padding-left: 0px;
      margin-left: 2rem;
      width: 35vw;
   }
   .banner-para {
      /* padding: 0;
      margin: 0;
      position: absolute;
      top: 55%;
      left: 8%;
      width: 46.5%;
      padding-left: 0.7rem;
      font-size: 1rem; */
      font-size: 14px;
      padding: 0;
      margin-top: 25vh;
      margin-left: 1rem;
      width: 40vw;
      display: none;
   }
   .banner-head-2 {
      padding-top: 0;
      padding-top: 10rem;
      width: 45vw;
   }

   .banner-head-3 {
      padding: 0;
      padding-top: 10rem;
      margin-left: 0.7rem;
      width: 35vw;
   }
   .b-para-3 {
      margin: 0;
      margin-top: 9rem;
      margin-left: 1rem;
   }

   /* ! */

   .exp-para {
      padding: 2rem;
   }
   /* ! */
   .mrkt {
      display: block;
      padding: 0;
      margin: 0;
   }
   .text1 {
      width: 100vw;
      text-align: left;
      padding: 2rem;
   }
   .img-btw {
      width: 100vw;
      padding-left: 3.5rem;
   }
   .text2 {
      width: 100vw;
      padding: 2rem;
   }
   /* ! About */
   .right-div {
      padding-top: 2rem;
   }
   /* ! */
   .process {
      display: block;
   }
   .process-1 {
      text-align: center;
      padding: 0;
      margin: 0;
   }
   .process-2 {
      text-align: center;
      padding: 0;
      margin: 0;
   }
   .process-img {
      padding-top: 3rem;
      padding-bottom: 1rem;
   }

   .process-para-top {
      /* padding: 0;
    margin: 0; */
      width: 90vw;
      text-align: center;
   }
   .process-para {
      padding: 0;
      margin: 0;
      width: 90vw;
   }

   /* ! */
   .contact-info {
      display: flex;
   }

   .ph-icon {
      width: 24px;
   }
   .ph-span {
      margin: 0;
      padding: 0;
      margin-left: 2rem;
   }
   .mail-span {
      padding-top: 1rem;
      margin-left: 2rem;
   }
   /* ! */
   .about-header {
      /* height: 40vh; */
   }
   /* .slide-img {
      width: 1349px;
      height: 350px;
   } */
   .img3 {
      height: 60vh;
      width: 70vw;
   }
   .banner-head-1 {
      letter-spacing: 0;
      font-size: 17px;
      font-weight: bold;
      width: 24vw;
      top: -6rem;
   }
   .banner-head-2 {
      top: -5rem;
      font-size: 17px;
   }
   .banner-head-3 {
      top: -5rem;
      left: 0;
      left: 1rem;
      font-size: 17px;
   }
   .about-heading {
      font-size: 17px;
      /* bottom: -3rem; */
      top: 6rem;
      padding-left: 2rem;
      width: 45vw;
   }
}