*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* reusuable code */
body{
font-size: 16px!important;
font-family: 'Roboto', sans-serif!important;
}
body a{
text-decoration: none;
}
:root{
--main: #e2054f;
--black: black;
--gray: gray;
--lightgray: lightgray;
--white: white;
--blue: blue;
}
.whatsapp{
position: absolute;
content: "";
height: 60px;
width: 60px;
background-color: var(--white);
border-radius: 50%;
top: 81%;
left: 93%;
z-index: 50;
position: fixed;
}
.fa-long-arrow-up{
position: absolute;
content: "";
height: 35px;
width: 35px;
background-color: var(--main);
color: var(--white);
text-align: center;
top: 92%;
left: 94%;
padding-top: 10px;
z-index: 50;
position: fixed;
}
.fa-phone{
height: 25px;
width: 25px;
border-radius: 50%;
background-color: var(--blue);
color: var(--white);
text-align: center;
padding-top: 6px;
margin-right: 5px;
}
.fa-envelope-o,.fa-youtube{
height: 25px;
width: 25px;
border-radius: 50%;
background-color: red;
color: var(--white);
text-align: center;
padding-top: 5px;
margin-right: 5px;
cursor: pointer;
}
.fa-facebook{
height: 26px;
width: 26px;
border-radius: 50%;
background-color: #3b5998;
color: var(--white);
text-align: center;
padding-top: 7px;
margin-right: 5px;
cursor: pointer;
}
.fa-twitter{
height: 25px;
width: 25px;
border-radius: 50%;
background-color: #00acee;
color: var(--white);
text-align: center;
padding-top: 6px;
margin-right: 5px;
cursor: pointer;
}
.fa-instagram{
height: 25px;
width: 25px;
border-radius: 50%;
background-color: red;
color: var(--white);
text-align: center;
padding-top: 5px;
margin-right: 5px;
cursor: pointer;
}
.fa-linkedin{
height: 25px;
width: 25px;
border-radius: 50%;
background-color: #0a66c2;
color: var(--white);
text-align: center;
padding-top: 5px;
margin-right: 5px;
cursor: pointer;
}
.fa-map-marker{
height: 25px;
width: 25px;
border-radius: 50%;
background-color: red!important;
color: var(--white);
text-align: center;
padding-top: 5px;
margin-right: 5px;
cursor: pointer;
}
.dark{
background-color: #333;
color: var(--lightgray);
padding-top: 5%;
padding-bottom: 5%;
}
/* navbar part start */
.logo{
width: 100px!important;
border-radius: 50%;
margin-left: -40%!important;
}
.nav-link{
color: var(--white)!important;
font-size: 14px!important;
letter-spacing: 1px!important;
}
.nav-item{
padding-left: 15px;
}
.nav-item:first-child{
padding-left: 0px;
}
.me{
padding-left: 26%!important;
}
.dropdown-menu{
border-radius: 0%!important;
text-align: center!important;
background: var(--white)!important;
}
.topone{
margin-top: -3%;
margin-bottom: -3%;
color: var(--black)!important;
}
.dropdown-item:hover{
background-color: var(--main)!important;
}
.dropdown-divider{
background-color: var(--lightgray)!important;
}
/* index part start */
header{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.tixt{
position: absolute;
color: var(--white)!important;
}
.overlay{
position: absolute;
height: 100vh;
width: 98.7vw;
background: linear-gradient(to bottom,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.2));
}
.hum{
margin-top: -13%!important;
}
.humone{
margin-left: 8%!important;
margin-top: 7%!important;
}
.maintwo{
display: flex;
justify-content: center;
align-items: center;
color: var(--white);
padding-top: 10%;
text-align: center;
}
.mainone{
color: var(--white)!important;
background-color: var(--main);
padding: 7px 15px;
padding-bottom: 8px;
border-radius: 50px;
}
.mainthree{
font-size: 70px;
font-weight: bold;
letter-spacing: 3px;
color: var(--main);
text-shadow: 2px 2px 3px var(--gray);
}
.maintwo h5{
margin-bottom: 4%;
letter-spacing: 2px;
}
.mainfour{
margin-bottom: 2%!important;
width: 50%;
text-align: justify;
}
.gap{
margin-top: 4%;
}
.square{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/6.jpg');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
padding-top: 3%;
padding-bottom: 3%;
}
.justify{
text-align: justify;
}
.about{
color: var(--main);
font-weight: bold;
font-size: 13px;
letter-spacing: 2px;
}
.aboutone{
height: 63px;
width: 63px;
background-color: var(--main);
border-radius: 50%;
color: var(--white);
padding: 16px;
padding-left: 20px;
}
.about_one{
margin-top: 2%;
margin-bottom: 2.5%;
font-size: 48px;
}
.fa-camera{
padding-left: 17px;
}
.lower{
margin-bottom: 5%;
}
.counter{
height: 100px;
width: 100px;
border-radius: 50%;
background-color: transparent;
border: 4px solid var(--main);
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 8%;
transition: .8s;
}
.counter::before{
position: absolute;
content: "";
height: 120px;
width: 120px;
background-color: transparent;
border-radius: 50%;
border: 1px dotted var(--white);
}
.counter:hover{
background-color: var(--main);
}
.countone{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.countone h6{
letter-spacing: .5px;
}
.card{
width: 320px;
height: 370px!important;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
border-radius: 0px!important;
color: var(--white)!important;
}
.card img{
width: 320px;
position: absolute;
height: 100%!important;
transition: 1s;
}
.card h6{
font-size: 15px!important;
}
.cardone{
position: absolute;
background-color: var(--white);
color: var(--main);
width: 100%;
margin-left: 110%!important;
margin-top: 83%!important;
padding-top: 3%;
padding-bottom: 3%;
transition: 1s;
text-align: center;
padding-left: 8%;
}
.card:hover .cardone{
margin-left: 0%!important;
} 
.card:hover img{
transform: scale(1.15);
filter: contrast(120%);
}
.gaps{
margin-top: 5%!important;
}
.popular{
margin-left: 2%!important;
}
.item{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 5px 8px;
border-right: 2px dotted var(--white);
transition: 1s;
padding-top: 20px;
}
.items{
border: none!important;
}
.item img{
height: 100px!important;
width: 100px!important;
border-radius: 50%;
margin-bottom: 3%;
}
.item:hover{
transform: scale(1.03);
}
.trends{
background: linear-gradient(rgba(226,5,79,0.8),rgba(226,5,79,0.8)),url('images/5.jpg');
background-repeat: no-repeat;
background-size: cover;
padding-top: 4%;
padding-bottom: 5%;
color: var(--white);
margin-top: 5%;
}
.onemain{
color: var(--main)!important;
background-color: var(--white);
padding: 6px 9px;
border-radius: 50px;
font-weight: bold;
}
.trendone{
margin-top: 2.5%;
margin-bottom: 4%;
}
.event{
text-align: center;
background-color: #111;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.event a{
color: var(--white);
padding: 2px 2px;
}
.dateone{
position: absolute;
margin-top: -2.2%;
margin-left: 16.3%;
background-color: var(--main);
padding: 5px 8px;
width: 10%;
color: var(--white);
}
.varrow{
padding-left: 10px;
padding-right: 10px;
}
.fa-location-arrow,.fa-comment-o{
color: var(--main);
padding-right: 5px;
}

/* footer part start */
.footer{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url('images/4.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding-top: 2.5%;
}
.footer a{
color: var(--white)!important;
font-size: 14px;
}
.footer p{
color: var(--white)!important;
font-size: 14px;
}
.footer h5{
color: var(--main)!important;
font-size: 15px;
padding-bottom: 4.5%;
font-weight: bold;
}
.footer h5:before{
position: absolute;
content: "";
height: 2px;
width: 40px;
background-color: var(--main);
margin-top: 1.8%;
}
.footer h4{
color: var(--main)!important;
font-size: 15px;
padding-bottom: 1%;
}
.footer h4:before{
position: absolute;
content: "";
height: 2px;
width: 40px;
background-color: var(--main);
margin-top: 1.8%;
}
.bal{
margin-top: 2%;
padding-top: 5.5px;
}
.hr{
color: var(--white)!important;
margin-top: 2%;
border: 1px dotted var(--white);
}
.footer_one,.footer_on,.footer_o,.footer_two,.footer_tw{
border-left: 1px dotted var(--white);
padding-left: 10px;
}
.footer_one:before{
position: absolute;
content: "";
height: 10px!important;
width: 10px!important;
background-color: var(--main);
border-radius: 50%;
left: 22.5%;
margin-top: 110px;
}
.footer_on:before{
position: absolute;
content: "";
height: 10px!important;
width: 10px!important;
background-color: var(--main);
border-radius: 50%;
left: 8.4%;
margin-top: 110px;
}
.footer_o:before{
position: absolute;
content: "";
height: 10px!important;
width: 10px!important;
background-color: var(--main);
border-radius: 50%;
left: 36.6%;
margin-top: 110px;
}
.footer_two:before{
position: absolute;
content: "";
height: 10px!important;
width: 10px!important;
background-color: var(--main);
border-radius: 50%;
left: 50.6%;
margin-top: 110px;
}
.footer_tw:before{
position: absolute;
content: "";
height: 10px!important;
width: 10px!important;
background-color: var(--main);
border-radius: 50%;
left: 64.7%;
margin-top: 100px;
}

/* about us part start */
.aboutus{
background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)),url('images/4.jpg');
background-repeat: no-repeat;
background-size: cover;
color: var(--white);
padding-top: 6%;
padding-bottom: 6%;
}
.aboutusone{
margin-top: 3%;
margin-bottom: 3%;
}
.aboutusone{
font-size: 20px;
}
.updates{
background-color: var(--white);
box-shadow: 2px 2px 3px var(--gray);
}
.updates a{
color: var(--black);
}
/* model registration part start */
.model_form_data{
background: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9)),url('images/nightrain.jpg');
background-repeat: no-repeat;
background-size: cover;
margin-top: 0.1%;
margin-bottom: 0.1%;
}
.some_detils{
padding-top: 4%;
}
.fill_in_some{
margin-top: 5%;
margin-bottom: 5%;
}
.slect_option{
margin-top: 6%;
border-top: none!important;
border-left: none!important;
border-right: none!important;
border-bottom: 2px solid var(--main)!important;
border-radius: 0%!important;
color: lightgray!important;
padding-bottom: 10px!important;
background: transparent!important;
}
.slect_option option{
color: var(--main);
}
.member_form{
padding-bottom: 25px!important;
background: transparent!important;
margin-top: 3%;
border-top: none!important;
border-left: none!important;
border-right: none!important;
border-radius: 0%!important;
border-bottom: 2px solid var(--main)!important;
outline: none!important;
}
.login_button{
background-color: var(--main);
border: none;
outline: none;
padding: 5px 20px;
cursor: pointer;
margin-left: 79%;
color: white;
margin-top: 5%;
}
::placeholder{
color: var(--white)!important;	
}
/* contact part start */
.form{
border: 1px solid var(--gray);
background-color: var(--gray);
padding: 15px;
padding-bottom: 30px;
margin-top: 15%;
}
.form input{
border-radius: 0%;
}
.form-group{
margin-top: 4%;
}
/* gallery part start */
.ery{
width: 100%;
height: 100%;
}
.ery:hover{
opacity: 0.4;
}

/* admin arae part start */
.afirst{
background-color: var(--main);
padding-top: 1%;
padding-bottom: 0.3%;
}
.logout{
color: var(--main);
background-color: var(--white);
padding: 5px 10px;
margin-top: 2%!important;
}
.admin{
height: 120px;
width: 120px;
border-radius: 50%;
margin-bottom: 3%;
}
.adminone{
background-color: var(--black);
color: var(--white);
padding-top: 2%;
height: 100%!important;
padding-bottom: 2%;
}
.adminbox{
background: linear-gradient(to right,#2bc6b5,#3fdf95);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--white);
}
.adminboxone{
background: linear-gradient(to right,#feae2e,#fa8797);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--white);	
}
.adminboxtwo{
background: linear-gradient(to right,#a154f1,#5dc0f3);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--white);	
}
.adminboxfour{
background: linear-gradient(to left,#3b5998,#00acee);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--white);	
}
.adminboxthree{
background: linear-gradient(to right,var(--main),orange);
height: 150px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--white);	
}
.adminmodel{
background-color: var(--white);
padding: 7px 0px;
margin-bottom: 8%;
}
.adminmodel a{
color: var(--black)!important;
font-size: 15px!important;
padding-left: 7px;
}
.fa-bars{
color: var(--main);
padding-right: 8px!important;
}
.name{
background-color: var(--main);
color: var(--white);
padding: 5px 0px;
margin-top: 8%;
margin-bottom: 10%;
}
.fa-times-circle{
font-size: 25px!important;
color: red!important;
}
.login{
background-color: var(--lightgray);
height: 643px;
display: flex;
justify-content: center;
align-items: center;
}
.loginbox{
background-color: var(--white);
box-shadow: 0px 0px 4px var(--gray);
height: 300px;
}
.loginone{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(rgba(226, 5, 47, 0.5),rgba(226, 5, 46, 0.9)),url('images/nightrain.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 300px;
}
.logintwo{
display: flex;
justify-content: center;
align-items: center;
}
.logintwo input{
border-radius: 50px;
width: 140%;
margin-left: -19%;
background-color: var(--lightgray);
}
.logintwo label{
margin-left: -18%;
}
.loginbtn{
background: linear-gradient(to right,rgba(226, 5, 47, 0.7),rgba(226, 5, 47, 0.9));
color: var(--white)!important;	
}

/* responsive part start */
@media screen and (max-width: 768px){
.tixt{
text-align: center;
margin-left: -3%;
}
.navbar-toggler{
background-color: var(--white)!important;
}
.logos{
width: 90px!important;
margin-left: 15%!important;
}
.hum{
margin-top: 25%!important;
}
.humone{
width: 96%;
margin-left: 4%!important;
}
.mainthree{
font-size: 45px;
}
.mainfour{
margin-bottom: 8%!important;
width: 100%;
text-align: center;
}
.humone h5{
font-size: 19px;
}
.square{
background-position: center;
text-align: center;
padding-top: 12%;
padding-bottom: 10%;
}
.about_one{
font-size: 30px;
}
.resp_lower{
margin-top: 12%!important;
}
.lower h5{
margin-top: 4%;
}
.resp_countone{
margin-top: 5%!important;
}
.resp_model{
padding-top: 8%;
padding-bottom: 10%;
}
.popular{
margin-left: -4.8%!important;
}
.trends{
padding-top: 8%;
padding-bottom: 10%;
}
.item{
border: none;
}
.rs_event{
margin-top: 7%!important;
}
.dateone{
margin-top: -9.5%;
margin-left: 58.5%;
width: 28%;
}
.footer{
padding-top: 7%;
padding-bottom: 4%;
}
.footer h5{
padding-bottom: 3%;
}
.footer h5:before{
margin-top: 5.5%;
}
.resp_footer{
margin-top: 8%!important;
}
.footer_one:before{
left: 5.5%;
}
.footer_on:before{
left: 5.5%;
}
.footer_o:before{
left: 5.5%;
}
.footer_two:before{
left: 5.5%;
}
.footer_tw:before{
margin-top: 100px;
left: 5.5%;
}
.hr{
margin-top: 10%!important;
}
.reserved{
text-align: center;
}
.reservedone{
display: flex;
justify-content: center;
align-items: center;
}
.whatsapp{
left: 80%;
}
.fa-long-arrow-up{
left: 83%;
}
.logo{
margin-left: -10%!important;
}
.resek{
padding-left: 15px!important;
}
.collapse{
text-align: center;
margin-left: -37%;
}
.dropdown-menu{
width: 80%;
margin-left: 8%!important;
}
.aboutusone{
margin-bottom: 7%;
}
.aboutus{
padding-top: 10%;
padding-bottom: 12%;
}
.res_updates{
margin-top: 8%!important;
}
.model_form_data{
padding-top: 10%;
padding-bottom: 12%;
}
.login_button{
margin-left: 69%!important;
}
.resp_pop{
margin-left: -1%!important;
}
.about_one{
font-size: 25px;
}
.cry{
margin-top: 7%!important;
}
.form{
margin-bottom: 8%;
}
.loginbox{
height: 450px;
}
.loginone{
height: 225px;
}
.dashboard{
text-align: center;
}
.res_dashboard{
display: flex;
justify-content: center;
align-items: center;
}
.afirst{
padding-top: 3%;
padding-bottom: 4%;
}
.logout{
font-size: 13px;
}
.admin{
margin-top: 6%;
}
.ressadmin{
margin-top: 5%!important;
}
.ressadminone{
margin-bottom: 5%!important;
}
.table{
font-size: 13px;
}
}