.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-color-primary);
    padding-bottom: 0;
    
}
.main .pop-boxes {
      position: fixed;
      display: flex;
      
      justify-content: center;
      align-items: center;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.541);
      z-index: 13;
      backdrop-filter: blur(3px);
      transition: .4s ease-in-out;
      opacity: 0;
      visibility: hidden;
}
.main .pop-boxes .tab-bar {
        width: 100%;
        max-width: 1200px;
}
.main .pop-boxes .tab-bar .media-scroller {
            
            display: flex;
            margin: 0 auto;
            max-width: fit-content;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            overscroll-behavior-inline: contain;
            
            position: relative;
}
.main .pop-boxes .tab-bar .media-scroller .tab {
                display: inline-flex;
                white-space: nowrap;
                column-gap: 2rem;
                overflow-x: scroll;
                max-width: 500px;
                user-select: none;
                padding: 1rem 1rem;
}


.main .pop-boxes .tab-bar .media-scroller .tab .box-element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

.main .pop-boxes .tab-bar .media-scroller .tab .box-element .img-container {
  position: relative;
  width: 70%;
}

.main .pop-boxes .tab-bar .media-scroller .tab .box-element .img-container img {
  border-radius: .5rem;
  aspect-ratio: 3/4;
  width: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

.main .pop-boxes .tab-bar .media-scroller .tab .box-element .img-container .number {
  position: absolute;
  top: 2%;
  left: 3%;
  background: #272929;
  backdrop-filter: blur(3px);
  color: white;
  border-radius: .5rem;
  padding: .5rem 1rem;
}

.main .pop-boxes .tab-bar .media-scroller .tab .box-element .text {
  background: #272929;
  color: white;
  border-radius: 2rem;
  padding: 1rem 2rem;
  margin-top: 1rem;
  width: 90%;
  text-wrap: wrap;
}

.main .pop-boxes .tab-bar .media-scroller .tab .box-element .text h4{
  margin-bottom: .5rem;
}
.main .pop-boxes .tab-bar .media-scroller .tab .box-element .text h5 {
  margin-top: .3rem;
}               

                .main .pop-boxes .tab-bar .media-scroller .tab .left-btn, .right-btn {
                    fill: white;
                    position: absolute;
                    cursor: pointer;
                    width: 5rem;
                    background: rgba(65, 65, 65, 0.685);
                    border-radius: 50%;
                    backdrop-filter: blur(5px);
                    -webkit-backdrop-filter: blur(5px);
                    display: none;
                    transform: translateY(-100%);
                    top: 50%; 
                    transition: .3s ease-in-out;
                }
                
                    
                    
                
                .main .pop-boxes .tab-bar .media-scroller .tab .left-btn {
                    left: 3%;
                     
                    display: flex;
                    opacity: 0;
                    visibility: hidden;
                    
                    
                }
                
                .main .pop-boxes .tab-bar .media-scroller .tab .right-btn {
                    right: 3%;
                    display: flex;
                    opacity: 0;
                    visibility: hidden;
                }
                .main .pop-boxes .tab-bar .media-scroller .tab .right-btn svg {
                        transform: translate(-2rem, -25%);
                    }
                

                

                .main .pop-boxes .tab-bar .media-scroller .tab .left-btn:hover {
                    background: rgba(34, 34, 34, 0.726);
                    scale: 1.05;
                }

                .main .pop-boxes .tab-bar .media-scroller .tab .right-btn:hover {
                    background: rgba(32, 32, 32, 0.726);
                    scale: 1.05;
                }
              
              .main .pop-boxes .tab-bar .media-scroller .tab::-webkit-scrollbar {
                display: none;
            }

          .main .pop-boxes .tab-bar .media-scroller .snaps-inline {
              scroll-snap-type: inline mandatory;
              scroll-padding-inline-start: 1rem;
          }


      @media (min-width:800px) {
          
        .main .pop-boxes .tab-bar .media-scroller .tab {
                max-width: 1200px;
        }
        .main .pop-boxes .tab-bar .media-scroller .tab .box-element {
                      min-width: 48%;
                  }

      }

      @media (min-width:1000px) {
          
        .main .pop-boxes .tab-bar .media-scroller .tab .box-element {
                      min-width: 48.3%;
                  }

      }

      @media (min-width:1200px) {
        .main .pop-boxes .tab-bar {
              max-width: 1630px;
          }
          .main .pop-boxes .tab-bar .media-scroller .tab {
                      max-width: 1630px;
          }
          .main .pop-boxes .tab-bar .media-scroller .tab .box-element {
                          min-width: calc(32% - 0.5vw);
                      }

                      

      }
      @media (min-width:1200px) {
        .main .pop-boxes .tab-bar .media-scroller .tab .box-element {
                          min-width: calc(32% - 0.3vw);
                      }

      }

      @media (min-width:1700px) {
        .main .pop-boxes .tab-bar .media-scroller .tab .left-btn, .right-btn {
                          width: 6rem;
                      }

                      .main .pop-boxes .tab-bar .media-scroller .tab .left-btn {
                          left: -1.5rem
                      }

                      .main .pop-boxes .tab-bar .media-scroller .tab .right-btn {
                          right: -1.5rem;
                      }

                      .main .pop-boxes .tab-bar .media-scroller .tab .box-element {
                          min-width: calc(32% - 1px);
                      }

      }
  
      

      .main .pop-boxes .close {
          width: 5rem;
          position: fixed;
          top: 2%;
          right: 2%;
          fill: white;
          cursor: pointer;
          user-select: contain;
          z-index: 11;
      
  }
  .main .container-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 100%;

  }

@media (min-width: 800px) {
    .main .container-1 {
        background-attachment: fixed;
    }
}
        
  .main .container-1 .layer-1 {
            position: absolute;
            bottom: 0;
            width: 100%;
            transform: translateY(2px);
        }
    

  .main .container-2 {
        display: grid;
        justify-content: center;
        align-items: center;
        max-width: 1500px;
        width: 100%;
        row-gap: 6rem;
        background: var(--bg-color-primary);
  }
  .main .container-2 .header {
            
            width: 100%;
            text-align: center;
  }
  .main .container-2 .header h2 {
                
                align-items: center;
                position: relative;
                
                margin-bottom: .5rem;
  }
  .main .container-2 .header h2 img {
                    display: none;
                    height: 50px;
                    
                }
            

          .main .container-2 .header .vr {
                margin: 2rem auto 2rem;
                opacity: 20%;
                width: 100% !important;
            }

            
        

      .main .container-2 .vc {
            display: none;
            opacity: 20%;
        }
      .main .container-2 .tab-o {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 0 2rem;
      }
          .main .container-2 .tab-o .body {
                width: 100%;
                height: 100%;
                display: flex; 
                justify-content: center;
          }
              

          .main .container-2 .tab-o .body .element {
                    display: flex;
                    justify-content: center;
                    align-items: center;
          }

          .main .container-2 .tab-o .body .element .icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 1rem;
                        box-shadow: none;
          }
          .main .container-2 .tab-o .body .element .icon img {
                            width: 4.5rem;
                        
                    }

                  .main .container-2 .tab-o .body .element a {
                        text-decoration: none;
                    }

                    .main .container-2 .tab-o .body .element a:visited {
                        color: #04b;
                        
                    }
                    
                
              .main .container-2 .tab-o .body .element-2 {
                display: flex;
                align-items: center;
                justify-content: center;
                
                margin: 0 auto;
                text-align: center;
                border-radius: .5rem;
                padding: .7rem 1rem;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 8px;
                border: 1px solid var(--border-color-05);
                background: var(--bg-color-secondary);
              }

              .main .container-2 .tab-o .body .element-2 .price {
                  background: radial-gradient( circle farthest-corner at 10% 20%,  rgb(255, 61, 174) 17.8%, rgb(162, 2, 255) 100.2% );
                  -webkit-background-clip: text;
                  background-clip: text;
                  color: transparent;
                  white-space: nowrap;
                }

                
              
              .main .container-2 .tab-o .body iframe {
                    aspect-ratio: 16/9;
                    width: 100%;
                    max-width: 600px;

                    border-radius: 1rem;
                    overflow: hidden;
                    
                }
            

          .main .container-2 .tab-o .gap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;
               
                row-gap: 1rem;
            }
          .main .container-2 .tab-o .gap-2 {
                display: flex;
                flex-direction: column;
                justify-content: center;
                
               
                row-gap: 1rem;
            }

    @media (min-width: 1050px) {
      .main .container-2 {
            grid-template-columns: 50% auto 50%;
            align-items: start;
            padding: 4rem 2rem 0;
      }
      .main .container-2 .header {
                margin-top: 0;
                margin-bottom: 3rem;
                text-align: start;
      }
      .main .container-2 .header .vr {
                    display: none;
                }
                .main .container-2 .header h2 {
                    display: flex;
                    column-gap: 1.5rem;
                }
                .main .container-2 .header h2 img {
                        display: block;
                    }
                
            

          .main .container-2 .vc {
                display: block;
            }

          .main .container-2 .tab-o {
                align-items: start;

          }
              .main .container-2 .tab-o .body {
                    
                    justify-content: start;
                }
              .main .container-2 .tab-o .gap-2 {
                align-items: start;
                row-gap: 1.5rem;
              }
              .main .container-2 .tab-o .body .element-2 {
                  margin: 0;
                  width: auto;


      }
  }

  .main  .container-3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        width: 100%;
        background: var(--bg-color-primary);
        padding-top: 6rem;
  }
        .main  .container-3 .vc {
          display: none;
          opacity: 20%;
        }
        
        .main  .container-3 .header {
              display: flex;
              justify-content: center;
              width: 100%;
              text-align: center;
              margin-bottom: 2rem;
        }
        .main  .container-3 .header h2 {
                  display: flex;
                  align-items: center;
                  position: relative;
                  column-gap: 1.5rem;
                  margin-bottom: .5rem;
        }
        .main  .container-3 .header h2 img {
                      
                      display: none;
                      height: 50px;
                      
            }

    .main  .container-3 .body-2 {
              display: flex;
              flex-direction: column;
    }
    .main  .container-3 .body-2 .box-container {
                position: relative;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 8px;
                border-radius: .5rem;
                border: 1px solid var(--border-color-05);
    }
    
    .main  .container-3 .body-2 .secret-box {
                  
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  
                  
                  position: relative;
                  background: rgb(53, 53, 53);
                  
                  overflow: hidden;
                  cursor: pointer;
                  transition: all .6s cubic-bezier(.28,-0.03,0,.99);
    }
    .main  .container-3 .body-2 .secret-box.enabled {
      max-width:400px;
      
      transition: all .6s cubic-bezier(.28,-0.03,0,.99);
    }

    .main  .container-3 .body-2 .secret-box.md-disabled {
      max-width: 80vw;
      width: 80vw;
      transition: all .6s cubic-bezier(.28,-0.03,0,.99);
    }

    .main  .container-3 .body-2 .secret-box.lg-disabled {
      max-width: 800px;
      width: 800px;
      transition: all .6s cubic-bezier(.28,-0.03,0,.99);
    }

    .main  .container-3 .body-2 .secret-box .box {
                    padding: 2.5rem;
                    user-select: none;
                    -webkit-user-drag: none;  
                    width: 100%;
                    animation: secretBox1 12s infinite;
                    transition: all .6s cubic-bezier(.28,-0.03,0,.99);
                  }

    .main  .container-3 .body-2 .secret-box .question {
                    position: absolute;
                    left:0;
                    top:0;
                    transition: all .6s cubic-bezier(.28,-0.03,0,.99);
                    user-select: none;
                    -webkit-user-drag: none;
                    animation: secretBox2 12s infinite;
                  }
                .main  .container-3 .body-2 .secret-box .box.visible {
                  opacity: 20%;
                }
                .main  .container-3 .body-2 .secret-box .question.visible {
                  opacity: 20%;
                }
                
                .main  .container-3 .body-2 .secret-box:hover {
                  filter: brightness(70%);
                }
                .main  .container-3 .body-2 .secret-box:hover .box, .question {
                    opacity: 10%;
                  }
                  .main  .container-3 .body-2 .secret-box .box.hidden {
                    opacity: 0%;
                  }
                  .main  .container-3 .body-2 .secret-box .question.hidden {
                    opacity: 0%;
                  }
                .main  .container-3 .body-2 .click-pointer {
                  user-select: none;
                  display: flex;
                  visibility: visible;
                  opacity: 1;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  position: absolute;
                  bottom: 3%;
                  left: 50%;
                  transform: translate(-50%, 0);
                  text-align: center;
                  color: white;
                  white-space: nowrap;
                  pointer-events: none;
                  transition: all .6s cubic-bezier(.28,-0.03,0,.99);
                  filter: blur(0);
                  -webkit-filter: blur(0);
                }
                .main  .container-3 .body-2 .click-pointer svg {
                    overflow: visible;
                    fill: white;
                    width: 30px;
                }
                .main  .container-3 .body-2 .click-pointer svg .first-arrow {
                      opacity: 0;
                      animation: arrowMovement 2s ease-in-out infinite;
                    }
                .main  .container-3 .body-2 .click-pointer svg .second-arrow {
                      opacity: 0;
                      animation: arrowMovement 2s .5s ease-in-out infinite;
                }

                .main  .container-3 .body-2 .previous-boxes {
                  position: absolute;
                  user-select: none;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, 100%);
                  text-align: center;
                  color: white;
                  white-space: nowrap;
                  pointer-events: none;
                  transition: all .6s cubic-bezier(.28,-0.03,0,.99);
                  opacity: 0;
                  filter: blur(3px);
                  -webkit-filter: blur(3px);
                
              }

              .main  .container-3 .body-2 .box-container:hover .previous-boxes{
                
                  transform: translate(-50%, -50%);
                  opacity: 1;
                  filter: blur(0);
                  -webkit-filter: blur(0);
              }
              .main  .container-3 .body-2 .box-container:hover .click-pointer {
                  transform: translate(-50%, 100%);
                  opacity: 0;
                  filter: blur(3px);
                  -webkit-filter: blur(3px);
                }
              .main  .container-3 .body-2 .box-container.disabled .click-pointer{
                visibility: hidden;
                opacity: 0;
              }

              .main  .container-3 .body-2 .box-container.disabled .previous-boxes {
                visibility: hidden;
                opacity: 0;
              }

              .main  .container-3 .body-2 .box-container.disabled .secret-box:hover {
                filter: unset;
              }

              .main  .container-3 .body-2 .box-description {
                margin: 1.5rem auto 0;
                padding: 0 0.5rem;
                max-width: 400px;
                
                text-align: center;
              }

              .main  .container-3 .body-2 .box-container .box-list {
                position: absolute;
      display: flex;
      
      justify-content: center;
      align-items: center;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      
      user-select: none;
      -webkit-user-drag: none;
      
      transition: .4s ease-in-out;
      opacity: 0;
      visibility: hidden;
}

.main .container-3 .body-2 .box-container .box-list .box-tab {
  position: relative;
  width: 100%;
  overscroll-behavior-inline: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}


.main .container-3 .body-2 .box-container .box-list .box-tab .right-swap-btn {
  position: absolute;
  width: 8rem;
  stroke: white;
  opacity: 80%;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  
  transition: .4s ease-in-out;
}


.main .container-3 .body-2 .box-container .box-list .box-tab .right-swap-btn .first-arrow {
  opacity: 0;
  animation: arrowMovementRight 2s .3s  infinite;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .right-swap-btn .second-arrow {
  opacity: 0;
  animation: arrowMovementRight 2s  infinite;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .left-swap-btn {
  position: absolute;
  width: 8rem;
  stroke: white;
  opacity: 80%;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: .4s ease-in-out;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .left-swap-btn .first-arrow {
  opacity: 0;
  animation: arrowMovementLeft 2s .3s   infinite;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .left-swap-btn .second-arrow {
  opacity: 0;
  animation: arrowMovementLeft 2s infinite;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .box-element-tab {
  position: relative;
  display: inline-flex;
  overflow-x: scroll;
  column-gap: 5rem;
  width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.main .container-3 .body-2 .box-container .box-list .box-tab .box-element-tab::-webkit-scrollbar {
  display: none;
}
.main .container-3 .body-2 .box-container .box-list .box-tab .inline {
  scroll-snap-type: inline mandatory;
  
  
}

.main .container-3 .body-2 .box-container .box-list .box-tab .box-element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .box-element .img-container {
  position: relative;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .box-element .img-container img {
  border-radius: .5rem;
  aspect-ratio: 3/4;
  max-width: 300px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .box-element .img-container .number {
  position: absolute;
  top: 2%;
  left: 3%;
  background: #27292963;
  backdrop-filter: blur(3px);
  color: white;
  border-radius: .5rem;
  padding: .5rem 1rem;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .box-element .text {
  background-color: #2729295d;;
  color: white;
  border-radius: .5rem;
  padding: 1rem 2rem;
  margin-top: 1rem;
}

.main .container-3 .body-2 .box-container .box-list .box-tab .box-element .text h4{
  margin-bottom: .5rem;
}
.main .container-3 .body-2 .box-container .box-list .box-tab .box-element .text h5 {
  margin-top: .3rem;
}


      .main .container-3 .body-2 .box-container .box-list .close-2 {
          width: 5rem;
          position: absolute;
          top: 2%;
          right: 2%;
          fill: white;
          cursor: pointer;
          user-select: contain;
          z-index: 6;
  }

  .main  .container-3 .body-2 .box-container .box-list.enabled {
    opacity: 1;
    visibility: visible;
  }

      .main  .container-3 .body {
            width: 100%;
            height: 100%;
            display: flex; 
            justify-content: center;
      }
      .main .container-3 .body iframe {
                aspect-ratio: 16/9;
                width: 100%;
                max-width: 600px;
                

                border-radius: 1rem;
                overflow: hidden;
                
         
    }

    @media (min-width:400px) {
      .main  .container-3 .body-2 .secret-box {
        border-radius: .5rem;
      }
    }

    @media (min-width:800px) {
      .main  .container-3 .body-2 .secret-box.enabled {
        width: 400px;
      }
    }

    @media (min-width: 1050px) {
      .main .container-3 {
            
            
          padding-top: 8rem;
      }
      .main .container-3 .vc {
                display: block;
            }


                

                      
                
      
    }

    

    .main .container-4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 8rem;
        background: var(--bg-color-primary);
    }
    .main .container-4 .body {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: start;
            column-gap: 4rem; 
            row-gap: 4rem;
            padding: 0 2rem;
            margin-top: 2rem;
            max-width: 1600px;
    }
    .main .container-4 .body .lot {
                display: flex;
                flex-direction: column;
                width: 100%;
                
                max-width: 300px;
                padding: 1rem;

                border-radius: .5rem;
    }
    .main .container-4 .body .lot .img-container {
                    position: relative;
                    border-radius: .5rem;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    max-height: 400px;
    }
    .main .container-4 .body .lot .img-container .number {
                        padding: .3rem 1rem;
                        background: var(--bg-color-secondary);
                        border-radius: 2rem;
                        position: absolute;
                        left: 4%;
                        top: 3%;
                    }

    .main .container-4 .body .lot .img-container img {
                        object-fit: cover;
                        width: 100%;

                    }
                

    .main .container-4 .body .lot .text {
                    margin-top: 1rem;
 
    }

  @media (min-width:1000px) {
      .container-4 {
        padding-top: 10rem;
      }
      .container-4 .body {
          margin-top: 3rem;
        }

}