/* Import Fonts */
@font-face {  font-family: 'mszyj';  src: url('../fonts/mszyj.eot');  src: url('../fonts/mszyj.eot?#iefix') format('embedded-opentype'), url('../fonts/mszyj.woff2') format('woff2'), url('../fonts/mszyj.woff') format('woff'), url('../fonts/mszyj.ttf') format('truetype');  font-weight: normal;  font-style: normal;  font-display: swap;  }
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;1,300&display=swap');

/* Language */
:lang(en) body { font-weight: normal; font-size: initial;}
:lang(en) h5, :lang(en) h4, :lang(en) h3, :lang(en) h2, :lang(en) h1 { font-weight: normal;font-family: 'Poppins', sans-serif;}
:lang(en) .bigtitle { font-weight: 700; line-height: 1.1;}
:lang(en) .form-control-lg, :lang(en) .btn-lg { font-size: 16px;}
:lang(en) .fa-2x {font-size: 2.5em;}
:lang(en) .counter { width: 70%}
:lang(en) .timeline li { font-size: 25px;}
:lang(en) .timeline .item {padding-left: 80px}
:lang(en) .timeline .item:before { margin: 3px 0}
:lang(en) .timeline .item:after {height: 60px;top: 45px;}
@media (max-width: 767px) {
    :lang(en) .timeline .item { padding-left: 20px}
    :lang(en) .timeline .item:after { height: 40px; top: 33px;}
}


/* General */
body, html {-webkit-font-smoothing: antialiased; height: 100% !important;}
body{ font-family: sans-serif; color: #666767; font-size: 20px; font-weight: 600;}
a { cursor: pointer; transition: all .2s; color: #111;}

.section100 {padding: 100px 0; position: relative; background-size: cover;background-position: center bottom;}
.section50 {padding: 50px 0; position: relative;}
::placeholder {color: #999;}
.logo { width: 200px;}
@media (max-width: 767px) {
    .section100 {padding: 70px 0}
    .section100.tqpage {padding: 35px 0}
    .logo { width: 120px;}
}

/*-- Colors --*/
:root {
    --darkblue:#222560;
    --liteblue:#425ba9;
    --gradientblue:linear-gradient(to bottom,  #fff 25%,#425ba9 100%);
}
.text-yellow {color: yellow;}
.text-dblue {color: var(--darkblue);}
.text-lblue {color: var(--liteblue);}
.text-black {color: #000000;}
.bg-dblue {background-color: var(--darkblue); color: #fff;}
.bg-lblue {background-color: var(--liteblue);}
.bg-yellow {background-color: yellow;}
.bg-lgrey{ background-color: #efeff0;}
.btn.bg-lblue {color: #fff; padding: 15px 60px;}
.btn.bg-yellow {padding: 15px 60px;}
.bg-gradientblue {background: var(--gradientblue);}

/* Font Size */
:lang(zh) .bigtitle {font-family: 'mszyj', "Heiti SC",Arial;}
h1.bigtitle {font-size: 3.2em;}
h2.bigtitle { font-size: 2.5em;}
.ppfont {font-family: 'Poppins', sans-serif;font-weight: 600;}
@media (max-width: 767px) {
    h1.bigtitle {font-size: 1.9em;}
    h2.bigtitle {font-size: 1.75em;}
    #home h4 {font-size: 18px}
    h4 { font-size: 20px}
}

/* Image & elements */
.img-fit {object-fit: cover;width: 500px; height: 500px;}
.shapebox {clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);}
.ele-1 {position: absolute;top: 0; left: 0; width: 400px;}
.ele-2 {position: absolute;bottom: 0; left: 0; width: 400px;transform: scaleY(-1);}
.ele-3 {position: absolute;top: 0; right: 0; width: 400px;transform: scaleX(-1);}
.animate-section{opacity:0;visibility:hidden}
@media (max-width: 767px) {
    .shapebox {clip-path: unset; height: 100px;margin-bottom: 1em;}
    .shapebox img.img-fit {max-width: 100%; width: 100%; height: 100%}
    .ele-1,.ele-2,.ele-3{width: 50%;}
}

/* Header */
header { padding: 50px 0px 100px; background-size: cover;background-position: center bottom;}
.form-wrapper {border-radius: 20px; padding: 50px; background: var(--darkblue)}
@media (max-width: 767px) {
    .form-wrapper{padding: 30px;}
    button[type="submit"] {width: 100%}
}

/* Services */
.servicesBox { background-size: cover; background-repeat: no-repeat; background-position: center;height: 100%; padding: 2em; border-radius: 20px; position: relative; height: 350px}
.servicesBox .title, .servicesBox .entitle {font-size: 2.2em;color: #fff;font-weight: 700;font-family: poppins;line-height: 1;}
.servicesBox .img-clip {position: absolute; bottom: 20px; right: 20px;height: 150px}
@media (max-width: 767px) {
    .servicesBox {padding: 1em; height: 120px;}
    .servicesBox .title {font-size: 1.3em;}
    .servicesBox .entitle {font-size: 1.1em;}
    .servicesBox .img-clip { height: 60px; bottom: 30px;}
}

/* Dream */
.dream { background: var(--darkblue); position: relative; padding-bottom: 80px;}
.dream div[class*='col'] {text-align: center;color: #fff;}
.dream .dream-icon { max-width: 120px;}
@media (max-width: 767px) {
    .dream div[class*='col'] h5 { font-size: 14px;}
    .dream .dream-icon { max-width: 50px;}
    .dream h4 {padding: 0 35px;}
}


/* Timeline with Counter */
.timeline li{position:relative;font-size: 40px;margin-bottom: 80px;}
.timeline .item{padding-left:140px;color: #000;}
.timeline .item:before{content:"";width: 30px;height: 30px;border-radius:50%;background: #fff; border:1px solid var(--darkblue);position:absolute;left: -15px;margin: 15px 0;animation: ifadeout 2.5s forwards;}
.timeline li.active .item:before{animation: ifadein 1s forwards;}
.timeline .item:after{content:"";width: 1px;height: 80px;background: var(--darkblue);display:block;left:0;position:absolute;}
.timeline li:last-child > .item:after{ display: none;}
.counter{counter-reset:my-sec-counter;list-style:none;padding-left: 170px;margin:auto;max-width:800px;width:65%;}
.counter li:before{counter-increment:my-sec-counter;content:"Step " counter(my-sec-counter);position:absolute;left: -170px;font-weight: 700;font-family: 'poppins';animation: tfadeout 2.5s; animation-fill-mode: forwards;}
.counter li.active:before {animation: tfadein 1s; animation-fill-mode: forwards;}
@keyframes ifadein {
    from {background: #fff;}
    to {background: var(--darkblue);}
}
@keyframes ifadeout {
    from {background: var(--darkblue);}
    to {background: #fff;}
}
@keyframes tfadein {
    from {color: #caccea;}
    to {color:#222560;}
}
@keyframes tfadeout {
    from {color: #222560;}
    to {color: #caccea;}
}
@media (max-width: 767px) {
    .counter {width: calc(100% - 4em);padding-left: 60px;}
    .counter li:before {left:-70px;font-size: 16px;}
    .timeline li {font-size: 1em;margin-bottom: 40px;}
    .timeline .item {padding-left: 20px;font-size: 16px;}
    .timeline .item:before {width: 15px;height: 15px;margin:5px 0;left:-7px;}
    .timeline .item:after {height: 40px;}
    .timeline li:last-child {margin-bottom: 0}
}


/* Bank Update */
#bankupdate .carousel-control-prev, #bankupdate .carousel-control-next { top:50%; background: var(--liteblue); padding: 20px; border-radius: 50%; width: 20px; height: 20px;}
#bankupdate .carousel-control-prev { left: -50px}
#bankupdate .carousel-control-next { right: -50px;}
@media(max-width: 767px){
    #bankupdate .carousel-control-prev, #bankupdate .carousel-control-next {top: unset; bottom: -70px;}
    #bankupdate .carousel-control-prev { left: 100px}
    #bankupdate .carousel-control-next { right: 100px;}
}


/* Case Study */
#casestudy .carousel-control-prev, #casestudy .carousel-control-next { bottom:-50px; top: unset; width: auto;}
#casestudy .carousel-control-prev:hover, #casestudy .carousel-control-prev:focus, #casestudy .carousel-control-next:hover, #casestudy .carousel-control-next:focus { color: var(--darkblue)}
#casestudy .carousel-control-next { left: 50px; right: unset;}

/* Testimonial */
.clients .item-wrap { padding-top: 3em;}
.clients .item-wrap .item {background: #fff;padding: 0 10em;text-align: center;border-radius: 20px;position: relative;background-image: url('../images/open-bracket.jpg');background-repeat: no-repeat;background-position: center;background-size: 150px;height: 350px;display: flex;justify-content: center;align-items: center;}
.clients .item-wrap .avatar {position: absolute;top: -35px;left: 50%;transform: translateX(-50%);width: 70px;height: 70px;padding: 5px;background: #fff;border-radius: 50%;border: 1px solid #ddd;}
@media(max-width: 767px) {
    .clients .item-wrap .item {padding: 0 1em;}
}

/* Slick Style */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:before,.slick-track:after{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
[dir='rtl'] .slick-slide{float:right}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block; transform: scale(0.8);transition: .2s;}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.slick-initialized .slick-slide.slick-current {transform: scale(1.0); transition: .2s;}

/* Slick theme */
.slick-loading .slick-list{background:#fff url('../images//ajax-loader.gif') center center no-repeat}
.slick-prev,.slick-next{font-size:0;line-height:0;position:absolute;top:58%;display:block;width:20px;height:20px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:var(--darkblue);border:0;outline:0;background:transparent}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{outline:0;background:transparent}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:1}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:.25}
.slick-prev:before,.slick-next:before{font-family:'Font Awesome 5 Free';font-weight:900;font-size:20px;line-height:1;opacity:.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-prev{left:23%; z-index: 10}
[dir='rtl'] .slick-prev{right:-25px;left:auto}
.slick-prev:before{content:'\f060'}
[dir='rtl'] .slick-prev:before{content:'→'}
.slick-next{right:23%}
[dir='rtl'] .slick-next{right:auto;left:-25px}
.slick-next:before{content:'\f061'}
[dir='rtl'] .slick-next:before{content:'←'}
/*.slick-dotted.slick-slider{margin-bottom:30px}*/
.slick-dots{position:absolute;bottom:25px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:transparent}
.slick-dots li button:hover,.slick-dots li button:focus{outline:0}
.slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}
.slick-dots li button:before{font-family:'Font Awesome 5 Free';font-weight:900;font-size:16px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'\f111';text-align:center;opacity:.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-dots li.slick-active button:before{opacity:.75;color:black}
@media(max-width: 767px) {
    .slick-prev {left:5%;}
    .slick-next {right:5%}
}


/*-- plus-minus icon --*/
.plus-minus-toggle {cursor: pointer;height: 21px;position: relative;width: 100%; display: block}
.plus-minus-toggle:after {content: "\f139";font-family: "Font Awesome 5 Free";font-weight: 900;right: 0;position: absolute;top: -3px;transition: transform 300ms ease;color: var(--liteblue);transform: rotate(0deg);}
.plus-minus-toggle.collapsed:after {transform: rotate(180deg);}

/* Faq */
#faq .card, #faq .card-header {border: 0; background: transparent;}
#faq.counter {padding: 0;max-width: unset;width: auto;}
#faq.counter .card-header h5:before {counter-increment:my-sec-counter;content:counter(my-sec-counter) "."; position: absolute; left: 0;}
#faq.counter .card-header h5 {padding-left: 25px;margin-right: 20px !important;}
#faq .card-body { padding: 0.5rem 1.25rem 1.25rem 2.35rem;}
#faq .plain-ul { padding-left: 20px;}
#faq .plain-ul li:before { content: unset;}
@media(max-width: 767px) {
    .plus-minus-toggle:after {right: -10px;}
    #faq.counter .card-header {padding: 0.75rem 2.25rem 0.75rem 0.75rem;}
}

/* Contact Us */
#contactus.section100 {padding: 150px 0;}
footer .icon-blox {border: 1px solid var(--darkblue);border-radius: 50%;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;margin-right: 10px; color: var(--darkblue)}
.copyright {background: var(--darkblue);color: rgba(255,255,255,.7);text-align: center;font-size: 15px;font-weight: 300;}
.thankyou .copyright { background: transparent; position: absolute; bottom: 0;}
@media(max-width: 767px) {
    #contactus.section100 {padding: 70px 0;}
    #contactus h1.bigtitle {font-size: 1.9em;}
    #contactus h2 {font-size: 22px;padding: 0 50px;}
    #contactus h1 {font-size: 25px;}
    #contactus h3 {font-size: 18px;}
    .copyright {font-size: 12px;padding: 0px 20px;}
}

.whatsappfloat {display: none !important;}
.whatsappfloat{position:fixed;z-index:999;width: 60px;height: 60px;background:#1ebea5;bottom:5%;right:3%;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,0.3);padding: 9px;color: #f5f5f5;font-weight: normal;text-align: center;}
.whatsappfloat:hover{ color: #fff;}
@media(max-width: 767px) {
    .whatsappfloat{ right: 5%; bottom: 3%}
}