*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body{
font-size: 15.5px;
}
body a{
text-decoration: none;
}
:root{
--primary:#CB6DE1;
--secondary:#343456;
--black:black;
--red:red;
--gray:gray;
--lightgray:lightgray;
--white:white;
}
.common{
background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url('images/1.jpg');
background-repeat: no-repeat;
background-size: cover;
height:150px;
color:var(--white);
display: flex;
justify-content: center;
align-items: center;
}
.common a{
color:var(--white);
}

/*navbar part start*/
.whatsapp{
position: absolute;
content:"";
position: fixed;
bottom:8%;
right:1.5%;
height:80px;
width:80px;
z-index: 500;
}
.goto{
position: absolute;
content:"";
height:35px;
width:35px;
border: 2px solid var(--primary);
border-radius: 50%;
background-color: var(--white);
bottom:4%;
right:3%;
position: fixed;
z-index: 200;
}
.first{
background: linear-gradient(to right,var(--primary),var(--secondary));
padding-top: 2px;
padding-bottom: 2px;
height: 33px;
color: var(--white);
}
.first a{
color: var(--white)!important;
}
.call , .email{
height:28px;
width:28px;
border:2px solid var(--white);
color:var(--white)!important;
border-radius: 50%;
font-size: 14px;
text-align: center;
padding-top:4.5px;
}
.text-right{
text-align: right;
}
.second{
display: flex;
justify-content: center;
align-items: center;
height:90px;
}
.secondTwo{
display: flex;
justify-content: end;
align-items: center;
}
.logoHeading{
font-size: 40px;
color:var(--secondary);
font-weight: 800;
font-family: "Agbalumo", system-ui;
}
.secondOne{
display: flex;
align-items: center;
}
.logo{
height:78px;
margin-right: 10px;
border-radius: 5px;
}
nav{
height:45px;
background-color: var(--secondary);
}
.navbar-brand{
font-weight: 600;
}
.nav-link{
font-size: 13.5px!important;
font-weight: 500!important;
color:var(--white)!important;
}
.nav-item{
padding-right: 45px;
}
.nav-item:last-child{
padding-right: 0px;
}
.dropdown-menu{
border-radius: 0%!important;
padding-top: 0%!important;
padding-bottom: 0%!important;
}
.dropdown-item{
font-size: 15px;
padding-top: 8px!important;
padding-bottom: 8px!important;
}
.nav-link{
position: relative;
}
.n-link:before{
position: absolute;
content: "";
height:2px;
width: 0%;
left:0;
bottom:0px;
background-color: var(--white);
transition: all .7s;
}
.n-link:hover:before{
width:100%;
}

/*index part start*/
.carousel {
position: relative;
width:100%;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
.carousel-inner {
position: relative;
width: 100%;
height: 100%;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
.carousel-item.active {
display: block;
}
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 0px;
text-align: center;
}
.carousel-indicators button {
width: 100px;
height: 5px;
border-radius: 50px;
background-color: rgba(255, 255, 255, .4);
cursor: pointer;
position: relative;
border: none;
padding: 0;
margin: 5px;
}
.carousel-indicators button.active::after{
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
border-radius: 0;
background-color: var(--primary);
animation: loading 3s ;
}
@keyframes loading{
0%{
width: 0;
}
100%{
width: 100px;
}
}
.bg-color-01{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center; 
width: 100%;
height: 620px;
}
.bg-color-02{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d1.jfif');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 620px;
}
.bg-color-03{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/20.jfif');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 620px;
}
.gap{
margin-top: 4%;
}
.color{
color:var(--secondary);
font-weight: 700;
}
.aboutHeader{
margin-top: 3%;
margin-bottom: 3%;
font-size: 900;
font-size: 38px;
}
.readMore{
padding:10px 27px;
background-color: var(--secondary);
color:var(--white);
}
.aboutButton{
margin-top: 5%!important;
}
.aboutReach{
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.count{
color:var(--secondary);
}
.aboutImage{
border-radius: 5px;
}
.row-gap{
row-gap:30px;
}
.form-control{
border-radius: 0%!important;
}
.missionImage{
height:100px;
width:100px;
border:5px solid var(--white);
font-size:40px;
display:flex;
justify-content:center;
align-items:center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 50%;
margin-bottom: 6%;
transition: all 1s;
}
.missionImage:hover{
background-color: var(--primary);
}
.bullseye{
height: 90px!important;
width: 90px!important;
border: 8px solid var(--secondary);
display:flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border-top: none;
border-left: none;
border-bottom: none;
}
.fa-bullseye,.fa-eye{
color: var(--secondary);
}
.textAlign{
text-align: right;
}
.workBox{
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/2.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color:var(--white);
text-align: center;
height:330px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.workBoxImage{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/8.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.workBoxImageOne{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/11.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.workBoxImageTwo{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/19.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.workBoxOne{
background-color: var(--white);
padding:30px 0px;
margin-top: 8%!important;
}
.workboxTwo{
padding-top: 180px;
transition: all .5s;
}
.workBox:hover .workboxTwo{
padding-top: 94px;
}
.let{
margin-top: 8%;
}
.title {
position: relative;
width: 100%;
height:300px;
color: var(--white);
background: var(--secondary);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-left: 25px;
padding-right: 25px;
text-align: center;
}
.title:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: var(--secondary);
transform-origin: bottom left;
transform: skew(-20deg, 0deg);
}
.titles{
position: relative;
width: 100%;
height:300px;
color: var(--white);
background: var(--secondary);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-left: 25px;
padding-right: 25px;
text-align: center;
}
.titles:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: var(--secondary);
transform-origin: bottom left;
transform: skew(20deg, 0deg);
}
.autopayment{
padding-left: 70px;
padding-right: 70px;
}
.titleone{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.present{
font-size: 40px;
}
.testi{
display: flex;
justify-content: center;
align-items: center;
}
.quote{
height:100px;
width:100px;
border-radius: 50%;
background-color: var(--secondary);
color:var(--white);
font-size: 50px;
text-align: center;
padding-top: 22px;
margin-bottom: 20%;
margin-top: -70%;
}
.testimonial{
position: relative;
height:100%;
width:74%;
background-color: var(--white);
padding:0px 10px;
padding-bottom: 20px;
border: 1px solid var(--lightgray);
transition: all 1s;
}
.testi p{
text-align: center;
margin-top: 5%;
}
.testimonial:before{
position: absolute;
content: "";
height:70%;
width:130%;
margin-top: 15%;
background-color: var(--primary);
z-index: -1;
}
.testi:hover .testimonial{
background-color: var(--primary);
border: 1px solid var(--primary);
}
.awards{
background: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)),url('images/14.jfif');
background-repeat: no-repeat;
background-size: cover;
color:var(--white);
padding:30px 0px;
padding-bottom: 35px;
}
.awardsOne{
background: rgba(255, 255, 255, 0.2);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 10px;
padding:30px 20px!important;
padding-bottom: 40px!important;
}
.testimonials-section {
background: #fff;
height: 490px;
position: relative;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 40px 12px;
border-radius: 0%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
appearance: none;
backface-visibility: hidden;
}
.slider__nav:checked {
animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
left: -33%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
left: -366.5%;
}
.slider__inner {
position: absolute;
top: 40px;
left: 0;
width: 500%;
height: auto;
transition: left 0.4s;
display: flex;
}
.slider__contents {
height: 100%;
text-align: center;
display: flex;
flex: 1;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.slider__caption {
font-size: 18px;
color: #111;
opacity: .5;
font-weight: bold;
margin-top: 1%;
margin-bottom: 0.5%;
}
.slider__txt {
font-size: 15px;
line-height: 1.7;
color: #111;
margin-top: -10px;
margin-bottom: 10px;
max-width: 750px;
}
.test-Img{
height:100px;
width:100px;
border-radius: 50%;
background-color: var(--lightgray);
margin-bottom: 1%;
}
/*footer part start*/
footer{
background: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)),url('images/14.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin-top: 0.8%;
padding-top: 30px;
}
footer h5{
color: var(--white);
font-size: 18px;
margin-bottom: 10%;
}
footer a{
color: var(--white);
}
footer p{
color: var(--white);
}
.hr{
color: var(--white);
}
.footerone{
margin-top: 20px;
}
.footertwo{
margin-top: 25px;
}
.emails{
height: 28px;
width: 28px;
color: var(--red);
border: 2px solid var(--red);
border-radius: 50%;
text-align: center;
padding-top: 4px;
margin-right: 5px;
transition: all .2s;
}
.emails:hover{
background-color: var(--red);
color: var(--white);
}
.facebook{
height: 28px;
width: 28px;
color: #3b5998;
border: 2px solid #3b5998;
border-radius: 50%;
text-align: center;
padding-top: 4px;
margin-right: 5px;
transition: all .2s;
}
.facebook:hover{
background-color: #3b5998;
color: var(--white);
}
.insta{
height: 28px;
width: 28px;
color: purple;
border: 2px solid purple;
border-radius: 50%;
text-align: center;
padding-top: 4px;
margin-right: 5px;
transition: all .2s;
}
.insta:hover{
background-color: purple;
color: var(--white);
}
.twitter{
height: 28px;
width: 28px;
color: var(--gray);
border: 2px solid var(--gray);
border-radius: 50%;
text-align: center;
padding-top: 4px;
margin-right: 5px;
transition: all .2s;
}
.twitter:hover{
background-color: var(--gray);
color: var(--white);
}

/*about us part start*/
.aImage{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.etxtsize{
font-size: 15.5px;
}

/*our work part start*/
.fa-circle-check{
margin-right: 5px;
color: var(--primary);
}
.weDo{
background-color: #f1f1f1;
padding-top: 10px;
padding-bottom: 10px;
}
.wrapper{
display: grid;
grid-template-columns: repeat(3, 1fr);
width:1080px;
margin: auto;
gap:10px;
margin-top: 2%;
}
.causeBox{
position: relative;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 8px;
padding-right: 8px;
border-radius: 5px;
border:2px solid var(--secondary);
overflow: hidden;
transition: all 1s;
}
.causeBox:before{
position: absolute;
content: "";
height: 100%;
width:100%;
background:linear-gradient(var(--primary),var(--secondary));
top: 100%;
z-index: -1;
transition: all 1s;
}
.causeBox:hover:before{
top:0%;
}
.causeBox:hover{
color: var(--white);
}
.causeBox p{
/*font-size: 14px;*/
}
.causeOne {
-webkit-text-stroke: 1px var(--primary);
color: white;
font-size: 50px;
text-shadow:
1px  1px 0 var(--primary),
-1px -1px 0 var(--primary),
1px -1px 0 var(--primary),
-1px  1px 0 var(--primary),
1px  1px 0 var(--primary);
}
.wrapperOne{
display: grid;
grid-template-columns: repeat(2, 1fr);
width:1000px;
margin: auto;
gap:10px;
margin-top: 2%;
}

/*contact us part start*/
.contact{
display: flex;
justify-content: center;
flex-direction: column;
}
.map{
width:100%;
height:450px;
}

/*get involved part start*/
.input-group,.input-group-text{
border-radius: 0%!important;
}
.form-control:focus{
border:1px solid var(--lightgray)!important;
outline: none!important;
box-shadow: none!important;
}
.submitBtn{
background-color: var(--primary)!important;
}

/*donate part start*/
.donation{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 27px;
}

/*admin area part start*/
.adminLogin{
display: flex;
justify-content: center;
align-items: center;
height:770px;
}
.adminButton{
background-color: var(--primary)!important;
border: none!important;
}
.formBorder{
padding:30px 15px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.admin{
background-color: var(--primary);
height:50px;
color:var(--white);
}
.admin h4{
display: flex;
align-items: center;
padding-top: 10px;
}
.fa-bars{
margin-right: 0.5rem!important;
}
.textEnd{
text-align: right;
padding-top: 6px;
}
.dt{
background-color: var(--secondary)!important;
box-shadow: none!important;
color:var(--white)!important;
}
.adminOne{
background-color: #333;
height:720px;
}
.adminTwo{
padding:8px 21px;
background-color: var(--white)!important;
margin-top: 4%;
}
.adminTwo a{
color:var(--black);
}
.fa-circle-minus{
color:var(--primary);
}

/*responsive part start*/
@media (max-width:1024px){
.nav-item{
padding-right: 30px;
}
.wrapper{
width:980px;
}
.wrapperOne{
width:980px;
}
.workBox{
position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/2.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: end;
color:var(--white);
text-align: center;
height:330px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding-bottom: 10px;
}
.workBoxOne{
background-color: transparent;
padding:10px 0px;
}
.workboxTwo{
padding-top: 0px;
}
.aboutHeader{
font-size: 25px;
}
.adminLogin{
height:680px;
}
.adminOne{
height:630px;
}
}

@media (max-width:768px){
.time{
font-size: 14px;
}
.logoHeading{
font-size: 40px;
}
.navbar-toggler{
border-radius: 0%!important;
background-color: var(--white)!important;
}
.navbar-toggler:focus{
box-shadow: none!important;
}
nav{
height:55px;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.nav-item{
padding-right: 0px;
}
.nav-link{
color:var(--black)!important;
}
.bg-color-01{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 470px;
}
.bg-color-02{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d1.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 470px;
}
.bg-color-03{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/20.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 470px;
}
.aboutHeader{
font-size: 35px;
}
.order1{
order: 2;
}
.order2{
order: 1;
}
.aboutImage{
margin-top: 4%;
}
.aboutHeader{
margin-top: 1%;
margin-bottom: 1%;
}
.aboutButton{
margin-top: 4%!important;
}
.title {
height:350px;
}
.title:after {
transform: skew(-15deg, 0deg);
}
.titles{
height:350px;
}
.titles:after {
transform: skew(15deg, 0deg);
}
.resfooterGap{
margin-top: 5%!important;
}
.autopayment{
padding-left: 50px;
padding-right: 50px;
}
.present{
font-size: 40px;
}
.resWorkbox{
margin-top: 4%!important;
}
.workboxTwo h5{
font-size: 25px;
}
.restestibox{
margin-top: 14%!important;
}
.textAlign{
text-align: left;
margin-top: 2%!important;
}
.aImage{
margin-bottom: 7%;
}
.wrapper{
width:720px;
}
.causeOne {
font-size: 30px;
}
.wrapperOne{
width:720px;
}
.causeBox p{
font-size: 14px;
}
.slider__nav {
margin: 30px 12px;
}
.slider__inner {
top: 30px;
}
.slider__txt {
font-size: 14px;
max-width: 700px;
padding-left: 50px;
padding-right: 50px;
padding-top: 15px;
padding-bottom: 15px;
}
.dCen{
margin-top: 3%!important;
}
}

@media (max-width:425px){
.goto{
right:6%;
}
.first{
text-align: center;
height:88px;
padding-top: 5px;
}
.second{
height:90px;
}
.secondTwo{
display: none;
}
.b{
display: flex;
justify-content: center;
align-items: center;
}
.logoHeading{
font-size: 26px;
}
.resTextright{
text-align: center;
}
.time{
font-size: 16px;
}
.carousel-indicators button.active::after{
animation: loading 3s ;
}
@keyframes loading{
0%{
width: 0;
}
100%{
width: 88px;
}
}
.bg-color-01{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 250px;
}
.bg-color-02{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d1.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 250px;
}
.bg-color-03{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/20.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 250px;
}
.resaboutCenter{
text-align: center;
}
.order1{
order: 2;
}
.order2{
order: 1;
}
.aboutImage{
margin-top: 6%;
}
.resworkboxOne{
margin-top: 4%!important;
}
.title {
height:300px;
}
.title:after {
display: none;
}
.titles{
height:300px;
}
.titles:after {
display: none;
}
.reststimonial{
margin-top: 7%!important;
}
.reststimonialone{
margin-top: 14%!important;
}
.resfooterGapOne{
margin-top: 5%!important;
}
.resBoard{
margin-top: 9%;
}
footer{
padding-bottom: 15px;
}
.copyright{
text-align: center;
}
.text-right-one{
text-align: center;
}
.map{
width:100%;
height:300px;
}
.adminOne{
height:300px;
}
.adminTwo{
text-align: center;
}
.adminBottom{
margin-bottom: 7%;
}
.resMission{
text-align: center;
margin-top: 5%!important;
}
.rescla{
margin-top: 5%;
}
.wrapper{
display: grid;
grid-template-columns: repeat(1, 1fr);
width:360px;
}
.causeOne {
font-size: 30px;
}
.wrapperOne{
display: grid;
grid-template-columns: repeat(1, 1fr);
width:360px;
}
.causeBox{
padding-top: 15px;
}
.causeBox p{
font-size: 16px;
}
.testimonials-section {
height: 700px;
}
.slider__caption{
margin-bottom: 2%;
}
.slider__nav {
margin: 30px 12px;
}
.slider__inner {
top: 30px;
}
.slider__txt {
font-size: 14px;
max-width: 400px;
padding-left: 50px;
padding-right: 50px;
padding-top: 15px;
padding-bottom: 15px;
}
.adminOne{
height:420px;
}
}

@media (max-width:375px){
.wrapper{
display: grid;
grid-template-columns: repeat(1, 1fr);
width:320px;
}
.wrapperOne{
display: grid;
grid-template-columns: repeat(1, 1fr);
width:320px;
}
.logoHeading{
font-size: 20px;
}
.bg-color-01{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 240px;
}
.bg-color-02{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d1.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 240px;
}
.bg-color-03{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/20.jfif');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 240px;
}
.carousel-indicators button.active::after{
animation: loading 3s ;
}
@keyframes loading{
0%{
width: 0;
}
100%{
width: 75px;
}
}
}