@charset "utf-8";
/* CSS Document */

/* .banner-wrapper {
background: url("../images/banner/game-banner.jpg") no-repeat top center;
}
     */

/* --------------------https://codepen.io/asfarmed/pen/zYQYMy----------------------- */

     .banner-wrapper{display: flex; align-items: center; justify-content: center;
      background: url("../images/banner/game-banner.jpg") no-repeat top center;
      background-color: #165F68 !important;
    }

     .waviy {
      position: relative;
      -webkit-box-reflect: below -35px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
      font-size:240px;
      line-height:180px;
      font-weight:700;
      margin-top: 12%;
    }
    .waviy span {
      position: relative;
      display: inline-block;
      color: #fff;
      text-transform: uppercase;
      animation: waviy 1.5s infinite;
      animation-delay: calc(0.25s * var(--i));
      text-shadow: 5px 5px 0 rgb(0, 27, 43);
    }

   

    @keyframes waviy {
      0%,
      40%,
      100% {
        transform: translateY(0);
      }
      20% {
        transform: translateY(-35px);
      }
    }


    .waviy span:after{
      content: attr(data-shadow);
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: -1;
      text-shadow: none;
      background-image: linear-gradient(45deg, transparent 45%, white 45%, white 55%, transparent 0);
      background-size: 10px 10px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shadowAnimation 15s linear infinite;
  }
  
  @keyframes shadowAnimation{
      0% {
          background-position:100% -100%;
      }
  }








.item-animation {animation: 4s qodef-float infinite ease-in-out; 
position: absolute;

}

.obj {animation-delay: 1s; left:25%; width: 40px; top:180px;}
.obj1 {animation-delay: 2s; right:35%; width: 60px; top:120px; }


    @keyframes qodef-float {
      0% {
          transform: translateY(0)
      }
  
      50% {
          transform: translateY(16px)
      }
  
      100% {
          transform: translateY(0)
      }
  }  
  
  .game-kids {
    width: 90px; /* Or whatever width you need */
    bottom: 0;
    position: absolute;
    animation: right-left-flip 15s linear infinite; /* Updated animation name */
  }
  
  @keyframes right-left-flip {
    0% {
      left: 100%;
      transform: scaleX(1); /* Start right, no flip */
    }
    49.99% {
      left: 0;
      transform: scaleX(1); /* Approaching left, no flip */
    }
    50% {
      left: 0;
      transform: scaleX(-1); /* Flip at the left end */
    }
    50.01% {
      left: 0;
      transform: scaleX(-1); /* Immediately after flip, still at left */
    }
    99.99% {
      left: 100%;
      transform: scaleX(-1); /* Approaching right, still flipped */
    }
    100% {
      left: 100%;
      transform: scaleX(1); /* Flip at the right end */
    }
  }

/*----------------------------------    */
    


.box{ margin: 0 auto 40px; width:100%;  border-radius: 15px; cursor: pointer;}   
.box .box-img{display: block; height: auto; width: 100%; margin: 0px auto 10px; border-radius: 15px; border:1px #c8c8c8 solid; /*transition: 0.25s;*/
  transition-duration: 1s;}  

.box .title-wrapper{padding: 0 10px; display: flex; justify-content: space-between; align-items: center;} 

.box .title{font-size: 18px; line-height: 30px; font-weight: 500;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.box a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 85%; color: var(--secondry-color);}

.box .title-wrapper .share{width:15px; border: none;}
.box .title-wrapper .share img{vertical-align: middle; cursor: pointer;}

@media (max-width: 1400px) {.waviy{ margin-top:13% !important;
  font-size:180px; line-height:170px;}
  .game-kids { width: 80px; bottom: 8%;}
}

@media (max-width: 1100px) {.waviy{ margin-top:15% !important;
font-size:170px; line-height:150px;}
}

@media (max-width: 930px) {.waviy{ margin-top:18% !important;
  font-size:160px; line-height:140px;}
  .game-kids { width: 70px}
  }



@media (max-width:720px){.banner-wrapper{background: url("../images/banner/game-banner-mob.jpg") no-repeat bottom center;}
.waviy {
  font-size:150px;
  line-height:100px;
  margin-top: 20% !important;}

  .waviy span:after{
    top: 8px;
    left: 8px;
    background-size:7px 7px;
}
.game-kids {animation: right-left-flip 8s linear infinite; /* Updated animation name */
}

}


@media (max-width:640px){
.waviy {
  font-size:110px;
  line-height:80px;
  margin-top: 23% !important;}

  .obj {left:15%;}
.obj1 {right:15%;}

}

@media (max-width:520px){
  .waviy {
    font-size:80px;
    line-height:90px;
    margin-top: 30% !important;}
    .game-kids {width: 60px;}
  }


  @media (max-width:390px){
    .waviy {
      font-size:75px;
      line-height:90px;
      margin-top:40% !important;}
    
    }