@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

body {
    background-image: url(../images/hub-bg-img.jpg) ;
    font-family: 'Roboto', sans-serif;
    background-size: cover;
    background-repeat: round;
}

.back-but-sec a {background: #8ec63f;padding: 7px 16px;display: inline-block;color: #000;text-transform: uppercase;border-radius: 5px;}

.back-but-sec i {margin-right: 6px;}

.back-but-sec {margin-top: -34px;}

#bubbles { padding: 10px 0 }
.bubble {
    width: 60px;
    height: 60px;
    background: #8ec63f;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
}

.x1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.2;
  background: #8ec63f;
    -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
    -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 {
    left: 350px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 {
    left: 470px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 {
    left: 150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3; 
    -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
    -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds { 
    0% { 
        top: 500px;
    }
    100% { 
        top: -500px;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes moveclouds {     
    0% { 
        top: 500px;
    }

    100% { 
        top: -500px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}
@-o-keyframes moveclouds {
    0% { 
        top: 500px;
    }
    100% { 
        top: -500px;
    }
}

@-o-keyframes sideWays {
    0% {
        margin-left:0px;
    }
    100% {
        margin-left:50px;
    }
}
.landing-com-div-sec p{
    color: #fff;
}



.static-txt h4{
    font-family: 'Abril Fatface', cursive;
    color: #fff;
    font-size: 45px;
}
.landing-com-div-sec {text-align: center;
    background: #0270bf url(../images/counter_bg7.png);
    border: 1px solid #a6e84a;border-radius: 10px;padding: 15px 30px;
    margin: 0 100px;
}

section.coming-sec {
    padding-top: 90px;
}

.landing-com-div-sec a{
    color: #fff; 
}

.landing-com-div-sec a:hover{
    color: #fff; 
    text-decoration: none;
}

@media only screen and (min-width: 320px) and (max-width: 767px){ 

.wrapper .static-txt{
    font-size: 40px;
}
div#bubbles {
    display: none;
}
section.coming-sec {
    padding-top: 40px;
    padding-bottom: 40px;
}
.land-hed-logo-sec img{
    width: 100%;
}
.landing-com-div-sec{
    margin:0;
}

.static-txt h4{
    font-size: 35px;
}
}