* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Sofia Sans Extra Condensed', sans-serif;
    background: #fff;
    color: #000;
  }

  .hero {
    background: url("../img/bgg.png") no-repeat center center/cover;
    width: 100%;
    min-height: 100vh;
    padding: 0vw;
  }

  .hero_icon {
    width: 35vw;
    object-fit: contain;
    margin-bottom: 1vw;
    margin: 0 auto;
    display: block;
    padding-top: 3vw;
    margin-bottom: 1vw;

  }

  .bee_icon {
    width: 7vw;
    object-fit: contain;
    display: block;
    position: absolute;
    margin-left: 31vw;
    margin-top: -3.5vw;
  }


  .men_icon {
    width: 25vw;
    object-fit: contain;
    display: block;
    position: absolute;
    margin-left: 73vw;
    margin-top: 6vw;
  }

  .chicken_icon {
    object-fit: contain;
    display: block;
    position: absolute;
    margin-left: 10vw;
    margin-top: 12vw;
    width: 8vw;
    z-index: 10;
  }

  .cube_gif {
    object-fit: contain;
    display: block;
    position: absolute;
    margin-left: 75vw;
    margin-top: -7.5vw;
    opacity: 50%;
    width: 8vw;
    transform: rotate(-30deg);
  }

  .cube_gif_2 {
    object-fit: contain;
    display: block;
    position: absolute;
    margin-left: 82vw;
    margin-top: 28vw;
    filter: blur(10px);
    width: 18vw;
    transform: rotate(25deg);
  }

  .cube_gif_3 {
    object-fit: contain;
    display: block;
    position: absolute;
    margin-left: 5vw;
    margin-top: 16.3vw;
    width: 18vw;
  }

  .cube_gif_4 {
    object-fit: contain;
    display: block;
    position: absolute;
    margin-left: 82vw;
    margin-top: 22vw;
    transform: rotate(-20deg);
    width: 16vw;
  }


  
  .hero_2_container {
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
    padding-top: 10vw;
  }
  
  .hero_title {
    font-size: 11.5vw;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 0vw;
    line-height: 10vw;
  }

  .hero_subtitle {
    font-size: 2vw;
    font-weight: 300;
    color: #ffffff;
    max-width: 44vw;
    word-wrap: break-word;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 2vw;
    margin-top: 1vw;
  }

  .hero_big_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 18vw;
    height: 5vw;
    font-family: 'Sofia Sans Extra Condensed', sans-serif;
    background-color: #FF2233;
    border: none;
    color: #fff;
    font-size: 1.5vw;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .hero_approve_block {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5vw 1vw;
    gap: 0.5vw;
    margin: 0 auto;
    width: fit-content; 
    margin-bottom: 3.5vw;
  }
  
  
  .hero_approve_text {
    font-size: 1.5vw;
    font-weight: 500;
    color: #4DC316;
    margin: 0 auto;
  }
  
  .hero_approve_icon {
    font-size: 1vw;
    width: 1.8vw;
    color: #4DC316;
    object-fit: contain;
    margin: 0 auto;
  }

  .hero_container_2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 90vw;
    margin: 0 auto;
    margin-bottom: 1vw;
    margin-bottom: 4vw;
    gap: 2vw;
  }

  .hero_title_2 {
    font-size: 2.1vw;
    font-weight: 900;
    letter-spacing: 3px;
    color: #426CFE;
    text-transform: uppercase;
    margin: 3vw 2vw;
  }

  .hero_subtitle_2 {
    font-size: 1.8vw;
    font-weight: 300;
    color: #000;
    max-width: 30vw;
    word-wrap: break-word;
    margin-bottom: 2vw;
    margin: 0 2vw;
  }
  
  .hero_block {
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: #fff;
    width: 30vw;
    height: 28vw;
  }

  .hero_container_3 {
    display: flex;
    align-items: center;
    gap: 10vw;
    width: 100%;
    max-width: 70vw;
    margin: 0 auto;
    margin-bottom: 1.5vw;
  }
  
  .righter { 
    margin-left: 40vw
  }

  .hero_block_2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 33vw;
    color: #fff;
  }
  

  .hero_title_3 {
    font-size: 6vw;
    font-weight: 900;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1vw;
  }

  .hero_tit_3 {
    font-size: 2vw;
    font-weight: 700;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1vw;
  }
  .hero_subtitle_3 {
    font-size: 1.8vw;
    font-weight: 300;
    color: #fff;
    word-wrap: break-word;
    margin-bottom: 3vw;
  }

  .hero_big_btn_2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 18vw;
    height: 5vw;
    font-family: 'Sofia Sans Extra Condensed', sans-serif;
    background-color: #FF2233;
    border: none;
    color: #fff;
    font-size: 1.5vw;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .her0_big_btn span.text {
    z-index: 2;
  }
  
  .hero_big_btn::after {
    content: "";
    position: absolute;
  
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: 3vw;
    height: 3vw;
    background: url("../img/icon_install.png") no-repeat center center;
    background-size: contain;
    z-index: 1;
  }
  
  .hero_big_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 100%;
    height: 100%;
  
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 75%);
  
    filter: blur(8px);
  
    transform: skewX(-20deg);
    animation: shimmer 3s infinite alternate;
    z-index: 2;
  }
  
  @keyframes shimmer {
    0% {
      left: -40%;
    }
  
    100% {
      left: 90%;
    }
  }
  


  .hero_approve_block_2 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 2vw;
    padding: 0.5vw 0.8vw; 
    gap: 0.5vw;
    background-color: #4DC316;
    width: fit-content; 
    border-radius: 10px;
    width: 12vw;
  }
  
  
  .hero_approve_text_2 {
    font-size: 1.1vw;
    font-weight: 500;
    color: #fff;

  }
  
  .hero_approve_icon_2 {
    font-size: 1vw;
    color: #fff;
    object-fit: contain;
    width: 1vw;
  }

  .hero_approve_block_3 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5vw 0.8vw; 
    background-color: #4DC316;
    border-radius: 10px;
    gap: 0.5vw;
    margin: auto auto;
    width: fit-content;
    width: 12vw; 
    margin-top: 1vw;
    margin-bottom: 3.5vw;
  }
  
  .hero_approve_block_4 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5vw 0.8vw; 
    background-color: #4DC316;
    border-radius: 10px;
    gap: 0.5vw;
    margin: auto auto;
    width: fit-content;
    width: 12vw; 
    margin-top: 1vw;
  }
  
  .hero_approve_text_3 {
    font-size: 1.1vw;
    font-weight: 500;
    color: #fff;
  }
  
  .hero_approve_icon_3 {
    font-size: 1vw;
    width: 1vw; 
    color: #fff;
    object-fit: contain;
  }


  .hero_2_block_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    color: #fff;
  }
  

  .hero_img_2 {
    width: 12vw;
    height: 24vw;
    border-radius: 1vw;
  }

  .pickaxe_img {
    width: 12vw;
    border-radius: 1vw;
  }
  
  .hero_gif {
    width: 30vw;
    border-radius: 1vw;
  }
  
  .hero_container_4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0vw;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
    margin-bottom: 1vw;
    margin-top: 3vw;
  }

  .hero_title_4 {
    font-size: 5vw;
    font-weight: 700;
    text-shadow: 1px 0 white, -1px 0 white, 0 1px white, 0 -1px white;
    letter-spacing: 3px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 2vw;
  }
  
  .hero_4_img {
    width: 70vw;
    object-fit: contain;
    margin-bottom: 1vw;
  }
  
  .carousel {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    background-color: #000;
    margin-bottom: 4vw;
  }
  
  .carousel-inner {
    display: flex;
    gap: 0px;
    animation: moveLeftToRight 20s  linear infinite;
  }
  
  .carousel-inner img {
    width: 17vw;
    height: auto;
    object-fit: cover;
  }
  
  @keyframes moveLeftToRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  .hero_container_5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0vw;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
    margin-bottom: 1vw;
  }

  .hero_title_5 {
    font-size: 5vw;
    font-weight: 700;
    text-shadow: 1px 0 white, -1px 0 white, 0 1px white, 0 -1px white;
    letter-spacing: 3px;
    text-align: center;
    max-width: 40vw;
    margin: 0 auto;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 2vw;
  }

  .hero_subtitle_5 {
    font-size: 2vw;
    font-weight: 500;
    text-shadow: 1px 0 white, -1px 0 white, 0 1px white, 0 -1px white;
    letter-spacing: 3px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 2vw;
    margin-top:3vw;
  }

  .hero_container_5_2 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 3vw;
    width: 100%;
    max-width: 90vw;
    margin: 0 auto;
    margin-bottom: 2vw;
  }
  

  .hero_block_5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    color: #fff;
  }


  .hero_img_5 {
    width: 25vw;
    object-fit: contain;
    margin-bottom: 1vw;
  }

  .spacer_img {
    width: 60vw;
    margin-left: 40vw;
    }
  .hero_container_6 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 55vw;
    margin: 0 auto;
  }

  .hero_img_6 {
    width: 25vw;
    object-fit: contain;
    margin-bottom: 1vw;
  }

  .hero_title_6 {
    font-size: 2.5vw;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffffff;
    text-transform: uppercase;
  }

  .hero_subtitle_6 {
    font-size: 1.3vw;
    font-weight: 300;
    letter-spacing: 3px;
    color: #ffffff;
    margin-bottom: 2vw;
    max-width: 25vw;
  }
  
  .ending {
    background: url("../img/ending.png") no-repeat center center/cover;
    width: 100%;
    align-items: center;
    min-height: 50vw;
  }

  .ending_container {
    width: 100%;
    max-width: 70vw;
    margin: 0 auto;
  }
  
  .end_logo {
    width: 20vw;
    object-fit: contain;
    margin-bottom: 1vw;
    display: block;
    padding-top: 10vw;
  }

  .end_subtitle {
    font-size: 1.3vw;
    font-weight: 300;
    letter-spacing: 3px;
    color: #ffffff;
    margin-bottom: 8vw;
    max-width: 25vw;
    margin-left: 5vw;
  }

  .ending_block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
  }

  .ending_container_2 {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 70vw;
    margin: 0 auto;
    gap: 5vw;
    margin-bottom: 2vw;
  }

  .hero_container_but {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 70vw;
    margin: 0 auto;
    margin-bottom: 1vw;
  }

  .hero_container_but_2 {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 32vw;
    margin: 0 auto;
    padding-bottom: 3vw;
    margin-top: 1vw;
  }
  .rating_block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
  }
  
  .rating_number {
    font-size: 1.2vw;
    font-weight: 700;
  }
  
  .rating_stars {
    font-size: 1vw;
    color: #F7A100;
  }
  
  .reviews_block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
  }
  
  .reviews_count {
    font-size: 1.2vw;
    font-weight: 700;
  }
  
  .reviews_label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8vw;
    font-weight: 100;
    padding: 0.3vw 0;
  }
  
  .approve_block {
    display: flex;
    align-items: center;
    gap: 0.5vw;
  }
  
  .approve_icon {
    width: 1.2vw;
    object-fit: contain;
  }
  
  .approve_text {
    font-size: 1vw;
    color: #4CAF50;
  }