* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Nunito", sans-serif;
}
body a {
text-decoration: none;
}
body li {
list-style: none;
}
:root {
--primary: #4a5684;
--secondary: #98d516;
--red: red;
--blue: blue;
--white: white;
--black: #333;
--gray: gray;
--lightgray: lightgray;
}
.container {
max-width: 1250px !important;
}
.moving{
position: absolute;
content:"";
height:32px;
width:32px;
border:2px solid var(--secondary);
border-radius: 50%;
background-color: var(--white);
color:var(--secondary);
bottom:4%;
right:2.5%;
position: fixed;
z-index: 100;
}
.whatsapp{
height:80px;
width:80px;
position: absolute;
content:"";
position: fixed;
z-index: 101;
bottom:7.5%;
right:1%;
}
::-webkit-scrollbar{
width:8px;
}
::-webkit-scrollbar-track{
background-color: var(--white);
}
::-webkit-scrollbar-thumb{
background-color: var(--primary);
border-radius: 3px;
}
/* navbar page start  */
.first {
background-color: #333;
color: var(--white);
padding-top: 3px;
padding-bottom: 3px;
}
.first a {
color: var(--white) !important;
}
.navbarIcon {
height: 28px;
width: 28px;
border: 2px solid var(--white);
border-radius: 32px;
text-align: center;
padding-top: 4px;
margin-right: 5px;
transition: all 0.5s;
}
.navbarIcon:hover{
background-color: var(--white);
color:var(--black);
}
.textRight {
text-align: right;
}
nav {
height: 92px;
transition: .2s;
}
.logo {
height: 84px;
}
.nav-link {
font-size: 13.5px !important;
font-weight: 500 !important;
}
.nav-link:hover{
color:var(--secondary)!important;
}
.nav-item {
padding-right: 25px;
}
.nav-item:last-child {
padding-right: 0px;
}
.dropdown{
transition: 3s!important;
}
.dropdown-menu{
border-radius: 0%!important;
transform: translateY(40px);
opacity: 0;
visibility: hidden;
transition: .5s!important;
}
.dropdown:hover .dropdown-menu{
transform: translateY(25px);
opacity: 1;
visibility: visible;
}
.dropdown-item{
font-size: 15px;
}
.dropdown-item:hover{
background-color: transparent!important;
}
.act{
color:var(--secondary)!important;
}
/* index page start  */
.btnOne {
padding: 11px 27px;
background-color: var(--primary);
color:var(--white);
border-radius: 5px;
}
.btnThree{
border: 2px solid var(--white);
padding:8px 27px;
color:var(--white);
border-radius: 5px;
}
.gap {
margin-top: 3%;
}
.home{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/7.png');
background-repeat: no-repeat;
background-size: cover;
height:677px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
height:677px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:677px;
}
.carousel-control-prev-ico {
position: absolute;
content: "";
left:0;
background-color: black;
color:var(--white);
padding:15px;
}
.carousel-control-next-ico {
position: absolute;
content: "";
right:0;
background-color: black;
color:var(--white);
padding:15px;
}
.mission{
height: 300px;
background-color: var(--primary);
margin-top: 5%;
}
.missionOne{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
color:var(--white);
padding:0px 15px!important;
}
.vision{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/20.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 300px;
}
.visionOne{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/25.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 300px;
}
.columnCount {
column-count: 2;
}
.aboutImage {
height: 100%;
width: 100%;
}
.heading {
font-weight: 900 !important;
font-size: 28px!important;
color: var(--primary)!important;
}
.item {
text-align: left;
padding-left: 15px;
padding-right: 5px;
padding-block: 15px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin-bottom: 5%;
margin-top: 1%;
margin-left: 1%;
margin-right: 1%;
}
.itemOne {
margin-top: 5%;
margin-bottom: 5%;
font-size: 15px;
}
.fa-quote-right {
color: var(--primary);
font-size: 30px;
}
.itemTwo {
display: flex;
justify-content: center;
flex-direction: column;
}
.itemTwo h5 {
font-size: 18px;
}
.counter{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding-top: 10px;
padding-bottom: 20px;
text-align: center;
color: var(--white);
margin-top: 4%;
}
.thirty{
height: 120px;
width: 120px;
border-radius: 50%;
background-color: transparent!important;
color: var(--white);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border: 8px solid var(--white);
border-left-color: var(--primary);
margin-bottom: 7%;
}
.thirtyfive{
padding-top: 3%;
padding-bottom: 1%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.thirtyone{
border-top-color: var(--primary)!important;
}
.thirtytwo{
border-top-color: var(--primary)!important;
border-right-color: var(--primary)!important;
}
.thirtyfour{
border: 8px solid var(--primary);
}
.timeline{
position: relative;
}
.timeline::after{
position: absolute;
content:"";
width:5px;
height:100%;
left:50%;
background-color: var(--primary);
top:0;
border-radius: 50px;
}
.timelineOne{
width: 50%;
position: relative;
padding:20px 30px;
}
.circle{
height:20px;
width:20px;
border:2px solid var(--primary);
border-radius: 50%;
position: absolute;
right: -13px;
background-color: var(--white);
z-index: 10;
}
.right-container .circle {
left: -7px;
}
.timelineBox{
padding: 20px 30px 35px 30px;
background-color: var(--primary);
color:var(--white);
}
.timeText{
margin-top: 3%!important;
margin-bottom: 5%!important;
}
.right-container{
left:50%;
}
.timelineIcon{
font-size: 25px;
height:60px;
width:60px;
border:2px solid var(--white);
border-radius: 50%;
text-align: center;
padding-top: 10px;
}
.help{
text-align: center;
background-color: var(--primary);
color: var(--white);
padding: 50px 0px;
}
.help h5{
margin-top: 5%;
margin-bottom: 3%;
}
.help p{
margin-bottom: 8%;
}
.help-one{
background-color: #e2339c;
}
.help-two{
background-color: var(--secondary);
}
.volunteerBox {
background-color: rgba(0, 255, 255, 0.1);
}
.volunteer {
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 40px !important;
padding-right: 60px !important;
}
.volunteer p {
margin-top: 1%;
margin-bottom: 4%;
}
.volunteerOne {
position: relative;
overflow: hidden;
}
.volunteerOne:before {
position: absolute;
content: "";
height: 300px;
width: 300px;
background: linear-gradient(to right, var(--primary), var(--secondary));
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
top: 96px;
left: 30px;
z-index: -1;
}
.fa-star,
.fa-star-half-stroke {
color: var(--primary);
}
.owl-next,
.owl-prev {
font-size: 30px !important;
color: var(--primary) !important;
}
.owl-next {
margin-left: 1%;
}
/* footer page start  */
footer {
background: #141f19;
color: var(--white);
padding-top: 30px;
margin-top: 2%!important;
}
footer a {
color: var(--white);
}
footer h5 {
color:var(--secondary)!important;
}
.footerOne p {
margin-top: 3%;
margin-bottom: 4%;
}
.footerIcon {
height: 35px;
width: 35px;
border: 2px solid var(--gray);
text-align: center;
padding-top: 7px;
border-radius: 8px;
color: var(--lightgray);
margin-left: 0.8%;
transition: all 0.4s;
}
.footerIcon:hover {
background-color: var(--primary);
border: 2px solid var(--primary);
color: var(--black);
}
.footerTwo {
margin-top: 10%;
}
.footerThree {
margin-top: 10% !important;
}
.footerFour {
margin-top: 9.6% !important;
}
.footerFive {
margin-top: 5% !important;
}
/*donate part start */
.donateBox{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:20px;
padding-top: 35px;
}
/*about us page start*/
.common{
background: repeating-conic-gradient(#333 0deg 35deg ,#111 35deg 70deg);
background-size: 15px 15px;
height:150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color:var(--white);
}
.common a{
color:var(--white);
}
.presidentImage{
height:355px;
width:320px;
object-fit: cover;
}
.teamBox{
text-align: center;
}
.team{
height:210px;
width:210px;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:3px;
margin-bottom: 5%;
object-fit: contain;
}
.presidentCenter{
display: flex;
justify-content: center;
}
/*media page start */
.columnCount{
column-count: 4;
}
.rowGap{
row-gap: 15px!important;
}
/*contact us page start */
.contact{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color:var(--black);
text-align: center;
height:200px;
border-radius: 10px;
}
.contact h5{
font-size: 17px;
font-weight: bold;
margin-bottom: 8%;
}
.contactOne{
border-right: 1px solid var(--lightgray);
height:200px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contactOne:last-child{
border-right: none;
}
.map{
height:100%;
width:100%;
}
.contactBox{
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
margin-bottom: 2%;
overflow: hidden;
}
.contactusOne{
padding-left: 0%!important;
}
.contactusTwo{
padding:20px;
padding-left: 85px!important;
}
.contactIcon{
border: 2px solid var(--primary);
height:32px;
width:32px;
border-radius: 50%;
text-align: center;
padding-top: 6px;
color:var(--primary);
margin-right: 1%;
}
/*member page start */
.member{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 15px;
padding-bottom: 35px;
}
.submitBtn{
background-color: var(--primary)!important;
color: var(--white)!important;
}
.form-group{
margin-top: 3%;
}
.form-control{
border-radius: 0%!important;
margin-top: 1%;
}
.form-control:focus{
box-shadow: none!important;
border-color: var(--lightgray)!important;
}
/*animation part start */
.topAnimation{
animation: topanimation both;
animation-timeline: view(70% 5%);
}
@keyframes topanimation{
0%{
transform: scale(0.3);
opacity: 0;
}
100%{
transform: scale(1);
opacity: 1;
}
}
.leftAnimation{
animation: leftanimation both;
animation-timeline: view(80% 5%);
}
@keyframes leftanimation{
0%{
transform: translateX(100px);
opacity: 0;
}
100%{
transform: translateX(0px);
opacity: 1;
}
}
.rightAnimation{
animation: rightanimation both;
animation-timeline: view(80% 5%);
}
@keyframes rightanimation{
0%{
transform: translateX(-100px);
opacity: 0;
}
100%{
transform: translateX(0px);
opacity: 1;
}
}
.upAnimation{
animation: upanimation both;
animation-timeline: view(70% 5%);
}
@keyframes upanimation{
0%{
transform: translateY(300px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
/*admin area part start */
.login{
height:775px;
display: flex;
justify-content: center;
align-items: center;
}
.dashboard{
background-color: var(--primary);
height:50px;
}
.dashboardOne{
padding-top: 10px;
color:var(--white);
}
.admin{
height:723px;
background-color: var(--black);
}
.adminOne{
background-color: var(--white);
padding:9px 27px;
margin-top: 3%;
}
.adminOne a{
color:var(--black);
}
.delete{
color:var(--red);
}
/*responsive part start */
@media (max-width:1024px){
.container{
max-width: 950px!important;
}
.whatsapp{
right: 0.5%;
bottom:8%;
}
.home{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/7.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:555px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
height:555px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/10.jpg');
background-repeat: no-repeat;
background-size: cover;
height:555px;
}
.fontSize{
font-size: 13px!important;
}
.leftAnimation{
animation: leftanimation both;
animation-timeline: view(80% 5%);
}
@keyframes leftanimation{
0%{
transform: translateY(300px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
.rightAnimation{
animation: rightanimation both;
animation-timeline: view(80% 5%);
}
@keyframes rightanimation{
0%{
transform: translateY(300px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
.login{
height:660px;
}
.admin{
height:610px;
background-color: var(--black);
}
}
@media (max-width:768px){
.container{
max-width: 700px!important;
}
.whatsapp{
right: 1%;
}
.moving{
right:4%;
}
.first{
font-size: 15px;
}
.resTextCenter{
text-align: center;
}
nav {
height: 90px;
transition: .2s;
}
.resNav{
margin-top: -1.5%;
}
.navbar-toggler{
border-radius: 0%!important;
}
.navbar-toggler:focus{
box-shadow: none!important;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.nav-item {
padding-right: 0px!important;
padding-top: 10px!important;
}
.nav-item:first-child {
padding-top: 0px!important;
}
.dropdown-menu{
text-align: center!important;
}
.dropdown:hover .dropdown-menu{
transform: translateY(5px);
}
.home{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/7.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:550px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
height:550px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/10.jpg');
background-repeat: no-repeat;
background-size: cover;
height:550px;
}
.mission{
height: 600px;
background-color: var(--primary);
margin-top: 5%;
}
.missionOne{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
color:var(--white);
padding:0px 15px!important;
}
.team{
height:160px;
width:160px;
}
.order1{
order:2;
}
.order2{
order:1;
}
.volunteer p{
font-size: 13px;
}
.footerOne{
margin-bottom: 5%;
}
.footerOne p{
margin-top: 2%;
margin-bottom: 3%;
}
.footerThree{
margin-top: 4%!important;
}
.footerFour{
margin-top: 7.5%!important;
}
.resaboutUs{
text-align: center;
margin-bottom: 5%;
}
.presidentImage{
margin-bottom: 5%;
}
.contactusTwo{
padding-left: 15px!important;
}
.columnCount{
column-count: 3;
}
}
@media (max-width:425px){
.container{
max-width: 390px!important;
}
.moving{
right:6%;
}
.first{
text-align: center;
padding-top: 4px;
padding-bottom: 4px;
}
.marginTop{
margin-top: 1%!important;
}
.resNav{
margin-top: -3%;
}
.headerOne h1{
font-size: 30px;
margin-top: 6%;
margin-bottom: 4%;
}
.home{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/7.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:300px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
height:300px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/10.jpg');
background-repeat: no-repeat;
background-size: cover;
height:300px;
}
.mission{
height:1000px;
}
.vision{
height:250px;
}
.missionOne{
height:250px;
}
.visionOne{
height:250px;
}
.gap{
margin-top: 5%;
}
.timeline::after{
display: none;
}
.timelineOne{
width: 100%;
text-align: center;
padding:10px 20px;
}
.circle{
display: none;
}
.timelineBox{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 20px 25px 20px;
background-color: var(--primary);
}
.right-container{
left:0%;
}
.volunteerBox {
background-color: rgba(0, 255, 255, 0.1);
padding-top: 25px;
}
.volunteer {
padding-left: 40px !important;
padding-right: 40px !important;
text-align: center;
margin-bottom: 8%;
}
.volunteer p {
font-size: 16px;
margin-top: 3%;
margin-bottom: 10%;
}
.volunteerOne:before {
left: 43px;
}
.item{
text-align: center;
}
.owl-next {
margin-left: 5%;
}
.footerOne{
margin-bottom: 8%!important;
}
.resFooter{
margin-top: 10%!important;
}
.fontSize{
font-size: 16px!important;
}
.footerTwo{
margin-top: 7%;
}
.footerThree{
margin-top: 7%!important;
}
.presidentCenter{
display: flex;
justify-content: start;
}
.columnCount{
column-count: 1;
}
.contact{
height:450px;
margin-bottom: 5%;
}
.contact h5{
margin-bottom: 5%;
}
.contactOne{
border-bottom: 1px solid var(--lightgray);
height:150px;
}
.contactOne:last-child{
border-bottom: none;
}
.map{
height:300px;
}
.contactusOne{
padding-right: 0%!important;
}
.donateBox{
margin-bottom: 5%;
}
.dashboard{
text-align: center;
}
.admin{
height:230px;
}
.adminOne{
width:60%;
margin-left: 20%;
text-align: center;
}
.adminBottom{
margin-bottom: 7%;
}
}
@media (max-width:375px){
.container{
max-width: 350px!important;
}
.home{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/7.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:250px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
height:250px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.0)),url('images/10.jpg');
background-repeat: no-repeat;
background-size: cover;
height:250px;
}
.heading{
font-size: 20px!important;
}
.resNav{
margin-top: -3.4%;
}
.testimonialImg{
margin-left: 36%;
}
.gap{
margin-top: 7%;
}
.map{
height:250px;
}
.admin{
height:220px;
}
}