/* ==========================================================
   REWARD CENTER
   ----------------------------------------------------------
   Project  : 4Download
   Module   : Reward Center
   Version  : 2.0.0
   Author   : 4Download
========================================================== */


/* ==========================================================
   REWARD CENTER
========================================================== */

.reward-section{

    margin-bottom:20px;

}

.reward-loading{

    opacity:.6;

    pointer-events:none;

}

.reward-hidden{

    display:none !important;

}

.reward-text-primary{

    color:#14A4A7;

}

.reward-text-success{

    color:#16a34a;

}

.reward-text-danger{

    color:#ef4444;

}

/* ==========================================================
   LAYOUT
========================================================== */
.reward-layout{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:20px;

    align-items:start;

    margin:20px 0;

}

.reward-content{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ==========================================================
   SIDEBAR
========================================================== */

.reward-sidebar{

    position:sticky;
    top:20px;

    overflow:hidden;

    background:var(--bg);

    border:1px solid var(--bdc);

    border-radius:20px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 15px 35px rgba(0,0,0,.08),
        var(--bsh-item);

}

/* top highlight */

.reward-sidebar:before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(255,255,255,.08);

}

.reward-sidebar-header{

    position:relative;

    padding:26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,0)
        ),
        var(--bg-darker);

    border-bottom:1px solid var(--bdc);

}

.reward-sidebar-title{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--tt);

    font-size:20px;

    font-weight:700;

}

.reward-sidebar-title i{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

    font-size:20px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 10px 22px rgba(60,220,103,.18);

}

.reward-sidebar-subtitle{

    margin-top:14px;

    color:var(--tt-fade);

    font-size:13px;

    line-height:1.8;

}


.reward-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:16px;

}



.reward-menu a{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:14px;

    border:1px solid transparent;

    background:var(--bg);

    color:var(--tt);

    text-decoration:none;

    transition:
        transform .25s,
        border-color .25s,
        background .25s,
        color .25s,
        box-shadow .25s;

}

.reward-menu a:before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    border-radius:inherit;

    background:rgba(255,255,255,.06);

}



.reward-menu a i{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            rgba(71,223,114,.18),
            rgba(34,183,74,.08)
        );

    border:1px solid rgba(60,220,103,.15);

    color:var(--green);

    font-size:16px;

    transition:.25s;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25);

}


.reward-menu a:hover{

    transform:translateY(-3px);

    background:var(--bg-darker);

    border-color:rgba(60,220,103,.18);

    color:var(--green);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 20px rgba(0,0,0,.06);

}

.reward-menu a:hover i{

    background:
        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

}



.reward-menu a.active{

    background:
        linear-gradient(
            90deg,
            rgba(60,220,103,.10),
            transparent
        ),
        var(--bg-darker);

    border-color:rgba(60,220,103,.18);

    color:var(--green);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05);

}

.reward-menu a.active i{

    background:
        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

}


@media(max-width:768px){

.reward-sidebar{

    position:static;

}

.reward-menu{

    padding:12px;

}

.reward-menu a{

    padding:12px 14px;

}

.reward-menu a i{

    width:38px;
    height:38px;
    font-size:15px;

}

}

/* ==========================================================
   DASHBOARD
========================================================== */

.reward-box{

    position:relative;

    overflow:hidden;

    background:var(--bg);

    border:1px solid var(--bdc);

    border-radius:20px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 16px 35px rgba(0,0,0,.08),
        var(--bsh-item);

}

.reward-box:before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(255,255,255,.08);

}


.reward-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:28px;

    padding:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,0)
        ),
        var(--bg-darker);

    border-bottom:1px solid var(--bdc);

}

.reward-head-left{

    flex:1;

    min-width:0;

}


.reward-title{

    display:flex;

    align-items:center;

    gap:16px;

    font-size:24px;

    font-weight:700;

    color:var(--tt);

}

.reward-title i{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:
        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

    font-size:22px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 12px 24px rgba(60,220,103,.20);

}

.reward-subtitle{

    margin-top:14px;

    color:var(--tt-fade);

    font-size:14px;

    line-height:1.9;

}



.reward-points{

    min-width:240px;

    text-align:right;

}

.reward-points span{

    display:block;

    margin-bottom:8px;

    color:var(--tt-fade);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1.2px;

}

.reward-points strong{

    display:inline-block;

    padding:14px 22px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(71,223,114,.18),
            rgba(34,183,74,.08)
        );

    border:1px solid rgba(60,220,103,.18);

    color:var(--green);

    font-size:42px;

    font-weight:800;

    line-height:1;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20);

}


.reward-seo{

    padding:26px 28px;

    border-top:1px solid var(--bdc);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,0)
        );

}

.reward-seo h1{

    margin:0 0 12px;

    color:var(--tt);

    font-size:18px;

    font-weight:700;

}

.reward-seo p{

    margin:0;

    color:var(--tt-fade);

    font-size:14px;

    line-height:1.9;

}



@media(max-width:768px){

.reward-head{

    flex-direction:column;

    align-items:flex-start;

    padding:22px;

}

.reward-points{

    width:100%;

    text-align:left;

}

.reward-points strong{

    font-size:34px;

}

.reward-title{

    font-size:20px;

}

.reward-title i{

    width:48px;
    height:48px;
    font-size:20px;

}

.reward-seo{

    padding:22px;

}

}


/* ==========================================================
   PROGRESS
========================================================== */

.reward-progress-wrap{

    margin-top:22px;

}

.reward-progress-bar{

    position:relative;

    overflow:hidden;

    width:100%;

    height:14px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.08);

}

.reward-progress-fill{

    position:relative;

    overflow:hidden;

    width:0;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #47df72,
            #22b74a
        );

    box-shadow:
        0 0 18px rgba(60,220,103,.35);

    transition:
        width .5s ease;

}

/* Shine Effect */

.reward-progress-fill:after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    animation:rewardProgressShine 2.2s linear infinite;

}

@keyframes rewardProgressShine{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(220%);

    }

}

.reward-progress-text{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:10px;

    font-size:13px;

    color:var(--tt-fade);

}

.reward-progress-text strong{

    color:var(--green);

    font-weight:700;

}


/* ==========================================================
   LOGIN STREAK
========================================================== */
.streak-box{

    padding:22px;

    background:
        linear-gradient(
            90deg,
            rgba(255,140,0,.05),
            rgba(255,190,0,.05)
        );

    border:1px solid var(--bdc);

    border-radius:0 0 16px 16px;

    box-shadow:var(--bsh-item);

}

.streak-title{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

    font-weight:700;

    color:var(--tt);

}

.streak-info{

    margin-top:12px;

    font-size:30px;

    font-weight:700;

    color:#f59e0b;

}

.streak-info strong{

    color:#f59e0b;

}

.streak-bar{

    margin-top:14px;

    width:100%;

    height:10px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(245,158,11,.15);

}

.streak-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #f59e0b,
            #fbbf24
        );

    transition:
        width .4s ease;

}

.streak-text{

    margin-top:10px;

    font-size:12px;

    color:var(--tt-fade);

}

/*==================================================
REDEEM INTRO
==================================================*/

.reward-intro{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:26px;

    margin-bottom:30px;

    padding:30px;

    border:1px solid var(--bdc);

    border-radius:24px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        ),
        var(--bg);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 18px 40px rgba(0,0,0,.08),
        var(--bsh-item);

}

/* Top Highlight */

.reward-intro:before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(255,255,255,.08);

}

/* Soft Glow */

.reward-intro:after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-90px;
    top:-90px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(71,223,114,.10),
            transparent 70%
        );

    pointer-events:none;

}



.reward-intro-icon{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:82px;

    height:82px;

    flex-shrink:0;

    border-radius:22px;

    background:

        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

    font-size:34px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 14px 30px rgba(60,220,103,.22);

}


.reward-intro-content{

    position:relative;

    z-index:2;

    flex:1;

    min-width:0;

}

.reward-intro-content h2{

    margin:0;

    color:var(--tt);

    font-size:30px;

    font-weight:800;

    line-height:1.2;

}

.reward-intro-content p{

    margin-top:14px;

    max-width:760px;

    color:var(--tt-fade);

    font-size:14px;

    line-height:2;

}



@media(max-width:768px){

.reward-intro{

    flex-direction:column;

    align-items:flex-start;

    padding:24px;

    gap:20px;

}

.reward-intro-icon{

    width:70px;

    height:70px;

    font-size:30px;

}

.reward-intro-content h2{

    font-size:24px;

}

.reward-intro-content p{

    line-height:1.9;

}

}
/* ==========================================================
   REDEEM
========================================================== */

.reward-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:22px;

}


.reward-card{

    position:relative;

    overflow:hidden;

    padding:28px 22px;

    text-align:center;

    background:var(--bg);

    border:1px solid var(--bdc);

    border-radius:20px;

    transition:
        transform .25s,
        border-color .25s,
        box-shadow .25s;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 12px 28px rgba(0,0,0,.06),
        var(--bsh-item);

}

/* top highlight */

.reward-card:before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(255,255,255,.08);

}

/* glow */

.reward-card:after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    top:-70px;

    right:-70px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(60,220,103,.10),
            transparent 70%
        );

    pointer-events:none;

}


.reward-card:hover{

    transform:translateY(-6px);

    border-color:rgba(60,220,103,.18);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 18px 38px rgba(0,0,0,.08),

        var(--bsh-item);

}


.reward-card.available{

    border-color:rgba(60,220,103,.25);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 0 0 4px rgba(60,220,103,.08),

        var(--bsh-item);

}



.reward-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:

        linear-gradient(

            180deg,

            #47df72,

            #22b74a

        );

    color:#fff;

    font-size:28px;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.35),

        0 12px 24px rgba(60,220,103,.20);

}



.reward-days{

    margin-bottom:16px;

    color:var(--tt);

    font-size:19px;

    font-weight:700;

}



.reward-cost{

    color:var(--green);

    font-size:46px;

    line-height:1;

    font-weight:800;

}

.reward-cost-label{

    margin:10px 0 24px;

    color:var(--tt-fade);

    font-size:11px;

    letter-spacing:1.2px;

    text-transform:uppercase;

}



.reward-btn{

    width:100%;

    min-height:48px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:13px;

    font-weight:700;

    color:#fff;

    background:

        linear-gradient(

            180deg,

            #56ef81,

            #35c85e 58%,

            #21ab45

        );

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.30),

        inset 0 -2px 0 rgba(18,110,40,.35),

        0 10px 22px rgba(60,220,103,.20);

    transition:
        transform .25s,
        box-shadow .25s;

}

.reward-btn:hover{

    transform:translateY(-2px);

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,.35),

        inset 0 -2px 0 rgba(18,110,40,.35),

        0 18px 30px rgba(60,220,103,.25);

}

.reward-btn:active{

    transform:translateY(1px);

}

.reward-btn.disabled{

    background:

        linear-gradient(

            180deg,

            #d8d8d8,

            #bfbfbf

        ) !important;

    color:#666 !important;

    box-shadow:none;

    cursor:not-allowed;

    pointer-events:none;

}



@media(max-width:992px){

.reward-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.reward-grid{

    grid-template-columns:1fr;

}

}


/* ==========================================================
   HISTORY
========================================================== */

.reward-history{

    position:relative;

    overflow:hidden;

    background:var(--bg);

    border:1px solid var(--bdc);

    border-radius:20px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 16px 35px rgba(0,0,0,.08),
        var(--bsh-item);

}

.reward-history:before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(255,255,255,.08);

}



.reward-history-title{

    display:flex;

    align-items:center;

    gap:14px;

    padding:22px 26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,0)
        ),
        var(--bg-darker);

    border-bottom:1px solid var(--bdc);

    color:var(--tt);

    font-size:20px;

    font-weight:700;

}

.reward-history-title i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

    font-size:17px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 10px 20px rgba(60,220,103,.18);

}



.reward-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:18px 24px;

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:
        transform .25s,
        background .25s,
        box-shadow .25s;

}

.reward-item:last-child{

    border-bottom:none;

}

.reward-item:hover{

    transform:translateX(4px);

    background:var(--bg-darker);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

}



.reward-desc{

    color:var(--tt);

    font-size:15px;

    font-weight:700;

}

.reward-date{

    margin-top:6px;

    color:var(--tt-fade);

    font-size:13px;

}



.reward-points-plus,

.reward-points-minus{

    min-width:88px;

    text-align:center;

    padding:10px 14px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

}

.reward-points-plus{

    color:#22c55e;

    background:
        linear-gradient(
            180deg,
            rgba(71,223,114,.18),
            rgba(34,183,74,.08)
        );

    border:1px solid rgba(60,220,103,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20);

}

.reward-points-minus{

    color:#ef4444;

    background:
        linear-gradient(
            180deg,
            rgba(239,68,68,.16),
            rgba(220,38,38,.06)
        );

    border:1px solid rgba(239,68,68,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18);

}

@media(max-width:768px){

.reward-item{

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

}

.reward-points-plus,

.reward-points-minus{

    min-width:0;

}

}


/* ==========================================================
   FAQ
========================================================== */

.reward-faq{

    position:relative;

    overflow:hidden;

    background:var(--bg);

    border:1px solid var(--bdc);

    border-radius:20px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 16px 35px rgba(0,0,0,.08),
        var(--bsh-item);

}

.reward-faq:before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

    background:rgba(255,255,255,.08);

}



.reward-faq-title{

    display:flex;

    align-items:center;

    gap:14px;

    padding:22px 26px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,0)
        ),
        var(--bg-darker);

    border-bottom:1px solid var(--bdc);

    color:var(--tt);

    font-size:20px;

    font-weight:700;

}

.reward-faq-title i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

    font-size:17px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 10px 20px rgba(60,220,103,.18);

}


.reward-faq-item{

    border-bottom:1px solid rgba(255,255,255,.05);

}

.reward-faq-item:last-child{

    border-bottom:none;

}



.reward-faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 24px;

    border:0;

    background:none;

    cursor:pointer;

    text-align:left;

    color:var(--tt);

    font-size:15px;

    font-weight:700;

    transition:
        background .25s,
        color .25s;

}

.reward-faq-question:hover{

    background:var(--bg-darker);

    color:var(--tt);

}



.reward-faq-icon{

    width:36px;

    height:36px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:

        linear-gradient(
            180deg,
            rgba(71,223,114,.18),
            rgba(34,183,74,.08)
        );

    border:1px solid rgba(60,220,103,.15);

    color:var(--green);

    font-size:18px;

    font-weight:700;

    transition:.3s;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25);

}

.reward-faq-item.active .reward-faq-icon{

    background:

        linear-gradient(
            180deg,
            #47df72,
            #22b74a
        );

    color:#fff;

    transform:rotate(45deg);

}



.reward-faq-answer{

    max-height:0;

    overflow:hidden;

    padding:0 24px;

    color:var(--tt-fade);

    font-size:14px;

    line-height:1.9;

    transition:
        max-height .35s ease,
        padding .35s ease;

}

.reward-faq-item.active .reward-faq-answer{

    max-height:800px;

    padding:0 24px 24px;

}



.reward-faq-answer ul{

    margin:16px 0;

    padding:0;

    list-style:none;

}

.reward-faq-answer li{

    position:relative;

    padding-left:26px;

    margin:12px 0;

}

.reward-faq-answer li:before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 10px rgba(71,223,114,.35);

}


.reward-faq-tip{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-top:18px;

    padding:18px;

    border-left:4px solid var(--green);

    border-radius:14px;

    background:

        linear-gradient(
            90deg,
            rgba(60,220,103,.08),
            transparent
        ),
        var(--bg-darker);

    border-top:1px solid var(--bdc);

    border-right:1px solid var(--bdc);

    border-bottom:1px solid var(--bdc);

    color:var(--tt-fade);

    line-height:1.8;

}


/* ==========================================================
   UTILITIES
========================================================== */

.reward-loading{

    opacity:.65;

    pointer-events:none;

    user-select:none;

    transition:opacity .25s ease;

}

.reward-hidden{

    display:none !important;

}

.reward-disabled{

    opacity:.50;

    pointer-events:none;

    filter:grayscale(.15);

}



.reward-text-success{

    color:var(--green);

}

.reward-text-danger{

    color:#ef4444;

}

.reward-text-primary{

    color:var(--green);

}

.reward-text-warning{

    color:#f59e0b;

}

.reward-text-muted{

    color:var(--tt-fade);

}

/* ==========================================================
   MOBILE
========================================================== */
@media(max-width:992px){

    .reward-layout{

        grid-template-columns:1fr;

    }

    .reward-sidebar{

        position:static;

    }

    .reward-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .reward-head{

        flex-direction:column;

        align-items:flex-start;

    }

    .reward-points{

        width:100%;

        text-align:left;

        margin-top:20px;

    }

    .reward-item{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media(max-width:576px){

    .reward-grid{

        grid-template-columns:1fr;

    }

    .reward-title{

        font-size:18px;

    }

    .reward-points strong{

        font-size:34px;

    }

    .reward-sidebar-header,

    .reward-head,

    .reward-history-title,

    .reward-faq-title,

    .streak-box{

        padding:18px;

    }

    .reward-card{

        padding:20px;

    }

}