/* Pagination Styles */
.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 300ms;
    z-index: 10;
    top: 50%;
    left: 1%;
    transform: translateY(-50%);

}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
}


.line-pagination{
    content: " ";
    height: 5px;
    width: 1px;
    background-color: rgb(255, 255, 255);
   
}

.line-pagination--active{
    height: 60px;
    transition: height 1350ms;


}
.line-pagination--inactive {
    height: 5px;
    transition: height 1350ms;

}

.page{
    font-size: 1.3rem;
    color: white;
    cursor: pointer;
}


.page-number .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 0.8rem;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  left: 105%;
}

.page-number:hover .tooltiptext {
  visibility: visible;
}

@media (max-width: 736px) and (orientation: landscape) {
        .swiper-pagination {
                position: absolute;
                transition: 300ms;
                top: 90%;
                left: 50%;
                transform: translateX(-50%);
        
            }
        
            .line-pagination {
                content: " ";
                height: 1px;
                width: 5px;
                background-color: rgb(255, 255, 255);
        
            }
        
            .line-pagination--active {
                width: 60px;
                height: 1px;
                transition: height 1350ms;
        
        
            }
        
            .line-pagination--inactive {
                width: 5px;
                height: 1px;
                transition: height 1350ms;
        
            }

}


@media (max-width:639px) {

    .swiper-pagination {
            position: absolute;
			display:none;
            transition: 300ms;
            top: 95%;
            left: 50%;
            transform: translateX(-50%);
    
    }

    .line-pagination {
            content: " ";
            height: 1px;
            width: 5px;
            background-color: rgb(255, 255, 255);
    
        }
    
        .line-pagination--active {
            width: 60px;
            height: 1px;
            transition: height 1350ms;
    
    
        }
    
        .line-pagination--inactive {
            width: 5px;
            height: 1px;
            transition: height 1350ms;
    
        }

}