@font-face {
     font-family: 'Int Circular PTT';
     src: url('../font/IntCircularPTT-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
}
 @font-face {
     font-family: 'Int Circular PTT';
     src: url('../font/IntCircularPTT-Thin.woff') format('woff');
     font-weight: 100;
     font-style: normal;
}
 @font-face {
     font-family: 'Int Circular PTT';
     src: url('../font/IntCircularPTT-Bold.woff') format('woff');
     font-weight: 800;
     font-style: normal;
}
 @font-face {
     font-family: 'Int Circular PTT';
     src: url('../font/IntCircularPTT-Medium.woff') format('woff');
     font-weight: 600;
     font-style: normal;
}
 @font-face {
     font-family: 'Int Circular PTT Book';
     src: url('../font/IntCircularPTT-Book.woff') format('woff');
     font-weight: 500;
     font-style: normal;
}
 @font-face {
     font-family: 'Int Circular PTT';
     src: url('../font/IntCircularPTT-Black.woff') format('woff');
     font-weight: 900;
     font-style: normal;
}
 @font-face {
     font-family: 'Goku';
     src: url('../font/Goku-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'Goku Stencil';
     src: url('../font/GokuStencil-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
/* 1. Basic css */
 body {
     font-family: 'Int Circular PTT';
     overflow-x: hidden;
}
 a, button, textarea, input {
     text-decoration: none !important;
     outline: none !important;
}
 .loader {
     position: fixed;
     width: 100%;
     height: 100%;
     background-color: #fff;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 999999;
}
 .loader.loaded {
     z-index: 1;
}
 .animated {
     opacity: 0;
}
 .visible {
     opacity: 1;
}
/* Navigation Css */
 .loading .navbar {
     top: -100%;
     opacity: 0;
}
 .navbar {
     background-color: transparent;
     border: none;
     padding-top: 15px;
     -webkit-transition: 0.6s all ease ;
     -moz-transition: 0.6s all ease ;
     -ms-transition: 0.6s all ease ;
     -o-transition: 0.6s all ease ;
     transition: 0.6s all ease ;
}
 .navbar *{
     -webkit-transition: 0.6s all ease ;
     -moz-transition: 0.6s all ease ;
     -ms-transition: 0.6s all ease ;
     -o-transition: 0.6s all ease ;
     transition: 0.6s all ease ;
}
 .nav-white {
     background-color: #fff;
     padding: 0;
     -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
     -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
     box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
}
 .navbar-brand {
     height: auto;
}
 .navbar-default .navbar-nav>li>a {
     color: #2a2a2a;
     font-weight: 600;
     -webkit-transition: 0.6s all ease;
     -moz-transition: 0.6s all ease ;
     -ms-transition: 0.6s all ease ;
     -o-transition: 0.6s all ease ;
     transition: 0.6s all ease ;
}
 .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
     color: #5c9d30;
     -webkit-transition: 0.6s all ease;
     -moz-transition: 0.6s all ease ;
     -ms-transition: 0.6s all ease ;
     -o-transition: 0.6s all ease ;
     transition: 0.6s all ease ;
}
 .navbar-nav>li {
     margin: 0 10px;
}
 .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
     color: #5c9d30;
     background-color:transparent !important;
}
 .nav-lines {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     width: 25px;
     height: 12px;
     flex-direction: column;
}
 .nav-lines span {
     height: 2px;
     width: 100%;
     background-color: #2a2a2a;
     border-radius: 50px;
     -webkit-transition: 0.6s all ease;
     -moz-transition: 0.6s all ease ;
     -ms-transition: 0.6s all ease ;
     -o-transition: 0.6s all ease ;
     transition: 0.6s all ease ;
}
 .nav-lines span:nth-of-type(1) {
     width: 80%;
}
 .nav-lines span:nth-of-type(3) {
     width: 60%;
}
 .navbar-default .navbar-nav>li>a:hover .nav-lines span{
     width: 100%;
     -webkit-transition: 0.6s all ease;
     -moz-transition: 0.6s all ease ;
     -ms-transition: 0.6s all ease ;
     -o-transition: 0.6s all ease ;
     transition: 0.6s all ease ;
}
/* Home Page Css */
 .background-round {
     position: absolute;
     width: 100%;
     height: 100vh;
     top: 0;
     left: 0;
     -webkit-transition: 0.6s all ease;
     -moz-transition: 0.6s all ease ;
     -ms-transition: 0.6s all ease ;
     -o-transition: 0.6s all ease ;
     transition: 0.3s all ease ;
}
 .svg-box {
     width: 80vh;
     height: 80vh;
     position: absolute;
     top: 50%;
     transform: translate(30%,-50%);
     right: 0;
     overflow: visible;
}
 .svg-box > svg {
     position: relative;
     z-index: 22;
     -webkit-transform: scale(1.1,1.1);
     -ms-transform: scale(1.1,1.1);
     transform: scale(1.1,1.1);
}
 .svg-box.loaded > svg {
     transform: scaleX(1) scaleY(1) scaleZ(1);
     transform-style: preserve-3d;
     transition: transform 3000ms ease-in-out;
}
 .svg-inner {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     overflow: hidden;
}
 .svg-inner svg {
     width: 100%;
}
 .svg-inner > div:not(.round-image-bg) {
     opacity: 0;
     -webkit-transform: scale(0.01,0.01);
     -ms-transform: scale(0.01,0.01);
     transform: scale(0.01,0.01);
     -webkit-transform-origin: 50% 50%;
     -ms-transform-origin: 50% 50%;
     transform-origin: 50% 50%;
}
 .svg-box.loaded .svg-inner > div:not(.round-image-bg) {
     opacity: 1;
     -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
     -moz-transform: scaleX(1) scaleY(1) scaleZ(1);
     -ms-transform: scaleX(1) scaleY(1) scaleZ(1);
     -o-transform: scaleX(1) scaleY(1) scaleZ(1);
     transform: scaleX(1) scaleY(1) scaleZ(1);
     -webkit-transition: opacity 200ms, transform 2000ms ease-in-out;
     -moz-transition: opacity 200ms, transform 2000ms ease-in-out ;
     -ms-transition: opacity 200ms, transform 2000ms ease-in-out ;
     -o-transition: opacity 200ms, transform 2000ms ease-in-out ;
     transition: opacity 200ms, transform 2000ms ease-in-out ;
}
 .svg-inner-1 {
     width: 45%;
     right: 0;
     position: absolute;
     z-index: 2;
}
 .svg-inner-2 {
     width: 32%;
     right: 16%;
     position: absolute;
     z-index: 3;
}
 .svg-inner-3 {
     width: 66%;
     right: 31%;
     position: absolute;
     z-index: 4;
     top: 10%;
}
 .svg-inner-4 {
     width: 61%;
     right: 32%;
     position: absolute;
     z-index: 5;
     top: -12%;
}
 .svg-inner-5 {
     width: 78%;
     left: 0;
     position: absolute;
     z-index: 9;
     bottom: 0;
}
 .svg-inner-6 {
     width: 60%;
     left: 24%;
     position: absolute;
     z-index: 7;
     bottom: -14%;
}
 .svg-inner-7 {
     width: 84%;
     right: 0;
     position: absolute;
     z-index: 8;
     bottom: 0;
}
 .svg-inner-8 {
     width: 67%;
     right: -5%;
     position: absolute;
     z-index: 9;
     top: 0;
}
 .svg-inner-9 {
     width: 64%;
     left: 10%;
     position: absolute;
     z-index: 10;
     bottom: -52%;
}
 .svg-inner-10 {
     width: 51%;
     left: -28%;
     position: absolute;
     z-index: 11;
     top: 18%;
}
 .svg-inner-11 {
     width: 45%;
     left: -15%;
     position: absolute;
     z-index: 12;
     bottom: -24%;
}
 .round-image-bg {
     background-image: url(../images/bg.jpg);
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 13;
     opacity: 0;
     -webkit-transform: scale(1.2,1.2);
     -ms-transform: scale(1.2,1.2);
     transform: scale(1.2,1.2);
     background-position: 19% -292%;
     background-size: 148%;
     mix-blend-mode: soft-light;
}
 .svg-box.loaded .round-image-bg {
     opacity: 1;
     transform: scaleX(1) scaleY(1) scaleZ(1);
     transform-style: preserve-3d;
     transition: 1200ms all ease-in-out 1000ms;
}
 .hero-main-container {
     height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
}
 .color-text-inner {
     z-index: 1;
     position: absolute;
     width: 100%;
     height: 100%;
}
 .color-text-container {
     display: flex;
     justify-content: flex-start;
}
 .color-text-inner-container {
     position: relative;
     overflow: hidden;
}
 .design-svg{
     width: 515px;
     height: 162px;
     position: relative;
     z-index: 2;
     left: -10px;
     top: -1px;
}
 .design-container {
     width: 503px;
     height: 156px;
}
 .design-container1 {
         width: 577px;
    height: 158px;
}
 .design-svg1 {
     width: 675px;
    height: 161px;
     top: -3px;
     left: -98px;
     position: relative;
     z-index: 2;
}
 .design-container2 {
     width: 406px;
     height: 158px;
}
 .design-svg2{
     width: 610px;
     height: 200px;
     position: relative;
     z-index: 2;
     left: -7px;
     top: -8px;
}
 .color-text-inner .svg-inner-1 {
     width: 27%;
     right: -4%;
     position: absolute;
     z-index: 2;
     top: -11%;
}
 .color-text-inner .svg-inner-2 {
     width: 33%;
     right: 7%;
     position: absolute;
     z-index: 3;
     top: -7%;
}
 .color-text-inner .svg-inner-11 {
     width: 34%;
     left: -15%;
     position: absolute;
     z-index: 12;
     bottom: -24%;
}
 .color-text-inner .svg-inner-9 {
     width: 30%;
     left: 62%;
     position: absolute;
     z-index: 10;
     bottom: -32%;
}
 .color-text-inner .svg-inner-10 {
     width: 33%;
     left: 12%;
     position: absolute;
     z-index: 11;
     top: 34%;
}
 .color-text-inner .svg-inner-8 {
     width: 34%;
     right: 42%;
     position: absolute;
     z-index: 9;
     top: -64%;
}
 .color-text-inner .svg-inner-7 {
     width: 25%;
     right: -3%;
     position: absolute;
     z-index: 8;
     bottom: -11%;
}
 .color-text-inner .svg-inner-5 {
     width: 38%;
     left: 0;
     position: absolute;
     z-index: 9;
     bottom: 0;
}
 .color-text-inner .svg-inner-3 {
     width: 39%;
     right: 31%;
     position: absolute;
     z-index: 4;
     top: 10%;
}
 .color-text-inner .svg-inner-4 {
     width: 25%;
     right: 24%;
     position: absolute;
     z-index: 5;
     top: -12%;
}
 .color-text-inner .svg-inner-6 {
     width: 23%;
     left: 48%;
     position: absolute;
     z-index: 7;
     bottom: -14%;
}
 .color-text-inner svg {
     width: 100%;
}
 .color-text-inner > div {
     opacity: 0;
     -webkit-transform: scale(0.01,0.01);
     -ms-transform: scale(0.01,0.01);
     transform: scale(0.01,0.01);
     -webkit-transform-origin: 50% 50%;
     -ms-transform-origin: 50% 50%;
     transform-origin: 50% 50%;
     -webkit-transition: all 2000ms ease-in-out ;
     -moz-transition: all 2000ms ease-in-out ;
     -ms-transition: all 2000ms ease-in-out ;
     -o-transition: all 2000ms ease-in-out ;
     transition: all 2000ms ease-in-out ;
}
 .color-text-inner.loaded > div {
     opacity: 1;
     -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
     -moz-transform: scaleX(1) scaleY(1) scaleZ(1);
     -ms-transform: scaleX(1) scaleY(1) scaleZ(1);
     -o-transform: scaleX(1) scaleY(1) scaleZ(1);
     transform: scaleX(1) scaleY(1) scaleZ(1);
     -webkit-transition: opacity 200ms, transform 2000ms ease-in-out;
     -moz-transition: opacity 200ms, transform 2000ms ease-in-out ;
     -ms-transition: opacity 200ms, transform 2000ms ease-in-out ;
     -o-transition: opacity 200ms, transform 2000ms ease-in-out ;
     transition: opacity 200ms, transform 2000ms ease-in-out ;
}
 .hero-data {
     font-size: 44px;
     margin-top: 20px;
}
 .hero-data span {
     color: #5c9d30;
}
 .hero-list {
     padding: 0;
     margin: 0;
}
 .hero-list li{
     display: none;
     list-style: none;
}
 .hero-list li.active {
     display: block;
     opacity: 0;
     -webkit-transition: 0.6s all ease-out;
     -moz-transition: 0.6s all ease-out ;
     -ms-transition: 0.6s all ease-out ;
     -o-transition: 0.6s all ease-out ;
     transition: 0.6s all ease-out ;
}
 .hero-list li.showed {
     opacity: 1;
     -webkit-transition: 0.6s all ease-out;
     -moz-transition: 0.6s all ease-out ;
     -ms-transition: 0.6s all ease-out ;
     -o-transition: 0.6s all ease-out ;
     transition: 0.6s all ease-out ;
}
 .loading .hero-list-control {
     opacity: 0;
}
 .hero-list-control {
     padding: 0;
     margin: 25px 0 0 0;
     display: flex;
     opacity: 1;
     -webkit-transition: 0.6s all ease-out;
     -moz-transition: 0.6s all ease-out ;
     -ms-transition: 0.6s all ease-out ;
     -o-transition: 0.6s all ease-out ;
     transition: 0.6s all ease-out ;
}
 .hero-list-control li {
     width: 50px;
     list-style: none;
     height: 10px;
     margin-right: 10px;
     cursor: pointer;
     position: relative;
}
 .hero-list-control li:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 3px;
     left: 0;
     top: 50%;
     transform: translate(0,-50%);
     background-color: #ededed;
     -webkit-transition: 0.6s all ease-out;
     -moz-transition: 0.6s all ease-out ;
     -ms-transition: 0.6s all ease-out ;
     -o-transition: 0.6s all ease-out ;
     transition: 0.6s all ease-out ;
}
 .hero-list-control li.active:before {
     background-color: #5c9d30;
     -webkit-transition: 0.6s all ease-out;
     -moz-transition: 0.6s all ease-out ;
     -ms-transition: 0.6s all ease-out ;
     -o-transition: 0.6s all ease-out ;
     transition: 0.6s all ease-out ;
}
 .bottom-button {
     left: 50%;
     position: absolute;
     bottom: 7%;
     transform: translate(-50%,50%);
     background-color: #5c9d30;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     -webkit-transition: 0.6s all ease-out;
     -moz-transition: 0.6s all ease-out ;
     -ms-transition: 0.6s all ease-out ;
     -o-transition: 0.6s all ease-out ;
     transition: 0.6s all ease-out ;
     cursor: pointer;
}
 .bottom-button:hover {
     box-shadow: 0px 11px 13px 0px rgba(0, 0, 0, 0.17);
     -webkit-transition: 0.6s all ease-out;
     -moz-transition: 0.6s all ease-out ;
     -ms-transition: 0.6s all ease-out ;
     -o-transition: 0.6s all ease-out ;
     transition: 0.6s all ease-out ;
}
 .services-svg {
    /*width: 572px;
     height: 108px;
     width: 509px;
     height: 162px;
     position: relative;
     z-index: 2;
     left: 0;
    */
     width: 512px;
     height: 100px;
     position: relative;
     z-index: 2;
     left: -6px;
     top: -1px;
}
 .services-container {
    /*width: 571px;
     height: 108px;
    */
     width: 500px;
     height: 98px;
}
 .service-main-container {
     background-color: #F7F7F7;
     padding: 125px 0;
     position: relative;
}
 .service-main-container .container {
     position: relative;
     z-index: 2;
}
 .service-list {
     margin: 75px -20px 0 -20px;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
}
 .service-list li {
     width: calc(50% - 40px);
     margin: 20px;
     background-color: #fff;
     border-radius: 6px;
     list-style: none;
     padding: 40px 25px;
}
 .services-box h5 {
     margin: 30px 0;
     font-weight: 600;
     font-size: 16px;
     color: #000;
}
 .services-box p {
     color: #8f8f8f;
     margin-bottom: 30px;
}
 .services-box a {
     color: #5ccd7e;
     font-weight: 600;
}
 .services-box .s_arrow img {
     opacity: 0;
     position: relative;
     left: -15px;
     margin-left: 15px;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .services-box a:hover img {
     opacity: 1;
     left: 0px;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .services-heading {
     font-size: 28px;
     font-weight: 600;
     margin-top: 25px;
}
 .services-heading span {
     color: #5c9d30;
}
 .service-bubble1 {
     position: absolute;
     z-index: 1;
     top: 50%;
}
 .service-bubble2 {
     position: absolute;
     right: 17%;
     top: 0;
}
 .service-bubble3 {
     position: absolute;
     bottom: 0;
     right: 0;
}
 .contact-svg {
     width: 521px;
     height: 81px;
     position: relative;
     z-index: 2;
     left: -2px;
     top: -1px;
}
 .contact-container {
    /*width: 570px;
     height: 78px;
    */
     width: 514px;
     height: 76px;
}
 .contact-main-container {
     padding: 125px 0;
}
 .contact-form {
     width: 100%;
     max-width: 800px;
     margin: 75px auto 0 auto;
}
 .contact-address {
     display: flex;
     justify-content: space-between;
     color: #2a2a2a;
}
 .contact-box p {
     line-height: 30px;
     margin: 0;
     font-weight: 600;
}
 .social-list {
     padding: 0;
     margin: 0;
}
 .social-list li {
     list-style: none;
     margin-bottom: 15px;
}
 .social-list a {
     color: #2a2a2a;
     font-weight: 600;
}
 .contact-form-input {
     position: relative;
     padding-top: 15px;
     margin-top: 25px;
}
 .contact input{
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
}
 .contact-form-input input {
     width: 100%;
     position: relative;
     z-index: 2;
     background-color: transparent;
     border: none;
     padding: 10px 0;
     font-size: 16px;
     color: #000;
     font-weight: 600;
}
 .contact-form-input textarea {
     width: 100%;
     position: relative;
     z-index: 2;
     background-color: transparent;
     border: none;
     padding: 10px 0;
     font-size: 16px;
     color: #000;
     font-weight: 600;
     max-width: 100%;
     height: 50px;
}
 .contact-form-input:before {
     content: '';
     position: absolute;
     width: 100%;
     height: 1px;
     bottom: 0;
     background-color: #f1f1f1;
}
 .contact-form-input label {
     position: absolute;
     top: 25px;
     left: 0;
     z-index: 1;
     margin: 0;
     -webkit-transition: 0.4s all ease-out;
     -moz-transition: 0.4s all ease-out ;
     -ms-transition: 0.4s all ease-out ;
     -o-transition: 0.4s all ease-out ;
     transition: 0.4s all ease-out ;
     color: #9d9d9d;
     font-weight: 600;
     font-size: 14px;
}
 .contact-form-input label.active {
     opacity: 0;
}
 .contact-form-input input:focus + label {
     top: 0;
     font-size: 12px;
}
 .contact-form-input textarea:focus + label {
     top: 0;
     font-size: 12px;
}
 .contact-form-input .line {
     content: '';
     position: absolute;
     width: 0;
     height: 1px;
     bottom: 0;
     background-color: #1959d3;
     transform: translate(-50%,0);
     left: 50%;
     -webkit-transition: 0.4s all ease-out;
     -moz-transition: 0.4s all ease-out ;
     -ms-transition: 0.4s all ease-out ;
     -o-transition: 0.4s all ease-out ;
     transition: 0.4s all ease-out ;
}
 .contact-form-input input:focus ~ div.line {
     width: 100%;
}
 .contact-form-input textarea:focus ~ div.line {
     width: 100%;
}
 .contact-input-half {
     width: calc(33.3% - 20px);
}
 .contact {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
}
 .contact-input-full {
     width: 100%;
}
 .contact-button {
     width: 100%;
}
 .contact-button button{
     background-color: #1959d3;
     color: #fff;
     font-weight: 600;
     border: none;
     padding: 10px 45px;
     border-radius: 50px;
     margin: 50px auto 0 auto;
     display: block;
     -webkit-transition: 0.3s all ease;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .contact-button button:hover{
     box-shadow: 0px 11px 13px 0px rgba(0, 131, 255, 0.31);
     -webkit-transition: 0.3s all ease;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .about-container {
     width: 355px;
     height: 110px;
}
 .about-svg {
     width: 361px;
     height: 129px;
     position: relative;
     z-index: 2;
     left: -2px;
     top: -4px;
}
/* Career Css */
 .career-svg {
     width: 368px;
     height: 126px;
     position: relative;
     z-index: 2;
     left: -2px;
     top: -4px;
}
 .career-container {
     width: 365px;
     height: 111px;
}
 .career-list {
     padding: 0;
     margin: 50px -20px 0 -20px;
     width: 100%;
     max-width: 800px;
     display: flex;
     flex-wrap: wrap;
}
 .career-list li {
     list-style: none;
     border: #d8d8d8 solid 1px;
     border-radius: 4px;
     padding: 25px;
     margin: 20px;
     width: calc(50% - 40px);
     cursor: pointer;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
     background-color: #fff;
}
 .career-list li h3 {
     margin: 0 0 5px 0;
     font-weight: 900;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .career-list li span {
     color: #5c9d30;
     font-weight: 600;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .career-list li.active,.career-list li:hover {
     background-color: #5c9d30;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .career-list li.active h3,.career-list li:hover h3 {
     color: #fff;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .career-list li.active span,.career-list li:hover span {
     color: #a1a1f7;
     -webkit-transition: 0.3s all ease ;
     -moz-transition: 0.3s all ease ;
     -ms-transition: 0.3s all ease ;
     -o-transition: 0.3s all ease ;
     transition: 0.3s all ease ;
}
 .career-main-container {
     position: relative;
}
 .career-data-list {
     padding: 0;
     margin: 0;
     display: flex;
     flex-wrap: wrap;
}
 .career-data-list > li {
     list-style: none;
     display: none;
}
 .career-data-list h2 {
     font-weight: 600;
     margin-bottom: 50px;
}
 .career-data-list h5 {
     font-weight: 600;
     margin: 25px 0;
}
 .career-data-list p {
     color: #2a2a2a;
     margin: 0;
     line-height: 24px;
     text-align: justify;
}
 .blue-dot {
     margin: 15px 0;
     padding-left: 15px;
}
 .blue-dot li {
     margin-bottom: 10px;
     position: relative;
     list-style: none;
}
 .blue-dot li:before {
     content: ".";
     color: #5c9d30;
     position: absolute;
     top: -3px;
     left: -17px;
     font-size: 50px;
     line-height: 0px;
}
 .form-left {
     width: calc(100% - 150px);
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 .form-right {
     width: 150px;
     padding-left: 15px;
     font-size: 0px;
}
 .form-right input{
     display: none;
}
 .form-right label {
     width: 100%;
     height: 125px;
     margin: 60px 0 0 0;
     border: #ccc dotted 3px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     font-size: 13px;
     color: #ccc;
     cursor: pointer;
}
 .form-right label img {
     margin-bottom: 10px;
}
 .career-contact-form {
     max-width: none;
}
 .career-main-container .container {
     position: relative;
     z-index: 2;
}
 .services-page-container {
        width: 597px;
    height: 203px;
}
 .services-page-svg {
     width: 600px;
    height: 207px;
     top: -1px;
	     left: -2px;
     position: relative;
     z-index: 2;
}
 .hero-data h1 {
     font-weight: 600;
     font-size: 42px;
     margin: 75px 0 25px 0;
}
 .hero-data p {
     font-size: 16px;
     margin: 0;
     max-width: 500px;
}
 .s_p_r {
     width: 114px;
     height: 114px;
     position: relative;
     margin: 0 auto;
}
 .s_p_r .ring-1 {
     width: 114px;
     height: 114px;
     top: 0;
     left: 0;
     position: absolute;
     border: 1px solid #ebebeb;
     border-radius: 100px;
     opacity: .2;
     transform: scale(0);
     transition: all .4s ease;
}
 .s_p_r .ring-2 {
     width: 84px;
     height: 84px;
     left: 15px;
     position: absolute;
     top: 15px;
     border: 1px solid #ebebeb;
     border-radius: 100px;
     opacity: .5;
     transform: scale(0);
     transition: all .4s ease;
}
 .s_p_r .ring-3 {
     width: 54px;
     height: 54px;
     left: 30px;
     position: absolute;
     top: 30px;
     border: 1px solid #ebebeb;
     border-radius: 100px;
     opacity: .8;
     transform: scale(0);
     transition: all .4s ease;
}
 .s_p_r .ring-4 {
     opacity: 0;
     transition: all .4s ease;
}
 .s_p_r .ring-4, .s_p_r .ring-5 {
     width: 26px;
     height: 26px;
     left: 44px;
     position: absolute;
     top: 44px;
     background-color: #5858fc;
     border: 6px solid #5858fc;
     border-radius: 100px;
}
 .s_p_r .ring-5 {
     transform: scale(.5);
     transition: all .4s ease;
}
 .s_p_r .ring-6 {
     width: 14px;
     height: 14px;
     left: 50px;
     position: absolute;
     top: 50px;
     background-color: #fff;
     border-radius: 100px;
     transform: scale(0);
     transition: all .4s ease;
}
 li.active .s_p_r .ring-1, li.active .s_p_r .ring-2, li.active .s_p_r .ring-3, li.active .s_p_r .ring-5, li.active .s_p_r .ring-6 {
     transform: scale(1);
     transition: all .4s ease;
}
 .service-process-list {
     display: flex;
     justify-content: space-between;
     padding: 0;
     margin: 0;
     position: relative;
     z-index: 2;
}
 .service-process-list li {
     width: 170px;
     list-style: none;
     position: relative;
     text-align: center;
     cursor: pointer;
}
 .s_p_n {
     top: 0;
     left: 50%;
     position: absolute;
     color: #ebebeb;
     font-weight: 800;
     font-size: 100px;
     line-height: 1em;
     transition: all .4s ease;
     opacity: .4;
     transform: translateX(-50%);
}
 li.active .s_p_n {
     top: -60px;
     transition: all .4s ease;
}
 .s_p_h {
     top: -10px;
     position: relative;
     font-weight: 500;
     font-size: 18px;
     line-height: 24px;
     transition: all .4s ease;
     color: #ccc;
}
 li.active .s_p_h {
     color: #000;
     transition: all .4s ease;
}
 .s_p_d {
     color: #888;
     font-size: 14px;
     line-height: 24px;
     transition: all .4s ease;
     opacity: 0;
}
 li.active .s_p_d {
     opacity: 1;
     transition: all .4s ease;
}
 .service-process-inner {
     margin: 50px 0;
     position: relative;
}
 .process-line {
     width: calc(100% - 170px);
     position: absolute;
     background-color: #e7e7e7;
     height: 1px;
     top: 56px;
     left: 85px;
}
 .process-line-inner {
     position: relative;
     height: 1px;
     background-color: #5858fc;
     transition: all .4s ease;
     width: 0;
}
 .services-info {
     font-size: 16px;
     line-height: 24px;
}
 .services-info-inner img {
     max-width: 100%;
}
 .services-info-inner > div.row {
     display: flex;
     flex-wrap: wrap;
}
 .services-info-inner > div.row > div:nth-of-type(1) {
     display: flex;
     align-items: center;
}
 .services-info-inner > div.row > div:nth-of-type(2) {
     display: flex;
     align-items: flex-end;
}
 .services-info-container {
     margin-top: 75px;
     position: relative;
     overflow: hidden;
}
 .services-info-container .container {
     position: relative;
     z-index: 2;
}
 .services-contact-container {
     padding: 75px 0;
}
 .services-bg {
     background-image: url('../images/sservice-bg.png');
     background-position: center;
     background-size: cover;
}
 .services-contact-inner {
     display: flex;
     flex-direction: column;
     align-items: center;
     color: #fff;
     text-align: center;
}
 .services-contact-inner h1 {
     margin: 0;
     font-size: 42px;
}
 .services-contact-inner h4 {
     margin: 75px 0;
     font-size: 20px;
     max-width: 700px;
}
 .services-contact-inner a {
     border: #fff solid 1px;
     color: #fff;
     padding: 13px 40px;
     border-radius: 50px;
     font-size: 16px;
     font-weight: 600;
     -webkit-transition: 0.4s all ease;
     -moz-transition: 0.4s all ease ;
     -ms-transition: 0.4s all ease ;
     -o-transition: 0.4s all ease ;
     transition: 0.4s all ease ;
}
 .services-contact-inner a:hover {
     background-color: #fff;
     color: #5858fc;
     -webkit-transition: 0.4s all ease;
     -moz-transition: 0.4s all ease ;
     -ms-transition: 0.4s all ease ;
     -o-transition: 0.4s all ease ;
     transition: 0.4s all ease ;
}
 .services-black .services-contact-inner{
     color: #000;
}
 .services-black .services-contact-inner a {
     border: #000 solid 1px;
     color: #000;
}
 .services-black .services-contact-inner a:hover {
     background-color: #000;
     color: #fff;
     -webkit-transition: 0.4s all ease;
     -moz-transition: 0.4s all ease ;
     -ms-transition: 0.4s all ease ;
     -o-transition: 0.4s all ease ;
     transition: 0.4s all ease ;
}

 @media (max-width: 1367px) {
     .career-list li {
         margin: 12px 20px;
         width: calc(50% - 40px);
    }
     .career-list {
         margin: 0px -20px 0 -20px;
    }
}
 @media (min-width: 767px) {
     .navbar-right {
         display: flex;
         align-items: center;
    }
}
 @media (max-width: 1023px) {
     .svg-box {
         width: 40vh;
         height: calc(40vh - 1px);
    }
     .design-container {
         width: 228px;
         height: 67px;
    }
     .design-svg {
         width: 244px;
         height: 77px;
         top: -6px;
         left: -13px;
    }
     .design-container1 {
         width: 285px;
         height: 67px;
    }
     .design-svg1 {
         width: 400px;
         height: 77px;
         top: -6px;
         left: -83px;
    }
     .design-container2 {
         width: 174px;
         height: 64px;
    }
     .design-svg2 {
         width: 422px;
         height: 88px;
         top: -13px;
         left: -83px;
    }
	.about-container {
		width: 354px;
		height: 110px;
	}
	.about-svg {
		width: 363px;
		height: 131px;
		position: relative;
		z-index: 2;
		left: -6px;
		top: -4px;
	}
     .hero-data {
         font-size: 25px;
         margin-top: 10px;
    }
     .hero-list-control {
         margin: 15px 0 0 0;
    }
     .service-main-container {
         padding: 75px 0;
    }
     .services-container {
         width: 286px;
         height: 49px;
    }
     .services-svg {
         width: 287px;
         height: 55px;
         top: -2px;
    }
     .services-heading {
         font-size: 20px;
    }
     .service-list {
         margin: 25px -20px 0 -20px;
    }
     .contact-container {
         width: 383px;
         height: 50px;
    }
     .contact-svg {
         width: 383px;
         height: 53px;
         top: -1px;
    }
     .contact-main-container {
         padding: 75px 0;
    }
     .services-page-svg {
         width: 400px;
         height: 138px;
    }
     .services-page-container {
         width: 400px;
         height: 132px;
    }
	.career-svg {
		width: 375px;
		height: 130px;
		position: relative;
		z-index: 2;
		left: -5px;
		top: -5px;
	}
	.career-container {
		width: 365px;
		height: 111px;
	}
     .hero-data h1 {
         margin: 50px 0 25px 0;
    }
}
 @media (max-width: 767px) {
     .background-round {
         display: none;
    }
     .service-bubble1,.service-bubble2,.service-bubble3 {
         display: none;
    }
     .service-list li {
         width: calc(100% - 40px);
    }
     .contact-address {
         flex-wrap: wrap;
    }
     .contact-address > div:nth-of-type(1),.contact-address > div:nth-of-type(2) {
         width: 50%;
    }
     .contact-address > div:nth-of-type(3) {
         width: 100%;
    }
     .social-list {
         display: flex;
         width: 100%;
         margin-top: 35px;
    }
     .social-list li {
         display: flex;
         justify-content: center;
         width: 33.3%;
    }
     .contact-container {
         width: 290px;
         height: 40px;
    }
     .contact-svg {
         width: 290px;
         height: 42px;
         top: -1px;
    }
     .contact-form {
         margin: 30px auto 0 auto;
    }
     .contact-form-input {
         width: 100%;
         margin-top: 15px;
    }
     .career-container {
         width: 244px;
         height: 52px;
    }
     .career-svg {
         width: 244px;
         height: 54px;
    }
     .hero-main-container-change {
         height: auto;
         padding: 70px 0;
    }
     .career-list {
         margin: 0;
    }
     .career-list li {
         margin: 12px 0;
         width: 100%;
         padding: 15px;
    }
     .career-data-list > li .col-sm-4 {
         margin-bottom: 25px;
    }
     .form-right {
         width: 100%;
         padding-left: 0;
         font-size: 0px;
    }
     .form-right label {
         margin: 25px 0 0 0;
    }
     .form-left {
         width: 100%;
    }
     .service-process-list {
         flex-direction: column;
         align-items: center;
    }
     .service-process-list li {
         margin: 20px 0;
    }
     .ring-1, .ring-2, .ring-3, .ring-4,.ring-6 {
         display: none;
    }
     .ring-5 {
         transform: scale(.5) !important;
         transition: all .4s ease;
    }
     .s_p_n {
         top: 0 !important;
    }
     li.active .s_p_h {
         color: #ccc;
         transition: all .4s ease;
    }
     .s_p_d {
         opacity: 1;
    }
     .process-line {
         display: none;
    }
     .services-contact-container {
         padding: 50px 0;
    }
     .services-contact-inner h1 {
         margin: 0;
         font-size: 28px;
    }
     .services-contact-inner h4 {
         margin: 40px 0;
         font-size: 18px;
         max-width: 700px;
    }
     .services-page-container {
         transform: scale(0.8);
         transform-origin: left;
         height: 135px;
    }
     .service-process-inner {
         margin: 0px 0;
    }
     .services-info-container {
         margin-top: 50px;
    }
}
 .sub-menu-parent {
     position: relative;
}
 .sub-menu li{
     padding: 10px 0px;
}
 .sub-menu {
     visibility:hidden;
     opacity: 0;
     position: absolute;
     top: 100%;
     left: 0;
     padding: 0;
     list-style-type: none;
     width: 217%;
     z-index: -1;
     background: #fff;
     border-radius: 5px;
     box-shadow: 0px 8px 12px 0px rgba(0, 1, 4, 0.15);
     padding: 20px 10px;
}
 .sub-menu li a{
     color: #2a2a2a;
     font-weight: 600;
     -webkit-transition: 0.6s all ease;
     -moz-transition: 0.6s all ease;
     -ms-transition: 0.6s all ease;
     -o-transition: 0.6s all ease;
     transition: 0.6s all ease;
}
 .sub-menu li a:hover {
     color: #5c9d30;
     background-color: transparent !important;
}
 .sub-menu-parent:focus .sub-menu, .sub-menu-parent:focus-within .sub-menu, .sub-menu-parent:hover .sub-menu {
     visibility: visible;
     opacity: 1;
     z-index: 1;
     transform: translateY(0%);
     transition-delay: 0s, 0s, 0.3s;
}