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

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    object-fit: cover;
    position: relative;
    transition: 0.3s;
    
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.c_purple{
    color: #796FAB;

}
.c_green{
    color: #54baac;
}
.c_yellow{
    color: #E6B422;
}
a{

    text-decoration: none;
    color: gray;
}
img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
button{
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    border: none;
    transition: 0.1s;
    position: relative;
    overflow: hidden;
    text-transform: capitalize;
}
body{
    overflow-x: hidden;
}
header{
    /* height: 66px; */
    display: flex;
    align-items: center;
}
header h1{
    font-size: 53px;
    font-weight: bold;
    padding:20px 0px ;
    


}


button::after{
    content: '';
    
    position: absolute;
    opacity: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    background: #0004;
    transition: 0.1s;
}
.btn3::after{
    content: '';
    
    position: absolute;
    opacity: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    background: #ffffff;
    transition: 0.1s;
}
.btn3:hover p{
    
    color: #282828;
}
.btn3{
    display: grid;
    place-items: center;
    padding:  0 2rem;
}
.btn3 p{
 z-index: 6;
 margin: auto;
}
button:hover::after{
    opacity: 1;
    animation: full;
    animation: .1s;
    width: 105%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes full{
    0%{
        width: 0%;
    }
    50%{
        width: 105%;
    }
    100%{
        width: 100%;
    }
    
}







/* navbar */
nav{
    display: flex;
    align-items: center;
    padding: 0px 4vw !important;
}
.navbar{
    height: 93px;
    font-size: 15px;
}
.nav_btn{
    width: 190px;
    font-size: 15px;
    background: #796FAB;
    color: #ffffff;

}
.btn1{
    
    background: #54baac;
    color: #ffffff;

}
.btn2{
    
    background: #796FAB;
    color: #ffffff;

}
.btn3{
    background: none;
    border: 2px solid #ffffff;
}
.navbar-nav{
    place-items: center;
}
.navbar .nav-link{
    font-size: 14px !important;
}
.nav_btn2{
    width: 122px;
    font-size: 15px;
    color: #54baac;
    background: none;

}
.nav_btn2::after{
    background: #54ba8c2f;
}
.navbar_btn{
    display: flex;
    gap: 20px;
}











/* hero */
.Hero_section{
    height: 100vh;
    overflow: hidden !important;
}
main button{
    font-size: 20px;
    width: 330px;
    height: 80px;

}
.semi button{
    font-size: 20px;
    width: 330px;
    height: 80px;

}
main{
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* place-content: center; */
    padding-top: 4vw ;
    
}
main h1{
    font-size: 53px;
    font-weight: bold;
}
.semi h1{
    font-size: 50px;
    font-weight: bold;
}
.semi .row{
    place-items: center;
}
.main-hero{
    background: #ea3c3607;
    height: 100%;
}
main h1 span{
  
    font-weight: bold;
    color: #E6B422;
}
main p{
    font-size: 20px;
    
}
.semi p{
    font-size: 20px;
    
}
.part1{
    display: flex ;
    flex-direction: column;
    justify-content: center;
    gap: 45px;
    padding: 7vw 0vw 7vw 5vw;
    padding-right: 4vw;
}
.text{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.part2{
   display: flex;
   align-items: center;
    overflow: hidden;
}
.box{
    width: 532px;
    height: 412px;

    position: relative;
    z-index: 2;
    border-radius: 40px;


  
}
.box::before{
    content: '';
    position: absolute !important;
    width: 532px;
    height: 412px;
    right: -140px;

    bottom: -80px;
    z-index: -2;
    background: #ea3c36ab;
    border-radius: 40px;

}










/* work with us */
.wrk_w{
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #54ba8c0a;
    /* justify-content: center; */
    gap: 50px;
    padding: 2vw 5vw;
}
.crd_container{
    display: flex;
    justify-content: center;
    gap: 15px;
    overflow-x: auto;
    justify-content: space-between;

}
.crd{
    width: 280px;
    height: 449px;
    color: #ffffff;
    
    position: relative;
    flex: 0 0 auto;
    border-radius: 20px;
    overflow: hidden;
    /* font-size: 15px; */
}
.crd h3{
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
}
.crd .img{
    height: 229px;
}
.txt_cnt{
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    height: 100% !important;
}
.crd_container .content{
    height: 50% ;
}
.txt_cnt p{
    font-size: 13px !important;
}
.crd button{
    font-size: 15px ;
    color: white;
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 155px;
}
.crd-i{
    background: #796FAB;
}

.crd-ii{
    background: #54BA8C;
}

.crd-iii{
    background: #E6B422;
}

.crd-iv{
    background: #EA3C36;
}











/* projects */
.projects{
    padding: 2vw 5vw;
    transition: 0.3s all;
}
.project img{
 object-fit: cover;
 height: 100%;
 transition: 0.3s all;
}
.projects .row .col{
    
    overflow: hidden !important;
}
.hmy_1{
    overflow: hidden;
    height: 100%;
}
.hmy_2{
    overflow: hidden;
    height: 500px;
}
.hmy_3{
    overflow: hidden;
    height: 250px;
}





/* content */
.myCard{
    padding: 2vw 0vw;
    height: 100%;
    padding: 7rem 0;
    background:#cc9e4211;
    display: grid;
    place-items: center;
    position: relative;

}

.myCard h1{
    font-size: 50px;
    font-weight: bold;
    /* line-height: 50px; */
}
.myCard .go{
    display: flex;
    flex-direction: column;
    gap: 55px !important;
    gap: 0;
    padding-left: 5vw ;
    padding-right: 2vw ;
    
    
}
.myg{
    place-items: center;
}
.content-mng p{
    font-size: 20px;
}
 
.no_padd{
    padding: 0;
    place-items: center;
}

.mybox2{
    width: 630px;
    height: 468px ;
    border-radius: 40px;
    /* position: relative; */
}
.myCard::before{
    content: '';
    position: absolute ;
   top: 3rem;
   bottom: 3rem;
    background: #e6b522ad;
    right: 0;
    left: 60%;
    /* top: 50px; */
    /* z-index: -1; */
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
   
   
   

}


.flat{
   
    position: absolute !important ;
    z-index: -1;
}
.flo1{
    /* display: absolute !important ; */

    width: 40px;
    height: 40px;
    left: 35%;
    top: 18%;
}
.flo2{
    position: absolute;
    object-fit: cover;
    width: 400px;
    height: 101px;
    bottom: 30px;
    transform: translate(100%,20%);
}
.flo3{
    position: absolute;
    object-fit: cover;
    width: 410px;
    height: 151px;
    bottom: 30px;
    left: 30px;
}









/* why choose us */
.why{
    padding:2vw 5vw;
    background: #54ba8c18;

}
.whyImg{
    padding: 10px;
    border-radius: 20px;
    width: 230px;
    height: 166px;
}
.cred_img{
    width: 80px;
    height: 80px;
}
.why1{
 background: #ea3c362c;
}
.why2{
 background: #54baac2c;
}
.why3{
 background: #e6b52241;
}
.why4{
    background: #796fab2c;
}
.cont{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    
}
.cont2{
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    
}
.cont .des{
    display: flex;
    flex-direction: column;
    gap: 23px;
}
.des h3{
    font-size: 35px;
    font-weight: bold;
}
.cont p{
    font-size: 15px;
}
.cred{
    padding-top: 70px;
}
.txt h3{
    font-size: 15px;
    font-weight: bold;
}
.txt p{
    font-size: 12px;
}









/* digital marketing */
.mybox3{
    width: 608px;
    height: 448px;
    
    position: relative;
    z-index: 3 ;
    border-radius: 40px;
}
.mybox3::after{
    content: '';
    width: 141px;
    height: 163px;
    position: absolute;
    top: -30px;
    left: -30px;
    background: #54baac86;

    border-top-left-radius: 40px;
    z-index: -3;

}
.mybox3::before{
    content: '';
    width: 141px;
    height: 163px;
    position: absolute;
    bottom: -30px;
    right: -30px;

    background: #54baac86;
    
 
    border-bottom-right-radius: 40px;

    z-index: -3;

}
.myCard2{
    padding: 4vw 5vw;
    height: 100vh;
    display: grid;
    place-items: center;
}

.go2{
    display:flex ;
    flex-direction: column;
    gap: 45px;
}








/* what client are saying about us */
.wcsau{
    padding: 4vw 5vw;
}
.flx{
    display: flex;
    gap: 15px;
    overflow-x: auto;
    justify-content: space-between;
}
.flx-box{
    flex: 0 0 auto;
}
/* .wcsau header{
    padding: 0vw 6vw;

} */
.img_what{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    overflow: hidden;
}
.what_crd{
    width: 380px;
    height: 398px ;
    padding: 20px;
    background: lightgray;
    position: relative;
    border-radius: 20px;
}
.what_crd .cont{
    grid-template-columns: 1fr 5fr;
    right: 20px;
    left: 20px;
    position: absolute;
    border-top:1px solid black ;
    padding-top: 20px;
    bottom: 0;
}
.flx-box{
    flex: 0 0 auto;
}
.what_crd p{
    font-size: 14px;
}
.txt2 h3{
    font-size: 20px;

}
.txt2 p{
    font-size: 15px;
}
.what1{
 background: #ea3c3613;
}
.what2{
 background: #54baac0e;
}
.what3{
    background: #796fab0c;
}





p{
    font-weight: 300;
}














/* about */
.about{
    display: none;
    padding: 2vw 5vw;
}






.form{
    padding: 2vw 8vw;
    background: rgba(84, 186, 172, 0.31);
    backdrop-filter: blur(10px);
    height: 100%;
    place-items: center;
   
}
.signup .form{
    padding-top: 8.5vw;
}
.form h1{
    font-size: 50px;
}
.form p{
    font-size: 15px;
    
}
.login, .signup{
    height: 100vh;

    
    position: relative;
    /* place-content: center; */
    color: #ffffff;
    background: url('image/study-group-african-people.jpg');
}
.login .navbar, .signup .navbar{
    position: fixed;
    z-index: 30;
    width: 100%;
}
.login{
    height: 100vh;
}
.form button{
    font-size: 15px;
}

.form form{
    gap: 10px;
    height: 100%;
    border:  1px solid white;
}
.login form, .signup form{
    font-size: 13px;
    padding:2vw;
    background: white;
    border-radius: 10px;
    color: black;
    font-weight: 500;
}


.login form span, .signup form span{
    font-size: 10px;
}
.login form center, .signup form center{
    font-size: 10px;
}

.login p label, .signup p label{
    font-size: 15px;
    font-weight: 500;

}
.login h2, .signup h2{
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
    

}
.login h2{
    color: #54BAAC;

}
.login form input, .signup form input{
    width: 100%;
    outline: none;
    border: none;
    background: lightgray;
    border-radius: 5px;
    padding: 10px;
    height: 40px;
    margin-bottom: 10px;
    font-size:15px;
}
.login form input[type=checkbox], .signup form input[type=checkbox]{
   
    height: 19px;
    width: 18px;
    color: white;
    margin: 0;
}
input:checked{
 accent-color: #54baac;
 
}
.flx1{
    display: flex;
}

.RememberMe{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 20px;
}
.login a, .signup a{
    color: #54BA8C;
}

.login .navbar a, .signup .navbar a{
    color: black;

}























.result_box1{
    border-radius: 20px;
    overflow: hidden;
}
.result_box2{
    border-radius: 20px;
    overflow: hidden;
    
}
.result_box2 img{
    object-fit: cover;
}
.boxing{
     background-size: cover;
     background-repeat: no-repeat ;
 /*animation: 20s change infinite ;*/
}
@keyframes change{
    0%{
        background-image: url("image/buggybillions.jpg");
    }
    15%{
        background-image: url("image/trade1.png");
    }
    30%{
        background-image: url("image/projectShow3.png");
    }
    60%{
        background-image: url("image/projectShow4.png");
    }
    75%{
        background-image: url("image/projectShow5.png");
    }
    90%{
        background-image: url("image/projectShow6.png");
    }
    100%{
        background-image: url("image/projectShow7.png");
    }
    
}




















/* footer container */
footer{
    padding:7vw 7vw 2vw;
    background: #282828;
}
footer p{
    color: #ffffff;
    font-size: 20px;
}
hr{
    border:1px solid white;
}
.small-p{
    font-size: 15px;
    color: lightgray;
    padding-top: 10px;
}
.logo_img{
    width: 100px !important;
    padding-bottom: 63px;
}
footer h3{
    font-size: 40px;
    font-weight: bold;
}
.but{
    width: 548px;
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid black;
    overflow: hidden;
    border-radius: 5px;

}
.but input{
    border: none;
    width: 100%;
    height: 100%;
    padding: 20px;
    

}
.location{
    display: flex;
    align-items: center;
    place-items: center;
}
 .locate{
    width: 40px;
    height: 40px;
    
}
.but a{
    position: absolute;
    z-index: 20;
    color: #282828;
    /* left: 0; */
    top: 0;
    bottom: 0;

    right: 0;
    
   
}
.but a button{
    border-radius: none !important;
    width: 156px;
   height: 100%;
   color: #282828;
}

.myflex{
    
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.myflex p{
    font-size: 15px;
    color: rgb(185, 184, 184);
}
footer .col h3{
    padding-bottom: 30px;
}
footer .col li{
    padding-bottom: 16px;
}

.icon {
    font-size: 40px;
}
.icons{
    display: flex;
    gap: 30px;
}
footer .cont2{
    /* grid-template-columns: 1fr 7fr; */
    
    display: flex;
    /* align-items: center !important; */

    /* border:  1px solid white; */

   
}
footer .cul{
    /* border: 1px solid white; */
    display: flex;
    /* align-items: center; */
    height: 100%;
    width: 100%;
    
    /* justify-content: center; */

}
footer .col img{
    width: 40px;
    height: 40px;
} 
/* .locate{
    border:  1px solid white;

} */

























































/* about page hhh */

/* //c-zone */

.c_box{
    height: 528px;
    background: lightgrey;
    border-radius: 20px;
}
.c-zone{
    padding:5vw 8vw;
}
.what_we_do{
    padding:2vw 8vw;

}









/* our team  */
.our_team_container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
}
.our_team_card{
    width: 244px;
    height: 244px;
}
.our_team{
    padding: 3vw 8vw;
}
.OT_crd_img{
    height: 184px;
    background: lightgray;
}
.txt_OurT{
    padding: 1vw 0vw;
}
.txt_OurT h3{
    font-size: 20px;
    font-weight: bold;
}
.txt_OurT p{
    font-size: 20px;
}










/* wants to work with us  */
.wants_to_work{
    padding: 6vw 8vw;
    background: #796fab27;
}
.wants_to_work input{
 width: 100%;
 height: 70px;
 border-radius: 10px;
 border: none;
 padding: 20px;

}
.wants_to_work .myflex{
    gap: 20px;
}
.wants_to_work select{
    height: 70px;
    border-radius: 10px;
    padding: 20px;
}
.about_body{
display: flex;
flex-direction: column;
gap: 30px;
}
.message{
    height: 339px !important;
}
form{
 display: flex;
 flex-direction: column;
 gap: 30px;
}
form input[type=submit]{
    width: 362px;

}
form input[type=checkbox]{
    width: 50px;
    height: 50px;

}

.pro_crd{
    width: 246px;
    height: 164px;
    overflow: hidden;
    border-radius: 10px;

    
}
.pro_crd img{
    height: 100% !important;
}
.ourService{
    padding: 4vw 8vw;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.OurService_crd{
    padding: 3vw;
    border-radius: 20px;
}
.OurService_crd img{
    height: 130px;
   
}













 












/* project page  */

.project_box{
    height: 450px;
    background: #54BAAC;
    border-radius: 20px;
}
.grid_box{
    height: 168px;
    border-radius: 10px;
}


.project{
    padding: 4vw 8vw;
}
.project h2{
    color: #E6B422;
    font-size: 40px;
    padding-bottom: 50px;
   
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.grid_box{
    background: #54baac3f;
    place-items: center;
    display: flex;
    justify-content: space-between;
    padding:2vw ;

}
.arange{
    place-items: center;

    width: 83px;
    
    font-size: 25px;
    padding: 0;
}




.active{
    font-weight: bold;
}



.project_container{
    border-radius: 40px;

    overflow: hidden;
}


.about_project{
    padding: 4vw 8vw;
}
.intro{
    padding: 2vw 8vw;
}
.intro_box{
    height: 540px;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    background: yellow;
}

.proj_box .col{
    height: 219px;

}







/* our service page */

.I-crd{
    background: linear-gradient(#499b76,#54BA8C);
}
.II-crd{
    background: linear-gradient(#CC9F42,#b88e3c);
}
.III-crd{
    background: linear-gradient(#796FAB,#625a88);
}
.Iv-crd{
    background: linear-gradient(#EA3C36,#bd342f);
}



.proProject{
    padding: 4vw 8vw;
}
.semi_box{
    width: 595px;
    height: 438px;
    
}
.semi{
    padding: 9vw 8vw;
}
.result_box1{
    height: 445px;
    flex-shrink: 0;
    border-radius: 20px;
}
.result_box2{
    height: 445px;
}

.theback{
    background: url("image/back.png");
    background-repeat: no-repeat;
    background-size: cover;
}








































































































::-webkit-scrollbar{
 display: none;
}
body::-webkit-scrollbar{
 display: block !important;
 width: 5px;
 background: #54ba8c79;
}
body::-webkit-scrollbar-thumb{
 background: #282828;
 border-radius: 5px;
}














/* /hovers and animation/ */
.hmy1:hover::after{
    content: 'BuggyBillions';
    display: grid;
    place-items: center;
    color: white;
    font-size: xx-large;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: #28282870;
    
    
}
.hmy1:hover img{
    transform: scale(1.2);
    
}
.hmy2:hover::after{
    content: 'Tradevena';
    display: grid;
    place-items: center;
    color: white;
    font-size: xx-large;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: #28282870;
    
    
}
.hmy2:hover img{
    transform: scale(1.2);
    
}
.hmy3:hover::after{
    content: 'Pineleaf';
    display: grid;
    place-items: center;
    color: white;
    font-size: xx-large;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: #28282870;
    
    
}
.hmy3:hover img{
    transform: scale(1.2);
    
}
.hmy4:hover::after{
    content: 'Pineleaf Investment';
    display: grid;
    place-items: center;
    color: white;
    font-size: xx-large;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: #28282870;
    
    
}
.hmy4:hover img{
    transform: scale(1.2);
    
}
.hmy6:hover::after{
    content: 'My result';
    display: grid;
    place-items: center;
    color: white;
    font-size: xx-large;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: #28282870;
    
    
}
.hmy6:hover img{
    transform: scale(1.2);
    
}
.hmy7:hover::after{
    content: 'project 6';
    display: grid;
    place-items: center;
    color: white;
    font-size: xx-large;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: #28282870;
    
    
}
.hmy7:hover img{
    transform: scale(1.2);
    
}
.hmy5:hover::after{
    content: 'project 7';
    display: grid;
    place-items: center;
    color: white;
    font-size: xx-large;
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    background: #28282870;
    
    
}
.hmy5:hover img{
    transform: scale(1.2);
    
}
.hmy8:hover img{
    transform: scale(1.2);
    
}
@media screen and (max-width:990px) and (min-width: 767px) {
        /* .form .part form{
            width: 450px;
            margin: auto;
            
        } */
        .login form, .signup form{
            width: 500px;
            margin: auto;


            font-size: 15px;
            padding:4vw;
            
        }
        .navbar{
            position: fixed !important;
            z-index: 20;
            font-size: 10px !important;
            width: 100%;
        }
        
        #navbarText{
            background: #54baac;
            padding: 4vw;
         
            text-align: center;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            /* width: 100%;
            height: 100%; */
            
        }
        .navbar_btn{
            display: flex;
            justify-content: center;
        }
        .navbar-nav a,.navbar_btn a, #navbarText a{
            color: #ffffff !important;
        }
        .nav_btn2{
           
           
            color: #ffffff;
            background: none;
        
        }
    
        
}
@media screen and (max-width:767px) {
    main button{
        font-size: 20px;
        width: 300px;
        height: 70px;

    }
    .main-hero p{
        font-size: 15px;
    }
    .navbar span{
        color: #ffffff;
    }
    .login form, .signup form{
        font-size: 10px;
        padding:2vw;
        background: white;
        border-radius: 10px;
        color: black;
        font-weight: 500;
    }
    .navbar{
        position: fixed !important;
        z-index: 20;
        font-size: 10px !important;
    }
    .navbar img{
           
            z-index: 30 !important;
        }
    .signup .form{
        padding-top: 6rem;
    }
    .login p label, .signup p label{
        font-size: 10px;
        font-weight: 500;

    }
    
    #navbarText{
        background: #54baac;
        padding: 4vw;
        text-align: center;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        /* width: 100%;
        height: 100%; */
        
    }
    .navbar_btn{
        display: flex;
        justify-content: center;
    }
    .navbar-nav a,.navbar_btn a, #navbarText a{
        color: #ffffff !important;
    }

    /* .form{
        background: white;
    } */
    .form .col{
        border-radius: 10px;
        background: white;
    }
    .login form, .signup form{
       
        margin: auto;


        font-size: 15px;
        padding:4vw;
        
    }
    
    .nav_btn{
        width: 100px;
        font-size: 10px;
        height: 30px;
        background: #796FAB;
        color: #ffffff;
    
    }
    .nav_btn2{
        width: 70px;
        font-size: 10px;
        height: 30px;
        color: #ffffff;
        background: none;
    
    }
}