*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* reusuable code */
html{
overflow-x: hidden!important;
}
body{
font-size: 14px;
font-family: "Inter", sans-serif!important;
overflow-x: hidden!important;
}
body h1,h2,h3,h4,h5,h6{
font-weight: 600;
}
body a{
text-decoration: none;
}
:root{
--main: #e3242b;
--secondmain: #333;
--white: white;
--black: black;
--gray: gray;
--lightgray: lightgray;
--red: red;
}
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background-color: var(--white);
}
::-webkit-scrollbar-thumb{
background-color: var(--main);
}
.top{
display: none;
position: absolute;
content: "";
height: 33px;
width: 33px;
border: none;
background-color: var(--main);
color: var(--white);
border-radius: 50%;
padding-top: 4px;
bottom:3%;
right: 2%;
z-index: 50;
position: fixed;
font-size: 19px!important;
}
.whatsapp{
position: absolute;
content: "";
height:80px;
width:80px;
bottom:7%;
right: 0.4%;
z-index: 50;
position: fixed;
}
.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;
text-align: center;
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
}
.common a{
color: var(--white);
}
/* navbar part start */
.first{
background-color: #333;
height: 25px;
color: var(--white);
}
.first a{
color: var(--white)!important;
}
.call , .email{
padding-right: 10px;
}
.text-right{
text-align: right;
}
nav{
height: 88px;
background-color: var(--white);
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.nav-link{
font-size: 13.5px!important;
position: relative;
}
.navlink:before{
position: absolute;
content:"";
height:2px;
width:0%;
left: 0;
background-color: var(--main);
top:34px;
transition: all 1s;
}
.navlink:hover:before{
width:100%;
}
.logo{
height: 82px;
}
.nav-item{
padding-left: 25px;
}
.nav-item:first-child{
padding-left: 0px;
}
.dropdown-menu{
border-radius: 0%!important;
animation: .7s slideup;
}
@keyframes slideup {
from {
  transform: translateY(8%);
}
to {
  transform: translateY(0);
}
}
.dropdown-item{
font-size: 14px;
transition: all 1s;
}
.dropdown-item:hover{
background-color: transparent!important;
transform: translateX(5px);
color: var(--main)!important;
}
.donate{
border: 2px solid var(--main);
padding: 9px 30px;
border-radius: 50px;
font-size: 13px;
color: var(--black);
transition: all 1s;
}
.donate:hover {
box-shadow: 
    inset -4.2em 0 0 0 var(--main),
    inset -4.2em 0 0 0 var(--main);  
}
.donate-top{
margin-top: 6px!important;
}
nav .nav-link.active{
color:var(--main)!important;
}

/* index part start */
.home{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.8)),url('images/ngo1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 660px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.8)),url('images/ngo7.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 660px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.8)),url('images/ngo1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 660px;
}
.gap{
margin-top: 4%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 1fr;
}
.about-image{
height:500px;
width:650px;
}
.read-more{
padding:8px 27px;
border:2px solid var(--main);
color:var(--black)!important;
border-radius: 50px;
transition: all .5s;
}
.read-more:hover{
box-shadow: inset -4.2em 0 0 0 var(--main),
            inset -4.2em 0 0 0 var(--main);
}
.wrapper-about{
padding-right: 30px;
padding-left: 5px;
padding-top: 15px;
}
.wrapper-button{
margin-top: 5%!important;
}
.about-us{
font-size: 40px;
letter-spacing: 5px;
font-family: "Cinzel", serif;
-webkit-text-stroke: 1px var(--lightgray);
color: white;
text-shadow:
       2px  2px 0 gray,
      -1px -1px 0 gray,  
       1px -1px 0 gray,
      -1px  1px 0 gray,
       1px  1px 0 gray;
}
.box{
text-align: center;
padding-top: 30px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
background-color: var(--lightgray);
transition: all .8s;
}
.box:hover{
background-color: var(--white);
transform: translateY(-15px);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.box .box-one p{
margin-bottom: 8%!important;
}
.box-one{
text-align: center;
padding-top: 30px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
background-color: var(--white);
transition: all .8s;
}
.box-one:hover{
background-color: var(--lightgray);
transform: translateY(-15px);
}
.doll{
font-size: 40px;
}
.poors{
padding-top: 50px;
padding-bottom: 40px;
padding-left: 25px!important;
padding-right: 25px!important;
transition: all .5s;
background: linear-gradient(to right, var(--main) 50%, var(--white) 50%);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
background-size: 200% 100%;
background-position: right bottom;
}
.poorone{
display: flex;
justify-content: center;
align-items: center;
}
.poortwo{
padding-left: 20px!important;
}
.arrow{
color: var(--main)!important;
}
.poors:hover {
background-position: left bottom;
color: var(--white);
box-shadow: none;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.poors:hover .cap{
color:var(--white);
}
.poors:hover .arrow{
color:var(--white)!important;
}
.cap{
font-size: 35px;
color:var(--main);
}
.row-gap{
row-gap: 25px!important;
}
.empower{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.8)),url('images/1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding-top: 40px;
padding-bottom: 50px;
color:var(--white);
}
.empower p{
margin-top: 2%;
margin-bottom: 3%;
}
.read-more-one{
color:var(--white)!important;
}
.color{
color:var(--main);
}
.volunteer-one{
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 100px!important;
padding-right: 70px!important;
}
.index-volunteer{
background-color: #f1f1f1;
height: 400px;
}
.volunterr-image{
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.1)),url('images/a.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 400px;
width: 100%;
clip-path: polygon(100% 0, 100% 19%, 100% 60%, 100% 100%, 0 100%, 18% 54%, 0 0);
}
.testimonial {
border-right: 4px solid #2a3d7d;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 30px 30px 30px 130px;
margin: 10px 15px 30px 15px;
overflow: hidden;
position: relative;
}
.testimonial:before {
content: "";
position: absolute;
bottom: -4px;
left: -17px;
border-top: 25px solid var(--main);
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(45deg);
}
.testimonial:after {
content: "";
position: absolute;
top: -4px;
left: -17px;
border-top: 25px solid var(--main);
border-left: 25px solid transparent;
border-right: 25px solid transparent;
transform: rotate(135deg);
}
.testimonial .pic {
display: inline-block;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
position: absolute;
left: 20px;
}
.testimonial .pic img {
width: 100%;
height:100%;
}
.testimonial .description {
font-size: 15px;
letter-spacing: 1px;
color: #6f6f6f;
line-height: 25px;
margin-bottom: 15px;
}
.testimonial .title {
display: inline-block;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--main);
margin: 0;
}
.testimonial .post {
display: inline-block;
font-size: 17px;
color: var(--main);
font-style: italic;
}
.owl-theme .owl-controls .owl-page span {
border: 2px solid #2a3d7d;
background: #fff !important;
border-radius: 0 !important;
opacity: 1;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page:hover span {
background: var(--main) !important;
border-color: var(--main);
}
/* 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: 30px;
}
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);
}

/* contact page start */
.contactpage{
border: 1px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding-top: 40px;
padding-bottom: 30px;
padding-left: 20px;
}
.map{
height: 420px;
width: 630px;
}

/*get involved part start*/
/* get involved part start */
.involved{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 15px 20px;
margin-bottom: 5%;
padding-bottom: 40px;
}
.submitbtn{
border: none!important;
background-color: var(--main)!important;
padding:8px 24px;
color:var(--white);
}
.form-group{
margin-top: 3%;
}
.form-control{
border-radius: 0%!important;
margin-top: 2%;
}

/*donate us part start */
.contactbox{
border: 1px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 25px;
padding-top: 40px;
}

/* admin area part start */
.loginform{
padding: 20px;
border: 1px solid var(--white)!important;
margin-top: 25%!important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.loginbtn{
background-color: var(--main)!important;
color:var(--white)!important;
}
.dashboard{
background-color: var(--main);
padding-top: 10px;
color: var(--white);
}
.dashboardone{
background-color: #333;
height: 650px;
}
.dashboardtwo{
background-color: var(--white);
padding: 8px;
margin-top: 4%;
}
.dashboardtwo a{
color: var(--secondary);
}
.edit{
color: blue!important;
}
.delete{
color: var(--red)!important;
}
.trash{
color: red!important;
background-color: transparent!important;
border: none!important;
}

/*responsive part start*/
@media (max-width:1024px){
.call , .email{
padding-right: 5px;
}
.about-image{
height:500px;
width:500px;
}
.about-us{
font-size: 30px;
}
.map{
height: 400px;
width: 500px;
}
.ma-right{
text-align: right;
}
}
@media (max-width:768px){
.res-nav{
margin-top: -1.4%;
}
.nav-link{
font-size: 13px!important;
}
.nav-item{
padding-left: 0px;
}
.navbar-toggler{
border-radius: 0%!important;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home ,.home1, .home2{
height: 500px;
}
.wrapper{
display: grid;
grid-template-columns: 1fr;
padding:10px 0px;
text-align: center;
}
.about-image{
height:100%;
width:100vw;
margin-top: 4%;
}
.wrapper-about{
padding-right: 15px;
padding-left: 15px;
}
.order1{
order:2;
}
.order2{
order: 1;
}
.gap{
margin-top: 5%;
}
.volunteer-one h3{
font-size: 17px;
}
.map{
height: 400px;
width: 400px;
}
}
@media (max-width:425px){
.top{
right: 6%;
}
.first{
height:90px;
text-align: center;
padding-top: 4px;
}
.email{
margin-top: 2%!important;
}
.res-text-right{
text-align: center;
margin-top: 1%!important;
}
nav{
height:84px;
}
.res-nav{
margin-top: -2.7%;
}
.home ,.home1, .home2{
height: 400px;
}
.about-image{
margin-top: 7%;
}
.wrapper{
margin-bottom: 10%!important;
}
.poors{
text-align: center;
}
.cap{
margin-bottom: 4%;
}
.volunteer-one{
padding-left: 15px!important;
padding-right: 15px!important;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.index-volunteer{
height: 683px;
}
.volunterr-image{
clip-path: polygon(53% 23%, 100% 0, 100% 100%, 0 100%, 0 0);
}
footer{
text-align: center;
}
.footer-one{
border-right: none;
}
footer h5{
margin-top: 8%;
margin-bottom: 4%!important;
}
.resboard{
margin-top: 4%!important;
}
.map{
height: 300px;
width: 380px;
margin-top: 5%;
}
.ma-right{
text-align: center;
}
.contactpage{
padding-left: 15px;
padding-right: 15px;
}
.dashboardone{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height:550px;
}
.dashboard{
text-align: center;
}
.dashboardtwo{
width:70%;
}
.admintop{
margin-bottom: 8%;
}
}
@media (max-width:375px){
.first{
height:88px;
}
.res-nav{
margin-top: -3%;
}
.home ,.home1, .home2{
height: 300px;
}
.about-us{
font-size: 25px;
}
.index-volunteer{
height: 700px;
}
.map{
height: 250px;
width: 330px;
}
}