@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



.all-card{

  background: linear-gradient(180deg, #FBEABD 0.01%, #FFE6A0 31.98%, #C69D2C 100%);

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  height: 260px;
  margin-right: 15px;
  width: 200px;

  border-radius: 10px;

}

.all-card:hover{
  transform:scale(1.1);
}



.top-half{

  height: 160px;

  width: 200px;

  display: flex;

  justify-content: center;

  align-items: center;

}



.view-btn{

  background-color: white;
  font-size: 12px;
  color: #000;

  padding: 5px 25px;

  border-radius: 5px;

  text-decoration: none;

}



.all-cards{

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.btm-half{

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  width: 100%;

  height: 100px;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

}



.top-half img{

  width: 150px;

}



body{

  font-family: 'Montserrat', sans-serif;
  font-weight: 300;

}




/* Navbar container */

.navbar {

  font-family: 'Montserrat', sans-serif;

  overflow: hidden;

  color: #3C2C00;

  margin-top: 0px;

  margin-bottom: 10px;

}



.abou-container{

  max-width: 80vw;

  margin: auto;

}



.story1{

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.story2{

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.bar-draw{

  display: flex;

  justify-content: center;

  align-items: center;

}



.farmer-img{

  width: 200px;

}



.farmer-img img{

  width: 85%;
  margin-right: 20px;

}



.navbar-content{

  display: flex;

  justify-content: space-between;

  align-items: center;

  max-width: 90vw;

  margin: auto;

}



.nav-icon{

    width: 120px;

}



.nav-icon a{

    width: 100%;

}



.nav-icon a img{

  width: 120%;

}

  /* Links inside the navbar */

  .navbar a {

    float: left;

    font-size: 15px;

    color: #3C2C00;

    text-align: center;

    padding: 14px 25px;

    text-decoration: none;

  }



  /* The dropdown container */

  .dropdown {

    float: left;

    overflow: hidden;

  }



  /* Dropdown button */

  .dropdown .dropbtn {

    font-size: 12px;

    border: none;

    outline: none;

    color: #3C2C00;

    padding: 14px 25px;

    background-color: inherit;

    font: inherit; /* Important for vertical align on mobile phones */

    margin: 0; /* Important for vertical align on mobile phones */

  }



  .dropdown .dropbtn:hover{

    cursor: pointer;

  }



  /* Add a red background color to navbar links on hover */

  .navbar a:hover, .dropdown:hover .dropbtn {

    font-weight: 600;

  }



  /* Dropdown content (hidden by default) */

  .dropdown-content {

    display: none;

    position: absolute;

    background-color: #ffffff;

    width: 100%;

    left: 0;

    border: 1px solid #dfe1e5;

    z-index: 1000;

  }



  /* Show the dropdown menu on hover */

  .dropdown:hover .dropdown-content {

    display: block;

  }



  /* Create three equal columns that floats next to each other */

  .column {

    float: left;

    width: 33.33%;

    padding: 20px;

  }



  /* Style links inside the columns */

  .column a {

    float: none;

    color: black;

    padding: 16px;

    text-decoration: none;

    display: block;

    text-align: left;

  }



  /* Add a background color on hover */

  .column a:hover {

    background-color: rgb(245, 245, 245);

  }



  .row{

    display: flex;

    justify-content: center;

    padding: 10px 0px;

  }



  /* Clear floats after the columns */

  .row:after {

    content: "";

    display: table;

    clear: both;

  }



  .column-content{

    padding-bottom: 10px;

  }



  .column-content h3{

    font-family: 'Montserrat', sans-serif;

    color: #745809;

    font-size: 16px;

    font-weight: 600;

    padding-bottom: 7px;

  }



  .column-content p{

    font-family: 'Montserrat', sans-serif;

    font-weight: 400;

    color:#616161;

  }



  /* The side navigation menu */

.sidenav {

    height: 100%; /* 100% Full-height */

    width: 0; /* 0 width - change this with JavaScript */

    position: fixed; /* Stay in place */

    z-index: 1; /* Stay on top */

    top: 0; /* Stay at the top */

    left: 0;

    background-color: #111; /* Black*/

    overflow-x: hidden; /* Disable horizontal scroll */

    padding-top: 60px; /* Place content 60px from the top */

    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

  }



  /* The navigation menu links */

  .sidenav a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s;

  }



  /* When you mouse over the navigation links, change their color */

  .sidenav a:hover {

    color: #f1f1f1;

  }



  /* Position and style the close button (top right corner) */

  .sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

  }



  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */

  #main {

    transition: margin-left .5s;

    padding: 20px;

  }



  .hamburger:hover{

    cursor: pointer;

  }



  .hamburger{

    display: none;

  }



  .hamburger i{

    font-size: 25px;

    color: #3C2C00;

  }



  .showcase-content-container{

    max-width: 88vw;

    margin: auto;

    margin-top: 120px;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }



  .showcase-right{

    width: 500px;

  }



  .showcase-right img{

    width: 100%;

  }



  .showcase-left p{

    font-family: 'Bebas Neue', cursive;

    font-size: 76px;

    font-style: normal;

    line-height: 112px;

    letter-spacing: 0.015em;

  }



  .promo-vid{

    display:flex;

    justify-content:center;

    align-items:center;

  }



  .promo-vid img{

    width:800px;

    margin-bottom:60px;

  }



  .promo-video h2{

    font-size:50px;

    color:#3D2E07;

    font-family: 'Bebas Neue', cursive;

    text-align:center;

    margin-bottom:30px;

  }



  .showcase-left small{

    font-family: 'Montserrat', sans-serif;

    font-size: 40px;

    font-weight: 200;

    font-style: normal;

    line-height: 20px;

    letter-spacing: -0.06em;

  }



  .high{

    color: #B0840A;

  }



  .mid-h{

    color: #DFAE26;

  }



  .med{

    color: #EAB81F;

  }



  .low{

    color: #FCF38A;

  }



  .norm{

    color: #3D2E07;

  }



  @media screen and (max-width: 820px) {

    .nav-icon{

        display: none;

    }



    .navbar-content{

        display: flex;

        justify-content: center;

        align-items: center;

        max-width: 90vw;

        margin: auto;

    }

  }



  @media screen and (max-width: 760px) {

    .showcase-content-container{

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .showcase-left{

        text-align: center;

        margin-bottom: 30px;

    }

  }



  @media screen and (max-width: 690px) {

    .nav-icon{

        display: block;

    }



    .nav-links{

        display: none;

    }



    .hamburger{

        display: block;

    }



    .navbar-content{

        display: flex;

        justify-content: space-between;

        align-items: center;

        max-width: 90vw;

        margin: auto;

    }



    .navbar {

        margin-bottom: 30px;

      }

  }



  .home-stat-container{

    max-width: 88vw;

    margin: auto;

    margin-top: 100px;

  }



  .home-stat-content{

    background-color: #F9F9F9;

    width: 700px;

    height: 140px;

    box-shadow: inset 0px 3.41899px 3.41899px rgba(0, 0, 0, 0.03);

    border-radius: 10px;

  }



  .home-stat-content-cds{

    width: 95%;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 17px 0px;

  }



  .home-stat-cd{

    width: 200px;

    height: 100px;

    background-color: #fff;

    box-shadow: 1.63459px 4.08648px 8.17296px rgba(0, 0, 0, 0.1);

    border-radius: 10px;

    padding: 10px;

  }



  .cd-top{

    display: flex;

    justify-content: space-between;

    padding-bottom: 15px;

    align-items: center;

  }



  #home-showcase{

    margin-bottom: 50px;

  }



  .cd-img{

    width: 135px;

  }



  .cd-img img {

    width: 40%;

    padding-left: 15px;

  }



  .cd-text{

    font-family: 'Montserrat', sans-serif;

    font-weight: 200;

    font-size: 12px;

  }



  .cd-number{

    font-family: 'Montserrat', sans-serif;

    font-weight: 400;

    font-size: 25px;

  }



  #home-stat{

    margin-bottom: 80px;

  }



  .about-container{

    max-width: 75vw;

    margin: auto;

  }



  .about-container p{

    font-family: 'Bebas Neue', cursive;

    color: #3D2E07;

    text-align: center;

    font-size: 65px;

    font-weight: 400;

    padding-bottom: 40px;

  }



  .about-text{

    background-color: #FFFCF2;

    padding: 50px 0px;

    color: #545353;

    box-shadow: 18px 29px 32px rgba(0, 0, 0, 0.03);

    border-radius: 32px;

    font-family: 'Montserrat', sans-serif;

    text-align: justify;

  }



  .about-text-content{

    max-width: 75%;

    margin: auto;

  }



  .width-adj{

    max-width: 100%;

    margin: auto;

  }



  .maintext{

    padding-bottom: 70px;

    font-style: normal;

    font-weight: 300;

    font-size: 22px;

    line-height: 45px;

  }



  .points{

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    color: black;

    padding: 5px;

  }



  .points i{

    padding-right: 25px;

    font-size: 20px;

    color: #F5BF4F;

  }



  .points small{

    font-size: 20px;

    line-height: 35px;

    color: #565656;

  }



  .gold{

    color: #B98B2A;

  }



  #about{

    margin-bottom: 70px;

  }



  .point-w{

    margin-top: 50px;

    background: #ffffff;

    backdrop-filter: blur(11.4799px);

    border-radius: 20px;

    padding: 15px 20px;

    border: 0.3px solid #f0e9d8;

  }



footer{

    background-color: #F9F9F9;

    padding: 50px 0px;

}



.footer-container{

    max-width: 75vw;

    margin: auto;

}



.footer-content .content1{

    font-family: 'Montserrat', sans-serif;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    grid-column-gap: 50px;

    grid-row-gap: 30px;

}



.footer-content .content1 .footer-logo{

    width: 180px;

}



.footer-content .content1 .footer-logo img{

    width: 85%;

}



.project-footer{

    display: flex;

    flex-direction: column;

}



.project-footer h3{

    margin-bottom: 18px;

    font-size: 17px;

}



.project-footer a{

    display: inline-block;

    margin-bottom: 8px;

    text-decoration: none;

    color: #000;

    font-weight: 300;

    font-size: 13px;

}



.content1{

    margin-bottom: 70px;

}



.content2{

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-column-gap: 50px;

    grid-row-gap: 30px;

}



.content2 div{

    width: 120px;

}



.content2 div img{

    width: 100%;

}



.ad1{

    padding-top: 5px;

}



.ad2{

    padding-top: 12px;

}



.footer-right{

   display: flex;

}



.copyright{

    margin-top: 30px;
    font-size: 13px;
    padding-right: 70px;

}



.small{

    font-size: 12px;

    margin-top: 30px;

}



iframe{

    width:500vw;

}



@media screen and (max-width: 950px) {

    .content2{

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }



    .footer-content .content1{

        display: grid;

        grid-template-columns: repeat(5, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }

}



@media screen and (max-width: 870px) {

    .promo-vid img{

    width:600px;

    margin-bottom:60px;

  }

}



@media screen and (max-width: 770px) {

    .content2{

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }



    .footer-content .content1{

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }

}



@media screen and (max-width: 680px) {

    .content2{

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }



    .footer-content .content1{

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }

}



  @media screen and (max-width: 660px) {

    .home-stat-content{

        width: 500px;

    }

  }



  @media screen and (max-width: 620px) {

    .content2{

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }



    .footer-content .content1{

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }

}



  @media screen and (max-width: 570px) {

    .home-stat-content{

        width: 400px;

    }



    .home-stat-content-cds{

        width: 98%;

    }



    .width-adj{

        max-width: 100%;

        margin: auto;

    }

 }



  @media screen and (max-width: 515px) {

    .showcase-right{

        width: 400px;

    }

  }



  @media screen and (max-width: 500px) {

    .maintext{

        text-align: center;

    }



    .content2{

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }



    .footer-content .content1{

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        grid-column-gap: 40px;

        grid-row-gap: 20px;

    }



    .footer-content .content1 .footer-logo{

        width: 150px;

    }

  }



   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

   @media screen and (max-height: 450px) {

    .sidenav {padding-top: 15px;}

    .sidenav a {font-size: 18px;}

  }



  @media screen and (max-width: 430px) {



    .cd-top{

        display: flex;

        justify-content: space-between;

    }



    .cd-text{

        text-align: center;

    }



    .home-stat-content-cds{

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: repeat(2, 1fr);

        grid-column-gap: 50px;

        grid-row-gap: 30px;

    }



    .home-stat-content{

        width: 350px;

    }



    .home-stat-content-cds{

        width: 90%;

    }

  }



  @media screen and (max-width: 415px) {

    .showcase-right{

        width: 300px;

    }

  }



  @media screen and (max-width: 380px) {



    .home-stat-content{

        width: 300px;

    }



    .home-stat-content-cds{

        width: 90%;

    }

  }



  @media screen and (max-width: 350px) {



    .content2{

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }



    .footer-content .content1{

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }



    .footer-content .content1 .footer-logo{

        width: 150px;

    }



    .footer-right{

        display: flex;

        align-items: center;

        justify-content: space-between;

        flex-direction: column;

     }



     .copyright{

         padding-right:0px;

     }

  }



  @media screen and (max-width: 330px) {



    .home-stat-content{

        width: 250px;

    }



    .home-stat-content-cds{

        width: 90%;

    }



    .home-stat-content-cds{

        grid-column-gap: 20px;

        grid-row-gap: 30px;

    }

  }



  @media screen and (max-width: 315px) {

    .showcase-right{

        width: 200px;

    }



    .showcase-left h2{

        font-size: 20px;

    }



    .showcase-left p{

        font-size: 14px;

    }

  }



  @media screen and (max-width: 280px) {



    .home-stat-content{

        width: 100%;

    }



    .home-stat-content-cds{

        width: 100%;

    }



    .home-stat-content-cds{

        grid-column-gap: 10px;

        grid-row-gap: 20px;

    }

  }



  @media screen and (max-width: 215px) {

    .showcase-right{

        width: 100px;

    }



    .showcase-left h2{

        font-size: 14px;

    }

  }