:root {
    --font-primary: "Roboto", sans-serif;
    --font-secondary: "Helvetica Neue", sans-serif;
    --font-teko: "Teko", sans-serif;
}

.app_download .app_download__wrapper .app_download__content {
    flex-direction: row;
    gap: 0px;
}
.app_download__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 0px 48px;
}
.app_download_logo {
    text-align: start;
}
.app_download_background {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
}

.app_download_visuals {
    position: relative;
    z-index: 1;
}
.app_download_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 442px;
    height: 442px;
    background: radial-gradient(
        circle,
        rgba(255, 184, 1, 1) 0%,
        rgba(111, 60, 19, 0) 70%
    );
    transform: translate(-50%, -50%);
    filter: blur(188px);
    z-index: -1;
    pointer-events: none;
}
/* backcircle */
.app_download_close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
}
.app_download_close img {
    transition: transform 0.3s ease, filter 0.3s ease;
}
.app_download_close:hover img {
    transform: rotate(90deg) scale(1.1);
    filter: brightness(0) saturate(100%) invert(81%) sepia(56%) saturate(1545%)
        hue-rotate(1deg) brightness(103%) contrast(97%);
}
.app_download {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: fixed;
    inset: 0;
    backdrop-filter: blur(8px);
    background: #00000080;
    z-index: 9999999;
}
.app_download .app_download__wrapper {
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(6px);
    padding: 2px;
}
.app_download__wrapper .app_download_close {
    background-color: #1a1a1a;
    padding: 5px;
    border-radius: 2px;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app_download .app_download__wrapper .app_download__content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    max-width: 1020px;
    flex-direction: row;
}
.app_download__content .app_download_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
    text-align: center;
    padding: 60px 16px;
    animation: slideInLeft 1s ease-out forwards;
}
.app_download_text .app_download_logo {
    width: 168px;
}
.app_download_text .app_download_heading {
    font-family: var(--font-teko);
    font-size: 43px;
    line-height: 130%;
    font-weight: 500;
}
.app_download_text .app_download_text_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app_download_text .app_download_highlight {
    display: block;
    color: #f8ba20;
    font-size: 40px;
    white-space: nowrap;
}
.app_download_text .app_download_description {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
}
.app_download_description .app_download_description_break {
    display: block;
}
.app_download_text .app_download_button {
    background: linear-gradient(180deg, #f0d670 0%, #bb891a 100%);
    border: none;
    color: #111111;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    line-height: 20px;
    width: 100%;
    max-width: 328px;
    height: 52px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s all;
    position: relative;
    text-transform: uppercase;
}
.app_download_button:hover {
    box-shadow: 0px 6px 12px 0px rgba(131, 131, 131, 0.6);
}
.frutiger-button:active {
    box-shadow: 0px 0px 0px 0px #74747400;
}
.app_download_text .app_download_button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: app_download_thing 3s ease infinite;
}
.app_download__content .app_download_visuals {
    padding: 35px 80px;
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.app_download_visuals .app_download_visual_logo {
    display: none;
}
.app_download_visuals .app_download_mobile {
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: slideInUp 1.5s ease-out forwards;
}
.app_download_visuals .app_download_audience_container {
    width: 200px;
    height: 57px;
    position: absolute;
    top: 34%;
    left: -7%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border: 0.5px solid #6a4206;
    border-radius: 8px;
    background: linear-gradient(
        46.01deg,
        rgba(37, 27, 0, 0.5) 18.6%,
        rgba(106, 66, 6, 0.5) 97.72%
    );
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: slide_audience_left 1.5s ease-out forwards;
}
.app_download_audience_container .app_download_audience_wrapper {
    display: flex;
    flex-direction: column;
    transition: transform 0.6s ease-in-out;
}
.app_download_audience_wrapper .app_download_audience {
    width: 100%;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}
.app_download_audience .download_audience_detail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 10px;
}
.download_audience_detail .audience_profilepic {
    width: 30px;
    height: 30px;
}
.app_download_audience .audience_description {
    display: flex;
    flex-flow: column;
    text-align: left;
    font-family: var(--font-secondary);
}
.audience_description .audience_money {
    font-weight: 500;
    font-size: 16px;
    line-height: 130%;
    text-align: left;
}
.audience_description .audience_claim {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    font-family: var(--font-secondary);
    color: #ffffff99;
}
.app_download_visuals .app_download_treasurebox {
    position: absolute;
    width: 146px;
    height: 145px;
    top: 15%;
    right: 15%;
    animation: popupshake 5s infinite linear;
}
.app_download_visuals .game_card {
    display: flex;
    flex-direction: column;
    width: 107px;
    height: auto;
    padding: 10px 5px;
    border: 0.5px solid #6a4206;
    border-radius: 10px;
    transform: rotate(18deg);
    background-color: rgba(37, 27, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(3px);
    position: absolute;
    top: 56%;
    left: 21%;
    animation: gameshake 7s infinite linear;
}
.app_download_visuals .game_card .redplane {
    width: 96px;
    height: 96px;
}
.app_download_visuals .game_card .game_card_content {
    font-family: Helvatica, sans-serif;
    font-weight: 700;
    font-size: 12px;
}
@keyframes popupshake {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(15deg);
    }
    75% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0);
    }
}
@keyframes gameshake {
    0% {
        transform: rotate(18deg);
    }
    50% {
        transform: rotate(25deg);
    }
    75% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(18deg);
    }
}
@keyframes app_download_thing {
    0% {
        background-position: 130%;
        opacity: 1;
    }

    to {
        background-position: -166%;
        opacity: 0;
    }
}
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide_audience_left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(20%);
        opacity: 1;
    }
}
.stop__popscroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
/* 24 changes */
.cls_khelo_24Bet .app_download_highlight {
    background: linear-gradient(270deg, #3bb31d 0%, #3faae7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cls_khelo_24Bet .app_download_text .app_download_button {
    background: linear-gradient(180deg, #45abf1 0%, #44b623 100%);
}

.cls_khelo_24Bet .app_download_close:hover img {
    transform: rotate(90deg) scale(1.1);
    filter: brightness(0) saturate(100%) invert(74%) sepia(51%) saturate(822%)
        hue-rotate(41deg) brightness(101%) contrast(96%);
}
.cls_khelo_24Bet .app_download_visuals .game_card {
    background: #091f10b2;
}

.cls_khelo_24Bet .app_download_audience .download_audience_detail {
    border: 0.5px solid;

    border-image-source: linear-gradient(
        46.01deg,
        #002512 18.6%,
        #066a45 97.72%
    );

    background: #091f10b2;
}
.cls_khelo_24Bet .app_download_visuals .app_download_audience_container {
    border: 0.5px solid;
    border-image-source: linear-gradient(
        46.01deg,
        #002512 18.6%,
        #066a45 97.72%
    );
}
.cls_khelo_24Bet .app_download_circle {
    background: radial-gradient(
        circle,
        rgba(60, 177, 72, 1) 0%,
        rgba(60, 177, 72, 0) 70%
    );
}
@media (max-width: 1024px) {
    .app_download .app_download__wrapper {
        border: none;
    }

    .app_download_text .app_download_button {
        width: 300px;
        height: 40px;
    }
}
@media (max-width: 920px) {
    .app_download__top{
        padding: unset;
    }
    .app_download_logo {
        width: 112px;
    }
    .app_download_text .app_download_description {
        font-size: 13px;
    }
    .app_download_audience_container .app_download_audience_wrapper {
        width: 144px;
    }
    .app_download {
        background: #010101;
        backdrop-filter: blur(6px);
    }
    .app_download .app_download__wrapper {
        padding: 10px;
        border: none;
    }
    .app_download .app_download__wrapper .app_download__content {
        flex-direction: column;
        gap: 0px;
    }
    .app_download__content .app_download_text {
        gap: 0px;
        padding: 0 14px;
        order: 2;
    }
    .app_download__content .app_download_logo {
        display: none;
    }
    .app_download__content .app_download_visuals {
        order: 1;
        flex-direction: column;
        padding: 0px;
    }
    .app_download_visuals .app_download_mobile {
        width: 264px;
        height: 357px;
    }
    .app_download_text .app_download_heading {
        font-size: 33px;
        line-height: 1.2 !important;
        margin-block-start: unset !important;
        margin-block-end: unset !important;
    }

    .app_download_text .app_download_highlight {
        font-size: 33px;
    }
    .app_download_visuals .app_download_audience_container {
        width: 144px;
        top: 32%;
        left: -9%;
    }
    .app_download_visuals .app_download_treasurebox {
        top: 16%;
        right: -2%;
    }

    .audience_description .audience_claim {
        font-size: 10px;
    }
    .audience_description .audience_money {
        font-size: 12px;
    }
    .app_download_visuals .game_card {
        width: 98px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 2px;
    }
    .app_download_visuals .app_download_visual_logo {
        display: block;
        margin-bottom: 9px;
    }
    .app_download .app_download__wrapper .app_download__content {
        height: 90%;
    }
    .app_download_visuals .game_card .redplane {
        width: 86px;
        height: 85px;
    }

    .app_download_visuals .game_card {
        top: auto;
        bottom: 0;
        left: 15%;
    }
    .app_download__wrapper .app_download_close {
        right: 11%;
    }
}
@media (max-width: 768px) {
    .app_download_visuals .app_download_audience_container {
        top: 32%;
        left: -24%;
    }
    .app_download_visuals .app_download_treasurebox {
        top: 11%;
        right: -11%;
    }
}
@media (max-width: 640px) {
    .app_download__content .app_download_visuals {
        width: 100%;
    }
    .app_download .app_download__wrapper .app_download__content {
        height: 100%;
    }
    .app_download_visuals .app_download_treasurebox {
        top: 12%;
        right: 2%;
    }
    .app_download .app_download__wrapper {
        padding: 10px;
        width: 100%;
        height: 100dvh;
        border: none;
        display: flex;
        align-items: initial;
        padding: 20px 0 40px 0;
    }
    .app_download_visuals .app_download_audience_container {
        top: 32%;
        left: -10%;
    }

    .app_download__top {
        margin-bottom: 40px;
    }
}
@media (max-width: 380px) and (max-height: 700px) {
    .app_download_visuals .app_download_mobile {
        width: 254px;
        height: 347px;
    }
    .app_download_visuals .app_download_treasurebox {
        top: 13%;
        right: 1%;
    }
    .app_download_visuals .game_card .redplane {
        width: 66px;
        height: 65px;
    }
    .app_download_visuals .game_card {
        bottom: 5%;
    }
    .app_download_visuals .app_download_visual_logo {
        margin-bottom: 5px;
    }
    .app_download_text .app_download_description {
        margin-bottom: 0;
    }

    .app_download_text .app_download_text_content {
        gap: 0;
    }

    .app_download_text .app_download_description {
        font-size: 14px;
    }

    .app_download_text .app_download_heading {
        margin-bottom: 0;
    }

    .app_download__content .app_download_text {
        gap: 20px;
    }

    .app_download__top {
        margin-bottom: 5px;
    }

    .app_download .app_download__wrapper .app_download__content {
        gap: 30px;
    }
}
@media (min-width: 1024px) {
    .module-border-wrap {
        position: relative;
        padding: 1px;
        border-radius: 20px;
        z-index: 0;
        overflow: hidden;
    }
    .module-border-wrap::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200%;
        height: 200%;
        transform: translate(-50%, -50%) rotate(0deg);
        transform-origin: center;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(
            360deg,
            #a1902e,
            #ffdb66 35%,
            #baa73e 40%,
            #fff8d4 44%,
            #6e5706 48%,
            #574300 52%,
            #fff6c7 56%,
            #ab8f00 76%,
            #ab8f00
        );
        background-size: cover;
        animation: rotateBorder 8s linear infinite reverse;
    }
    .module-gradient-one {
        background: #010101;
        color: white;
        border-radius: 20px;
        padding: 30px 46px;
        position: relative;
        z-index: 1;
    }
    @keyframes rotateBorder {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(-360deg);
        }
    }
    .cls_khelo_24Bet .module-border-wrap::before {
        background: linear-gradient(
            360deg,
            #45abf1,
            #44b623 35%,
            #45abf1 40%,
            #44b623 44%,
            #45abf1 48%,
            #44b623 52%,
            #45abf1 56%,
            #44b623 76%,
            #45abf1
        );
    }
}

@media (max-width: 320px) {
    .app_download_visuals .app_download_audience_container {
        left: -6%;
    }

    .app_download__top{
        padding: 0 10px;
    }
    }