*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-size: 15px!important;
font-family: "Inter", sans-serif!important;
overflow-x: hidden!important;
}
html{
overflow-x: hidden!important;
}
body a{
text-decoration: none!important;
}
:root{
--main: blue;
--secondmain: blue;
--white: white;
--lightgray: lightgray;
--gray: gray;
--black: black;
}
.whatsapp{
height: 85px;
width: 85px;
position: absolute;
top: 80%;
left: 92%;
z-index: 100;
position: fixed;
}
.move{
display: none;
position: absolute;
height: 35px;
width: 35px;
border: 2px solid var(--main);
background-color: transparent;
z-index: 100;
border-radius: 50%;
color: var(--main);
text-align: center;
padding-top: 4px;
top: 92%;
left: 93.9%;
position: fixed;
}
.move:hover{
background-color: var(--main);
color: var(--white);
}
.common{
background-color: var(--secondmain);
height: 100px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 13px;
color: var(--white);
}
.common a{
color: var(--white);
}
/* navbar part start */
nav{
border-bottom: 1px solid #f1f1f1;
}
nav a.active{
color: var(--secondmain)!important;
}
.logo{
height: 90px;
width: 90px;
}
.navone{
margin-top: -1.1%;
margin-bottom: -1.1%;
}
.firstnav{
background-color: var(--main);
padding-top: 2px;
padding-bottom: 2px;
color: var(--white);
}
.firstnav a{
color: var(--white);
}
.rutime{
text-align: right;
}
.nav-item{
padding-right: 30px;
font-size: 14px;
}
.nav-item:last-child{
padding-right: 0px;
}
.call{
height: 25px;
width: 25px;
background-color: var(--white);
color: var(--main);
text-align: center;
border-radius: 50%;
padding-top: 5px;
margin-right: 10px;
}
.email{
height: 25px;
width: 25px;
background-color: red;
color: var(--white);
text-align: center;
border-radius: 50%;
padding-top: 4.5px;
margin-right: 10px;
}
.dropdown-item{
margin-top: -3%;
margin-bottom: -3%;
}
.dropdown-menu{
border-radius: 0%!important;
transform: translateY(20px);
}
.donate-btn{
padding: 7px 21px!important;
background-color: var(--secondmain)!important;
color: var(--white)!important;
}
/* index part start */
.home{
background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url('images/18.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 586px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 586px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/6.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 586px;
}
.gap{
margin-top: 4%!important;
}
.readmore{
background-color: var(--main);
padding: 7px 21px;
color: var(--white)!important;
}
.justify{
text-align: justify;
}
.caroitem{
text-align: center;
padding: 20px;
transition: all 1s;
}
.caroitem:hover{
transform: perspective(900px);
transform: translateY(-10px);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.workone{
font-size: 40px!important;
color: var(--main);
margin-bottom: 5%;
}
.donate{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
margin-top: 5%;
text-align: center;
padding-top: 35px;
padding-bottom: 45px;
color: var(--white);
}
.last{
display: flex;
justify-content: center;
align-items: center;
padding-left: 7%!important;
}
.lastbox{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
padding: 10px;
color: var(--white);
text-align: center;
padding-top: 35px;
padding-bottom: 45px;
width: 75%;
}
.lastboxone::before{
position: absolute;
content: "";
height: 10px;
width: 133px;
background-color: var(--main);
margin-left: 17%;
rotate: 25deg;
margin-top: 9%;
z-index: -1;
}
.lastboxthree::before{
position: absolute;
content: "";
height: 10px;
width: 133px;
background-color: var(--main);
margin-left: 17%;
rotate: -25deg;
margin-top: 5%;
z-index: -1;
}
.lastboxtwo{
margin-top: 10%!important;
}
.testimonials{
background-color: #f1f1f1;
}
.testimonialsone{
border: 1px solid var(--white);
padding-top: 50px;
padding-bottom: 50px;
margin-top: 5%!important;
margin-bottom: 5%;
background-color: var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.fa-quote-left{
height: 50px;
width: 50px;
background-color: var(--main);
border-radius: 50%;
padding-top: 17px;
margin-bottom: 4%;
color: var(--white);
}
.long{
color: var(--secondmain);
margin-left: 10%;
}
.short{
color: var(--secondmain);
margin-left: -10%;
}
.book{
height: 100px;
width: 100px;
background: linear-gradient(to right,orange,tomato);
border-radius: 50%;
font-size: 40px!important;
color: var(--white);
padding-top: 30px;
text-align: center;
}
.books{
height: 100px;
width: 100px;
background: linear-gradient(to right,lightcoral,lightblue);
border-radius: 50%;
font-size: 40px!important;
color: var(--white);
padding-top: 30px;
text-align: center;
}
.bookss{
height: 100px;
width: 100px;
background: linear-gradient(to right,var(--main),seagreen);
border-radius: 50%;
font-size: 40px!important;
color: var(--white);
padding-top: 30px;
text-align: center;
}
.booksss{
height: 100px;
width: 100px;
background: linear-gradient(to right,red,yellow);
border-radius: 50%;
font-size: 40px!important;
color: var(--white);
padding-top: 30px;
text-align: center;
}
.mission{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 12px 9px 0px 9px;
transition: all 1s;
}
.mission:hover{
transform: perspective(900px) rotateX(10deg);
box-shadow: 8px 25px 32px -8px;
}
.bulls{
height: 100px;
width: 100px;
background-color: var(--main);
border-radius: 50%;
text-align: center;
font-size: 50px!important;
padding-top: 24px;
color: var(--white);
margin-top: 15px;
}
.bullsone{
height: 120px;
width: 120px;
border: 2px dashed var(--main);
background-color: var(--white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.bullstwo{
display: flex;
justify-content: center;
align-items: center;
}
.bull{
height: 100px;
width: 100px;
background-color: orange;
border-radius: 50%;
text-align: center;
font-size: 50px!important;
padding-top: 21px;
color: var(--white);
margin-top: 15px;
}
.bullone{
height: 120px;
width: 120px;
border: 2px dashed orange;
background-color: var(--white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.bul{
height: 100px;
width: 100px;
background-color: slateblue;
border-radius: 50%;
text-align: center;
font-size: 40px!important;
padding-top: 30px;
color: var(--white);
margin-top: 15px;
}
.bulone{
height: 120px;
width: 120px;
border: 2px dashed slateblue;
background-color: var(--white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

/* contact us part start */
.box{
border: 1px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}

/* fooetr part start */
.footer{
background-color: black;
color: var(--white);
padding-top: 25px;
}
.footerone{
margin-top: 1%!important;
font-size: 28px;
color: var(--main);
}
.footerlogo{
height: 100px;
width: 100px;
margin-bottom: 3%;
}
.fa-facebook{
height: 30px;
width: 30px;
background-color: #3b5998;
color: var(--white);
border-radius: 50%;
text-align: center;
padding-top: 7px;
}
.fa-twitter{
height: 30px;
width: 30px;
background-color: #00acee;
color: var(--white);
border-radius: 50%;
text-align: center;
padding-top: 7px;
}
.fa-instagram{
height: 30px;
width: 30px;
background-color: red;
color: var(--white);
border-radius: 50%;
text-align: center;
padding-top: 7px;
}
.fa-youtube-play{
height: 30px;
width: 30px;
background-color: white;
color: red;
border-radius: 50%;
text-align: center;
padding-top: 7px;
}
.usefullinks{
margin-top: 17px!important;
}
.usefullinks a{
color: var(--white)!important;
}
.footertwo{
margin-bottom: 8%;
}
.usefullinksone a{
color: var(--white)!important;
}
.footerthree{
border-radius: 0%!important;
width: 90%!important;
}
.fa-paper-plane-o{
position: absolute;
content: "";
background-color: var(--main);
padding: 11.5px;
margin-top: -38px;
margin-left: 23.5%;
}

/* get involved part start */
.form{
border: 1px solid var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 30px 20px;
}
.submitbtn{
background-color: var(--main)!important;
color: var(--white)!important;
}
.form-control{
border-radius: 0%!important;
margin-top: 1%;
}
.form-group{
margin-top: 3%;
}
.let{
row-gap: 20px;
margin-bottom: 1%;
}

/* about us part start */
.circleimg{
height: 250px;
width: 250px;
border: 10px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin-bottom: 7%;
}
.presidentmessage{
border: 10px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.presidentbox{
border: 7px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding-top: 10px;
}

/* education part start */
.counter{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;	
}
.zeroone{
height: 80px;
width: 80px;
background-color: var(--main);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-bottom: 5%;
}

/* admin area part start */
.login{
margin-top: 22%!important;
}
.dashboard{
background-color: var(--main);
color: var(--white);
padding-top: 7px;
}
.fa-bars{
margin-right: 8px;
}
.dashboardone{
background-color: var(--black);
height: 600px;
}
.dashboardthree{
background-color: var(--white);
padding: 7px 21px;
text-align: center;
margin-top: 3%;
}
.dashboardthree a{
color: var(--black)!important;
}

/* responsive part start */
@media (max-width: 768px){
body{
overflow-x: hidden!important;
}
html{
overflow-x: hidden!important;
}
.whatsapp{
top: 76%;
left: 79%;
}
.move{
top: 90%;
left: 85.5%;
}
.firstnav{
text-align: center;
}
.rutime{
text-align: center;
}
.navone{
margin-top: -3%;
margin-bottom: -3%;
}
.navbar-toggler{
border-radius: 0%!important;
}
.navbar-nav{
text-align: center;
margin-bottom: 2%!important;
}
.nav-item{
padding-right: 0px;
}
.nav-item:last-child{
padding-right: 0px;
}
.nav-link{
font-size: 13px!important;
}
.dropdown-menu{
transform: translateY(0px);
}
.dropdown-item{
text-align: center!important;
}
.home{
background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url('images/18.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 470px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 470px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/6.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 470px;
}
.gap{
margin-top: 8%!important;
}
.bullstwo{
margin-top: 3%!important;
}
.last{
margin-left: 0%!important;
}
.lastbox{
width: 88%;
}
.lastboxone::before{
display: none;
}
.lastboxthree::before{
display: none;
}
.rulastboxthree{
margin-top: 10%!important;
}
.footer{
text-align: center;
}
.ruusefull{
margin-top: 7%!important;
}
.ufi{
margin-top: 5%!important;
}
.fa-paper-plane-o{
margin-left: 35%;
}
.common{
text-align: center;
}
.presidentbox{
margin-top: 5%!important;
}
.ruco{
margin-top: 5%!important;
}
}