*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* reusuable code */
body{
font-size: 16px!important;
font-family: 'Inter', sans-serif!important;
}
body a{
text-decoration: none!important;
}
:root{
--main:#ff944d ;
--secondmain: #fff8e7;
--black: black;
--gray: gray;
--lightgray: lightgray;
--white: white;
}
.goog-te-combo {
background-color: var(--white);
border: none;
padding: 7px;
margin-top: -2%!important;
}
/* navbar part start */
.whatsapp{
height: 60px;
width: 60px;
position: fixed;
top: 80%;
left: 94%;
z-index: 1;
background-color: var(--white);
box-shadow: 3px 3px 5px #111;
border-radius: 50%;
cursor: pointer;
}
.whatsapp img{
margin-left: -10px!important;
margin-top: -9%!important;
}
.goto{
display: none;
position: fixed;
top: 92%;
left: 94.8%;
z-index: 1; 
height: 40px;
width: 40px;
border-radius: 50%;
text-align: center;
padding-top: 7px;
color: var(--white)!important;
background-color: var(--main);
}
.first{
background-color: var(--black);
color: var(--white);
height: 34px;
padding-top: 5px;
}
.donate{
padding: 5px 12px;
padding-right: 12px!important;
background-color: var(--main);
}
.first a{
color: var(--white);
}
.fa-facebook,.fa-instagram,.fa-twitter,.fa-youtube-play{
padding-right: 10px;
}
.first-one{
text-align: right;
}
.logo{
height: 75px;
width: 75px;
border-radius: 50%;
}
.nav-link{
font-size: 13px!important;
}
.nav-item{
padding-right: 15px!important;
}
.nav-item:last-child{
padding-right: 0px!important;
}
nav{
height: 80px;
}
.dropdown-menu{
border-radius: 0%!important;
font-size: 14.5px!important;
text-align: center!important;
}
.dropdown:hover .dropdown-menu{
display: block;
}
.dropdown-item:hover{
background-color: transparent!important;
color: var(--main)!important;
}
/* index page start */
.main{
background: linear-gradient(to right,rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/24.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 650px;
}
.fariyadi{
background: rgba(255, 255, 255, 0.3);
padding: 6px 25px;
width: 51%;
text-align: center;
}
.main_color{
color: var(--main);
}
.gap{
margin-top: 4%!important;
}
.let{
margin-top: 6%!important;
}
.workone{
margin-top: 8%;
}
.workthree{
background-color: var(--secondmain)!important;
border-radius: 0%!important;
border: none!important;
box-shadow: 5px 5px 8px var(--lightgray);
}
.workfour{
height: 50px;
width: 50px;
background-color: var(--main);
color: var(--white);
border-radius: 50%;
padding-top: 12px;
position: absolute;
margin-top: -9%;
margin-left: 40%;
}
.memberone{
text-align: right!important;
}
.membertwo{
background-color: var(--secondmain);
padding-top: 3%;
padding-bottom: 3%;
}
.memberimg{
height: 230px!important;
width: 230px!important;
border-radius: 50%;
margin-top: 7%;
margin-bottom: 7%;
}
.memberimg-one{
background-color: #1753cf;
}
.mission{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/16.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
padding-top: 3%;
padding-bottom: 3%;
}
.fa-bullseye,.fa-eye{
color: var(--main);
margin-bottom: 5%;
}
.fa-diamond{
color: var(--main);
margin-bottom: 6%;
margin-top: 4.2%;
}
.missionone{
border: 1px dashed var(--main);
border-left: none;
border-top: none;
border-bottom: none;
}
.justify{
text-align: justify;
}
.do{
background-color: #333;
color: var(--white);
padding-top: 4%;
padding-bottom: 4%;
}
.box{
border: 1px solid var(--main);
padding-left: 50px!important;
padding-right: 50px!important;
padding-top: 30px;
padding-bottom: 10px;
border-top: none;
border-left: none;
}
.boxone{
border: 1px solid var(--main);
padding-left: 50px!important;
padding-right: 50px!important;
padding-top: 30px;
padding-bottom: 10px;
border-top: none;
border-right: none;
}
.boxtwo{
border: 1px solid var(--main);
padding-left: 50px!important;
padding-right: 50px!important;
padding-top: 30px;
padding-bottom: 10px;
border-bottom: none;
border-left: none;
}
.boxthree{
border: 1px solid var(--main);
padding-left: 50px!important;
padding-right: 50px!important;
padding-top: 30px;
padding-bottom: 10px;
border-bottom: none;
border-right: none;
}
.poor{
background: linear-gradient(to right,rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.7) 50%),url('images/20.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: right;
color: var(--white);
padding-top: 6%;
padding-bottom: 6%;
margin-top: 0.2%;
}
.poorone{
color: var(--main);
margin-bottom: 4%;
}
.maincolor{
color: var(--main);
}
.endtext{
text-align: right;
}
.testimonial{
background: #f1f1f1;
padding: 50px 0px;
}
.triangledown{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid var(--main);
}
.short{
color: var(--black);
font-size: 20px;
margin-top: 150%!important;
}
.long{
color: var(--black)!important;
font-size: 20px;
margin-top: 150%!important;
}
.tdown{
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-one{
background-color: var(--white);
padding: 50px;
}
.fa-quote-right{
font-size: 20px!important;
color: var(--main);
}

/* footer part start */
footer a{
color: white;
font-size: 14px;
}
footer h5{
color: var(--main);
font-size: 17px;
}
.footer p{
color: white;
font-size: 14px;	
}
.footer{
background: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)),url('images/footer.jpg');
background-size: cover;
background-repeat: no-repeat;
padding: 10px;
}
.footer_row{
border-bottom: 1px dotted white;
}
.footer_sideline{
margin-left: 0.7%;
}
.footer_icons{
text-align: right;
}
.footer_icons a{
padding-left: 8px;
}
.ff{
height: 28px;
width: 28px;
border-radius: 50%;
background-color: #3b5998;
color: var(--white)!important;
padding-top: 7px;
}
.tt{
height: 28px;
width: 28px;
border-radius: 50%;
background-color: #00acee;
color: var(--white)!important;
padding-top: 7px;
padding-left: 8px;
}
.ii{
height: 28px;
width: 28px;
border-radius: 50%;
background-color: red;
color: var(--white)!important;
padding-top: 7px;
padding-left: 8px;
}
.representone{
padding-left: 30px!important;
}
.small{
margin-top: -3%;
}
/* about page start */
.aboutpage{
background: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding-top: 7%;
padding-bottom: 6%;
color: var(--white);
text-align: center;
}
.aboutpage a{
color: var(--white);
}
.read-more{
background-color: var(--main);
padding: 9px 22px;
color: var(--white);
}
.aboutpageone{
color: var(--lightgray);
}
.zeroone,.zerotwo{
height: 45px;
width: 45px;
background-color: var(--main);
padding: 10px;
padding-left: 15px;
border-bottom-right-radius: 65%;
color: var(--white);
}
.zeroone:after{
position: absolute;
content: "";
height: 85px;
width: 2px;
background-color: var(--main);
margin-top: 20px;
margin-left: -32px;
}
.zeroone:before{
position: absolute;
border-top: 10px solid var(--main);
content: "";
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin-top: 101px;
margin-left: -19px;
}
.zerotwo:after{
position: absolute;
content: "";
height: 85px;
width: 2px;
background-color: var(--main);
margin-top: 20px;
margin-left: -34px;
}
.zerotwo:before{
position: absolute;
border-top: 10px solid var(--main);
content: "";
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin-top: 101px;
margin-left: -19px;
}
/* education part start */
.gaps{
margin-top: 2%;
}
.count{
background-color: #222;
color: var(--white);
padding-top: 3%;
padding-bottom: 3%;
}
/* gallery part start */
.gallery{
row-gap: 25px;
}
/* contact part start */
.form{
border: 1px solid var(--main);
background-color: var(--main);
padding: 15px;
}
input:focus{
outline: none!important;
}
.form input{
border-radius: 0%;
}
.form-group{
margin-top: 4%;
}
::placeholder{
font-size: 14px;
}
.formone{
background: linear-gradient( to right,var(--main),var(--secondmain));
border: none!important;
}
.tik{
margin-top: 5%!important;
}

/* donate part start */
.contact_box{
border: 1px solid var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding-left: 20px;
padding-top: 30px;
padding-bottom: 30px;
}

/* admin area start */
.dashboard{
background-color: var(--main);
padding-top: 10px;
}
.dashboardone{
background-color: var(--black);
height: 595px;
}
.dashboardtwo{
background-color: var(--white);
padding: 8px;
margin-top: 4%;
}
.dashboardtwo a{
color: var(--black);
}
.edit{
font-size: 20px!important;
color: blue!important;
}
.fa-trash-o{
color: red!important;
font-size: 20px!important;
}
.trash-one{
background-color: transparent;
border: none;
}
.login{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/sky.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 643px;
}
.loginone{
background: rgba(255, 255, 255, 0.2);
padding: 30px 10px;
margin-top: 15%!important;
}
.logintwo{
background: linear-gradient(to right,var(--main),orange);
border: none!important;
border-radius: 0%!important;
width: 30%!important;
margin-left: 35%;
}
.loginfour{
border-radius: 0%!important;
width: 85%!important;
margin-left: 12.4%!important;
}
.vel{
position: absolute;
background-color: var(--main);
padding: 11px;
margin-left: 10px;
}
.fa-unlock-alt{
position: absolute;
background-color: var(--main);
padding: 11px 13.5px;
margin-left: 11.2px;	
}
form{
margin-top: 8%;
}
.mr{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 25px;
padding-top: 35px;
margin-top: 8%;
}
.mrs{
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 25px;
padding-top: 35px;
margin-top: 5%;
}
.color{
color: var(--main);
}

/* responsive part start */
@media screen and (max-width: 768px){
body{
font-size: 14px!important;
overflow-x: hidden;
}
html{
overflow-x: hidden;
}
.whatsapp{
top: 80%;
left: 80%;
}
.goto{
top: 92%;
left: 83%;
}
nav{
padding-top: 0%!important;
padding-bottom: 0%!important;
height:90%;
text-align: center;
}
.logo{
height: 80px;
width: 80px;
}
.dropdown-menu{
width: 100%;
margin-left: 0%!important;
}
.navbar-toggler{
border-radius: 0%!important;
}
.nav-item{
padding-right: 0px!important;
}
.nav-item:last-child{
padding-right: 0px!important;
}
.goog-te-combo {
background-color: var(--white);
border: none;
padding: 7px;
margin-top: 3%!important;
}
.first{
height: 160px;
padding-top: 3px;
text-align: center;
}
.first-one{
text-align: center;
}
.res-first-one{
margin-top: 2.5%!important;
}
.resp_first{
font-size: 14px;
}
.fa-whatsapp{
padding-right: 2px;
padding-left: 8px;	
}
.endtext{
text-align: left;
}
.main{
height: 320px;
background-position: center;
}
.fariyadi{
width: 90%;
margin-left: 5.4%;
font-size: 15px;
}
.gap{
margin-top: 8%!important;
}
.respwork{
margin-top: 10%!important;
margin-left: 5%!important;
}
.res_workthree{
margin-top: 14%!important;
}
.workone{
font-size: 20px!important;
}
.mission{
padding-top: 8%;
padding-bottom: 8%;
}
.missionone{
border: none;
}
.resp_member{
width: 50%;
margin-left: 26%;
margin-top: 5%;
}
.resp_meet{
text-align: center;
}
.poor{
background-position: center;
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
}
.footer_row{
text-align: center;
}
.respreset{
margin-top: 6%!important;
}
.respreserved{
text-align: center!important;
}
.footer_icons{
text-align: center!important;
}
.ff{
padding-left: 8.5px;
}
.ml-auto{
text-align: center!important;
margin-bottom: 3%!important;
margin-left: 0%;
}
.aboutpage{
padding-top: 15%;
padding-bottom: 15%;
}
.justification{
text-align: justify;
}
.feed{
padding-left: 7%!important;
}
.zeroone:after{
height: 135px;
margin-left: -30px;
}
.zeroone:before{
margin-top: 155px;
}
.zerotwo:after{
height: 135px;
margin-left: -32px;
}
.zerotwo:before{
margin-top: 155px;
}
.count{
padding-top: 12%;
padding-bottom: 12%;
}
.resp_count{
margin-top: 10%!important;
}
.tik{
margin-bottom: 2%;
}
.loginone{
margin-top: 40%!important;
}
.loginfour{
margin-left: 13.1%!important;
}
.vel{
padding: 12px 11px;
margin-left: 5.5px;
}
.fa-unlock-alt{
padding: 12px 13.5px;
margin-left: 5.5px;	
}
.ztop{
margin-top: 2%!important;
}
.dashboard{
text-align: center;
}
.dashboardone{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 570px;
}
.dashboardtwo{
width: 66%;
text-align: center;
}
.down{
margin-bottom: 8%;
}
.y-p{
height: 190px;
width: 340px;
}
.associate{
text-align: center;
}
}