@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap');
@font-face {
  font-family: Commissioner;
  src: url(https://desertgreen.co.za/assets/font/Commissioner.ttf);
  src: url(https://momotsow.github.io/desertgreen//assets/font/Commissioner.ttf);
}
  
html {
  scroll-behavior: smooth;
}

*, body {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    cursor:default;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    /* overflow-x:hidden; */
}

p,h1,h2,h3,h4,h5,h6 {
  color: #002512
}

.row {
  padding: 0 !important;
}

ul {
  list-style: none;
  text-align: center;
}

.list-style-none {
  list-style: none;
}

.our-solution-list, .about-list, .abt-list {
  list-style: none;
  text-align: left;
}

.our-solution-list li::before, .about-list li::before, .abt-list li::before{
  content: "\2022";
  color: #FF9A33;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

a {
  text-decoration: none!important;
  color: #fff!important;
  cursor: pointer;
}

h2 {
  font-weight: 900!important;
  font-size: 20px;
  margin-bottom: 20px!important;
}

h4 {
  font-weight: 700!important;
}

.title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.discription {
  font-size: 12px;
  color: #fff;
}

ul li.p-cta.call2action a {
  color: #fff !important;
}

.nav-list > ul li a:hover,
.nav-list > ul li a:active {
  font-weight: 600;
  color: #fff !important;
}

/* banner */

.secondary-cta {
  background-color: #fff;
}

#logo {
  width: 60%;
  padding-top: 10px;
  padding-bottom: 10px;
}

nav {
  padding-bottom: 10px;
  padding-top: 10px;
  background-color: #FFC533;
}

.p-cta {
  font-size: 30px;
  font-weight: 700;
  padding-bottom: 10px;
}

.p-cta a {
  color: #002512!important;
  font-weight: 700;
  letter-spacing: 3px;
}

.p-cta a:active {
  color: #fff;
  background: transparent;
}
.logo {
  display: none;
}

.nav-list.menu-btn {
  display: block;
  background-image: url(./assets/img/carrot-mobile.svg);
}

.nav-list {
  display: none;
  position: fixed;
  z-index: 100;
  width: 100%;
  left: 0;
  top: 0;
  background: #FFC533;
  height: 100vh;
}

#mobile-exit {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 50px;
  font-weight: 100;
  color: #002512;
}

.close-menu {
  background-color: #FFC533;
  width: 100%;
}

.nav-list ul {
  padding-left: 0;
  margin-top: 60px;
}

.intro {
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 10px;
  color: #ec5242;
}
.not {
  display: none;
}
.button-service {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
}

.call2actions {
  display: block;
  text-align: center;
}

.dgfarm {
  display: inline-block;
  padding: 10px 50px;
  margin-bottom: 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: transparent;
  background-blend-mode: overlay;
  border: 1px solid gray;
  color: gray !important;
  border-radius: 6px;
  outline: none;
  text-transform: capitalize;
  font-size: 12px;
}

.call2actions-buttons {
  display: inline-block;
  padding: 10px 50px;
  margin-bottom: 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 6px;
  outline: none;
  font-size: 12px;
}

.call2actions-buttons:hover {
  color: #002512!important;
  background-color: #FFC533;
  border: none;
}

.call2actions-buttons.recommendation {
  color: #fff;
  background-color: #002512;
  border: 1px solid #002512;
}

.call2actions-buttons.recommendation:hover {
  color: #002512;
  background-color: #FFC533;
  border: none;
}

/* about */
.text-paragraph {
  margin: 10px 0px 50px 0px;
}

.farmer-trader {
  margin-left: 0!important;
  margin-right: 0!important;
  padding-top: 40px;
}

.about-gf > h4 {
  padding-bottom: 20px;
  text-align: center;
}

.our-solution {
  padding: 40px 0 0 0!important;
}

body > section.container.farmer-trader > div:nth-child(3) > div > div > ul {
  padding-left: 0px;
  text-align: left!important;
}

.sli {
  display: block;
  margin-bottom: 2rem;
  margin-top: 40px;
}

.card {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin-bottom: 10px;
  width: 100%;
  padding: 20px;
}

.sli-img1 {
  width: 40%;
}
.sli-img2 {
  width: 78%;
}
.sli-img3 {
  width: 100%;
}

.sliCardBody {
  padding: 20px 0  0 0 !important;
}
.sli-headText { 
  color: #0D6B38;
  font-weight: 700;
}

.abt-logistic {
  padding: 30px 0;
}

.our-solution-list {
  text-align: left;
  padding: 10px 0 15px 15px;
  list-style: none;
}

.farmer-trader ul > li:nth-child(n) {
  padding-bottom: 10px;
}

.gallery > h2 {
  margin-top: 20px;
}

.team-members > div > h2 {
  padding-top: 20px;
}

.team {
  padding-left: 0!important;
  padding-right: 0!important;
}

/* services */
.greenFarm {
  background-color: #8CC63F;
  color: #002512;
  padding: 40px 10px;
}
.greenFarm .button, .greenKart .button {
text-align: center;
}

.greenKart {
  background-color: #002512;
  color: #fff;
  padding: 40px 10px;
}

.greenFarm h3, .greenKart h3 {
text-align: center;
font-weight: 700;
}
.greenKart h3 {
  color: #fff !important;
}
.services ul {
list-style: disc;
text-align: left;
padding-left: 45px;
}

.service-list {
  margin-top: 3rem !important;
  margin-bottom: 3rem;
}

.partners-section {
  margin: 2rem 0rem 1rem 0rem;
}

.form-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0!important;
}

.form-holder .form-content {
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  /* padding-left: 40px; */
}
  
/* Slider */
.container {
  overflow: hidden;}
.slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;}
  .slider-logo {
    margin-right: 19rem;
  }
.logos {
  width: 100%;
  display: inline-block;
  margin: 0 0 1rem 0;
}
.image {
  width: calc(100% / 9);
  animation: fade-in 0.5s 
    cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.yellow-bg {
  background-color: #FFC533;
  padding: 10px 20px;
}

.yellow-bg .blend1 {
  mix-blend-mode: overlay;
}

.yellow-bg .heading h2 {
  font-size: 3rem;
}
.yellow-bg .heading p {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0px 13rem;
}

.soil .heading h2 {
  font-size: calc(2.5rem + .9vw);
  margin-top: 30px;
  margin-bottom: 0!important;
}

.recommendation-btn {
  margin-top: 40px;
}


.form-content .form-items {
/* border: 3px solid #fff; */
padding: 20px 0 20px 0;
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: left;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
}

.form-content h3, .form-content h4{
color: #fff;
text-align: left;
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}

.form-content h3.form-title {
margin-bottom: 30px;
}

.contact > h4 {
  margin-bottom: 20px;
  font-weight: 700;
  color: #fff
}

.address > h4 {
  margin-bottom: 20px;
}

.form-content p {
color: #fff;
text-align: left;
font-size: 12px;
font-weight: 300;
}


.form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
color: #fff;
}

.form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select, .form-content textarea {
width: 100%;
padding: 9px 20px;
text-align: left;
border: 0;
outline: 0;
border-radius: 6px;
background-color: #fff;
font-size: 15px;
font-weight: 300;
color: #8D8D8D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-top: 16px;
}

.btn-primary{
background-color: #6C757D;
outline: none;
border: 0px;
 box-shadow: none;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
background-color: #495056;
outline: none !important;
border: none !important;
 box-shadow: none;
}

.form-content textarea {
position: static !important;
width: 100%;
padding: 8px 20px;
border-radius: 6px;
text-align: left;
background-color: #fff;
border: 0;
font-size: 15px;
font-weight: 300;
color: #8D8D8D;
outline: none;
resize: none;
height: 120px;
-webkit-transition: none;
transition: none;
margin-bottom: 14px;
}

.form-content textarea:hover, .form-content textarea:focus {
border: 0;
background-color: #ebeff8;
color: #8D8D8D;
}

.mv-up{
margin-top: -9px !important;
margin-bottom: 8px !important;
}

.invalid-feedback{
color: #ff606e;
}

.valid-feedback{
color: #2acc80;
}

.contact-container {
  background-color: #002512;
  color: #ffffff;
}

.row {
  margin-left: 0!important;
  margin-right: 0!important;
  padding-left: 0!important;
  padding-right: 0!important;
}

.contact a {
  color: #ffffff;
}
.social-media {
  display: flex;
  padding-left: 0;
  align-items: center;
}

.social-media-list {
  margin-top: 20px;
  margin-bottom: 20px;
}

.social-media li {
  margin-right: 10px;
}

.logo-location {
  background-image: url(./assets/img/logo-favicon.svg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  width: 217px;
  z-index: 0;
  opacity: 0.16;
  margin-top: -300px;
  align-self: end;
}

.carrot {
  background-image: url(./assets/img/carrot.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  height: 300px;
  width: 220px;
  z-index: -1;
  right: 0;
}

.cabbage { 
  background-image: url(./assets/img/cabbage.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  height: 310px;
  width: 300px;
  z-index: -1;
}

.onion { 
  background-image: url(./assets/img/onion.svg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  height: 300px;
  width: 246px;
  z-index: -1;
  margin-top: -160px;
  right: 0;
}

footer {
  text-align: center;
  padding-top: 15px;
  color: #fff;
}

.contact-info {
  padding: 0!important;
  margin: 0!important;
}

.team-members {
  margin: 20px 0px 20px 0px;
}

/* about page */

.about {
  margin-bottom: 50px;
  padding-top: 85vh;
}
.about-lists {
  list-style: disc;
  text-align: left;
}
.abt-list {
  list-style: none;
  text-align: left;
}

.abt-list  li::before {
  content: "\2022";
  color: #FF9A33;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

.mySlides {
  display: none
}

.farmTradeSlides {
  display: none
}

img {
  vertical-align: middle;
  width: fit-content;
}

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.service-slideshow {
  background-color: #FFC533;
  padding: 5px 0 70px 0;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.phone-cont {
  margin-top: 70px;
  align-items: center;
}

.phone {
  display: none;
}

.phone-next {
  color: #ffc533 !important;
  display: none;
}
.phonedesc-cont {
  margin-top: 1rem;
}

.phone-desc {
  background-color: #FFC533;
  color: #fff;
  border-radius: 10px;
}

.img-icons {
  /* background-color: #326B01;*/
  /* width: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.phonedesc-text {
  padding: 10px;
  text-align: left;
}

/* .phonedesc-text h6 {
  text-align: center;
} */

/* .specific-width {
  width: 60%;
  padding: 40px;
} */

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
  .sli-img1 {
    width: 40%;
  }
  .sli-img2 {
    width: 78%;
  }
  .sli-img3 {
    width: 100%;
  }
}

@media only screen and (min-width: 358px) and (max-width: 360px) {
  .about {
    padding-top: 75vh;
  }
}

@media only screen and (min-width: 390px) and (max-width: 392px) {
  .about {
    padding-top: 75vh;
  }
}

@media only screen and (min-width: 410px) and (max-width: 412px) {
  .about {
    padding-top: 78vh;
  }
}

@media only screen and (min-width: 413px) and (max-width: 414px) {
  .about {
    padding-top: 73vh;
  }
}

@media only screen and (max-width: 428px) {
  .about {
    padding-top: 78vh;
  }

.slider-logo {
  margin-right: 30rem !important;
}
.image {
  width: 86px;
  animation: fade-in 0.5s 
    cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

  /* .sli-img1 {
    width: 40%;
  }
  .sli-img2 {
    width: 78%;
  }
  .sli-img3 {
    width: 100%;
  } */
}

@media only screen and (min-width: 768px){
  .section-title {
    font-size: 64px!important;
  }
  .h2, h2 {
    font-size: calc(4.5rem + .9vw)!important;
  }
  
  .farmer-trader {
    padding-top: 150px;
  }

  .header-section {
    height: fit-content;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 600;
    width: 100%;
    transition: 0.9s;
  }

  #logo {
    background-color: white;
    width: 80%;
  }  

  .hero-section {
    margin-bottom: 0;
  }

  .close-menu {
    display: none;
  }

  .logo {
    display: flex;
    margin-bottom: 0;
    font-size: 25px;
    font-weight: 700;
  }

  nav {
    display: flex;
    align-items: center;
  }

  .secondary-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .second-cta {
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    justify-content: right;
  }

  .s-list {
    margin-right: 30px;
  }

  header {
    background: #FFC533
  }

  .p-cta {
    font-size: 16px;
    margin-left: 0;
    margin-left: 10px;
    margin-right: 10px;
    padding-bottom: 0;
  }

  .secondary-cta ul li a {
    color: #fff !important;
  }

  ul li.p-cta.call2action a {
    color: #fff !important;
  }

  .nav-list > ul li a:hover,
  .nav-list > ul li a:active {
    font-weight: 600;
    color: #fff!important;
  }

  .mobile-menu {
    display: none;
  }

  #more {
    display: flex !important;
  }

  ul {
    margin-top: unset !important;
  }

  .nav-list {
    display: flex;
    width: 100%;
    background: unset;
    height: 5vh;
    position: unset;
    align-items: center;
    justify-content: center;
  }

  .nav-list ul {
    display: flex;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    align-items: center;
  }

  #mobile-exit {
    display: none;
  }

  .intro {
    font-size: 30px;
  }

  .headline .title {
    position: relative;
    z-index: 1;
    font-size: 2rem;
  }

  .discription {
    font-size: 16px;
  }

  .call2actions-buttons {
    font-size: 16px;
    margin-left: 8px;
    margin-right: 8px;
  }

  .carrot {
    height: 300px;
    width: 220px;
    z-index: -1;
    right: 0;
    top: 115vh;
  }

  #contact {
    padding-top: 30px;
  }

  .list {
    margin-bottom: 8px;
  }

  .image {
    width: calc(100% / 5);
  }

  .form-content h3 {
    font-size: 2rem;
  }

  .contact > h4 {
    font-size: 2rem;
  }

  .form-content p {
    font-size: 16px;
  }

  .logo-location {
    height: 442px;
    width: 320px;
    z-index: 0;
    opacity: 0.6;
    margin-top: -264px;
  }

  .sli {
    display: flex;
    align-content: space-around;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 100%;
    overflow-x: auto;
  }

  .sli .card {
    width: 32%;
  }
  .slider-logo {
    margin-right: 27rem;
  }
  
  .soil .heading h2 {
    font-size: calc(2.5rem + .9vw);
    margin: 4rem 0 0 0;
  }
    
  .yellow-bg {
    padding: 10px 100px;
  }
  .yellow-bg .heading .blend1 {
    font-size: 4.4rem!important;
    font-weight: bolder;
    letter-spacing: 5px;
  }

  .form-content .form-items {
    width: 100%;
    padding-left: 25px;
  }

  /* about */

  .about-gf {
    padding-left: 50px!important;
  }

  .about {
    padding-top: 90vh;
  }

  /* .specific-width {
    width: 72%;
    padding: 40px;
  } */

  .abt-logistic {
    padding: 20px 0;
  }

  /* .phone-desc {
    margin-left: 10px;
} */
}

@media only screen and (min-width: 800px) and (max-width: 834px) {
  .about {
    padding-top: 93vh;
  }
}

@media only screen and (min-width: 1024px) {
  .abt-logistic {
    padding: 30px 0;
  }
  .phone-next {
    display: block;
    background: #fff;
    opacity: 0.5;
  }

  .phone-next:hover {
    background: #fff;
    opacity: 1;
  }

  p {
    font-size: 20px;
  }
  .not {
    display: none !important;
  }
  .headline .title {
    font-size: 2.8rem;
    font-weight: 700;
  }

  .discription {
    /* margin-top: 24px; */
    margin-bottom: 25px;
    font-size: 16px;
  }

  .services ul {
    font-size: 20px;
    padding-left: 85px;
  }
  .service-title h3 {
    color: #fff;
  }

  .soil .heading h2 {
    font-size: calc(4rem + .9vw);
  }

  .container.soil > p {
    font-size: 28px;
  }

  .yellow-bg .heading .blend1 {
    font-size: 6.4rem!important;
    letter-spacing: 10px;
  }

  .yellow-bg.h-100 > p {
    font-size: 28px;
  }

  .form-content .form-items {
    padding-left: 6%;
  }

  .logo-location {
    height: 521px;
    width: 380px;
    margin-top: -500px;
  }

  .farmer-trader {
    padding-top: 200px;
  }

  .phone {
    text-align: right;
    z-index: 2;
    display: block;
    margin-right: 50px;
  }

  .phone img {
    width: 350px;
  }

  .phone-description-err {
    position: absolute;
    margin-left: 50px;
  }

  .phone-desc {
    width: 60%;
    padding-right: 45px;
  }
  /* .specific-width {
    width: 55%;
    padding: 49px;
} */
.slider-logo {
  margin-right: 35rem;
}
}

@media only screen and (min-width: 700px) and (max-width: 1020px) {
  .not {
    display: block;
    height: 35px;
  }
  .abt-logistic {
    padding: 15px 0;
  }
}

@media only screen and (min-width: 1200px) {
  .abt-logistic {
    padding: 30px 0;
  }
  .phone {
    margin-right: 100px;
  }

  .phone-description-err {
    width: 88%;
  }

.slider-logo {
  margin-right: 43rem;
}
}

@media only screen and (min-width: 1300px) {
  .abt-logistic {
    padding: 30px 0;
  }
  .phone {
    margin-right: 150px;
  }
  .slider-logo {
    margin-right: 50rem;
  }
}

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  /* border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #002512; */
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(180deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

/* #myDiv {
  display: none;
  text-align: center;
} */