*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body a{
text-decoration: none;
}
body p{
font-size: 16px;
}
:root{
--primary:#EBECA6;
--red:red;
--black:black;
--gray:gray;
--lightgray:lightgray;
--white:white;
}

/*navbar page start*/
.goto{
display: none;
height:40px;
width:40px;
border: 2px solid var(--primary);
background-color: var(--white);
border-radius: 50%;
position: absolute;
bottom:4%;
right:3%;
z-index: 100;
position: fixed;
}
.whatsapp{
height:80px;
width:80px;
position: absolute;
bottom:9%;
right:1.7%;
z-index: 100;
position: fixed;
}
.first{
background-color:var(--black);
color:var(--white);
padding-top: 2px;
padding-bottom: 2px;
}
.first a{
color:var(--white);
}
.call{
height:30px;
width:30px;
border:2px solid var(--lightgray);
display: flex;
justify-content: center;
align-content: center;
text-align: center;
color:var(--lightgray)!important;
border-radius: 50%;
margin-right: 1%;
transition: all .5s;
}
.call:hover{
background-color: var(--white);
color: var(--black);
}
.textEnd{
text-align: right;
}
nav{
height:88px;
}
.logo{
height: 76px;
}
.nav-link{
color:var(--black)!important;
font-size: 13px!important;
}
.nav-item{
padding-left: 35px;
}
.nav-item:first-child{
padding-left: 0px;
}
.dropdown-menu{
border-radius: 0%!important;
}
.dropdown-item:focus{
background-color: transparent!important;
color:var(--black)!important;
}
.donate{
padding:9px 25px!important;
background-color: var(--primary)!important;
color:var(--black)!important;
}

/*index page start*/
header{
background:linear-gradient(to right,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:650px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
color: var(--white);
clip-path: polygon(50% 100%, 100% 95%, 100% 0, 0 0, 0 95%);
}
header h1{
font-size: 48px;
font-weight: 600;
}
header p{
margin-top: 4%;
margin-bottom: 7%;
}
.headerOne{
position: relative;
color:var(--primary);
}
.headerOne:before{
position: absolute;
content: "";
height:4px;
width:112px;
background-color: var(--primary);
bottom:2.5px;
left:2px;
}
.button{
padding:10px 27px;
background-color: var(--primary);
color: var(--black);
text-align: center;
}
.help{
height:100%;
width:100%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 20px 50px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
text-align: center;
padding:35px 20px;
padding-bottom: 30px;
background-color: var(--white);
}
.help h5{
margin-bottom: 5%;
}
.helpIcon{
font-size: 40px;
}
.helpOne{
background-color: var(--primary);
}
.marginTop{
position: relative;
margin-top: -3%;
z-index: 1;
}
.gap{
margin-top: 3%!important;
}
.heading{
font-weight: 700;
}
.mission{
background-color: var(--primary);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.missionOne{
background:linear-gradient(to right,rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url('images/12.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.missionThree{
background:linear-gradient(to right,rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url('images/16.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.missionTwo{
padding-top: 35px;
padding-bottom: 25px;
padding-left: 20px!important;
padding-right: 20px!important;
}
.work{
position: relative;
height:100%;
width:100%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
text-align: center;
padding-bottom:50px;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
.workIcon{
height:80px;
width:80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 35px;
background-color: var(--primary);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%  ;
margin-left: -2%;
}
.workIconOne{
background-color: lightsalmon;
}
.workIconTwo{
background-color: var(--primary);
}
.workIconThree{
background-color: lightblue;
}
.volunteer{
background:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/13.jpg');
background-repeat: no-repeat;
background-size: cover;
padding-top: 30px;
padding-bottom: 50px;
color:var(--white);
}
.animalImage{
border-radius: 5px;
}
.topButton{
margin-top: 7%;
}
.aim{
height:80px;
width:80px;
background-color: var(--primary);
font-size: 35px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.aimOne{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-left: 20px!important;
padding-right: 20px!important;
}
.testimonial{
height: 500px;
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
}
.testimonialone{
position: relative;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 45px 60px!important;
background-color: var(--white);
overflow: hidden;
}
.testimonialtwo{
text-align: center;
margin-bottom: 4%;
margin-top: 5%;
}
.fa-quote-left{
color: var(--lightgray);
font-size: 30px!important;
}
.carousel-item p{
margin-top: 4%;
margin-bottom: 5%;
}
.colorred{
position: absolute;
content: "";
height: 150px;
width: 150px;
background-color: var(--primary);
border-radius: 50%;
margin-left: 75%;
margin-top: -10%;
filter: blur(60px);
}
.colorgray{
position: absolute;
content: "";
height: 150px;
width: 150px;
background-color: var(--lightgray);
border-radius: 50%;
margin-left: -10%;
margin-top: -10%;
filter: blur(50px);
}
.long{
color: var(--primary);
margin-left: 170%;
}
.short{
color: var(--primary);
margin-left: -170%;
}

/* 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(--white);
padding-top: 30px;
}
footer a{
color: var(--white);
}
footer h5{
color: var(--primary);
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%;
}

/*common part 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;
color:var(--white);
height:160px;
display: flex;
justify-content: center;
align-items: center;
}
.common a{
color:var(--white);
}
.preImage{
background-color: lightgray;
}

/*media page start*/
.row-gap{
row-gap: 25px;
}
.pdf{
height: 300px;
width: 100%;
box-shadow: 3px 3px 4px var(--gray);
}

/*contact us page start*/
.contact{
display: flex;
justify-content: center;
flex-direction: column;
background-color: var(--black);
color: var(--white);
}
.form-group{
margin-top: 2.5%;
}
.form-control{
height:45px;
border-radius: 0%!important;
border: none!important;
border-bottom:1px solid var(--black)!important;
}
.form-control:focus{
border: none!important;
box-shadow: none!important;
border-bottom:1px solid var(--black)!important;
}
.buttonOne{
height:45px;
width:25%;
background-color: var(--primary);
text-align: center;
border:none;
}
.contactOne{
padding-left: 20px!important;
}
.map{
height: 500px;
width:100%;
}

/*donate page start*/
.donateBox{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding:20px 15px;
}

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

/*admin area page start*/
.admin{
background-color: var(--primary);
color: var(--white);
padding-top: 10px;
}
.adminOne{
background-color: var(--primary);
height:725px;
}
.adminTwo{
padding:9px 27px;
text-align: center;
background-color: var(--black);
margin-top: 5%;
}
.adminTwo a{
color:var(--white);
}
.fa-circle-minus{
color:var(--red);
}
.loginForm{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding:30px;
}
.login{
display: flex;
justify-content: center;
align-items: center;
height:700px;
}

/*responsive part start*/
@media (max-width:1024px){
.logo{
height: 50px;
}
.nav-item{
padding-left: 15px;
}
.nav-link{
font-size: 11px!important;
}
.marginTop{
margin-top: -5%;
}
.emailshort{
font-size: 12px;
}
.contact{
padding-bottom: 10px;
padding-top: 10px;
}
.login{
height:650px;
}
.adminOne{
height:640px;
}
}

@media (max-width:768px){
.whatsapp{
right:1%;
}
.logo{
height: 70px;
}
nav{
height:84px;
}
.resNav{
margin-top: -0.8%;
}
.nav-item{
padding-left: 0px;
}
.nav-link{
font-size: 13px!important;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
}
.navbar-toggler{
border-radius: 0%!important;
}
.navbar-toggler:focus{
box-shadow: none!important;
}
.navbar-nav{
display: flex;
justify-content: center;
align-items: center;
}
header{
height:550px;
}
header h1{
font-size: 40px;
}
.headerOne:before{
width:94px;
}
.order1{
order: 2;
}
.order2{
order: 1;
}
.animalImage{
margin-bottom: 5%;
}
.resRowGap{
row-gap:25px;
}
.common{
padding-top: 10px;
}
.buttonOne{
width:30%;
}
.map{
height:300px;
}
}

@media (max-width:425px){
.goto{
right:5%;
}
.whatsapp{
right:0.7%;
}
.first{
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
}
.first a{
font-size: 14px;
}
.textEnd{
text-align: center;
margin-top: 1%!important;
}
.resNav{
margin-top: -1.5%;
}
header{
background:linear-gradient(to top,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:350px;
clip-path: none;
text-align: center;
}
.resHeader{
display: none;
}
.marginTop{
margin-top: 7%;
}
.resHelp{
margin-top: 7%!important;
}
.gap{
margin-top: 5%!important;
}
.missionOne{
background:linear-gradient(to right,rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url('images/12.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:250px;
}
.missionThree{
background:linear-gradient(to right,rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1)),url('images/16.jpg');
background-repeat: no-repeat;
background-size: cover;
height:250px;
}
.order1{
order: 1;
}
.order2{
order: 2;
}
.footer-one{
border-right: none;
}
.resFooter{
margin-top: 8%!important;
}
footer h5{
margin-bottom: 6%!important;
}
.contact{
height:300px;
}
.form-group{
margin-top: 3%;
}
.buttonOne{
width:40%;
}
.contactOne{
padding-left: 10px!important;
padding-top: 20px!important;
}
.emailshort{
font-size: 16px;
}
.map{
height: 300px;
}
.admin{
text-align: center;
}
.adminOne{
height:350px;
}
.adminBottom{
margin-bottom: 7%;
}
}

@media (max-width:375px){
.firstRes{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.firstRes a{
font-size: 14px;
}
.resNav{
margin-top: -1.5%;
}
header{
background:linear-gradient(to top,rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)),url('images/10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height:300px;
}
.contact{
height:400px;
}
.map{
height: 250px;
}
.adminOne{
height:320px;
}
}