@font-face {
  font-family: poppins;
  src: url(./font/Poppins-ExtraBold.ttf);
}
@font-face {
  font-family: poppins-regular;
  src: url(./font/Poppins-Regular.ttf);
}  
html { scroll-behavior: smooth; }
body {
  font-family: poppins-regular;
  margin: 0;
  overflow-x: hidden;
}

nav {
  position: fixed;
  width: 100%;
  /* height:62px; */
  top: 0px;
  left: 0px;
  z-index: 111;
}

.mobile{
  display: none;
}


.main {
  position: relative;
  display: flex;
  margin-top: 4px;
  margin-block-end: 5px;
  align-items: center;
}

.main1 {
  position: relative;
  display: flex;
}

.btn1 {

  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top:  11rem;

}


.icon {
  display: flex;
  padding-left: 6%;
  flex-grow: 2;
}

.menu {

  /* right: 50px;
  top: 30px;
  width: 40%;
  padding-right: 6%; */
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  flex-grow: 1;
  align-items: center;

}
.menu > .contact{
  padding: 2%;
}
.logo {
  width: 168px;
  height: 39px;
}

.contact {
  background-color: rgb(255, 255, 255);
  padding: 1%;
  color: #0EB982;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;

}

.link1 {
  background-color: rgb(255 255 255 / 92%);
  padding: 9px;
  /* width: 44%; */
  color: #0EB982;
  border-radius: 13px;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  z-index: 1;
}

.links {
  text-decoration: none;
  padding: 5%;
  color: #fff;
}

.banner {
   /* position: absolute; */
   /* position: relative; */
   width: 100%;
   height: 46rem;
   top: 0;
   left: 0;
   background-image: url("./images/Ellipse 1.svg");
   z-index: -1;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-position: 54% 100%;
   
 

}

.banner1 {
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 9rem;
  margin-top: 2%;
 

}
.banner1_mobile{
  position: relative;
  display: none;
  height: 20rem;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: nowrap;
 

}

.banner2 {
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: nowrap;

}

.brands {
  display:inline-block;
  margin-top: 8%;
  width: 100%;
  text-align: center;
  font-family: poppins;
  font-size: 2.5vw;
  color:#f5f5f5;
  font-weight: bolder;


}

.brief{
  position: relative;
  color: #979797;
  text-align: center;
  display: flex;
  width: 53%;
  margin: auto;
  justify-content: center;
  font-family: poppins-regular;
}
.short_brief{
  position: relative;
  color: #979797;
  text-align: center;
  display: flex;
  width: 83%;
  margin: auto;
}
.info {
  color: #fff;
  text-align: center;
  font-family: poppins-regular;
  
}

.intro {
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
}

.head1 {
  margin-bottom: 2%;
  background-image: url("./images/Ellipse 58.svg");
  display: flex;
  justify-content: space-evenly;
  margin-top: 4%;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: xx-large;
  font-weight: 100;
  font-family: poppins;
}
.head2{
  margin-bottom: 2%;
 
  display: flex;
  justify-content: space-evenly;
  margin-top: 4%;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: xx-large;
  font-weight: 100;
  font-family: poppins;
}
.heading{
  margin-bottom: 0
}
.upper-img{
  background-image: url("./images/Vector.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.play {
  /* background-image: url('./images/Ellipse 2.svg'); */
  z-index: -1;
  position: relative;
  /* display: none; */
  /* margin-top: 9rem; */
  height: 91vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 3rem;

}
[data-aos="example-anim2"] {
  animation-name: change-radius;
  z-index: -40;
  animation-duration: 2.5s;
  opacity: 0;
   
  transform: translateY(-100%);
  &.aos-animate {
      background-image: url('./images/Ellipse 2.svg')  ;
      opacity: 1;
      transform: translateY(0);
  }
}
/* .playamina {
  animation-name: change-radius;
  z-index: -40;
  animation-duration: 1.5s;
} */

@keyframes change-radius {

  0% {
      border-top-left-radius: 0%;
      border-top-right-radius: 0%;
      background-color: #0EB982
  }

  100% {
      border-top-left-radius: 22%;
      border-top-right-radius: 22%;
      background-color: #0EB982;
      
  }

}

.playbrands {
  display: block;
  top: 18%;
  width: 100%;
  text-align: center;
  font-family: poppins;
  font-size: 56px;
  color: #fff;
  position: relative;
  font-weight: bolder;
}
.slide{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 8%;
  margin-bottom: 8%;
  column-gap: 2%;
  flex-wrap: wrap;
  
  

}
.slide1{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 8%;
  margin-bottom: 8%;
  height: 30%;
  flex-wrap: wrap;
  position: relative;
  top: 6rem;
}
.sub{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* width: 25%; */
  align-items: center;
  border-radius: 12px;
  max-width: 22%;



}

.sub:hover{
  box-shadow: 0px 2px 5px hsl(161, 86%, 39%, 1)
  
  
}

.sub2{
 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30%;
  align-items: center;
  text-align: center;
  color: #fff;
  font-family:  poppins;
}
.sub3{
 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: #fff;
  font-family:  poppins;
}
.sub2_image{
  width: 5rem;
}
.sub_border{
  border-right: solid;
  border-left: solid;
  flex-grow: 0;
}
.upper{
  display: flex;
  margin-top: 8%;
  /* overflow: hidden; */

  height: 5%;
}
.lower{
  display: flex;
  margin-top: 2%;
  margin-bottom: 5%;

  /* overflow: hidden; */

}
.play3{
  background-color: #0EB982;
  /* height: 100px; */
  height: 16rem;
  color: #fff;
  
}
.scrollable-container {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.meter {
  writing-mode: vertical-lr; /* Vertical writing mode */
          transform: rotate(180deg); /* Rotate the meter element */
          /* transform-origin: bottom;  */
          width: 10px; /* Set the width as needed */
          height: 10rem;
          background-color: #979797;
}
.vl{
position: relative;
border-left: 6px solid rgb(244, 252, 244);
height: 3rem;
left: 0.8px;
}
.vl:before{
  content: '';
  position: absolute;
  border-left: 6px solid #0EB982;
  animation-name: cvl;
  animation-duration: .5s ;
  right: 1px;

  height: 3rem;
} 
@keyframes cvl {
  0%{
      height: 0rem;
  }
  100%{height: 3rem;}

}
@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.count {
  transition: --num 5s;
  counter-set: num var(--num);
  font: 804 22px system-ui;
}
.count::after {
  content: counter(num);
}
[data-aos="count-anim2"] {
  
   
  transform: translateY(-100%);
  &.aos-animate {
      
    --num: 10;
      
  }
}
[data-aos="count1-anim2"] {
  
   
  transform: translateY(-100%);
  &.aos-animate {
      
    --num: 5;
    
  }
}
[data-aos="count2-anim2"] {
  
   
  transform: translateY(-100%);
  &.aos-animate {
      
    --num: 22500 ;
      
  }
}
.unit{
  font-size: 22px;
}
.scroll_line{
  background-color:#fff;
  
}
.scroll_line1{
  background-color:#fff;
  display: none;
  
}
.left{
  display: flex;
  flex-grow: 1;
  width: 0;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: flex-end;
  color: #0EB982;
  font-family:  poppins;
  top: 37%;

}
.mid{
  display: flex;
  flex-direction: column;
  background-color:hsla(0, 0%, 87%, 1);
}
.right{
 
  display: flex;
  flex-grow: 1;
  width: 0;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  color: #0EB982;
  font-family:  poppins;
  position: relative;
  /* left: 40px; */
  top: 37%;

}
.main2{
  position: relative;
  display: flex;
  height: 50vh;
}
.right_short_brief
{
  position: relative;
  color: #979797;
  text-align: left;
  display: flex;
  margin: auto;
 font-family:  poppins-regular;
}
.sub_mid{
  display: flex;
  width: 6px;
  height: 0;
          background-color: hsla(161, 86%, 39%, 1);
          ; /* Line color */
          /* position: absolute; */
          transition: height 1s ease-in-out;
}
.end-circle {
  display: flex;
  width: 2rem;
  height: 2rem;
  background-color:solid hsla(0, 0%, 87%, 1); /* Circle color */
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  /* top: 42%; */
  transform: translateX(-50%);
  opacity: 1; /* Initially invisible */
  transition: opacity 0.5s ease-in-out; /* Animation transition */
}
.back_cover{
  position: relative;
  background-image: url('./images/Ellipse\ 70.svg');
  background-size: 35%;
  background-repeat: no-repeat;
  background-position-x: 38%;
  /* z-index: -1; */

}
.back_cover_left{
  position: relative;
  background-image: url('./images/Ellipse\ 70.svg');
  
  
  background-position-y: 100%;
  background-position-x: 27%;
  background-repeat: no-repeat;
  background-size: 35%;
}
.img-right{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 3%;
  

}
.img-left{
  position: absolute;
  height: 96%;
  width: 100%;
  display: block;
  right: 13%;


}
.content-right{
  position: relative;
  margin-left: 14%;
  top: 8%;
}
.sub_count{
  font-family: poppins-regular;
}
.content-left{
  position: relative;
  right: 14%;
  top: 43%;
}

.content-left > .right_short_brief{
  margin-left: 23% !important;
  text-align: right;
}

.play4
{
  position: relative;
  margin-top: 9% !important;
  /* height: 100px; */
  margin-top: 0%;
  height: 38vh;
  padding: 10%;
  color: #fff;
}
.play4_sub{
  background-color: #0EB982;

  height: 39vh;
  border-radius: 20px;
}
.earn{
  display: flex;
  
  flex-direction: row;
  align-content: flex-end;
  flex-wrap: wrap;
  position: relative;
  width: 75%;
  justify-content: space-evenly;
  align-items: center;


}
.earn-left{
  display: flex;
  flex-grow: 1;
}
.earn-right{
  display: flex;
  
  height: 27vh;
  /* background-color: #fff !important; */
  
  
}
.earn_brief{
  font-size: 18px;
  position: relative;
  color: #ffffff;
  text-align: left;
  display: flex;
  width: 79%;
  margin-left: 9%;
  margin-block-start: 1px;

}
.earn-image{
  position: relative;
  width: 40vw;
  height: 52vh;
  top: -13rem;
  left: 74%;

}
.earn-content{
  
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  top: 4.5vh;
}
.img-banner1{
 
  width: 47%;
  position: absolute;
  top: -16vh;
  max-width: 41rem;
}
/* .img-banner2{
  width: 43%;
  position: relative;
  bottom: 16rem


  

} */
.query > .footer-heading
{
  left: 1%;
}
.img-banner2{
  background-image: url("./images/Component 1.svg");
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 56%;
  background-repeat: no-repeat;
  background-position: center 78%;
  position: absolute;
}
.footer-background{
  background-image: url("./images/Ellipse 2.svg");
  z-index: -1;
/* position: relative; */
  height: 37rem;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.footer-main{
  position: relative;
  display: flex;
  top:35%;
  /* flex-wrap: wrap; */
  
}
.footer-left{

  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  position: relative;
  left: 3%;
}
.footer-mid{

  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}
.footer-right{

  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}
.brief-footer{
font-family: 'poppins-regular'; 
color: #fff;
position: relative;

width: 64%;
margin-left: 7%;
}
.footer-mid > div > .brief-footer {
  width: 100%;
}
.footer-heading{
  position: relative;
  bottom: 7%;
  left: 8%;
  color: #fff;
  font-family: 'poppins';
}
.footer-content{
  display: block;
  width: 54%;
}
.alert{
  background-color: #fff;
    color: #0EB982;
    border-radius: 6px;
    display: none;
    width: 100%;
    position: relative;
    right: 16%;
}
input ,textarea{
  position: relative;
  width: 75%;
  padding: 1% 3px;
  margin: 4px 0;
  display: inline-block;
  border: 2px solid #ffffff;
  box-sizing: border-box;
  color: #fff;
  border-radius: 6px;
  font-size: 21px;
  height: 55px;
  background-color: #ffffff05;
  
}
::placeholder {
  color: #dae4d3;
  text-align:left;
  font-size: 13px;
  padding-left: 5px;
  font-family: poppins-regular;
}
.query{
  width:80%;
  height: 20rem;

}
.contact1{
  background-color: rgb(255, 255, 255);
  display: block;
  /* padding: 1%; */
  font-family: 'poppins-regular';
  height: 42px;
  width: 77px;
  color: #0EB982;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  border-color: #ffffff00;
  font-family: 'poppins';
}
.is-mobile
{
  display: none;
}
.mobile-margin{
  margin-top: 166vh; 
}
span.detial {
  position: relative;
  left: 7%;
  width: 90%;
  text-align: left;
  display: inline-grid;
}
.app-link {
  width: 11rem;
  display: flex;
  position: relative;
  left: 9%;
  height: 34px;
  background-color: #fff;
  justify-items: center;
  align-items: center;
  border-radius: 9px;
  text-decoration: none;
  justify-content: center;
  gap: 15px;
  color: hsla(0, 0%, 32%, 1);
}
.copy-right{
  display: flex;
  position: relative;
  top: 37%;
  flex-direction: row;
  justify-content: space-around;
  border-top: solid #fff;
  color: #fff;
  width: 92%;
  left: 4%;
  justify-content: space-between;
  font-family: poppins-regular;
}
.copy{
  display: flex;
  position: relative;
}
.pop_nav{
  position: absolute;
  display: grid;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.mobile_main{
  position: fixed;
  display: none;
  top: 15px;
  inset: 0;
  background-color: rgb(248, 248, 248);
  /* justify-items: stretch; */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  font-family: poppins-regular;
  left: 22%;
  z-index: 998;
  box-shadow: -20px -2px 5vw 252vw #00000080;
  /* justify-items: stretch; */
}
.close{
  position: absolute;
  display: block;
  top: 7.5%;
  right: 2%;
}
.mobile_menu{
  
  display: flex;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  top: 10%;
  position: relative;
  font-family: poppins-regular;
  width: 90%;




 
}
.mobile_main > .icon{
  flex-grow: 0 !important;
  margin-top: 18%;
}
.mobile_links{
  text-decoration: none;
  padding: 5%;
  color: #434040;
  font-family: poppins-regular;
}
.mobile_contact{
  background-color: rgb(255, 255, 255);
  padding: 6% 16% 9%;
  background-color: #0EB982;
  color: #f3f5f4;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 7%;
  border-bottom-left-radius: 58px;
  border-bottom-right-radius: 35px;
  border-top-right-radius: 35px;
}




@media screen and (max-width: 700px)  {
  .info {
      color: #fff;
      text-align: center;
      font-family: poppins-regular;
      position: relative;
      width: 80%;
      left: 10%;
      font-size: 5.5625vw;
  }
  .vl:before{
    right: 0;
  }
  .mobile{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  right: 5%;
  color: #fff;
  }
  .mobile_links {
      text-decoration: none;
      padding: 5%;
      color: #434040;
      font-family: poppins-regular;
      border-bottom: 2px solid #7a7575e0;
      width: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .sub{
      max-width: 82%;
  }
  .earn {
    width: 100%;
  }
  .earn-right
  {
    display: none;
  }
  .earn_brief {
    width: 91%;
  }
  input, textarea{
    width: 94%;
  }
  .banner{
      height: 100%;
      background-position: 54% 0rem;
  }
  .banner1{
      display: none;
  }
  .banner1_mobile{
      display: flex;
  }
  .img-banner1{
      width: 93%;
  position: absolute;
  top: 86px;
  max-height: 23rem;
  }
  .query > .footer-heading {
    left: 8%;
}
  .scroll_line{
      display: none;
      
  }
  .scroll_line1{
      display: block;
    
  }
  .content-right {
    position: relative;
    margin-left: 9%;
    top: 8%;
    padding-right: 7%;
}
  .img-right{
    top: 8%;
    height: 72%;
  }
  .left{
      flex-grow: 0.1323;
  }
  .end-circle{
      left: 12.4%;
  }
  .sub3{
      display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  color: #fff;
  right: 38%;
  font-family: poppins;
  }
  .head_mobile{
      position: relative;
  top: 44px;
  }
  .heading{
      font-size: 26px;
  }

  .back_cover{
      background-image: url('./images/Ellipse\ 74.svg');
      background-size: 35%;
      background-repeat: no-repeat;
      background-position-x: 100%;
  }
  .mess-form{
    position: relative;
    left: 8%;
  }
  .footer-main{
      flex-direction: column;
      width: 90%;
      top: 118px;
  
  }
  .footer-background{
      height: 54rem;
  }
  .brief-footer{
      width: 100%;
  }
  .earn-image{
      position: relative;
  width: 35vw;
  height: 52vh;
  top: -41vh;
  left: 73%;

  }
  .query {
      width: 100%;
  }
  form{
      position: relative;
      left: 8%;
  }
  .copy-right{
      top:16%;
  }
  .menu{
      display: none;
  }
  .play{
      display: none;
  }
  .intro{
      position:relative;
      margin-top: 11rem; 
      overflow-x: hidden;
      overflow-y: hidden;
  }
  .brands{
      top:  2rem;;
      font-size: 9vw;
      position: relative;
      width: 76%;
      left: 12%;
      margin-top: 15%;
  
  }
  .sub2_image{
      width: 14%;
  }
  .app-link{
    width: 10rem;
  }

}