/*CSS HANDLER */
  .sliderTop{
    left: 0;
    position: relative;
    top: 19%;
    height: 210px;
    transform-style: preserve-3d;
    perspective: 400px;
    width: 541.93px;

    
    .item{
      width: 306px;
      height: 168px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.7s;
      position: absolute;
  
      
      img{
        left: 1px;
        position: absolute;
        top: 1px;
        height: 99%;
        width: 99.2%;
        border-radius: 6px;
      }
    }
    .item-1, .item-2, .item-3{
      top: 50%;
      left: 50%;
    }
    
    .item-1, .item-3{
      cursor: pointer;
      opacity: 0.3;
      z-index: -999 !important;
    }
    .item-2>.layer{
        z-index: 10 !important;
    }
    .item-1{
        transform: translate(-88%, -50%);
    }

    .item-2::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 6px;
        padding: 1px;
        background: linear-gradient(137.5deg, #FFFFFF 3.5%, rgba(198, 198, 198, 0) 131.47%);
        -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    .item-2 {
        transform: translate(-50%, -50%) translateZ(80px);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
        border: none !important;
        border-radius: 6px;
        z-index: 10 !important;
    }
    
    .item-3{
        transform: translate(-12%, -50%);
    }
  }

.dots-container {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: -30px;
    height: 11px;
}

.dot::before {
    content: "";
    position: relative;
    inset: 0;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    padding: 1px;
    background: linear-gradient(142.7deg, #FFFFFF 12.5%, rgba(255, 255, 255, 0.17) 90.99%);
    -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -2;
    cursor: pointer;
}

.dot {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;    
    margin: 5px;
    cursor: pointer;
}

.dot.activeDot {
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, transparent 35%);
    -webkit-box-shadow: 0 0 5px -0.5px #ddd;
    -moz-box-shadow: 0 0 5px -0.5px #ddd;
    box-shadow: 0 0 5px -0.5px #ddd;
}

.item-1 a, .item-3 a {
    display: none !important;
}


#sliderTop .item-2 .layer::before {
     opacity: 0;
     background: #000000B2 none repeat scroll 0 0 !important;
     content: "";
     height: 100%;
     width: 100%;
     left: 0;
     right: 0;
     top: 0;
     margin: auto !important;
     position: absolute;
     border-radius: 6px !important;
     z-index: 10 !important;
}

#sliderTop .item-2 .layer:hover::before {
     opacity: 1;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     z-index: 10 !important;
}
    
#sliderTop .button {
     display: inline-block;
     float: right;
     margin: 0 auto;
     padding: 0;
     width: 100%;
     font-weight: bold;
     display: none;
     z-index: 10 !important;
}

#sliderTop .item-2 .button.for_logged,
#sliderTop .item-2 .button.for_real {
     opacity: 0;
     background: transparent !important;
     backdrop-filter: blur(10px);
     margin: auto !important;
     position: absolute !important;
     right: 0 !important;
     top: 0 !important;
     left: 0 !important;
     bottom: 0 !important;
     font-family: Montserrat !important;
     font-size: 18px !important;
     font-family: 'Montserrat' !important;
     font-weight: 600 !important;
     letter-spacing: 0em !important;
     border: 1px solid white !important;
     border-radius: 19px !important;
     text-align: right !important;
     display: block !important;
     text-transform: none !important;
     height: 34px !important;
     width: 80px !important;
     text-align: center!important;
     padding-right: 0 !important;
     padding-left: 28px !important;
     z-index: 10 !important;
}

.item-2 a {
    z-index: 10 !important;
}   

#sliderTop .item-2 .button.for_logged,
#sliderTop .item-2 .button.for_real {
     background-image: url("../img/play/play.svg") !important;
     background-position: 4px 4px !important;
     background-repeat: no-repeat !important;
     background-size: 25px auto !important;
     z-index: 10 !important;
}

#sliderTop .item-2:hover .button.for_logged,
#sliderTop .item-2:hover .button.for_real {
     opacity: 1;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     z-index: 10 !important;
}

.item {
  transition: transform 0.5s ease; /* Adjust the transition duration as needed */ 
}