/* ==================================================================*/
/* QBit Page */
/* ==================================================================*/

.qbit-header {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
            to bottom,
            rgba(255,255,255,0) 90%,
            #ffffff 100%
    );
}
.qbit-header-bg{
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.qbit-header-bg.bg-1{
    background-image: url(../img/qbit-page/qbit-header.webp);
}

.qbit-header-bg.bg-2{
    background-image: url(../img/qbit-page/qbit-header-02.webp);
    opacity: 0;
}
.qbit-header-bg.bg-1::after,
.qbit-header-bg.bg-2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 90%, #ffffff 100%);
    pointer-events: none;
}
.qbit-header .qbit-image {
    max-width: 100%;
    height: auto;
}

.qbit-mid .top-mid {
    height: 500px;
    background: linear-gradient(to bottom, white 10%, black 90%);
    margin-bottom: -10px;
    position: relative;
    z-index: 2;
}
.qbit-mid .qbit-content {
    height: 100vh;
    background:
            linear-gradient(to bottom, black 0%, rgba(255,255,255,0) 40%),
            url(../img/qbit-page/qbit-mid-background.webp) no-repeat center bottom / cover;
}
.qbit-mid .bottom-mid {
    height: 500px;
    margin-top: -250px;
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 50%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 50;
    position: relative;
}
.qbit-content .bottom-mid {
    z-index: 2;
    position: relative;
}
.qbit-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    color: #fff;
}

.qbit-content .mid-content p {
    font-size: 20px;
    text-align: justify;
}
.qbit-content .mid-content {
    max-width: 600px;
    position: absolute;
    right: 10vw;
}
.qbit-content .mid-content h3 {
    color: #fff;
    font-weight: 900;
    font-size: 32px;
}
.qbit-content .mid-content a {
    background: #fff;
    padding: 10px 15px;
    color: #000;
    font-weight: 600;
    border-radius: 7px;
}
.see-more {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.qbit-content .qbit-content-image {
    position: absolute;
    left: 30vw;
    bottom: 22vh;
    opacity: 1;
}



.packages-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 40px 0;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    max-width: 1280px;
    padding-inline: 20px;
    margin-inline: auto;
}

.packages-title span {
    padding: 0 20px;
    white-space: nowrap;
}

.packages-title::before,
.packages-title::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #000;
    margin: 0 10px;
}

.qbit-game-packages {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.3s ease;
}

.qbit-game-packages .single-game {
    height: 450px;
    border-radius: 50px;
    width: 95px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.4s ease, flex 0.4s ease;
}
.qbit-game-packages .single-game::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, #000 120%);
    pointer-events: none;
    z-index: 0;
}
.qbit-game-packages .single-01 {
    background: url("../img/qbit-page/game-packages/game-01.webp") no-repeat center bottom / cover;
}
.qbit-game-packages .single-02 {
    background: url("../img/qbit-page/game-packages/game-02.webp") no-repeat center bottom / cover;
}
.qbit-game-packages .single-03 {
    background: url("../img/qbit-page/game-packages/game-03.webp") no-repeat center bottom / cover;
}
.qbit-game-packages .single-04 {
    background: url("../img/qbit-page/game-packages/game-04.webp") no-repeat center bottom / cover;
}
.qbit-game-packages .single-05 {
    background: url("../img/qbit-page/game-packages/game-05.webp") no-repeat center bottom / cover;
}
.qbit-game-packages .single-06 {
    background: url("../img/qbit-page/game-packages/game-06.webp") no-repeat center bottom / cover;
}
.qbit-game-packages .single-active {
    width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
}
.qbit-game-packages .game-package {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}
.single-game p {
    font-size: 10px;
    color: #fff;
    text-align: justify;
    z-index: 1;
    visibility: hidden;
}
.single-game .single-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    margin-bottom: 10px;
    visibility: hidden;
}
.single-game .single-game-header h4 {
    color: #fff;
    margin: 0;
}
.single-game .see-video {
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
}
.single-game .see-video a {
    background: #fff;
    z-index: 1;
    font-size: 9px;
    padding: 4px 10px;
    border-radius: 3px;
}
.single-active .single-game-header,
.single-active .see-video,
.single-active p{
    visibility: visible;
}


.qbit-before-footer {
    height: 100vh;
    background: linear-gradient(0deg, #AABBC8 0%, #A8BAC8 45%, #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}


.qbit-inner-before-footer{
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    display: flex;
    column-gap: 40px;
    align-items: center;
    justify-content: center;
    height: 500px;
    background: linear-gradient(0deg, #AABBC8 0%, #A8BAC8 45%, #8FA2B2 100%);
}
section.qbit-footer {
    background: linear-gradient(0deg, #000000 50%, #000000 34%, #AABBC8 100%);
    height: 70vh;
    position: relative;
    z-index: 10;
    margin-top: -140px;
}
.right-roller {
    position: relative;
    min-height: 320px;
    width: 50%;
    max-width: 650px;
    display: flex;
    justify-content: flex-end;
}

.glass-pills{
    position: relative;
    width: 260px;
    height: 420px;
    /*margin: 0 auto;*/
}

.glass-pills .pill{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity, filter;
}

.glass-pills .pill img{
    display: block;
    width: 180px;
    height: auto;
}


.left-roller{
    position: relative;
    overflow: hidden;
    height: inherit;
    width: 50%;
    max-width: 650px;
}

.left-roller .roller-content{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: 40px;
    opacity: 0;
}

.left-roller .roller-content p{
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    text-align: justify;
    margin-bottom: 20px;
}
.roller-content img {
    margin-bottom: 15px;
    border-radius: 20px;
}
.roller-content h3 {
    margin-bottom: 10px;
    color: #fff;
}
.roller-content a {
    background: #fff;
    padding: 6px 10px;
    color: #000;
    font-weight: 400;
    border-radius: 7px;
    font-size: 12px;
}
.img-gallery {
    display: flex;
    justify-content: space-between;
}
.qbit-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
.qbit-inner-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qbit-inner-footer img {
    margin-bottom: 20px;
}
.qbit-inner-footer p {
    font-size: 16px;
    color: #fff;
}
.footer-btn a {
    background: #fff;
    padding: 5px 15px;
    border-radius: 5px;
}
.footer-btn {
    display: flex;
    gap: 20px;
}
.qbit-inner-footer > * {
    opacity: 0;
    transform: translateY(40px);
}