*{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
html {
    scroll-behavior: smooth;
}
.nevbar{
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 5;
    display: flex;
    background-color: transparent;
}
.logo a{
    text-decoration: none;
    color: white;
    transition: .3s;
}
.logo a h1{
    margin: 15px 100px;
}
.logo a h1 span{
    color: rgb(1, 161, 1);
}
.menu{
    flex: 1;
    text-align: right;
    margin-top: 28px;
    margin-right: 100px;
}
.menu ul li{
    list-style: none;
    display: inline-block;
}
.menu ul li a{
    text-decoration: none;
    color: white;
    margin-left: 30px;
    font-size: 15px;
    transition: 0.5s;
    font-weight: 500;
    position: relative;
}
.menu ul li a:hover{
    color: rgb(1, 161, 1);
}
.menu ul li a span{
    color: #c3073f;
}
.menuicon{
    margin: auto;
    color: rgba(255, 255, 255, 0.5);
    display: none;
}
.menuicon i span {
    font-weight: 600;
}

/* navbar mobile view */
@media only screen and (max-width : 700px){
    .nevbar{
        background-color: black;
    }
    .logo a h1{
        margin: 15px 12px;
    }
    .menu{
        text-align: right;
        margin-right: 0px;
        position:absolute;
        background-color: black;
        width: 100%;
        top: 49px;
        max-height: 0px;
        overflow: hidden;
        box-shadow: 0px 10px 12px -1px rgb(0 0 0 / 10%);
        transition: .5s;
    }
    .menu ul li{
        list-style: none;
        display: block;
        margin: 25px 40px 35px auto;
    }
    .menu ul li a{
        text-decoration: none;
        color: white;
        margin-left: 0px;
        font-size: 15px;
        transition: 0.5s;
        font-size: 18px;
    }
    .menuicon{
        display: block;
        margin-right: 30px;
        font-size: 20px;
        cursor: pointer;
    }

}

/**************  background cover image  ***************/
.cover {
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.6)) , url('https://source.unsplash.com/1600x900/?donate,charity,child,study');
    z-index: -200; 
    color: white;
}
.cover .information {
    align-items: center;
    max-width: 1000px ;    
    margin: 0 auto;
    padding-top: 10%;
}
.information h3 {
    font-size: 18px;
    letter-spacing: 3px;
    font-weight: 300;
}
.information h3 span {
    float: right;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}
.information h2 {
    font-size: 40px;
}
.information h1 span{
    font-size: 110px;
    line-height: 120px;
    color: rgb(1, 161, 1);
    letter-spacing: 10px;
}
.information a {
    display: block;
    max-width: 350px;
    margin: 0 auto;
}
.information a button{
    padding: 8px 80px;
    cursor: pointer;
    letter-spacing: 5px;
    background: linear-gradient(to right, transparent 50%, rgb(1, 161, 1) 50%);
    background-size: 200%;
    background-position: left;
    transition: .3s;
    border: 2px solid white;
    color: white;
    margin: 40px 0 -50%;
    width: 100%;
}
.information a button:hover {
    background-position: right;
    color: white;
}

@media only screen and (max-width : 700px ){

    .cover .information {
        align-items: center;
        max-width: 1000px ;    
        margin: 0 auto;
        padding-top: 30%;
    }
    .information h3 {
        font-size: 14px;
        letter-spacing: 3px;
        font-weight: 300;
    }
    .information h3 span {
        float: none;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
    }
    .information h2 {
        font-size: 30px;
    }
    .information h1 span{
        font-size: 70px;
        line-height: 120px;
        color: rgb(1, 161, 1);
        letter-spacing: 10px;
    }

}

/* *******************************   About us  **************************************** */
.about{
    width: 100%;
    display: flex;
    background-color:#F8F9FA;
    padding-top: 80px;
}
/* About image */
.about .imgcontanner{
    width: 50%;
    position: relative;
    
}
.about .imgcontanner .aboutimg {
    position: absolute;
    background: url('/images/child.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 350px;
    top: 80px;
    left: 32%;
}

/* about content */
.about .aboutcontent {
    width: 50%;
    padding: 80px 10% 80px 16%;
    color: white;
    background-color: rgb(1, 99, 1);
}
.aboutcontent h5 {
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 10px;
}
.aboutcontent h1 {
    font-weight: 600;
    font-size: 50px;
    padding-bottom: 20px;
}
.aboutcontent p {
    padding-bottom: 30px;
    line-height: 25px;
}

/* donate button  */
.aboutcontent a {
    color: white;
    text-decoration: none;
    background-color: transparent;
    padding: 8px 40px;
    background: linear-gradient(to right, transparent 50%, rgb(1, 161, 1) 50%);
    background-size: 200%;
    background-position: left;
    transition: .3s;
    border: 2px solid white;
    letter-spacing: 2px;
    font-size: 14px;
}
.aboutcontent a:hover {
    background-position: right;
}
@media only screen and (max-width : 700px ) {

    /* *******************************   About us  **************************************** */
    .about{
        width: 100%;
        display: block;
        background-color:#F8F9FA;
        padding-top: 0px;

    }
    /* About image */
    .about .imgcontanner{
        width: 100%;
        padding:3%;
        padding-bottom: 50px;
        box-sizing: border-box;

    }
    .about .imgcontanner .aboutimg {
        position:relative;
        width: 100%;
        height: 450px;
        top: 0px;
        left: 0%;
        display: none;
    }

    /* about content */
    .about .aboutcontent {
        width: 100%;
        padding: 65px 4%;
        box-sizing: border-box;
    }
    .aboutcontent h5 {
        margin-bottom: 10px;
    }
    .aboutcontent h1 {
        font-size: 30px;
    }
}

/* ************************************  Service  ************************** */
.service{
    width: 100%;
    padding: 100px 0;
    background-color: #F8F9FA;
    text-align: center;
    box-sizing: border-box;
}
.service h5{
    color: rgb(1, 99, 1);
    letter-spacing: 2px;
    font-weight: 600;
}
.service h1 {
    font-size: 40px;
    font-weight: 600;
    padding-top: 10px;
}

/* details service */
.service .details {
    width: 75%;
    display: flex;
    margin: 0 auto;
    padding-top: 60px;
}
.details .info {
    padding: 0 15px;
}
.details .info .logo {
    padding: 34px;
    width:45px;
    margin: 0 auto;
    background-color: rgb(1, 161, 1);
    border-radius: 500px;
    color: white;
    font-size: 30px;
}
.details .info #head {
    padding: 20px 0 10px;
    color: black;
    font-weight: 500;
}

@media only screen and (max-width : 700px ) {

    /* ************************************  Service  ************************** */
    .service{
        padding: 70px 0;
    }
    .service h1 {
        font-size: 30px;
    }
    /* details service */
    .service .details {
        width: 100%;
        display: block;
        padding-top: 25px;   
    }
    .details .info {
        padding: 0 15px 25px;
    }
    .details .info .logo {
        padding: 34px;
        width:45px;
    }
}


/* ***************************************  Counter ************************** */
.contercontent {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    background-color:aliceblue;
}
.counterbox {
    width: 100%;
    height: 250px;
}
.contercontent .one {
    background-color: rgb(1, 99, 1);
}
.counterbox .information {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
}
.information .number p {
    font-size: 50px;
    color: rgb(1, 161, 1);
    padding-right: 10px;
}
.information .text p{
    color: rgba(0, 0, 0, 0.7);
    font-size: 20px;
    font-weight: 400;
}


@media only screen and (max-width : 700px ) {

    /* ******************************   Counter  *********************** */
    .contercontent {
        display: block;
    }
    .counterbox {
        height: 150px;
    }

}

/************************************** Contact **********************************************/
.contact {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    padding: 125px 0;
    background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.6)) , url('https://source.unsplash.com/1600x900/?contact,message');
}
.contact h1 {
    color: white;
    text-align: center;
}
.contactcontanner {
    width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.contactcontanner .contanner {
    width: 30%;
}
.contactcontanner .contanner .heading {
    width: 100%;
    display: flex;
    align-items: center;
    border: 2px solid white;
    margin-bottom: 8px;
    box-shadow: 0px 4px 8px rgba(0,0,0,.07);
}
.heading .icon {
    padding: 0 0 0 20px;
    font-size: 20px;
    color: rgb(3, 180, 3);
}
.heading .info {
    width: 70%;
    margin: 25px auto;
    color: white;
}
.heading .info #contactinfo {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* message form */
.messageform {
    width: 70%;
    box-sizing: border-box;
    box-shadow: 0px 4px 8px rgba(0,0,0,.07);
    margin-left: 20px;
    background-color: rgba(0, 0, 0, 0.2);
}
.messageform .form {
    width: 80%;
    margin: 50px auto;
}
.messageform input , .messageform #inputbox {
    width: 100%;
    color: white;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 10px;
    border: 2px solid white;
    outline: none;
    background-color: transparent;
}
.messageform button {
    padding: 10px 50px;
    margin-top: 20px;
    font-size: 14px;
    color: white;
    letter-spacing: 1px;
    background: linear-gradient(to right , transparent 50% , rgb(3, 180, 3) 50%);
    background-size: 200%;
    background-position: left;
    border: 2px solid white;
    cursor: pointer;
    transition: .3s;
}
.messageform button:hover {
    background-position: right;
}

/* contact mobile view */ 
@media only screen and (max-width : 700px) {
    .contact {
        padding: 50px 0;
    }
    .contactcontanner {
        width: 95%;
        display: block;
    }
    .contactcontanner .contanner {
        width: 100%;
    }
    /* message form */
    .messageform {
        width: 100%;
        margin-left: 0px;
        padding: 1px 0;
    }
    .messageform .form {
        width: 93%;
        margin: 50px auto;
    }
}

/****************************** FOOTER **************************/
footer {
    color: rgba(255, 255, 255, 0.8);
    width: 100%;
    box-sizing: border-box;
    background-color: black;
    text-align: center;
    padding: 15px 0;
}
footer p {
    font-size: 14px;
}
footer a{
    text-decoration: none;
    color: rgba(255, 255, 255, 0.8);
}
footer a:hover {
    color: white;
}
footer a strong {
    font-size: 16px;
}

/* mobile view of footer */
@media only screen and (max-width : 700px){
    footer {
        background-color:black ;
        left: 0%;
        transform: translate(-0%);    
        padding: 15px 6%;
    }
}