*{font-family: "Poppins", sans-serif;}
img{width: 100%}
.pd-top-60{padding-top: 60px;}
.pd-bottom-60{padding-bottom: 60px;}
.position-relative{position: relative;}
.ov-hidden{overflow: hidden;}
.display-flex{display: flex;}
.display-flex-center{display: flex; align-items: center;}
.text-white{color: #fff !important}
.container-wrapper{max-width: 1300px; padding:0 15px; margin: auto}
.header-menu-right{display: flex; flex: 1; justify-content: flex-end;}
/* Header Start */
.top-box{background:#f97615; font-size: 16px; text-align: center; color: #fff; padding: 10px 0;}
.top-box ul{margin: 0; padding: 0;}
.top-box ul li{position: relative; display: inline-block; padding: 0 30px;}
.top-box ul li span{background: #fff; border-radius: 50%; height: 35px; width: 35px; padding: 5px; text-align: center; display: inline-block;}
.top-box ul li span img{filter: invert(100%);}
.header-content{padding: 10px 0;}
.header-logo{width: 200px;}
.header-logo a{display: inline-block; padding: 10px 0; color: #000; font-size: 30px; font-weight: 900}
.header-menu ul{margin:0; padding:0;}
.header-menu ul li{display: inline-block; position: relative;}
.header-menu ul li a{font-size: 15px; color: #000; font-weight: 600; display: inline-block; padding:15px 16px;}
/* Header Closed */
.banner-content{background: #f5f5f5; position: relative;}
.header-btm-img{position: absolute; height: 15px; width: 100%; top: 0; left: 0; z-index: 99}
.header-btm-img img{position: relative; top: -7px;}
.main-banner-img{overflow: hidden; display: block; position: relative;}
.search-box-img{width: 290px; top: -20px; right: 70px; position: absolute; display: inline-block; animation: bulbRotate 4s linear infinite}
.banner1-rt{position: absolute; width: 600px; height: 420px; right: 100px; bottom: 0; display: inline-block; z-index: 999}
.main-girl-v{position: absolute; width:220px; height: 220px; left: 0; top: -194px; display: inline-block; animation:bannerVectorbox 2s linear; z-index: 99}
.main-girl-v img{animation:bannerVectorimg 4s linear infinite; position: relative;}
.main-men-v{position: absolute; width:100px; height: 100px; right:38px; bottom:245px; display: inline-block; animation:bannerVectormen 4s linear infinite;}
@keyframes bannerVectorbox {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes bannerVectorimg {
0% {
left: 0px;
}
50% {
left: 20px;
}
100% {
left: 0px;
}
}
@keyframes bannerVectormen {
0% {
bottom: 245px;
}
50% {
bottom: 270px;
}
100% {
bottom: 245px;
}
}
.banner-btm-img-main-vector{height: 135px; width: 100%; z-index: 9; display: inline-block; position: absolute; background: url(../images/banner-bottom-img-img.png) no-repeat; background-size: cover; bottom: 0; left: 0;}
.banner-img-box-pattern{position: absolute; bottom:43px; left: 0; height: 100px; width: 100%; }
.banner-img-box-pattern svg{fill: #fff; transform: rotate(-180deg);}
.main-hd{font-size: 43px; font-weight: 600; color: #000; line-break: 55px;}
.main-box-content-hd{font-size:36px; font-weight: 600; color: #000; line-break: 47px; margin-bottom: 20px;}
.main-box-content-txt{color: #000; font-size: 17px; line-height: 30px;}
.main-box-content-footer{color: #fff; font-size: 17px; line-height: 30px;}
.ka-h{background:#c52120; padding: 14px 0; font-size:19px; color: #fff; margin-top: 15px; position: relative;}
.ka-h:before{content: ''; position: absolute; height: 50px; width: 50px; left:-31px; top: 3px; background: #fff; border-radius: 10px; transform: rotate(45deg);}
.ka-h:after{content: ''; position: absolute; height: 50px; width: 50px; right:-31px; top: 3px; background: #fff; border-radius: 10px; transform: rotate(45deg);}
.step-wise-box{margin-top: 40px;}
.step-wise-box ul{margin:0; padding:0; display: flex;}
.step-wise-box ul li{width: 300px; padding: 10px; position: relative; display: block;}
.step-wise-box ul li:nth-child(1) .step-wise-box-inner{background: url(../images/step-1.png) no-repeat; background-size: cover;}
.step-wise-box ul li:nth-child(2) .step-wise-box-inner{background: url(../images/step-2.png) no-repeat; background-size: cover;}
.step-wise-box ul li:nth-child(3) .step-wise-box-inner{background: url(../images/step-3.png) no-repeat; background-size: cover;}
.step-wise-box ul li:nth-child(4) .step-wise-box-inner{background: url(../images/step-4.png) no-repeat; background-size: cover;}
.step {
font-size: 21px;
color: #fff;
text-align: center;
font-weight: 600;
padding: 25px 21px;
}
.step-content{height: 345px; overflow: auto; padding-top:50px;}
.step-name{font-size: 16px; font-weight: 600; text-align: center; color: #fff; margin-bottom: 10px;}
.step-text{font-size: 13px; text-align: justify; padding:0px 60px 0px 60px; color: #fff;}
.about-three{position: relative; padding: 0 40px; z-index: 9}
.about-three:before{content: ''; position: absolute; height: 100%; width: 100%; left: 0; background: url(../images/about-3-shape-1.png) no-repeat; background-size: cover; top: 0; bottom: 0; margin: auto; z-index: -1;}
.about-three__image__one-left {
position: absolute;
left: 38px;
top: -18px;
width: 126px;
height: 157px;
background-color:#75C137;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
mask-repeat: repeat;
mask-position-x: 0%;
mask-position-y: 0%;
mask-size: auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
animation: zoomBig2 3s linear infinite;
}
.about-three__image__one-right {
position: absolute;
right: 38px;
top: 5px;
background-color:#001B42;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
mask-repeat: repeat;
mask-position-x: 0%;
mask-position-y: 0%;
mask-size: auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
width: 161px;
height: 129px;
animation: zoomBig2 4s linear infinite;
mix-blend-mode: multiply;
}
.about-three__image__one-bottom {
position: absolute;
right: 50px;
bottom: 8px;
width: 147px;
height: 116px;
background-color: #001B42;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
mask-repeat: repeat;
mask-position-x: 0%;
mask-position-y: 0%;
mask-size: auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
animation: zoomBig2 3s linear infinite;
}
.build-blog {
background:#003e97;
display: flex;
position: relative;
z-index: 9;
}
.video-in{position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 0.2; z-index: -1;}
.video-in video{height: 100%; width: 100%; object-fit: cover; position: absolute;}
.build-blog-lf {
width: 50%;
padding: 60px;
}
.banner1-text{width: 450px; top: 17%; left: 17%; display: inline-block; position: absolute; transform: rotate(-15deg); animation: bannerText 4s linear infinite;}
.banner1-text img{animation: bannerTextimg 4s linear infinite;}
@keyframes bannerTextimg{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
.build-blog-rt {
width: 37%;
position: relative;
z-index: 1;
padding: 0 30px;
}
.build-blog-rt-img2 {
position: absolute;
height: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.build-blog-rt-img1 {
position: relative;
z-index: 1;
width: 80%;
}
.program-three__top-shape {
z-index: 2;
position: absolute;
top: -21px;
left: 0;
width: 100%;
height: 23px;
background-color:#003178;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
mask-repeat: repeat;
mask-position-x: 0%;
mask-position-y: 0%;
mask-size: auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.program-three__bottom-shape {
z-index: 2;
position: absolute;
bottom: -23px;
left: 0;
width: 100%;
height: 23px;
background-color:#003178;
-webkit-mask: url('data:image/svg+xml;utf8,');
mask: url('data:image/svg+xml;utf8,');
mask-repeat: repeat;
mask-position-x: 0%;
mask-position-y: 0%;
mask-size: auto;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: cover;
mask-size: cover;
}
.counter{background:#0b53bf; padding: 20px; border-radius: 20px;}
ul.counter{margin:0; padding:0; display: flex;}
ul.counter li{display: block; position: relative; width: 33.33%; padding:15px;}
.count{font-size: 37px; font-weight: 700; color: #fff; display: block; text-align: center; padding: 10px 0 0 0;}
ul.counter li p{font-size: 16px; text-align: center; color: #fff;}
.dd-box-main{overflow: hidden; padding: 100px 0;}
.dd-box{padding: 20px 25px; background:#cfee5d; transform: rotate(-5deg); width: 105%; left: -18px; position: relative;}
.str_wrap a{font-size: 24px; color: #000; display: inline-block; padding:10px 20px;}
.str_wrap a:hover{text-decoration: none; color: #000;}
.ka-h span{
animation: grow-and-shrink 2000ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
display: block;
}
@keyframes grow-and-shrink {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
.main-top-box{overflow: hidden;}
.blink-box{position: absolute; left: 35px; top: 20px; width: 250px; transform: rotate(-10deg);}
.circle-box-nw{position: absolute; right: -300px; top: 40px; animation: circleRotation 8s linear infinite; opacity: .2}
@keyframes circleRotation{
100% {
transform: rotate(360deg);
}
}
.kite-shape{position: absolute; top: 30px; right: 30px; width:100px; display: inline-block; transform: rotate(11deg); animation:kiteRotation 4s linear infinite;}
@keyframes kiteRotation{
0% {
top: 10px;
right: 30px;
}
50% {
top: 40px;
right: 50px;
}
75% {
top: 20px;
right: 40px;
}
100% {
top: 10px;
right: 30px;
}
}
.circle-left{height:260px; width:260px; opacity: 0.1; border-radius: 50%; left: -130px; background: #ffbf00; position: absolute; top: 40px; animation:circleColorChange 4s linear infinite;}
@keyframes circleColorChange{
0% {
top: 40px;
background: #ffbf00;
}
25% {
top: 250px;
background: #16b97c;
}
50% {
top: 50px;
background: #8e16b9;
}
75% {
top: 250px;
background: #b91635;
}
100% {
top: 40px;
background: #ffbf00;
}
}
.bulb-img{width: 200px; position: absolute; top: -10px; right: 30px; transform: rotate(0deg); display: inline-block; animation:bulbRotate 4s linear infinite;}
@keyframes bulbRotate{
0% {
transform: rotate(-15deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(15deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(-15deg);
}
}
.rocket-img{width: 120px; left: 50px; bottom: 30px; display: inline-block; position: absolute; transform: rotate(35deg); animation:rocketImg 4s linear infinite;}
@keyframes rocketImg{
0% {
bottom: 30px;
}
25% {
bottom: 80px;
}
50% {
bottom: 120px;
}
75% {
bottom: 80px;
}
100% {
bottom: 30px;
}
}
.client-wa{background:#893ebd; position: relative; color: #fff; border-top-left-radius: 999px; border-bottom-right-radius: 999px; padding: 15px 25px; text-align: center; font-size: 19px; margin-bottom: 25px; animation:clientShacking 3s linear infinite;}
@keyframes clientShacking{
0% {
left: -60px;
}
20% {
left: 60px;
}
40% {
left: 0;
}
60% {
left: 0;
}
80% {
left: 60px;
}
100% {
left: -60px;
}
}
.top-web{font-size:31px; font-weight: 800; color:#1b25c1; line-height: 45px; margin-bottom: 20px; text-align: center;}
.services-home{padding-top: 20px;}
.services-home ul{display: flex; margin:0; padding: 0; flex-wrap: wrap;}
.services-home ul li{display: block; width: 25%; transition: .3s ease;}
.services-home ul li:hover{transform: scale(1.1); transition: .3s ease; z-index: 99; box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 10px;}
.services-image{position: relative;}
.services-caption{position: absolute; bottom: 0; left: 0; width: 100%; padding: 80px 20px 20px 20px; }
.services-home ul li:nth-child(1) .services-caption{background: linear-gradient(to top, #921fc6, transparent);}
.services-home ul li:nth-child(2) .services-caption{background: linear-gradient(to top, #dd4b4b, transparent);}
.services-home ul li:nth-child(3) .services-caption{background: linear-gradient(to top, #1fc680, transparent);}
.services-home ul li:nth-child(4) .services-caption{background: linear-gradient(to top, #c6b452, transparent);}
.services-home ul li:nth-child(5) .services-caption{background: linear-gradient(to top, #1fb6c6, transparent);}
.services-home ul li:nth-child(6) .services-caption{background: linear-gradient(to top, #000, transparent);}
.services-home ul li:nth-child(7) .services-caption{background: linear-gradient(to top, #888000, transparent);}
.services-home ul li:nth-child(8) .services-caption{background: linear-gradient(to top, #ba4bbd, transparent);}
.service-name-inner{padding:9px 22px; background: #fff; font-size: 17px; display: inline-block; font-weight: 600; color: #000; box-shadow: rgba(0, 0, 0, 1.0) 3px 3px 1px;}
.section-home-contact{display: flex;}
.section-home-contact-lf{padding: 80px; background: #311b5f; width: 60%}
.section-home-contact-rt{padding: 80px 20px; background: #e91e63; width: 40%}
.home-login-part{border-radius: 30px; padding: 30px; position: relative; left: -150px; background: #fff;}
.home-login-inputs-inner{display: flex; margin:0 -15px;}
.home-login-inputs-inner-lf{width: 50%; padding:0 15px;}
.home-login-inputs-inner-rt{width: 50%; padding:0 15px;}
.home-login-inputs{margin-bottom: 20px;}
.home-login-inputs label{font-size: 14px; font-weight: 600; display: block; margin-bottom: 8px;}
.home-inp{border: #000 solid 1px; padding: 15px; width: 100%; border-radius: 10px;}
.home-login-hd {
font-size: 24px;
font-weight: 600;
color: #000;
margin-bottom: 15px;
}
.submit-home-inp{font-size:17px; font-weight: 600; color: #fff; padding: 13px 30px; margin-top: 15px; border-radius: 999px; border-bottom-right-radius: 0; display: inline-block; border: 0; background: #000;}
.section-home-contact-lfinner{padding-right: 170px;}
.footer-content-ll{padding: 30px; border-radius: 30px; background: rgba(0, 0, 0, 0.2); margin-top: 20px;}
.footer-content-d{display: flex; padding: 10px 0;}
.footer-content-d-txt{font-size: 17px; line-height: 30px; padding: 0 10px; color: #fff;}
.footer-content-d-txt a{color: #fff}
.footer-content-d-icon{width: 25px;}
footer{padding: 60px 0; background: url(../images/footer_bg.png) no-repeat; background-size: cover;}
.footer-menu ul{margin:0; padding: 0;}
.footer-menu ul li{display: block; padding:0; position: relative;}
.footer-menu ul li a{display: block; padding: 10px 0; font-size: 15px; color: #fff;}
.copyright {
padding: 15px;
border-radius: 15px;
background: rgba(0, 0, 0, 0.2);
font-size: 13px;
color: #fff;
margin-top: 25px;
}
.footer-down-links {
display: flex;
align-items: center;
}
.footer-down-links ul {
margin:0 -7px;
padding:0;
}
.footer-down-links ul li {
display: inline-block;
position: relative;
}
.footer-down-links ul li a {
font-size: 12px;
color: #fff;
padding: 7px 7px;
display: inline-block;
}
.footer-down-links p {
display: flex;
flex:1;
justify-content: flex-end;
}
.faq-b{background: #fff6db; position: relative; overflow: hidden;}
.faq-ro{position: absolute; bottom: -100px; right: 0;}
.faq-home-shape1{
position: absolute;
top: 70%;
left: 20%;
height: 100px;
width: 100px;
border-radius: 50%;
display: inline-block;
background: #ffdf80;
animation:faqCircle 15s linear infinite;
}
@keyframes faqCircle{
0% {
left: 20%;
top: 70%;
}
50% {
left: 40%;
top: 90%;
}
75% {
left: 30%;
top: 50%;
}
100% {
left: 20%;
top: 70%;
}
}
.faq-home-shape3{
position: absolute;
right: 7%;
top: 12%;
height: 80px;
width: 80px;
animation:faqHomeline 8s linear infinite;
}
@keyframes faqHomeline{
0% {
top: 23%;
right: 5%;
}
50% {
top: 14%;
right: 8%;
}
75% {
top: 19%;
right: 5%;
}
100% {
top: 23%;
right: 5%;
}
}
@keyframes faqHometri{
0% {
top: 23%;
left: 5%;
}
50% {
top: 14%;
left: 8%;
}
75% {
top: 19%;
left: 5%;
}
100% {
top: 23%;
left: 5%;
}
}
.faq-home-shape2{
position: absolute;
left: 5%;
top: 23%;
height: 30px;
width: 30px;
animation:faqHometri 8s linear infinite;
}
.frequently-ask{padding-top: 30px;}
.frequently-ask ul{margin: 0; padding: 0;}
.frequently-ask ul li{display: block; position: relative; margin-bottom: 15px;}
.frequently-ask-inner{padding:25px; border:#ebddb2 solid 1px; border-radius: 15px; background: #fff}
.frequently-ask-inner h3{font-size: 20px; line-height: 32px; font-weight: 600; color: #000; margin: 0; position: relative; cursor: pointer; padding-right: 50px;}
.frequently-ask-inner-cap{display: none; font-size: 17px; line-height: 27px; margin-top: 15px;}
.frequently-ask ul li.active .faq-open-icon{transform: rotate(45deg); transition: .3s ease;}
.faq-open-icon{height: 40px; width: 40px; background: #eee; border-radius: 50%; display: inline-block; position: absolute; right: 0; top: -8px; transition: .3s ease;}
.faq-open-icon:before{content: ''; position: absolute; height: 3px; width: 20px; background: #000; top: 18px; left: 10px;}
.faq-open-icon:after{content: ''; position: absolute; height: 20px; width: 3px; background: #000; top: 10px; left: 18px;}
.frequently-ask ul li.active .frequently-ask-inner-cap{display: block;}