@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bangers&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body,
html {
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
}
body{
    overflow-x:hidden;
}
body::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}
:root {
    --pf: "Poppins", serif;
    --sf: "Source Sans 3", sans-serif;
    --title: "Audiowide", sans-serif;
    --game: "Inter", sans-serif;
}

body {
    font-family: "Poppins", serif;
    background-color: #0D171F;
    color: white;
    margin: auto;
}

.header img {
    width: 7rem;
}

.title {
    font-family: var(--title);
}

.swiper-slide .text {
    width: 90%;
    margin: auto;
}


.both {
    position: relative;
    width: 90%;
    margin: auto;
    min-height: 19rem;
}

.outer-container {
    --r: 2.1rem;
    --s: 4.1rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 70%;
    height: 18rem;

    margin: auto;
    border-radius: 20px;
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%, #0000 72%) no-repeat;
    mask:
        calc(var(--s) + var(--r)) 0 var(--_m),
        0 calc(var(--s) + var(--r)) var(--_m),
        radial-gradient(var(--s) at 0 0, #0000 99%, #000 101%) var(--r) var(--r) no-repeat,
        conic-gradient(at calc(var(--s) + 2*var(--r)) calc(var(--s) + 2*var(--r)),
            #000 75%, #0000 0);
    background-color: white;
}

.inner-container {
    position: absolute;
    left: -2px;
    top: -5px;
    width: 5.5rem;
    overflow: hidden;
    z-index: 10;
    height: 5.6rem;
}

.text-primary {
    color: #007bff;
    /* Text color */
    margin: 0;
    /* Remove default margin */
}

.rating {
    border: 3px solid pink;
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}



.search {
    background-color: #15202c;
    /* width: 94% /* MOBILE VIEW */
    ;
    margin: auto;
}

.search input {
    background-color: transparent;
    outline: 0;
    border: 0;
}

.search ::placeholder {
    color: #80868c !important;
    font-size: 0.7rem;
}

.search .bi-search {
    color: #80868c !important;
    font-size: 0.75rem !important;
}

.bi-gear {
    background-color: #1b2c3a !important;
}

.explore {
    /* width: 140%; */
}

.explore .active {
    color: #4665ee !important;
    transform: scale(1.05);
}

.active p {
    color: #4665ee !important;
}

.explore p {
    color: #a2a6a8;
    font-size: 0.8rem;
}

.explore .active i {
    display: none !important;
}

.explore div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.explore .bi {
    font-size: 0.25rem;
    margin-top: 0.25rem;
    display: none;
}


.download p {
    background: linear-gradient(145deg, #4567ff 40%, #002351 80%);
}

.reviews i {
    color: orange;
    font-size: 0.80rem;
}


.slide .fs-xs {
    font-size: 0.35rem !important;
}

.slide .active {
    color: rgb(214, 214, 214) !important;
}

.slide i {
    color: #626568;
}

.hot {
    margin-left: 0.8rem;
}

.desktop {
    width: 100%;
    margin: auto;
}
.mySwiperMain .swiper-wrapper{
    height:22rem;
}
.limit-lines {
    display: -webkit-box; /* Use flexbox */
    -webkit-box-orient: vertical; /* Set the orientation */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    overflow: hidden; /* Hide the overflow */
    text-overflow: ellipsis; /* Add ellipsis (...) */
}
.titledescription{
    width:100%;
}
.endMobile{
     left:0;
     right:auto;
     margin-left:1rem;
}
.col-md-2 {
    flex: rererer;
    /* Set the width to 2.5 columns */
    max-width: 20uze;
    /* Ensure it does not exceed this width */
}
@media screen and (min-width: 768px) {
    .hotBody{
         overflow-x: hidden !important;
    }
    .col-md-2 {
        flex: 0 0 20%;
        /* Set the width to 2.5 columns */
        max-width: 20%;
        /* Ensure it does not exceed this width */
    }
    .endMobile{
        right:0;
        left:auto;
        margin-left:0;
   }
    .titledescription{
        width:50%;
    }
    .swiper-container-main {
        width: 80% !important;
        /* Main image area */
    }
    .mySwiperMain .swiper-wrapper{
        height:auto;
    }

    .desktop {
        width: 75%;
        margin: auto;
    }

    .game {
        width: 92%;
    }

    .appPreview {
        width: 30% !important;
        right: 0 ;
        left: unset !important;
    }

    .appInfo {
        border-top-left-radius: 2rem !important;
        border-top-right-radius: 2rem !important;
    }

    .appName {
        font-size: 1rem !important;
    }

    .appDescription {
        font-size: 0.87rem !important;
    }

    .actionBtn {
        width: 30% !important;
        left: auto !important;
        right: 0 !important;
    }

    .bi-chevron-left {
        font-size: 1rem !important;
    }

    .bi-star {
        font-size: 1rem !important;
    }

    .bi-lighting-charge,
    .bi-cloud-arrow-down,
    .bi-controller {
        font-size: 1.1rem !important;
    }

    .actionFlex p {
        font-size: 0.75rem !important;
    }

    .actionFlex i {
        font-size: 1.15rem !important;
    }

    .overlayApp {
        width: 100%;
        height: 100vh;
        z-index: 40;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.336);
        display: none;
        backdrop-filter: blur(3px);
    }

    @keyframes fadeInFromRight {
        0% {
            right: -100%;
            /* Start position off-screen to the right */
            opacity: 0;
            /* Start as invisible */
        }

        100% {
            right: 0;
            /* End position */
            opacity: 1;
            /* Fully visible */
        }
    }

    .appPreview {
        right: -100%;
        /* Start off-screen */
        opacity: 0;
        /* Initial opacity */
        /* Center vertically */
        animation: fadeInFromRight 0.5s ease-in-out forwards;
        /* Apply the animation */
    }

    .appPreview.visible {
        right: 0;
        opacity: 1;
    }

}

.hotHeader div {
    margin-right: 1rem;
}

.hotBody {
    overflow-x: scroll;
}

.hotApp .type {
    background-color: #15202c;
    color: #80868c !important;
}

.appPreview {
    background-color: #15202c;
    display: none;
    height:100%;
    overflow-y: auto;
}

.appNavigate {
    height: 35vh;
    position: relative;
}

.appNavigate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/img/bg.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(3.5px);
    /* Adjust the blur value */
    z-index: -1;
    /* Send it behind the text */
    opacity: 1;
    /* Optional: to make the blur less prominent */
}


.appNavigate i {
    background-color: #0d171f59;
}

.appInfo {
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    background-color: #0D171F;
    margin-top: -4rem;
    width: 100%;
    min-height:100vh;
}

.appInfo .container {
    width: 95%;
    margin: auto;
}

.appDescription {
    font-family: var(--sf);
}

.last {
    color: #535658;
}

.incentive {
    width: 100%;
    background-color: #15202c;
    border-radius: 1rem;
}

.vr {
    align-self: auto !important;
    height: 3rem;
    max-height: 3rem;
    opacity: 0.15 !important;
}

.actionBtn {
    background-color: #080e13;
}

.actionFlex {
    width: 90%;
    margin: auto;
    background: #007bff;
}

.relativeBody .hotApp {
    margin-bottom: 6rem;
}














/* after */


.swiper-container-main {
    width: 100%;
    /* Main image area */
}

.swiper-container-thumbs {
    width: 20%;
    /* Thumbnails area */
    font-family: var(--sf);
    font-weight: 500;
}

.mySwiperThumbs .swiper-slide {
    width: 100%;
}

.mySwiperThumbs .active {
    background-color: #15202c;
}

.mySwiperThumbs .active p {
    color: white !important;
}

.swiper-slide img {
    height: auto;
}

.mySwiperThumbs .swiper-slide img {
    width: 3rem;
    height: 4rem;
    border-radius: 0.5rem;
}

.contain {
    width: 97%;
    margin: auto;
}


.mySwiperMain .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(0px);
    z-index: -1;
    opacity: 0.7;
    /* Optional: Adjust transparency */
    border-radius: 0.5rem;
    background-image: var(--background-url);

}



.mySwiperThumbs .swiper-slide {
    position: relative;
    /* Position for the pseudo-element */
    overflow: hidden;
    /* Hide overflow */
}

.mySwiperThumbs .swiper-slide::after {
    content: '';
    /* Empty pseudo-element */
    position: absolute;
    /* Absolutely position it */
    top: 0;
    left: -100%;
    /* Start off-screen */
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    background-color: #1f2b38;
    /* White background */
    z-index: 0;
    /* Set z-index below the content */
    pointer-events: none;
    /* Prevent interference with clicks */
    transition: none;
    /* Disable transition initially */
}

.mySwiperThumbs .swiper-slide.active::after {
    animation: slideIn 5s forwards;
    /* Trigger animation for active class */
}

@keyframes slideIn {
    0% {
        left: -100%;
        /* Start off-screen */
    }

    100% {
        left: 0;
        /* Move into view */
    }
}

.mySwiperThumbs .swiper-slide img {
    position: relative;
    /* Ensure the image is above the pseudo-element */
    z-index: 1;
    /* Set z-index above the background */
}

.mySwiperThumbs .swiper-slide p {
    position: relative;
    /* Ensure the text is above the pseudo-element */
    z-index: 1;
    /* Set z-index above the background */
}


.game {
    font-family: var(--game);
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-20px);
        /* Start and end at original position */
    }

    50% {
        transform: translateY(-40px);
        /* Move up by 10px */
    }
}

.bounce {
    animation: bounce 10s ease-in-out infinite;
}

.col-3-5 {
    flex: 0 0 29.167%;
    max-width: 29.167%;
}

.col-8-5 {
    flex: 0 0 70.833%;
    max-width: 70.833%;
}



.navbar , .bg-dark{
    background-color:transparent !important;
}


.text-bg-dark{
    background-color:#0D171F !important;
}
.offcanvas {
    width:100% !important;
}
.offcanvas-backdrop{
    background:#0000004d  !important;
}
a:hover{
    text-decoration:none !important;
}