*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: "Inter", serif;
}
:root{
--primary:#0A101E;
--secondary:#FEC544;
--white:white;
--gray:gray;
--lightgray:lightgray;
--red:red;
--black:black;
}
body p{
font-size: 15.5px;
}
body a{
text-decoration: none;
}

/*navbar part start*/
.socialPart{
background-color: #888;
color:var(--white);
height:36px;
padding-top: 5px;
}
.socialPart a{
color:var(--white)!important;
}
.textRight{
text-align: right;
}
.call{
border-radius: 50%;
padding:4px;
font-size: 13px;
border:2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
margin-right: 15px;
}
.switch {
position: relative;
display: inline-block;
width: 75px;
height: 34px;
overflow: hidden;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: .5s;
transition: .5s;
}
.slider:before {
position: absolute;
content: "";
width:26px;
height: 26px;
left:4px;
bottom:4px;
border-radius: 50%;
background-color:gold;
box-shadow: 0 0 5px gold,
            0 0 25px gold,
            0 0 50px gold,
            0 0 100px gold;
-webkit-transition: .5s;
transition: .5s;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
width:26px;
height: 26px;
left:-3px;
bottom:4px;
border-radius: 50%;
background-color:transparent;
box-shadow:5px 4px 0 0 white;
rotate:-6deg;
}
.slider.round {
border-radius: 34px;
background-color: #555;
}
.colorBlack {
background:radial-gradient(#333333,#0F1523)!important;
color:var(--white)!important;
 .socialPart{
	background:radial-gradient(#333333,#0F1523);
 }
 .nav-link{
 	color:var(--white)!important;
 }
 .donate a{
    color:var(--white)!important;
 }
 .readMore{
	background-color: var(--secondary);
	box-shadow: none;
	transition: all .1s;
 }
 .work{
 	color:var(--white);
 }
 .mission h6{
 	color:var(--white);
 }
 .headerIcon{
	border:2px solid var(--gray);
	color:var(--gray);
 }
 .common{
   color:var(--white);
 }
 .member{
   background:radial-gradient(#333333,#0F1523)
 }
 .contactThree{
   border:2px solid var(--white);
 }
 .contact{
   border:2px solid var(--white);
 }
 .donateBox{
   color:var(--white);
 }
}
.whatsapp{
position: absolute;
height:80px;
width: 80px;
right:3.8%;
bottom: 10%;
position: fixed;
}
.top{
position: absolute;
height:40px;
width:40px;
border: 2px solid var(--gray);
background-color: rgba(255, 255, 255, 0.2);
color:var(--gray);
font-size: 20px;
right:5%;
bottom: 5%;
position: fixed;
border-radius: 50%;
}
.firstNav{
height:80px;
}
.logo{
height:90px;
}
.nav-link{
color:var(--black)!important;
font-size: 13.5px!important;
font-weight: 400!important;
}
.nav-item{
padding-right: 30px;
}
.nav-item:last-child{
padding-right: 0px;
}
.dropdown-item{
font-size: 15px!important;
}
.dropdown-item:active{
background-color: var(--white)!important;
color:var(--black)!important;
}
.donate{
border:2px solid var(--secondary);
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
padding:8px 27px;
border-radius: 32px;
}
.donate a{
color:var(--black)!important;
}

/*index page start*/
.headerOne{
height:600px;
display: flex;
justify-content: center;
align-items: center;
}
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid var(--secondary);
transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid var(--secondary);
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
transform: rotate(45deg);
}
.headerTwo{
display: flex;
justify-content: center;
flex-direction: column;
}
.headerTwo h6{
color:var(--secondary);
letter-spacing: 1px;
font-size: 14px;
font-weight: 700;
}
.headerTwo h1{
text-transform: uppercase;
font-size: 40px;
font-family: "Agbalumo", system-ui;
font-weight: 300;
word-spacing: 3px;
margin-top: 2%;
margin-bottom: 4%;
}
.headerTwo p{
margin-bottom: 6%;
}
.headerIcon{
height:35px;
width:35px;
border:2px solid var(--white);
border-radius: 50px;
text-align: center;
padding-top: 7px;
color:var(--white);
}
.mission{
height: 150px;
width: 150px;
border-radius: 50%;
background:radial-gradient(#333333,#0F1523);
border-left: 6px solid var(--secondary);
border-top: 6px solid var(--primary);
border-right: 6px solid var(--secondary);
border-bottom: 6px solid var(--primary);
text-align: center;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
margin-bottom: 3%;
color:var(--white);
}
.aimIcon{
font-size: 40px!important;
margin-bottom: 8%;
}
.vision{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
}
.color{
color:var(--secondary);
font-family: "Agbalumo", system-ui;
}
.gap{
margin-top: 3%;
}
.gaps{
margin-top: 5%;
}
.heading{
position: relative;
letter-spacing: 1px;
}
.heading::before{
position: absolute;
content: "";
height: 4px;
width:75px;
background-color:var(--secondary);
clip-path: polygon(0 49%, 100% 94%, 100% 6%);
top:30px;
border-radius:50px;
}
.about{
padding-left: 40px!important;
}
.aboutBtn{
margin-top: 6%;
}
.readMore{
position: relative;
padding:9px 27px;
border-radius: 5px;
color:var(--white);
box-shadow:0px 0px 3px var(--white);
border: none;
background-color: var(--secondary);
}
.work{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:25px 10px;
padding-top: 40px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.work h5{
margin-top: 3%;
margin-bottom: 5%;
transition: all .8s;
}
.workOne{
height:90px;
width:90px;
border:1px solid #555;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: all 1s;
}
.work:hover{
	.workOne{
	    border:2px solid var(--secondary);
	    animation: run 1s linear infinite alternate-reverse;
	}
	&.work h5{
		color: var(--secondary);
	}	
}
@keyframes run{
100%{
transform: translateY(10px);
}
}
.row-gap{
row-gap: 25px!important;
}
.query h3{
margin-top: 5%;
margin-bottom: 5%;
}
.form-group{
margin-top: 5%;
}
.form-control{
background-color: transparent!important;
border:2px solid var(--gray)!important;
}
.form-control:focus{
box-shadow: none!important;
outline: none!important;
color:var(--white)!important;
}
::placeholder{
color:var(--gray)!important;
}
.queryOne{
padding-left: 80px!important;
}
.queryOne h3{
margin-bottom: 5%;
font-size: 49px;
font-weight: 700;
}
.aim{
text-align: right;
}
.aim h6{
font-size: 20px;
color:var(--secondary);
margin-bottom: 5%;
}
.aimIcon{
font-size: 40px;
}
.aimImage{
background:radial-gradient(#333333,#0F1523);
}
.hrs{
margin-top: 10%;
margin-bottom: 8%;
}
.aimOne h6{
font-size: 20px;
color:var(--secondary);
margin-bottom: 5%;
}
.testimonial{
box-shadow: rgba(0, 0, 0, 0.65) 0px 5px 15px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.testimonialImage{
height:130px;
width:130px;
border-radius: 50%;
background-color: var(--primary);
border:6px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.cInner{
padding:30px 20px!important;
padding-top: 50px!important;
}
.rightIcon{
color:var(--secondary)!important;
background-color: var(--secondary)!important;
margin: 50px!important;
}
.fa-star{
color:var(--secondary);
}
.textAlign{
text-align: right;
}

/*footer part start*/
footer{
background: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)),url('images/12.png');
background-repeat: no-repeat;
background-size: cover;
box-shadow: -2px -2px 5px var(--primary);
padding:30px 0px;
padding-bottom: 16px;
color:var(--white);
}
footer a{
color:var(--white);
}
footer h5{
color:var(--secondary);
margin-bottom: 12%;
}
.footerTwo p{
margin-top: 3%;
margin-bottom: 5%;
}
.footerOne{
margin-top: 5.5%;
transition: all .8s;
}
.footerOne a:hover{
color:var(--secondary)!important;
}
.footerThree{
display: flex;
justify-content: space-between;
}
.icon a{
margin-left: 1%;
}
.icon a:first-child{
margin-left: 0%;
}

/*about page start*/
.common{
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url('images/common.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:160px;
}
.aboutCommon{
padding-top: 50px;
color:var(--white);
}
.aboutCommon a{
color:var(--white);
}
.board{
height:210px;
width:210px;
background:radial-gradient(#333333,#0F1523);
box-shadow: 0px 10px 24px 9px rgba(251, 161, 80, 0.12);
border-radius: 5px;
}
.boardBox{
background-color: var(--white);
width:70%;
padding-top: 20px;
margin-top: -5%;
border-radius: 5px;
}
.boardBox p{
color:var(--primary);
}

/*media part start*/
.media{
background-color: #0F1523;
}

/*contact part start*/
.contact{
height: 150px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.contactIcon{
font-size: 45px;
}
.contactOne{
display: flex;
justify-content: center;
flex-direction: column;
padding-top: 10px;
}
.contactOne > *{
font-size: 17px;
}
.contactTwo{
display: flex;
justify-content: center;
align-items: center;
padding-top: 15px;
}
.rowGapOne{
margin-top: 8%!important;
}
.borderBottom{
border-bottom: 1px dotted var(--lightgray);
padding-bottom: 20px;
text-align: center;
}
.form-control{
margin-top: 2%;
}
.contactThree{
padding:50px 20px!important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.donateBox{
padding:30px 20px!important;
padding-bottom: 10px!important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.donateBox h5{
padding-bottom: 5%;
}

/*memebr part start*/
.member{
border:3px solid rgba(255, 255, 255, 0.3);
padding:40px 25px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.submitBtn{
background-color: var(--secondary)!important;
border-radius: 50px!important;
border:none!important;
}

/*admin area page start*/
.dashboard{
background-color: var(--secondary);
padding-top: 8px;
}
.form-control:focus{
color:var(--gray)!important;
}
.admin{
height:728px;
background-color: var(--primary);
}
.adminOne{
padding:8px 27px;
background-color: var(--primary);
margin-top: 4%;
}
.adminOne a{
color: var(--white);
}
.fa-circle-minus{
color:var(--red);
}
.adminLogin{
margin-top: 15%!important;
}

/*responsive part start*/
@media (max-width:1024px){
.firstNav{
width:98%!important;
}
.nav-link{
font-size: 12px!important;
}
.nav-item{
padding-right: 20px;
}
.donate{
font-size: 12px;
}
.hrs{
margin-top: 7%;
margin-bottom: 5%;
}
footer h5{
font-size: 19px;
}
.boardBox{
margin-top: -10%;
}
.admin{
height:642px;
}
}
@media (max-width:768px){
.times{
font-size: 13px;
padding-top: 3px;
}
nav{
height:90px;
}
.firstNav{
margin-top: -2.3%;
}
.offcanvas-end{
background-color: var(--white)!important;
}
.btn-close{
color:var(--white)!important;
background-color: var(--white)!important;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.nav-item{
padding-right: 0px!important;
}
.nav-link{
font-size: 14px!important;
}	
.navbar-toggler{
border-radius: 0%!important;
}
.navbar-toggler:focus{
border:2px solid var(--lightgray)!important;
outline:none!important;
box-shadow: none!important;
}
.switch {
width: 125px;
}
input:checked + .slider:before {
-webkit-transform: translateX(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
bottom:0px;
}
.colorBlack {
	.offcanvas-end{
	   background-color: var(--black)!important;
	}
}
header{
height:900px;
display: flex;
justify-content: center;
align-items: center;
}
.headerTwo{
margin-bottom: 6%;
}
.gap{
margin-top: 5%;
}
.hrs{
margin-top: 3%;
margin-bottom: 1%;
}
.aim h6{
font-size: 18px;
margin-bottom: 3%;
}
.aimIcon{
font-size: 30px;
margin-bottom: 2%;
}
.aimOne h6{
font-size: 18px;
margin-bottom: 3%;
}
.resAimImage{
display: flex;
justify-content: center;
align-items: center;
}
.rightIcon{
color:var(--secondary)!important;
background-color: var(--secondary)!important;
margin: 25px!important;
}
.queryOne h3{
font-size: 35px;
}
.footerTwo{
margin-bottom: 5%;
}
.resBoard{
margin-top: 5%!important;
}
.boardBox{
width:32%;
margin-top: -5%;
}
.contactThree{
margin-top: 5%!important;
}
.adminOne{
padding:7px 21px;
}
.adminOne a{
font-size: 15px;
}
}

@media (max-width:425px){
.whatsapp{
right:0.7%;
}
.socialPart{
height:94px;
text-align: center;
}
.textRight{
text-align: center;
}
.call{
padding:5px;
font-size: 11px;
}
.calls{
margin-top: 2%!important;
margin-bottom: 1%;
}
.times{
font-size: 15px;
}
.firstNav{
margin-top: -4.3%;
}
header{
height:750px;
}
.headerTwo{
margin-bottom: 13%;
}
.headerTwo h6{
font-size: 12px;
}
.headerTwo h1{
font-size: 30px;
}
.queryOne{
padding-left: 20px!important;
padding-top: 4%!important;
}
.aim{
text-align: center;
}
.aimOne{
text-align: center;
}
.hrs{
display: none;
}
.order{
order:1;
}
.order1{
order:2;
}
.rightIcon{
margin: 15px!important;
}
footer h5{
margin-bottom: 9%;
font-size: 18px;
}
.respfooterAbout{
margin-top: 5%!important;
}
.rescopyright{
text-align: center;
margin-top: 5%!important;
}
.aboutCommon{
padding-top: 55px;
}
.boardBox{
width:55%;
}
.queryOne h3{
font-size: 30px;
}
.contact{
margin-top: 8%!important;
height:230px;
text-align: center;
width:94%!important;
margin-left: 3%!important;
}
.contactTwo{
padding-top: 0px;
}
.contactOne{
padding-top: 0px;
}
.contactThree{
margin-top: 5%!important;
width:94%!important;
margin-left: 3%;
}
.dashboard{
text-align: center;
}
.adminLogin{
margin-top: 40%!important;
}
.admin{
height:250px;
}
.adminOne{
width:60%;
margin-left: 20%;
text-align: center;
}
.adminBottom{
margin-bottom: 6%;
}
}

@media (max-width:375px){
.firstNav{
margin-top: -5%;
}
.headerTwo h6{
font-size: 11px;
}
.rightIcon{
margin: 5px!important;
}
.boardBox{
width:65%;
margin-top: -8%;
}
.adminLogin{
margin-top: 50%!important;
}
}