*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* reusuable code */
body{
font-family: 'Inter', sans-serif!important;
font-size: 15px!important;
overflow-x: hidden!important;
}
html{
overflow-x: hidden!important;
}
body a{
text-decoration: none;
}
:root{
--main: #fac50e ;
--secondmain: #333;
--black: black;
--white: white;
--gray: gray;
--lightgray: lightgray;
--facebook: #3b5998;
--twitter: #00acee;
--red: red;
--purple: purple;
}
.whatsapp img{
position: absolute;
content: "";
height: 80px;
width: 80px;
left: 92.5%;
top: 77%;
position: fixed;
z-index: 10;
}
.go{
display: none;
position: absolute;
content: "";
color: var(--main);
text-align: center;
padding-top: 4px;
height: 37px;
width: 37px;
left: 94%;
top: 90%;
border: 3px solid var(--main);
background-color: transparent;
border-radius: 50%;
position: fixed;
z-index: 10;
}
.go:hover{
background-color: var(--main);
color: var(--white);
}
/* navbar part start */
.firstnav{
background-color: var(--main);
padding-top: 2px;
padding-bottom: 2px;
}
.firstnav a{
color: var(--white);
}
.call{
height: 25px;
width: 25px;
background-color: blue;
color: var(--white);
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;
}
.time{
color: var(--white);
}
.time-one{
text-align: right;
}
nav{
height: 45px;
background-color: var(--main)!important;
}
.navbar-collapse{
display: flex;
justify-content: center;
align-items: center;
}
nav a.active{
color: var(--white)!important;
}
.nav-item{
padding-right: 50px;
}
.nav-item:last-child{
padding-right: 0px;
}
.nav-link{
font-size: 14px!important;
}
.dropdown-menu{
border-radius: 0%!important;
font-size: 14.5px!important;
text-align: center!important;
transform: translateY(60px)!important;
transition: all 1s;
opacity: 0;
}
.dropdown:hover .dropdown-menu{
transform: translateY(15px)!important;
opacity: 1;
}
.top{
margin-top: -3%;
}
.bottom{
margin-bottom: -3%;
}
.buttons{
border: none!important;
color: var(--main)!important;
padding: 9px 22px!important;
background-color: var(--white)!important;
}
.logo{
height: 100px!important;
border-radius: 50%;
}
.logo-one{
margin-top: -0.4%;
margin-bottom: 0.4%;
}
.logo-two{
font-size: 35px;
font-weight: bold;
margin-left: 98px!important;
margin-top: -8.5%;
}
.links_down{
text-align: right;
margin-top: 20%;
}
.fa-facebook{
height: 30px;
width: 30px;
border: 2px solid var(--facebook);
background-color: transparent;
border-radius: 50%;
color: var(--facebook);
text-align: center;
padding-top: 6px;
}
.fa-facebook:hover{
background-color: var(--facebook);
border: 2px solid var(--facebook);
color: var(--white);
}
.fa-twitter{
height: 30px;
width: 30px;
border: 2px solid var(--twitter);
background-color: transparent;
border-radius: 50%;
color: var(--twitter);
text-align: center;
padding-top: 6px;
}
.fa-twitter:hover{
background-color: var(--twitter);
border: 2px solid var(--twitter);
color: var(--white);
}
.fa-instagram{
height: 30px;
width: 30px;
border: 2px solid var(--purple);
background-color: transparent;
border-radius: 50%;
color: var(--purple);
text-align: center;
padding-top: 6px;
}
.fa-instagram:hover{
background-color: var(--purple);
border: 2px solid var(--purple);
color: var(--white);
}
.fa-youtube-play{
height: 30px;
width: 30px;
border: 2px solid var(--red);
background-color: transparent;
border-radius: 50%;
color: var(--red);
text-align: center;
padding-top: 6px;
}
.fa-youtube-play:hover{
background-color: var(--red);
border: 2px solid var(--red);
color: var(--white);
}
.button{
border: none!important;
color: var(--white)!important;
padding: 9px 26px!important;
border-radius: 34px;
background: linear-gradient(250deg, #fac50e 26.71%, #fb9823 99.36%)!important;
box-shadow: 0px 20px 24px 3px rgba(251, 161, 80, 0.42);
}
.button:hover{
border: 2px solid var(--main)!important;
background: var(--white)!important;
color: var(--secondmain)!important;
}

/* index part start */
.home{
background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.8)),url('images/j2.jpeg');
background-repeat: no-repeat;
background-size: cover;
height: 510px;
background-position: center;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.6)),url('images/j1.jpeg');
background-repeat: no-repeat;
background-size: cover;
height: 510px;
background-position: center;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.6)),url('images/18.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 510px;
background-position: center center;
}
.carousel-caption {
bottom: 2rem!important;
}
.carousel-caption p{
margin-top: 2%;
margin-bottom: 3%;
}
.carousel-caption h1{
font-size: 35px;
}
.blurtwo{
position: absolute;
width: 21rem;
height: 15rem;
margin-left: -20%;
margin-top: -14%!important;
filter: blur(92px);
background-color: #c1f5ff;
}
.blurthree{
position: absolute;
width: 21rem;
height: 15rem;
margin-left: 65%;
margin-top: 10%!important;
filter: blur(112px);
background-color: #edd0ff;
}
.blurfour{
position: absolute;
width: 15rem;
height: 10rem;
margin-left: -10%;
margin-top: -10%!important;
filter: blur(90px);
background-color: #c1f5ff;
}
.blurfive{
position: absolute;
width: 15rem;
height: 10rem;
margin-left: 70%;
margin-top: -20%!important;
filter: blur(75px);
background-color: #c1f5ff;
}
.blursix{
position: absolute;
width: 15rem;
height: 10rem;
margin-left: -10%;
margin-top: -10%!important;
filter: blur(65px);
background-color: #edd0ff;
}
.gap{
margin-top: 5%!important;
}
.res_gap{
margin-top: 5%!important;	
}
.work{
border: 3px solid var(--main);
padding: 25px;
padding-bottom: 35px;
text-align: center;
border-radius: 20px;
}
.work h5{
font-size: 18px;
}
.books{
height: 45px!important;
width: 45px!important;
color: var(--main);
margin-bottom: 5%;
}
.workone{
margin-top: 4%!important;
}
.line{
color: var(--main);
}
.justify{
text-align: justify;
}
.cap{
color: var(--main);
font-size: 40px!important;
}
.poor{
padding-top: 50px;
padding-bottom: 40px;
padding-left: 25px!important;
padding-right: 25px!important;
transition: all .5s;
}
.poorone{
display: flex;
justify-content: center;
align-items: center;
}
.poortwo{
padding-left: 20px!important;
}
.arrow{
color: var(--main)!important;
}
.poors{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding-top: 50px;
padding-bottom: 40px;
padding-left: 25px!important;
padding-right: 25px!important;
transition: all .5s;
}
.poor:hover{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
transform: translateY(-10px);
}
.poors:hover{
transform: translateY(-10px);
}
.count{
height: 110px;
width: 110px;
border: 7px solid var(--main);
border-radius: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-left: 29.6%;
margin-bottom: 7%;
}
.count:hover{
background-color: var(--main);
box-shadow: 0 0 5px var(--main),
            0 0 25px var(--main),
            0 0 50px var(--main),
            0 0 100px var(--main);
color: var(--white);           
}
.counter{
text-align: center;
}
.join{
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: var(--white);
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
}
.join p{
margin-top: 1.5%;
margin-bottom: 4%;
}
.mission{
display: flex;
justify-content: center;
align-items: center;
}
.circle{
height: 420px;
width: 420px;
background-color: var(--main);
border-radius: 50%;
text-align: center;
color: var(--white);
padding-top: 15px;
}
.eye{
font-size: 40px!important;
margin-bottom: 2%;
}
.circleone{
height: 320px;
width: 320px;
background-color: orange;
border-radius: 50%;
text-align: center;
color: var(--white);
margin-left: 12%;
margin-top: 3%;
padding-top: 15px;
}
.circletwo{
height: 220px;
width: 220px;
background-color: red;
border-radius: 50%;
text-align: center;
color: var(--white);
margin-left: 15%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 4.5%;
}
.vision{
height: 40px;
width: 40px;
background-color: var(--main);
color: var(--white);
border-radius: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.vis{
height: 40px;
width: 40px;
background-color: orange;
color: var(--white);
border-radius: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.visi{
height: 40px;
width: 40px;
background-color: red;
color: var(--white);
border-radius: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.visionone{
padding-top: 40px;
}
.visionthree{
padding-top: 50px;
}
.visionfour{
padding-top: 70px;
}
.visiontwo::before{
position: absolute;
content: "";
height: 3px;
width: 300px;
background-color: var(--lightgray);
margin-top: 2%;
margin-left: 28%;
}
.zero::before{
position: absolute;
content: "";
height: 65px;
width: 3px;
margin-top: 8.3%;
background-color: var(--lightgray);
}
.zeros::before{
position: absolute;
content: "";
height: 85px;
width: 3px;
margin-top: 9.7%;
background-color: var(--lightgray);
}

/* footer part start */
.footer{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/6.jpg');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
background-position: center;
padding-top: 25px;
}
.footer h5{
font-size: 18px;
margin-bottom: 5%;
}
.footer a{
color: var(--white);
}
/* about page part start */
.ahome{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/3.jpg');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
background-position: center;
height: 170px;
padding-top: 50px;
}
.ahome a{
color: var(--white);
}
.board{
height: 300px!important;
width: 280px!important;
margin-bottom: 4%;
transition: all 1s;
}
.board:hover{
transform: perspective(900px) rotateX(10deg);
box-shadow: 8px 30px 30px -8px;
}
/* education part start */
.kane_one{
padding-left: 3.5%!important;
}
.cards{
border: 3px solid var(--main)!important;
}
.image-box img{
height: 200px;
width: 100%;
}
/* gallery part start */
.let{
margin-top: 2.5%!important;
margin-bottom: 2%!important;
}
/* get involved part start */
.form-group{
margin-top: 3%;
}
.form-control{
border: 2px solid var(--main)!important;
}
.involved{
border: 1px solid var(--white);
margin-bottom: 6%;
padding: 25px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding-bottom: 45px;
}
.submitbtn{
background-color: var(--main)!important;
}
/* contact part start */
.contactbox{
border: 1px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 25px;
padding-top: 35px;
}
.map{
height: 378px;
width: 640px;
}

/* admin area part start */
.login{
height: 643px;
}
.loginone{
width: 90%;
padding: 30px;
padding-bottom: 35px;
margin-top: 31%;
background-color: var(--white);
margin-left: 5%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.loginbtn{
width: 25%!important;
}
.logintwo{
margin-top: 1%;
}
.dashboard{
height: 40px;
background-color: var(--main);
padding-top: 5.5px;
}
.dashboardone{
height: 603px;
border-right: 1px solid var(--gray);
background-color: var(--secondmain);
}
.dashboardtwo{
padding: 7px;
background-color: var(--white);
margin-top: 4.5%;
}
.dashboardtwo a{
font-size: 15px;
color: var(--secondmain)!important;
}
.edit{
height: 22px;
width: 22px;
color: blue;
}
.delete{
height: 22px;
width: 22px;
color: red;
}
.act{
background-color: blue;
padding: 5px 15px;
color: var(--white)!important;
}
.inactive{
background-color: red;
padding: 5px 15px;
color: var(--white)!important;
}
.trashbutton{
border: none!important;
background-color: var(--white);
}

/* responsive part start */
@media screen and (max-width: 768px){
body{
font-size: 14px!important;
overflow-x: hidden!important;
}
html{
overflow-x: hidden!important;
}
.firstnav{
text-align: center;
}
.time-one{
text-align: center;
}
.logo-one{
height: 90px;
margin-top: 9%;
text-align: center;
}
.logo-two{
display: none;
}
.links_down{
text-align: center;
margin-top: 1%;
}
nav{
height: 50%;
}
.rusticky{
margin-top: -1%;
margin-bottom: -1%;
}
.whatsapp img{
position: absolute;
content: "";
height: 80px;
width: 80px;
left: 78.5%;
top: 77%;
position: fixed;
}
.go{
left: 85%;
}
.logo{
height: 90px!important;
margin-top: -11%;
}
.navbar-toggler{
border-radius: 0%!important;
}
.navbar-collapse{
text-align: center;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.nav-item{
padding-right: 0px!important;
}
.nav-link{
font-size: 13px!important;
}
.buttons{
width: 100%;
margin-left: 0%;
}
.dropdown{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dropdown-menu{
width: 100%;
margin-bottom: 5%!important;
margin-top: -7%!important;
}
.home,.home1,.home2{
height: 400px;
}
.carousel-caption h1{
font-size: 25px!important;
}
.carousel-caption p{
margin-bottom: 7%!important;
}
.blurtwo{
width: 13rem;
height: 8rem;
}
.blurfour{
width: 10rem;
height: 7rem;
margin-top: -110%!important;
}
.blursix{
width: 10rem;
height: 7rem;
margin-top: -20%!important;
}
.res_gap{
margin-top: 10%!important;
}
.gap{
margin-top: 8%!important;
}
.work{
width: 86%;
margin-left: 7%;
padding: 35px;
padding-bottom: 45px;
}
.reswork{
margin-top: 4%!important;
}
.poor,.poors{
text-align: center;
margin-top: 5%;
}
.cap{
margin-bottom: 5%;
}
.count{
margin-left: 34%!important;
}
.rescounterone{
margin-top: 7%!important;
}
.visiontwo::before{
display: none;
}
.visiontwo::after{
display: none;
}
.zero::before{
display: none;
}
.zeros::before{
display: none;
}
.visionone,.visionthree,.visionfour{
text-align: center;
margin-top: -10%!important;
}
.vision,.vis,.visi{
margin-left: 42%;
}
.circle{
height: 330px!important;
width: 330px!important;
}
.eye{
font-size: 40px!important;
margin-bottom: 2%;
}
.circleone{
height: 240px;
width: 240px;
margin-left: 14%;
margin-top: -1.1%;
}
.circletwo{
height: 145px;
width: 145px;
margin-left: 19.5%;
margin-top: 4.5%;
}
.footer{
padding-top: 35px!important;
text-align: center;
}
.resfooter{
margin-top: 6%!important;
}
.ahome{
height: 165px;
padding-top: 50px;
}
.abouttop{
margin-top: 4%!important;
}
.res_row_one{
margin-top: 8%!important;
}
.kane_one{
padding-left: 1.5%!important;
}
.media{
margin-top: 2%!important;
}
.map{
margin-top: 10%!important;
width: 313px;
}
.nobelcause{
width: 96%!important;
margin-left: 2%;
}
.loginone{
width: 110%;
margin-left: -5%;
}
.dashboard{
text-align: center;
}
.dashboardone{
height: 613px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.dashboardtwo{
margin-top: 3%;
width: 75%!important;
text-align: center;
}
.bottomgap{
margin-bottom: 8%;
}
}