.banner-sec {
float: left;
width: 100%;
height: 100vh;
overflow: hidden;
background:  #172b44;
position: relative;
max-height: 865px;
}
.banner-content-sec {
text-align: center;
float: left;
width: auto;
position: absolute;
bottom: 90px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
max-width: 700px;
}
.banner-content-sec .main-banner-heading {
font-size: 46px;
font-weight: 700;
color: #fff;
margin: 0 0 20px;
font-family: cabin, sans-serif;
}
.banner-content-sec p {
font-size: 20px;
font-weight: 400;
color: #fff;
margin: 0;
}
.system {
position: relative;
top: 0;
left: 0;
width: 1600px;
height: 100%;
margin: 0 auto;
}
.nep-path {
width: 100%;
height: 166%;
border-radius: 100%;
z-index: 100;
position: absolute;
top: 18%;
left: 0;
margin: 0;
border: solid 1px rgba(255, 255, 255, .1);
}
.ura-path {
width: 80%;
height: 140%;
border-radius: 100%;
z-index: 100;
position: absolute;
top: 34%;
left: 10%;
margin: 0;
border: solid 1px rgba(255, 255, 255, .1);
}
.sat-path {
width: 76%;
height: 127%;
border-radius: 100%;
z-index: 100;
position: absolute;
top: 41%;
left: 12%;
margin: 0;
border: solid 1px rgba(255, 255, 255, .1);
}
.top-parent-circle {
display: table;
position: relative;
width: 100%;
height: 100%;
border-radius: 100%}
.icon-opc {
width: 40px;
height: 40px;
border-radius: 100%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .1);
background-color:  #172b44;
display: flex;
justify-content: center;
align-items: center;
}
.icon-opc img {
max-width: 20px;
max-height: 20px;
opacity: .3;
}
@-webkit-keyframes angular-icon {
from {
-webkit-transform: rotate(-70deg) translateY(-840px) rotate(70deg);
}
to {
-webkit-transform: rotate(78deg) translateY(-795px) rotate(-78deg);
}
}@-keyframes angular-icon {
from {
transform: rotate(-70deg)translateY(-840px)rotate(70deg);
}
to {
transform: rotate(78deg)translateY(-795px)rotate(-78deg);
}
}
.angular-icon {
position: absolute;
top: 842px;
left: 50%;
margin: -50px 0 0;
-webkit-animation: angular-icon 80s infinite linear alternate;
animation: angular-icon 80s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes vue-icon {
from {
-webkit-transform: rotate(-66deg) translateY(-840px) rotate(66deg);
}
to {
-webkit-transform: rotate(78deg) translateY(-795px) rotate(-78deg);
}
}@-keyframes vue-icon {
from {
transform: rotate(-66deg)translateY(-840px)rotate(66deg);
}
to {
transform: rotate(78deg)translateY(-795px)rotate(-78deg);
}
}
.vue-icon {
position: absolute;
top: 842px;
left: 50%;
margin: -50px 0 0;
-webkit-animation: vue-icon 40s infinite linear alternate;
animation: vue-icon 40s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes react-icon {
from {
-webkit-transform: rotate(20deg) translateY(-770px) rotate(-20deg);
}
to {
-webkit-transform: rotate(-83deg) translateY(-815px) rotate(83deg);
}
}@-keyframes react-icon {
from {
transform: rotate(20deg)translateY(-770px)rotate(-20deg);
}
to {
transform: rotate(-83deg)translateY(-815px)rotate(83deg);
}
}
.react-icon {
position: absolute;
top: 780px;
left: 50%;
margin: -25px 0 0 -20px;
-webkit-animation: react-icon 40s infinite linear alternate;
animation: react-icon 40s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes bootstrap-icon {
from {
-webkit-transform: rotate(70deg) translateY(-800px) rotate(-70deg);
}
to {
-webkit-transform: rotate(-83deg) translateY(-820px) rotate(83deg);
}
}@-keyframes bootstrap-icon {
from {
transform: rotate(70deg)translateY(-800px)rotate(-70deg);
}
to {
transform: rotate(-83deg)translateY(-820px)rotate(83deg);
}
}
.bootstrap-icon {
position: absolute;
top: 830px;
left: 50%;
margin: -50px 0 0 -15px;
-webkit-animation: bootstrap-icon 80s infinite linear alternate;
animation: bootstrap-icon 80s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes amazons3-icon {
from {
-webkit-transform: rotate(30deg) translateY(-840px) rotate(30deg);
}
to {
-webkit-transform: rotate(-60deg) translateY(-795px) rotate(-60deg);
}
}@-keyframes amazons3-icon {
from {
transform: rotate(30deg)translateY(-840px)rotate(30deg);
}
to {
transform: rotate(-60deg)translateY(-795px)rotate(-60deg);
}
}
.amazons3-icon {
position: absolute;
top: 842px;
left: 50%;
margin: -44px 0 0 -38px;
-webkit-animation: amazons3-icon 60s infinite linear alternate;
animation: amazons3-icon 60s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes android-icon {
from {
-webkit-transform: rotate(-60deg) translateY(-840px) rotate(60deg);
}
to {
-webkit-transform: rotate(83deg) translateY(-795px) rotate(-83deg);
}
}@-keyframes android-icon {
from {
transform: rotate(-60deg)translateY(-840px)rotate(60deg);
}
to {
transform: rotate(83deg)translateY(-795px)rotate(-83deg);
}
}
.android-icon {
position: absolute;
top: 842px;
left: 50%;
margin: -50px 0 0;
-webkit-animation: android-icon 30s infinite linear alternate;
animation: android-icon 30s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes google-cloud-icon {
from {
-webkit-transform: rotate(-30deg) translateY(-840px) rotate(30deg);
}
to {
-webkit-transform: rotate(83deg) translateY(-795px) rotate(-83deg);
}
}@-keyframes google-cloud-icon {
from {
transform: rotate(-30deg)translateY(-840px)rotate(30deg);
}
to {
transform: rotate(83deg)translateY(-795px)rotate(-83deg);
}
}
.google-cloud-icon {
position: absolute;
top: 842px;
left: 50%;
margin: -35px 0 0;
-webkit-animation: google-cloud-icon 100s infinite linear alternate;
animation: google-cloud-icon 100s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes node-js-icon {
from {
-webkit-transform: rotate(-58deg) translateY(-685px) rotate(58deg);
}
to {
-webkit-transform: rotate(70deg) translateY(-640px) rotate(-70deg);
}
}@-keyframes node-js-icon {
from {
transform: rotate(-58deg)translateY(-685px)rotate(58deg);
}
to {
transform: rotate(70deg)translateY(-640px)rotate(-70deg);
}
}
.node-js-icon {
position: absolute;
top: 660px;
left: 50%;
margin: -14px 0 0 0;
-webkit-animation: node-js-icon 100s infinite linear alternate;
animation: node-js-icon 100s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes laravel-js-icon {
from {
-webkit-transform: rotate(-50deg) translateY(-680px) rotate(50deg);
}
to {
-webkit-transform: rotate(72deg) translateY(-630px) rotate(-72deg);
}
}@-keyframes laravel-js-icon {
from {
transform: rotate(-50deg)translateY(-680px)rotate(50deg);
}
to {
transform: rotate(72deg)translateY(-630px)rotate(-72deg);
}
}
.laravel-js-icon {
position: absolute;
top: 647px;
left: 50%;
margin: -6px 0 0;
-webkit-animation: laravel-js-icon 50s infinite linear alternate;
animation: laravel-js-icon 50s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes my-sql-icon {
from {
-webkit-transform: rotate(-12deg) translateY(-740px) rotate(12deg);
}
to {
-webkit-transform: rotate(72deg) translateY(-660px) rotate(-72deg);
}
}@-keyframes my-sql-icon {
from {
transform: rotate(-46deg)translateY(-740px)rotate(46deg);
}
to {
transform: rotate(72deg)translateY(-660px)rotate(-72deg);
}
}
.my-sql-icon {
position: absolute;
top: 720px;
left: 50%;
margin: -14px 0 0;
-webkit-animation: my-sql-icon 30s infinite linear alternate;
animation: my-sql-icon 30s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes mongodb-icon {
from {
-webkit-transform: rotate(30deg) translateY(-700px) rotate(-30deg);
}
to {
-webkit-transform: rotate(-67deg) translateY(-700px) rotate(67deg);
}
}@-keyframes mongodb-icon {
from {
transform: rotate(30deg)translateY(-700px)rotate(-30deg);
}
to {
transform: rotate(-67deg)translateY(-700px)rotate(67deg);
}
}
.mongodb-icon {
position: absolute;
top: 710px;
left: 50%;
margin: -28px 0 0;
-webkit-animation: mongodb-icon 50s infinite linear alternate;
animation: mongodb-icon 50s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes post-gray-sql-icon {
from {
-webkit-transform: rotate(80deg) translateY(-640px) rotate(-80deg);
}
to {
-webkit-transform: rotate(-72deg) translateY(-675px) rotate(72deg);
}
}@-keyframes post-gray-sql-icon {
from {
transform: rotate(80deg)translateY(-640px)rotate(-80deg);
}
to {
transform: rotate(-72deg)translateY(-675px)rotate(72deg);
}
}
.post-gray-sql-icon {
position: absolute;
top: 655px;
left: 50%;
margin: -14px 0 0;
-webkit-animation: post-gray-sql-icon 30s infinite linear alternate;
animation: post-gray-sql-icon 30s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes git-icon {
from {
-webkit-transform: rotate(20deg) translateY(-660px) rotate(-20deg);
}
to {
-webkit-transform: rotate(-78deg) translateY(-660px) rotate(78deg);
}
}@-keyframes git-icon {
from {
transform: rotate(20deg)translateY(-660px)rotate(-20deg);
}
to {
transform: rotate(-78deg)translateY(-660px)rotate(78deg);
}
}
.git-icon {
position: absolute;
top: 650px;
left: 50%;
margin: -14px 0 0;
-webkit-animation: git-icon 12s infinite linear alternate;
animation: git-icon 12s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes iOS-icon {
from {
-webkit-transform: rotate(70deg) translateY(-610px) rotate(-70deg);
}
to {
-webkit-transform: rotate(-84deg) translateY(-650px) rotate(84deg);
}
}@-keyframes iOS-icon {
from {
transform: rotate(70deg)translateY(-610px)rotate(-70deg);
}
to {
transform: rotate(-84deg)translateY(-650px)rotate(84deg);
}
}
.iOS-icon {
position: absolute;
top: 615px;
left: 50%;
margin: -14px 0 0;
-webkit-animation: iOS-icon 15s infinite linear alternate;
animation: iOS-icon 15s infinite linear alternate;
z-index: 200;
}
@media screen and (min-width:1921px) {
.banner-sec {
height: 900px;
}
}@media screen and (max-width:1600px) {
.banner-sec {
height: 685px;
}
.system {
width: 1370px;
}
@-webkit-keyframes angular-icon {
from {
-webkit-transform: rotate(-60deg) translateY(-770px) rotate(60deg);
}
to {
-webkit-transform: rotate(65deg) translateY(-725px) rotate(-65deg);
}
}@-keyframes angular-icon {
from {
transform: rotate(-60deg)translateY(-770px)rotate(60deg);
}
to {
transform: rotate(65deg)translateY(-725px)rotate(-65deg);
}
}
.angular-icon {
top: 775px;
}
@-webkit-keyframes vue-icon {
from {
-webkit-transform: rotate(-30deg) translateY(-735px) rotate(30deg);
}
to {
-webkit-transform: rotate(67deg) translateY(-708px) rotate(-67deg);
}
}@-keyframes vue-icon {
from {
transform: rotate(-30deg)translateY(-735px)rotate(30deg);
}
to {
transform: rotate(67deg)translateY(-708px)rotate(-67deg);
}
}
.vue-icon {
top: 750px;
}
@-webkit-keyframes react-icon {
from {
-webkit-transform: rotate(10deg) translateY(-710px) rotate(-10deg);
}
to {
-webkit-transform: rotate(-70deg) translateY(-725px) rotate(70deg);
}
}@-keyframes react-icon {
from {
transform: rotate(10deg)translateY(-710px)rotate(-10deg);
}
to {
transform: rotate(-70deg)translateY(-725px)rotate(70deg);
}
}
.react-icon {
top: 710px;
}
@-webkit-keyframes bootstrap-icon {
from {
-webkit-transform: rotate(50deg) translateY(-715px) rotate(-50deg);
}
to {
-webkit-transform: rotate(-70deg) translateY(-748px) rotate(70deg);
}
}@-keyframes bootstrap-icon {
from {
transform: rotate(50deg)translateY(-715px)rotate(-50deg);
}
to {
transform: rotate(-70deg)translateY(-748px)rotate(70deg);
}
}
.bootstrap-icon {
top: 710px;
margin: -10px 0 0;
}
@-webkit-keyframes node-js-icon {
from {
-webkit-transform: rotate(-70deg) translateY(-610px) rotate(70deg);
}
to {
-webkit-transform: rotate(68deg) translateY(-575px) rotate(-68deg);
}
}@-keyframes node-js-icon {
from {
transform: rotate(-70deg)translateY(-610px)rotate(70deg);
}
to {
transform: rotate(68deg)translateY(-575px)rotate(-68deg);
}
}
.node-js-icon {
top: 585px;
}
@-webkit-keyframes laravel-js-icon {
from {
-webkit-transform: rotate(-50deg) translateY(-620px) rotate(50deg);
}
to {
-webkit-transform: rotate(68deg) translateY(-570px) rotate(-68deg);
}
}@-keyframes laravel-js-icon {
from {
transform: rotate(-50deg)translateY(-620px)rotate(50deg);
}
to {
transform: rotate(68deg)translateY(-570px)rotate(-68deg);
}
}
.laravel-js-icon {
top: 585px;
}
@-webkit-keyframes my-sql-icon {
from {
-webkit-transform: rotate(-20deg) translateY(-648px) rotate(20deg);
}
to {
-webkit-transform: rotate(68deg) translateY(-585px) rotate(-68deg);
}
}@-keyframes my-sql-icon {
from {
transform: rotate(-20deg)translateY(-648px)rotate(20deg);
}
to {
transform: rotate(68deg)translateY(-585px)rotate(-68deg);
}
}
.my-sql-icon {
top: 625px;
}
@-webkit-keyframes mongodb-icon {
from {
-webkit-transform: rotate(40deg) translateY(-600px) rotate(-40deg);
}
to {
-webkit-transform: rotate(-68deg) translateY(-605px) rotate(68deg);
}
}@-keyframes mongodb-icon {
from {
transform: rotate(40deg)translateY(-600px)rotate(-40deg);
}
to {
transform: rotate(-68deg)translateY(-605px)rotate(68deg);
}
}
.mongodb-icon {
top: 610px;
}
@-webkit-keyframes post-gray-sql-icon {
from {
-webkit-transform: rotate(70deg) translateY(-570px) rotate(-70deg);
}
to {
-webkit-transform: rotate(-68deg) translateY(-610px) rotate(68deg);
}
}@-keyframes post-gray-sql-icon {
from {
transform: rotate(70deg)translateY(-570px)rotate(-70deg);
}
to {
transform: rotate(-68deg)translateY(-610px)rotate(68deg);
}
}
.post-gray-sql-icon {
top: 585px;
}
@-webkit-keyframes amazons3-icon {
from {
-webkit-transform: rotate(-42deg) translateY(-740px) rotate(42deg);
}
to {
-webkit-transform: rotate(57deg) translateY(-720px) rotate(-57deg);
}
}@-keyframes amazons3-icon {
from {
transform: rotate(-42deg)translateY(-740px)rotate(42deg);
}
to {
transform: rotate(57deg)translateY(-720px)rotate(-57deg);
}
}
.amazons3-icon {
top: 712px;
margin: -10px 0 0;
}
@-webkit-keyframes android-icon {
from {
-webkit-transform: rotate(-30deg) translateY(-785px) rotate(30deg);
}
to {
-webkit-transform: rotate(58deg) translateY(-750px) rotate(-58deg);
}
}@-keyframes android-icon {
from {
transform: rotate(-30deg)translateY(-785px)rotate(30deg);
}
to {
transform: rotate(58deg)translateY(-750px)rotate(-58deg);
}
}
.android-icon {
top: 758px;
margin: -10px 0 0;
}
@-webkit-keyframes google-cloud-icon {
from {
-webkit-transform: rotate(-10deg) translateY(-717px) rotate(10deg);
}
to {
-webkit-transform: rotate(58deg) translateY(-715px) rotate(-58deg);
}
}@-keyframes google-cloud-icon {
from {
transform: rotate(-10deg)translateY(-717px)rotate(10deg);
}
to {
transform: rotate(58deg)translateY(-715px)rotate(-58deg);
}
}
.google-cloud-icon {
top: 700px;
margin: -10px 0 0;
}
@-webkit-keyframes git-icon {
from {
-webkit-transform: rotate(20deg) translateY(-570px) rotate(-20deg);
}
to {
-webkit-transform: rotate(-60deg) translateY(-593px) rotate(60deg);
}
}@-keyframes git-icon {
from {
transform: rotate(20deg)translateY(-570px)rotate(-20deg);
}
to {
transform: rotate(-60deg)translateY(-593px)rotate(60deg);
}
}
.git-icon {
top: 565px;
}
@-webkit-keyframes iOS-icon {
from {
-webkit-transform: rotate(50deg) translateY(-550px) rotate(-50deg);
}
to {
-webkit-transform: rotate(-60deg) translateY(-592px) rotate(60deg);
}
}@-keyframes iOS-icon {
from {
transform: rotate(50deg)translateY(-550px)rotate(-50deg);
}
to {
transform: rotate(-60deg)translateY(-592px)rotate(60deg);
}
}
.iOS-icon {
top: 560px;
}
}@media screen and (max-width:1400px) {
.banner-sec {
height: 700px;
}
.system {
width: 1200px;
}
@-webkit-keyframes angular-icon {
from {
-webkit-transform: rotate(-60deg) translateY(-620px) rotate(60deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-580px) rotate(-76deg);
}
}@-keyframes angular-icon {
from {
transform: rotate(-60deg)translateY(-620px)rotate(60deg);
}
to {
transform: rotate(76deg)translateY(-580px)rotate(-76deg);
}
}
.angular-icon {
top: 630px;
}
@-webkit-keyframes vue-icon {
from {
-webkit-transform: rotate(-20deg) translateY(-610px) rotate(20deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-580px) rotate(-76deg);
}
}@-keyframes vue-icon {
from {
transform: rotate(-20deg)translateY(-610px)rotate(20deg);
}
to {
transform: rotate(76deg)translateY(-580px)rotate(-76deg);
}
}
.vue-icon {
top: 630px;
}
@-webkit-keyframes react-icon {
from {
-webkit-transform: rotate(20deg) translateY(-595px) rotate(-20deg);
}
to {
-webkit-transform: rotate(-78deg) translateY(-600px) rotate(78deg);
}
}@-keyframes react-icon {
from {
transform: rotate(20deg)translateY(-595px)rotate(-20deg);
}
to {
transform: rotate(-78deg)translateY(-600px)rotate(78deg);
}
}
.react-icon {
top: 600px;
}
@-webkit-keyframes bootstrap-icon {
from {
-webkit-transform: rotate(60deg) translateY(-605px) rotate(-60deg);
}
to {
-webkit-transform: rotate(-78deg) translateY(-625px) rotate(78deg);
}
}@-keyframes bootstrap-icon {
from {
transform: rotate(60deg)translateY(-605px)rotate(-60deg);
}
to {
transform: rotate(-78deg)translateY(-625px)rotate(78deg);
}
}
.bootstrap-icon {
top: 600px;
}
@-webkit-keyframes node-js-icon {
from {
-webkit-transform: rotate(-70deg) translateY(-508px) rotate(70deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-468px) rotate(-76deg);
}
}@-keyframes node-js-icon {
from {
transform: rotate(-70deg)translateY(-508px)rotate(70deg);
}
to {
transform: rotate(76deg)translateY(-468px)rotate(-76deg);
}
}
.node-js-icon {
top: 485px;
}
@-webkit-keyframes laravel-js-icon {
from {
-webkit-transform: rotate(-40deg) translateY(-535px) rotate(40deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-480px) rotate(-76deg);
}
}@-keyframes laravel-js-icon {
from {
transform: rotate(-40deg)translateY(-535px)rotate(40deg);
}
to {
transform: rotate(76deg)translateY(-480px)rotate(-76deg);
}
}
.laravel-js-icon {
top: 510px;
}
@-webkit-keyframes my-sql-icon {
from {
-webkit-transform: rotate(-10deg) translateY(-530px) rotate(10deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-475px) rotate(-76deg);
}
}@-keyframes my-sql-icon {
from {
transform: rotate(-10deg)translateY(-530px)rotate(10deg);
}
to {
transform: rotate(76deg)translateY(-475px)rotate(-76deg);
}
}
.my-sql-icon {
top: 520px;
}
@-webkit-keyframes mongodb-icon {
from {
-webkit-transform: rotate(30deg) translateY(-495px) rotate(-30deg);
}
to {
-webkit-transform: rotate(-76deg) translateY(-510px) rotate(76deg);
}
}@-keyframes mongodb-icon {
from {
transform: rotate(30deg)translateY(-495px)rotate(-30deg);
}
to {
transform: rotate(-76deg)translateY(-510px)rotate(76deg);
}
}
.mongodb-icon {
top: 510px;
}
@-webkit-keyframes post-gray-sql-icon {
from {
-webkit-transform: rotate(65deg) translateY(-475px) rotate(-65deg);
}
to {
-webkit-transform: rotate(-76deg) translateY(-515px) rotate(76deg);
}
}@-keyframes post-gray-sql-icon {
from {
transform: rotate(65deg)translateY(-475px)rotate(-65deg);
}
to {
transform: rotate(-76deg)translateY(-515px)rotate(76deg);
}
}
.post-gray-sql-icon {
top: 490px;
}
@-webkit-keyframes amazons3-icon {
from {
-webkit-transform: rotate(-42deg) translateY(-563px) rotate(42deg);
}
to {
-webkit-transform: rotate(57deg) translateY(-550px) rotate(-57deg);
}
}@-keyframes amazons3-icon {
from {
transform: rotate(-42deg)translateY(-563px)rotate(42deg);
}
to {
transform: rotate(57deg)translateY(-550px)rotate(-57deg);
}
}
.amazons3-icon {
top: 530px;
margin: 0;
}
@-webkit-keyframes android-icon {
from {
-webkit-transform: rotate(-30deg) translateY(-680px) rotate(30deg);
}
to {
-webkit-transform: rotate(58deg) translateY(-630px) rotate(-58deg);
}
}@-keyframes android-icon {
from {
transform: rotate(-30deg)translateY(-680px)rotate(30deg);
}
to {
transform: rotate(58deg)translateY(-630px)rotate(-58deg);
}
}
.android-icon {
top: 645px;
margin: 0;
}
@-webkit-keyframes google-cloud-icon {
from {
-webkit-transform: rotate(-10deg) translateY(-700px) rotate(10deg);
}
to {
-webkit-transform: rotate(58deg) translateY(-640px) rotate(-58deg);
}
}@-keyframes google-cloud-icon {
from {
transform: rotate(-10deg)translateY(-700px)rotate(10deg);
}
to {
transform: rotate(58deg)translateY(-640px)rotate(-58deg);
}
}
.google-cloud-icon {
top: 675px;
margin: -10px 0 0;
}
@-webkit-keyframes git-icon {
from {
-webkit-transform: rotate(30deg) translateY(-415px) rotate(-30deg);
}
to {
-webkit-transform: rotate(-74deg) translateY(-473px) rotate(74deg);
}
}@-keyframes git-icon {
from {
transform: rotate(30deg)translateY(-415px)rotate(-30deg);
}
to {
transform: rotate(-74deg)translateY(-475px)rotate(74deg);
}
}
.git-icon {
top: 423px;
}
@-webkit-keyframes iOS-icon {
from {
-webkit-transform: rotate(60deg) translateY(-425px) rotate(-60deg);
}
to {
-webkit-transform: rotate(-74deg) translateY(-475px) rotate(74deg);
}
}@-keyframes iOS-icon {
from {
transform: rotate(60deg)translateY(-425px)rotate(-60deg);
}
to {
transform: rotate(-74deg)translateY(-475px)rotate(74deg);
}
}
.iOS-icon {
top: 435px;
}
}@media screen and (max-width:1300px) {
.banner-sec {
height: 612px;
}
.nep-path {
height: 192%}
.ura-path {
width: 84%;
height: 170%;
left: 8%}
.sat-path {
width: 72%;
top: 39%;
left: 14%;
height: 144%}
.banner-content-sec .main-banner-heading {
font-size: 44px;
margin: 0 0 16px;
}
.banner-content-sec p {
font-size: 26px;
}
.banner-content-sec {
bottom: 44px;
}
@-webkit-keyframes angular-icon {
from {
-webkit-transform: rotate(-60deg) translateY(-630px) rotate(60deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-590px) rotate(-76deg);
}
}@-keyframes angular-icon {
from {
transform: rotate(-60deg)translateY(-630px)rotate(60deg);
}
to {
transform: rotate(76deg)translateY(-600px)rotate(-76deg);
}
}
.angular-icon {
top: 638px;
}
@-webkit-keyframes bootstrap-icon {
from {
-webkit-transform: rotate(60deg) translateY(-594px) rotate(-60deg);
}
to {
-webkit-transform: rotate(-78deg) translateY(-620px) rotate(78deg);
}
}@-keyframes bootstrap-icon {
from {
transform: rotate(60deg)translateY(-594px)rotate(-60deg);
}
to {
transform: rotate(-78deg)translateY(-620px)rotate(78deg);
}
}
.bootstrap-icon {
top: 590px;
}
@-webkit-keyframes post-gray-sql-icon {
from {
-webkit-transform: rotate(65deg) translateY(-494px) rotate(-65deg);
}
to {
-webkit-transform: rotate(-76deg) translateY(-525px) rotate(76deg);
}
}@-keyframes post-gray-sql-icon {
from {
transform: rotate(65deg)translateY(-494px)rotate(-65deg);
}
to {
transform: rotate(-76deg)translateY(-525px)rotate(76deg);
}
}
.post-gray-sql-icon {
top: 504px;
}
.iOS-icon {
top: 437px;
}
@-webkit-keyframes amazons3-icon {
from {
-webkit-transform: rotate(-42deg) translateY(-575px) rotate(42deg);
}
to {
-webkit-transform: rotate(57deg) translateY(-555px) rotate(-57deg);
}
}@-keyframes amazons3-icon {
from {
transform: rotate(-42deg)translateY(-575px)rotate(42deg);
}
to {
transform: rotate(57deg)translateY(-555px)rotate(-57deg);
}
}
.amazons3-icon {
top: 540px;
margin: 0;
}
@-webkit-keyframes android-icon {
from {
-webkit-transform: rotate(-30deg) translateY(-670px) rotate(30deg);
}
to {
-webkit-transform: rotate(58deg) translateY(-622px) rotate(-58deg);
}
}@-keyframes android-icon {
from {
transform: rotate(-30deg)translateY(-670px)rotate(30deg);
}
to {
transform: rotate(58deg)translateY(-622px)rotate(-58deg);
}
}
.android-icon {
top: 635px;
margin: 0;
}
.google-cloud-icon {
top: 680px;
}
.node-js-icon {
top: 480px;
}
.laravel-js-icon {
top: 505px;
}
.my-sql-icon {
top: 517px;
}
@-webkit-keyframes mongodb-icon {
from {
-webkit-transform: rotate(30deg) translateY(-495px) rotate(-30deg);
}
to {
-webkit-transform: rotate(-76deg) translateY(-515px) rotate(76deg);
}
}@-keyframes mongodb-icon {
from {
transform: rotate(30deg)translateY(-495px)rotate(-30deg);
}
to {
transform: rotate(-76deg)translateY(-515px)rotate(76deg);
}
}
@-webkit-keyframes git-icon {
from {
-webkit-transform: rotate(30deg) translateY(-412px) rotate(-30deg);
}
to {
-webkit-transform: rotate(-74deg) translateY(-483px) rotate(74deg);
}
}@-keyframes git-icon {
from {
transform: rotate(30deg)translateY(-412px)rotate(-30deg);
}
to {
transform: rotate(-74deg)translateY(-483px)rotate(74deg);
}
}
.git-icon {
top: 423px;
}
}@media screen and (max-width:1200px) {
.banner-sec {
height: 550px;
}
.system {
width: 950px;  
}
.nep-path {
height: 168%;
top: 21%}
.ura-path {
top: 38%;
height: 140%;
left: 10%;
width: 80%}
.sat-path {
width: 66%;
top: 50%;
left: 17%;
height: 130%}
.banner-content-sec {
bottom: 24px;
}
.banner-content-sec .main-banner-heading {
font-size: 32px;
}
.banner-content-sec p {
font-size: 20px;
}
@-webkit-keyframes angular-icon {
from {
-webkit-transform: rotate(-70deg) translateY(-488px) rotate(70deg);
}
to {
-webkit-transform: rotate(78deg) translateY(-460px) rotate(-78deg);
}
}@-keyframes angular-icon {
from {
transform: rotate(-70deg)translateY(-488px)rotate(70deg);
}
to {
transform: rotate(78deg)translateY(-460px)rotate(-78deg);
}
}
.angular-icon {
top: 500px;
}
@-webkit-keyframes vue-icon {
from {
-webkit-transform: rotate(-40deg) translateY(-500px) rotate(40deg);
}
to {  
-webkit-transform: rotate(78deg) translateY(-460px) rotate(-78deg);
}
}@-keyframes vue-icon {
from {
transform: rotate(-40deg)translateY(-500px)rotate(40deg);
}
to {
transform: rotate(78deg)translateY(-460px)rotate(-78deg);
}
}
.vue-icon {
top: 513px;
}
@-webkit-keyframes react-icon {
from {
-webkit-transform: rotate(10deg) translateY(-490px) rotate(-10deg);
}
to {
-webkit-transform: rotate(-80deg) translateY(-490px) rotate(80deg);
}
}@-keyframes react-icon {
from {
transform: rotate(10deg)translateY(-490px)rotate(-10deg);
}
to {
transform: rotate(-80deg)translateY(-490px)rotate(80deg);
}
}
.react-icon {
top: 495px;
}
@-webkit-keyframes bootstrap-icon {
from {
-webkit-transform: rotate(65deg) translateY(-470px) rotate(-65deg);
}
to {  
-webkit-transform: rotate(-80deg) translateY(-490px) rotate(80deg);
}
}@-keyframes bootstrap-icon {
from {
transform: rotate(65deg)translateY(-470px)rotate(-65deg);
}
to {
transform: rotate(-80deg)translateY(-490px)rotate(80deg);
}
}
.bootstrap-icon {
top: 465px;
}
@-webkit-keyframes node-js-icon {
from {
-webkit-transform: rotate(-70deg) translateY(-410px) rotate(70deg);
}
to {
-webkit-transform: rotate(78deg) translateY(-370px) rotate(-78deg);
}
}@-keyframes node-js-icon {
from {
transform: rotate(-70deg)translateY(-410px)rotate(70deg);
}
to {
transform: rotate(78deg)translateY(-370px)rotate(-78deg);
}
}
.node-js-icon {
top: 388px;
}
@-webkit-keyframes laravel-js-icon {
from {
-webkit-transform: rotate(-40deg) translateY(-420px) rotate(40deg);
}
to {
-webkit-transform: rotate(78deg) translateY(-365px) rotate(-78deg);
}
}@-keyframes laravel-js-icon {
from {
transform: rotate(-40deg)translateY(-420px)rotate(40deg);
}
to {
transform: rotate(78deg)translateY(-365px)rotate(-78deg);
}
}
.laravel-js-icon {
top: 390px;
}
@-webkit-keyframes my-sql-icon {
from {
-webkit-transform: rotate(-10deg) translateY(-420px) rotate(10deg);
}
to {
-webkit-transform: rotate(78deg) translateY(-375px) rotate(-78deg);
}
}@-keyframes my-sql-icon {
from {
transform: rotate(-10deg)translateY(-420px)rotate(10deg);
}
to {
transform: rotate(78deg)translateY(-375px)rotate(-78deg);
}
}
.my-sql-icon {
top: 410px;
}
@-webkit-keyframes mongodb-icon {
from {
-webkit-transform: rotate(30deg) translateY(-390px) rotate(-30deg);
}
to {
-webkit-transform: rotate(-80deg) translateY(-400px) rotate(80deg);
}
}@-keyframes mongodb-icon {
from {
transform: rotate(30deg)translateY(-390px)rotate(-30deg);
}
to {
transform: rotate(-80deg)translateY(-400px)rotate(80deg);
}
}
.mongodb-icon {
top: 400px;
}
@-webkit-keyframes post-gray-sql-icon {
from {
-webkit-transform: rotate(70deg) translateY(-370px) rotate(-70deg);
}
to {
-webkit-transform: rotate(-80deg) translateY(-400px) rotate(80deg);
}
}@-keyframes post-gray-sql-icon {
from {
transform: rotate(70deg)translateY(-370px)rotate(-70deg);
}
to {
transform: rotate(-80deg)translateY(-400px)rotate(80deg);
}
}
.post-gray-sql-icon {
top: 375px;
}
@-webkit-keyframes amazons3-icon {
from {
-webkit-transform: rotate(-76deg) translateY(-485px) rotate(76deg);
}
to {
-webkit-transform: rotate(74deg) translateY(-450px) rotate(-74deg);
}
}@-keyframes amazons3-icon {
from {
transform: rotate(-76deg)translateY(-485px)rotate(76deg);
}
to {
transform: rotate(74deg)translateY(-450px)rotate(-74deg);
}
}
.amazons3-icon {
top: 440px;
}
@-webkit-keyframes android-icon {
from {
-webkit-transform: rotate(-40deg) translateY(-455px) rotate(40deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-445px) rotate(-76deg);
}
}@-keyframes android-icon {
from {
transform: rotate(-40deg)translateY(-455px)rotate(40deg);
}
to {
transform: rotate(76deg)translateY(-445px)rotate(-76deg);
}
}
.android-icon {
top: 424px;
}
@-webkit-keyframes google-cloud-icon {
from {
-webkit-transform: rotate(-10deg) translateY(-405px) rotate(10deg);
}
to {
-webkit-transform: rotate(76deg) translateY(-440px) rotate(-76deg);
}
}@-keyframes google-cloud-icon {
from {
transform: rotate(-10deg)translateY(-405px)rotate(10deg);
}
to {
transform: rotate(76deg)translateY(-440px)rotate(-76deg);
}
}
.google-cloud-icon {
top: 400px;
}
@-webkit-keyframes git-icon {
from {
-webkit-transform: rotate(40deg) translateY(-325px) rotate(-40deg);
}
to {
-webkit-transform: rotate(-76deg) translateY(-380px) rotate(76deg);
}
}@-keyframes git-icon {
from {
transform: rotate(40deg)translateY(-325px)rotate(-40deg);
}
to {
transform: rotate(-76deg)translateY(-380px)rotate(76deg);
}
}
.git-icon {
top: 335px;
}
@-webkit-keyframes iOS-icon {
from {
-webkit-transform: rotate(70deg) translateY(-350px) rotate(-70deg);
}
to {
-webkit-transform: rotate(-76deg) translateY(-390px) rotate(76deg);
}
}@-keyframes iOS-icon {
from {
transform: rotate(70deg)translateY(-350px)rotate(-70deg);
}
to {
transform: rotate(-76deg)translateY(-390px)rotate(76deg);
}
}
.iOS-icon {
top: 363px;
}
}@media screen and (max-width:1026px) {
.banner-sec {
height: 80vh;
}
.banner-content-sec {
bottom: 30px;
}
.banner-content-sec .main-banner-heading {
font-size: 40px;
}
.banner-content-sec p {
font-size: 22px;
}
.nep-path {
height: 122%;
top: 32%}
.ura-path {
top: 44%;
height: 104%;
left: 8%;
width: 84%}
.sat-path {
width: 66%;
top: 56%;
left: 17%;
height: 80%}
}
.webservices1-icon.icon-opc {
position: absolute;
top: 842px;
left: 50%;
margin: -35px 0 0;
-webkit-animation: google-cloud-icon 20s  infinite linear alternate;
animation: google-cloud-icon 20s infinite linear alternate;
z-index: 200;
}
.photoshop-icon.icon-opc{
position: absolute;
top: 842px;
left: 50%;
margin: -50px 0 0;
-webkit-animation: vue-icon 20s infinite linear alternate;
animation: vue-icon 20s infinite linear alternate;
z-index: 200;
}
.illustrator-icon.icon-opc{
position: absolute;
top: 830px;
left: 50%;
margin: -50px 0 0 -15px;
-webkit-animation: bootstrap-icon 60s infinite linear alternate;
animation: bootstrap-icon 60s infinite linear alternate;
z-index: 200;
}
.swift1-icon.icon-opc {
position: absolute;
top: 647px;
left: 50%;
margin: -30px 0 0;
-webkit-animation: swift1-icon 50s infinite linear alternate;
animation: swift1-icon 20s infinite linear alternate;
z-index: 200;
}
@-webkit-keyframes swift1-icon {
from {
-webkit-transform: rotate(-58deg) translateY(-665px) rotate(50deg);
}
to {
-webkit-transform: rotate(60deg) translateY(-640px) rotate(-60deg);
}
}@-keyframes swift1-icon {
from {
transform: rotate(-45deg)translateY(-665px)rotate(50deg);
}
to {
transform: rotate(60deg)translateY(-665px)rotate(-60deg);
}
}
.postman-icon.icon-opc {
position: absolute;
top: 720px;
left: 50%;
margin: -14px 0 0;
-webkit-animation: my-sql-icon 10s infinite linear alternate;
animation: my-sql-icon 10s infinite linear alternate;
z-index: 200;
}
.Sketchapp-icon.icon-opc {
position: absolute;
top: 650px;
left: 50%;
margin: -14px 0 0;
-webkit-animation: git-icon 60s infinite linear alternate;
animation: git-icon 60s infinite linear alternate;
z-index: 200;
}