*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden!important;
font-family: "Inter", sans-serif!important;
}
body h1,h2,h3,h4,h5{
font-family: "Exo 2", sans-serif!important;
}
body a{
text-decoration: none;
}
body li{
list-style: none;
}
:root{
--primary: #00b1f7;
--secondary:#2c986a;
--black:#333;
--lightgray:lightgray;
--white:white;
--red:red;
--blue:blue;
--gray:gray;
}
::-webkit-scrollbar{
width:8px;
}
::-webkit-scrollbar-track{
background-color: var(--white);
}
::-webkit-scrollbar-thumb{
background-color: var(--primary);
}
.container{
width:1250px!important;
margin:auto;
}
.common{
background-image: repeating-conic-gradient(#000 0deg 30deg,#444 30deg 60deg);
background-size: 20px 20px;
text-align: center;
color:var(--white);
padding-top: 40px;
padding-bottom: 33px;
}
.common h4{
margin-bottom: 1%;
}
.common a{
color:var(--white);
}
/* navbar part start  */
.arrow{
display: none;
height:35px;
width:35px;
border-radius: 50%;
position: absolute;
content:"";
bottom:3%;
right:1.8%;
border:2px solid var(--primary);
background-color: var(--white);
position: fixed;
color:var(--primary);
z-index: 100;
}
.whatsapp{
height:85px;
width:85px;
position: absolute;
content:"";
right:0.1%;
bottom:6.5%;
position: fixed;
z-index: 101;
}
.logo{
height:80px;
width:100%;
object-fit: contain;
}
.first{
height: 85px;
display: flex;
justify-content: center;
}
.firstC{
display: flex;
justify-content: start;
align-items: center;
}
.navIcon{
height:40px!important;
width:40px!important;
background-color: var(--primary);
color:var(--white);
border-radius: 5px;
padding-top: 12px;
}
.firstCenter{
display: flex;
justify-content: center;
align-items: center;
}
.firstCenterOne{
display: flex;
align-items: center;
height:85px;
}
.firstText{
margin-top: 8px!important;
}
.firstEnd{
display: flex;
justify-content: end;
align-items: center;
}
.firstEnd a{
color:var(--white);
}
nav{
background-color: var(--primary);
}
.nav-item{
padding-right: 70px;
}
.nav-item:last-child{
padding-right: 0px;
}
.nav-link{
font-size: 13.5px!important;
font-weight: 450!important;
color:var(--white)!important;
}
.nav-link:hover{
color:var(--black)!important;
}
.dropdown-menu{
border-radius: 0%!important;
transition: all 0.3s;
}
.dropdown-item:hover{
background-color: var(--white)!important;
color:var(--primary)!important;
}
.dropdown-menu{
transform: translateY(50px);
opacity: 0;
visibility: hidden;
}
.dropdown:hover .dropdown-menu{
transform: translateY(5px);
opacity: 1;
visibility: visible;
}
.act{
color: var(--black)!important;
}
.color{
color: var(--primary);
}
/* index page start  */
header{
display: grid;
grid-template-columns: 1fr 1fr;
background-color: rgb(240, 238, 238);
height:650px;
}
.headerOne{
padding-left: 100px;
padding-right: 70px;
display: flex;
justify-content: center;
flex-direction: column;
}
.headerOne h1{
margin-top: 3%;
margin-bottom: 3%;
font-size: 55px;
font-weight: 700;
}
.headerOne p{
margin-bottom: 6%;
}
.headerOne h6{
letter-spacing: 0.3px;
color:var(--secondary);
font-size: 18px;
}
.headerImage{
height:650px;
width:716px;
object-fit: cover;
}
.btnOne{
padding:11px 27px;
background-color: var(--primary);
color:var(--white);
border-radius: 3px;
background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, .23) 0, transparent 86.18%), 
radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, .75) 0, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
}
.lineBackground{
background-color: #f7f4ef;
height: 250px;
display: flex;
justify-content: center;
}
.line{
position: relative;
height:2px;
width:100%;
background-color: var(--primary);
margin-top: 3%;
margin-bottom: 7%;
}
.line:before{
position: absolute;
content:"";
height:15px;
width:15px;
background-color: var(--white);
border: 2px dotted var(--primary);
top:-7px;
left:48%;
border-radius: 50%;
}
.lineSpace{
padding:0!important;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.lineSpace h2{
font-size: 45px;
font-weight: 700;
}
.about{
border:2px solid var(--primary);
padding:9px 27px;
border-radius: 20px;
font-size: 15px;
text-align: center;
width:25%;
}
.aboutImage{
height:342px;
width:285px;
object-fit: cover;
margin-top: 20%;
border-radius: 7px;
}
.aboutImageOne{
height:250px;
width:288px;
object-fit: cover;
border-radius: 7px;
}
.aboutBox{
background-color: var(--black);
color:var(--white);
text-align: center;
padding-bottom: 7px;
padding-top: 7px;
border-radius: 7px;
margin-top: 5%;
}
.aboutBox h2{
font-size: 60px;
}
.aboutLeft{
padding-left: 30px!important;
}
.aboutLeft h6{
margin-bottom: 3%;
}
.missionBackground{
background-color: #f7f4ef;
height: 400px;
display: flex;
justify-content: center;
}
.mission{
padding-right: 25px!important;
}
.mission h2{
font-size: 41px;
font-weight: 700;
margin-top: 5%;
margin-bottom: 5%;
}
.mission p{
margin-bottom: 10%;
}
.mission small{
letter-spacing: 1px;
color:var(--primary);
font-weight: 500;
}
.missionBox{
position: relative;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
height:300px;
width:100%;
padding-left: 10px;
padding-right: 10px;
display: flex;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.missionBoxOne{
background-color: #0a201c;
color:var(--white)
}
.missionIcon{
height:50px;
width:50px;
background-color:var(--secondary);
border-radius:5px;
font-size: 20px;
color:var(--white);
display: flex;
justify-content: center;
align-items: center;
}
.missionBox h5{
margin-top: 5%;
margin-bottom: 5%;
}
.circle{
position: absolute;
content: "";
top:-30px;
right:-30px;
height:100px;
width:100px;
background-color: var(--primary);
border-radius: 50%;
}
.gap{
margin-top: 4%;
}
.dummy{
height:350px;
color:var(--white);
}
.dummyOne{
background:linear-gradient(rgba(234,83,58,0.94),rgba(234,83,58,0.94)),url('images/14.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:350px;
padding-left: 10px;
padding-right: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.dummyTwo{
background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url('images/18.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.dummyThree{
background:linear-gradient(rgba(91,138,176,0.9),rgba(91,138,176,0.9)),url('images/6.jpeg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.dummyText p{
margin-top: 7%;
margin-bottom: 7%;
}
.dummyText h5{
font-weight: 800;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.dummyText h5:before{
position: absolute;
content:"";
height:3px;
width:50px;
background-color: var(--white);
bottom:-10px;
text-align: center;
}
.btnOutline{
border: 2px solid var(--white);
padding:8px 30px;
border-radius: 50px;
color:var(--white);
}
.join{
position: relative;
height:450px;
display: flex;
justify-content: center;
align-items: center;
}
.joinTop{
margin-top: 6%;
}
.volunteer{
width:40%;
margin: auto;
text-align: center;
}
.volunteer h5{
font-size: 25px;
font-weight: 400;
letter-spacing: 1px;
}
.volunteer h2{
font-size: 30px;
font-weight: 300;
}
.img1{
position: absolute;
content:"";
top:10px;
left:100px;
height:180px;
width:130px;
object-fit: cover;
border-radius: 7px;
}
.img2{
position: absolute;
content:"";
bottom:10px;
left:200px;
height:120px;
width:150px;
object-fit: cover;
border-radius: 7px;
}
.img3{
position: absolute;
content:"";
top:10px;
right:100px;
height:120px;
width:150px;
object-fit: cover;
border-radius: 7px;
}
.img4{
position: absolute;
content:"";
bottom:30px;
right:155px;
height:150px;
width:150px;
object-fit: cover;
border-radius: 7px;
}
.facBorder{
border-top: 1px solid var(--lightgray);
border-bottom: 1px solid var(--lightgray);
height:90px;
transition: 0.5s!important;
}
.facBorder:hover{
border-top: 1px solid var(--primary);
border-bottom: 1px solid var(--primary);
}
.facBorderBottom:hover{
border-bottom: 1px solid var(--primary);
}
.facBorder:hover .facImage{
transform: rotate(6deg);
}
.facBorderBottom:hover .facImage{
transform: rotate(6deg);
}
.facBorder:hover .facIcon{
background-color: var(--primary);
}
.facBorderBottom:hover .facIcon{
background-color: var(--primary);
}
.facBorder:hover .arrowRight{
color:var(--white)!important;
transform: rotate(0deg);
}
.facBorderBottom:hover .arrowRight{
color:var(--white)!important;
transform: rotate(0deg);
}
.facBorderBottom{
border-bottom: 1px solid var(--lightgray);
height:90px;
}
.facLeft{
display: flex;
align-items: center;
}
.facCenter{
display: flex;
justify-content: center;
align-items: center;
}
.facImage{
height:75px;
width:75px;
object-fit: cover;
border-radius: 7px;
transition: 0.5s;
}
.facIcon{
height:60px;
width:60px;
background-color: var(--lightgray);
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: 0.5s;
}
.arrowRight{
transform: rotate(-30deg);
color:var(--black)!important;
transition: 0.5s;
}
.activity{
display: grid!important;
grid-template-columns: auto auto!important;
gap:5px;
}
.activityImage{
height:100%;
width:100%;
}
.item2{
display: grid!important;
grid-template-columns: auto auto!important;
gap:5px;
}
/* animation part start  */
.animationUp{
animation: animationup both;
animation-timeline: view(70% 15%);
}
@keyframes animationup{
0%{
opacity: 0;
transform: translateY(200px);
}
100%{
opacity: 1;
transform: translateY(0px);
}
}
.animationZoomUp{
animation: animationzoomup both;
animation-timeline: view(80% 10%);
}
@keyframes animationzoomup{
0%{
opacity: 0;
transform: translateY(200px) scale(0.3);
}
100%{
opacity: 1;
transform: translateY(0px) scale(1);
}
}
.circleAnimation{
animation: animationcircle both;
animation-timeline: view(40% 5%);
}
@keyframes animationcircle{
100%{
font-size: 150px;
}
}
.leftAnimation{
animation: leftanimation both;
animation-timeline: view(80% 5%);
}
@keyframes leftanimation{
0%{
opacity: 0;
transform: translateX(200px);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
.rightAnimation{
animation: rightanimation both;
animation-timeline: view(80% 5%);
}
@keyframes rightanimation{
0%{
opacity: 0;
transform: translateX(-200px);
}
100%{
opacity: 1;
transform: translateX(0px);
}
}
/* footer part start  */
footer{
background-color: #0a201c;
color:var(--white);
padding-top: 35px;
padding-bottom: 5px;
}
footer a{
color:var(--white);
}
footer img{
margin-bottom: 5%;
}
footer h4{
font-size: 23px;
margin-bottom: 10%;
}
.footerOne{
padding-right: 30px!important;
}
.footerTwo{
position: relative;
}
.footerTwo:before{
position: absolute;
content: "";
height:3px;
width:50px;
background-color: var(--primary);
bottom:-5px;
}
.facebook{
height:35px!important;
width:35px!important;
background-color: #3b5998;
padding-top: 9px;
color:var(--white)!important;
border-radius: 50%;
}
.instagram{
height:35px!important;
width:35px!important;
background-color: #962fbf;
padding-top: 9px;
color:var(--white)!important;
border-radius: 50%;
}
.twitter{
height:35px!important;
width:35px!important;
background-color: black;
padding-top: 9px;
color:var(--white)!important;
border-radius: 50%;
}
.youtube{
height:35px!important;
width:35px!important;
background-color: var(--red);
padding-top: 9px;
color:var(--white)!important;
border-radius: 50%;
}
.socialIcon{
margin-top: 7%!important;
}
.socialIcon a{
margin-left: 5px;
}
.socialIcon a:nth-child(1){
margin-left: 0px;
}
.footerIcon:hover{
background-color: var(--white)!important;
color:var(--black)!important;
}
.icon{
height:30px!important;
width:30px!important;
border:2px solid var(--white);
border-radius: 50%;
padding-top: 4.5px;
}
.footerThree{
margin-top: 7%!important;
}
.footerFour{
margin-bottom: 13%!important;
}
.footerFive{
margin-bottom: 3%!important;
}
.footerSix{
margin-top: 9.7%;
}
/* about page start  */
.board{
height:225px;
width:225px;
padding:10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 50%;
margin-bottom: 8%;
}
/* gallery part start  */
.columnCount{
column-count: 4;
}
.rowGap{
row-gap: 18px;
}
/* contact box part start  */
.contactBox{
background-color: #f1f1f1;
height:180px;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0px 20px 0px 20px;
}
.contactLeft{
padding-top: 15px;
}
.contactRight{
display: flex;
justify-content: end;
align-items: start;
}
.cIcon{
height:60px!important;
width:60px!important;
border:2px solid var(--lightgray);
font-size: 25px;
padding-top: 15px;
border-radius: 50%;
color:var(--lightgray);
background-color: var(--white);
transition: all 0.3s;
}
.contactBox:hover{
background-color: var(--white);
}
.contactBox:hover .cIcon{
background-color: var(--primary);
color:var(--white);
border:2px solid var(--primary);
}
.contactBoxOne{
padding:30px 30px 40px 30px!important;
background-color: #f1f1f1;
}
.form-group{
margin-top: 2.5%!important;
}
.form-control{
height:43px;
border-radius: 0%!important;
}
.form-control:focus{
box-shadow: none!important;
border:1px solid var(--lightgray)!important;
}
.contactBtn{
background-color: var(--primary);
border:none;
padding: 10px 27px;
color:var(--white);
}
.map{
height:400px;
width:100%;
margin-top: 4%;
}
/* member part start  */
.memberBox{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
height:450px;
}
.formBtn{
padding:9px 27px;
background-color: var(--primary);
outline: none;
border:none;
color: var(--white);
}
.memberBg{
height:450px;
width:100%;
background:rgb(203, 145, 79,0.7);
border-top-right-radius: 300px;
border-bottom-right-radius: 300px;
}
.member{
padding-left: 35px!important;
padding-right: 35px!important;
padding-top: 15px;
}
.formControl{
border-top: none!important;
border-left: none!important;
border-right: none!important;
border-bottom: 1px solid var(--lightgray)!important;
}
.formControl:focus{
border:none!important;
border-bottom: 1px solid var(--lightgray)!important;
}
label{
margin-bottom: 1%;
}
/* donate part start  */
.donateBox{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:20px 15px;
padding-top: 25px;
}

/*admin area part start */
.admin{
height:60px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.admin h4{
font-size: 37px;
font-weight: 600;
padding-top: 5px;
letter-spacing: 1px;
}
.adminOne{
box-shadow: rgba(0, 0, 0, 0.15) 2.4px 0.1px 3.2px;
height:710px;
}
.adminTwo{
background-color: #555;
height:40px;
display: flex;
align-items: center;
padding-left: 15px;
margin-top: 6%;
}
.adminTwo a{
color:var(--white);
}
.fa-circle-minus{
color:var(--red);
}
.adminForm{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding:20px;
padding-bottom: 35px;
}
.login{
height:773px;
display: flex;
justify-content: center;
align-items: center;
}

/* responsive part start  */
@media (max-width:1024px){
.arrow{
right:2.3%;
}
.container{
width:1000px!important;
}
.nav-item{
padding-right: 60px;
}
header{
grid-template-columns: 50% 50%;
height:515px;
}
.headerOne{
padding-left: 60px;
padding-right: 50px;
}
.headerOne h1{
margin-top: 4%;
margin-bottom: 5%;
font-size: 45px;
}
.headerOne p{
margin-bottom: 10%;
}
.headerOne h6{
letter-spacing: 0.3px;
}
.headerImage{
height:515px;
width:510px;
}
.about{
width:35%;
}
.resEnd{
display: flex;
align-items: end;
}
.aboutImage{
height:300px;
width:230px;
margin-top: 50%;
box-shadow: none;
}
.aboutImageOne{
height:250px;
width:218px;
box-shadow: none;
margin-bottom: 6%;
}
.aboutLeft{
padding-left: 20px!important;
}
.mission h2{
font-size: 35px;
}
@keyframes animationcircle{
100%{
font-size: 100px;
}
}
.board{
height:200px;
width:200px;
}
@keyframes leftanimation{
0%{
transform: translateY(200px);
}
}
@keyframes rightanimation{
0%{
transform: translateY(200px);
}
}
.contactLeft{
padding-top: 10px;
}
.cIcon{
height:45px!important;
width:45px!important;
font-size: 20px;
padding-top: 12px;
}
.login{
height:660px;
}
.adminOne{
height:595px;
}
}
@media (max-width:768px){
.arrow{
right:3%;
}
.container{
width:700px!important;
}
.dNone{
display: none;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.navbar-toggler{
background-color: var(--white)!important;
border-radius: 0%!important;
}
.navbar-toggler:focus{
box-shadow: none!important;
outline: none!important;
}
.nav-item{
padding-right: 0px;
padding-top: 10px;
}
.nav-item:first-child{
padding-top: 0px;
}
.nav-link{
color:var(--black)!important;
}
.headerOne{
padding-left: 50px;
padding-right: 50px;
}
.headerOne h1{
font-size: 30px;
}
.headerImage{
width:382px;
}
.lineSpace h5{
font-size: 17px;
}
.about{
width:22%;
}
.joinTop{
margin-top: 5%;
}
.aboutImageOne{
display: none;
}
.aboutImage{
height:500px;
width:675px;
margin-top: 0%;
}
.aboutLeft{
margin-top: 4%!important;
}
.missionBackground{
background-color: #f7f4ef;
height: 600px;
display: flex;
justify-content: center;
}
.mission h2{
margin-top: 2%;
margin-bottom: 3%;
}
.mission p{
margin-bottom: 4%;
}
.resMissionTop{
margin-top: 5%!important;
}
.join{
height:400px;
}
.volunteer h5{
font-size: 20px;
}
.volunteer{
width:60%;
}
.img1{
left:40px;
}
.img2{
left:100px;
}
.img3{
right:40px;
}
.img4{
bottom:20px;
right:85px;
}
footer img{
margin-bottom: 2%;
}
footer h4{
font-size: 20px;
margin-bottom: 10%;
}
.footerOne{
padding-right: 0px!important;
margin-bottom: 5%;
}
.socialIcon{
margin-top: 3%!important;
}
.socialIcon a{
margin-left: 5px;
}
.board{
height:250px;
width:250px;
}
.memberBox{
height:420px;
}
.memberBg{
height:420px;
}
.resContactTop{
margin-top: 3.5%!important;
}
.map{
height:300px;
}
.admin h4{
font-size: 30px;
padding-top: 10px;
}
}
@media (max-width:425px){
.arrow{
right:5.5%;
}
.logo{
height:80px;
width:100%;
}
.first{
height: 90px;
display: flex;
justify-content: end;
}
.container{
width:400px!important;
}
.firstEnd{
justify-content: end;
}
header{
grid-template-columns: 1fr;
height:800px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.headerOne{
text-align: center;
margin-bottom: 10%;
}
.headerImage{
height:360px;
width: 100%;
}
.lineBackground{
height: 650px;
padding-left: 50px!important;
padding-right: 50px!important;
}
.lineSpace{
margin-top: 10%!important;
}
.lineSpace:first-child{
margin-top: 0%!important;
}
.aboutImage{
width:100%;
height:410px;
}
.about{
width:40%;
}
.joinTop{
margin-top: 8%!important;
}
.missionBackground{
height: 1200px;
}
.mission h2{
margin-top: 4%;
margin-bottom: 4%;
}
.mission p{
margin-bottom: 8%;
}
.missionBox{
height:260px;
padding-left: 30px;
margin-top: 5%;
}
.facBorder,.facBorderBottom{
height:280px;
}
.rcCenter{
display: flex;
justify-content: center;
align-items: center;
}
.activityImage{
display: none;
}
.item2{
grid-template-columns: auto!important;
}
.img1,.img2,.img3,.img4{
display: none;
}
.join{
height:340px;
}
.volunteer{
width:100%;
}
.volunteer h5{
font-weight: 500;
letter-spacing: 0.1px;
}
.volunteer h2{
font-size: 30px;
font-weight: 500;
}
.dummy{
height:750px;
}
.dummyOne{
height:250px;
}
.footerSix{
margin-top: 6%;
}
.footerFour{
margin-bottom: 10%!important;
}
.footerFive{
margin-bottom: 10%!important;
}
.resFooter{
margin-top: 6%!important;
}
.common h4{
margin-bottom: 3%;
}
.board{
height:220px;
width:220px;
}
.columnCount{
column-count: 1;
}
.memberBg{
display: none;
}
.memberBox{
height:410px;
}
.resContactTopOne{
margin-top: 3.5%!important;
}
.contactRight{
justify-content: start;
}
.order1{
order:2;
margin-top: 3%!important;
}
.contactBox{
height:200px;
}
.map{
width:88%;
margin-left: 6%;
}
.admin{
text-align: center;
}
.adminOne{
box-shadow: none;
border-bottom: 1px solid var(--lightgray);
height:235px;
width:90%!important;
margin-left: 5%;
}
.adminTwo{
display: flex;
align-items: center;
justify-content: center;
padding-left: 0px;
margin-top: 4%;
}
.adminBottom{
margin-bottom: 7%;
}
}

@media (max-width:375px){
.container{
width:350px!important;
margin: auto!important;
}
header{
height:750px;
}
.headerOne h6{
font-size: 14px;
}
.headerImage{
height:310px;
}
.about{
width:50%;
}
.aboutImage{
height:350px;
}
.gap{
margin-top: 7%;
}
.missionBackground{
height: 1150px;
}
.facBorder,.facBorderBottom{
height:290px;
}
.contactBox{
height:240px;
}
.map{
height:250px;
}
.board{
height:200px;
width:200px;
}
.columnCount{
margin-top: 5%!important;
}
.adminOne{
height:225px;
}
}