@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --btnLight: linear-gradient(180deg, #EFAB68 0%, #F48E28 100%);
    --btn: #F48E28;
    --green:#509E2F;
    --bck:#f7f7f7;
    --textWhite:white;
    --black : black;
}
body{
background-color: var(--bck);
font-family: 'Montserrat', sans-serif;
}
a{
    text-decoration: none;
    color: var(--textWhite)
}
li{
    list-style: none;
}
.navcontainer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 40px 10px 50px;
    border-bottom: 2px solid gray;
}

.logocontainer{
    width: 150px;
    height: 40px;
}
.logocontainer img{
    width: 100%;
    height: 100%;
}
.bar{
    display: none;
    background-color: var(--btn);
    padding: 10px;
    border-radius: 50%;
}
.itemscontainer{

}
.itemscontainer ul{
    display: flex;
    text-transform: capitalize;
}
.itemscontainer ul li{
    padding: 10px;
    margin: 0 2px;
    border-radius: 10px;
    text-transform: uppercase;
    position: relative;
}
.itemscontainer ul li a{
font-size: 14px;
font-style: normal;
font-weight: bold;
line-height: normal;
color: black;
margin-right: 5px
}
.navchild{
    display: none;
    position: absolute;
    width: 200px;
    top: 36px;
    left: 0;
    right: 0;
    z-index: 20;
    transition: all 0.5s ease-in-out;
}
.navchild .navItemm{
    display: block;
    width: 100%;
    background-color: green;
}
.navchild .navItemm .items{
   padding: 10px;
   text-align: center;
}
.navchild .navItemm .items:not(:last-child){
    border-bottom: 1px solid var(--btn);
}
.navchild .navItemm .items:hover{
 background-color: var(--bck);
}
.itemscontainer ul li i{
color: var(--green);
}
.itemscontainer ul li:hover{
    background: var(--btn);
}
.getStarted{
    border: 2px solid var(--btn);
    border-radius: 10px;
}
/* ===========nav */
@media(max-width: 1000px){
    .navcontainer {
    padding: 10px 10px 10px 10px;
    }
    .itemscontainer{
        /* display: none; */
       }
       .itemscontainer ul{
        text-align: center;
        padding-top: 20px;
        display: block;
        position: absolute;
        top: 62px;
        left: -100%;
        background-color: var(--green);
        width: 100vw;
        height: 93vh;
        z-index: 20;
        transition: left 0.6s ease-out;
       }
       .itemscontainer ul li {
           padding: 15px 20px;
           font-weight: 500;
       }
       .navchild{
        display: none;
        position: unset;
        width: unset;
        top: 40px;
        left: 0;
        right: 0;
        z-index: 20;
         }
    .navchild .navItemm{
        display: block;
        width: 100%;
        background-color: green;
      }
    .navchild .navItemm .items{
       padding: 10px;
    }
       .itemscontainer ul li:not(.getStarted) {
        border-radius: unset;
       }
       .itemscontainer ul li i{
        color: var(--black);
        }
       .bar{
           display: block;
           background-color: var(--btn);
        padding: 10px;
        border-radius: 50%;
       }  
}
@media(max-width: 668px){
.itemscontainer{
 /* display: none; */
}
.itemscontainer ul{
    text-align: center;
    padding-top: 20px;
    display: block;
    position: absolute;
    top: 62px;
    left: -100%;
    /* left: 0%; */
    background-color: var(--green);
    width: 100vw;
    height: 93vh;
    z-index: 20;
    transition: left 0.6s ease-out;
}
.itemscontainer ul li {
    padding: 15px 20px;
    font-weight: 500;
}
.bar{
    display: block;
    border-radius: 50%;
    padding: 10px;
    background: var(--btn);
}
}
@keyframes nav1{
    from{
        left: -100%;
        }
    to{
        left: 0%;
        }
}
@keyframes nav2{
    from{
        left: 0%;
        }
    to{
        left: -100%;
        }
}

/* ==================== */


/* =========hero section============ */
.herosection{
    position: relative;
    width: 100%;
}

.heroimgcontainer{
position: relative;
overflow: hidden;
width: 100%;
height: 400px;
}

.heroimgcontainer img{
    position: absolute;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}
.heroimgcontainer img:not(.active){
    top: 0px;
    left: -100%;
}
.buttons{

}
.prev, .next{
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #eee;
padding: 14px;
font-size: 24px;
z-index: 10;
cursor: pointer;
user-select: none;
font-weight: bold;
border-radius: 3px;
}
.buttons .prev{
left: 20px;
}
.buttons .next{
right: 20px;
}
.next:hover, .prev:hover{
    background-color: #ede6d6;
    opacity: 0.8;
    color: #222;
}
/* animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: next1; */
/* this remove the image first */
@keyframes next1{
from{
left: 0%;
}
to{
left: -100%;
}
}
/* this come on board second image it to right hand side 100% and 
to lefthand side 0% */
@keyframes next2{
from{
left: 70%;
}
to{
left: 0%;
}
}

@keyframes prev1{
from{
left: 0%;
}
to{
left: 100%;
}
}

@keyframes prev2{
from{
left: -70%;
}
to{
left: 0%;
}
}


/* ===========about section============= */
  .aboutholder{
    display: flex;
    flex-wrap: wrap;
    padding: 40px 20px; 
  }
  .aboutimg{
  border-radius: 10px;
  width: 50%;
  height: 398px;
  margin-left: 20px;
  }
  .abouttext{
  width: 45%;    
  }
  .abouttext .title{
      color: var(--btn);
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 5px;
  }
  .abouttext h2{
  text-transform: capitalize;
  margin-bottom: 20px;
  }
  .abouttext p{
  
  }
  .abouttext .viewbtn{
      margin-top: 50px;
      background-color: var(--btn);
      text-align: center;
      border-radius: 10px;
      padding: 10px;
      width: 150px;
      text-transform: capitalize;
      cursor: pointer;
  }
  .abouttext .viewbtn a{
     color: var(--textWhite);
     font-weight: bold;
     text-transform: uppercase;
  }
  .abouttext .viewbtn a:hover{
     color: var(--black);
     
  }
  .abouttext .viewbtn:hover{
     background-color: var(--textWhite);
     color: var(--black);
     transition: all 0.5s ease-in-out;
  }
  /* ===================abtmedia */
  @media(max-width: 857px){
      .aboutimg{
          flex: 0 0 auto;
          width: 100%;
          margin-left: 0px;
          margin-top: 40px;
      }
      .abouttext{
          flex: 0 0 auto;
          width: 100%; 
      }
      .abouttext .viewbtn a {
          font-weight: bold;
          text-transform: uppercase;
      }
      .abouttext .title {
          font-size: 20px;
      }
      .abouttext p {
          font-size: 18px;
          line-height: 28px;
      }
      .abouttext .viewbtn {
          margin-top: 30px;
      }
      .aboutholder {
          padding: 20px 10px;
      }
  }

    /* ===================investor===================== */
.naira{
    font-size: 18px;
    margin-right: 5px;
}
.spanprice{
    display: flex;
    align-items: center;
    margin-left: 5px;
}
    .investorcontainer{
padding: 0px 10px;
    }
    .investorheader{
    padding-top: 20px;
    }
    .investorheader h2{
    text-transform: uppercase;
    /* font-size: 16px; */
    color: var(--btn);
    }

    .investorflex{
        display: flex;
        flex-wrap: wrap; 
        align-items: center;
        justify-content: center;
        padding: 0px 20px 40px 20px;
    }
    .investoritemcontainer{
    width: 250px;
    /* height: 485px; */
    flex-shrink: 0;
    padding-bottom: 20px;
    margin: 10px 10px;
    border-radius: 15px;
     background: var(--textWhite);
    box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.10);
    }
    .investorimg{
        width: 100%;
        height: 200px;
        border-radius: 10px;
    }
    .investorimg img{
        width: 100%;
        height: 100%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .investorcontent{
    padding-top: 10px;
    }
    .name1{
        padding-left: 10px;
        margin-bottom: 5px;
    }
    .name1 h4{
    text-transform: capitalize;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--btn);
    }
    .price{
     padding-left: 10px;
    }
    .price h6{
     font-weight: bold;
     padding-bottom: 5px;
     font-size: 14px;
     display: flex;
     align-items: center;
    }
    .price span{

    }
    .buynow{
    text-transform: capitalize;
    padding: 8px 2px;
    border-radius: 10px;
    width: 150px;
    margin: 15px auto 0px auto;
    color: var(--textWhite);
    text-align: center;
    background-color: var(--btn);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
@media(max-width: 600px){
    .investoritemcontainer{
        width: 200px;
    }
}
@media(max-width: 500px){
    .investoritemcontainer{
        width: 300px;
    }
}

/* ===========investment============= */
.investmentcontainer{

}
.investmentheader{
padding: 0px 10px;
}
.investmentheader h2{
    text-transform: uppercase;
    /* font-size: 16px; */
    color: var(--btn);
}
.investment{
display: flex;
padding: 20px;
}
.investmentcontent{
width: 50%;
}
.investmentcontent p{

}

.investmentitems{
margin-left: auto;
width: 45%;

}
.investmentitemsflex{

}
.investmentitem{
display: flex;
align-items: center;
margin: 20px;
height: 100px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-left: 4px;
padding-right: 15px;
background-color: var(--green);
}
.investmentimg{
width: 100px;
height: 100%;
}
.investmentimg img{
width: 100%;
height: 100%;
border-top-left-radius: 10px;
}
.investmentitemcontent{
    margin-left: 20px;
    color: white;
    font-weight: bold;
}
.investmentitemcontent p{
text-transform: capitalize;
font-size: 14px;
}
.unitprice{
    display: flex;
    align-items: center;
}
.investmentitemcontent h2{
text-transform: capitalize;
margin: 5px 0px;
font-size: 14px;
color: var(--btn);
}
.investmentitemcontent span{


}
.unitprice{

}
.roi{

}
.right{
    margin-left: auto;
    color: white;
    font-weight: bold;
}
@media(max-width: 920px){
    .investment{
        display: block;
    }
    .investmentcontent{
        width: 100%;
        margin-bottom: 40px;
    }
    .investmentitems{
        width: 100%;
    }
    .investmentitem {
        margin-left: unset;
        margin-right: unset;
      }
}
@media(max-width: 390px){
    .investmentitemcontent {
        margin-left: 10px;
        color: white;
        font-weight: bold;
    }
    .investmentitemcontent p {
        text-transform: capitalize;
        font-size: 13px;
    }
    .investmentitem {
        
        padding-right: 10px;
       
    }
}
 /* ==================app container ===================================== */

.app-container{
    
    /* background-color: rgba(187, 241, 178, 1); */
    width: 100%;
    height: 1043px;
    padding: 20px;   
}
.app-content{
text-align: center;
font-size: 42px;
letter-spacing: 4px;
word-spacing: 2px;
font-weight: 800;
}
.app-content-p{
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
font-weight: bold;
font-style: oblique;
letter-spacing: 2px;
}
.imgs-con{
    display: flex;   
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    margin-top: 90px;

   

}
.android-img{
    width: 567px;
    height: 258px;
    margin-bottom: 100px;
    background-color: black;
    border-radius: 30px;
    
}
.android-img img{
    width: 100%;
    height: 100%;
}
.apple-img{
    width: 567px;
    height: 283px;
    background-color: black;
    border-radius: 30px;
    
}
.apple-img img{
    width: 100%;
    height: 100%;
    border-radius: 30px;
}
.splash-img{
    transform: rotate(
-14deg
);
    /* background-color: rgba(255, 255, 255, 1); */
    width: 485px;
    height: 700px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.splash-img img{
    width: 100%;
    height: 100%;
    border-radius: 30px;
}

/* app media 1298*/
@media (max-width: 1298px){
    .app-content{
        text-align: center;
        font-family: 'Cookie', cursive;
            font-weight: 800;
            font-size: 34px;
            letter-spacing: 4px;
            word-spacing: 2px;
        }
        .app-content-p{
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 14px;
        font-weight: bold;
        font-style: oblique;
        letter-spacing: 2px;
        }
        .app-container{
            /* background-color: rgba(187, 241, 178, 1); */
            width: 100%;
            height: 890px;
            padding: 20px;
            
            
        }
        .imgs-con{
            display: flex;   
        align-items: center;
        justify-content: space-around;
        padding: 10px;
        margin-top: 50px;
    
       
    
    }
     .android-img{
            width: 300px;
            height: 150px;
            background-color: black;
            border-radius: 30px;
        }
        .android-img img{
            width: 100%;
            height: 100%;
        }
        .apple-img{
            width: 300px;
            height: 150px;
            background-color: black;
            border-radius: 30px;
        }
        .apple-img img{
            width: 100%;
            height: 100%;
            border-radius: 30px;
        }
        .splash-img{
            transform: rotate(
        -14deg
        );
            /* background-color: rgba(255, 255, 255, 1); */
            width: 300px;
            height: 600px;
            margin-right: 10px;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .splash-img img{
            width: 100%;
            height: 100%;
            border-radius: 30px;
        }
}
/*app media 604px*/
@media (max-width: 604px){
    .app-content{
          text-align: center;
            font-weight: 800;
            font-size: 34px;
            letter-spacing: 4px;
            word-spacing: 2px;
        }
        .app-content-p{
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        font-style: oblique;
        letter-spacing: 2px;
        }
        .app-container{
            width: 100%;
            height: 1100px;
            padding: 20px;   
        }
        .imgs-con{
           display: flex;
           align-items: center;
           flex-direction: column;
           justify-content: space-around;
        }
        .android-img{
            width: 300px;
            height: 150px;
            margin-bottom:30px;
            background-color: black;
            border-radius: 30px;
        }
        .android-img img{
            width: 100%;
            height: 100%;
        }
        .apple-img{
            width: 300px;
            height: 150px;
            background-color: black;
            border-radius: 30px;
        }
        .apple-img img{
            width: 100%;
            height: 100%;
            border-radius: 30px;
        }
        .splash-img{
            transform: rotate(
        -14deg
        );
            width: 210px;
            height: 400px;
            margin-top: 25px;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .splash-img img{
            width: 100%;
            height: 100%;
            border-radius: 30px;
        }
}

 /* ========================review========== */

 .review-contain{
    background-color: var(--green);
    padding: 5px;
}


.review-head{
    text-align: center;
    font-family: 'Cookie', cursive;
        font-weight: 800;
        font-size: 36px;
        letter-spacing: 10px;
        margin: 10px 0 5px 0;
    }


    .review-head-p{
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 14px;
        color: var(--btn);
        text-transform: capitalize;
        margin: 0;
        font-weight: bold;
        font-style: oblique;
        }
   
.rflex{
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.rcol{
    background-color: rgba(255, 255, 255, 1);
     width: 250px;
     padding: 15px;
     border-radius: 10px;
    margin-bottom: 30px; 
}
.rcontent{
    color: #696969;;
    width: 99%;
    max-height: 90%;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
}

.imgcon{
    background-color: rgba(196, 196, 19, 1);
    border-radius: 500px;
    width: 60px;
    height: 60px;
}
.imgcon img{
    border-radius: 500px;
    width: 100%;
    height: 100%;
}
.imgflex{
    display: flex;
    align-items: center;
}

.r{
    margin-left: 20px;
    text-transform: capitalize;
    color: green;
}
.l{
    text-transform: uppercase;
    margin: 0;
    color: var(--btn);
}      
 /* ================review ending===================== */
 /* ===================gallery============================== */


.main {
    background-color: #f1f1f1;
    font-family: Arial;
   padding-top: 50px;
    padding-bottom: 20px;
  }
  
.main h2 {
    /* font-size: 50px;
    word-break: break-all; */

    margin-left:  15px;
    margin-bottom: 20px;
  }
  
  .row {
    /* margin: 10px -16px; */
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  

  /* Create three equal columns that floats next to each other */
      /* Hide all elements by default */
  .column {
    width: 350px;
    margin-top: 40px;
    
    display: none; 
  }

  .galleryimg{
  width: 100%;
  height:  250px;
  }

  .galleryimg img{
      height: 100%;
      width: 100%;
  }

  /* Content */
  .content {
    background-color: white;
    padding: 10px;
  }
  .content h4{
    text-align: center;
    text-transform: capitalize;
    color: var(--btn);
    margin-bottom: 5px;
  }

  /* The "show" class is added to the filtered elements */
  .show {
    display: block;
    padding: 10px;
    background-color: white;
  }
/* ======================start media query============================== */

  @media(max-width: 400px){
    .column {
      width: 160px;
      margin-top: 40px;
      display: none; 
    }
  
    .galleryimg{
    width: 100%;
    height:  250px;
    }
  
    .galleryimg img{
        height: 100%;
        width: 100%;
    }
  
    /* Content */
    .content {
      background-color: white;
      padding: 10px;
    }
    
    /* The "show" class is added to the filtered elements */
    .show {
      display: block;
      padding: 10px;
      background-color: white;
    }
  }
  

  .btn {
    border: none;
    outline: none;
    margin-left: 30px;
    margin-bottom: 10px;
    padding: 12px 16px;
    background-color: white;
    cursor: pointer;
  }
  
  .btn:hover {
    background-color: #ddd;
  }
  
  .btn.activ {
    background-color: #666;
    color: white;
  }
/* =======================gallery end=============================== */

 /* ======================management profile========================= */
 .mgbody{
    position: relative;
    background-color: gray;
    overflow: hidden;
    }
 .hbody{
        background-color: gray;
    }
.mghero h1{
text-align: center;
font-family: 'Cookie', cursive;
    font-weight: 900;
    font-size: 42px;
    margin-top: 5px;
    margin-bottom: 20px;
    background-image: linear-gradient(
        45deg
         ,rgb(11, 27, 11) 45%,rgba(53, 251, 22, 0.616) 50%);
 -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  text-transform: uppercase;
}
.wrap-mgt .mg{
    display: none;
    text-align: center;
   font-family: 'Cookie', cursive;
   font-weight: 900;
   font-size: 42px;
   margin-top: 10px;
   margin-bottom: 20px;
   background-image: linear-gradient(
       45deg
        ,rgb(11, 27, 11) 45%,rgba(53, 251, 22, 0.616) 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
 text-transform: uppercase;
   }
.sliderow{
    display: flex;
    align-items: center;
    width: 3200px;
    transition: 0.5s;
}
.slidec{
    margin-top: 60px;
    width: 800px;
    height: 400px;
    position: relative;
}
.user-img{
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%; 
}
.user-img img{
height: 100%;
width: 100%;
border-radius:10px ;
}
.user-text{
    background-color: green;
    width: 520px;
    height: 353px;
    position: absolute;
    right: 230px;
    top: 5%;
    transform:rotateY(-50%);
    border-radius: 10px;
    padding: 20px 40px;
    box-sizing: border-box;
    z-index: 2;
}
.name{
    text-transform: capitalize;
    margin-bottom: 20px;
}
.user-text p{
 font-size: 14px;
 line-height: 18px;
}
.title{
    margin: 15px 0 5px;
}
.pos{
    color: var(--btn);
    text-transform: uppercase;
    font-weight: bold;
}
.user-text h3{
    color: #fff;
}

.ccenter{
    width: 800px;
    height: 400px;
    position: relative;
    top: 50%;
    left: 10%;
    /* transform: translateY(-25%, -25%); */
}
.dot-indicator{
   /* position: absolute; */
    /* left: 70%; */
    /* transform: translateX(-50%); */
    /* bottom: -80px; */
    /* margin: 30px auto; */
    margin-top: 30px;
    text-align: center;
}

.radi{
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid black;
    border-radius: 15px;
    margin: 4px;
    cursor: pointer;
transition: 0.5s;
    }
    .active{
        width: 45px;
        background-color: green;
        border-color: green;
    }
    .radi:hover{
        background-color: green;
        border-color: green;
    }
    .test-container{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }



    /* mobile stylying */
.wrap-mgt{
    display: none;
    padding: 20px;
    background-color: lightgray;
}

.flex-row-mgt{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.flex-colum-mgt{
    position: relative;
    border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
    margin: 20px auto;
    width: 340px;
    background-color: whitesmoke;
    height: 920px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 0.2), 0 6px 20px 0 rgb(0 0 0 0.19);
    transition: 0.8s;
}
.img-mgt{
    background-color: var(--btn);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 65%;
   height: 500px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-radius: 10px;   
}
.mgt-container{
    display: flex;
    
}
.img-mgt img{
    width: 100%;
    height: 100%;
}
.background-mgt{
    background-color: green;
    width: 35%;
    height: 100%;
}
.background-mgt p{
    color: green;
}

/* background-color: rgba(171, 237, 160, 1); */

.mgt-cont{
    position: absolute;
    left: 5px;
    padding: 5px;
    background-image: linear-gradient( 
        45deg
         , green 55%,rgba(171, 237, 160, 1) 35%);
    width: 170px;
    z-index: 100;
    top: 10px;
    bottom: 20px;

}
.mgt-cont h2{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-transform: capitalize;
    color: #fff;
}
.mgt-cont p{
    margin-top: 10px;
    color: black;
    font-family: 'Poppins', sans-serif;
}
.mgt-cont h3{
    color: #fff;
}
.post{
    margin-top: 15px;
}
.post h1{
    text-align: center;
    font-family: 'Cookie', cursive;
    font-weight: 900;
    text-transform: uppercase;
}
.post h3{
    color: var(--btn);
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* media */
@media(max-width:350px){
    .flex-colum-mgt{
        position: relative;
        border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
        margin: 20px auto;
        width: 300px;
        background-color: whitesmoke;
        height: 655px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
        transition: 0.8s;
    }
}
/* media */
@media(max-width:330px){
    .flex-colum-mgt{
        position: relative;
        border-bottom-left-radius: 10px;
       border-bottom-right-radius: 10px;
        margin: 20px auto;
        width: 290px;
        background-color: whitesmoke;
        height: 655px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
        transition: 0.8s;
    }

}
@media(max-width: 700px){
    .wrap-mgt{
        display: block;
        overflow: hidden;
    }
    .wrap-mgt .mg{
    
        display: block;
    }
 .mghero{
display: none;
 }
    .mghero h1{
        display: none;
    }
}

 /* =====================end profile============================= */
 /* ============footer==== */
    /*      footer     */
    .footer{
    
        background-color: rgba(51, 51, 51, 1);
        width: 100%;
        padding: 70px 10px 10px 10px; 
    }
    
    .container-footer{
        max-width: 1170px;
        margin: auto;
    }
    
    .container-footer ul{
        list-style-type: none;
    }
    .footer-row{
        display: flex ;
        flex-wrap: wrap;
    }
    .footer-col{
    width: 25%;
    padding: 0 15px;
    }
    
    .footer-col h4{
        font-size: 18px;
        color: white;
        text-transform:capitalize;
        margin-bottom: 30px;
        font-weight: 500;
        position: relative;
    }
    
    .footer-col h4::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        background-image: linear-gradient(
            45deg
            , green 80%,rgba(171, 237, 160, 1) 20%);
        height: 2px;
        box-sizing: border-box;
        width: 50px;
    
    }
    
    .footer-col ul li:not(:last-child){
    
        margin-bottom: 10px;
    }
    
    .footer-col ul li a{
        font-size: 16px;
        text-transform: capitalize;
        text-decoration: none;
        font-weight: 300;
        color: #bbbbbb;
        display: block;
    
    }
    
    .footer-col ul li a:hover{
        color: green;
        padding-left: 8px;
    }
    
    .footer-col .social-links a{
    display: inline-block;
    height: 40px;
    width: 40px;
    text-decoration: none;
    background-image: linear-gradient(
        45deg
        , green 50%,rgba(171, 237, 160, 1) 50%);
    background-color: green;
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 500px;
    color:black;
    transition: all 0.5s ease;
    }
    
    .footer-col .social-links a:hover{
        color: white;
    }
    
    @media(max-width: 767px){
        .footer-col{
            width: 50%;
            margin-bottom: 30px;
        }
    }
    @media(max-width: 574px){
        .footer-col{
            width: 100%;  
        }
    }
    
    .line{
        background-image: linear-gradient(45deg,green 95%, rgba(171, 237, 160, 1) 5%);
        width: 90%;
        padding: 1.2px 0;
        margin: 20px auto 10px auto;
    }
    
    .copyr{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .copyr h4{
        font-size: 16px;
        text-transform: capitalize;
        margin: 10px;
        font-weight: 300;
        color: #bbbbbb;
    }
    
    

 /* ==========end footer========== */

 /* =========about - us ============= */
 /* =========excursion========== */
.wrapall{
    margin-top: 15px;
   padding: 20px;
    }
    .sliddercontainer{
    width: 100%;
    height: 290px;
    border-radius: 10px;
    }
    .sliddercontainer img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    }
    .exheader{
        position: relative;
        padding: 20px 0px;
        text-transform: capitalize;
        font-weight: 600;
        margin-top: 50px;
    }
    .exheader h2{
        color: var(--btn);
    }
    .dot{
        position: absolute;
        top: 10px;
        left: -8px;
        border-radius: 17px;
        padding: 22px;
        background-color: #ffffff;
        z-index: -2;
        border: 2px solid green;
    }
    .excontent{
        margin-bottom: 70px;
    }
    .excontent p{
        margin-bottom: 15px;
        font-size: 18px;
        line-height: 28px;
    }
    .subex{
       margin-bottom: 70px;  
    }
    .subex p{
        margin-bottom: 15px;
        font-size: 18px;
        line-height: 28px;
    }
    .subexheader{
    margin-bottom: 20px;
    }
    .subexheader h4{
        font-size: 20px;
        color: var(--btn);
    }

    /* ===== contact us=========== */

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .top-content{
        position: relative;
        background: rgb(243, 243, 243);
        width: 90%;
        margin: 0 auto 20px auto;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .burger{
        
        display: none;
          width: 60px;
          height: 60px;
          position: relative;
          background-color: rgb(12, 59, 12);
      }
    
    
      @media(max-width:380px){
        .menu.show{
            position: absolute;
            top: 60px;
            left: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            background: green;
        }
    
    }
    
    
    @media(max-width:837px){
        .menu{
            display: none;
        }
    
     .burger{
    display: block;
     }
    
    .menu.show{
        position: absolute;
        top: 60px;
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
        background: green;
    }
    
    }
    
    .contact-section{
        background: url(images/hen.jpg) no-repeat top;
        height: 100%;
        background-size: cover;
        padding: 40px 0;
    }
    
    .contact-section h1{
        margin-top: 80px;
        position: relative;
        text-align: center;
        margin-bottom: 20px;
        color: #ddd;
    }
    .contact-section h2{
        color: white;
    }
     
    .contact-section h1::before{
        content: ' ';
        position: absolute;
        width: 100px;
        margin-bottom: 10px;
        height: 3px;
        background: green;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        animation: animate 4s linear infinite;
    }
    
    @keyframes animate{
     0% {
         width: 100px;
     }  
     
     50% {
         width: 200px;
     }
     100%{
         width: 100px;
     }
    
    }
    
    .contact-form{
        max-width: 800px;
        margin: auto;
        padding: 0 10px;
        overflow: hidden;
    }
    
    .contact-text{
        text-align: center;
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 16px 0;
        border: 0;
        background: #111;
        padding: 20px 40px;
        outline: none;
        color: #ddd;
        transition: 0.5s;
    }
    .contact-text:focus{
        box-shadow: 0 0 10px 4px #34495e;
    }
    
    textarea.contact-text{
    resize: none;
    height: 120px;
    
    }
    
    .contact-btn{
        float: right;
        border: 0;
        background: green;
        text-transform: uppercase;
        color: #fff;
        font-weight: bold;
        padding: 12px 50px;
        border-radius: 20px;
        cursor: pointer;
        transition: 0.5s;
    }
    .contact-btn:hover{
        background: #34495e;
    }
    
/* ======investment=========== */
.table-container{
padding: 10px 20px;
}

.invest-container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 10px;
}

.invest-sub-container{
    position: relative;
    margin-top: 25px;
    box-shadow: 4px 6px 4px rgb(0, 0, 0);
    background-color: rgba(196, 196, 196, 1);
    width: 337px;
    height: 520px;
   
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.img-invest{
    width: 337px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/fish1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.img-invest1{
    width: 337px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/poultry.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.img-invest2{
    width: 337px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/ugwu2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.img-invest3{
    width: 337px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/maize.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.img-invest4{
    width: 337px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/pig2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.img-invest5{
    width: 337px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/rice.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.img-invest6{
    width: 337px;
    height: 260px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url(images/dispatch.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.invest-sub-container h2{
    color: white;
    background-color: rgba(171, 238, 161, 1);
    border-bottom-right-radius: 50px;   
    padding: 6px 32px;
    position: absolute;
    left: 0px;
    top: 0px;
    font-family: Montserrat;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 30;
}
.invest-content{
    color: rgba(0, 0, 0, 1);
    
    width: 100%;
    position: absolute;
    
    top: 280px;
    font-family: Tahoma;
    text-align: center;
    font-size: 17px;
    letter-spacing: 2px;
}
.invest-content .h{
text-align: center;
font-family: Tahoma;
font-size: 24px;
font-weight: bold;
letter-spacing: 5px;
text-transform: uppercase;
display: block;
}
.con-dis{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 20px;
}
.con-dis1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 20px;
}
.color{
    color: rgba(21, 105, 45, 1);
}
.btn-invest{
    position: absolute;
    top: 470px;
    text-align: center;
    width: 100%;

}
.btn-invest a{
    text-decoration: none;
    background-image: linear-gradient(
 45deg
 , rgba(171, 238, 161, 1) 50%, rgba(224, 224, 224, 0.8) 50%);
    color: #F48E28;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: bold;
}

@media (max-width: 410px){
    .invest-sub-container{
        position: relative;
        margin-top: 25px;
        box-shadow: 4px 6px 4px rgb(0, 0, 0);
        background-color: rgba(196, 196, 196, 1);
        width: 300px;
        height: 550px;   
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .img-invest{
        width: 300px;
        height: 260px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(images/fish1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .img-invest1{
        width: 300px;
        height: 260px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(images/poultry.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .img-invest2{
        width: 300px;
        height: 260px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(images/ugwu2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .img-invest3{
        width: 300px;
        height: 260px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(images/maize.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .img-invest4{
        width: 300px;
        height: 260px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(images/pig2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .img-invest5{
        width: 300px;
        height: 260px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(images/rice.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .img-invest6{
        width: 300px;
        height: 260px;
        position: absolute;
        left: 0px;
        top: 0px;
        background-image: url(images/dispatch.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    
    .invest-sub-container h2{
        color: white;
        background-color: rgba(171, 238, 161, 1);
        border-bottom-right-radius: 50px;
        padding: 6px 32px;
        position: absolute;
        left: 0px;
        top: 0px;
        font-family: Montserrat;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 30;
    }
    .invest-content{
        color: rgba(0, 0, 0, 1);
        width: 100%;
        position: absolute;
        top: 280px;
        font-family: Tahoma;
        text-align: center;
        font-size: 17px;
        letter-spacing: 2px;
    }
    
    .invest-content .h{
    text-align: center;
    font-family: Tahoma;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    display: block;
    }
    
    
    .con-dis{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 20px;
    }
    
    .con-dis1{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 20px;
    }
    
    .color{
        color: rgba(21, 105, 45, 1);
    }
    .btn-invest{
        position: absolute;
        top: 500px;
        text-align: center;
        width: 100%;
    }
    .btn-invest a{
        text-decoration: none;
        background-image: linear-gradient(
    45deg
    , rgba(171, 238, 161, 1) 50%, rgba(224, 224, 224, 0.8) 50%);
        color: white;
        border-radius: 50px;
        padding: 15px 20px;
    }

}