@media only screen  and (max-width: 1800px)  {

    .stage-2-text {
        
        font-size: 150%;
        
        
      }

      .stage-2-img-R {
        left: -20%;
        width: 100%;
      }  

      .karuzela-prof {
        height: 70vh;
        width: 140vh;
      }  

      .stage-3-button{

        left: 101vh;

      }

      .scrol {
        height: 390vh;
    }

    .img-item img {
        width: 50%;
    }
    
    .img-bottom {
        width: 42vh;
    }

    .s8-item{
        width: 40vh;

    }

    .text-vector2 {
        font-size: 220%;
    }

    .stage-8-vector-main {
        width: 130vh ;
    }

    .PositionText {
        margin-left: 24%;
    }
    .PositionText2 {
        margin-left: 7%;
    }
       
      
}

@media only screen  and (max-width: 1600px) {

  .karuzela-prof {
    height: 78vh;
  }

  .card-list .card-item .circle1 {
    width: 240px;
    height: 240px;
  }

  .card-list .card-item .circle2 {
    width: 210px;
    height: 210px;
  }

  .card-list .card-item .circle3 {
    width: 200px;
    height: 200px;
  }

  .circle-text {
    font-size: 120%;
  }

  .circle-text2 {
    font-size: 80%;
  }

  .dot-position {
    gap: 21rem;
  }

  .dot-texts {
    gap: 10rem;
  }

  .dot-text2s {
    gap: 10rem;
  }

  .stage-4-text-next {
    font-size: 110%;
  }

  .stage-5-text-next {
    font-size: 110%;
  }

  .blur-bg {
    height: 52%;
  }

  .stage5-img {
    width: 562px;
    height: 341px;
  }
  .stage5-img2 {
    width: 562px;
    height: 341px;
  }

  .margin-stage5 {
    margin: 29px;
  }

  .img-bottom {
    width: 48vh;
  }

  .img-item img {
    width: 57%;
  }

  .s7-text {
    font-size: 100%;
  }

  .text-vector2 {
    font-size: 194%;
  }

  .text-item2 {
    width: 110%;
  }

}


@media only screen and (max-width: 500px) {

  .stage-4-circle {
    display: none;
  }

  .stage-2 {
    left: 0%;
    height: 204vh;
    width: 100%;
}
  
}



@media only screen and (max-width: 414px) and (max-height: 920px)  {

  .BG {
    width: 100%;
    margin: 0;
  }

  html, body {
    overflow-x: hidden;
    width: 100%;
}




* {
  max-width: 100vw;
  box-sizing: border-box;
}


/* width */
::-webkit-scrollbar {
  display: none;
}

/* Track */
::-webkit-scrollbar-track {
  display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  display: none;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  display: none;
}


.prom {
  float: none;
  height: 25vh;
}

.vector-prom {
  display: none;
}

.vector-prom2 {
  height: 37vh;
}
.vector-promText {
  height: 25vh;
}

 



    .scroll-section {
      display: flex;
      flex-direction: column;
      overflow: hidden; 
      width: 100%;
    }
    

    .scrol-margin {
        overflow: hidden;
        height: 500vh;
    }

    .logo {
      width: 13%;
      height: 6%;
    }

    .filmbg-s3 {
      width: 100%;
    }

    .stage-1 {
      height: 28vh;
    
  }

    .stage-2 {
      left: 0%;
      height: 160vh;
      width: 100%;
    }

    .stage-2-text {
      
      top: 3%;
      font-size: 205%;
      display: inline-flex;
      width: 91%;
      text-align: center;
     
  }


  .stage-2-text2 {
    
    width: 89%;
    display: inline-flex;
    top: 46%;
    font-size: 111%;
    text-align: center;
}


  .BG-img {
  opacity: 0;
   
    
}




.stage-2-img {
 
  top: 30%;
  right: 15%;
  width: 30%;
  height: 70%;
  
}

.stage-2-img-R {

  width: 281%;
  height: 56%;
  left: -157%;
  top: 24%;
}




.karuzela-prof {

  left: 0%;
  top: 27%;
  height: 102vh;
  width: 40vh;
}

.stage-3 {
  height: 168vh;
}


.card-list .card-item .circle1 {
  width: 193px;
  height: 193px;
  margin: 4rem;
  float: none;
  
}

.card-list .card-item .circle2 {
  width: 178px;
  height: 178px;
}

.card-list .card-item .circle3 {
  width: 167px;
  height: 167px;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  
  left: 83%;
}

.menu-sf {
  opacity: 0;
}

.circle-text2 {
  font-size: 70%;
}

.circle-text {
  font-size: 100%;
  top: 118%;
}

.stage-3-text {
  width: 95%;
  text-align: center;
 
}


.swiper-wrapper {
display: block;
}

.text1 {
  font-size: 244%;
}

.text2 {

  font-size: 125%;
}


  .scrol {
    height: 503vh;
}

.Uli2 {
  margin-left: 2px;
  width: 37%;
}


.stage-4 {
  height: 200vh;
  width: 100%;
  display: block;
  float: none;
  
}

.stage-4-img {
  width: 388px;
  height: 285px;
  top: -580%;
  left: -7%;
  position: relative;
 
}


.vector5 {
  width: 100%;
  
}


.stage-5-vector1 {
  
  width: 100%;
}


.stage-5-Ul {
  width: 100%;
  
}




.time-4 {
  margin-left: 99px;
}

.stage-4-text {
  margin-left: 83px;
 
}


.stage-4-text-next {
  width: 83%;
  text-align: center;
}


.stage-4-circle {
  bottom: unset;
  position: relative;
  top: 87%;
  left: -4%;
}

.stage4-text3 {
  font-size: 122%;
  width: 119%;
}


.stage-5 {
  
  width: 100%;
  height: 215vh;
  display: block;
}


.time-5 {
  
  margin-left: 22%;
}

.stage-5-text {
  font-size: 272%;
}


.blur-bg {
  width: 100%;
  height: 162%;
  border-radius: 0px 0px 0px 0px;
  
}


.stage-5-text-next {
  width: 83%;
  height: 30%;
  
  text-align: center;
}

.stage5-text3 {
 
  font-size: 119%;
  width: 118%;
}

.stage5-img {
  width: 358px;
  height: 301px;
  box-shadow: 0 0 40px black;
  position: relative;
  top: 108%;
  left: -5%;
}

.stage5-img2 {
  width: 358px;
  height: 301px;
  box-shadow: 0 0 40px black;
  left: -6%;
  position: relative;
}

.margin-stage5 {
  
  position: absolute;
  top: 64%;
  left: 9px;
}


.stage-6 {
  
  width: 100%;
  display: block;
}


.vectorFlex {
  display: block;
}


.stage-6-vector {
  width: 100%;
}

.stage-6-vector-img {
  
  display: none;
}


.stage-6-text1 {
  
  width: 80%;
  
  margin-left: 43px;
}



.stage-6-img {
  width: 90%;
  height: 52%;
  
  margin-left: 23px;
  
}


.blur-bg2 {
  
  width: 93%;
  height: 55%;
  
}


.stage-7 {
  height: 120vh;
  width: 100%;
  
}

.img-stage7 {
  width: 100%;
  height: 100%;
  
}


.vector-left-7 {
  width: 41vh;
  height: 103vh;
  float: none;
  
}


.lrft-7-content {
  
  height: 50%;
  width: 100%;
  left: -2%;
 
}


.left-button-vector {
 
  left: 26%;
  width: 68%;
}


.vector-img-7 {
  
  display: none;
  
}


.vector-rght-7 {
 
  width: 13vh;
  height: 69vh;
  
  
  
}


.img-vector7 {
  width: 81vh;
  height: 36vh;
  padding: 0px;
  position: relative;
  left: -113%;
  top: -39%;
}


.scdown {
 
  display: none;
}



.stage-8-vector-main {
  width: 100%;
  display: block;
}


.s8-clear {
  
  display: none;
}


.stage-8 {
  height: 274vh;
  width: 100%;
 
  display: block;
}

.img-item img {
 
  width: 93%;
  height: 93%;
  margin-left: 37%;
}


.stage-8-vector {
  width: 50vh;
  height: 35vh;
  display: block;
}

.s8-item {
  width: 52vh;
  text-align: center;
}


.text-vector2 {
  font-size: 220%;
  margin-left: -68px;
}

.text-vector3 {
  
  left: -14%;
  
}

.sta8-item-main {
  
  width: 100%;
  position: relative;
  left: 19%;
  display: block;
  height: 62vh;
}

.sta8-item-main {
  height: 62vh;
 
  display: block;
}

.PositionText {
  margin-left: 23%;
  
}

.PositionText2 {
  margin-left: 7%;
  
}




}

@media only screen and (max-width: 430px) and (max-height: 932px)  {

  .BG {
    width: 100%;
    margin: 0;
  }

  html, body {
    overflow-x: hidden;
    width: 100%;
}


* {
  max-width: 100vw;
  box-sizing: border-box;
}


/* width */
::-webkit-scrollbar {
  display: none;
}

/* Track */
::-webkit-scrollbar-track {
  display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
  display: none;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  display: none;
}

 



    .scroll-section {
      display: flex;
      flex-direction: column;
      overflow: hidden; 
      width: 100%;
    }
    

    .scrol-margin {
        overflow: hidden;
        height: 500vh;
    }

    .logo {
      width: 13%;
      height: 6%;
    }

    .filmbg-s3 {
      width: 100%;
    }

    .stage-1 {
      height: 28vh;
    
  }

    .stage-2 {
      left: 0%;
      height: 191vh;
      width: 100%;
    }

    .stage-2-text {
      
      top: 3%;
      font-size: 205%;
      display: inline-flex;
      width: 91%;
      text-align: center;
     
  }


  .stage-2-text2 {
    
    width: 89%;
    display: inline-flex;
    top: 48%;
    font-size: 111%;
    text-align: center;
}


  .BG-img {
  opacity: 0;
   
    
}




.stage-2-img {
 
  top: 30%;
  right: 15%;
  width: 30%;
  height: 70%;
  
}

.stage-2-img-R {

  width: 281%;
  height: 56%;
  left: -157%;
  top: 24%;
}




.karuzela-prof {

  left: 0%;
  top: 27%;
  height: 102vh;
  width: 40vh;
}

.stage-3 {
  height: 168vh;
}


.card-list .card-item .circle1 {
  width: 193px;
  height: 193px;
  margin: 4rem;
  float: none;
  
}

.card-list .card-item .circle2 {
  width: 178px;
  height: 178px;
}

.card-list .card-item .circle3 {
  width: 167px;
  height: 167px;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  
  left: 83%;
}

.menu-sf {
  opacity: 0;
}

.circle-text2 {
  font-size: 70%;
}

.circle-text {
  font-size: 100%;
  top: 118%;
}

.stage-3-text {
  width: 95%;
  text-align: center;
 
}


.swiper-wrapper {
display: block;
}

.text1 {
  font-size: 244%;
}

.text2 {

  font-size: 125%;
}


  .scrol {
    height: 503vh;
}

.Uli2 {
  margin-left: 2px;
  width: 37%;
}


.stage-4 {
  height: 200vh;
  width: 100%;
  display: block;
  float: none;
  
}

.stage-4-img {
  width: 388px;
  height: 285px;
  top: -580%;
  left: -7%;
  position: relative;
 
}


.vector5 {
  width: 100%;
  
}


.stage-5-vector1 {
  
  width: 100%;
}


.stage-5-Ul {
  width: 100%;
  
}




.time-4 {
  margin-left: 99px;
}

.stage-4-text {
  margin-left: 83px;
 
}


.stage-4-text-next {
  width: 83%;
  text-align: center;
}


.stage-4-circle {
  bottom: unset;
  position: relative;
  top: 87%;
  left: -4%;
}

.stage4-text3 {
  font-size: 122%;
  width: 119%;
}


.stage-5 {
  
  width: 100%;
  height: 215vh;
  display: block;
}


.time-5 {
  
  margin-left: 25%;
}

.stage-5-text {
  font-size: 272%;
}

.stage-5-text {
 
  margin-left: 44px;
}


.blur-bg {
  width: 100%;
  height: 162%;
  border-radius: 0px 0px 0px 0px;
  
}


.stage-5-text-next {
  width: 83%;
  height: 30%;
  
  text-align: center;
}

.stage5-text3 {
 
  font-size: 119%;
  width: 118%;
}

.stage5-img {
  width: 358px;
  height: 301px;
  box-shadow: 0 0 40px black;
  position: relative;
  top: 108%;
  left: -5%;
}

.stage5-img2 {
  width: 358px;
  height: 301px;
  box-shadow: 0 0 40px black;
  left: -6%;
  position: relative;
}

.margin-stage5 {
  
  position: absolute;
  top: 64%;
  left: 13px;
}


.stage-6 {
  
  width: 100%;
  display: block;
}


.vectorFlex {
  display: block;
}


.stage-6-vector {
  width: 100%;
}

.stage-6-vector-img {
  
  display: none;
}


.stage-6-text1 {
  
  width: 80%;
  
  margin-left: 43px;
}



.stage-6-img {
  width: 90%;
  height: 52%;
  
  margin-left: 23px;
  
}


.blur-bg2 {
  
  width: 93%;
  height: 55%;
  
}


.stage-7 {
  height: 120vh;
  width: 100%;
  
}

.img-stage7 {
  width: 100%;
  height: 100%;
  
}


.vector-left-7 {
  width: 41vh;
  height: 103vh;
  float: none;
  
}


.lrft-7-content {
  
  height: 50%;
  width: 100%;
  left: -1%;
 
}


.left-button-vector {
 
  left: 26%;
  width: 68%;
}


.vector-img-7 {
  
  display: none;
  
}


.vector-rght-7 {
 
  width: 13vh;
  height: 69vh;
  
  
  
}


.img-vector7 {
  width: 81vh;
  height: 36vh;
  padding: 0px;
  position: relative;
  left: -118%;
  top: -39%;
}


.scdown {
 
  display: none;
}



.stage-8-vector-main {
  width: 100%;
  display: block;
}


.s8-clear {
  
  display: none;
}


.stage-8 {
  height: 274vh;
  width: 100%;
 
  display: block;
}

.img-item img {
 
  width: 93%;
  height: 93%;
  margin-left: 37%;
}


.stage-8-vector {
  width: 50vh;
  height: 35vh;
  display: block;
}

.s8-item {
  width: 52vh;
  text-align: center;
}


.text-vector2 {
  font-size: 220%;
  margin-left: -68px;
}

.text-vector3 {
  
  left: -14%;
  
}

.sta8-item-main {
  
  width: 100%;
  position: relative;
  left: 19%;
  display: block;
  height: 62vh;
}

.sta8-item-main {
  height: 62vh;
 
  display: block;
}

.PositionText {
  margin-left: 23%;
  
}

.PositionText2 {
  margin-left: 7%;
  
}




}




@media only screen and (max-width: 360px) and (max-height: 740px)  {


  .stage-2 {
    left: 0%;
    height: 240vh;
    width: 100%;
}


.stage-2-img-R {
  width: 281%;
  height: 36%;
  left: -157%;
  top:27%;
}


.karuzela-prof {
  left: -1%;
  top: 27%;
  height: 139vh;
  width: 61vh;
}


.stage-2-text2 {
  
  top: 38%;
  
}



.stage-3 {
  height: 224vh;
}


.time-4 {
  margin-left: 78px;
}



.stage-4-text {
  margin-left: 62px;
}


.stage-4-img {
  width: 338px;
  height: 249px;
  top: -595%;
  left: -8%;
  
}

.time-5 {
  margin-left: 21%;
  top: -40%;
  position: relative;
}


.stage-5-text {
  font-size: 249%;
  position: relative;
  top: -41%;
}


.blur-bg {
  
  position: relative;
  top: -38%;
  height: 181%;
}


.stage5-img2 {
  width: 318px;
  height: 272px;
  box-shadow: 0 0 40px black;
  left: -6%;
  position: relative;
}


.stage5-img {
  width: 319px;
  height: 285px;
  box-shadow: 0 0 40px black;
  position: relative;
  top: 108%;
  left: -6%;
}


.lrft-7-content {
  height: 65%;
  width: 100%;
  left: 0%;
  top: -1%;
}


.img-item img {
  width: 89%;
}


.PositionText {
  margin-left: 21%;
  
}


.PositionText2 {
  margin-left: 1%;
  margin-top: 30%;
}


.scrol-margin {
  overflow: hidden;
  height: 552vh;
}

.scrol {
  height: 526vh;
}


.stage-5 {
  width: 100%;
  height: 242vh;
  display: block;
}


}



@media only screen and (max-width: 390px) and (max-height: 844px)  {


  .stage-2 {
  
  
    height: 171vh;
}


.stage-2-text2 {
 

  top: 46%;
 
}


.stage-5-text {
  margin-left: 26px;
}


.karuzela-prof {

  height: 105vh;

}


.time-4 {
  margin-left: 94px;
}


.stage-4-text {
  margin-left: 79px;
}


.blur-bg {
  
  height: 169%;
  
}

.img-vector7 {
  
  left: -113%;
  
}



.margin-stage5 {

  top: 66%;
  left: -4px;
}



.stage-4-circle {

  top: 95%;
 
}


.stage-4-img {
 
  top: -553%;
  left: -9%;
}


.img-item img {
  margin-left: 36%;
}

.PositionText2 {
  margin-left: 5%;
}


.PositionText {
  margin-left: 21%;
}






}


@media only screen and (max-width: 400px)  {

  .stage-2-img {
 
    top: 30%;
    right: 15%;
    width: 30%;
    height: 70%;
    
  }


.stage-2 {
  
  height: 275vh;
  
}


.karuzela-prof {
  left: 0%;
  top: 5%;
  height: 129vh;
  width: 47vh;
}


.stage-3 {
  height: 219vh;
}

.stage-4-circle {
  display: none;
}

.stage-5-text {
  margin-left: 27px;
  font-size: 235%;
}

.scrol-margin {
  overflow: hidden;
  height: 585vh;
}
.stage-5 {
  width: 100%;
  height: 290vh;
  display: block;
}

.margin-stage5 {
  position: absolute;
  top: 56%;
  left: -3px;
}


.stage-6 {
  height: 155vh;
}

.scrol {
  height: 560vh;
}


.lrft-7-content {
  height: 55%;
  width: 110%;
  left: 1%;
}

.s7-text {
  
  font-size: 95%;
}




.text-vector2 {
  font-size: 220%;
  margin-left: -38px;
}

.text-vector3 {
  left: -10%;
}

.sta8-item-main {
  width: 100%;
  position: relative;
  left: 26%;
  display: block;
  height: 62vh;
}

.PositionText {
  margin-left: 20%;
}

.PositionText2 {
  margin-left: -1%;
}
.img-vector7 {
  width: 81vh;
  height: 36vh;
  padding: 0px;
  position: relative;
  left: -124%;
  top: -39%;
}

.stage-4-img {
  width: 388px;
  height: 285px;
  top: -519%;
  left: -9%;
  position: relative;
}
 

}