@font-face{
   font-family:'daxlinepro-light' ;
   src: url(Font/daxlinepro-light.ttf);
   }


*{
   margin: 0px;
   padding: 0;
   box-sizing: border-box; 
   font-family:'daxlinepro-light' ;
} 

body{
   overflow-x:  hidden;
   font-family: 'daxlinepro-light';
 }

.aboutcontainer{
width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
justify-content: flex-start;  
background-image: url(./Images/Aboutus.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
} 

header{
width: 100%;
/* padding: 30px 100px; */
display: flex;
justify-content: space-between; 
align-items: center;
background-color: white;
}
   
header .navigation a{
color: #535252;
text-decoration: none;
font-weight: 500; 
/* letter-spacing: 1px; */
/* padding: 2px 15px; */
font-size:18px;
font-family:'daxlinepro-light' ;
/* margin-left: 0%; */
}
   
header .navigation a:not(:last-child){
margin-right: 30px;
/* margin-right: 40px; */
} 

header .navigation a:hover{
color: green;
}

.navigation{
   width: 44%;
}

.hamburger{
   display: none;
}

.check{
   display: none;
}

.logo{
   width: 233.75px;
   height: 85px;
   margin-left: 3%;
   }

.navbutton{
height: 40px;
width: 88px;
left: 0px;
top: 0px;
color:#ffffff;
background-color: #51DD11;
font-style: normal;
font-size: 16px;
font-weight: 700;
padding: 10px 20px;
border-radius: 5px;
border: none;
line-height:22px ;
font-family:'daxlinepro-light';
margin-left: 2%;
}

.navbutton:hover{
background: green;
}

.ourinfocontainer{
width:100%;
display: flex;
justify-content: space-between;
padding: 0 5%;
margin-top: 2%;
padding-right: 5%;

}
.firsttxt{
width: 100%;
font-family:'daxlinepro-light' ;
font-style: normal;
font-weight: 400;
font-size: 20px;
color: #000000;
padding: 10px;
line-height: 41px;
}

.secondtxt{
width: 100%;
font-family:'daxlinepro-light' ;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 41px;
padding: 10px;
color: #000000;
}

.ourinfobtn{
   color:white ;
   background: #51DD11 ;
   text-decoration: none;
   font-weight: 700;
   letter-spacing: 2px;
   padding: 10px 20px; 
   border-radius: 5px;
   margin-left: 3%;
   width: 30%;
   height: 75vh;
}
   
    .ourinfobtn:hover{
       background: green;
    }



.textourinfo{
text-align: center;
font-family:'daxlinepro-light' ;
font-style: normal;
font-weight: 700;
font-size: 40px;
color: #51DD11;
margin-bottom: 8%;
padding: 3%;
}

.imgntxt img{
   width: 100%;
}

.infotxt{
  width: 40%; 
  height: 100vh;
} 

.ourinfodiv{
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-around; 
}

.infotxt h4{
color: #FFFFFF;
font-size: 35px;
}

.imgntxt{
   width: 100%;
   position: absolute;
   top: 1%;
   left:20% ;
}

.innerline{
   border: 4px solid ;
   color: #51DD11;
   width: 100%; 
   height: 95.5vh;
   border-radius: 10px;
   position: absolute;
   bottom: 8%;
   left: 10%;

   
}

.innerlinediv{
width: 40%;
position: relative;
}

.itworks{
background-color:rgba(81, 221, 17, 0.13);
}

.itworkstxt{
width: 50%;
}

.itworks img{
width: 50%;
margin-left: 27%;
margin-top: 10%;
position: relative;
}

.itworkstxt h4{
position: relative;
width: 332px;
height: 60px;
font-family:'daxlinepro-light';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 60px;
color: #383838;
left: 70%;
top: 85px;
}

.itworkstxt p{
width: 362px;
height: 24px;
font-family:'daxlinepro-light';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #383838;
margin-left: 69%;
margin-top: 20%;
}


iframe{
align-items: center;
margin-right: 10%;
position: relative;
bottom: 198px;
left: 51%;
transform: translate(-50%,-50%);
}

 .demolink{
 }


/* footer */

footer{
   background-color:#004A00;
   height: 63vh;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   }
   
   .logoandtext{
   display: flex;
   height: 70%;
   justify-content: space-around;
   align-items: center;
   }
   
   .logoimg img{
   width: 233.75px;
   height: 85px;
   }
   
   .secondlanediv{
   display:flex ;
   height: 70%;
   justify-content: space-between;
   align-items: center;
   width: 73%;
   align-self: flex-end;
   /* margin-top: 5%; */
   }
   
   .footerline{
   height:1px;
   width:100%;
   background-color: white;
   margin: 1% 0;
   }
   
   .logoandtext h4{
   font-family:'daxlinepro-light';
   font-style: normal;
   font-weight: 700;
   font-size: 16px;
   color: #FFFFFF;
   line-height:24px;
   width: 100%;
   height: 24px;
   }
   
   .secondlanediv h4{
   font-family:'daxlinepro-light';
   font-style: normal;
   font-weight: 700;
   font-size: 16px;
   color: #FFFFFF;
   line-height:24px;
   width: 100%;
   height: 24px;
   }
   
   .secondlanediv p{
   width: 251px;
   height: 84px;
   font-family:'daxlinepro-light';
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
   line-height: 150.8%; 
   color: #FFFFFF;
   }
   
   .logoandtext p{
   width: 251px;
   height: 84px;
   font-family:'daxlinepro-light';
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
   line-height: 150.8%; 
   color: #FFFFFF;
   }
   
   .logoimg p{
   margin-left:15%;
   }
   
   /* .lanediv{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 0%;
   } */
   
   .footerheaders{
   width: 31px;
   font-family:'daxlinepro-light';
   font-style: normal;
   font-weight: 700;
   font-size: 16px;
   color: #FFFFFF;
   }
   
   .footerseconddiv{
   background-color: #000000;
   }
   
   .footerarrowup{
   position: absolute;
   right: 7%;
   }
   
   .footerarrowup:hover{
   transform: translateX(-30%);
   transition: all 1s;
   }
   
   .contactlink{
   color: #ffffff;
   }
   
   .facebookdiv,.twitterdiv,.instagramdiv,.pintrestdiv{
   background-color: #51DD11;
   width: 52px;
   height: 52px;
   border-radius: 26px;
   display: flex;
   flex-direction: center;
   align-items: center;
   justify-content: space-around;
   }
   
   .smdiv{
   width: 20%;
   display: flex;
   justify-content: space-around;
   padding: 0%;
   /* margin-right: 5%; */
   } 
   
   .copyrightdiv{
   font-family:'daxlinepro-light';
   font-style: normal;
   font-weight: 500;
   font-size: 14px;
   color: #FFFFFF;
   display: flex;
   align-items: center;
   }
   
   .socialmediadiv{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2%;
   
   } 
   


/* Media Query */ 
/* Media Query */
/* Media Query */

@media screen and (max-width:800px){
   .hamburger {
      display: inline-block;
  }
  .check {
    display: none;
  }
  .hamburger i{
      font-size: 2rem;
      color:black;
      transform: .3s;
  }
  .navigation{
      position:fixed;
      top: 0;
      right: 0;
      bottom: 0;
      /* width: 50%; */
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      color:#ffffff;
      background-color: white;
      /* padding: 2rem ; */
      padding: 0.2rem;
      transform: translateX(100%);
      z-index: 11;
      transition: all .5s;
      margin-top: 4.5rem;

  }

  .navigation a{
   /* margin: 1.5rem; */
   margin: 0.5rem;
   border-bottom:1px solid #51DD11;
   /* padding-bottom:1rem ; */
   padding-bottom: 0.5rem;
}

.navigation a{
   color: var(--white);
   transition: all .3s;

}
.navigation a:hover{
   margin: 1rem;
   background-color: transparent;
   color:#e5e2f9;


}

.navbutton{
   /* align-self: center; */
   margin: 0.5rem;
}

.navigation a::before{
display: none;
}
.navigation::after{
display: none;
}

/* SLIDE MENU WHEN THE HAMBURGER IS CLICKED */
#toggle:checked ~ .navigation {
   transform: translate(0);
}

#toggle:checked ~ .hamburger i {
border: 1px solid black;
padding: .5rem;
border-radius: 5px;
transition: .5s;

}
   .navigation {
       text-align: center;
   }
   a {
       text-align: center;
       margin-left: 1rem;
       font-size: .6rem;
   }

.logo{
   width: 40%;
}

.textforslider{
   display: flex;
   flex-direction: column;
}

.logoandtext{
   display: flex;
   flex-direction: column;
   align-items: flex-start;

}
footer{
   height: auto;
}


.secondlanediv{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
   padding-left: 10%;
}

.abujadiv,.nairobidiv,.contactusdiv,.sierraleonediv{
   margin-top: 9% ;
}

.lagos,.abujadiv,.nairobidiv{
   margin-left: 10%;
}

.smdiv{
   width: 50%;
}

}