*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body{
overflow-x: hidden;
}
body a{
text-decoration: none;
}
body p{
font-size: 16px;
}
:root{
--primary:#394D66;
--secondary:#26b017;
--red:red;
--black:black;
--gray:gray;
--lightgray:lightgray;
--white:white;
}
.top{
position: absolute;
content: "";
height:35px;
width:35px;
border:2px solid var(--primary);
background-color: var(--white);
border-radius: 50%;
position: fixed;
bottom:4%;
right:3%;
z-index: 100;
}
.whatsapp{
position: absolute;
content: "";
height:75px;
width:75px;
position: fixed;
bottom:8%;
right:1.8%;
z-index: 100;
}

/*navbar page start*/
.first{
background-color: var(--primary);
padding-top: 4px;
padding-bottom: 4px;
}
.first a{
color:var(--white);
}
.textRight{
text-align: right;
}
.time{
color:var(--white)!important;
}
.second{
display: flex;
justify-content: center;
align-items: center;
height:96px;
}
.secondTwo{
display: flex;
justify-content: end;
align-items: center;
}
.logoHeading{
font-size: 48px;
color:var(--primary);
font-weight: 800;
}
.secondOne{
display: flex;
align-items: center;
}
.donate{
padding:12px 30px;
background-color: var(--primary);
color:var(--white);
font-size: 14px;
font-weight: 600;
}
nav{
height: 50px;
background-color: var(--primary);
}
.logo{
height:90px;
margin-right: 10px;
}
.nav-link{
font-size: 13.5px!important;
font-weight: 500!important;
color:var(--white)!important;
}
.nav-item{
padding-right: 50px;
}
.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;
}
nav .nav-link.active{
color:var(--white)!important;
}
.call{
height:28px;
width:28px;
border:2px solid var(--white);
text-align: center;
border-radius: 50%;
padding-top: 4px;
margin-right: 5px;
color:var(--white);
}
.social{
display: flex;
flex-direction: column;
position: absolute;
content: "";
top:40%;
z-index: 100;
right:0;
position: fixed;
}
.icon{
color:var(--white);
padding-left: 10px;
padding-right: 10px;
padding-top: 7px;
padding-bottom: 7px;
transform: translateX(88px);
transition: all 1.5s;
}
.icon:hover{
transform: translateX(0px);
}
.iconOne{
background-color: #3b5998;
}
.iconTwo{
background-color: purple;
}
.iconThree{
background-color: var(--black);
}
.iconFour{
background-color: var(--red);
}
.data{
padding-right: 10px;
}

/*index page start*/
.home{
background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/c11.jpg');
background-repeat: no-repeat;
background-size: cover;
height:592px;
}
.u{
color:var(--white);
}
.make{
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),url('images/1.jpg');
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
height:200px;
color: var(--white);
}
.makeOne{
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
flex-direction: column;
height:200px;
color: var(--white);
}
.gap{
margin-top: 3%;
}
.color{
color:var(--secondary)!important;
}
.services{
background:linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.9)),url(images/a2.jpg);
background-repeat: no-repeat;
background-size: cover;
height:270px;
border-radius: 10px;
color:var(--white);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 30%;
}
.services-one{
background:linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.9)),url(images/h3.png);
background-repeat: no-repeat;
background-size: cover;
}
.services-two{
background:linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.9)),url(images/p.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.services-three{
background:linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.9)),url(images/env1.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.dot{
position: relative;
height:13px;
width:13px;
background-color: var(--white);
border-radius: 50%;
margin-top: 3%;
margin-bottom: 5%;
}
.dot::before{
position: absolute;
content: "";
height: 5px;
width:70px;
background-color:var(--white);
clip-path: polygon(0 49%, 100% 94%, 100% 6%);
left:-75px;
top:4px;
border-radius:50px;
}
.dot::after{
position: absolute;
content: "";
height: 5px;
width:70px;
background-color:var(--white);
clip-path: polygon(100% 49%, 0% 94%, 0 6%);
left:20px;
top:4px;
border-radius:50px;
}
.aim{
height:400px;
color:var(--white);
background-color: var(--primary);
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
}
.aimOne{
background-color: var(--secondary);
font-size: 18px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 4%;
padding-left: 5px;
padding-right: 5px;
}
.aim p{
font-size: 15px;
}
.fa-circle-check{
color:var(--secondary);
}
.row-gap{
row-gap: 25px;
}
.bright{
border-right: 1px dotted var(--primary);
}
.mission{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.mission h5{
margin-bottom: 5%;
}
.missionIcon{
height: 100px;
width: 100px;
background-color: var(--white);
border-bottom: 10px solid var(--primary);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
font-size: 40px!important;
border-radius: 50%;
margin-bottom: 7%;
display: flex;
justify-content: center;
align-items: center;
}
.fa-quote-right{
font-size: 35px;
color: var(--gray);
margin-bottom: 3%;
}
.short{
margin-left: -250%;
color: var(--black);
font-size: 20px;
}
.long{
margin-left: 250%;
color: var(--black);
font-size: 20px;
}

/*footer part start*/
footer{
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;
background-attachment: fixed;
color: var(--lightgray);
padding-top: 35px;
margin-top: 1%;
}
footer h5{
color: var(--main);
font-size: 18px;
margin-bottom: 10%!important;
}
.footer-one{
border-right: 1px dotted var(--gray);
}
.footer-one p{
margin-top: 3%;
margin-bottom: 5%;
}
.footer-two{
margin-top: 4%;
}
.footer-two a{
color: var(--lightgray);
} 
.calls{
height: 28px;
width: 28px;
color: blue;
border: 2px solid blue;
border-radius: 50%;
text-align: center;
padding-top: 4px;
margin-right: 5px;
transition: all .2s;
}
.calls:hover{
background-color: blue;
color: var(--white);
}
.emailshort{
font-size: 15px!important;
}
.emails{
height: 28px;
width: 28px;
color: red;
border: 2px solid red;
border-radius: 50%;
text-align: center;
padding-top: 4px;
margin-right: 5px;
transition: all .2s;
}
.emails:hover{
background-color: 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 page start*/
.common{
background:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(images/5.jpg);
background-repeat: no-repeat;
background-size: cover;
height:150px;
color:var(--white);
padding-top: 50px;
}
.common a{
color:var(--white);
}
.board{
height:150px;
width:150px;
border-radius: 50%;
margin-bottom: 6%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.president{
display: flex;
justify-content: end;
align-items: center;
}
.presidentMessage{
background-color: var(--lightgray);
}

/*contact us page start*/
.contact{
background-color: var(--primary);
height:400px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.map{
height:400px;
width:100%;
margin-left: 2.3%;
}
.contactOne{
display: flex;
justify-content: center;
flex-direction: column;
background-color: var(--primary);
color:var(--white);
height:400px;
}

/*get involved page start*/
.form{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:40px 20px;
padding-top: 25px;
}
.form-group{
margin-top: 3%;
}
.form-control{
margin-top: 1%;
height:40px;
border-radius: 0%!important;
}
.form-control:focus{
box-shadow: none!important;
border-color: var(--lightgray)!important;
}
.formSubmit{
background-color: var(--primary)!important;
color:var(--white)!important;
}

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

/*responsive part start */

@media (max-width:1024px){
.social{
top:43%;
}
.home{
background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/c11.jpg');
background-repeat: no-repeat;
background-size: cover;
height:510px;
}
.emailSmall{
font-size: 12.7px;
}
.aim{
height:550px;
}
.aimOne{
font-size: 17px;
}
.map{
margin-left: 3.1%;
}
}

@media (max-width:768px){
.whatsapp{
right:1%;
}
.callSmall{
font-size: 11px;
}
.callS{
padding-top: 7px;
}
.logoHeading{
font-size: 30px;
}
.logo{
height:85px;
}
.resNav{
margin-top: -0.4%;
}
.navbar-toggler{
border-radius: 0%!important;
background-color: var(--white)!important;
}
.navbar-toggler:focus{
box-shadow: none!important;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.nav-link{
color:var(--black)!important;
}
.nav-item{
padding-right: 0px;
}
.order1{
order:2;
}
.order2{
order: 1;
}
.resRowGap{
row-gap: 25px;
}
.aim{
height:400px;
}
footer h5{
margin-bottom: 8%!important;
}
.emailSmall{
font-size: 16px;
}
.president{
display: flex;
justify-content: center;
align-items: center;
}
.contact{
height:740px;
}
.map{
height:370px;
margin-left: 0%;
}
.contactOne{
padding-left: 25px!important;
padding-right: 25px!important;
height:370px;
}
}

@media (max-width:425px){
.top{
right:4%;
}
.whatsapp{
right:0%;
}
.callSmall{
font-size: 15px;
}
.callS{
padding-top: 4px;
}
.second{
height:130px;
}
.logoHeading{
font-size: 21px;
}
.logo{
height:80px;
}
.secondTwo{
display: flex;
justify-content: center;
align-items: center;
}
.donate{
padding:8px 27px;
}
.resNav{
margin-top: -0.5%;
}
.home{
background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/c11.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:300px;
}
.social{
display: none;
}
.first{
text-align: center;
padding-top: 5px;
}
.textRight{
text-align: center;
}
.order1{
order:1;
}
.order2{
order: 2;
}
.make ,.makeOne{
margin: auto;
text-align: center;
margin-top: 1%!important;
}
.aim{
height:350px;
}
.resTestimonial{
padding-left: 50px!important;
padding-right: 50px!important;
}
.short{
font-size: 12px;
}
.long{
font-size: 12px;
}
.footerOne{
margin-bottom: 8%!important;
}
.bright{
border-right: none;
}
}

@media (max-width:375px){
.logoHeading{
font-size: 17px;
}
.resNav{
margin-top: -0.9%;
}
.home{
background:linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/c11.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:270px;
}
.aim{
height:400px;
}
}