@charset "UTF-8";

body { background:#000;font-family: 'herokidregular'; color: #fff;}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {font-family: 'herokidbold_expanded';}


nav { margin-top:0px; font-family: 'Barlow Condensed', sans-serif;}
.navbar:before, .navbar:after {   height: 4px; width: 100%;content: ""; position: absolute;  left: 0;  top: 0;
background: rgb(255,217,84);
background: -moz-linear-gradient(74deg, rgba(255,217,84,1) 0%, rgba(255,101,234,1) 100%);
background: -webkit-linear-gradient(74deg, rgba(255,217,84,1) 0%, rgba(255,101,234,1) 100%);
background: linear-gradient(74deg, rgba(255,217,84,1) 0%, rgba(255,101,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd954",endColorstr="#ff65ea",GradientType=1);

}
.navbar:after {     height: 4px; width: 100%;content: ""; position: absolute;  left: 0;  bottom: 0; top: auto;}
#mainNav .navbar-nav .nav-item .nav-link{font-family: 'Barlow Condensed', sans-serif;font-size: 25px;    color: #f3f3f3;}
#mainNav .nav-link {
    font-weight: 700;
    margin-left: 2rem;
    margin-right: 2rem;
}
#mainNav .navbar-nav .nav-item .nav-link:hover{color: #a837ff !important;}

.headtext { list-style:none; padding:0; }
.headtext li { }
.headtext li:nth-child(1) { font-family: 'herokidregular'; font-size: 4rem;line-height: 4rem;}
.headtext li:nth-child(2) { font-family: 'herokidbold_expanded'; font-size: 7rem;line-height: 7rem;
background: #A837FF;
background: -webkit-linear-gradient(to right, #A837FF 0%, #4601E0 100%);
background: -moz-linear-gradient(to right, #A837FF 0%, #4601E0 100%);
background: linear-gradient(to right, #A837FF 0%, #4601E0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.headtext li:nth-child(3) { font-family: 'herokid_italicextralight'; font-size: 3rem; padding-left: 23px;line-height: 3rem;    margin-top: -10px; }
.headtext li:nth-child(4) {}
.headtext li:nth-child(4) img { margin-bottom:7%;max-width: 600px; background: #000;width: 100%; }
.headtext li:nth-child(5) img {max-width: 780px; width: 100%;  }


header.masthead {  background-image: url('../images/mainbg.jpg');background-repeat: no-repeat;  background-size: cover;    background-attachment: fixed;}

  .sectwo {  
    background-image: url('../images/section2bg.webp');     
    background-repeat: no-repeat;  
       background-position-y: bottom;
    background-position-x: center;padding-bottom: 0;
  }

.header2 { color:#a837ff; }
.header2 li:nth-child(1) {font-family: 'herokidregular'; font-size: 50px; }
.header2 li:nth-child(1) span{font-family: 'herokidbold_expanded';   
background: #912AF1;
background: -webkit-radial-gradient(ellipse farthest-corner at bottom left, #912AF1 0%, #E556F0 100%);
background: -moz-radial-gradient(ellipse farthest-corner at bottom left, #912AF1 0%, #E556F0 100%);
background: radial-gradient(ellipse farthest-corner at bottom left, #912AF1 0%, #E556F0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header2 li:nth-child(2) { font-family: 'herokidbold_expanded'; text-transform: uppercase;font-size: 50px; 
  background: #A837FF;
background: -webkit-linear-gradient(to right, #A837FF 0%, #4601e0 100%);
background: -moz-linear-gradient(to right, #A837FF 0%, #4601e0 100%);
background: linear-gradient(to right, #A837FF 0%, #4601e0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header2 li:nth-child(3) { height:500px; position:relative;      }
.stuck {position: absolute;  z-index: 1;    top: 9%;  left: 20%;width: 100%;   max-width: 640px;}

.cmp {
  position: absolute;  z-index: 2;
  left: -18%;
    bottom: 20%;
    height: 400px;
  width: auto;
  animation: rev1 5s ease-in-out infinite;
}
@keyframes rev1 {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  50% {
    transform: translateX(15px) translateY(5px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}


/************************************************************/


.secsix {  background-image: url('../images/sec6bg.jpg');background-repeat: no-repeat;  background-size: cover;     background-attachment: fixed;}
.sec6logo { margin-bottom:40px; }
.secsix h1{ color:#ff65ea; position: relative;font-family: 'herokidlight_expanded'; margin-bottom:40px; font-size: 50px;}
.secsix h1 span{z-index: 1; background:#000;    position: relative;    box-shadow: 0px 0px 37px #000;
    padding: 13px; }
.secsix h1:before{     background: #a837ff;border-radius: 50px;
    height: 3px;
    width: 50%;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: auto;
    z-index: 0; }

 .ourservices { border:1px solid #fff;  border-radius: 50px;padding: 8px;margin-bottom: 30px;
background: #12D36E;
background: -webkit-linear-gradient(to bottom right, #12D36E 0%, #A7EF2A 100%);
background: -moz-linear-gradient(to bottom right, #12D36E 0%, #A7EF2A 100%);
background: linear-gradient(to bottom right, #12D36E 0%, #A7EF2A 100%);
 }
 .ourservices h3 {    text-align: left; color: #000; font-family: 'herokidbold_expanded';font-size: 23px;}

/************************************************************/

.secthree {    border-top: 1px solid #636363; padding: 0px; position: relative;}
.secthree .leftbox{ width:43%; vertical-align: top;   display: inline-block;position: relative;}
.secthree .lefthandr {position:absolute;   width: 80%;width: 105%; top: 17%;left: -3%;}

.secthree .rightbox {vertical-align: top;   display: inline-block;width:57%; float:right; }
.secthree .rightbox .topright span{border-right: 1px solid #636363;font-family: 'herokidsemi_bold_condensed'; font-size: 5rem;   height: 100px;vertical-align: middle;  display: inline-block; padding-left: 20px; padding-right: 20px;}
.secthree .rightbox .topright span:nth-child(2) img{width: 55px;}
.secthree .topright { border-bottom: 1px solid #636363;  }
.secthree .topsect {font-family: 'herokidregular';border-bottom: 1px solid #636363;padding: 10px;  font-size: 2.5rem;}
.handright { position:relative; }
.handright .handr , .handright .handbg{ position:absolute; right:0; width: 89%;    margin-top: -4%;}
.handr { z-index:1; }
.handbg {z-index:0; }
.element1 {position:absolute; right:0; width: 80px;}

.tech {     position: absolute;
    width: 78%;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 4%; }




/************************************************************/


.secfour { padding-top: 2rem; color: #000;  padding-bottom: 0;background-image: url('../images/mainbg.jpg');background-repeat: no-repeat;  background-size: cover;    background-attachment: fixed;}

.just{   font-family: 'herokidregular';font-size: 4rem; color: #fff; margin-bottom: 8%;}
.just span{ display:block;font-family: 'herokidextrabold';
  background: #FAFE23;
background: -webkit-linear-gradient(to top right, #FAFE23 34%, #21D677 100%);
background: -moz-linear-gradient(to top right, #FAFE23 34%, #21D677 100%);
background: linear-gradient(to top right, #FAFE23 34%, #21D677 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
 }
.frame { position:relative;   }
.frame  h2{ position:absolute;z-index: 2; font-size: 4rem; top: 32%; left: 0; right: 0;     transform: rotate(-2deg); font-family: 'herokidbold_expanded';}
.frame  h3{ text-align: left;    padding-left: 134px; position:absolute;z-index: 2;font-size: 10rem;top: 53%;left: 0; right: 0;     transform: rotate(-2deg); color: #ff65ea;font-family: 'herokidregular';}
.frame  h3 span{    }
.frameimg  { position:relative; margin-bottom: -70px;  z-index: 1;}


/************************************************************/
.secfive { position:relative; background:#fff; color:#000;  background-image: url('../images/secfivebg.jpg');background-repeat: no-repeat; background-size: contain;    background-attachment: fixed;}
  .secfive:after {   height: 20px; width: 100%;content: ""; position: absolute;  left: 0;  bottom: 0;
background: rgb(218,121,215);
background: -moz-linear-gradient(50deg, rgba(218,121,215,1) 0%, rgba(213,123,212,1) 35%, rgba(33,214,119,1) 100%);
background: -webkit-linear-gradient(50deg, rgba(218,121,215,1) 0%, rgba(213,123,212,1) 35%, rgba(33,214,119,1) 100%);
background: linear-gradient(50deg, rgba(218,121,215,1) 0%, rgba(213,123,212,1) 35%, rgba(33,214,119,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#da79d7",endColorstr="#21d677",GradientType=1);

}
.secfive .banner-content-leftwrapper span{font-family: 'herokidsemibold_expanded';    font-size: 60px;}
.secfive .banner-content-leftwrapper h1{ color:#21d677;font-family: 'herokidbold_expanded'; font-size: 80px;}
.secfive .banner-content-leftwrapper p{font-family: 'herokidsemibold_expanded';font-size: 38px;}

/*****************************************************/
footer{  font-family: 'herokidsemi_bold_condensed'; }
.footermenu a{ color:#fff; line-height: 6rem; font-size: 1.7rem;text-decoration: none;}
.footermenu a img{ width: 35px;margin-right: 4px;}
.footerbg {
height: 4px;
  background: rgb(255,217,84);
background: -moz-linear-gradient(74deg, rgba(255,217,84,1) 0%, rgba(255,101,234,1) 100%);
background: -webkit-linear-gradient(74deg, rgba(255,217,84,1) 0%, rgba(255,101,234,1) 100%);
background: linear-gradient(74deg, rgba(255,217,84,1) 0%, rgba(255,101,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd954",endColorstr="#ff65ea",GradientType=1);
}

/******************************************************/
 

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}


/*********************************************************/

.wow {
   visibility: hidden;
}

/*********************************************************/

.hand2 { animation: hand2 5s ease-in-out infinite;}
.hand1 { animation: hand1 5s ease-in-out infinite;}

@keyframes hand1 {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  50% {
    transform: translateX(15px) translateY(5px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}
@keyframes hand2 {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  50% {
    transform: translateX(0px) translateY(10px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}


/*********************************************************/
  .rollerwrap{ width:500px; position:relative; overflow:hidden; }
  .roller1 { position:absolute; left: 0;z-index: 1;     
    -webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
  }

  .roller2 { position:absolute;left: 0; z-index: 2;
     -webkit-animation:spin 25s linear infinite reverse;
    -moz-animation:spin 25s linear infinite reverse;
    animation:spin 25s linear infinite reverse;
  }


  @-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

/*********************************************************/


@media (min-width: 1200px) {
.header2 li:nth-child(2) {font-size: 57px;}
.header2 li:nth-child(1) {font-size: 60px;}
.stuck {max-width: 720px;}
.cmp {left: -14%;}
}

@media (min-width: 992px) and (max-width: 1300px) { 
  .frame h2 {    font-size: 3rem;top: 40%;}.frame h3 {    font-size:6rem;top: 65%;text-align: center; padding-left: 0;}
.header2 li:nth-child(2) {    font-size: 50px;}
}
@media (min-width: 768px) and (max-width: 991px) { 
  
  .headtext li:nth-child(2) {font-size: 4rem;}
  .header2 li:nth-child(2) {font-size: 40px;}
  .stuck {    left: 32%;max-width: 500px}
  .secthree .rightbox .topright span {font-size: 3rem;    height: 74px;}
  .secthree .topsect {font-size: 1.5rem;}
  .handright .handr, .handright .handbg {margin-top: -9%;}
  .tech {    bottom: 0;}

  .just {font-size: 3rem;}
  .frame h2 {font-size: 2.5rem;}
  .frame h3 {font-size: 5rem;top: 63%;}
  .footermenu a {line-height: 3rem;}
}


@media (max-width: 767px) {

    header.masthead {background-position: center;}

    .headtext li:nth-child(1) {font-size: 2rem;  line-height: 2rem;}
  .headtext li:nth-child(2) {font-size: 2.2rem;line-height: 4rem;}
  .headtext li:nth-child(3){font-size: 1.5rem; padding-left: 0;  line-height: 2rem;}

  .sectwo {    padding: 2rem 0;}
  .header2 li:nth-child(1) { font-size: 20px;}
  .header2 li:nth-child(2) { font-size: 16px;}
  .stuck {  left: 0;
    max-width: 318px;
    top: 4%;
    right: 0;
    margin: 0 auto;}
  .cmp {width: 100%;
    max-width: 318px;
    height: auto;
    animation: none;
    margin: 0 auto;
     left: 0;  bottom: 10%;
    right: 0;}
  .header2 li:nth-child(3) {    height:400px;}

  .rollerwrap { max-width:318px; margin: 0 auto; }
  .secfive { text-align:center; }
  .sectwo { text-align:center; }

  .secthree .rightbox .topright span {    font-size: 2rem;
    height: 46px;}
    .secthree .rightbox .topright span:nth-child(2) img {
    width: 30px;
}
.secthree .topsect {
    font-size: 1rem;
}
.tech { bottom: -32%; }
.secthree .lefthandr {top: 37%;left: -9%;}
  .handright .handr, .handright .handbg {margin-top: -9%;}
  

  .just {font-size: 1.5rem; margin-bottom: 3rem;}
  .frame h2 {font-size: 1.8rem;}
  .frame h3 {font-size: 2rem;top: 63%; text-align: center; padding: 0}
  .footermenu a {line-height: 3rem;}


    .ourservices h3 {font-size: 16px;}
    .footermenu a {line-height: 4rem;}
 

    .secfive .banner-content-leftwrapper p {    font-size: 20px;}
    .secfive .banner-content-leftwrapper h1 {font-size: 30px;}
    .secfive .banner-content-leftwrapper span {font-size: 34px;}

    .secsix {    padding: 2rem 0;}

    .ourservices { align-items: center !important;}
    .secfour {padding-top: 4.5rem;}

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

  .frame {  width: 318px;    margin: 0 auto;}
  .frame h2 {top: 57%;font-size: 1.2rem;}
  .frame h3 { top: 104%;}
}