*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body{
font-size: 15.5px;
}
body a{
text-decoration: none;
}
:root{
--secondary:#ffa64d;
--primary:#0077b3;
--black:black;
--red:red;
--gray:gray;
--lightgray:lightgray;
--white:white;
}
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background-color: var(--white);
}
::-webkit-scrollbar-thumb{
background-color: var(--secondary);
}
.whatsapp{
position: absolute;
content:"";
position: fixed;
bottom:10%;
right:2%;
height:80px;
width:80px;
z-index: 500;
}
.goto{
border:none;
position: absolute;
content:"";
position: fixed;
bottom:5%;
right:3.5%;
background-color: transparent;
color:var(--primary);
rotate: -90deg;
font-size: 30px;
z-index: 500;
animation: run 1s linear infinite alternate-reverse;
}
@keyframes run{
0%{
transform: translateX(-10px);
}
100%{
color:var(--secondary);
transform: translateX(0px);
}
}
.common{
background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url('images/common.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:150px;
color:var(--white);
display: flex;
justify-content: center;
align-items: center;
}
.common a{
color:var(--white);
}
.colorblack {
background-color: var(--black);
color:var(--white);
}
.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;
}
/*navbar part start*/
nav{
height:100px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.logo{
height:96px;
}
.nav-item{
padding-right: 30px;
}
.nav-item:last-child{
padding-right: 0px;
}
.nav-link{
font-size: 13.5px!important;
font-weight: 450!important;
color:var(--gray)!important;
}
.nav-link:hover{
color:var(--secondary)!important;
}
.change{
font-size: 13px!important;
padding:10px 27px!important;
background-color: var(--primary);
color:var(--white);
border:none;
}
nav .nav-link.active{
color:var(--secondary)!important;
}

/*index part start*/
.headerOne{
height:580px;
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);
}
.readMore{
padding:10px 27px;
background-color: var(--primary);
color:var(--white);
box-shadow: 5px 5px var(--secondary);
transition: all .6s;
}
.readMore:hover{
box-shadow: -5px -5px var(--secondary);
}
.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: 45px;
font-family: "Agbalumo", system-ui;
font-weight: 400;
margin-top: 2%;
margin-bottom: 4%;
}
.headerTwo p{
margin-bottom: 6%;
}
.color{
color: var(--primary);
font-family: "Agbalumo", system-ui;
font-weight: 400;
}
.reach{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/d6.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding:40px;
color:var(--white);
padding-bottom: 30px;
}
.count{
height: 120px;
width: 120px;
border-radius: 50%;
color: var(--white);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border: 7px solid var(--white);
border-left-color: var(--primary);
margin-bottom: 5%;
font-size: 40px;
transition: all 1s;
border-radius: 62% 38% 53% 47% / 30% 50% 50% 70% ;
}
.count:hover{
background-color: var(--primary); 
}
.countOne{
border-top-color: var(--primary);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;
}
.countTwo{
border-top-color: var(--primary);
border-right-color: var(--primary);
border-radius: 65% 35% 80% 20% / 42% 64% 36% 58% ;
}
.countThree{
border-top-color: var(--primary);
border-right-color: var(--primary);
border-bottom-color: var(--primary);
border-radius: 46% 54% 56% 44% / 49% 43% 57% 51% ;
}
.gap{
margin-top: 4%;
}
.heading{
color: var(--primary);
font-family: "Agbalumo", system-ui;
font-weight: 400;
letter-spacing: 1px;
}
.about{
padding-left: 45px!important;
}
.btnTop{
margin-top: 6%;
}
.work{
padding-left: 10px;
}
.colors{
color: var(--secondary);
font-family: "Agbalumo", system-ui;
font-size: 30px;
padding-right: 3px;
transition: all .8s;
}
.workOne{
position: relative;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
overflow: hidden;
}
.workTwo{
padding-top: 10px;
padding-bottom: 10px;
transition: all .8s;
}
.workTwo:hover{
background-color: var(--secondary);
}
.workTwo:hover .colors{
color: var(--primary);
}
.gray{
position: absolute;
content: "";
height:100%;
width:70px;
background-color: var(--gray);
z-index: -1;
filter: blur(130px);
}
.poor{
padding-top: 50px;
padding-bottom: 40px;
padding-left: 25px!important;
padding-right: 25px!important;
transition: all .5s;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.poors{
background-color: var(--primary);
color:var(--white);
}
.poorone{
display: flex;
justify-content: center;
align-items: center;
}
.poortwo{
padding-left: 20px!important;
}
.poor:hover{
transform: perspective(900px) rotateX(15deg);
box-shadow: 2px 25px 32px -8px rgba(0, 0, 0, 0.75);
}
.cap{
color: var(--secondary);
font-size: 35px!important;
}
.arrow{
color:var(--secondary);
}
.row-gap{
row-gap: 35px;
}
.memebr{
height:200px;
width:200px;
border-radius: 50%;
background-color: var(--white);
margin-bottom: 7%;
border:3px dashed var(--primary);
padding:5px;
}
.whatWeDo{
margin-top: 5%!important;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
}
.contain{
height: 550px;
display: flex;
flex-wrap: nowrap;
justify-content: start;
}
.cards{
width:50px;
cursor: pointer;
overflow: hidden;
border-radius: 2rem;
margin:0 15px;
transition:all 1s;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
input{
display: none;
}
input:checked + label{
width:800px;
}
.cards[for="c1"]{
background:linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d4.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.cards[for="c2"]{
background:linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d2.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.cards[for="c3"]{
background:linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/d3.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

/*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;
background-position: center;
box-shadow: -2px -2px 5px var(--primary);
padding:30px 0px;
padding-bottom: 16px;
color:var(--white);
}
footer a{
color:var(--white);
}
footer h4{
margin-bottom: 8%;
}
.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;
}
.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);
}

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

/*contact us part start*/
.touch{
color:var(--secondary);
}
.input-group,.input-group-text,.form-control{
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;
width:20%!important;
color:var(--white)!important;
}
.map{
width:100%;
height:400px;
margin-top: 5px;
}

/*donate part start*/
.donateBox{
border: 1px solid var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding-left: 20px;
padding-top: 30px;
padding-bottom: 15px;
}

@media (max-width:1024px){
.nav-item{
padding-right: 20px;
}
.workTwo{
padding-top: 15px;
padding-bottom: 40px;
}
.smallEmail{
font-size: 14px;
}
}

@media (max-width:768px){
.res-nav{
margin-top: -1.7%;
}
.navbar-toggler{
border-radius: 0%!important;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.nav-item{
padding-right: 0px;
}
.headerOne{
height:1070px;
text-align: center;
}
.rescurve{
display: flex;
justify-content: center;
}
.about{
margin-top: 6%!important;
}
.footerTwo p{
margin-top: 1%;
margin-bottom: 3%;
}
.resFooter{
margin-top: 4%!important;
}
.contain{
height: 450px;
}
input:checked + label{
width:500px;
}
}

@media (max-width:425px){
.goto{
right:6%;
}
.res-nav{
margin-top: -3%;
}
.headerOne{
height:850px;
text-align: left;
}
.rescurve{
justify-content: left;
}
.about{
padding-right: 15px!important;
padding-left: 20px!important;
}
.headerTwo h1{
font-size: 35px;
}
.headerTwo{
margin-bottom: 6%;
}
.resStates{
margin-top: 5%!important;
}
.resgap{
margin-top: 8%!important;
}
.poortwo{
text-align: center;
margin-top: 5%!important;
}
.respWork{
margin-top: 8%!important;
}
.gap{
margin-top: 5%;
}
.respfooterAbout{
margin-top: 5%!important;
}
.order1{
order:2;
}
.order2{
order:1;
}
.rescopyright{
text-align: center;
margin-top: 5%!important;
}
.smallEmail{
font-size: 16px;
}
.map{
height:250px;
}
.submitBtn{
width:30%!important;
}
.contain{
height: 250px;
}
.cards{
width:20px;
margin:0 5px;
}
input:checked + label{
width:300px;
}
.resWhatWe{
text-align: center;
}
}

@media (max-width:375px){
.headerOne{
height:800px;
}
.resgap{
margin-top: 10%!important;
}
.respWork{
margin-top: 12%!important;
}
.contain{
height: 200px;
}
input:checked + label{
width:300px;
}
}