*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #2B2A2A;
}
nav{
    margin-top: -43px;
    padding-top: 60px;
    padding-left: 450px;
}
nav ul{
    list-style: none;
    display: flex;
    gap: 80px;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 30;
    padding-top: 30px;
}
nav ul li{
    list-style: none;
    flex-wrap: wrap;
}
nav ul li a{
    text-decoration: none;
    color: #2B2A2A;
    font-size: 15px;
    font-family: sans-serif, "Roboto";
    font-weight: bold;
    background-color: #f3ea21;
    display: inline-block;
    width: 100px;
    height: 30px;
    padding-top: 5px;
    text-align: center;
    border-radius: 8px;
}
  .logo{
    object-fit: contain;
    object-position: center;
    width: 240px;
    height: 240px;
    position: absolute;
    margin-left: 40px;
    margin-top: 50px;
  }
  .ha1{
    color: #2B2A2A;
    font-size: 15px;
    font-weight: normal;
    font-family: sans-serif, "roboto";
    padding-top: 5px;
    text-align: center;
  }
  .contect{
    color: white;
    font-size: 30px;
  }

  .drawn-sect1{
    height: 600px;
    background-image: url(img/46393.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -63px;
    z-index: 10;
  }
  .drawn-sect1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.drawn-sect1 .agri-ctrl {
    position: relative;
    z-index: 2;
}

  .ha2{
    font-size: 20px;
    font-family: sans-serif, "roboto";
    font-weight: bold;
    color: white;
  }
  .pa1{
    color: white;
    font-size: 15px;
    font-family: sans-serif, "roboto";
    font-weight: normal;
    width: 300px;
    line-height: 25px;
    margin-top: 20px;
  }
  .drawn{
    object-fit: contain;
    object-position: center;
    width: 500px;
    height: 500px;
    margin-top: -150px;
    margin-left: -50px;
  }
  .agri-ctrl{
    display: flex;
    gap: 200px;
    margin-left: 80px;
    margin-top: 60px;
  }
  .agri{
    padding-top: 180px;
  }
  .CTA{
    color: #2B2A2A;
    background-color: #f3ea21;
    font-size: 15px;
    font-family: sans-serif, "roboto";
    font-weight: normal;
    border-radius: 8px;
    width: 120px;
    height: 30px;
    border: 2px solid #f3ea21;
    margin-top: 80px;
    cursor: pointer;
  }
  .CTA:hover{
    background-color: #f1f1e6;
    border: 2px solid #f1f1e6;
    transition: 0.3s ease-in all;
  }
  .cate{
    font-size: 20px;
    color: #2B2A2A;
    margin-top: 3px;
    margin-left: 5px;
  }
  .service-sect{
    height: 400px;
    background-color: #2B2A2A;
  }
  .card1{
    width: 300px;
    height: 200px;
    background-color: #f3ea21;
    border-radius: 15px;
    cursor: pointer;
  }
  .card1:hover{
    background-color: #f1f1e6;
    transition: 0.3s ease-in all;
  }
  .ha3{
    color: #2B2A2A;
    font-size: 20px;
    font-family: sans-serif, "roboto";
    font-weight: normal;
    text-align: center;
    margin-top: 160px;
  }
  .ico{
    font-size: 70px;
    color: #2B2A2A;
    margin-left: 120px;
    margin-top: 40px;
    position: absolute;
  }
  .menu-toggle{
    color: #098d45;
  }
  .card-ctrl{
    display: flex;
    gap: 80px;
    padding-top: 160px;
    padding-left: 80px;
  }
  .client-sect{
    height: 900px;
    background-color: #2B2A2A;
  }
  .butt1{
    color: #2B2A2A;
    font-size: 15px;
    font-family: sans-serif,"roboto";
    font-weight: normal;
    width: 100px;
    height: 30px;
    border: 1px solid #f3ea21;
    border-radius: 8px;
    background-color: #f3ea21;
  }
  .butt1:hover{
    background-color: #f9f9f9;
    cursor: pointer;
    border: 2px solid #f9f9f9;
  }
  .ha5{
    color: white;
    font-size: 20px;
    font-family: sans-serif, "roboot";
    font-weight: normal;
    margin-left: 60px;
  }  
  .pa3{
    color: white;
    font-size: 15px;
    font-family: sans-serif, "roboto";
    font-weight: lighter;
    width: 300px;
    line-height: 25px;
  }
  .portrait{
    object-fit: cover;
    object-position: center;
    width: 500px;
    height: 500px;
    border-radius: 15px;
  }
  .imagess{
    display: flex;
    gap: 40px;
  }
  .butts{
    padding-left: 380px;
    display: flex;
    gap: 20px;
  }
  .down-sect{
    height: 400px;
    background-color: #2B2A2A;
  }
  .office{
    object-fit: cover;
    object-position: center;
    width: 800px;
    height: 600px;
    border-radius: 15px;
  }
  .info-sect{
    height: 400px;
    background-color: #2B2A2A;
  }
  .card3{
    width: 300px;
    height: 200px;
    background-color: #f3ea21;
    padding-top: 10px;
    border-radius: 15px;
    padding-left: 10px;
    cursor: pointer;
  }
  .card3:hover{
    background-color: #f1f1e6;
    transition: o.3s ease-in all;
  }
  .ha6{
    color: #2B2A2A;
    font-size: 20px;
    font-family: sans-serif, "roboto";
    font-weight: normal;
    margin-top: 10px;
  }
  .pa7{
    color: #2B2A2A;
    font-size: 15px;
    font-family: sans-serif, "roboto";
    font-weight: normal;
    width: 250px;
    margin-left: 15px;
  }
  .vis{
    color: #2B2A2A;
    font-size: 40px;
  }
  .sides{
    display: flex;
    gap: 160px;
    padding-top: 10px;
    padding-left: 10px;
  }
  .linktr{
    color: white;
    font-size: 60px;
    background-color: #2B2A2A;
    border-radius: 50%;
    display: inline-block;
    width: 80px;
    height: 80px;
    padding-top: 10px;
    padding-left: 10px;
    margin-left: 100px;
    margin-top: 20px;
  }
  .card2-ctrl{
    display: flex;
    gap: 80px;
  }
  .cards2{
    padding-left: 80px;
    margin-top: 600px;
  }
 .cultivator{
    object-fit: contain;
    object-position: center;
    width: 700px;
    height: 700px;
    margin-top: -250px;
    margin-left: 180px;
  }
  .ha10{
    color: rgb(33, 157, 240);
    font-size: 15px;
    font-family: sans-serif, "roboto";
    font-weight: normal;
    margin-top: 90px;
  }
  .feat{
    display: flex;
    gap: 120px;
    position: absolute;
  }
  .machines-sect{
    height: 1100px;
    background-color: #2B2A2A;
  }
  .left{
    padding-left: 80px;
    padding-top: 240px;
    gap: 40px;
  }
  .ha11{
    color: rgb(160, 154, 154);
    font-size: 15px;
    font-family: sans-serif, "roboto";
    font-weight: normal;
    line-height: 45px;
  }
  .ha11:hover{
    color: #f3ea21;
  }


  .map-sect{
    height: 800px;
    background-color: #2B2A2A;
}
.inputted{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 10px;
}
.inputted1{
    margin-top: 30px;
    font-size: 15px;
    font-family: "roboto", sans-serif;
}
input[type="email"]{
outline: 1px solid #2B2A2A;
border: 1px solid #2B2A2A;
padding-left: 20px;
color: white;
}
input[type="subject"]{
    outline: 1px solid #2B2A2A;
    border: 1px solid #2B2A2A;
    padding-left: 20px;
    color: white;
}
input[type="textarea"]{
    outline: 1px solid #2B2A2A;
    border: 1px solid #2B2A2A;
    padding-left: 20px;
    color: white;
}
.inputted2{
    border: 1px solid #2B2A2A;
    background-color: #2B2A2A;
    border-radius: 8px;
    height: 30px;
    width: 270px;
}
.inputted3{
    border: 1px solid #2B2A2A;
    border-radius: 15x;
    height: 140px;
    width: 270px;
    border-radius: 8px;
    background-color: #2B2A2A;
}
.butt26{
    background-color: #2B2A2A;
    width: 120px;
    height: 30px;
    border: 1px solid #2B2A2A;
    color: white;
    font-family: "roboto", sans-serif;
    border-radius: 15px;
    margin-top: 20px;
    margin-left: 30px;
}
.line-highlight70{
  width: 4px;
  height: 400px;
  background-color: #AC6286;
}
.line-ctrl16{
  display: flex;
  padding-left: 120px;
  margin-top: 160px;
}
.mapp-img{
  object-fit: cover;
  object-position: center;
  width: 450px;
  height: 420px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.ha100{
  color: #392228;
  font-size: 15px;
  font-family: "roboto", sans-serif;
  line-height: 60px;
}
.ha101{
  color: #8d6671;
  font-size: 13px;
  font-family: "roboto", sans-serif;
  line-height: 60px;
  opacity: 0.8;
}
.mapped-txt{
  padding-left: 80px;
}
.right-mapped{
  padding-left: 80px;
  padding-top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fromss{
  width: 800px;
  height: 420px;
  background-color: #f3ea21;
  border-radius: 15px;
  display: flex;
}
.ha20{
  color: white;
  font-size: 15px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
}
.contact-div{
  margin-top: -140px;
  position: absolute;
  margin-left: 80px;
  line-height: 25px;
  margin-left: 380px;
}
.view-sect{
  height: 700px;
  background-color: #2B2A2A;
}
.ha21{
  color: white;
  font-size: 20px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
  margin-left: 380px;
  margin-top: 40px;
}
.office-img{
  object-fit: cover;
  object-position: center;
  width: 1000px;
  height: 500px;
  border-radius: 15px;
  margin-left: 300px;
  margin-top: 60px;
}
.card8{
  width: 300px;
  height: 300px;
  background-color: #f1f1e6;
  border-radius: 15px;
}
.me{
  display: flex;
  gap: 80px;
}
.you{
  display: flex;
  gap: 80px;
  margin-top: 60px;
}
.all-right-and-left{
  display: flex;
}
.right2{
  margin-top: 260px;
  margin-left: 160px;
}
.ha25{
  color: #098d45;
  font-size: 15px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
}

.category-content {
  display: none;
  margin-top: 10px;
  padding-left: 60px;
}
.category-content.active {
  display: block;
}
.machinery-section{
  height: 400px;
  background-color: #2B2A2A;
  padding-left: 80px;
  padding-top: 200px;
  display: flex;
}
.machines-se{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: 20px;
}
.machines-se a{
  color: #ccc;
  font-size: 15px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
  text-decoration: none;
}
.card10{
  width: 300px;
  height: 300px;
  background-color: #f1f1e6;
  border-radius: 15px;
}
.ctrlll{
  display: flex;
  gap: 60px;
}
.ctrlll1{
  display: flex;
  gap: 60px;
  padding-top: 60px;
}
.ha30{
  color: #098d45;
  font-size: 15px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
}
.ha31{
  color: #2B2A2A;
  font-size: 15px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
  background-color: #f3ea21;
  display: inline-block;
  width: 200px;
  height: 25px;
  padding-top: 4px;
  padding-left: 15px;
  margin-left: -80px;
  border-radius: 8px;
}
.equip{
  object-fit: contain;
  object-position: center;
  width: 250px;
  height: 250px;
  margin-left: 30px;
}
.insid{
  display: flex;
  gap: 120px;
  margin-top: 20px;
  margin-left: 10px;
}
.work-cont{
  display: none;
  margin-top: 20px;
  padding: 10px;
}

.client-cont{
  display: none;
  margin-top: 20px;
  padding: 10px;
}
.butt1 {
  margin: 5px;
  padding-top: 3px;
  cursor: pointer;
  width: 120px;
  height: 30px;
}
.portrait {
  width: 100%;
  max-width: 300px;
  margin: 10px;
}
.ctrl-1{
  margin-left: 85px;
}
.ha40{
  color: #f1f1e6;
  font-size: 20px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
  margin-left: 80px;
}
.pa30{
  color: #f1f1e6;
  font-size: 15px;
  font-family: sans-serif, "roboto";
  font-weight: normal;
  width: 300px;
}
.images-well{
  object-fit: cover;
  object-position: center;
  width: 370px;
  height: 500px;
  border-radius: 15px;
}
.img-ctrl{
  display: flex;
  gap: 20px;
  flex-direction: column;
  padding-left: 100px;
}
.image-ct{
  padding-top: 80px;
  padding-left: 280px;
}
.vid-ctrl{
  margin-top: 40px;
  display: flex;
  gap: 40px;
}



.CTA4 {
  background-color: #f3ea21; 
  color: #2B2A2A; 
  border: none; 
  border-radius: 5px; 
  padding: 10px 20px; 
  font-size: 16px; 
  font-weight: bold; 
  cursor: pointer; 
  transition: background-color 0.3s, transform 0.2s; 
  display: inline-flex; 
  align-items: center; 
  margin-top: 120px;
}
.CTA4:hover {
  background-color: #f1f1e6; 
  transform: translateY(-2px); 
}
.CTA4:focus {
  outline: none; 
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 
}
.CTA4:disabled {
  background-color: #6c757d; 
  cursor: not-allowed; 
}






        .core-values {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 10px;
      }
      .core-value {
          background-color: #f9f9f9;
          padding: 15px;
          border-left: 4px solid #0078d7;
          border-radius: 4px;
      }
      .core-value h3 {
          margin: 0;
          font-size: 1.2em;
          color: #0078d7;
      }
      .core-value p {
          margin-top: 5px;
      }
      .list-section ul {
          list-style-type: disc;
          padding-left: 20px;
          margin: 10px 0;
      }

      .section {
          padding: 50px;
          background-color: #2B2A2A;
          border-radius: 4px;
      }








            /* Main Container */
            .container {
              max-width: 1000px;
              background-color: #2B2A2A;
              padding: 20px;
              border-radius: 12px;
              display: grid;
              grid-template-columns: 1fr;
              gap: 20px;
              overflow: hidden;
              margin-left: 300px;
              margin-top: 40px;
          }
  
          /* Header */
          .header {
              text-align: center;
              padding: 20px 0;
              border-bottom: 2px solid #0078d7;
          }
          .header h1 {
              color: #f1f1e6;
              font-size: 2.5em;
              margin: 0;
          }
  
          /* Section Titles */
          .section-title {
              color: #f3ea21;
              font-size: 1.8em;
              font-weight: bold;
              margin-bottom: 10px;
              position: relative;
          }
          .section-title::after {
              content: '';
              width: 50px;
              height: 3px;
              background-color: #f3ea21;
              position: absolute;
              left: 0;
              bottom: -5px;
              border-radius: 2px;
          }
  
          /* Core Values Grid */
          .core-values {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
              gap: 15px;
          }
          .core-value {
              background-color: #2B2A2A;
              padding: 15px;
              border-left: 6px solid #f3ea21;
              border-radius: 8px;
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
              transition: transform 0.2s ease-in-out;
          }
          .core-value:hover {
              transform: translateY(-5px);
          }
          .core-value h3 {
              margin: 0;
              font-size: 1.4em;
              color: #f3ea21;
          }
          .core-value p {
              margin-top: 8px;
              line-height: 1.6;
              color: #f9f9f9;
          }
  
          /* List Section Styling */
          .list-section ul {
              list-style-type: disc;
              padding-left: 20px;
              margin: 10px 0;
          }
          .list-section li {
              margin: 8px 0;
              line-height: 1.6;
              color: #f1f1e6;
          }
  
          /* Sections Styling */
          .section {
              padding: 20px;
              background-color: #2B2A2A;
              border-radius: 8px;
              transition: transform 0.2s ease-in-out;
          }
          .section:hover {
              transform: translateY(-5px);
          }
  
          /* Mission Section */
          .mission {
              text-align: center;
              color: #f1f1e6;
              font-size: 1.2em;
              line-height: 1.8;
          }
          .partner-sect{
            height: 200px;
            background-color: #2B2A2A;
          }
          .malawi{
            width: 800px;
            height: 150px;
            background-color: #f9f9f9;
            border-radius: 15px;
            display: inline-block;
            padding-top: 10px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin-left: 80px;
            gap: 20px;
          }
          .colt{
            object-fit: cover;
            object-position: center;
            width: 80px;
            height: 80px;
          }
          .ha55{
            color: #2B2A2A;
            font-size: 15px;
            font-family: sans-serif, "roboto";
            font-weight: normal;
            text-align: center;
          }
          .ha56{
            color: #f9f9f9;
            font-size: 20px;
            font-family: sans-serif, "roboto";
            font-weight: normal;
            margin-left: 80px;
            margin-top: 40px;     
          }


          footer {
            background-color: #ffcc00; 
            color: white; 
            padding: 20px 0; 
            position: relative; 
            bottom: 0; 
            width: 100%; 
            height: 70px;
        }
    
        .footer-container {
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 20px; 
        }
    
        .footer-links {
            list-style: none; 
            padding: 0; 
            margin: 0; 
            display: flex; 
        }
    
        .footer-links li {
            margin-right: 20px; 
        }
    
        .footer-links a {
            color: #2B2A2A; 
            text-decoration: none; 
            transition: color 0.3s; 
        }
    
        .footer-links a:hover {
            color: #ffcc00; 
        }
    
        .footer-copyright {
            text-align: right; 
        }
    
        .footer-copyright p {
            margin: 0; 
            color: #2B2A2A;
        }

        .last-sect{
          height: 600px;
          background-color: #2B2A2A;
        }
        .ctrlll2{
          display: flex;
          gap: 60px;
          padding-top: 60px;
        }

        .backg{
          background-image: url(img/green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
        .ha37{
          color: #098d45;
          font-size: 15px;
          font-family: sans-serif, "roboto";
          font-weight: normal;
          margin-top: -25px;
          margin-left: 15px;
        }
        @media only screen and (max-width: 768px){
          .ha1{
            color: #2B2A2A;
            font-size: 15px;
            font-weight: normal;
            font-family: sans-serif, "roboto";
            padding-top: 5px;
            text-align: center;
          }



          .drawn-sect1{
            height: 1000px;
            background-image: url(img/green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-top: -63px;
            z-index: 10;
          }
          .agri-ctrl{
            display: block;
            gap: 0px;
            margin-left: 20px;
            margin-top: 60px;
          }


          .drawn{
            object-fit: contain;
            object-position: center;
            width: 500px;
            height: 500px;
            margin-top: -20px;
            margin-left: -70px;
          }



          .card-ctrl {
            display: block; 
            padding-top: 40px; 
             
            gap: 10px; 
        }

        .service-sect{
          height: 1200px;
          background-color: #2B2A2A;
        }
        .ico{
          font-size: 70px;
          color: #2B2A2A;
          margin-left: 120px;
          margin-top: 80px;
          position: absolute;
        }
        .card1{
          width: 300px;
          height: 200px;
          background-color: #f3ea21;
          border-radius: 15px;
          cursor: pointer;
        }
        .client-sect{
          height: 1400px;
          background-color: #2B2A2A;
        }
        .ctrl-1{
          margin-left: 5px;
        }
        .vid-ctrl{
          margin-top: 10px;
          margin-left: -40px;
          display: block;
          gap: 40px;
        }
        .img-ctrl{
          display: flex;
          gap: 10px;
          flex-direction: column;
          padding-left: 100px;
        }
        .image-ct{
          padding-top: 80px;
          padding-left: 10px;
        }
        .butts{
          padding-left: 75px;
          display: flex;
          gap: 20px;
        }






        .info-sect{
          height: 800px;
          background-color: #2B2A2A;
        }
        .office{
          object-fit: cover;
          object-position: center;
          width: 400px;
          height: 600px;
          border-radius: 15px;
          margin-top: 20px;
        }
        .cards2{
          padding-left: 80px;
          margin-top: 1000px;
        }
        .card2-ctrl{
          display: flex;
          flex-direction: column;
          gap: 40px;
        }
        .down-sect{
          height: 400px;
          background-color: #2B2A2A;
          padding-left: 60px;
        }
        .CTA4 {
          background-color: #f3ea21; 
          color: #2B2A2A; 
          border: none; 
          border-radius: 5px; 
          padding: 10px 20px; 
          font-size: 16px; 
          font-weight: bold; 
          cursor: pointer; 
          transition: background-color 0.3s, transform 0.2s; 
          display: inline-flex; 
          align-items: center; 
          margin-top: 60px;
        }
        .malawi{
          width: 400px;
          height: 150px;
          background-color: #f9f9f9;
          border-radius: 15px;
          display: inline-block;
          padding-top: 10px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          margin-left: 80px;
          gap: 20px;
        }





        .office-img{
          object-fit: cover;
          object-position: center;
          width: 400px;
          height: 500px;
          border-radius: 15px;
          margin-left: 20px;
          margin-top: 60px;
        }
        .right-mapped {
          padding-left: 20px; 
          padding-top: 40px; 
          flex-direction: column; 
      }
  
      .fromss {
          width: 100%; 
          height: auto; 
          padding: 20px; 
          border-radius: 10px; 
      }
      .mapp-img{
        object-fit: cover;
        object-position: center;
        width: 150px;
        height: 420px;
        border-radius: 15px;
      }
      .contact-div{
        margin-top: -140px;
        position: absolute;
        margin-left: 80px;
        line-height: 25px;
        margin-left: 20px;
      }
      .ha21{
        color: white;
        font-size: 20px;
        font-family: sans-serif, "roboto";
        font-weight: normal;
        margin-left: 20px;
        margin-top: 40px;
      }




      
      

      .agri-ctrl{
        display: flex;
        gap: 10px;
        flex-direction: column;
        margin-left: 80px;
        margin-top: 60px;
      }
      .cultivator{
        object-fit: cover;
        object-position: center;
        width: 400px;
        height: 400px;
        margin-left: -50px;
        margin-top: 120px;
      }
      .ha10{
        color: rgb(33, 157, 240);
        font-size: 15px;
        font-family: sans-serif, "roboto";
        font-weight: normal;
        margin-top: 80px;
        margin-left: -60px;
      }
      .machines-se{
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-left: -50px;
      }
      .machines-se a{
        color: #ccc;
        font-size: 15px;
        font-family: sans-serif, "roboto";
        font-weight: normal;
        text-decoration: none;
      }
      .ctrlll{
        display: block;
        flex-direction: column;
        gap: 10px;
      }
      .ctrlll1{
        display: flex;
        gap: 10px;
        flex-direction: column;
        padding-top: 60px;
      }
      .card10{
        width: 300px;
        height: 300px;
        background-color: #f1f1e6;
        border-radius: 15px;
        margin-left: -40px;
      }



      .container {
        max-width: 1000px;
        background-color: #2B2A2A;
        padding: 20px;
        border-radius: 12px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        overflow: hidden;
        margin-left: 40px;
        margin-top: 40px;
    }



    .menu-toggle {
      display: block; 
      cursor: pointer;
      font-size: 30px;
      color: #f1f1e6;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 100;
  }

  nav {
      padding-top: 20px;
      padding-left: 0;
  }

  nav ul {
      flex-direction: column;
      gap: 15px;
      position: static;
      display: none; 
      padding: 20px;
      width: 100%;
      align-items: flex-start;
  }

  nav ul.active {
      display: flex; 
  }

nav ul li a{
  text-decoration: none;
  color: #f1f1e6;
  font-size: 15px;
  font-family: sans-serif, "Roboto";
  font-weight: bold;
  background-color: none;
  display: inline-block;
  width: 0px;
  height: 0px;
  padding-top: 5px;
  margin-left: -80px;
  text-align: center;
  border-radius: 8px;
}

nav ul li a:hover {
    color: #f1f1e6; 
    background-color: #ffcc00;
    display: inline-block;
    width: 100px;
    height: 30px;
    border-radius: 8px;
    transition: 0.3s all ease-in;
}


.welled-sect{
  height: 300px;
  background-color: #2B2A2A;
}
     
        }