*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body a{
text-decoration: none;
}
body h1,h2,h3,h4,h5{
font-family: "Quicksand", sans-serif;
font-weight: 800!important;
}
body li{
list-style: none;
}
:root{
--primary:#ecc309;
--secondary:#d26b04;
--white:white;
--gray:gray;
--lightgray:lightgray;
--black:black;
--red:red;
--blue:blue;
}
::-webkit-scrollbar{
width:7px;
}
::-webkit-scrollbar-track{
background-color: var(--white);
}
::-webkit-scrollbar-thumb{
background:linear-gradient(var(--primary),var(--secondary));
border-radius: 3px;
}
.active{
color:var(--black)!important;
}
/*navbar page start*/
.goto{
position: absolute;
height:38px;
width:38px;
border:2px solid var(--primary);
border-radius: 50%;
padding-top: 0px;
background-color: var(--white);
bottom:4%;
right:2.2%;
position: fixed;
z-index: 100;
}
.whatsapp{
height:80px;
width:80px;
position: absolute;
content:"";
right:0.8%;
bottom:8%;
position: fixed;
z-index: 101;
}
.first{
background:linear-gradient(to right,var(--primary),var(--secondary));
color:var(--white);
height:35px;
padding-top: 2.5px;
}
.first a{
color:var(--white);
}
.second{
height:94px;
display: flex;
align-items: center;
}
.secondTwo{
display: flex;
align-items: center;
color:#333;
}
.logo{
height:90px;
}
.logoHeading{
font-size: 35px;
padding-left: 20px;
font-family: "Agbalumo", system-ui;
}
.textRight{
text-align: right;
}
nav{
height:50px;
background:linear-gradient(to right,var(--secondary),var(--primary));
}
.nav-link{
font-size: 13.5px!important;
font-weight: 450!important;
color:var(--white)!important;
}
.nav-item{
padding-right: 45px;
}
.nav-item:last-child{
padding-right: 0px;
}
.dropdown-menu{
border-radius: 0%!important;
}
.dropdown-item:focus{
background-color: var(--white)!important;
color:var(--black)!important;
}
/*index page start*/
.home{
background: linear-gradient(to bottom,rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.0)),url('images/s14.jpeg');
background-repeat: no-repeat;
background-size: cover;
height:595px;
}
.home1{
background: linear-gradient(to bottom,rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.0)),url('images/s21.jpeg');
background-repeat: no-repeat;
background-size: cover;
height:595px;
}
.home2{
background: linear-gradient(to bottom,rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.0)),url('images/s6.jpg');
background-repeat: no-repeat;
background-size: cover;
height:595px;
}
.readMore{
padding:7px 27px;
background-color: var(--primary);
color:var(--white);
}
.gap{
margin-top: 3%;
}
.color{
color: var(--secondary);
}
.work{
position: relative;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding-top: 30px;
padding-bottom: 35px;
border-radius: 7px;
overflow: hidden;
}
.work:before{
position: absolute;
content: "";
height:100%;
width: 100%;
background-color: var(--secondary);
top:70%;
left:-70%;
border-radius: 61% 39% 34% 66% / 33% 47% 53% 67%  ;
z-index: -1;
transition: all 1s;
}
.work .btnOne{
color:var(--black)!important;
}
.work:hover:before{
top:0%;
left:0%;
border-radius: 0px;
}
.work:hover{
color:var(--white)!important;
}
.work:hover .btnOne{
color:var(--white)!important;
}
.workOne{
display: flex;
justify-content: center;
align-items: center;
}
.workTwo{
padding-right: 20px!important;
}
.workTwo p{
margin-top: 3%;
margin-bottom: 6%;
}
.workIcon{
font-size: 35px;
border:2px dotted var(--primary);
height:80px;
width: 80px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.missionBox{
background:linear-gradient(var(--primary),var(--secondary));
padding:25px 20px;
padding-bottom: 10px;
border-radius: 7px;
color:var(--white);
}
.missionIcon{
height:60px;
width:60px;
font-size: 28px;
background-color: var(--white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.missionBox h5{
margin-top: 4%;
margin-bottom: 4%;
}
.we{
font-size: 50px;
}
.weOne{
display: flex;
justify-content: center;
align-items: center;
}
.weTwo{
position: relative;
}
.weTwo:before{
position: absolute;
content: "";
height:100%;
width:1px;
background-color: var(--lightgray);
}
.weTwo:after{
position: absolute;
content:"";
height:50px;
width:5px;
background-color: var(--primary);
top:40px;
left: 10px;
border-radius: 50px;
}
.weThree{
padding-left: 20px;
}
.weBox{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding-left: 24px!important;
padding-right: 20px!important;
padding-top: 10px;
padding-bottom: 10px;
}
.rowGap{
row-gap: 25px;
}
.help{
background:linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url('images/s20.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:300px;
color:var(--white);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.help p{
margin-top: 2%;
margin-bottom: 4%;
}
.helpBtn{
padding:9px 27px;
background-color: var(--secondary);
color:var(--white);
}
.memberImg{
border-bottom-right-radius: 100px;
}
.team{
height:100%;
width: 100%;
background-color: var(--white);
display: flex;
justify-content: end;
flex-direction: column;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.memberBox{
margin-top:5%;
margin-bottom: 3%;
}
.testimonailIcon{
color:var(--black);
}
.testimonialImg{
height:100px;
width:100px;
border-radius: 50%;
margin-bottom: 2%;
}
.carousel-item h6{
margin-top: 2%;
margin-bottom: 2%;
}

/*footer page start*/
footer{
background-image: repeating-conic-gradient(#111 0deg 30deg,#333 30deg 60deg);
background-size: 20px 20px;
box-shadow: inset -4rem -4rem 8rem #000,inset -4rem -4rem 8rem #000;
color:var(--white);
padding-top: 25px;
padding-bottom: 5px;
margin-top: 1%;
}
footer a{
color:var(--white);
}
.lines{
position: relative;
color:var(--white);
}
.lines:before{
position: absolute;
content: "";
height:3px;
width:100px;
background:linear-gradient(to right,var(--white) 20%,transparent 30%,var(--white) 50%);
border-radius: 30px;
bottom:-7px;
}
.input-group-text{
background-color: var(--primary)!important;
border-radius: 0%!important;
}
.call{
height: 30px;
width: 30px;
border:2px solid var(--white);
border-radius: 50%;
color:var(--white);
text-align: center;
padding-top: 5px;
}
.input-group{
margin-bottom: 6%;
}
.footerOne{
margin-top: 5%;
}
.footerTwo{
margin-bottom: 10%;
}
.footerThree{
margin-top: 11%;
}
.fa-arrow-right{
padding-right: 10px;
rotate: -50deg;
transition: all 0.5s;
}
.fa-paper-plane{
color:var(--white);
}
.form-control:focus{
box-shadow: none!important;
}
.footerIcon a{
margin-left: 7px;
}
.footerIcon a:first-child{
margin-left: 0px;
}
.footerOne:hover .fa-arrow-right{
rotate: 0deg;
}
.footerThree:hover .fa-arrow-right{
rotate: 0deg;
}

/*about us page start*/
.common{
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url('images/s11.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color:var(--white);
height:200px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.common a{
color:var(--white);
}
.presidentImg{
background-color: #f1f1f1;
}


/*media page start */
.mediaOne{
column-count: 4;
}
.media{
height:100%;
width:100%;
}

/*contact us page start*/
.contactBtn{
background-color: var(--primary)!important;
}
.calls{
height:30px;
width:30px;
border:2px solid var(--black);
border-radius: 50%;
text-align: center;
padding-top: 5px;
color:var(--black);
}
.map{
height: 287px;
width:100%;
}
label{
margin-bottom: 2%;
}
.form-group{
margin-top: 3%;
}
.form-control{
border-radius: 0%!important;
}
.contactIcon{
margin-bottom: 4%;
margin-top: 2%;
}
.contactBox{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:20px;
}

/*donate page start*/
.donateBox{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:15px 10px;
padding-top: 20px;
}

/*member page start*/
.member{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:20px;
padding-top: 10px;
}

/*admin area page start*/
.login{
height:770px;
display: flex;
justify-content: center;
align-items: center;
}
.admin{
background-color: var(--primary);
color:var(--white);
padding-top: 7px;
}
.adminOne{
height:729px;
background-color: var(--secondary);
}
.adminTwo{
background-color: var(--white)!important;
padding:9px 27px;
margin-top: 4%;
}
.adminTwo a{
color:var(--black)!important;
}
.delete{
color:var(--red);
}

/*responsive part start*/
@media (max-width:1024px){
.logoHeading{
font-size: 23px;
}
.weTwo:after{
top:50px;
}
.login{
height:680px;
}
.adminOne{
height:640px;
background-color: var(--secondary);
}
}

@media (max-width:768px){
.home{
height:500px;
}
.home1{
height:500px;
background-position: center;
}
.home2{
height:500px;
}
.navbar-toggler{
border-radius: 0%!important;
}
.navbar-toggler:focus{
box-shadow: none!important;
}
.resNav{
margin-top: -0.2%;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.nav-item{
padding-right: 0px;
}
.nav-link{
color:var(--black)!important;
}
.dropdown-item{
text-align: center!important;
}
.workIcon{
font-size: 25px;
height:60px;
width: 60px;
}
.resPresidentMessage{
text-align: center;
}
.mediaOne{
column-count: 3;
}
.resRowGap{
row-gap: 20px;
}
.login{
height:680px;
}
}

@media (max-width:425px){
.goto{
right:5%;
}
.first{
height:92px;
text-align: center;
}
.logoHeading{
font-size: 16px;
}
.textRight{
text-align: center;
}
.home{
height:230px;
}
.home1{
height:230px;
}
.home2{
height:230px;
}
.resprowgap{
row-gap: 15px;
}
.resNav{
margin-top: -0.8%;
}
.donateBox{
margin-bottom: 5%;
}
.mediaOne{
column-count: 1;
}
.testimonailIcon{
color:var(--black);
margin-bottom: 15%!important;
}
.resfootertwo{
margin-top: 4%!important;
}
.work{
text-align: center;
padding-inline: 20px;
}
.help p{
margin-top: 5%;
margin-bottom: 8%;
}
.weBox{
padding-top: 20px;
padding-bottom: 20px;
}
.weTwo:after{
top:29px;
}
.reachUs{
text-align: center;
padding-top: 5%;
}
.contactIcon{
margin-top: 3%;
}
.login{
height:680px;
}
.admin{
text-align: center;
}
.adminOne{
height:250px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.adminTwo{
width:70%;
text-align: center;
}
.adminTwo:first-child{
margin-top: 0%;
}
.adminBottom{
margin-bottom: 15%;
}
}

@media (max-width:375px){
.logoHeading{
font-size: 16px;
padding-left: 8x;
}
.weTwo:after{
position: absolute;
content:"";
height:50px;
width:5px;
background-color: var(--primary);
top:43px;
left: 10px;
border-radius: 50px;
}
.resAim{
padding-top: 17%;
}
.aim{
padding-top: 25px;
}
}