body,html{ height: 100% }
html{ scroll-behavior: smooth; }
body{
margin: 0;
padding: 0;
font-family: 'Outfit', sans-serif;
font-size: 14px;
background: #fff;
line-height: 1.67;
}
*,p,h1,h2,h3,h4,h5,h6,ul{ margin: 0 }
h1,h2,h3,h4,h5,h6{line-height: 1.55;}
ul{
padding: 0;
list-style-type: none;
}
a,a:hover{ text-decoration: none; }
a{
color: inherit;
text-decoration: none;
}
.td{ text-decoration: none !important; }
.fw1{ font-weight: 300; }
.fw2{ font-weight: 400; }
.fw3{ font-weight: 600; }
.fw4{ font-weight: 800; }
.inline{ display: inline-block; }
h1,h2,h3,h4,h5,h6{ font-weight: bold; }
.trans{
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.flex{ display: flex; }
.jc{ justify-content: center; }
.jcb{ justify-content: space-between; }
.ai{ align-items: center; }
.pointer{ cursor: pointer; }
.rel{ position: relative; }
.abs{ position: absolute; }
.fs11{ font-size: 11px !important}
.fs12{ font-size: 12px !important}
.fs13{ font-size: 13px !important}
.fs14{ font-size: 14px !important}
.fs15{ font-size: 15px !important}
.fs16{ font-size: 16px !important}
.fs17{ font-size: 17px !important}
.fs18{ font-size: 18px !important}
.fs19{ font-size: 19px !important}
.fs20{ font-size: 20px !important}
.fs22{ font-size: 22px !important}
.fs24{ font-size: 24px !important}
.fs26{ font-size: 26px !important}
.fs28{ font-size: 28px !important}
.fs30{ font-size: 30px !important}
.fs35{ font-size: 35px !important}
.fs40{font-size: 40px !important;}
.fs50{ font-size: 50px !important}
.br100{ border-radius: 100px }
.br10{ border-radius: 10px }
.br5{ border-radius: 5px }
.m0{ margin: 0 !important }
.m10{margin: 10px 0;}
.m15{ margin: 15px 0; }
.m20{margin: 20px 0;}
.mt5{ margin-top: 5px }
.mt10{ margin-top: 10px }
.mt15{ margin-top: 15px }
.mt20{ margin-top: 20px }
.mb5{ margin-bottom: 5px }
.mb10{ margin-bottom: 10px }
.mb15{ margin-bottom: 15px }
.mb20{ margin-bottom: 20px }
.mr5{ margin-right: 5px }
.mr10{ margin-right: 10px }
.mr20{ margin-right: 20px }
.ml5{ margin-left: 5px }
.ml10{ margin-left: 10px }
.ml20{ margin-left: 20px }
.cgray{color: rgb(156 173 203)}
:root{
--first: #1664EC;
--second: #9F0000;
--third: #2C2F34;
--forth: #05b56c;
}
.fwrap{ flex-wrap: wrap; }
.logo-main{
height: 40px;
}
.mainUl{
margin-left: 20px;
margin-top: 0;
}
.mainUl li, .headSpecBtnCont li
{ display: inline-block; }
.main-link{transition: 0.25s ease;color: white !important;font-size: 15px;margin-left: 10px;display: inline-block;font-weight: 500;padding: 7px 15px;border-radius: 5px;}
.main-link:hover{
background: rgb(255 255 255 / 15%)
}
.active-link{
background: rgb(255 255 255 / 15%) !important
}
.headSpecBtnCont{
margin-top: 5px;
}
.headBtn{
color: white;
font-size: 15px;
/* font-weight: 500; */
transition: 0.25s ease;
margin-left: 20px;
padding: 10px 19px;
border-radius: 4px;
}
.logBtn{
border: 1px solid white;
color: white !important;
}
.logBtn:hover,
.logBtn:focus{
background: white;
color: var(--first) !important;
}
.signBtn{
background: white;
color: var(--first);
}
.header{
position: fixed;
z-index: 99;
width: 100%;
padding: 36px 0;
transition: 0.25s ease;
}
.wave1{
position: absolute;
background: url(../img/shape3.png) no-repeat;
height: 300px;
width: 100%;
background-size: 100% 100%;
bottom: 0;
}
.cwhite { color: white !important }
.sliderHome{
background: var(--first);
padding-top: 180px;
padding-bottom: 160px;
overflow: hidden;
}
.op1{opacity: 0.7;}
.slidHomeImg img{
height: 20px;
margin-right: 30px;
margin-top: 30px;
opacity: 0.7;
}
.slidLeftBox{
z-index: 10;
}
.bottomSlid{background: url(../img/part2.png) top;padding: 80px 0;}
.btLeftBox{
background: rgb(244 248 254 / 37%);
box-shadow: rgb(22 100 236 / 11%) 0px 10px 24px;
text-align: center;
font-size: 19px;
padding: 40px 39px;
border-radius: 11px;
margin: 0px 40px 50px 0px;
border: 1px solid #e1ebfd;
}
.btLeftBox p{
line-height: 1.7;
margin-top: 9px;
font-size: 16px;
color: #4c586c;
}
.btImg{
width: 70px;
height: 70px;
background-size: 32px !important;
box-shadow: inset 0 -16px 15px rgb(0 0 0 / 14%);
}
.btImg1{
background: #1664ec url(../img/bt1.png) no-repeat center;
}
.btImg2{
background: var(--forth) url(../img/bt2.png) no-repeat center;
}
.btImg3{
background: #ef7b7b url(../img/bt3.png) no-repeat center;
}
.btImg4{
background: #ffb837 url(../img/bt4.png) no-repeat center;
}
.mt60{ margin-top: 60px }
.cfirst{color: #0049c9;}
.top-title{
background: #f3f7fe;
padding: 5px 13px;
display: inline-block;
border-radius: 3px;
margin-left: -12px;
}
.customImg1{
width: 850px;
margin-top: -67px;
}
.customBox{
margin-top: 21px;
margin-left: 30px;
}
.grad1{
background: rgba(22,100,236,1);
background: -moz-linear-gradient(top, rgba(22,100,236,1) 0%, rgba(0,60,163,1) 99%, rgba(8,25,45,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(22,100,236,1)), color-stop(99%, rgba(0,60,163,1)), color-stop(100%, rgba(8,25,45,1)));
background: -webkit-linear-gradient(top, rgba(22,100,236,1) 0%, rgba(0,60,163,1) 99%, rgba(8,25,45,1) 100%);
background: -o-linear-gradient(top, rgba(22,100,236,1) 0%, rgba(0,60,163,1) 99%, rgba(8,25,45,1) 100%);
background: -ms-linear-gradient(top, rgba(22,100,236,1) 0%, rgba(0,60,163,1) 99%, rgba(8,25,45,1) 100%);
background: linear-gradient(to bottom, rgba(22,100,236,1) 0%, rgba(0,60,163,1) 99%, rgba(8,25,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1664ec', endColorstr='#08192d', GradientType=0 );
}
.customIcon{
background-color: #fbfcff;
background-repeat: no-repeat;
background-size: 32px;
background-position: center;
height: 70px;
width: 70px;
box-shadow: rgb(22 100 236 / 11%) 0px 10px 24px;
border-radius: 13px;
margin-right: 30px;
border: 1px solid #e1ebfd;
}
.cus1{
background-image: url(../img/cus1.png);
}
.cus2{
background-image: url(../img/cus2.png);
}
.cus3{
background-image: url(../img/cus3.png);
}
.csecond{
color: var(--forth) !important
}
.justicy{ text-align: justify; }
.demoCont{
padding: 00 80px;
}
.frontPageImg{
height: 370px;
background: url(../img/sample1.png) no-repeat 0 0;
background-size: cover !important;
border-radius: 10px;
box-shadow: 0 10px 22px rgb(0 0 0 / 9%);
transition: 9s linear;
}
.adminDemoImg{
background: url(../img/sample2.png) no-repeat 0 0;
}
.frontPageImg_animate{
background-position: 0 100%
}
.demoInner{
padding: 0 20px;
}
.demoBtn{
background: var(--first);
padding: 4px 14px;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}
.demoBtn:hover
{
background: #4282f1;
box-shadow: 0 5px 12px rgb(7 120 74 / 56%);
transform: rotateY(360deg);
}
.line-head, .line-head span{
position: relative;
}
.line-head::before{
content: '';
position: absolute;
height: 1px;
width: 100%;
background: rgb(22 100 236 / 26%);
left: 0;
top: 23px;
z-index: 0;
}
.line-head span{
background: white;
z-index: 1;
padding: 0 30px;
}
.galleryCont{
padding: 60px 0 30px;
}
.galleryImg{
margin: 0 27px 60px;
}
.imgGal{
height: 200px;
width: 210px;
object-fit: cover;
overflow: hidden;
object-position: top;
border-radius: 9px;
box-shadow: 0 10px 22px rgb(0 0 0 / 9%);
margin-bottom: 23px;
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
.galleryImg .img1{
background-image: url(../img/sample1.png);
}
.galleryImg .img2{
background-image: url(../img/sample3.png);
}
.galleryImg .img3{
background-image: url(../img/sample4.png);
}
.galOpenImg{
width: 100%;
height: 100%;
background: rgb(0 0 0 / 64%);
opacity: 0;
transition: 0.25s ease;
}
.galOpenImg:hover{
opacity: 1
}
.priceCont{
background: #f3f7fe url(../img/part6.png) top;
padding: 10px 0 110px;
margin-top: 130px;
}
.priceCont::before{
content: '';
position: absolute;
width: 100%;
height: 200px;
background: url(../img/shape5.png) no-repeat;
background-size: 100% 100%;
display: block;
top: -140px;
}
.priceBox{
background: white;
border-top: 4px solid blue;
padding: 30px 30px;
border-radius: 15px;
transition: 0.2s ease;
}
.priceBox:hover{
box-shadow: 0 13px 20px rgb(22 100 236 / 13%);
transform: scale(1.03);
}
.price-title{
font-size: 24px;
}
.priceCost{
font-size: 55px;
line-height: 1;
color: var(--first);
margin: 12px 0;
}
.priceDesc{
padding: 10px 17px;
background: #1664ec1a;
margin-bottom: 20px;
color: #1664ec;
border-radius: 7px;
}
.priceList{
}
.priceList li{
display: flex;
font-size: 17px;
align-items: center;
margin: 16px 0;
color: #909bad;
}
.priceDay{
font-size: 20px;
padding-bottom: 17px;
}
.priceList .fa-check{
margin-right: 19px;
display: flex;
align-items: center;
justify-content: center;
background: var(--first);
color: white;
height: 28px;
font-size: 13px;
width: 28px;
border-radius: 7px;
}
.priceBtn{
background: var(--first);
width: 100%;
text-align: center;
padding: 11px 0;
box-shadow: 0 6px 7px rgb(22 100 236 / 28%);
}
.priceBtn:hover{
background: #347eff;
}
.priceBox2{
border-top: 4px solid #03965a;
}
.priceBox2 .priceCost{
color: var(--forth);
}
.priceBox2 .priceDesc{
background: #05b56c1f;
color: #059157;
}
.priceBox2 .fa-check{
background: var(--forth);
}
.priceBox2 .priceBtn{
background: var(--forth);
box-shadow: 0 6px 7px rgb(5 181 108 / 35%);
}
.priceBox2 .priceBtn:hover{
background: #13d585;
}
.footer{
background: #003085;
padding: 50px 0;
}
.footLogo{
width: 120px;
}
.footer::before{
content: '';
display: block;
position: absolute;
background: url(../img/shape6.png) no-repeat;
background-size: 100% 100%;
top: -90px;
height: 120px;
width: 100%;
}
.footList a{
color: white;
font-size: 14px;
}
.footList li{
margin-bottom: 9px;
}
.footList a:hover{
color: #5491fb
}
.footSocial .fa{
margin-right: 14px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
background: #0841a3;
height: 33px;
width: 33px;
border-radius: 5px;
}
.footSocial a{
color: white !important
}
.footSocial .fa:hover{
background: #0b4ab7
}
.customCont{
background: url(../img/part3.png) top;
padding-bottom: 80px;
overflow: hidden;
}
.fixedHeader{
background: rgb(22 100 236 / 92%);
padding: 17px 0;
box-shadow: 0 0 22px rgb(0 0 0 / 19%);
}
.bar{
top: 0;
right: 10px;
z-index: 99;
padding: 3px 12px;
cursor: pointer;
display: none;
}
.bar span{
background: white;
width: 23px;
height: 2px;
display: block;
margin: 8px 0;
}
.bar span:nth-child(2){
width: 13px;
margin-left: 7px;
}
.galFlex p{
background: #f3f7fe;
padding: 10px 0;
border-radius: 8px;
}
.particle{
animation-iteration-count: infinite;
animation-timing-function: ease;
}
.p1{
left: 47%;
top: 20%;
animation-name: p1;
animation-duration: 5s;
}
@keyframes p1 {
0%{ top: 20% }
50%{ top: 30% }
100%{ top: 20% }
}
.p2{
animation-name: p2;
animation-duration: 5s;
bottom: 32%;
left: 5%;
}
@keyframes p2 {
0%{ bottom: 32% }
50%{ bottom: 40% }
100%{ bottom: 32% }
}
.p3{
animation-name: p3;
animation-duration: 4s;
bottom: 30%;
left: 43%;
}
@keyframes p3 {
0%{ bottom: 32% }
50%{ bottom: 35% }
100%{ bottom: 32% }
}
.p4{
animation-name: p4;
animation-duration: 4s;
bottom: 65%;
right: 4%;transform: scale(1)
}
@keyframes p4 {
0%{ transform: scale(0.9); }
50%{ transform: scale(1.5); }
100%{ transform: scale(0.9); }
}
.p5{
animation-name: p5;
animation-duration: 4s;
top: 22%;
left: 7%;
width: 17px;
}
@keyframes p5 {
0%{ top: 22% }
50%{ top: 25% }
100%{ top: 22% }
}
.p6{
animation-name: p6;
animation-duration: 1s;
bottom: 8%;
transform: rotate(0deg);
left: 32%;
}
@keyframes p5 {
0%{ transform: rotate(0deg); }
50%{ transform: rotate(100deg); }
100%{ transform: rotate(0deg); }
}
.sliderBtn{
padding: 17px 24px;
box-shadow: 0 5px 12px rgb(7 120 74 / 28%);
transform: rotateY(0deg);
transition: 1s ease
}
.sliderBtn p{
position: relative;
z-index: 10;
}
.sliderBtn::before,
.sliderBtn::after,
.btBtn::before,
.btBtn::after
{
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
transition: 0.25s ease;
top: 0;
}
.sliderBtn::before{
background: #05b56c;
display: block;
border-radius: 5px;
opacity: 1;
transform: scale(1);
}
.sliderBtn:hover::before,
.btBtn:hover::before
{
transform: scale(0);
opacity: 0;
}
.sliderBtn::after
{
transform: scale(1.15);
border: 2px solid white;
opacity: 0;
}
.sliderBtn:hover::after,
.btBtn:hover::after
{
transform: scale(1);
opacity: 1
}
.btBtn{
padding: 13px 30px;
box-shadow: 0 6px 7px rgb(22 100 236 / 28%);
}
.btBtn::before{
background: #1560E4;
display: block;
border-radius: 5px;
opacity: 1;
transform: scale(1);
}
.btBtn::after
{
transform: scale(1.15);
border: 1px solid #1560E4;
opacity: 0;
}
.btBtn p{
position: relative;
z-index: 10;
}
.btBtn:hover p{
color: var(--first)
}
.moveUp{
font-size: 37px;
margin: auto;
width: 60px;
height: 60px;
border-radius: 100px;
background: var(--forth);
left: 0;
transition: 0.25s ease;
top: -40px;
right: 0;
box-shadow: 0 5px 15px rgb(0 0 0 / 16%);
}
.moveUp:hover{
transform: scale(1.12);
background: rgb(19, 213, 133)
}
.footLinkSocial a{
background: #063a97;
padding: 5px 10px;
border-radius: 4px;
display: flex;
align-items: center;
margin-bottom: 15px;
}
.copyTxtFooter{
border-top: 1px solid rgb(255 255 255 / 18%);
padding-top: 12px;
}
.sliderImg1{
position: absolute;
z-index: 1;
width: 720px;
left: 50px;
top: -30px;
}
.reviewCont{
padding: 50px 0 140px;
overflow-x: hidden;
background: url(../img/reviewBg.png) top;
}
.reviewSlider{
}
.reviewUserImg{
margin-bottom: 40px;
width: 190px;
border: 11px solid #dee9fc;
border-radius: 100px;
padding: 10px;
}
.userReview{
font-size: 21px;
color: #486597;
padding: 0 50px;
}
.quote1{
left: 130px;
width: 180px;
top: 50px;
}
.quote2{
width: 120px;
bottom: -70px;
right: 60px;
}
.smallUserImg{
border-radius: 100px;
opacity: 0.7;
}
.user2{
left: 0;
top: -80px;
}
.user3{
left: -90px;
top: 150px;
}
.user4{
left: 30px;
bottom: -60px;
}
.user5{
right: 0px;
top: -30px;
}
.user6{
right: -90px;
bottom: 150px;
}
.revScrolBtn{
font-size: 23px;
color: rgb(165 196 247);
padding: 10px;
transition: 0.2s ease;
border-radius: 100px;
opacity: 0.55;
}
.revScrolBtn:hover{
opacity: 1
}
.revBtnCont{ margin-top: 50px }
.slick-prev, .slick-next{ display: none !important; }
.w100 { width: 100% }
.loginCont{
background: #DDE8FF url(../img/logBg.png) top;
min-height: 100%;
}
.logFlex{
}
.leftLogin{
background: white;
padding: 40px 40px;
width: 400px;
}
.inpImg{
height: 22px;
margin-right: -23px;
position: absolute;
left: 12px;
top: 12px;
z-index: 1;
}
.inp1{width: 100%;padding: 9px 11px;padding-left: 48px;border: none;background: #f1f6ff;border-radius: 3px;position: relative;margin-bottom: 20px;outline: none;font-size: 15px;}
.btnLog{
border: none;
background: var(--forth);
padding: 9px 10px;
}
.logTitle{
margin: 20px 0 10px;
}
.loggoogle{
background: #C4402F;
}
.specBtn{
width: 100%;
display: block;
text-align: center;
padding: 9px 10px;
}
.logFb{
background: #3961BA
}
.link{
color: var(--first);
}
.hrLog{
margin: 22px -40px;
border-top: 4px solid #dde8ff73;
}
.lockImgLog{
width: 50px;
margin-right: 25px;
}
.rightLogin{
background: var(--first);
padding: 40px 40px;
width: 400px;
}
.regIcons{
position: absolute;
z-index: 1;
font-size: 19px;
top: 13px;
color: var(--first);
left: 14px;
}
.checkbox1{
width: 19px;
height: 19px;
}
.regBtn{
padding: 9px 10px;
border: none;
outline: none;
}
.aboutPage{
}
.aboutTop{
background: var(--forth);
padding: 150px 0 120px;
border-radius: 0 0 460px 0;
}
.aboutBoxCont{
margin: -70px 0 0;
}
.aboutTopBox{
width: 310px;
background: white;
padding: 50px 40px 45px;
margin-right: 40px;
box-shadow: rgb(0 0 0 / 10%) 0px 6px 25px;
border-radius: 6px;
}
.aboutTopImg{
width: 54px;
}
.aboutTopBox h3{
font-weight: 600;
font-size: 20px;
margin: 20px 0 9px;
color: #05b56c;
}
.aboutTopBox p{
color: #86909f;
}
.aboutSec2{
background: url(../img/about1Bg.png) top;
padding: 90px 0 130px;
}
.ab1{
width: 480px;
position: absolute;
left: 90px;
top: -10px;
}
.aboutBtn1{
background: var(--forth);
padding: 11px 50px;
box-shadow: 0 6px 7px rgb(5 181 108 / 35%);
}
.aboutBtn1:hover{
background: #0ccd7d
}
.ticketCont{
background: #e8f1ed;
padding: 50px 60px;
border-radius: 70px 70px 70px 0px;
margin-bottom: 130px;
}
.contactImg1{
width: 440px;
left: 70px;
top: 20px;
}
.contactBtn{
background: var(--forth);
padding: 12px 30px;
color: white !important;
overflow-x: hidden;
}
.contactBtn::before{
content: '';
position: absolute;
background: white;
transition: 0.3s ease;
height: 100%;
display: inline-block;
width: 100%;
left: -100%;
top: 0;
}
.contactBtn:hover::before{
left: 0%;
}
.contactBtn:hover{
color: #05b56c !important
}
.contactBtn span{ z-index: 1 }
.ov{ overflow-x: hidden; }
@media screen and (max-width: 992px) {
.slidRightImg, .slidIphonImg, .wave1,
.customImg1, .navMob, .line-head::before,
.smallUserImg
{ display: none; }
.main-link, .mainUl li, .headFlex, .bar,
.loginCont, .logFlex, .aboutBoxCont
{ display: block; }
.leftLogin, .rightLogin, .aboutTopBox,
.ab1, .contactBtn
{ width: 100% }
.headSpecBtnCont li,
.headSpecBtnCont a
{width: 100%;display: block;text-align: center;margin: 0 7px;}
.sliderHome, .mainUl, .footer, .aboutSec2,
.contactBtn
{ text-align: center; }
.header{
background: rgb(22 100 236 / 92%);
}
.mainUl, .rightLogin{
margin: 30px 0 0;
}
.main-link{
padding: 11px 10px;
margin-bottom: 10px;
}
.sliderHome{
padding: 130px 20px 70px;
}
.btLeftBox{
margin: 24px 17px;
}
.headSpecBtnCont{
display: flex;
align-items: center;
justify-content: center;
}
.header{
padding: 19px 0;
}
.line-head span{
padding: 0 30px;
}
.demoCont{
padding: 0
}
.imgGal{
height: 161px;
width: 160px;
}
.galleryImg {
margin: 0 14px 60px;
}
.priceBox{
margin: 0 10px 40px;
}
.footSocial li{
justify-content: center;
}
.footList { margin: 50px 0 }
.sliderImg1{
position: static;
width: 100%;
margin-top: 40px;
}
.quote1{
left: -40px;
top: -20px;
width: 150px;
}
.quote2{
bottom: -80px;
width: 70px;
}
.userReview{
padding: 0 40px
}
.loginCont{ padding-top: 20px }
.aboutTopBox{ margin-bottom: 20px }
.ab1{
position: static;
margin-top: 50px;
}
.contactImg1{
position: static;
width: 100%;
margin-bottom: 40px;
}
}