.desktop {
  position: relative;
  max-width: 1440px;
  margin: auto;
  overflow: hidden;
 }
 
 .desktop .div {
  max-width: 1440px;
  margin: auto;
  position: relative;
 }
 
 .desktop .overlap {
   position: absolute;
   width: 4341px;
   height: 3160px;
   top: -748px;
   left: -2072px;
 }
 
 .desktop .gradients {
   position: absolute;
   width: 4341px;
   height: 2876px;
   top: 0;
   left: 0;
 }
 
 .desktop .overlap-group {
   position: relative;
   height: 4088px;
   top: -218px;
   left: 240px;
 }
 
 .desktop .group {
   position: absolute;
   width: 1778px;
   height: 1677px;
   top: 1481px;
   left: 2300px;
   transform: rotate(62.8deg);
 }
 
 .desktop .overlap-2 {
   position: relative;
   width: 2221px;
   height: 1770px;
   top: -30px;
   left: -463px;
 }
 
 .desktop .overlap-group-wrapper {
   position: absolute;
   width: 1236px;
   height: 1228px;
   top: 254px;
   left: 735px;
   transform: rotate(40.58deg);
 }
 
 .desktop .overlap-group-2 {
   position: relative;
   width: 1588px;
   height: 1261px;
   top: 251px;
   left: -95px;
 }
 
 .desktop .rectangle {
   position: absolute;
   width: 837px;
   height: 1433px;
   top: -28px;
   left: 375px;
   transform: rotate(-103.38deg);
 }
 
 .desktop .img {
   position: absolute;
   width: 820px;
   height: 1193px;
   top: 83px;
   left: 383px;
   transform: rotate(-103.38deg);
   mix-blend-mode: hue;
 }
 
 .desktop .rectangle-2 {
   position: absolute;
   width: 794px;
   height: 805px;
   top: 150px;
   left: 124px;
   border-radius: 544.51px;
   transform: rotate(-3.95deg);
   filter: blur(263.41px);
   mix-blend-mode: lighten;
   background: radial-gradient(50% 50% at 50% 50%, rgb(255, 76.5, 76.5) 44.79%, rgba(255, 0, 0, 0) 100%);
 }
 
 .desktop .rectangle-3 {
   position: absolute;
   width: 642px;
   height: 642px;
   top: 133px;
   left: 267px;
   border-radius: 544.51px;
   transform: rotate(-43deg);
   filter: blur(263.41px);
   mix-blend-mode: lighten;
   background: radial-gradient(
     50% 50% at 50% 50%,
     rgb(99.87, 255, 255) 0%,
     rgba(0, 255, 193.8, 0.58) 57.29%,
     rgba(0, 255, 193.8, 0) 100%
   );
 }
 
 .desktop .rectangle-4 {
   position: absolute;
   width: 295px;
   height: 933px;
   top: -72px;
   left: 711px;
   transform: rotate(-103.38deg);
   mix-blend-mode: overlay;
 }
 
 .desktop .rectangle-5 {
   position: absolute;
   width: 374px;
   height: 949px;
   top: -4px;
   left: 521px;
   transform: rotate(-103.38deg);
   mix-blend-mode: lighten;
 }
 
 .desktop .rectangle-6 {
   position: absolute;
   width: 850px;
   height: 1543px;
   top: 238px;
   left: 456px;
   transform: rotate(-62.8deg);
 }
 
 .desktop .rectangle-7 {
   position: absolute;
   width: 1056px;
   height: 1094px;
   top: 503px;
   left: 206px;
   transform: rotate(-62.8deg);
   mix-blend-mode: overlay;
 }
 
 .desktop .overlap-wrapper {
   position: absolute;
   width: 2581px;
   height: 2219px;
   top: 491px;
   left: 379px;
   transform: rotate(-150.55deg);
 }
 
 .desktop .overlap-3 {
   position: relative;
   width: 3090px;
   height: 2297px;
   top: -39px;
   left: -536px;
 }
 
 .desktop .group-2 {
   position: absolute;
   width: 1635px;
   height: 1625px;
   top: 336px;
   left: 1123px;
   transform: rotate(40.58deg);
 }
 
 .desktop .overlap-group-3 {
   position: absolute;
   width: 1554px;
   height: 1566px;
   top: 332px;
   left: -283px;
 }
 
 .desktop .rectangle-8 {
   position: absolute;
   width: 631px;
   height: 1168px;
   top: 438px;
   left: 582px;
   transform: rotate(109.97deg);
   mix-blend-mode: hue;
 }
 
 .desktop .rectangle-9 {
   position: absolute;
   width: 683px;
   height: 1406px;
   top: 302px;
   left: 436px;
   transform: rotate(109.97deg);
 }
 
 .desktop .rectangle-10 {
   position: absolute;
   width: 1050px;
   height: 1065px;
   top: 199px;
   left: 321px;
   border-radius: 544.51px;
   transform: rotate(-3.95deg);
   filter: blur(263.41px);
   mix-blend-mode: lighten;
   background: radial-gradient(50% 50% at 50% 50%, rgb(255, 76.5, 76.5) 44.79%, rgba(255, 0, 0, 0) 100%);
 }
 
 .desktop .rectangle-11 {
   position: absolute;
   width: 850px;
   height: 849px;
   top: 176px;
   left: 510px;
   border-radius: 544.51px;
   transform: rotate(-43deg);
   filter: blur(263.41px);
   mix-blend-mode: lighten;
   background: radial-gradient(
     50% 50% at 50% 50%,
     rgb(99.87, 255, 255) 0%,
     rgba(0, 255, 193.8, 0.58) 57.29%,
     rgba(0, 255, 193.8, 0) 100%
   );
 }
 
 .desktop .rectangle-12 {
   position: absolute;
   width: 123px;
   height: 1037px;
   top: 203px;
   left: 753px;
   transform: rotate(109.97deg);
   mix-blend-mode: lighten;
 }
 
 .desktop .rectangle-13 {
   position: absolute;
   width: 669px;
   height: 649px;
   top: -7752px;
   left: -5145px;
   transform: rotate(109.97deg);
   mix-blend-mode: overlay;
 }
 
 .desktop .rectangle-14 {
   position: absolute;
   width: 1051px;
   height: 1628px;
   top: 252px;
   left: 464px;
   transform: rotate(150.55deg);
 }
 
 .desktop .rectangle-15 {
   position: absolute;
   width: 1415px;
   height: 1234px;
   top: 697px;
   left: 212px;
   transform: rotate(150.55deg);
   mix-blend-mode: overlay;
 }
 
 .desktop .group-3 {
   position: absolute;
   width: 119px;
   height: 119px;
   top: 1089px;
   left: 3082px;
 }
 
 .desktop .rectangle-16 {
   position: absolute;
   width: 1707px;
   height: 3224px;
   top: 864px;
   left: 1792px;
   background-color: #1346cb;
   mix-blend-mode: soft-light;
 }
 
 .desktop .cazino {
   position: absolute;
   width: 919px;
   height: 1077px;
   top: 1213px;
   left: 1832px;
   object-fit: cover;
 }
 
 .desktop .rectangle-17 {
   position: absolute;
   width: 1441px;
   height: 420px;
   top: 1942px;
   left: 1834px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 52.08%, rgb(0, 0, 0) 100%);
 }
 
 .desktop .rectangle-18 {
   position: absolute;
   width: 1441px;
   height: 838px;
   top: 2362px;
   left: 1834px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
 }
 
 .desktop .roulete {
   position: absolute;
   width: 801px;
   height: 805px;
   top: 1328px;
   left: 2446px;
   object-fit: cover;
 }
 
 .desktop .arrow {
   position: absolute;
   width: 240px;
   height: 325px;
   top: 1543px;
   left: 2727px;
   object-fit: cover;
 }
 
 .desktop .etapas {

  width: 100%;
  position: absolute;
 }
 
 .desktop .frame-wrapper {
   position: absolute;
   width: 1441px;
   height: 314px;
   top: 2322px;
   left: 2071px;
 }
 
 .desktop .frame {
   width: 1441px;
   gap: 80px;
   padding: 0px 100px;
   position: relative;
   display: flex;
   align-items: flex-start;
 }
 
 .desktop .frame-2 {
   flex-direction: column;
   gap: 6px;
   position: relative;
   flex: 1;
   flex-grow: 1;
   display: flex;
   align-items: flex-start;
   background-color: #ffffff1a;
   border-radius:20px;
    padding: 40px;
    max-width: 1333px; 
    margin:0 auto 40px auto;

 }
 
 .desktop .text-wrapper {
   position: relative;
   width: fit-content;
   margin-top: -1px;
   font-family: "Mont-Book", Helvetica;
   font-weight: 400;
   color: #ffffff;
   font-size: 45px;
   /* text-align: center; */
   letter-spacing: 0;
   line-height: normal;
 }
 
 .desktop .p {
   position: relative;
   align-self: stretch;
   background: linear-gradient(90deg,    
    rgb(89.56, 233.28, 252.88)  ,   
      rgba(89.56, 233.28, 252.88, 0.5)     );
   -webkit-background-clip: text !important;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-fill-color: transparent;
   font-family: "Mont-Bold", Helvetica;
   font-weight: 700;
   color: transparent;
   font-size: 65px;
   letter-spacing: 0;
 }
 
 .desktop .text-wrapper-2 {
   position: relative;
   align-self: stretch;
   font-family: "Mont-Regular", Helvetica;
   font-weight: 400;
   color: #ffffff;
   font-size: 30px;
   letter-spacing: 2.4px;
   line-height: normal;
 }
 
 .desktop .div-wrapper {
   /* position: absolute; */
 
  display: block;
  margin:0 20px;
 }
 
 .desktop .overlap-4 {
   position: relative;
   height: 473px;
 }
 
 .desktop .rectangle-19 {
   position: absolute;
   width: 1333px;
   height: 473px;
   top: 0;
   left: 54px;
   background-color: #ffffff1a;
   border-radius: 20px;
 }
 
 .desktop .frame-3 {
   width: 1441px;
   height: 473px;
   gap: 80px;
   padding: 40px 100px;
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: flex-start;
 }
 .text-box{
  position: relative;
 }
 .desktop .desbloqueie {
  padding-top: 120px;
  margin-left: 50px;
   font-family: "Mont-Bold", Helvetica;
   font-weight: 700;
   color: #ffffff;
   font-size: 128px;
   letter-spacing: 0;
 }
 
 .desktop .text-wrapper-3 {
  margin-left: 63px;
  margin-top: 39px;
   font-family: "Mont-Regular", Helvetica;
   font-weight: 400;
   color: #ffffff;
   font-size: 70px;
   letter-spacing: 0;
 
 }
 
 .desktop .group-4 {
   position: absolute;
   width: 278px;
   height: 55px;
   top: 6512px;
   left: -6344px;
 }
 
 .desktop .group-5 {
    width: 100%;
   position: absolute;
 }
 
 .desktop .frame-4 {
   display: flex;
   width: 1441px;
   height: 486px;
   align-items: flex-start;
   gap: 80px;
   padding: 0px 100px;
   position: relative;
 }
 
  .logo {
  text-align: center;
  position: relative;
  margin-top: 119px;
  margin-bottom: 45px;
}

 .text-wrapper-tie {
 
    font-family: "Mont-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 70px;
    text-align: center;
    letter-spacing: 7px;
    line-height: normal;
}
 
.main-box{

  width: 100%;
  display: flex;
  top: 0;
}
.luck-wheel{
  width:60%;
  margin-right: 20px;
}
.test-box{
 
  margin-left: 74px;
  margin-top: -180px;
}

.left-box{
  width: 46.5%;
}

.group-5{
  width: 100%;
  display: none;
  position: absolute;
 }

 .mySwiper-box{
  /* margin: 0 10px 40px 0; */
 }

 .desktop .mobil-box{
  display: none;
 }
 .mobil-box .swiper-pagination{
  margin-top: 18px;
  position: unset;
  margin-bottom: 40px;
 }
 .swiper-wrapper{
  align-items:center;
 }
@media (max-width: 1440px){
  .desktop .jogue-com-as{
    font-size: 75px;
  }
  .desktop .text-wrapper-5{
    font-size: 45px;
  }
  .test-box{
    margin-top: -160px;
  }
}

@media (max-width: 1279px){
  .test-box{
    margin-top: -120px;
    margin-left: 50px;
  }

  .desktop .jogue-com-as{
    font-size: 60px;
  }
  .desktop .text-wrapper-5{
    font-size: 30px;
  }
  .desktop .desbloqueie{
    font-size: 98px;
    padding-top: 98px;
  }
  .desktop .text-wrapper-3{
    font-size: 45px;
    margin-top: 10px;
    margin-left: 50px;
  }
}

@media (max-width: 1023px){

  .desktop .frame-2{
    flex-direction: column;
  }
  .desktop .frame-3{
    width: unset;
  }
  .test-box{
    margin-top: -60px;
    margin-left: 30px;
  }
  .desktop .jogue-com-as{
    font-size: 45px;
  }
  .desktop .text-wrapper-5{
    font-size: 15px;
  }
  .desktop .desbloqueie{
    font-size: 78px;
    padding-top: 78px;
  }
  .desktop .text-wrapper-3{
    font-size: 40px;
  }
}

@media (max-width: 767px){
  .luck-wheel{
    width: 100%;
    margin-right: 0;
    margin-top: 180px;
  }
  .desktop .desbloqueie{
    font-size: 40px;
    padding-top: 100px;
    margin-left: 0px;
    text-align: center;
  }
  .desktop .text-wrapper-3{
    font-size: 35px;  
    text-align: center;
    margin-top: 7px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .text-wrapper-tie{
    font-size: 48px;
  }
  .etapas, .left-box,.web{
    display: none;
  }
  .group-5,.desktop .mobil-box{
    display: block;
  }
  .desktop .jogue-com-as{
    text-shadow: 5px 4px 5px #6b3cff;
    font-family:Mont-HeavyItalic,Helvetica;
    font-weight:400;
    font-style:italic;
    color:#ffffff;
    font-size:35px;
    text-align:center;
    letter-spacing:0;
    line-height:35px;
  }
  .desktop .text-wrapper-5{
    font-family: "Mont-RegularItalic", Helvetica; 
     font-weight: 400; 
      font-style: italic; 
      color: #ffffff;
      font-size:20px;
      letter-spacing:2px;
      line-height:normal;
      margin-top: 3px;
  }
  .desktop .text-wrapper-4{
    max-width: 362px; 
     height: 81px;
     line-height: 81px;
  }
  .desktop .text-wrapper{
    font-size: 24px;
  }
  .desktop .frame-2{
    padding: 20px;
    margin-bottom: 0;
    /* min-height: 325px; */
    margin-left: 10px;
    margin-right: 10px;
    gap: 20px;
  }
  .desktop .p{
    font-size: 28px;
  }
  .desktop .text-wrapper-2{
    font-size: 15px;
  }
  .logo{
    margin-top: 49px;
    margin-bottom: 19px;
  }
  .desktop .div-wrapper{
    display: block;
    margin: unset;
  }
 
}