/* bg animation */
.wt-page{
    position: relative;
    font-family: 'Livvic', sans-serif;
    background-image: linear-gradient(to right, #339933, #6699ff);  
    background-repeat: no-repeat;
    width: 100%;
    height:2000px; 
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2000px;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 5%;
    width: 150px;
    height: 150px;
    animation-delay: 2s;
    animation-duration: 10s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 15%;
    width: 110px;
    height: 110px;
    animation-delay: 2s;
    animation-duration: 15s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-2500px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
/* bg animation end */

/* wt-reason */
/* circle animation */
.wt-reason .wt-head{
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    transform: translate(-50%,-290%);
    z-index: 3;
    overflow: hidden;
}
	
.wt-reason .wt-head::before {
	content: '';
	position: absolute;
	z-index: -2;
	left: -50%;
	top: -50%;
	width: 200%;
	height: 200%;
	background-color: #399953;
	background-repeat: no-repeat;
	background-size: 50% 50%, 50% 50%;
	background-position: 0 0, 100% 0, 100% 100%, 0 100%;
	background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
	animation: rotate 4s linear infinite;
}
	
.wt-reason .wt-head::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 6px;
	top: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	background: white;
	border-radius: 50%;
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}
/* circle animation end */

.wt-reason .wt-head h4{
    background-image: linear-gradient(to right, #339933,  #6699ff);
    -webkit-background-clip: text;
    color: transparent;
}
.wt-reason .wt-head .btn img{
    width: 35px;
    height: 35px;
}
.wt-reason .wt-head .btn .text{
    display: none;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}
.wt-reason .wt-head .btn{
    position: absolute;
    text-align: center;
    padding: 2%;
    width: 50px;
    height: 50px;
    cursor: default;
    pointer-events: none;
    border-radius: 50%;
    box-shadow: none;
    animation: rotate-icon 5s infinite linear;
}

@keyframes rotate-icon{
    0%{
        transform: rotateY(0deg);
    }
    20%,100%{
        transform: rotateY(360deg);
    }
}

.wt-reason .wt-head .btn1{
    left: 20%;
    top: 12%;
    background: #FD660A;
}

.wt-reason .wt-head .btn2{
    left: 4%;
    top: 42%;
    background: #F30876;
}

.wt-reason .wt-head .btn3{
    left: 20%;
    bottom: 12%;
    background: #05DBEE;
}

.wt-reason .wt-head .btn4{
    right: 20%;
    top: 12%;
    background: #13E1AF;
}

.wt-reason .wt-head .btn5{
    right: 4%;
    top: 42%;
    background: #780FDA;
}

.wt-reason .wt-head .btn6{
    right: 20%;
    bottom: 12%;
    background: #2c44e4;
}

.wt-page .wt-reason .card{
    margin: 20px 0px 20px 0px;
}
.wt-page .wt-reason .card .card-body{
    color: #fff;
}
.wt-page .wt-reason .card .card-body h4{
    color: #fff;
    text-align: center;
}
.wt-page .wt-reason .card .card-body .card-text{
    line-height: normal;
}
.wt-page .wt-reason .card-left{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-210%,-190%);
}
.wt-page .wt-reason .card-right{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(110%,-190%);
}
.wt-page .wt-reason .dashed-svg{
    position: absolute;
    top: 50%;
    left: 50%;
}
#line-maskPath {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 2s linear alternate infinite;
}
@keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 748;
    }
}
.wt-page .dashed-svg.svg-1{
    transform: translate(50%,-60%) rotate(10deg);
}
.wt-page .dashed-svg.svg-2{
    transform: translate(58%,-10%) rotate(0deg);
}
.wt-page .dashed-svg.svg-3{
    transform: translate(68%,42%) rotate(-15deg);
}
.wt-page .dashed-svg.svg-4{
    transform: translate(-165%,-140%) rotate(-190deg);
}
.wt-page .dashed-svg.svg-5{
    transform: translate(-158%,-95%) rotate(180deg);
}
.wt-page .dashed-svg.svg-6{
    transform: translate(-145%,-40%) rotate(195deg);
}
/* wt-reason end */

/* wt-choose */
.wt-page .wt-choose{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-90%);
}
.wt-page .wt-choose h3{
    color: #fff;
    margin-bottom: 8%;
}
.wt-page .wt-choose .wy-reason{
    display: flex;
    justify-content: center;
}
.wt-page .wt-choose .card h4{
    color: #fff;
}
.wt-page .wt-choose .card{
    width: 300px;
    height: 200px;
    margin: 2%;
    color: #fff;
    text-align: center;
    font-weight: 500;
}
.wt-page .wt-choose .card img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(150%,90%);
    width: 50px;
}
/* wt-choose end */

/* grow-main */
.grow-main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%,25%);
    z-index: 3;
}
.grow-main .grow-svg{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.grow-main .grow-svg .svg-1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-52%,50%) rotate(20deg);
}
.grow-main .grow-svg .svg-2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%,50.5%) rotate(140deg);
}
.grow-main .grow-svg .svg-3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45.3%,60.5%) rotate(250deg);
}
.grow-main .grow-head{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-45%,88%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
}
.grow-main .grow-head .grow-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-150%);
    width: 550px;
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    color: #fff;
}
.grow-main .grow-head .grow-contact{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,50%);
}
#outline-maskPath {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: outline 2s linear alternate infinite;
}
@keyframes outline {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 400;
    }
}
/* grow-main end */

/* responsive css */
@media only screen and (max-width: 1279px){
    .wt-page .wt-reason .card-left{
        display: none;
    }
    .wt-page .wt-reason .card-right{
        display: none;
    }
    .wt-reason .wt-head .btn{
        cursor: pointer;
        pointer-events: all;
    }
}
@media only screen and (max-width: 991px){
    .wt-page .wt-choose .card{
        height: 220px;
    }
    .wt-page .wt-choose .card img{
        transform: translate(40%,90%);
    }
}
@media only screen and (max-width: 767px){
    .wt-page .wt-choose .card img{
        transform: translate(40%,90%);
    }
}
@media only screen and (max-width: 523px){
    .wt-page .wt-choose{
        transform: translate(-50%,-60%);
    }
    .wt-page .wt-choose .wy-reason{
        display: inline;
    }
    .grow-main{
        transform: translate(-55%,80%);
    }
}
@media only screen and (max-width: 483px){
    .grow-main{
        display: none;
    }
}
@media only screen and (max-width: 299px){
    .wt-page{
        height: 600px;
    }
    .wt-page .wt-head{
        display: none;
    }
    .wt-page .wt-choose{
        display: none;
    }
    .wt-page::after{
        content: "Please open this page in Desktop site mode to view the content.";
        font-size: 20px;
        font-weight: 500;
        color: #fff;
    }
}