*{
    margin: 0;
        padding: 0;
        box-sizing: border-box;
    
    }

    
    
    .nav-parent
    {
        
        display: flex;
        justify-content: space-between;
    

        border-bottom: 1px solid black;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    }
    
    .logo{
        font-family: 'Cookie', cursive;
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 2.5rem;
        text-transform: capitalize;


        padding-left: 0.5rem;
        padding-right: 0.5rem ;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
       
        
    }
    
    .nav-parent a{
        
        align-items: center;
        text-decoration: none;
        color: black;
        margin-right: 30px;
    }
    
    .nav-parent a:hover{
    color: rgb(155, 151, 151);
    }

    .nav-content {
       
       font-weight: bold;
        line-height: 4.0rem
    }


.circle{
    background-color: rgba(33, 150, 83, 1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 770px;
    top: -205px; 
    border-radius: 500px;
}



@media(max-width:1170px){


    .nav-parent
    {
        
        display: flex;
        justify-content: space-between;
    

        border-bottom: 1px solid black;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    }
    
    .logo{
        font-family: 'Cookie', cursive;
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 2.5rem;
        text-transform: capitalize;


        padding-left: 0.5rem;
        padding-right: 0.5rem ;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
       
        
    }
    
    .nav-parent a{
        
        align-items: center;
        text-decoration: none;
        color: black;
        margin-right: 30px;
    }
    
    .nav-parent a:hover{
    color: rgb(155, 151, 151);
    }

    .nav-content {
       
       font-weight: bold;
        line-height: 4.0rem
    }


.circle{
    background-color: rgba(33, 150, 83, 1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 110px;
    top: -205px; 
    border-radius: 500px;
}
}



@media(max-width: 949px){
    .nav-content{
        display: none;
    }
    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 90px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 886px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 70px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 864px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 65px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 854px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 750px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        top: -205px; 
        border-radius: 500px;
    }
}





@media(max-width: 650px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 10px;
        top: -205px; 
        border-radius: 700px;
    }
}

@media(max-width: 600px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        bottom: 305px; 
        border-radius: 300px;
    }
}

@media(max-width: 590px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        top: -270px; 
        border-radius: 700px;
    }
}





.bdy{
    background-color: rgba(99, 211, 103, 1);
    width: 100%;
    height: 1024px;
    position: relative;
    overflow: hidden;
}


/* card of login and signup*/
.log-card{
    background-color: rgba(242, 242, 242, 1);
    width: 440px;
    height: 380px;
    position: absolute;
    left: 100px;
    top: 200px;
    border-radius: 10px;
    padding: 15px;
}


.signup-card{
    background-color: rgba(242, 242, 242, 1);
    width: 440px;
    height: 650px;
    position: absolute;
    left: 100px;
    top: 75px;
    padding: 15px;
    border-radius: 10px;
}

@media(max-width:1150px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 300px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 300px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:770px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 200px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 200px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:670px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 150px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 150px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}

@media(max-width:595px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 100px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 100px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:580px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 350px;
        height: 350px;
        position: absolute;
        left: 140px;
        top: 140px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 320px;
        height: 650px;
        position: absolute;
        left: 170px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }
}


@media(max-width:581px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 300px;
        height: 370px;
        position: absolute;
        left: 90px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 340px;
        height: 650px;
        position: absolute;
        left: 90px;
        top: 80px;
        padding: 1px;
        border-radius: 10px;
    }
    .btn-content {
        font-size: 19px;
        margin: 10px auto;
        text-align: center;
        }
        
        .rbtn-content {
            font-size: 10px;
            margin-top: 2px;
            margin-bottom: 2px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            }
            .tbtn-content {
                font-size: 10px;
                margin-top: 2px;
                margin-bottom: 2px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                }
            }


            @media(max-width:446px){

                .log-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 300px;
                    height: 370px;
                    position: absolute;
                    left: 60px;
                    top: 140px;
                    border-radius: 10px;
                    padding: 10px;
                }
                
                
                .signup-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 340px;
                    height: 650px;
                    position: absolute;
                    left: 60px;
                    top: 80px;
                    padding: 1px;
                    border-radius: 10px;
                }
            }


            @media(max-width:410px){
                   

                .circle{
                    background-color: rgba(33, 150, 83, 1);
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 10px;
                    top: -250px; 
                    border-radius: 700px;
                }


                .log-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 300px;
                    height: 370px;
                    position: absolute;
                    left: 20px;
                    top: 140px;
                    border-radius: 10px;
                    padding: 10px;
                }
                
                
                .signup-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 340px;
                    height: 650px;
                    position: absolute;
                    left: 20px;
                    top: 80px;
                    padding: 1px;
                    border-radius: 10px;
                }
             }

@media(max-width:410px){
.log-card{
       background-color: rgba(242, 242, 242, 1);
       width: 300px;
       height: 390px;
       position: absolute;
       left: 70px;
       top: 120px;
       border-radius: 10px;
       padding: 10px;
   }
   
   
   .signup-card{
       background-color: rgba(242, 242, 242, 1);
       width: 300px;
       height: 650px;
       position: absolute;
       left: 60px;
       top: 80px;
       padding: 1px;
       border-radius: 10px;
   }
   #email , #password, #firstname , #lastname , #phonenumber , #confirmpassword {
       width: 100%;
       border-top: 0;
       border-left: 0;
       border-right: 0;
       margin: 5px 0;
       padding: 10px 0;
       text-align: center;
       outline: none;
       border-bottom: 1px solid black;
       background-color: rgba(242, 242, 242, 1);
   }
   .submit-btn {
       width: 50%;
       padding: 5px 5px;
       border-radius: 35px;
       outline: none;
       text-transform: uppercase;
       font-family: 'Cookie', cursive;
       font-size: 18px;
       font-weight: bold;
       margin: 2px 25%;
       background: linear-gradient(to right, #63D367, #219653 );
       outline: none;
       cursor: pointer;
   }
   
   .btn-content {
   font-size: 14px;
   margin: 5px auto;
   text-align: center;
   }
   
   .rbtn-content {
       font-size: 10px;
       margin-top: 1px;
       margin-bottom: 1px;
       margin-left: auto;
       margin-right: auto;
       text-align: center;
       }
       .tbtn-content {
           font-size: 10px;
           margin-top: 1px;
           margin-bottom: 1px;
           margin-left: auto;
           margin-right: auto;
           text-align: center;
           }
           .click-here {
               margin: 0 0%
               }
               .click-here a{
                   text-decoration: none;
                   color: green;
                   font-size: 18px;
                   font-weight: bold;
                   font-family:  'Roboto Condensed', sans-serif;
               }
                                }


              

                               



  @media(max-width:396)  {
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 210px;
        height: 390px;
        position: absolute;
        left: 30px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 240px;
        height: 650px;
        position: absolute;
        left: 20px;
        top: 80px;
        padding: 1px;
        border-radius: 10px;
    }
  }                            
            


.card-login{
    font-family: 'Cookie', cursive;
    text-transform: uppercase;
    text-align: center;
    font-size: 22px;
    margin: 10px;
}
.forget{
display: flex;
align-items: center;
justify-content: center;

}
.forget a{
text-transform: capitalize;
color: green;


}
#email , #password, #firstname , #lastname , #phonenumber , #confirmpassword {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin: 7px 0;
    padding: 15px 0;
    text-align: center;
    outline: none;
    border-bottom: 1px solid black;
    background-color: rgba(242, 242, 242, 1);
}




.submit-btn {
    width: 50%;
    padding: 10px 10px;
    border-radius: 35px;
    outline: none;
    text-transform: uppercase;
    font-family: 'Cookie', cursive;
    font-size: 24px;
    font-weight: bold;
    margin: 10px 25%;
    background: linear-gradient(to right, #63D367, #219653 );
    outline: none;
    cursor: pointer;
}

.btn-content {
font-size: 19px;
margin: 10px auto;
text-align: center;
}

.rbtn-content {
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    .tbtn-content {
        font-size: 14px;
        margin-top: 3px;
        margin-bottom: 3px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }

.click-here {
margin: 0 39%
}
.click-here a{
    
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: bold;
    font-family:  'Roboto Condensed', sans-serif;
}





 /*      footer     */
 .footer{
    
    position : absolute;
    background-color: rgba(51, 51, 51, 1);
    width: 100%;
    height: 500px;
    left: 0px;
    top: 700px;
    padding: 70px 0; 
}

.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:380px){
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 290px;
        height: 390px;
        position: absolute;
        left: 40px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }

}

.err{
    
}

@media(max-width:338px){
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 250px;
        height: 390px;
        position: absolute;
        left: 40px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
}

@media(max-width: 767px){
    .footer-col{
        width: 50%;
        margin-bottom: 30px;
    }
}
@media(max-width: 574px){
    .footer-col{
        width: 100%;
        
    }
}




*{
    margin: 0;
        padding: 0;
        box-sizing: border-box;
    
    }

    
    
    .nav-parent
    {
        
        display: flex;
        justify-content: space-between;
    

        border-bottom: 1px solid black;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    }
    
    .logo{
        font-family: 'Cookie', cursive;
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 2.5rem;
        text-transform: capitalize;


        padding-left: 0.5rem;
        padding-right: 0.5rem ;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
       
        
    }
    
    .nav-parent a{
        
        align-items: center;
        text-decoration: none;
        color: black;
        margin-right: 30px;
    }
    
    .nav-parent a:hover{
    color: rgb(155, 151, 151);
    }

    .nav-content {
       
       font-weight: bold;
        line-height: 4.0rem
    }


.circle{
    background-color: rgba(33, 150, 83, 1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 770px;
    top: -205px; 
    border-radius: 500px;
}



@media(max-width:1170px){


    .nav-parent
    {
        
        display: flex;
        justify-content: space-between;
    

        border-bottom: 1px solid black;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    }
    
    .logo{
        font-family: 'Cookie', cursive;
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 2.5rem;
        text-transform: capitalize;


        padding-left: 0.5rem;
        padding-right: 0.5rem ;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
       
        
    }
    
    .nav-parent a{
        
        align-items: center;
        text-decoration: none;
        color: black;
        margin-right: 30px;
    }
    
    .nav-parent a:hover{
    color: rgb(155, 151, 151);
    }

    .nav-content {
       
       font-weight: bold;
        line-height: 4.0rem
    }


.circle{
    background-color: rgba(33, 150, 83, 1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 110px;
    top: -205px; 
    border-radius: 500px;
}
}



@media(max-width: 949px){
    .nav-content{
        display: none;
    }
    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 90px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 886px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 70px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 864px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 65px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 854px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 750px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        top: -205px; 
        border-radius: 500px;
    }
}





@media(max-width: 650px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 10px;
        top: -205px; 
        border-radius: 700px;
    }
}

@media(max-width: 600px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        bottom: 305px; 
        border-radius: 300px;
    }
}

@media(max-width: 590px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        top: -270px; 
        border-radius: 700px;
    }
}





.bdy{
    background-color: rgba(99, 211, 103, 1);
    width: 100%;
    height: 1024px;
    position: relative;
    overflow: hidden;
}


/* card of login and signup*/
.log-card{
    background-color: rgba(242, 242, 242, 1);
    width: 440px;
    height: 380px;
    position: absolute;
    left: 100px;
    top: 200px;
    border-radius: 10px;
    padding: 15px;
}


.signup-card{
    background-color: rgba(242, 242, 242, 1);
    width: 440px;
    height: 650px;
    position: absolute;
    left: 100px;
    top: 75px;
    padding: 15px;
    border-radius: 10px;
}

@media(max-width:1150px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 300px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 300px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:770px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 200px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 200px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:670px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 150px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 150px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}

@media(max-width:595px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 100px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 100px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:580px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 350px;
        height: 350px;
        position: absolute;
        left: 140px;
        top: 140px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 320px;
        height: 650px;
        position: absolute;
        left: 170px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }
}


@media(max-width:581px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 300px;
        height: 370px;
        position: absolute;
        left: 90px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 340px;
        height: 650px;
        position: absolute;
        left: 90px;
        top: 80px;
        padding: 1px;
        border-radius: 10px;
    }
    .btn-content {
        font-size: 19px;
        margin: 10px auto;
        text-align: center;
        }
        
        .rbtn-content {
            font-size: 10px;
            margin-top: 2px;
            margin-bottom: 2px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            }
            .tbtn-content {
                font-size: 10px;
                margin-top: 2px;
                margin-bottom: 2px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                }
            }


            @media(max-width:446px){

                .log-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 300px;
                    height: 370px;
                    position: absolute;
                    left: 60px;
                    top: 140px;
                    border-radius: 10px;
                    padding: 10px;
                }
                
                
                .signup-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 340px;
                    height: 650px;
                    position: absolute;
                    left: 60px;
                    top: 80px;
                    padding: 1px;
                    border-radius: 10px;
                }
            }


            @media(max-width:410px){
                   

                .circle{
                    background-color: rgba(33, 150, 83, 1);
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 10px;
                    top: -250px; 
                    border-radius: 700px;
                }


                .log-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 300px;
                    height: 370px;
                    position: absolute;
                    left: 20px;
                    top: 140px;
                    border-radius: 10px;
                    padding: 10px;
                }
                
                
                .signup-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 340px;
                    height: 650px;
                    position: absolute;
                    left: 20px;
                    top: 80px;
                    padding: 1px;
                    border-radius: 10px;
                }
             }

@media(max-width:410px){
.log-card{
       background-color: rgba(242, 242, 242, 1);
       width: 300px;
       height: 390px;
       position: absolute;
       left: 70px;
       top: 120px;
       border-radius: 10px;
       padding: 10px;
   }
   
   
   .signup-card{
       background-color: rgba(242, 242, 242, 1);
       width: 300px;
       height: 650px;
       position: absolute;
       left: 60px;
       top: 80px;
       padding: 1px;
       border-radius: 10px;
   }
   #email , #password, #firstname , #lastname , #phonenumber , #confirmpassword {
       width: 100%;
       border-top: 0;
       border-left: 0;
       border-right: 0;
       margin: 5px 0;
       padding: 10px 0;
       text-align: center;
       outline: none;
       border-bottom: 1px solid black;
       background-color: rgba(242, 242, 242, 1);
   }
   .submit-btn {
       width: 50%;
       padding: 5px 5px;
       border-radius: 35px;
       outline: none;
       text-transform: uppercase;
       font-family: 'Cookie', cursive;
       font-size: 18px;
       font-weight: bold;
       margin: 2px 25%;
       background: linear-gradient(to right, #63D367, #219653 );
       outline: none;
       cursor: pointer;
   }
   
   .btn-content {
   font-size: 14px;
   margin: 5px auto;
   text-align: center;
   }
   
   .rbtn-content {
       font-size: 10px;
       margin-top: 1px;
       margin-bottom: 1px;
       margin-left: auto;
       margin-right: auto;
       text-align: center;
       }
       .tbtn-content {
           font-size: 10px;
           margin-top: 1px;
           margin-bottom: 1px;
           margin-left: auto;
           margin-right: auto;
           text-align: center;
           }
           .click-here {
               margin: 0 0%
               }
               .click-here a{
                   text-decoration: none;
                   color: green;
                   font-size: 18px;
                   font-weight: bold;
                   font-family:  'Roboto Condensed', sans-serif;
               }
                                }


              

                               



  @media(max-width:396)  {
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 210px;
        height: 390px;
        position: absolute;
        left: 30px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 240px;
        height: 650px;
        position: absolute;
        left: 20px;
        top: 80px;
        padding: 1px;
        border-radius: 10px;
    }
  }                            
            


.card-login{
    font-family: 'Cookie', cursive;
    text-transform: uppercase;
    text-align: center;
    font-size: 22px;
    margin: 10px;
}
.forget{
display: flex;
align-items: center;
justify-content: center;

}
.forget a{
text-transform: capitalize;
color: green;


}
#email , #password, #firstname , #lastname , #phonenumber , #confirmpassword {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin: 7px 0;
    padding: 15px 0;
    text-align: center;
    outline: none;
    border-bottom: 1px solid black;
    background-color: rgba(242, 242, 242, 1);
}




.submit-btn {
    width: 50%;
    padding: 10px 10px;
    border-radius: 35px;
    outline: none;
    text-transform: uppercase;
    font-family: 'Cookie', cursive;
    font-size: 24px;
    font-weight: bold;
    margin: 10px 25%;
    background: linear-gradient(to right, #63D367, #219653 );
    outline: none;
    cursor: pointer;
}

.btn-content {
font-size: 19px;
margin: 10px auto;
text-align: center;
}

.rbtn-content {
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    .tbtn-content {
        font-size: 14px;
        margin-top: 3px;
        margin-bottom: 3px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }

.click-here {
margin: 0 39%
}
.click-here a{
    
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: bold;
    font-family:  'Roboto Condensed', sans-serif;
}





 /*      footer     */
 .footer{
    
    position : absolute;
    background-color: rgba(51, 51, 51, 1);
    width: 100%;
    height: 500px;
    left: 0px;
    top: 700px;
    padding: 70px 0; 
}

.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:380px){
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 290px;
        height: 390px;
        position: absolute;
        left: 40px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }

}

.err{
    
}

@media(max-width:338px){
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 250px;
        height: 390px;
        position: absolute;
        left: 40px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
}

@media(max-width: 767px){
    .footer-col{
        width: 50%;
        margin-bottom: 30px;
    }
}
@media(max-width: 574px){
    .footer-col{
        width: 100%;
        
    }
}




*{
    margin: 0;
        padding: 0;
        box-sizing: border-box;
    
    }

    
    
    .nav-parent
    {
        
        display: flex;
        justify-content: space-between;
    

        border-bottom: 1px solid black;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    }
    
    .logo{
        font-family: 'Cookie', cursive;
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 2.5rem;
        text-transform: capitalize;


        padding-left: 0.5rem;
        padding-right: 0.5rem ;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
       
        
    }
    
    .nav-parent a{
        
        align-items: center;
        text-decoration: none;
        color: black;
        margin-right: 30px;
    }
    
    .nav-parent a:hover{
    color: rgb(155, 151, 151);
    }

    .nav-content {
       
       font-weight: bold;
        line-height: 4.0rem
    }


.circle{
    background-color: rgba(33, 150, 83, 1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 770px;
    top: -205px; 
    border-radius: 500px;
}



@media(max-width:1170px){


    .nav-parent
    {
        
        display: flex;
        justify-content: space-between;
    

        border-bottom: 1px solid black;
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    }
    
    .logo{
        font-family: 'Cookie', cursive;
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 2.5rem;
        text-transform: capitalize;


        padding-left: 0.5rem;
        padding-right: 0.5rem ;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
       
        
    }
    
    .nav-parent a{
        
        align-items: center;
        text-decoration: none;
        color: black;
        margin-right: 30px;
    }
    
    .nav-parent a:hover{
    color: rgb(155, 151, 151);
    }

    .nav-content {
       
       font-weight: bold;
        line-height: 4.0rem
    }


.circle{
    background-color: rgba(33, 150, 83, 1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 110px;
    top: -205px; 
    border-radius: 500px;
}
}



@media(max-width: 949px){
    .nav-content{
        display: none;
    }
    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 90px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 886px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 70px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 864px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 65px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 854px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 50px;
        top: -205px; 
        border-radius: 500px;
    }
}

@media(max-width: 750px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        top: -205px; 
        border-radius: 500px;
    }
}





@media(max-width: 650px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 10px;
        top: -205px; 
        border-radius: 700px;
    }
}

@media(max-width: 600px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        bottom: 305px; 
        border-radius: 300px;
    }
}

@media(max-width: 590px){

    .circle{
        background-color: rgba(33, 150, 83, 1);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 40px;
        top: -270px; 
        border-radius: 700px;
    }
}





.bdy{
    background-color: rgba(99, 211, 103, 1);
    width: 100%;
    height: 1024px;
    position: relative;
    overflow: hidden;
}


/* card of login and signup*/
.log-card{
    background-color: rgba(242, 242, 242, 1);
    width: 440px;
    height: 380px;
    position: absolute;
    left: 100px;
    top: 200px;
    border-radius: 10px;
    padding: 15px;
}


.signup-card{
    background-color: rgba(242, 242, 242, 1);
    width: 440px;
    height: 650px;
    position: absolute;
    left: 100px;
    top: 75px;
    padding: 15px;
    border-radius: 10px;
}

@media(max-width:1150px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 300px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 300px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:770px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 200px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 200px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:670px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 150px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 150px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}

@media(max-width:595px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 350px;
        position: absolute;
        left: 100px;
        top: 200px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 440px;
        height: 650px;
        position: absolute;
        left: 100px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }

}


@media(max-width:580px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 350px;
        height: 350px;
        position: absolute;
        left: 140px;
        top: 140px;
        border-radius: 10px;
        padding: 15px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 320px;
        height: 650px;
        position: absolute;
        left: 170px;
        top: 80px;
        padding: 15px;
        border-radius: 10px;
    }
}


@media(max-width:581px){

    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 300px;
        height: 370px;
        position: absolute;
        left: 90px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 340px;
        height: 650px;
        position: absolute;
        left: 90px;
        top: 80px;
        padding: 1px;
        border-radius: 10px;
    }
    .btn-content {
        font-size: 19px;
        margin: 10px auto;
        text-align: center;
        }
        
        .rbtn-content {
            font-size: 10px;
            margin-top: 2px;
            margin-bottom: 2px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            }
            .tbtn-content {
                font-size: 10px;
                margin-top: 2px;
                margin-bottom: 2px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                }
            }


            @media(max-width:446px){

                .log-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 300px;
                    height: 370px;
                    position: absolute;
                    left: 60px;
                    top: 140px;
                    border-radius: 10px;
                    padding: 10px;
                }
                
                
                .signup-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 340px;
                    height: 650px;
                    position: absolute;
                    left: 60px;
                    top: 80px;
                    padding: 1px;
                    border-radius: 10px;
                }
            }


            @media(max-width:410px){
                   

                .circle{
                    background-color: rgba(33, 150, 83, 1);
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 10px;
                    top: -250px; 
                    border-radius: 700px;
                }


                .log-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 300px;
                    height: 370px;
                    position: absolute;
                    left: 20px;
                    top: 140px;
                    border-radius: 10px;
                    padding: 10px;
                }
                
                
                .signup-card{
                    background-color: rgba(242, 242, 242, 1);
                    width: 340px;
                    height: 650px;
                    position: absolute;
                    left: 20px;
                    top: 80px;
                    padding: 1px;
                    border-radius: 10px;
                }
             }

@media(max-width:410px){
.log-card{
       background-color: rgba(242, 242, 242, 1);
       width: 300px;
       height: 390px;
       position: absolute;
       left: 70px;
       top: 120px;
       border-radius: 10px;
       padding: 10px;
   }
   
   
   .signup-card{
       background-color: rgba(242, 242, 242, 1);
       width: 300px;
       height: 650px;
       position: absolute;
       left: 60px;
       top: 80px;
       padding: 1px;
       border-radius: 10px;
   }
   #email , #password, #firstname , #lastname , #phonenumber , #confirmpassword {
       width: 100%;
       border-top: 0;
       border-left: 0;
       border-right: 0;
       margin: 5px 0;
       padding: 10px 0;
       text-align: center;
       outline: none;
       border-bottom: 1px solid black;
       background-color: rgba(242, 242, 242, 1);
   }
   .submit-btn {
       width: 50%;
       padding: 5px 5px;
       border-radius: 35px;
       outline: none;
       text-transform: uppercase;
       font-family: 'Cookie', cursive;
       font-size: 18px;
       font-weight: bold;
       margin: 2px 25%;
       background: linear-gradient(to right, #63D367, #219653 );
       outline: none;
       cursor: pointer;
   }
   
   .btn-content {
   font-size: 14px;
   margin: 5px auto;
   text-align: center;
   }
   
   .rbtn-content {
       font-size: 10px;
       margin-top: 1px;
       margin-bottom: 1px;
       margin-left: auto;
       margin-right: auto;
       text-align: center;
       }
       .tbtn-content {
           font-size: 10px;
           margin-top: 1px;
           margin-bottom: 1px;
           margin-left: auto;
           margin-right: auto;
           text-align: center;
           }
           .click-here {
               margin: 0 0%
               }
               .click-here a{
                   text-decoration: none;
                   color: green;
                   font-size: 18px;
                   font-weight: bold;
                   font-family:  'Roboto Condensed', sans-serif;
               }
                                }


              

                               



  @media(max-width:396)  {
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 210px;
        height: 390px;
        position: absolute;
        left: 30px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
    
    
    .signup-card{
        background-color: rgba(242, 242, 242, 1);
        width: 240px;
        height: 650px;
        position: absolute;
        left: 20px;
        top: 80px;
        padding: 1px;
        border-radius: 10px;
    }
  }                            
            


.card-login{
    font-family: 'Cookie', cursive;
    text-transform: uppercase;
    text-align: center;
    font-size: 22px;
    margin: 10px;
}
.forget{
display: flex;
align-items: center;
justify-content: center;

}
.forget a{
text-transform: capitalize;
color: green;


}
#email , #password, #firstname , #lastname , #phonenumber , #confirmpassword {
    width: 100%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    margin: 7px 0;
    padding: 15px 0;
    text-align: center;
    outline: none;
    border-bottom: 1px solid black;
    background-color: rgba(242, 242, 242, 1);
}




.submit-btn {
    width: 50%;
    padding: 10px 10px;
    border-radius: 35px;
    outline: none;
    text-transform: uppercase;
    font-family: 'Cookie', cursive;
    font-size: 24px;
    font-weight: bold;
    margin: 10px 25%;
    background: linear-gradient(to right, #63D367, #219653 );
    outline: none;
    cursor: pointer;
}

.btn-content {
font-size: 19px;
margin: 10px auto;
text-align: center;
}

.rbtn-content {
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    .tbtn-content {
        font-size: 14px;
        margin-top: 3px;
        margin-bottom: 3px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        }

.click-here {
margin: 0 39%
}
.click-here a{
    
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: bold;
    font-family:  'Roboto Condensed', sans-serif;
}





 /*      footer     */
 .footer{
    
    position : absolute;
    background-color: rgba(51, 51, 51, 1);
    width: 100%;
    height: 500px;
    left: 0px;
    top: 700px;
    padding: 70px 0; 
}

.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:380px){
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 290px;
        height: 390px;
        position: absolute;
        left: 40px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }

}

.err{
    
}

@media(max-width:338px){
    .log-card{
        background-color: rgba(242, 242, 242, 1);
        width: 250px;
        height: 390px;
        position: absolute;
        left: 40px;
        top: 140px;
        border-radius: 10px;
        padding: 10px;
    }
}

@media(max-width: 767px){
    .footer-col{
        width: 50%;
        margin-bottom: 30px;
    }
}
@media(max-width: 574px){
    .footer-col{
        width: 100%;
        
    }
}