@import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
@import url('https://fonts.cdnfonts.com/css/poppins');
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Arrows:wght@400..700&family=Parkinsans:wght@300..800&family=Sigmar+One&family=Space+Grotesk:wght@300..700&display=swap');
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,body{
   height: 100vh;
   width: 100vw;
    background-color: rgb(244, 244, 244);
    /*scroll-behavior: smooth;*/
    overflow-x: hidden;
}
 .transition{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 5;
  pointer-events: none; 
 }
  .transition-row{
    flex: 1;
    display: flex;
  }
  .transition-row .row1 .block{
    transform-origin: top;
  }
  .transition-row .row2 .block{
    transform-origin: bottom;
  }
.block{
    flex: 1;
    background-color: #d1dbd9;
    transform: scaleY(1);
    will-change:transform;
    display: flex;
    align-items:end;
    justify-content: center;
    color: #db8f39;
  }
  .block h1{
    font-family: "Space Grotesk", serif;
    font-optical-sizing: 200px;
    font-weight: 500px;
    font-style:normal;
  }
#main{
    height: 100%;
    width: 100%;
 }
#nav{
    height: 10%;
    width: 100%;
    display: flex;
    top: 0;
    left: 0%;
    font-family: "Space Grotesk", serif;
   font-optical-sizing: 200px;
   font-weight: 500px;
   font-style:normal;
   background-color: #f1f0f0a0;
   position: fixed;
   z-index: 3;   
   }
.connect{
  background-color: #20382b;
  color: #8cc9d6;
  padding: 1%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1% 5% 1% 5%;
  text-wrap: nowrap;
 }
 .connect a{
 text-decoration: none;
 font-size: 1vw;
 text-transform: uppercase;
 color: wheat;
 } 

 .connect:hover{
  background-color: #bd8a3e;
  color: rgb(210, 173, 38);
  transition:all ease 0.3s;
 }
 /* #cursor{
     height: 2vw;
     width: 2vw;
     border-radius: 50%;
     background-color: rgb(69, 20, 75);
    
 } */
  #nav img{
    height: 100%;
    width: 25%;
    position: sticky;
  } 
  /* Sidebar base */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    background-color: #eac77c;
    padding-top: 60px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  .sidebar a {
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    display: block;
  }
  .sidebar a:hover {
    background-color: #575757;
  }
  /* Show sidebar */
  .sidebar.open {
    transform: translateX(0);
  }
  /* Toggle button */
  .menu-btn {
    background-color: #1c521f;
    color: white;
    border: none;
    font-size: 24px;
    padding: 5px 10px;
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    display: none;
    border-radius: 50%;
  }
  .imagetoggle{width: 100vw;height: 10%; align-items: center; justify-content: center; display: flex; position: fixed; top: 0;left: 0;z-index: 5;background: #e6e3e3bd;}

  .heroImg{
    width: 100vw;
    height: 90vh;
    display: none;
  }
  /* Show menu button and sidebar only on mobile */
  @media (max-width: 768px) {
    .menu-btn {
      display: block;
    }
    #slider {
      display: none;
    }
    #nav{
        display: none !important;
    }
    .sidebar {
      display: block;
    }
    #slider{
      display: none;
    }
    .heroImg{
      display: block;
    }
  }
 

  /* Hide sidebar and menu button on desktop */
  @media (min-width: 769px) {
    .sidebar {
      display: none !important;
    }
    .menu-btn {
      display: none !important;
    }
    .imagetoggle {
      display: none !important;
    }
    
  }
  #cursor{
     position: fixed;
     height: 2vw;
     width: 2vw;
     border-radius: 50%;
     background-color: rgba(118, 182, 58, 0.527);
     z-index: 1;
     color: black;
     text-align: center;
     font-size: 0.5vw;
     padding-top: 3px;
 }
 .ri-phone-fill{
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 2vw;
     cursor: pointer;
    
 }
 .number{
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.5vw;
     cursor: pointer;
     padding-right: 2vw;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 .other-links i{
     font-size: 2vw;
     cursor: pointer;
     color:rgba(82, 13, 13, 0.991);
 
 }
 .other-links{
     display: flex;
     width: 100vw;
     cursor: pointer;
     padding-right: 2vw;
     align-items: center;
     justify-content: space-between;
 }
 .other-links a{
  text-decoration: none;
  color: #163424;
  letter-spacing: 2px;
  font-size: 1.5vw;
  padding: 2px;
 }
 .other-links a:hover{
  font-size: 2vw;
  color: #61894dad;
 }
 #contact{
     display: flex;
     justify-content:flex-end;
     width: 100vw;
     padding-left: 5vw;
     color: rgb(129, 233, 108);
     font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     font-size: 0.8vw;
 }
 .other-links button{
     border: 0;
     gap: 2%;
 }
 .other-links i:hover{
    font-size: 3vw;
     color: rgb(70, 123, 34);
 }
 .in-links{
     position: fixed;  
     top:12%;
     right:0;
     font-size: 2.5vw;
     z-index: 1;
}
 .in-links a{
     /* color: rgba(193, 128, 49, 0.751);  */
     color: rgb(228, 234, 114);
     text-decoration: none;
     font-family: "Space Grotesk", serif;
   font-optical-sizing: 200px;
   font-weight: 500px;
   font-style:normal;
   
 }
 
 .in-links a:hover{
   color: #bd8a3e;
     font-size: 5vw;
     background: url(https://img.freepik.com/free-vector/sea-blue-waves-world-ocean-day-background_1035-23225.jpg?ga=GA1.1.1759344268.1734938361&semt=ais_hybrid);
         background-size: cover;
     -webkit-text-fill-color:transparent;
     -webkit-background-clip: text;
     animation: animate 60s linear infinite;
 }
 #slider{
     width:100%;
     height:100vh;
     background-color: rgba(194, 224, 113, 0.016);
     overflow: hidden;
     position: relative;
 }
 #slider-images{
     position: relative;
     left:0;
     width:400%;
     animation: 50s slide infinite; 
 }
 #slider h2{
 position: absolute;
 top: 35%;
 z-index: 2;
 left: 20%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #4c4d4d;
 letter-spacing: 5px;
 font-size: 3vw;
 font-weight: 300px;
 }
 .slide {
     position: relative;
     width:25%;
     float: left;
 }
  .slide img{
     width: 100%;
     height: 100%;
 } 
 @keyframes slide{
     0%{
         left:0;
     }
     10%{
         left: -100%;
     } 
     20%{
         left:-100%;
     }
     
     25%{
         left: -100%;
     }
     30%{
         left: -200%;
     }
     40%{
         left:-200%;
     }
     45%{
        left: -200%;
    }
    50%{
        left: -300%;
    }
    60%{
        left: -300%;
    }
    65%{
        left: -300%;
    }
    70%{
        left: -200%;
    }
    80%{
        left: -200%;
    }
    90%{
        left: -100%;
    }
    
    /* 55%{
        left: -300%;
    }
    65%{
        left:-300%;
    }
    70%{
        left: -200%;
    }
    74%{
        left: -200%;
    }
    75%{
      left: -100%;
    }
    85%{
        left: -100%;
    }
   90%{
    left: 0%;
   } */
    
    100%{
        left:0%;
    } 
}
#intro{
  margin: 0;
  background-color: #4daf90dc;
  background: url(./images/EffluentTreatmentPlant.webp);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 3%;
  font-family: "Space Grotesk", serif;
  font-optical-sizing: 200px;
  font-weight: 500px;
  font-style:normal;
  }
#description{
    height:60%;
    width:50%;
    border-radius: 7%;
    margin: 0% 5%;
    box-shadow: 5px 7px rgba(55, 217, 220, 0.251) ;
    justify-content: center;
    align-items: center;
    background-color: rgba(240, 248, 255, 0.562);
    
}
#description h4{
    color: rgb(184, 174, 71);
    padding:10px 0px 0px 20px;

}
#description h1{
   padding:10px 0px 0px 20px;
   font-family: "Space Grotesk", serif;
  font-optical-sizing: 200px;
  font-weight: 500px;
  font-style:normal;
}
#description p{
    padding: 15px;
    color: rgb(61, 46, 54);
    font-size: 1.3vw;
 }
 #description h6{
  height: 5vw;
  width: 10vw;
  background-color: #e1e0dd9a;
  justify-content: center;
  align-items: center;
  font-size: 1.5vw;
  text-align: center;
  margin-left: 35%;
  padding-top: 1vw;
  border-radius: 5px;
  text-shadow: #333;
  text-decoration: none;
 }
 #description h6:hover{
    color: #bd8a3e;
    background: url(https://img.freepik.com/free-vector/sea-blue-waves-world-ocean-day-background_1035-23225.jpg?ga=GA1.1.1759344268.1734938361&semt=ais_hybrid);
    background-size: cover;
    -webkit-text-fill-color:transparent;
    -webkit-background-clip: text;
    animation: animate 60s linear infinite;
}
 .readMore{
    border: none;
    border-radius: 5% 25%;
    width: 10vw;
    height: 3vw;
    background-color: rgba(40, 103, 61, 0.4);
 }
#centerPart{
    display: flex;
    height: 20vh;
    width: 100vw;
    text-align: center;
}
.blocks{ 
    height: 25vw;
    width:25vw;
    background-color: rgba(236, 178, 241, 0.352);
    border: 2px solid rgba(0, 0, 0, 0.158);
    justify-content: center;
    align-items: center;
}
#recan{
    /* scroll-snap-type:mandatory; */
    height: 200vh;
    background: url(./images/WaterTreatmentBG.webp);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 5% 0%;
    /* font-family: "Space Grotesk", serif;
    font-optical-sizing: 200px;
    font-weight: 500px;
    font-style:normal; */
    padding: 5%;
}
.whatIsRecan{
  background-color: rgba(116, 201, 194, 0.507);
    color: rgb(13, 27, 13);
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding: 5%;
    height: 80vh;
    font-size: 2vw;  
    margin: 5%; 
    border-radius: 2%; 
    font-family: "Space Grotesk", serif;
  font-optical-sizing: 200px;
  font-weight: 700px;
  font-style:normal;
}
.whatIsRecan h1{
    background: url(https://img.freepik.com/free-vector/sea-blue-waves-world-ocean-day-background_1035-23225.jpg?ga=GA1.1.1759344268.1734938361&semt=ais_hybrid);
    background-repeat: repeat-x;
    background-size: cover;
    -webkit-text-fill-color:transparent; 
    -webkit-background-clip: text;
    animation: textAnimate 15s linear infinite;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1) ,5px 5px 70px rgba(255, 255, 255, 0.806);
    letter-spacing: 1.5px;
    flex-shrink: 0; 
    padding-right: 25%; 
}
.whatIsRecan p{
  font-size: 1.5vw;
  font-family: "Space Grotesk", serif;
  font-optical-sizing: 200px;
  font-weight: 700px;
  font-style:normal;
}
.whyRecan{
   background-color: rgba(116, 201, 194, 0.507);
   color: black;
   display: flex;
   align-items:center;
   justify-content: space-between;
   flex-direction: row-reverse;
   height: 80vh;
   padding: 5%;
   font-size: 2vw;
   margin: 5%; 
   border-radius: 2%; 
}
.whyRecan h1{
background: url(https://img.freepik.com/free-vector/sea-blue-waves-world-ocean-day-background_1035-23225.jpg?ga=GA1.1.1759344268.1734938361&semt=ais_hybrid);
background-repeat: repeat-x;
background-size: cover;
-webkit-text-fill-color:transparent; 
-webkit-background-clip: text;
animation: textAnimate 15s linear infinite;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1) ,5px 5px 70px rgba(255,255,255,0.5);
letter-spacing: 2px;
flex-shrink: 0; 
padding-left: 25%; 
}
.whyRecan p{
font-size: 1.5vw;
font-family: "Space Grotesk", serif;
font-optical-sizing: 200px;
font-weight: 500px;
font-style:normal;
}
@media  (max-width: 768px) {
.whatIsRecan {
  /* align-items:center; */
    justify-content: center;
    flex-direction:column;
    font-size: 1.7em;
}
.whatIsRecan p{
  font-size: 1rem;
}
.whyRecan {
  /* align-items:center; */
    justify-content: center;
    flex-direction:column;
    font-size: 1.7em;
}
.whyRecan p{
  font-size: 1rem;
}
#intro{
   width: 700px;
}
#description p{
  font-size: 1em;
}
#description h6{
  font-size: 1em;
  text-decoration: none;
}
.marque img{
  width: 150px;
  height: 100px;
}

}

@keyframes textAnimate{
  0%{
    background-position: left 0px top 5px ;
  }
  40%{
    background-position:left 800px  top 4px;
  }
  80%{
    background-position:left 1800px  top 4px;
  }
  100%{
    background-position:left 2400px  top 5px;
  }
}


#productsSpace{
  /* height: 70vh;
  width: 100vw; */
  background-color: #285a49;
  display: flex;
  /* padding-left: 3%;
  letter-spacing: 5px; */
  flex-wrap: wrap;
  gap: 20px;
  
}
#productsSpace h1{
 color: #bd8a3e;
}
.topProducts{
  height: 30vh;
  width: 30vw;
  background-color: wheat ;
  margin: 5%;
  border-radius: 5%; 
  display: flex;
  /* transform: perspective(9cm) rotateX(30deg) rotateY(-50deg); */
  flex: 1 0 200px;
}
.topProducts img{
  border-radius: 5%;
}
#ProductsSlide{
   background-color: #ebdbebbb;
   white-space: nowrap; 
   overflow: hidden;
   height: 70vh;
   margin: 0px 2px 6px 5px;
   animation: animate 25s linear infinite;
}
.ProdS{
    margin: 3%;
    width:25vw;
    height: 80%;
    background-color: #e68f59;
    display:inline-block;
    animation: animate 15s linear infinite;
}
  .redirectProducts h3{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #285a49;
    border-radius: 5%;
    color: #eac793;
    text-decoration: none;
    text-wrap: wrap;
  }

  #move{
    background-color: rgb(127, 204, 220);
    height: 50vh;
    display: flex;
    /* padding: 2vw 1vw; */
    gap: 3vw;
    overflow: hidden;
    width: 500%;
  
  }
  .marque{
    display: flex;
    /* align-items: center; */
    /* position: relative; */
    width:30vw;
    height: 50vh;
   /* mix-blend-mode: screen; */
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-blend-mode:lighten;
  /* mix-blend-mode: multiply; */
  }
  .marque img{
    height: 50vh;
    border-radius:50% 1% 50% 1%;
     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
    background-color: #000000; 
} 
  .gap{
    width: 100vw;
    height: 5vh;
    background: url(./imagesD/flyPapers/file0.png);
    background-size: cover;
    background-repeat: repeat-x;
  }
  .logoBox{
       height:250px;
       margin:auto;
       position:relative;
       width:90%;
       display: grid;
       place-items: center;
       overflow: hidden;
       background-color: rgb(202, 247, 246);
  }
  .slides{
    display:flex;
    width: calc(500px*15);
    animation: scroll 60s linear infinite;
   
  }
  .slide-tracker{
    height:200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding:15px;
    background-color:  rgb(202, 247, 246);
  }
  .slide-tracker img{
    width:100%;
  }
  @keyframes scroll {
    0%{
      transform: translateX(0);

    }
    100%{
      transform: translateX(calc(-400px*10));
    }
    
  }
 
  .logoBox::before,
  .logoBox::after{
    background-color: linear-gradient(to right,rgba(255,255,255,1)0%,rgba(255,255,255,0)100%);
    content: '';
    height:100%;
    position: absolute;
    width: 15%;
    z-index: 5;
  }
  .logoBox::before{
    left: 0;
    right: 0;
  }
  .logoBox::after{
    right: 0;
    top: 0;
    transform: rotateZ(100deg);
  }
  
  /* Products single */
  .ripple-image{
    width: 100vw;
    height: 100vh;
    position: relative;
    background-size: cover;
}
.ripple-image p{
  position:absolute;
   top:50%;
  left:25%; 
  font-size: 5em;
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(253, 255, 255);
  border-radius: 5%;
  background-color: #edc767dc;
  padding: 2%;
}
/* from here */

        

/* body{
    background-color: #D2D2D2;
    background-image:
    repeating-linear-gradient(
        to right, transparent 0 100px,
        #25283b22 100px 101px
    ),
    repeating-linear-gradient(
        to bottom, transparent 0 100px,
        #25283b22 100px 101px
    );
}

body::before{
    position: absolute;
    width: min(1400px, 90vw);
    top: 10%;
    left: 50%;
    height: 90%;
    transform: translateX(-50%);
    content: '';
    background-image: url(images/bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    pointer-events: none;
} */

/* till here */

.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
    background: rgb(218,218,219);
    /* background: linear-gradient(90deg, rgba(218,218,219,1) 0%, rgb(109, 187, 189) 35%, rgba(243,247,247,1) 100%); */
    background: linear-gradient(90deg, rgb(176, 216, 74) 0%,rgb(220, 219, 217) 35%,rgb(74, 174, 181) 100%);
    font-family: "Space Grotesk", serif;
  font-optical-sizing: 200px;
  font-weight: 500px;
  font-style:normal;
}
.banner .slider{
    position: absolute;
    width: 180px;
    height: 200px;
    top: 10%;
    left: calc(50% - 80px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 30s linear infinite;
    z-index: 2;
}
@keyframes autoRun{
    from{
        transform: perspective(1000px) rotateX(-8deg) rotateY(0deg);
    }to{
        transform: perspective(1000px) rotateX(-8deg) rotateY(360deg);
    }
}
.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))translateZ(450px);
        border-radius: 5%;
}
.banner .slider .item img{
    width: 100%;
    height: 70%; 
    object-fit: cover;
}
.banner .content{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 100vw);
    height: max-content;
    padding-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    
}
.banner .content h1{
    /* font-family: 'ICA Rubrik'; */
    /* font-size: 16em; */
    font-size: 100px;
    /* line-height: 1em; */
    font-family: "Space Grotesk", serif;
  font-optical-sizing: 200px;
  font-weight: 500px;
  font-style:normal;
    color: #42869c;
    position: relative;
    padding-left: 5%;
    text-shadow: 0 10px 50px #e7eaeb;
   
}
.banner .content h1::after{
    position: absolute;
    inset: 0 0 0 0;
    content: attr(data-content);
    z-index: 2;
    /* -webkit-text-stroke: 2px #345857; */
    color: transparent;
   
 
}
.banner .content .author{
    font-family: Poppins;
    text-align: right;
    padding-right: 10px;
    max-width: 200px;
    text-align: center;
    /* text-shadow: 0 10px 20px #9e9e9e; */
   
}
.banner .content h2{
    font-size: 2em;
    color: #1f684c;
    font-family: "Space Grotesk", serif;
    font-optical-sizing: 200px;
    font-weight: 500px;
    font-style:normal;

}
.banner .content .model{
    background-image: url();
    width: 100%;
    height: 75vh;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: auto 130%;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 1;
    font-family: "Space Grotesk", serif;
    font-optical-sizing: 200px;
    font-weight: 500px;
    font-style:normal;
}
@media screen and (max-width: 1024px) {
    .banner .slider{
        width: 160px;
        height: 200px;
        left: calc(50% - 80px);
    }
    .banner{
      height:60%;
      width: 100%;
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(300px);
    }
    .banner .content h1{
        text-align: center;
        width: 50%;
        /* text-shadow: 0 10px 20px #9e9e9e; */
        font-size: 7rem;
        padding-left: 20%;
    }
  
    .banner .content .author{
        color: #fff;
        padding: 20px;
        /* text-shadow: 0 10px 20px #9e9e9e; */
        z-index: 2;
        max-width: unset;
        width: 100%;
        text-align: center;
        padding: 0 30px;
       
    }
}
@media screen and (max-width: 767px) {
    .banner .slider{
        width: 100px;
        height: 150px;
        left: calc(50% - 50px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(180px);
    }
    .banner .content h1{
        font-size: 50px;
        text-align: center;
        padding-left: 20%;
    }
    .banner{
      height:70%;
      width: 100%;
    }
}

/* About us css */

#Aheader{
  background: url(./images/home/zld.jpeg);
  height: 90vh;
  width: 100vw;
  text-align: center;
  gap: 10%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  font-size: 2em;
  color: #ffffff;
  box-shadow: 5px rgb(205, 202, 202);
}
@media screen and (max-width: 767px)  {
  .jwv {
    /* align-items:center; */
      justify-content: center;
      flex-direction:column;
      font-size: 1.7em;
  }
  #journey {
    flex-direction: column;
    height: 50px;
    width: 100px;
    font-size: 2px;
    justify-content: center;
  }
  #journey p{
    height: 300px;
    width: 300px;
    font-size: 15px;
  }
  .whatWeDo{
   flex-direction: column-reverse;
  }
  .whatWeDo ul{
    /* flex-direction: column; */
    height: 500px;
    width: 300px;
    font-size: 15px;
    justify-content: center;
  }
  .Values{
    display: flex;
    flex-direction: column;
  }
  .Values ol{
    height: 500px;
    width: 300px;
    font-size: 15px;
    justify-content: center;
  }
  #vmg{
      flex-direction: column;
      height: 50px;
      width: 100px;
      font-size: 4vw;
      justify-content: center;
  }
  #vision{
    /* align-items:center; */
      justify-content: center;
      flex-direction:column;
      font-size: 1em;
      margin:0%;
      padding: 0%;
  }
  #mission{
    /* align-items:center; */
      justify-content: center;
      flex-direction:column;
      font-size: 0.8em;
      margin:0%;
      padding: 0%;
  }
  #goal{
    justify-content: center;
    flex-direction:column;
    font-size: 0.5em;
    margin:0%;
    padding: 0%;
  }
}
.jwv{
  background: url(./images/about/bg.png.webp);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
}
.jwv h1{
  /* background: url(./images/about/aboutgood.webp); */
 
 color: #163424;
 background-color: rgba(250, 247, 247, 0.849);
 padding: 2%;
 border-radius: 5%;
}
#journey{
  height: 50vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
  gap: 5%;
  font-size: 1.3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
 
}
#journey p{
  padding: 5%;
  margin: 5%;
  /* background-color: #258790ac;  */
  background-color: #6ebdd1f1; 
}
.whatWeDo{
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
  font-size: 1.3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  margin: 5%;
}
.whatWeDo ul{
  background-color: #6ebdd1f1;  
  padding: 5%;
  margin: 3%;
}
.Values{
  height: 50vh;
  width: 100vw;
  display: flex;
  align-items:center;
  justify-content: space-between;
  padding: 8%;
  gap: 5%;
  font-size: 1.3rem;
  color: #fff;
}
.Values ol{
 background-color: #6ebdd1f1; 
  padding: 5%;
  margin: 3%;
  
}
.jgGap{
  /* height: 25vh; */
  background-color: #f7f7f8;
}
#vmg{
  height: auto;
  width: 100vw;
  /* background: url(./images/about/AboutUs2.webp); */
  background-color: rgba(245, 222, 179, 0.817);
  background: url(./images/about/bg1.png.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#vmg h1{
  color: #186c32;
  background-color: rgba(250, 247, 247, 0.486);
  padding: 2%;
  border-radius: 5%;
}
#vision{
  height: 50vh;
  width: 50vw;
  display: flex;
  text-align: center;
  align-items: center;
  justify-self: right;
  /* background-color: #4182b3be;  */
  background-color: #6ebdd1f1; 
  color: #ffffff;
  margin: 5% 5% 5% 5%;
}
#vision h1{
  padding: 5%;
}
#mission{
  height: 50vh;
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 25%;
  grid-area: 5%;
  background-color: #6ebdd1f1; 
  color: #ffffff;
}
#mission h1{
  padding: 5%;

}
#goal{
height: auto;
  width: 50vw;
  background-color: #6ebdd1f1; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5%;
  padding: 2%;
  grid-area: 5%;
  gap: 5%;
  font-size: 15px;
  color: #ffffff;
}
#goal h1{
  padding: 5%;
}
.team{
  height: 50vh;
  width: 100vw;
  background-color: #ffffff;
}
.team h1{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}
.team p{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5%;
  font-size: 1.3rem;
}
.persons{
  display: flex;
  width: 100vw;
  height: 50vh;
  align-items: center;
  gap: 5%;
  justify-content: center;
  background-color: white;
}
.person1{
 width: 40%;
 height: 80%;
  background-color: wheat;
  gap: 5%;
}
.person2{
  width: 40%;
  height: 80%;
   background-color: rgb(201, 245, 179);
   gap: 5%;
 }

/*#opinions{*/
/*  height: 50vh;*/
/*  width: 100vw;*/
/*}*/
.quote{
  background-color: white;
  padding: 10%;
  background: url(./images/about/aboutgood.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.quote h1{
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote p{
  margin: 5%;
  background-color: #ffffffd0;
  padding: 5%;
}

/* call to action css */
.cta-container {
  max-width: 600px;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.cta-header {
  background-color: #2e8b57;; /* Sea Green */
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
}
.cta-form {
  padding: 20px;
  background-color: #ffffff;
}
.cta-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #2e8b57;
}
.cta-form input,
.cta-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
.cta-form textarea {
  resize: none;
  height: 100px;
}
.cta-form button {
  background-color: #2e8b57; /* Sea Green */
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.cta-form button:hover {
  background-color: #256b47; /* Darker Sea Green */
}

/* footer start */
footer {
  position: relative;
  /* background-color: #272829db; */
  color: #ffffff;
  padding: 50px 0;
  font-family: Arial, sans-serif;
  background-color: rgb(30, 30, 147);
  background: url(./images/diagonal-striped-brick.png);
}
footer {
  color: #ffffff;
  padding: 20px 0;
  font-family: Arial, sans-serif;
  background: url(./images/diagonal-striped-brick.png);
  background-color: rgb(21, 75, 109);
}
.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-section {
  flex: 1;
  min-width: 200px;
  margin: 10px 20px;
}

.footer-section h4 {
  font-size: 25px;
  margin-bottom: 10px;
  color: rgb(56, 157, 188);
}

.footer-section p,
.footer-section ul {
  font-size: 14px;
  line-height: 1.5;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 8px;
}

.footer-section ul li a {
  color: #ffffff;
  text-decoration: none;
}

.footer-section ul li a:hover {
  text-decoration: underline;
  color: #e68f59;
}

.social-icons a {
  margin-right: 10px;
}

.social-icons img {
  width: 24px;
  height: 24px;
}

.footer-bottom {
  text-align: center;
  font-size: 12px;
  padding-top: 20px;
  border-top: 1px solid #444;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    height: auto;
  }

  .footer-section {
    margin: 10px 0;
  }

  .footer-bottom {
    font-size: 14px;
  }
}
/* footer end */

.net{
  display: flex;
  height: 50%; 
  width:20%;
  border-radius: 50%;
  background-color: #1c521f;
  align-items: center;
  justify-content: center;
}
.net a{
  color: #ffffff;
  font-size: 1.5vw;
  font-family: "Space Grotesk", serif;
  font-optical-sizing: 200px;
  font-weight: 500px;
  font-style:normal;
  text-decoration: none;
}
.net a:hover{
  color: #e68f59;
  background-color: #1c521f;
  text-decoration: none;
  font-size: 2vw;
}

@media (max-width: 768px) {
  .network {
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    height: auto;
  }
  .net {
    width: 90%;
    height: 20%;
    margin: 10px 0;
    font-size: 1.5vw;
  }
  .net a{
    font-size: 20px;
    padding: 5px;
  }
  .network p{
    font-size: 25px;
  }
}