*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-size: 15px!important;
font-family: "Inter", sans-serif!important;
}
body a{
text-decoration: none;
}
:root{
--main: #0956a6;
--secondmain: #92000a;
--thirdmain: #333;
--red: red;
--blue: blue;
--white: white;
--gray: gray;
--lightgray: lightgray;
--purple: purple;
--facebook: #3b5998;
}
/* navbar part start */
.whatapp{
position: absolute;
position: fixed;
height: 70px;
width: 70px;
transition: all 1s ease;
top: 79%;
left: 94%;
z-index: 100;
border-radius: 50%;
}
.goto{
display: none;
position: absolute;
height: 40px;
width: 37px;
background-color: var(--main);
padding: 10px;
color: var(--white);
top: 90%;
left: 95.5%;
z-index: 101;
position: fixed;
text-align: center;
}
.first{
box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 2px;
height: 32px!important;
}
.first a{
color: var(--white);
}
.title {
position: relative;
width: 100%;
background: var(--main);
color: var(--white)!important;
padding-top: 2px;
padding-bottom: 2px;
height: 32px;
padding-left: 100px;
margin-left: -1.7%;
}
.title:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: var(--main);
transform-origin: bottom left;
transform: skew(-22deg, 0deg);
}
.titles{
position: relative;
width: 100%;
margin-left: 3.6%;
background: var(--main);
padding-left: 30px;
height: 32px;
}
.titles:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: var(--main);
transform-origin: bottom left;
transform: skew(22deg, 0deg);
}
.time{
color: var(--white);
}
.second{
padding-top: 2px;
padding-bottom: 2px;
}
.call{
height: 28px;
width: 28px;
color: var(--blue);
border: 2px solid var(--blue);
border-radius: 50%;
text-align: center;
padding-top: 5px;
margin-right: 5px;
transition: all .2s;
}
.call:hover{
background-color: var(--blue);
color: var(--white);
}
.call-one{
height: 28px;
width: 28px;
color: var(--blue);
border: 2px solid var(--white);
background-color: var(--white);
border-radius: 50%;
text-align: center;
padding-top: 5px;
margin-right: 5px;
}
.email{
height: 28px;
width: 28px;
color: var(--red);
border: 2px solid var(--red);
border-radius: 50%;
text-align: center;
padding-top: 5px;
margin-right: 5px;
transition: all .2s;
}
.email:hover{
background-color: var(--red);
color: var(--white);
}
.email-one{
height: 28px;
width: 28px;
color: var(--red);
border: 2px solid var(--white);
background-color: var(--white);
border-radius: 50%;
text-align: center;
padding-top: 5px;
margin-right: 5px;	
}
.time{
padding-top: 4px!important;
}
nav{
height: 45px;
background-color: var(--secondmain);
}
.logo{
height: 80px;
}
.logo-heading{
font-size: 25px;
color: var(--main);
font-weight: bold;
margin-top: 3%;
padding-left: 1%;
font-family: "Playwrite PE", cursive!important;
}
.socia-link{
margin-top: 10%;
text-align: right;
}
.offcanvas-body{
display: flex;
justify-content: center;
align-items: center;
}
.dropdown-menu{
border-radius: 0%!important;
}
.dropdown-item{
font-size: 14px!important;
}
.dropdown-item{
transition: all .5s;
}
.dropdown-item:hover{
background-color: transparent!important;
color: var(--secondmain)!important;
transform: translateX(7px)!important;
}
.nav-link{
color: var(--white)!important;
}
.nav-item{
font-size: 13px;
padding-right: 40px;
}
.nav-item:last-child{
padding-right: 0px;
}
.donate{
padding: 8px 24px!important;
color: var(--main)!important;
background-color: var(--white)!important;
transition: all 1s;
}
.donate:hover{
color: var(--white)!important;
background-color: var(--main)!important;
}
nav a.active{
color: var(--lightgray)!important;
font-weight: bold;
background-color: transparent!important;
}
/* index part start */
.carousel-anime{
overflow: hidden;
height: 500px;
}
.carousel-item > img {
animation: kenburns 7000ms linear 0s infinite alternate;
}
@keyframes kenburns {
0% {
transform: scale(1);
transition: transform 7000ms linear 0s;
}
100% {
transform: scale(1.1);
transition: transform 7000ms linear 0s;
}
}
.a-image{
margin-left: 1.8%;
}
.read-more{
background-color: var(--main);
padding: 9px 21px;
color: var(--white);
transition: all 1s;
}
.read-more:hover{
background-color: var(--white);
color: var(--main);
}
.arrow{
rotate: 45deg;
margin-left: 5px;
}
.read-more:hover .arrow{
animation: move .8s linear infinite alternate-reverse;
}
@keyframes move{
0%{transform: translateY(-5px)};
100%{transform: translateY(0px)};
}
.justify{
text-align: justify;
}
.gap{
margin-top: 4%!important;
}
.heading{
color: var(--secondmain);
font-family: "Playwrite PE", cursive!important;
}
.heading-about{
color: var(--secondmain);
font-family: "Playwrite PE", cursive!important;
font-size: 30px;
}
.book{
font-size: 35px;
}
.testimony {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.testimony .card {
position: relative;
width: 260px;
margin: 0 auto;
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/a11.jpg');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
box-sizing: border-box;
text-align: center;
overflow: hidden;
border-radius: 0%!important;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border: none!important;
padding: 30px 10px;
padding-bottom: 40px;
}
.testimony .card .layer {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: calc(100% - 2px);
left: 0;
background: linear-gradient(var(--main), var(--secondmain));
transition: 0.5s;
}
.testimony .card:hover .layer {
top: 0%;
}
.testimony .card .content {
z-index: 2;
position: relative;
}
.testimony .card .content .details h2 {
font-size: 19px;
margin-top: 7%;
margin-bottom: 6%;
}
.content p{
margin-bottom: 10%;
}
.join{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 30px 0px;
}
.join-one{
font-size: 35px;
color: var(--secondmain);
margin-bottom: 4%;
animation: zoom 1.5s linear infinite alternate-reverse;
}
@keyframes zoom{
0%{transform: scale(1);}
100%{transform: scale(1.2);}
}
.join-two{
border-right: 1px dotted var(--secondmain);
}
.aim{
background-color: var(--secondmain);
padding-top: 2%;
padding-bottom: 4%;
}
.aim-one{
position: relative;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
text-align: center;
padding: 10px 10px;
padding-top: 20px;
margin-top: -15%;
background-color: var(--white);
overflow: hidden;
}
.aim-two{
font-size: 30px;
color: var(--secondmain);
}
.opactiycolor{
position: absolute;
content: "";
height: 500px;
width: 500px;
background-color: var(--main);
margin-left: 50%;
margin-top: -50%;
border-radius: 50%;
opacity: 0.3;
}
.triangledown{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid var(--main);
}
.short{
margin-left: -250%;
color: var(--main);
font-size: 20px;
}
.long{
position: absolute;
content: "";
margin-left: 250%;
color: var(--main);
font-size: 20px;
}
.tdown{
display: flex;
justify-content: center;
align-items: center;
}
.fa-quote-right{
font-size: 30px;
color: var(--secondmain);
}
.edubox{
height: 130px;
width: 88%;
background-color: var(--white);
margin-left: 16%;
padding-left: 20%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.eduboxone{
height: 100px;
width: 100px;
background-color: var(--main);
position: absolute;
content: "";
display: flex;
justify-content: center;
align-items: center;
margin-top: -8.5%;
border-radius: 10px;
}
.bookoutline{
height: 40px;
width: 40px;
color: var(--white);
}
.join-us{
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;
color: var(--white);
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
.join-us p{
margin-top: 1.5%;
margin-bottom: 4%;
}
/* footer part start */
.footer{
background: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
padding-top: 2%;
padding-bottom: 0.5%;
margin-top: 2px;
}
.footer h6{
font-size: 15px;
font-weight: bold;
margin-bottom: 12%;
}
.footer h6::before{
position: absolute;
content: "";
height: 2px;
width: 40px;
background-color: var(--main)!important;
margin-top: 24px;
}
.footer a{
font-size: 15px;
color: var(--white);
}
.footer h5{
font-size: 16px;
}
.hr{
background-color: var(--gray);
width: 82%;
margin-left: 8%;
}
.facebook{
height: 28px;
width: 28px;
color: var(--facebook);
border: 2px solid var(--facebook);
border-radius: 50%;
text-align: center;
padding-top: 5px;
margin-right: 5px;
transition: all .2s;
}
.facebook:hover{
background-color: var(--facebook);
color: var(--white);
}
.insta{
height: 28px;
width: 28px;
color: var(--purple);
border: 2px solid var(--purple);
border-radius: 50%;
text-align: center;
padding-top: 5px;
margin-right: 5px;
transition: all .2s;
}
.insta:hover{
background-color: var(--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: 5px;
margin-right: 5px;
transition: all .2s;
}
.twitter:hover{
background-color: var(--gray);
color: var(--white);
}

/* about us part start */
.common{
background: linear-gradient(rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
text-align: center;
padding-top: 40px;
padding-bottom: 20px;
}
.common a{
color: var(--white);
}
.contact{
padding-top: 10%;
}
.map{
height: 400px;
width: 100%;
}

/* get involved part start */
.form-group{
margin-top: 3%;
}
.form-control{
border: 2px solid var(--main)!important;
}
.involved{
border: 1px solid var(--white);
margin-bottom: 6%;
padding: 25px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding-bottom: 45px;
}
.submitbtn{
background-color: var(--main)!important;
color: var(--white)!important;
}
/* donate part start */
.donate-box{
border: 1px solid var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
text-align: center;
padding: 15px;
padding-top: 30px;
margin-left: -1%;
}

/* media part start */
.row-gap{
row-gap: 25px;
}

/* 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;
}
.dashboard{
background-color: var(--main);
padding-top: 10px;
color: var(--white);
}
.dashboardone{
background-color: var(--secondmain);
height: 595px;
}
.dashboardtwo{
background-color: var(--white);
padding: 8px;
margin-top: 4%;
}
.dashboardtwo a{
color: var(--secondmain);
}
.edit{
color: var(--blue)!important;
}
.delete{
color: var(--red)!important;
}
.trash{
color: var(--red)!important;
background-color: transparent!important;
border: none!important;
}

/* responsive part start */
@media (max-width: 1024px){
.whatapp{
top: 77%;
}
.title {
padding-left: 40px;
}
.titles{
padding-left: 20px;
}
.socia-link{
margin-top: 12%;
}
.logo-heading{
margin-top: 4%;
padding-left: 2%;
}
.nav-item{
font-size: 13px;
padding-right: 30px;
}
.nav-item:last-child{
padding-right: 0px;
}
.testimony {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.testimony .card {
width: 220px;
}
.eduboxone{
height: 70px;
width: 70px;
margin-top: -9.5%;
}
.bookoutline{
padding-top: 7px;
}
}

@media (max-width: 768px){
.whatapp{
top: 77%;
left: 91%;
}
.goto{
top: 90%;
left: 93%;
}
.first{
height: 75px!important;
text-align: center;
}
.title {
background: var(--white);
color: var(--black)!important;
margin-left: -0%;
}
.title:after {
display: none;
}
.titles{
width: 100%;
margin-left: 0%;
background: var(--white);
}
.titles:after {
display: none;
}
.first a{
color: var(--black);
}
.time{
color: var(--black);
}
.call-one{
color: var(--white);
border: 2px solid var(--blue);
background-color: var(--blue);
}
.email-one{
color: var(--white);
border: 2px solid var(--red);
background-color: var(--red);	
}
.res-time{
text-align: center;
margin-top: 1%!important;
}	
.logo-heading{
font-size: 18px;
margin-top: 6.3%;
margin-left: 5%;
}
.socia-link{
margin-top: 18%;
}
nav{
height: 55px;
}
.navbar-toggler{
background-color: var(--white)!important;
border-radius: 0%!important;
}
.fa-bars-staggered{
font-size: 25px!important;
}
.navbar-nav{
text-align: center;
}
.nav-link{
color: var(--black)!important;
}
.nav-item{
padding-right: 0px;
}
.nav-item:last-child{
padding-right: 0px;
}
.donate{
color: var(--white)!important;
background-color: var(--main)!important;
}
.carousel-anime{
height: 500px;
}
.join{
margin-top: -18%;
}
.res-about{
text-align: center;
}
.res-about p{
text-align: center;
}
.a-image{
margin-left: 0%;
margin-top: 5%;
}
.testimony {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.testimony .card {
width: 300px;
}
.res-card{
margin-top: 5%!important;
}
.eduboxone{
height: 90px;
width: 90px;
margin-top: -14%;
}
.edubox{
width: 84%;
}
.join-us p{
margin-top: 4%;
margin-bottom: 6%;
}
.footer{
padding-top: 4%;
padding-bottom: 2%;
}
.hr{
width: 100%;
margin-left: 0%;
}
.map{
margin-top: 5%;
}
}

@media (max-width: 425px){
.whatapp{
top: 77%;
left: 84%;
}
.goto{
top: 90%;
left: 88%;
}
.first{
height: 96px!important;
text-align: center;
}
.title {
padding-left: 0px;
height: 60px;
}
.titles{
padding-left: 0px;
}
.second{
text-align: center;
}
.logo-heading{
display: none;
}
.socia-link{
margin-top: 2%;
text-align: center;
}
.carousel-anime{
height: 280px;
}
.join-two-one{
margin-top: 10%!important;
}
.join-two{
border: none;
}
.res-card-one{
margin-top: 5%!important;
}
.aim{
padding-top: 5%;
padding-bottom: 3%;
}
.aim-one{
margin-top: 4%;
}
.edubox{
width: 70%;
margin-left: 10%;
padding-left: 20%;
}
.eduboxone{
margin-top: -25.5%;
}
.res-reach{
margin-left: 12%!important;
}
.short{
margin-left: -130%;
font-size: 15px;
}
.long{
margin-left: 130%;
font-size: 15px;
}
.footer{
padding-top: 5%;
padding-bottom: 3%;
}
.footer h6{
margin-bottom: 6%;
}
.res-footer{
margin-top: 5%!important;
}
.hr{
width: 100%;
margin-left: 0%;
}
.board-box{
padding-top: 40px;
}
.dashboard{
text-align: center;
}
.dashboardtwo{
margin-top: 2%;
text-align: center;
}
}

@media (max-width: 375px){
.whatapp{
top: 77%;
left: 82.5%;
}
.goto{
top: 90%;
left: 86.5%;
}
.second{
text-align: center!important;
}
.logo-heading{
display: none;
}
.carousel-anime img{
height: 210px;
}
.aim{
padding-top: 7%;
}
.edubox{
width: 100%;
margin-left: 0%;
padding-left: 10%;
}
.eduboxone{
margin-top: -29%;
margin-left: -8%;
}
.res-reach{
margin-left: 5%!important;
}
.map{
height: 200px;
}
}