*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* reusuable code */
body{
font-size: 15px!important;
overflow-x: hidden!important;
font-family: 'Inter', sans-serif!important;
}
body a{
text-decoration: none;
}
:root{
--main : #f25400;
--secondmain: #444;
--white: white;
--red: red;
--blue: blue;
--gray: gray;
--lightgray: lightgray;
--black: black;
}
.goto{
display: none;
position: absolute;
content: "";
height: 34px;
width: 34px;
background-color: var(--main);
border-radius: 50%;
text-align: center;
color: var(--white);
padding-top: 4px;
top: 90%;
left: 94%;
position: fixed;
}
.whatsapp{
position: absolute;
content: "";
height: 65px;
width: 65px;
background-color: var(--white);
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
top: 77%;
left: 92.5%;
position: fixed;
}
.ff{
height: 24px;
width: 24px;
background-color: #3b5998;
border-radius: 50%;
color: var(--white);
text-align: center;
padding-top: 4px;
margin-right: 3px;
}
.fi{
height: 24px;
width: 24px;
background-color: var(--red);
border-radius: 50%;
color: var(--white);
text-align: center;
padding-top: 4px;
margin-right: 3px;
}
.ft{
height: 24px;
width: 24px;
background-color: var(--white);
border-radius: 50%;
color: var(--black);
text-align: center;
padding-top: 3.7px;
margin-right: 3px;
}
.fy{
height: 24px;
width: 24px;
background-color: var(--red);
border-radius: 50%;
color: var(--white);
text-align: center;
padding-top: 4px;
}
.fa-clock-o{
color: var(--main);
padding-right: 6px;
}

/* navbar part start  */
.logo_part{
height: 80px;
margin-left: -2%!important;
}
.logo{
width: 90px;
height: 90px;
border-radius: 50%;
}
.logo_one{
margin-bottom: 0%;
}
.upcoming{
font-weight: bold;
color: var(--main);
font-size: 28.7px;
text-shadow: 3px 3px 4px var(--lightgray);
position: absolute;
top: 54px;
}
.donatesone{
margin-top: 0.7%!important;
}
.common{
background-color: var(--black);
color: var(--white);
padding-top: 2px;
padding-bottom: 2px;
}
.note{
background-color: var(--white);
padding: 8px 22px!important;
color: var(--main)!important;
}
nav{
margin-top: 0.7%!important;
background-color: var(--main);
height: 47px;
}
.navbar-collapse{
display: flex;
justify-content: center;
align-items: center;
margin-left: 0%;
}
.nav-link{
padding-right: 50px!important;
font-size: 13.5px!important;
color: var(--white)!important;
}
.dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(25%);
transition: all .6s;
border-radius: 0%!important;
font-size: 14px!important;
text-align: center!important;
}
.dropdown:hover .dropdown-menu{
opacity: 1;
visibility: visible;
transform: translateY(4%);
}
.read{
background: linear-gradient(to right,deepskyblue,skyblue)!important;
color: var(--white)!important;
text-align: center!important;
padding-right: 21px!important;
padding-left: 20px!important;
}
.top{
margin-top: -3%;
}
.bottom{
margin-bottom: -3%;
}
/* index part start */
.main{
background: linear-gradient(rgba(0, 0, 0, 0.0),rgba(0, 0, 0, 0.9)),url('images/2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
height: 558px;
}
.main h1{
color: var(--white);
font-weight: bold;
font-size: 45px;
padding-top: 21%;
}
.main p{
margin-top: 3%;
margin-bottom: 4%!important;
}
.readmore{
background-color: var(--main)!important;
color: var(--white)!important;
text-align: center!important;
padding: 8px 22px;
}
.help{
background-color: var(--main);
height: 150px;
color: var(--white);
padding-top: 35px;
}
.moreread{
background-color: var(--secondmain)!important;
color: var(--white)!important;
text-align: center!important;
padding: 10px 26px;
font-size: 14px!important;
}
.topbutton{
padding-top: 25px!important;
}
.helpone{
margin-left: 8%!important;
}
.gap{
margin-top: 5%!important;
}
.justify{
text-align: justify;
}
.down{
margin-top: 7%!important;
}
.box{
height: 100%;
width: 100%;
background-color: var(--main);
text-align: center;
color: var(--white);
padding-top: 50px;
padding-bottom: 45px;
border-radius: 20px;
}
.book{
position: absolute;
margin-top: -5.8%;
margin-left: -2%;
height: 50px;
width: 50px;
background-color: var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
font-size: 25px!important;
border-radius: 50%;
padding-top: 12px;
color: var(--gray);
}
.box h5{
margin-bottom: 8%;
}
.volunteer{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/3.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding: 65px 0px;
color: var(--white);
}
.volunteerone h5{
color: var(--main);
}
.volunteerone h1{
font-weight: bold;
}
.volunteerone p{
margin-top: 2%;
margin-bottom: 3%;
}
.achievements{
position: absolute;
height: 235px!important;
width: 235px!important;
background-color: var(--lightgray);
border-radius: 50%;
padding-top: 85px;
text-align: center;
}
.achievementone{
border: 1px solid var(--white);
padding-left: 140px!important;
padding-top: 15px;
margin-left: 16%;
width: 87%!important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.event{
background-color: var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
height: 198px;
padding-top: 23px;
padding-left: 10px!important;
padding-right: 10px!important;
}
.eventimage img{
height: 138px!important;
width: 100%!important;
margin-top: 3.5%;
}
.silai{
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url('images/8.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 380px;
color: var(--white);
padding-top: 45px;
}
.silai p{
font-size: 18px;
}
.fa-check-circle-o{
padding-right: 7px;
}
.dec{
position: absolute;
background-color: var(--main);
padding: 5px;
width: 6%;
text-align: center;
margin-left: .2%;
margin-top: -10.1%;
}
.eventtop{
margin-top: 4%!important;
}
.aim::before{
position: absolute;
content: "";
height: 25px;
width: 50px;
background-color: var(--main);
z-index: -1;
margin-left: 57px;
rotate: -5deg;
}
.aims::before{
position: absolute;
content: "";
height: 25px;
width: 102px;
background-color: var(--main);
z-index: -1;
margin-left: 137px;
rotate: -5deg;
}
.aimd::before{
position: absolute;
content: "";
height: 25px;
width: 80px;
background-color: var(--main);
z-index: -1;
margin-left: 57px;
rotate: -5deg;
}
.work{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 25px;
padding-bottom: 40px;
width: 94%;
transition: all 1s;
}
.work:hover{
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.8)),url('images/e.png');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
}
.work:hover .kitab{
transform: scale(1.05);
}
.zeroone{
color: var(--lightgray);
font-size: 60px;
font-weight: bold;
}
.kitab{
height: 80px;
width: 80px;
background-color: var(--main);
border-radius: 50%;
font-size: 40px!important;
text-align: center;
padding-top: 19px;
color: var(--white);
transition: all 1s;
}
.kitab::after{
position: absolute;
content: "";
height: 4px;
width: 200px;
margin-left: 30px;
margin-top: 19px;
background-color: var(--main);
}
.workone{
margin-top: 5%!important;
}
.testimonials-section {
background: #fff;
height: 330px;
position: relative;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 40px 12px;
border-radius: 0%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
appearance: none;
backface-visibility: hidden;
}
.slider__nav:checked {
animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
left: -33%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
left: -366.5%;
}
.slider__inner {
position: absolute;
top: 40px;
left: 0;
width: 500%;
height: auto;
transition: left 0.4s;
display: flex;
}
.slider__contents {
height: 100%;
text-align: center;
display: flex;
flex: 1;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.slider__caption {
font-size: 12px;
color: #111;
opacity: .5;
font-weight: bold;
margin-top: 1%;
}
.slider__txt {
font-size: 17px;
line-height: 1.7;
color: #111;
margin-top: -10px;
margin-bottom: 10px;
max-width: 750px;
}
quote {
font-weight: bold;
font-size: 50px;
color: #ec2027;
margin-bottom: 0;
}

/* footer part start */
footer{
margin-top: 1%;
background-color: var(--secondmain);
color: var(--white);
padding-top: 20px;
}
footer h5{
font-size: 18px;
font-weight: bold;
color: var(--main);
}
.footerlink{
height: 35px;
width: 35px;
background-color: var(--white);
border-radius: 50%;
color: var(--black);
text-align: center;
font-size: 17px!important;
padding-top: 8px;
transition: all 1s;
}
.footerlink:hover{
background-color: var(--main);
}
footer a{
color: var(--white)!important;
}
.footerone{
border-bottom: 1px dotted var(--lightgray);
padding-top: 8px;
padding-bottom: 8px;
}
.footerone:last-child{
border: none;
}
.footerthree:last-child{
border: none;
}
.footertwo{
padding-left: 50px!important;
}
.footerthree{
border-bottom: 1px dotted var(--lightgray);
padding-top: 10px;
padding-bottom: 10.2px;
}
.footerfour{
padding-top: 32px;
padding-right: 40px!important;
}
.footerfive{
padding-top: 15px;
}
.footerinput{
height: 40px;
width: 90.1%;
border: none;
outline: none;
padding-left: 10px;
margin-top: 1.5%;
background: rgba(255, 255, 255, 0.2);
}
::placeholder{
color: var(--white);
}
.fa-paper-plane-o{
height: 40px;
width: 40px;
background-color: var(--white);
color: var(--black);
text-align: center;
padding-top: 13px;
cursor: pointer;
margin-left: -0.7%;
}
.foo_tur{
font-size: 13.6px; 
}

/* about us part start */
.commonabout{
position: relative;
height: 180px;
background-color: #222;
color: var(--white);
padding-top: 58px;
z-index: -1;
overflow: hidden;
}
.circle{
position: absolute;
content: "";
top: 0px;
left: -90px;
height: 180px;
width: 180px;
background-color: var(--main);
border-radius: 50%;
z-index: 1;
}
.circle:before {
position: absolute;
content: '';
height: 207px;
width: 207px;
border: 4px dashed skyblue;
top: -13px;
left: -13px;
border-radius: 50%;
animation: spin 10s linear infinite;
}
@keyframes spin { 
100% { 
transform: rotate(360deg); 
}
}
.circleone{
position: absolute;
content: "";
top: 0px;
left: 93%;
height: 180px;
width: 180px;
background-color: var(--main);
border-radius: 50%;
z-index: 1;
}
.circleone:before {
position: absolute;
content: '';
height: 207px;
width: 207px;
border: 4px dashed skyblue;
top: -13px;
left: -13px;
border-radius: 50%;
animation: spin 10s linear infinite;
}
@keyframes spin { 
100% { 
transform: rotate(360deg); 
}
}
.commonabout a{
color: var(--white);
}
.aboutimage{
height: 100%;
width: 100%;
}
.aboutbutton{
margin-top: 6%!important;
}
.president{
height: 100%!important;
width: 90%!important;
}
.presidentone{
font-size: 18px;
}
.volunteerimg{
height: 290px!important;
width: 290px!important;
}
.volunteerbox{
position: absolute;
content: "";
margin-top: -27%;
margin-left: 4%;
height: 290px!important;
width: 290px;
background-color: var(--lightgray);
z-index: -1;
}
.volunteertwo{
text-align: center;
margin-top: -74%;
}
.volunteerthree{
display: flex;
justify-content: center;
align-items: end;
flex-direction: column;
padding-right: 8px;
padding-top: 73px;
}
.gaps{
margin-top: 10%;
}

/* education part start */
.card{
background-color: var(--main)!important;
border: none!important;
border-radius: 0%!important;
padding-bottom: 7%!important;
color: var(--white)!important;
}
.morereads{
background-color: var(--white)!important;
color: var(--black)!important;
text-align: center!important;
padding: 10px 26px;
font-size: 14px!important;
}

/* contact us part start */
.contactbox{
padding-top: 30px;
padding-left: 10px;
padding-bottom: 15px;
border: 1px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.contactbox h5{
margin-bottom: 5%;
}
.contactboxone{
padding: 20px;
border: 1px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.color{
color: var(--main);
}
/* get involved part start  */
.form{
padding: 20px;
padding-bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.form-control{
border-radius: 0%!important;
}
.form-group{
margin-top: 3%;
}
.involved{
padding: 7px 22px;
border-radius: 0%;
border: none;
background-color: var(--main);
color: var(--white);
}
.cause{
padding-top: 20px;
padding-bottom: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.cause p{
padding-left: 15px;
}
.card h6{
margin-bottom: 10%!important;
}

/* admin area part start */
.adminnav{
background-color: var(--main);
height: 50px;
padding-top: 7px!important;
}
.adminnav a{
color: var(--white);
}
.adminleft{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
height: 592px;
}
.adminone{
background-color: var(--lightgray);
text-align: center;
padding: 7px 0px;
margin-top: 6%;
}
.adminone a{
color: var(--black);
}
.adminmemebr{
padding-top: 20px;
}
.fa-trash-o{
color: var(--red);
font-size: 25px!important;
}
.loginbody{
background-color: var(--main);
color: var(--white);
}
.loginform{
padding: 40px;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.loginone{
padding-top: 10%;
}
.logintwo{
border: none!important;
color: var(--white)!important;
width: 25%!important;
background-color: var(--gray)!important;
}

/* responsive part start */
@media screen and (max-width: 768px){
body{
font-size: 14px!important;
}
.goto{
left: 83%;
}
.whatsapp{
left: 78%;
}
.logo_part{
text-align: center;
height: 80px;
}
.logo{
height: 80px;
width: 80px;
}
.donatesone{
display: flex;
justify-content: center;
align-items: center;
margin-left: -32%!important;
}
.upcoming{
display: none;
}
nav{
height: 55%;
}
.common{
text-align: center;
padding-bottom: 5px;
}
.respcommon{
margin-top: 3%!important;
margin-left: -30%!important;
}
.ff,.fi,.ft,.fy{
padding-top: 5px;
}
.navbar-toggler{
border-radius: 0%!important;
}
.navbar-nav{
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px!important;
}
.nav-link{
font-size: 13px!important;
}
.read{
width: 40%;
margin-left: 25.5%!important;
}
.main{
height: 458px;
padding-top: 50px;
}
.main h1{
font-size: 22px;
}
.main p{
margin-bottom: 10%!important;
}
.help{
height: 250px;
text-align: center;
}
.helpone{
margin-left: -0%!important;
}
.topbutton{
padding-right: 25%!important;
}
.resout{
margin-top: 7%!important;
}
.gap{
margin-top: 10%!important;
}
.aimd::before{
width: 67px;
margin-left: 50px;
}
.aims::before{
width: 90px;
margin-left: 122px;
}
.work{
width: 100%;
}
.kitab::after{
width: 180px;
}
.reswork{
margin-top: 4.5%!important;
}
.volunteer{
padding-bottom: 75px;
}
.volunteerone p{
margin-top: 6%;
margin-bottom: 10%;
}
.resgap{
margin-top: 14%!important;
}
.book{
margin-top: -21%;
margin-left: -7%;
}
.dec{
display: none;
}
.resdec{
margin-top: 4%!important;
}
.event{
height: 350px;
padding-top: 8px;
text-align: center;
}
.eventimage img{
height: 150px!important;
width: 150px!important;
margin-bottom: 5%;
}
.silai{
height: 580px;
padding-top: 25px;
text-align: center;
}
.silai p{
font-size: 14px;
}
.testimonials-section {
height: 400px;
}
.slider__nav {
margin: 30px 12px;
}
.slider__inner {
top: 30px;
}
.slider__txt {
font-size: 14px;
max-width: 400px;
padding-left: 50px;
padding-right: 50px;
padding-top: 15px;
padding-bottom: 15px;
}
.resfoo{
margin-top: 6%!important;
}
.footertwo{
padding-left: 13px!important;
}
.footerfour{
padding-top: 12px;
margin-left: 4.9%;
text-align: center;
}
.footerinput{
width: 86%;
}
.fa-paper-plane-o{
padding-top: 13px;
}
.reu{
text-align: center;
}
.aboutimage{
border-radius: 0%;
}
.rvolu{
margin-top: 30%!important;
}
.volunteerimg{
margin-left: -4.5%!important;
}
.volunteerbox{
margin-top: -101%;
margin-left: 10%;
}
.achievements{
height: 150px!important;
width: 150px!important;
padding-top: 50px;
margin-top: 3%!important;
margin-left: 26%!important;
}
.achievements h3{
font-size: 19px!important;
}
.achievementone{
padding-top: 170px!important;
padding-left: 10px!important;
margin-left: 0%;
width: 100%!important;
}
.gallerytop{
margin-top: 7%!important;
}
.feel{
margin-top: 6%!important;
margin-bottom: 5%;
}
.dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0%);
width: 100%;
margin-left: -13%!important;
}
.rescard{
margin-top: 10%!important;
}
.rescardone{
margin-left: 5%!important;
}
.circle{
left: -153px;
}
.rsblog{
margin-top: 3%;
}
.rsblogone{
margin-bottom: 5%;
}
.form{
width: 105%;
margin-left: -2.5%;
padding-bottom: 30px;
margin-bottom: 5%;
}
.cause{
margin-bottom: 5%;
}
.president{
height: 95%!important;
width: 100%!important;
margin-bottom: 10%;
}
.presidentone p{
font-size: 14px;
}
.loginform{
padding-top: 10px!important;
padding: 25px;
}
.loginone{
padding-top: 35%;
}
.logintwo{
width: 28%!important;
}
.adminleft{
height: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.adminone{
width: 60%;
}
}