.jumbo {
    height: 319px;
    background: linear-gradient(0turn, #141522 .8%, #0ac16f26);
}


.bg-b-csm {
    background-image: url(/images/app/back.png);
    height: 325px;
    background-size: contain;
    opacity: .1;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    transform: rotate(-4.9deg);
    transform-origin: 18px center;
}

.earn_header {
    display: flex;
    align-items: center;
    gap: 6rem;
    justify-content: center;
}

.px-\[var\(--margin-x\)\] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.jum_t {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: -245px;
    z-index: 1;
}

.text-up {
    text-transform: uppercase;
}

.text-app {
    color: #00ff8d;
}

.tracking-wide {
    letter-spacing: .025em;
}

.csm_btn_log_3 {
    background: linear-gradient(1turn, #0ab367 .8%, #08d97b);
    height: 41px;
    width: 181px;
    display: flex;
    border-radius: 7px;
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    border: solid 2px #ffffff6e;
}

.card {
    --tw-shadow: 0 3px 10px 0 rgb(48 46 56/6%);
    --tw-shadow-colored: 0 3px 10px 0 var(--tw-shadow-color);
    background: #1c1d2f;
    border-radius: .5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    overflow-wrap: break-word;
    position: relative;
}


.join_ {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.css-1vain64 {
    max-width: 675px;
}


.css-winrmq {
    line-height: 1.5;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}

.css-fdcrqo {
    max-width: 675px;
    margin-top: 16px;
}

.css-n7mdwp {
    line-height: 1.5;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #A9A9CA;
}

.css-1n0vvkb {
    width: 100%;
}

@media screen and (min-width: 480px) {
    .css-1n0vvkb {
        max-width: 430px;
    }
}


.css-q3lqpv {
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    cursor: pointer;
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    color: inherit;
    font-size: 14px;
}

.css-1s4407g {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
    -webkit-box-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}



.css-1lcr50o {
    color: #A9A9CA;
    font-weight: 500;
}


.css-16esi0s {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

.css-pvtq2p {
    padding-inline: 8px;
    width: 100%;
    text-align: center;
}


.css-14bj7oy {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    outline: 2px solid transparent;
    outline-offset: 2px;
    line-height: 1.2;
    border-radius: 0.5rem;
    font-weight: 700;
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;
    transition-duration: 200ms;
    padding: 0.8em 2em;
    height: 2.5rem;
    min-width: 2.5rem;
    font-size: 14px;
    -webkit-padding-start: 14px;
    padding-inline-start: 14px;
    -webkit-padding-end: 14px;
    padding-inline-end: 14px;
    background: #f21644;
    min-height: 48px;
    color: black;
    margin-top: 24px;
    width: 90%;
}


@media screen and (min-width: 1120px) {
    .css-1y04ru8 {
        width: 530px;
    }
}

@media screen and (min-width: 1120px) {
    .css-8n835e {
        max-width: 530px;
        min-width: 250px;
        margin-inline: 0px;
    }
}

@media screen and (min-width: 768px) {
    .css-8n835e {
        max-width: 600px;
    }
}

.css-8n835e {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    color: grey;
    margin-inline: auto;
}
    
.css-1tovq3n:first-of-type {
    transform-origin: left center;
}
@media screen and (min-width: 768px) {
    .css-1tovq3n:first-of-type {
        transform-origin: left center;
        transform: scale(0.85);
    }
}

@media screen and (min-width: 1120px) {
    .css-1tovq3n {
        padding: 16px;
    }
}

@media screen and (min-width: 768px) {
    .css-1tovq3n {
        transform: scale(1);
    }
}

.css-1tovq3n {
    cursor: pointer;
    border-radius: 15px;
    background-color: #252539;
    padding: 2.5vw;
    flex: 1 0 0px;
    min-width: 0px;
    transform: scale(0.95);
    position: relative;
}

.css-kwwyi {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}

.css-164r41r {
    margin-top: 8px;
}

.css-awx3qv {
    font-size: 12px;
    color: white;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 18px;
}




.css-4ooz0l {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin-top: 8px;
}


.css-1byp490 {
    display: flex;
    font-weight: 600;
    color: white;
    line-height: 16px;
}   

.css-128nlh6 {
    font-size: 13px;
}


.css-2d4plc {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    font-weight: 700;
    gap: 3px;
}

.css-1ple3px {
    width: 10px;
    height: 10px;
    display: inline-block;
    line-height: 1em;
    flex-shrink: 0;
    color: currentcolor;
    vertical-align: middle;
    fill: none;
}


.css-1j6be9o {
    line-height: 1.5;
    color: grey;
    font-weight: 500;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.custom-offer-layout {
    flex: 0 0 auto !important;
    margin-right: 20px !important;
    width: 116px !important;
    max-width: 116px !important;
    margin: 5px !important;
    padding: 5px !important;
    background-color: #1e1e2e !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #f1f5f9 !important;
    border: 1px solid #202022 !important;
    word-wrap: break-word !important;
    transition: transform 0.3s ease !important;
}


.custom-offer-layout .image-container {
    width: 80% !important;
    height: 85px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin: 0 auto;
}

.custom-offer-layout .custom-offers-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}


.custom-offer-layout > h3 {
    margin-top: 10px !important;
    font-size: 14px !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


.custom-offer-layout .custom-offers-description {
    margin-top: 5px !important;
    font-size: 11px !important;
    color: #6b7280 !important;
}


.custom-offer-layout p {
    margin-top: 10px !important;
    font-size: 11px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.custom-offer-layout img {
    vertical-align: middle !important;
    margin-right: 5px !important;
}







@media screen and (min-width: 1120px) {
    .css-1c31ebb {
        grid-gap: unset;
        grid-template-columns: 358px 600px;
    }
}

.css-1c31ebb {
    display: grid;
    grid-gap: 60px;
    grid-template-columns: 1fr;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1100px;
    width: var(--chakra-sizes-full);
    padding: 0 16px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .css-z4422x {
        margin-bottom: 0px;
        top: 160px;
        position: -webkit-sticky;
        position: sticky;
    }
}

@media screen and (min-width: 1120px) {
    .css-rmz64e {
        font-size: 32px;
    }
}

.css-rmz64e {
    text-align: left;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.css-1yfy29x {
    font-style: normal;
    color: 200;
    margin-left: 5px;
}

@media screen and (min-width: 768px) {
    .css-1yfy29x {
        margin-left: 0px;
    }
}


.css-1kk1ipk {
    display: inline-flex;
    appearance: none;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    user-select: none;
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    outline: transparent solid 2px;
    outline-offset: 2px;
    border-radius: var(--chakra-radii-lg);
    transition-property: var(--chakra-transition-property-common);
    transition-duration: var(--chakra-transition-duration-normal);
    color: var(--chakra-colors-gray-800);
    padding: 0.8em 2em;
    height: var(--chakra-sizes-10);
    min-width: var(--chakra-sizes-10);
    padding-inline-start: var(--chakra-space-4);
    padding-inline-end: var(--chakra-space-4);
    background: var(--chakra-colors-green-300);
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
    width: var(--chakra-sizes-full);
    line-height: 36px;
    margin-top: 64px;
    margin-bottom: 33px;
}


.css-q3lqpv {
    transition-property: var(--chakra-transition-property-common);
    transition-duration: var(--chakra-transition-duration-fast);
    transition-timing-function: var(--chakra-transition-easing-ease-out);
    cursor: pointer;
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    color: inherit;
    font-size: 14px;
}


.css-10u6fg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 8px;
    -webkit-box-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


.css-rzgvno {
    color: var(--chakra-colors-secondary-75);
    font-weight: 500;
}


.css-105l68b {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-box-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    width: var(--chakra-sizes-full);
}


.css-178lnsv {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 56px;
}


.css-pwy2yt {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    font-weight: var(--chakra-fontWeights-bold);
    margin-bottom: 16px;
    font-size: 20px;
}


.css-gmuwbf {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.css-292hhl {
    display: inline-block;
    line-height: 1em;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    color: currentColor;
    vertical-align: middle;
    width: 28px;
    height: 28px;
}


@media screen and (min-width: 1120px) {
    .css-292hhl {
        width: 30px;
        height: 30px;
    }
}

.css-j3bf7z {
    line-height: var(--chakra-lineHeights-base);
    font-weight: var(--chakra-fontWeights-medium);
    color: var(--chakra-colors-secondary-75);
    margin-bottom: 16px;
    font-size: 16px;
}


@media screen and (min-width: 1120px) {
    .css-1i3s5n9 {
        max-height: 350px;
    }
}


@media screen and (min-width: 768px) {
    .css-kgvjg9 {
        max-height: 350px;
        width: var(--chakra-sizes-full);
    }
}


.css-kgvjg9 {
    max-height: 300px;
    width: calc(100vw - 40px);
    overflow: hidden;
    border: 2px solid;
    border-color: var(--chakra-colors-bgColor-1200);
    background-color: var(--chakra-colors-bgColor-1100);
    border-radius: 10px;
}


@media screen and (min-width: 1120px) {
    .css-1lq28bt {
        -webkit-transform: rotate(-15deg) scale(1.7) translateY(-40px);
        -moz-transform: rotate(-15deg) scale(1.7) translateY(-40px);
        -ms-transform: rotate(-15deg) scale(1.7) translateY(-40px);
        transform: rotate(-15deg) scale(1.7) translateY(-40px);
    }
}


@media screen and (min-width: 768px) {
    .css-1lq28bt {
        -webkit-transform: rotate(-15deg) scale(1.5) translateY(-40px);
        -moz-transform: rotate(-15deg) scale(1.5) translateY(-40px);
        -ms-transform: rotate(-15deg) scale(1.5) translateY(-40px);
        transform: rotate(-15deg) scale(1.5) translateY(-40px);
    }
}


@media screen and (min-width: 480px) {
    .css-1vamp37 {
        margin-bottom: 12px;
    }
}

@media screen and (min-width: 480px) {
    .css-14kz8km {
        height: 150px;
    }
}


.css-14kz8km {
    transform-origin: center center;
    background-repeat: repeat-x;
    -webkit-background-size: contain;
    background-size: contain;
    background-image: url(https://static2.freecash.com/_next/static/media/apps-line-1-2.71c8dd52.png);
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
    width: 220vw;
    height: 80px;
}

.for-mobile-mode{
    display: none;
}

@media screen and (max-width:710px){

.for-mobile-mode{
    display: block !important;
}

.for-desktop{
    display: none !important;
}

.earn_header{
     padding-left: 0 !important;
}

.swiper-slide{
    width: 110.625px !important;
}

.css-1n0vvkb {
    width: 100%;
    justify-content: center;
}

.for-mobile-moder{
    margin-top: 15rem !important;
}

}





















/* new custom css */


@media screen and (min-width: 1120px) {
    .css-1c31ebb {
        gap: unset;
        grid-template-columns: 358px 600px;
    }
}


@media screen and (min-width: 768px) {
    .css-1c31ebb {
        grid-template-columns: 1fr 450px;
    }
}

.css-1c31ebb {
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin: 0px auto;
    max-width: 1100px;
    width: 100%;
    padding: 0px 16px;
    position: relative;
}


.css-178lnsv {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.css-pwy2yt {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    gap: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    font-size: 20px;
}


.css-gmuwbf {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

@media screen and (min-width: 1120px) {
    .css-292hhl {
        width: 30px;
        height: 30px;
    }
}


.css-292hhl {
    display: inline-block;
    line-height: 1em;
    flex-shrink: 0;
    color: currentcolor;
    vertical-align: middle;
    width: 28px;
    height: 28px;
}

.css-j3bf7z {
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--chakra-colors-secondary-75);
    margin-bottom: 16px;
    font-size: 16px;
}


@media screen and (min-width: 1120px) {
    .css-1i3s5n9 {
        max-height: 350px;
    }
}

@media screen and (min-width: 768px) {
    .css-kgvjg9 {
        max-height: 350px;
        width: 100%;
    }
}

.css-kgvjg9 {
    max-height: 300px;
    width: calc(-40px + 100vw);
    overflow: hidden;
    border-width: 2px;
    border-style: solid;
    border-image: initial;
    border-color: var(--chakra-colors-bgColor-1200);
    background-color: var(--chakra-colors-bgColor-1100);
    border-radius: 10px;
}

@media screen and (min-width: 1120px) {
    .css-1lq28bt {
        transform: rotate(-15deg) scale(1.7) translateY(-40px);
    }
}

@media screen and (min-width: 768px) {
    .css-1lq28bt {
        transform: rotate(-15deg) scale(1.5) translateY(-40px);
    }
}



@media screen and (min-width: 480px) {
    .css-1lq28bt {
        transform: rotate(-15deg) scale(1.5) translateY(-60px);
    }
}


@media screen and (min-width: 320px) {
    .css-1lq28bt {
        transform: rotate(-15deg) scale(1.4) translateY(-40px);
    }
}

.css-1lq28bt {
    transform: rotate(-15deg) scale(1.4) translateY(-40px);
}

.css-1lq28bt {
    transform: rotate(-15deg) scale(1.4) translateY(-40px);
}

.css-1vamp37 {
    margin-bottom: 10px;
}

@media screen and (min-width: 480px) {
    .css-14kz8km {
        height: 150px;
    }
}

@media screen and (min-width: 320px) {
    .css-14kz8km {
        height: 120px;
    }
}

.css-14kz8km {
    transform-origin: center center;
    background-repeat: repeat-x;
    background-size: contain;
    background-image: url("https://static2.freecash.com/_next/static/media/apps-line-1-2.71c8dd52.png");
    transform: translateX(30px);
    width: 220vw;
    height: 80px;
}


.css-omcqsq {
    margin-bottom: 7px;
}

@media screen and (min-width: 480px) {
    .css-1acdohm {
        height: 150px;
    }
}

@media screen and (min-width: 320px) {
    .css-1acdohm {
        height: 120px;
    }
}

.css-1acdohm {
    transform-origin: center center;
    background-repeat: repeat-x;
    background-size: contain;
    background-image: url("https://static2.freecash.com/_next/static/media/apps-line-2-2.65cfbf32.png");
    transform: translateX(-330px);
    width: 220vw;
    height: 80px;
}

@media screen and (min-width: 480px) {
    .css-oddlad {
        height: 150px;
    }
}

@media screen and (min-width: 320px) {
    .css-oddlad {
        height: 120px;
    }
}

.css-oddlad {
    transform-origin: center center;
    background-repeat: repeat-x;
    background-size: contain;
    background-image: url("https://static2.freecash.com/_next/static/media/apps-line-3-2.dcea8352.png");
    transform: translateX(-10px);
    width: 220vw;
    height: 80px;
}



.imgage-container-two{
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
}