@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Inter:wght@100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Sedan:ital@0;1&display=swap');
/* ------------------- */
/* Custom properties   */
/* ------------------- */

:root {
        /* colors */
    --clr-dark: 141 57% 41%;
    --clr-light: 75 59% 45%;
    --clr-orange: 9 100% 63.9%;
    --clr-white: 0 0% 100%;
    --clr-black: 0 0% 0%;
    --clr-gray: 0 0% 35.3%;
    --clr-gray1: 0 0% 63.1%;
    --cultured:  0 0% 93%;
    --clr-glass: 0 0% 80.78%;
    /* font-sizes */
    --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
    --fs-900: 5rem;
    --fs-800: 3.5rem;
    --fs-700: 1.5rem;
    --fs-600: 1.25rem;
    --fs-500: 1.75rem;
    --fs-400: 1rem;
    --fs-300: 0.95rem;
    --fs-200: 0.875rem;

    --section-padding: 60px;

    /**
     * shadow
     */
  
    --shadow-1: 0 1px 4px hsla(0, 0%, 0%, 0.2);
    --shadow-2: 0 1px 2px hsla(0, 0%, 0%, 0.2);
  
    /**
     * transition
     */
  
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
  
    /**
     * clip path
     */
  
    --clip-path-1: polygon(0 40%, 100% 0%, 100% 100%, 0 100%);
    --clip-path-2: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); 
    
    /*SECOND COLORS  */
    --rich-black-fogra-29: hsl(210, 26%, 7%);
    --champagne-pink_20: hsla(23, 61%, 86%, 0.2);
    --independence_30: hsla(245, 17%, 29%, 0.3);
    --gray-x-11-gray: hsl(0, 0%, 73%);
    --champagne-pink: hsl(23, 61%, 86%);
    --spanish-gray: hsl(0, 0%, 60%);
    --sonic-silver: hsl(0, 0%, 47%);
    --deep-saffron: hsl(32, 100%, 59%);
    --dark-orange: hsl(28, 100%, 58%);
    --desert-sand: hsl(23, 49%, 82%);
    --isabelline: hsl(38, 44%, 96%);
    --gainsboro: hsl(0, 0%, 87%);
    --tangerine: hsl(31, 84%, 50%);
    --cinnabar: hsl(3, 90%, 55%);
    --black_95: hsla(0, 0%, 0%, 0.95);
    --cultured: hsl(0, 0%, 93%);
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --onyx: hsl(0, 0%, 27%);
  
}

@media (min-width: 35em) {
    :root {
        --fs-900: 9.375rem;
        --fs-800: 5rem;
        --fs-700: 2.5rem;
        --fs-600: 1.5rem;
        --fs-400: 1rem;
    }
}

@media (min-width: 45em) {
    :root {
        /* font-sizes */
        --fs-800: 6.25rem;
        --fs-700: 3.5rem;
        --fs-600: 1.75rem;
        --fs-400: 1.125rem;
    }
}


/* ------------------- */
/* Reset               */
/* ------------------- */

/* https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



a {
  text-decoration: none;
  color: inherit;
}

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
    margin: 0; 
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 400;
}


html {
    color: #ffff;
    font-family: "Inter", sans-serif;
    font-size: 0.875rem;
    scroll-behavior: smooth;
  }
  
/* set up the body */
body {
    font-size: var(--fs-400);
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y:scroll;
    background-color: #f4f4f2;
}

/* make images easier to work with */
a,
img,
svg,
span,
input,
select,
button,
textarea,
ion-icon { display: block; }

img { height: auto; }

input,
select,
button,
textarea {
  background: none;
  border: none;
  font: inherit;
}

input,
select,
textarea { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

address { font-style: normal; }


/* make form elements easier to work with */
input,
button,
textarea,
select {
    font: inherit;
}

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.active { overflow: hidden; }

:focus-visible { outline-offset: 4px; }

::selection {
  background-color: #3DA417;
  color: var(--clr-white);
}

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background-color: hsl(var(--clr-white)); }

::-webkit-scrollbar-thumb { background-color: hsl(var(--clr-light)); border-radius: 20px; }

::-webkit-scrollbar-thumb:hover { background-color: var(--clr-dark); }



/* colors */

.bg-dark { background-color: hsl( var(--clr-dark) );}
.bg-accent { background-color: hsl( var(--clr-light) );}
.bg-orange { background-color: hsl( var(--clr-orange) );}
.bg-white { background-color: hsl( var(--clr-white) );}
.bg-black { background-color: hsl( var(--clr-black) );}
.bg-gray { background-color: hsl( var(--clr-gray) );}
.bg-gray1 { background-color: hsl( var(--clr-gray1) );}



.text-dark { color: hsl( var(--clr-dark) );}
.text-accent { color: hsl( var(--clr-light) );}
.text-accent { color: hsl( var(--clr-orange) );}
.text-white { color: hsl( var(--clr-white) );}
.text-black { color: hsl( var(--clr-black) );}
.text-gray { color: hsl( var(--clr-gray) );}
.text-gray1 { color: hsl( var(--clr-gray1) );}


/* typography */

.letter-spacing-1 { letter-spacing: 4.75px; } 
.letter-spacing-2 { letter-spacing: 2.7px; } 
.letter-spacing-3 { letter-spacing: 2.35px; } 

.uppercase { text-transform: uppercase; }

.fs-900 { font-size: var(--fs-900); }
.fs-800 { font-size: var(--fs-800); }
.fs-700 { font-size: var(--fs-700); }
.fs-600 { font-size: var(--fs-600); }
.fs-500 { font-size: var(--fs-500); }
.fs-400 { font-size: var(--fs-400); }
.fs-300 { font-size: var(--fs-300); }
.fs-200 { font-size: var(--fs-200); }


.fs-900,
.fs-800,
.fs-700,
.fs-600 {
    line-height: 1.1;
}

.container { padding-inline: 15px; }

/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

/* .navbar, */
.header-btn-group .btn { display: none; }

.header {
  --color: var(--white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 15px;
  /* border-block-end: 1px solid var(--champagne-pink_20); */
  z-index: 4;
}

.header.active {
  position: fixed;
  top: -90px;
  box-shadow: var(--shadow-1);
  animation: slideIn 0.5s ease-out forwards;
  background: hsl( var(--clr-black) / 0.4);
  backdrop-filter: blur(2.5rem);
  padding-top: 1.5rem;
}

@keyframes slideIn {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-big{
  width: 230px;
}

/* .logo {
  color: var(--color);
  font-family: var(--ff-rubik);
  font-size: 2.8rem;
  font-weight: var(--fw-700);
  letter-spacing: -2px;
}

.logo .span {
  display: inline-block;
  color: var(--deep-saffron); 
}*/

.header-btn-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* .search-btn {
  color: var(--btn-color);
  font-size: 20px;
}

.search-btn ion-icon { --ionicon-stroke-width: 50px; } */

.nav-toggle-btn {
  display: grid;
  gap: 4px;
}

.line {
  width: 14px;
  height: 3px;
  background-color: #ffff;
  border-radius: 5px;
  transition: var(--transition-1);
}

.line.middle { width: 24px; }

.line.bottom { margin-left: auto; }

.nav-toggle-btn.active .line.top { transform: translate(1px, 3px) rotate(45deg); }

.nav-toggle-btn.active .line.middle { transform: rotate(-45deg); }

.nav-toggle-btn.active .line.bottom { transform: translate(-1px, -3px) rotate(45deg); }

.navbar {
  position: absolute;
  top: 100.5%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 30px);
  padding-inline: 20px;
  box-shadow: var(--shadow-1);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: var(--transition-1);
}

/* @supports (backdrop-filter: blur(1rem)) {
    .header.active {

    }
} */

/* @supports (backdrop-filter: blur(1rem)) {
    .navbar.active {
        background: hsl( var(--clr-white) / 0..05);
        backdrop-filter: blur(1.5rem);
    }
} */

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

.navbar.active {
  height: 280px;
  visibility: visible;
  background: hsl(var(--clr-white) / 0.9);
  backdrop-filter: blur(2.5rem);
  /* border-radius: 0 0 20px 20px; */
}

.navbar-list { margin-block: 10px; }

.nav-item:not(:last-child) { border-block-end: 1px solid hsla(0, 6%, 21%, 0.05); }

.navbar-link {
  font-size: 1.1rem;
  color: #000;
  font-weight: 500; 
  padding: 10px 15px;
  transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus) { color: hsl(var(--clr-light)); }
.navbar-link.active { color: hsl(var(--clr-light)); }

.logo{
    cursor: pointer;
    padding-left: 53px;
    padding-right: 100px;
    width: 1rem ;
  }
  
.nav-icon{
    display: none;  
}

.social-icon2{
    color: #000 !important;
    font-size: 1.2rem;
    margin-block: 0;
    margin-top: 12px;
    display: flex;
    gap: 0.875rem;   
    padding-inline: 16px;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    cursor: pointer;
    transition: 0.3s ease;
}

.social-icon2 > a > i{
  color: #000;
}

.social-icon2 a i:hover,
.social-icon2 a i:focus {
    color: #A6CC39;
  }

/*     HERO SECTION      */



.video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1; /* Ensure the video is behind other content */
}

.video-element-small{
    display: none;
}

/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero-banner { display: none; }

.hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-block: 145px 60px;
  text-align: center;
  min-height: 700px;
}

/* .hero-subtitle {
  color: var(--white);
  font-size: 10rem;
  letter-spacing: 1px;
  margin-block-end: 25px;
} */

.sprout{
    width: 50px;
    height: 50px;
    position: absolute;
  }

  .sprout-placeholder {
    display: inline-block;
    transform: translateX(-50%); /* Center horizontally */
    z-index: 1; /* Ensure the sprout is above the text */
    position: relative;
    left: -3.06px;
    top: -2.5em; /* Adjust to align the sprout with the top of the "F" */
}

.hero-title{
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    max-width:44ch;
    margin-inline: auto;
    margin-top: 4rem;
  }
  
.hero-text{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--white);
    margin-block: 15px 20px;
    max-width: 44ch;
    margin-inline: auto;
  }


  .hero .btn { margin-inline: auto; }

  /* .hero .btn:is(:hover, :focus) {
    background-color: var(--white);
    color: var(--black);
  } */
  
  .hero .btn{
      /* margin-top: 1.25rem ; */
      background: none;
      border: none;
      /* display: flex;
      flex-direction: column; */
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      color: #ffffff;
      /* gap: 0.75rem /* 12px */; 
      padding-left: 2rem /* 32px */;
      padding-right: 2rem /* 32px */;
      padding-top: 1.25rem /* 20px */;
      padding-bottom: 1.25rem /* 20px */;
      background-color: #30af5b;
      border-radius: 0.25rem /* 4px */;
      white-space: nowrap;
      cursor: pointer;
    } 
  
  .button-icon{
    transition: .3s;
  }
  
  .hero .btn:hover .button-icon{
    transform: translateX(6px);
  }
  
  .btn-flex{
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
  }


  
  .map{
    width: 268px;
    padding-left: 1.75rem /* 28px */;
    padding-right: 1.75rem /* 28px */;
    padding-top: 35px;
    padding-bottom: 35px;
    background-color: rgba(0, 0, 0, 0.4); /* Darker background color with transparency */
    backdrop-filter: blur(2.5rem); /* Apply blur effect to create glass-like effect */ 
    z-index: -1;
    border-radius: 1.5rem;
    margin-top: 4rem;
    margin-inline: auto;
  }
  
  .map-txt{
    display: block;
    color: #a2a2a2;
    font-size: 14px;
    font-weight: 400;
  }
  
  .map-txt1{
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
  }
  
  .map-content{
    display: flex;
  }

/*-----------------------------------*\
  #ANIMATION
\*-----------------------------------*/

  @keyframes slideIn2 {
    from {
      opacity: 0;
      transform: translateX(200%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideIn1 {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .container {
    animation: fadeIn 2s forwards;
  }
  
  
  .hero-title{
    animation: slideIn1 2s forwards;
  }
  
  .hero-text {
    animation: slideIn2 1.5s forwards;
  }
  
  
.container .btn{
    animation: slideIn1 2s forwards;  
  }
  
  .map {
    animation: slideIn2 2s forwards;
  }

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 480px screen
 */

 @media (max-width: 62rem) {

    /**
     * HEADER
     */
  
    /* .header-btn-group .btn {
      display: block;
      --bg-color: var(--dark-orange);
    } */
        
    .video-element-small {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 900px;
        object-fit: cover;
        z-index: -1; /* Ensure the video is behind other content */
        display: inline;
    }
    .video-element {
      top: 0;
      left: 0;
      width: 100%;
      height: 900px;
      object-fit: cover;
      z-index: -1; /* Ensure the video is behind other content */
      display: inline;
    }

  }
  
  
  @media screen and (max-width: 330px) {
      .about-description{
        max-width: 30ch;
      }

      .about-container .about-img{
        width: 250px;
      }

  }
  
  @media screen and (min-width: 576px) {
      .about-container{
        grid-template-columns: .7fr;
        justify-content: center;
      }
  }

  /* @media screen and (min-width: 1024px) {
     
  }
   */
  /**
   * responsive for larger than 550px screen
   */
  
  @media (min-width: 550px) {
  
    /**
     * REUSED STYLE
     */
  
    .container {
      max-width: 750px;
      width: 100%;
      margin-inline: auto;
    }


    .has-scrollbar > li { min-width: calc(50% - 5px); }
  
  
  
    /**
     * HERO
     */
  
    .hero-title { --fs-1: 4.2rem; }
  
  
  
    /**
     * FOOTER
     */
  
    /* .footer-top .container { grid-template-columns: 1fr 1fr; } */
  
  }
  
  /**
 * responsive for larger than 768px screen
 */

@media (min-width: 992px) {

    /**
     * REUSED STYLE
     */
  
    /* .container { max-width: 720px; } */
  
  
  
    /**
     * HERO
     */
  
    .hero {
      position: relative;
      text-align: left;
      overflow: hidden;
      z-index: 1;
    }
  
    .hero-content > :is(*, .btn) { margin-inline: 0; }
  
    .hero-banner {
      display: block;
      position: absolute;
      top: calc(50% + 86px);
      transform: translateY(-50%);
      right: 50px;
      max-width: 40%;
      aspect-ratio: 1 / 0.9;
    }
  

  
    .hero::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: -2px;
      width: 100%;
      height: 100%;
      background:  linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6));
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right bottom;
      pointer-events: none;
      z-index: -1;
    }

    .hero-content{
        margin-top: 9rem;
    }

    .hero-title{
        max-width:25ch;
      }
      
    .hero-text{
        max-width: 40ch;
      }

      
}  

@media (min-width: 992px) {

    .map {
        position: relative;
        z-index: 1000;
        margin-top: -36%;
        left: clamp(35%, 4vw, 100%);
    } 

}

@media (min-width: 900px) {
    .hero-title{
        max-width:44ch;
      }
      
    .hero-text{
        max-width: 44ch;
      }

}



@media (min-width: 992px) {

    /**
     * CUSTOM PROPERTY
     */

    .hero-title{
        max-width: 40ch;
    }
  
    :root {
  
      /**
       * spacing
       */
  
      --section-padding: 120px;
  
    }
  
 
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1000px; }
  
    .has-scrollbar > li { min-width: calc(33.33% - 6.66px); }
  
    .h2 { --fs-1: 4.2rem; }
  
  
  
    /**
     * HEADER
     */
  
    .nav-toggle-btn { display: none; }
  
    .header .container { gap: 20px; }
  
    .navbar,
    .navbar.active {
      all: unset;
      margin-inline-start: auto;
    }
  
    .navbar-list {
      margin-block: 0;
      display: flex;
      gap: 5px;
    }
  
    .nav-item:not(:last-child) { border-block-end: none; }
  
    .navbar-link {
      --fs-4: 1.5rem;
      color: #ffff;
      letter-spacing: -0.5px;
    }

    .map {
        margin-top: -23%;
      } 
  


      .nav-icon{
        margin-block: 0;
        display: flex;
        gap: 0.875rem;    
    }
    
    ul .social-icon {
        display: flex;
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
        list-style-type: none; 
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        cursor: pointer;
        transition: 0.3s ease;
      }
      
    ul .social-icon:hover {
        background-color: #A6CC39;
      }
    
    .social-icon2{
        display: none;
    }
    
    .section{
      padding-block: 7rem 1.5rem;
    }

    .about-container .section-subtitle{
      margin-bottom: .75rem;
    }

    .section .about-container{
      grid-template-columns: 45% 45%;
      align-items: center;
      column-gap: 7rem;
    }

    

    .about-container .about-data{
      order: 1;
    }

    .first-project {
      order: 1;
    }

    .second-project{
      margin-top: 5rem;
  
    }


    .about-data .ab-btn {
      justify-content: start;
    }

    .about-container .about-data,
    .about-container .section-subtitle,
    .about-container .section-title,
    .about-container .project-data{
      text-align: initial;
    }

    /* .about-title div{
      column-gap: 1rem;
      justify-content: initial;
    } */
/* 
    .about-title img{
      width: 50px;
    } */

   .about-container .about-img{
      width: 450px;
      border-radius: 200px 50px 50px 50px;
    }

}  

/**
 * responsive for larger than 1200px screen
 */

 @media (min-width: 1200px) {

    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1200px; }
  
    .map {
        margin-top: -19%;
      } 

    /**
     * HERO
     */
  
    .hero { min-height: 770px; }

    .farm-project .cassava-section{
      max-width: 900px !important;
  
    }
 }  
  



 /*=========== ABOUT  ========== */

 .section{
  padding-block: 5rem ;
  /* background-color:#f4f4f2 ; */
 }

.section.white { background-color: #f4f4f2 }


.section-divider { position: relative; }

.section-divider::before,
.section-divider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-repeat: repeat no-repeat;
  background-position: bottom;
}

.section-divider1::before,
.section-divider1::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-repeat: repeat no-repeat;
  background-position: top;
}


.section-divider.white::after { background-image: url("../img/shape-white.png"); }

.section-divider.gray::after { background-image: url("../img/shape-gray.png"); }


 .grid{
  display: grid;
  gap: 1.5rem;
 }

 .about{
  position: relative;
  max-height: 100%;
  color: hsl( var(--clr-black) );
  padding-top: 7rem;
  /* padding-inline: 15px; */
 }

 .about-container{
  row-gap: 3rem;
 }

 .about-data{
  text-align: center;
 }

 /* .about-title img{
  width: 30px;
 } */

 .about-title div{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .5rem;
 }

 .about-img{
  width: 300px;
  justify-self: center;
  border-radius: .5rem;
}

.section-subtitle{
  display: block;
  font-family: "Dancing Script", cursive;
  font-size: 2.5rem;
  color: #14542a;
  margin-bottom: .5rem;
}

.section-title{
  font-family: "Lora", serif;
  margin-bottom: 1.5rem;
}

.section-subtitle,
.section-title{
  text-align: center;
}

.about-description{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.ab-btn {
  display: flex;
  justify-content: center;
  align-items: center; /* Center the button vertically */
  margin-top: 20px; /* Adjust margin as needed */
}

.ab-btn a {
  display: inline-block;
  padding: 10px 20px; /* Adjust padding as needed */
  background-color: #28a745; /* Green background color */
  color: #fff; /* White text color */
  text-decoration: none;
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.ab-btn a:hover {
  background-color: #218838; /* Darker green on hover */
}

/* =============        BOX SECTION           ============= */
/* Basic styling */
.boxes{
  background-color:#ffffff ;
}

.boxx {
  backdrop-filter: blur(1.5rem);
  border-radius: .3rem;
  color: black;             /* Ensures the text color is white */
  padding: 20px;            /* Adds some padding inside the boxes */
  margin: 10px;             /* Adds space between the boxes */
  border-radius: 5px;
  background: #e0e0e0;
  box-shadow:  7px 7px 14px #bcbcbc,
               -7px -7px 14px #ffffff;
  height: 250px;            /* Fixed height for all boxes */
  width: 300px;              /* Full width on mobile devices */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Aligns content and button */
}

.box-container {
  display: flex;
  flex-wrap: wrap; /* Allows boxes to wrap on smaller screens */
  justify-content: center; /* Centers boxes in the container */
}

.box-title{
  text-align: center;
  color: #14542a;  
  font-family: "Lora" ;
  font-weight: 700;
  font-size: 2rem;
}

.box-text{
  font-family: 'Lora';
  font-size: 1rem;
  line-height: 1.5;
}

.box-btn{
  /* background-color: #14542a; */
  border: 1px solid #14542a;
  color: #000;
  font-weight: 600;
  font-size: 1rem;
  padding-block: 15px;
  border-radius: 4px;
  transition: 0.3s ease;
}

.box-btn:is(:hover, :focus){
    background-color: #14542a;
    color: #ffffff;
    border: none;
}

/* Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%;
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


/* Modal Content */
.modal-content {
  background: hsl(var(--clr-white) / 1);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 25px;
  border-radius: 5px;
  width: 40%; /* Could be more or less, depending on screen size */
  transition: 1s ease;
}

/* The Close Button */
.close {
  color: #4b4b4b;
  float: right;
  font-size: 25px;
  font-weight: bold;
  background-color: transparent;
  transition: 0.3s ease;
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;

}

.box-title1{
  text-align: center;
  color: #14542a;  
  font-family: "Lora" ;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.box-text1{
  color: #000;
  font-family: 'Lora';
  font-size: 1.2rem;
  line-height: 1.5;
}



/* Media query for larger screens */
@media (min-width: 992px) {
  .boxx {
      width: calc(33.333% - 25px); /* Each box takes roughly a third of the space, minus margin */
  }

  .cassava-img{
    margin-top: 8rem;
  }

}

@media (max-width: 992px){
   .maize-img{
    margin-bottom: 5rem;
   }
}

@media (max-width: 750px) {
  .modal-content {
    width: 80%; /* Could be more or less, depending on screen size */
  }
}



/* ===============        FARM PROJECT SECTION ================ */

.farm-project{
  z-index: -1;
}

.section-name{
  font-family: 'Lora';
  color: #14542a;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2.5rem;
}



.project-img{
  width: 250px;
  height: 250px;
  justify-self: center;
  border-radius: 100%;
}



.project-list {
  list-style: none; /* Remove default list styling */
  padding-left: 0; /* Remove padding if necessary */
}

.project-list li {

  position: relative; /* Position relative for pseudo-elements */
  padding-left: 20px; /* Space for custom bullet */
  margin-bottom: 10px; /* Space between items */
  margin-left: 25px;
}

.project-list li::before {
  content: ''; /* Necessary for a pseudo-element */
  position: absolute;
  left: 0; /* Align to the left side */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Centering adjustment */
  width: 8px; /* Width of the custom bullet */
  height: 8px; /* Height of the custom bullet */
  background-color: #3DA417; /* Custom color for the bullet */
  border-radius: 25%; /* Make it slightly rounded */
}



/* ===========      TEAM SECTION      ============= */

.team-section{
  background-color: #f4f4f2 ;
  padding-top: 7rem;
  padding-bottom: 5rem;
}


.management-team{
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container{
  padding-block: 5rem;
}

.card-content{
  margin-inline: 1.75rem;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 3rem;
  max-width: 1120px;
  height: 400px;
}

.card-article{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #ffff;
    padding: 20px;
}

.card-image{
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: -.75rem;
}

.card-data{
  padding-top: 1rem;
  text-align: center;
  position: relative;
}

.card-img{
  margin: 0 auto;
  position: relative;
}

.card-name{
  color: #000;
  font-family: 'Lora';
  font-size: 1.2rem;
  letter-spacing: .03em;
}

.team-btn {
  display: flex;
  justify-content: center; /* Center the button horizontally */
  align-items: center; /* Center the button vertically */
  margin-top: 20px; /* Adjust margin as needed */
}

.team-btn a {
  display: inline-block;
  padding: 10px 20px; /* Adjust padding as needed */
  background-color: #28a745; /* Green background color */
  color: #fff; /* White text color */
  text-decoration: none;
  border-radius: 5px; /* Rounded corners */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.team-btn a:hover {
  background-color: #218838; /* Darker green on hover */
}




.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after{
  content: '';
}

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
  display: none;
  width: initial;
  height: initial;
  font-size: 2.6rem;
  color: #14542a !important;
}

.swiper .swiper-button-prev {
  left: 0;
}

.swiper .swiper-button-next {
  right: 0;
}

.swiper .swiper-pagination-bullet {
  background-color: hsl(136, 42%, 67%);
  opacity: 1;
}

.swiper .swiper-pagination-bullet-active {
  background-color: #14542a;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .card-data {
    padding: 1rem;
  }
}

/* For medium devices */
@media screen and (min-width: 768px) {
  .card-content {
    margin-inline: 3rem !important;
  }

  .swiper .swiper-button-next,
  .swiper .swiper-button-prev {
    display: block;
  }
}

/* For large devices */
@media screen and (min-width: 1200px) {
  .card-container {
    max-width: 1200px;
  }

}

/*    ==========  call to actio =========== */
.cta{
  margin: 100px auto;
  width: 80%;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  text-align: center;
  padding: 100px 30px;
}

.cta > h1{
  font-family: "Lora";
  font-weight: 600;
  color: #fff;
  font-size: 2.5rem;
  padding: 0;
}

.cta > p{
  font-size: 1.5rem;
  
  font-weight: 500;
  margin-bottom: 40px;
}

.co-btn{
	border: 1px solid #fff;
	background: transparent;
	color: #fff ;
	font-size: 12px;
	padding: 15px 39px;
  text-decoration: none;
  letter-spacing: 2px;
  display: inline-block;
  transition: 0.5s;
  border-radius: 1px;
}

.co-btn:hover{
  border: 1px solid #28a745;
	background:#28a745 ;
}

.co-btn1{
  border: 1px solid #28a745;
	background:#28a745 ;
	color: #fff ;
	font-size: 12px;
	padding: 15px 39px;
  text-decoration: none;
  letter-spacing: 2px;
  display: inline-block;
  transition: 0.5s;
  border-radius: 1px;
}

@media(max-width:700px) {
  .cta h1{
    font-size: 24px;
  }

  .cta > p{
    font-size: 18px;
  }
}

/* =============== FOOTER ============== */
.footer {
  width: 100%;
  bottom: 0;
  background: linear-gradient(to right, #14542a, #A6CC39);
  color: #fff;
  padding: 100px 0 30px;
  border-top-left-radius: 125px;
  font-size: 13px;
  line-height: 20px;
}

.row{
  width: 85%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.col{
  flex-basis: 25%;
  padding: 10px;
}

.logo-footer{
  width: 200px;
  margin-bottom: 20px;
}

.col h3{
  width: fit-content;
  margin-bottom: 40px;
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
}

.col p{
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.7;
  display: flex;
}
.col p i{
  font-size: 1.1rem;
  margin-top: 4px;
  margin-right: 10px;
}

.quick-links li{
  list-style: none;
  margin-bottom: 10px;
  display: flex; 
  font-size: 14px;
}


.quick-links li a:hover,
.quick-links li a:focus{
  color: #ccc;
}

.quick-links li i{
  font-size: 2.5rem;
}

.footer-social{
  display: flex;
}

.footer-social a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 20px;
}

.footer-social a:hover,
.footer-social a:focus{
  background-color: #ccc; 
}

.footer-social a i{
  font-size: 1.3rem;
  font-weight: 700;
  color: #A6CC39;
}

hr{
  width: 90%;
  border: 0;
  border-bottom: 1px solid #ccc;
  margin: 20px auto;
}

 .copyright{
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  padding-inline: 25px;
}

 .copyright .adtech{
  margin-left: 5px;
  font-weight: 600;
  display: flex;
  justify-content: center;
}

.copyright .adtech:hover{
  color: rgb(8, 8, 112);
}

@media  (min-width:525px){
 .copyright{
    display: flex;
    justify-content: center;

  }
  
}

@media  (max-width:700px){
  .footer{
    bottom: unset;
  }

  .col{
    flex-basis: 100%;
    padding: 10px;
  }
  
  
}

/* ===========       WHATSAPP ICON       ============= */
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background-color: #25d366;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.whatsapp-btn{animation: pulse 2s infinite;}
.whatsapp-icon {
  width: 30px;
  height: auto;
}

@keyframes pulse {
  0% , 100% {transform: scale(1);}
  50% {transform: scale(1.2);}
}




















/* ======================================================= ABOUT PAGE ================================================== */

.grid-container {
  text-align: center;
  display: grid;
  place-items: center;
  padding-inline: 2rem;
  padding-bottom: 4rem;
}


.about-title {
  font-size: 2rem;
  font-weight: 500;
}

.tab-list {
  color: #000 !important;
  padding-inline: 25px;
  font-size: 1.1rem;
  font-weight: 500;
  justify-content: center;
  padding-block: 2rem;
}

.underline-indicators {
  color: #000;
}

.underline-indicators > * {
  color: #000;
  cursor: pointer;
  padding: var(--underline-gap, 1rem) 0;
  border: 0;
  border-bottom: .2rem solid hsl( var(--clr-gray) / 0 );
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: hsl( var(--clr-light) / .5);
}

.underline-indicators > .active,
.underline-indicators > [aria-selected="true"] {
    color: #14542a;
    border-color: hsl( var(--clr-light) / 1); 
}

.about-title {
  padding-block: 3rem;
  text-align: center;
}

@media (max-width: 30rem) {
  .tab-list {
    font-size: 0.8rem;
  }

 main .flex {
    gap: 1rem;
  }
  

  
}


.flex {
  display: flex;
  gap: 2.5rem;
}


.about-us{
  width: 100%;
  height: 350px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6));
  z-index: 1;
  padding-block: 145px 60px;
}

.img-element{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px;
  object-fit: cover;
  z-index: -9999; /* Ensure the video is behind other content */
}

  
.count-boxx {
  background: #f2f3f7;
  /* backdrop-filter: blur(1.5rem); */
  border-radius: 10px;
  padding: 20px;            /* Adds some padding inside the boxes */
  margin: 10px;             /* Adds space between the boxes */
	box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
	            inset -2px -2px 12px rgba(255, 255, 255, 0.5),
	            inset 2px 2px 4px rgba(255, 255, 255, 0.1),
	            inset 2px 2px 8px rgba(255, 255, 255, 0.15); /* Optional: adds shadow for better visibility */
  height: 140px;            /* Fixed height for all boxes */
  width: 250px;              /* Full width on mobile devices */
  display: flex;
  flex-direction: column;
  border-bottom: 5px solid #3DA417;
  justify-content: space-between; /* Aligns content and button */

}

.count-box-container {
  display: flex;
  flex-wrap: wrap; /* Allows boxes to wrap on smaller screens */
  justify-content: center; /* Centers boxes in the container */
  padding-block: 50px;
}

.count-box-title{
  text-align: center;
  color: #14542a;  
  font-family: "Lora" ;
  font-weight: 700;
  font-size: 1.5rem;
}

.count-box-text{
  color: black; 
  height: 45px;
  text-align: center;
  font-family: 'Lora';
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.5;
}
  

.box1{
  width: 45%;  
  border-radius: 5px;
  background: #e0e0e0;
  box-shadow:  7px 7px 21px #cecece,
               -7px -7px 21px #f2f2f2;
  padding: 20px;            /* Adds some padding inside the boxes */
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Aligns content and button */
}

.box1 img{
  height: 300px;
}

.box1 h1{
  color: #14542a;  
  font-family: "Lora" ;
  font-weight: 700;
  font-size: 1.8rem;
  margin-block: 20px;
}

.box1 h3{
  color: #1a1919;
  font-size: 1.1rem;
  min-height: 10px;
}

@media (max-width: 992px) {
  .box1{
    width: 450px;
  }
}
@media (max-width: 500px) {
  .box1{
    width: 350px;
  }  
  .box1 img{
    height: 200px;
  }
}


.objectives{
  max-width: 1100px;
  margin-top: -2rem;
}

.objectives-text{
  color: #1a1919;
  font-weight: 300;
  margin-bottom: 100px;
  padding-inline: 25px;
}




.mtc {
  display: flex;
  flex-wrap: wrap; /* Allows boxes to wrap on smaller screens */
  justify-content: center; /* Centers boxes in the container */
}

.mt-card {
  width: 550px;
  margin-block: 5rem;
  padding-inline: 40px;
  padding-block: 70px;
  border-radius: 10px;
  box-shadow:  6px -6px 8px #e8e7e7,
               -6px 6px 8px #e4e4e4;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Aligns content and button */
}

.card-image1{
  display: flex;
  justify-content: center;
}

.card-image1 img{
  border-radius: 100%;
  background-color: #d9d8dc;
  height: 300px;
  width: 300px;
}

.card-content1 p{
  text-align: center;
  color: #000;
  padding-top: 20px;
  font-size: 1rem;
  line-height: 1.6
}

.card-content1 h4{
  text-align: center;
  color: #14542a; 
  font-family: "Lora" ;
  font-weight: 700;
  font-size: 1.2rem;
  margin-block: 20px;
}

@media (max-width:600px){
  .card-image1 img{
    border-radius: 100%;
    background-color: #d9d8dc;
    height: 200px;
    width: 200px;
  }
}


@media (min-width:1200px){
  .mtc{
    padding-inline: 5%;
  }
  
}

@media (min-width:992px){

  .mt-card {
    width: 100%;
    margin-block: 5rem;
    border-radius: 10px;
    box-shadow:  6px -6px 8px #e8e7e7,
                 -6px 6px 8px #e4e4e4;
    background-color: #fff;
    display: grid;
    grid-template-areas: "card-image card-content";
    grid-template-columns: 40% 1fr;
    padding-inline: 40px;
    padding-block: 70px;
    gap: 48px;
    align-items: center;
    justify-content: space-evenly; /* Distributes space around items */
  }
  
  .card-image1 {
    grid-area: card-image; /* Explicitly places the image in the grid */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
  .card-content1 {
    grid-area: card-content; /* Explicitly places content in the grid */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically within its area */
  }

  .card-content1 h4{
    text-align: initial;
  }

  .card-content1 p{
    text-align: initial;
  }
  
}


/* ===================== =========== INNITIATIVES SECTION =============== ===========*/

.innovation{
  width: 80%;
  margin: auto;
  padding-bottom: 50px;
}

.in-row{
  display: flex;
  justify-content: space-between;
}

.in-col{
  flex-basis: 48%;
  padding: 10px 2px;
  color: #000;
}

.in-col img{
  margin-top: 4.5rem;
  width: 100%;
} 

.in-name{
  font-family: 'Lora';
  padding-top: 0;
  color: #14542a;
  font-size: 2rem;
  font-weight: 700;
}

.in-col p{
  padding: 15px 0 25px;
  font-size: 1rem;
}

.in-col p br{
  margin-bottom: 100px;
}

@media (max-width:1200px){
  .in-row{
    flex-direction: column;
  }
  .in-col img{
    margin-top: 0;
    width: 100%;
  } 
}








/* General Styling for the section */
.innovation1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}

/* Styling for the columns */
.in-row1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.in-col1 {
  flex: 1;
}

.in-col1 p{
  padding: 15px 0 25px;
  font-size: 1.2rem;
  color: #000;
}

/* Specific styles for the text column */
.in-col1:first-child {
  padding-right: 20px;
}

/* Styles for the image column */
.in-col1:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Adjust the space between images */
}

/* Styles for the images */
.in-col1 img:nth-child(1) {
  width: 120px;/* Three images per row, accounting for gap */
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  padding: 5px; /* Padding inside the images */
  box-sizing: border-box;
  margin-top: 50px;
}

.in-col1 img:nth-child(3) {
  width: 200px; /* Three images per row, accounting for gap */
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  padding: 5px; /* Padding inside the images */
  box-sizing: border-box;
}

.in-col1 img:nth-child(2) {
  width: 150px; /* Three images per row, accounting for gap */
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  padding: 5px; /* Padding inside the images */
  box-sizing: border-box;
  margin-top: 30px;
}


/* Hover effect for zoom animation */
.in-col1 img:hover {
  transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 950px) {
  .in-row1 {
      flex-direction: column;
      align-items: center;
  }

  .in-col1 {
      width: 100%;
  }

  .in-col1:first-child {
      padding-right: 0;
  }

}










/*============== ======= CONTACT SECTION ======================*/
.contact{
	width: 80%;
	margin: auto;
}

.contactcol{
	flex-basis: 48%;
	margin-bottom: 30px;
}

.contactcol div{
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}


.contactcol div i{
	font-size: 20px;
	color: #30af5b;
	margin-right: 15px;
  margin-bottom: 3px;
}

/* @media (max-width: 950px){
	.contactcol div i{
	font-size: 19px;
}

} */

.contactcol div h5{
  font-weight: 700;
	font-size: 15px;
	margin-bottom: 5px;
	color: #555;
}

.contactcol div p{
  font-size: 13px;
  margin-top: -10px;
  color: #555;
}

.btn6{
	border: 1px solid #14542a;
	background: transparent;
	color: #14542a ;
	font-size: 12px;
	padding: 15px 39px;
    text-decoration: none;
    letter-spacing: 2px;
    display: inline-block;
    transition: 0.5s;
    border-radius: 1px;
}

.btn6:hover{
	color: white;
	background:#14542a ;
}

.contactcol input, .contactcol textarea{
	width: 100%;
	padding: 15px;
	margin-bottom: 17px;
	outline: none;
	border: 1px solid #ccc;
	box-sizing: border-box;
	font-size: 15px;
}


.contact-row{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

@media (max-width: 950px){
	.contact-row{
	position: relative;
	width: 100%;
	display: inline-grid;
	justify-content: space-between;
}



}

form input{
  background-color: #fff;
}

form textarea{
  background-color: #fff;
}