*{
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 a{
text-decoration: none;
}
:root{
--main: #e3242b;
--secondmain: #333;
--white: white;
--black: black;
--gray: gray;
--lightgray: lightgray;
--red: red;
}
.whatsapp{
position: absolute;
content: "";
height: 75px;
width: 75px;
top: 80%;
left: 92%;
position: fixed;
z-index: 10;
}
.top{
display: none;
height: 35px;
width: 35px;
border-radius: 50%;
text-align: center;
color: var(--white);
padding-top: 3.7px;
left: 93.5%;
background-color: var(--main);
position: absolute;
content: "";
top: 92%;
position: fixed;
z-index: 10;
}
.qr{
border: 1px solid var(--lightgray);
box-shadow: 2px 2px 3px var(--gray);
}
.common{
background: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url('images/4.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 180px;
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: var(--secondmain);
color: var(--white);
height: 30px;
}
.first a{
color: var(--white);
}
.hexagon{
position: absolute;
width: 54%;
height: 30px;
margin-left: -2%;
transform: skew(-25deg);
background: var(--main);
}
.leftmargin{
margin-left: -17%;
}
.icons{
position: absolute;
content: "";
z-index: 1;
padding-top: 1px;
width: 60%;
}
.iconone{
height: 27px;
width: 27px;
background-color:blue;
border-radius: 50%;
text-align: center;
color: var(--white);
padding-top: 5px;
margin-right: 7px;
}
.icontwo{
height: 27px;
width: 27px;
background-color: var(--red);
border-radius: 50%;
text-align: center;
color: var(--white);
padding-top: 5px;
margin-right: 1px;
}
.iconthree{
margin-left: 2%;
}
.iconfour{
height: 27px;
width: 27px;
background-color: green;
border-radius: 50%;
text-align: center;
color: var(--white);
padding-top: 5px;
margin-right: 7px;
}
.har{
padding-top: 2px;
padding-bottom: 2px;
}
.harone h2{
font-size: 27px;
padding-top: 19px;
}
nav{
height: 40px;
background-color: var(--main);
border-bottom: none!important;
}
.navbar-collapse{
display: flex;
justify-content: center;
align-items: center;
}
.logo{
height: 80px;
width: 80px;
border-radius: 50%;
}
.nav-link{
color: var(--white)!important;
}
.nav-item{
padding-right: 30px;
}
.nav-item:last-child{
padding-right: 0px;
}
.nav-link{
font-size: 14px!important;
}
.dropdown-menu{
border-radius: 0%!important;
text-align: center!important;
border: none!important;
margin-top: 1.5%!important;
margin-left: -40%!important;
}
.dropdown-item{
margin-top: -3.5%;
margin-bottom: -3%;
}
/* index part start */
.home{
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;
height: 580px;
}
.home1{
background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.8)),url('images/z12.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 580px;
}
.home2{
background: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.8)),url('images/a10.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 580px;
}
.mainone{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--white);
margin-top: 8%;
}
.mainone h1{
font-size: 60px;
}
.mainone p{
margin-bottom: 1.5%;
margin-top: 0.5%;
font-size: 19px;
text-align: center;
}
.readmore{
background-color: var(--black);
padding: 9px 25px;
color: var(--white);
}
.non{
padding-left: 30px!important;
padding-top: 1%;
}
.non h2{
font-size: 34px;
}
.non p{
text-align: justify;
margin-top: 3%;
margin-bottom: 4%;
}
.aimage{
margin-left: 1.8%;
}
.gap{
margin-top: 5%!important;
}
.box{
text-align: center;
padding-top: 30px;
padding-bottom: 40px;
padding-left: 10px;
padding-right: 10px;
width: 92%;
background-color: var(--lightgray);
transition: all .3s;
}
.box:hover{
transform: translateY(-15px);
}
.box p{
margin-bottom: 8%!important;
}
.heart{
height: 50px;
width: 50px;
border: 1px solid var(--white);
background-color: var(--white);
padding: 10px;
color: var(--main);
}
.help{
padding-left: 2.5%!important;
}
.testimonial{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/a12.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: var(--white);
height: 300px;
padding-top: 45px;
}
.item{
background-color: var(--white);
padding: 10px!important;
padding-top: 20px!important;
box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 19px 0px;
margin-bottom: 5%;
color: var(--black);
}
.item p{
text-align: center;
font-size: 14px;
margin-bottom: 5%;
}
.itemone{
padding-top: 21px;
text-align: center;
}
.fa-quote-left{
height: 40px;
width: 40px;
border-radius: 50%;
padding-top: 13px;
background-color: var(--main);
}
.owltheme{
margin-top: 6%!important;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
display: none;
}
.card {
width: 312px;
height: 0px!important;
perspective: 2500px;
border: none!important;
}
.cover-image {
width: 100%;
height: 100%;
}
.wrapper {
transition: all 1s;
}
.card:hover .wrapper {
transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.cardone{
width: 100%;
text-align: center;
margin-top: 70%;
padding-right: 18px;
}
.cardone h5{
color: var(--main);
font-weight: bold;
}
.cardtwo{
padding-left: 3%!important;
}
.gaps{
margin-top: 20%;
}
.aim{
height: 110px;
width: 110px;
background-color: var(--main);
color: var(--white);
font-size: 40px!important;
text-align: center;
border-radius: 50%;
padding-top: 21px;
border: 10px solid var(--lightgray);
}
.aimone h5{
font-size: 18px!important;
}
.onezero{
height: 60px;
width: 60px;
background-color: var(--main);
border-radius: 50%;
text-align: center;
padding-top: 15px;
color: var(--white);
margin-left: 39%;
}
.twozero{
height: 60px;
width: 60px;
background-color: var(--main);
border-radius: 50%;
text-align: center;
padding-top: 15px;
color: var(--white);
margin-left: 39%;
}
.onezeroone p{
margin-top: 7%;
margin-bottom: 8%;
}
.onezero::before{
position: absolute;
content: "";
height: 3px;
width: 210px;
margin-left: 60px;
margin-top: 13px;
background-color: var(--main);
}
.onezero::after{
position: absolute;
content: "";
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 14px solid var(--main);
border-bottom: 7px solid transparent;
margin-left: 241px;
margin-top: 7.6px;
}

/* footer part start  */
.footer{
background-color: #04091e;
padding-top: 1.3%;
padding-bottom: 0.5%;
margin-top: 2%;
}
.footer h6{
font-size: 16px;
margin-bottom: 9%;
color: var(--white);
}
.footer a{
font-size: 14px;
color: var(--white);
}
.wacho{
font-size: 17px;
}
.p{
color: var(--white);
font-size: 14px;
}
.footer a:hover{
text-decoration: none;
color: var(--white);
}
.hrs{
color: var(--white);
width: 84%;
margin-left: 8%;
}
.input_field{
border: none;
outline: none;
height: 38px;
color: var(--white);
padding-left: 5px;
background-color: #555;
font-size: 14px!important;
}
.btn_one{
border: none;
border-radius: 0%!important;
outline: none;
color: var(--white)!important;
background-color: var(--main)!important;
height: 38px;
font-size: 14px!important;
margin-top: -3px;
}
.text_right{
text-align: right;
}
.text_right_one{
padding-left: 16%;
}
.Social-media{
display: flex;
justify-content: center;
}
.Social-media a{
display: flex;
background: #555;
height: 33px;
width: 33px;
margin: 25px 9px;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.5s
}
.Social-media a i{
font-size: 17px;
color: var(--white);
transition: transform 0.5s;
padding-top: 5px;
}
.Social-media a:hover{
transform: translateY(4px);
}
.Social-media a:hover i{
transform: scale(1.1);
}
.Social-media a:hover .fa-facebook{
color: #3b5998;
}
.Social-media a:hover .fa-twitter{
color: #00acee;
}
.Social-media a:hover .fa-instagram{
color: #f14843;
}
.Social-media a:hover .fa-youtube-play{
color: #f00;
}

/* about us part start */
.about_us{
color: var(--main);
font-weight: bold;
margin-bottom: 2%;
text-decoration-line: underline;
text-decoration-style: wavy;
}
.fa-bullseye,.fa-eye,.fa-diamond{
color: var(--main);
}
.bullseye{
height: 100px!important;
width: 100px!important;
border: 10px solid var(--main);
border-right: none;
border-top: none;
border-bottom: none;
border-radius: 50%;
padding-top: 5%;
margin-top: 12%;
margin-left: 33%;
}
.onlyeye{
height: 100px!important;
width: 100px!important;
border: 10px solid var(--main);
border-left: none;
border-top: none;
border-bottom: none;
border-radius: 50%;
padding-top: 5%;
margin-top: 12%;
margin-left: 33%;
}
.justify{
text-align: justify;
}

/* join with us part start */
.join{
position: relative;
border: 1px solid var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin-bottom: 2%;
height: 430px;
overflow: hidden;
}
.join img{
margin-top: 10%;
}
.joinone input{
border-radius: 0%!important;
}
.joinone select{
border-radius: 0%!important;
}
.jointwo{
padding-top: 4.5%;
padding-left: 5%!important;
}
.joinone .form-group{
margin-top: 2%;
}
.joinbtn{
background-color: var(--main)!important;
border: none!important;
width: 25%!important;
color: var(--white)!important;
}
.redcolor{
position: absolute;
content: "";
height: 330px;
width: 250px;
margin-top: -33%;
margin-left: 25%;
z-index: -2;
filter: blur(100px);
background-color: var(--main);
}

/* 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;
}

/* education part start */
.what{
padding: 8px;
box-shadow: 2px 2px 3px var(--gray);
margin-left: -35%!important;
width: 60%;
margin-top: 4%;
color: var(--main);
font-weight: bold;
margin-bottom: 4%;
text-align: center;
background-color: var(--white);
}

/* legal part start */
.pdf{
height: 300px;
width: 100%;
box-shadow: 3px 3px 4px var(--gray);
}

/* videos part start */
#video{
height: 400px;
width: 400px;
}

/* admin area part start */
.adminlogin{
margin-top: 13%!important;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 35px;
padding-bottom: 45px;
}
.adminlogin h4{
text-align: center;
}
.loginbtn{
background-color: var(--main)!important;
border: none!important;
width: 20%!important;
color: var(--white)!important;
}
.adminnav{
background-color: var(--main);
padding-top: 8px;
}
.admin{
background-color: var(--secondmain);
height: 592px;
}
.adminone{
text-align: center;
padding: 9px 0px;
margin-top: 5%;
background-color: var(--white);
}
.adminone a{
color: var(--gray);
}
.admintwo{
margin-top: 1%!important;
}
.adminthree{
background: linear-gradient(to right,orange,tomato);
text-align: center;
padding: 35px 0px;
}
.adminfour{
background: linear-gradient(to right,blue,skyblue);
text-align: center;
padding: 35px 0px;
}
.adminfive{
background: linear-gradient(to right,gray,lightgray);
text-align: center;
padding: 35px 0px;
}
.adminthree a{
color: var(--white);
}
.adminfour a{
color: var(--white);
}
.adminfive a{
color: var(--white);
}
.fa-trash-o{
color: var(--red);
font-size: 22px!important;
}
.legalform{
border: 1px solid var(--lightgray);
box-shadow: 2px 2px 3px var(--gray);
padding: 30px 20px;
}


/* responsive part start */
@media screen and (max-width: 768px){
html{
overflow-x: hidden!important;
}
body{
overflow-x: hidden!important;
font-size: 14px!important;
}
.whatsapp{
top: 72%;
left: 77%;
}
.top{
left: 82.5%;
padding-top: 5px;
padding-right: 1px;
top: 85%;
}
.first{
height: 85px;
padding-top: 3px;
text-align: center;
}
.hexagon{
display: none;
}
.icons{
margin-left: -0%;
width: 90%;
}
.iconone{
height: 23px;
width: 23px;
padding-top: 4px;
padding-left: 2px;
}
.icontwo{
height: 23px;
width: 23px;
padding-top: 4px;
}
.iconfour{
height: 23px;
width: 23px;
padding-top: 4px;
}
.rightmargin{
margin-left: -1.7%;
}
.leftmargin{
margin-top: 1%!important;
margin-left: -4%;
}
#time{
text-align: center;
margin-top: 18%;
}
nav{
height: 70%;
}
.logo{
height: 70px;
width: 70px;
margin-top: 0.5%;
margin-bottom: -3%;
}
.har{
padding-top: 1px;
padding-bottom: 5px;
height: 142px;
text-align: center;
}
.harone h2{
font-size: 16px;
}
.navbar-toggler{
border-radius: 0%!important;
margin-right: 4%;
}
.navbar-nav{
text-align: center;
}
.dropdown-menu{
border: 1px solid var(--lightgray)!important;
text-align: center!important;
margin-top: 1%!important;
margin-left: -4%!important;
font-size: 14px!important;
width: 110%!important;
}
.nav-item{
padding-right: 0px;
}
.mainone{
padding-top: 45%!important;
}
.mainone h1{
font-size: 50px;
}
.mainone p{
margin-bottom: 5%;
}
.non{
padding-left: 13px!important;
padding-top: 20px!important;
}
.non h2{
text-align: center;
font-size: 30px;
}
.non p{
margin-bottom: 8%;
}
.aimage{
margin-top: 7%!important;
margin-left: -0%!important;
}
.gap{
margin-top: 10%!important;
}
.help{
margin-left: 2%!important;
}
.rhelp{
margin-top: 8%!important;
}
.rwork{
margin-left: -3%!important;
}
.cardone{
margin-top:75%;
padding-right: 0px;
}
.rcardtwo{
margin-top: 10%!important;
}
.onezero::before{
display: none;
}
.onezero::after{
display: none;
}
.rtopone{
margin-top: 11%!important;
}
.gaps{
margin-top: 55%!important;
}
.rimone{
margin-top: 8%!important;
}
.common{
height: 160px;
padding-top: 13px;
}
#video{
height: 338px;
width: 338px;
}
.rmission{
margin-top: 8%!important;
text-align: center;
}
.what{
margin-left: -0%!important;
width: 100%;
}
.map{
height: 300px;
width: 312px;
margin-top: 7%;
}
.join{
height: 630px;
}
.redcolor{
margin-left: 15%;
}
.rg{
margin-top: 7%!important;
}
.adminlogin{
margin-top: 35%!important;
}
.loginbtn{
width: 30%!important;
}
.adminnav{
text-align: center;
}
.admin{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 310px;
}
.adminone{
width: 70%;
}
.admintwo{
margin-top: 4%!important;
padding-bottom: 50px;
}
.adminfour,.adminfive{
margin-top: 4.5%;
}
.text_right_one{
padding-left: 0%;
}
.text_right{
text-align: left;
}
.btn_one{
margin-top: -3.5px;
}
.Social-media{
margin-left: -23%!important;
}
.footer h6{
margin-top: 6%;
margin-bottom: 3%;
}
.hrs{
width: 100%;
margin-left: 0%;
}
.qr{
margin-top: 10%;
}
}