/* ==================================================
   REWARD PAGE
================================================== */

.fh-reward-page{

    width:100%;

}

.fh-reward-page-header{

    margin-bottom:35px;

}

.fh-reward-page-header h2{

    margin:0;

    font-size:42px;

    font-weight:900;

    color:#f0c33c;

}

.fh-reward-page-header p{

    margin:10px 0 0;

    color:#d2d2d2;

    font-size:18px;

}


/* ==================================================
   REWARD CARD
================================================== */

.fh-reward-card{

    display:grid;

    grid-template-columns:1fr 220px;

    gap:35px;

    align-items:center;

    background:#1b1b1b;

    border:1px solid #323232;

    border-radius:24px;

    padding:28px;

    margin-bottom:25px;

    box-shadow:0 12px 28px rgba(0,0,0,.35);

}

.fh-reward-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.fh-reward-position{

    color:#f0c33c;

    font-size:20px;

    font-weight:800;

    margin-bottom:22px;

}

.fh-reward-title{

    color:#ffffff;

    font-size:40px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}

.fh-reward-description{

    color:#d9b547;

    font-size:24px;

    line-height:1.5;

}

.fh-reward-image{

    width:220px;
    height:260px;

    margin-left:auto;

    border:3px solid #d6a72b;

    border-radius:18px;

    overflow:hidden;

    background:#101010;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 12px 25px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.05);

}

.fh-reward-photo{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

    padding:18px;

    transition:.30s ease;

}

.fh-reward-card:hover .fh-reward-photo{

    transform:scale(1.05);

}

/* ==================================================
   REWARD FOOTER
================================================== */

.fh-reward-footer{

    margin-top:32px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

}

.fh-reward-official-title{

    color:#f0c33c;

    font-size:15px;

    font-weight:700;

    margin-bottom:6px;

}

.fh-reward-official-text{

    color:#cfcfcf;

    font-size:14px;

    line-height:1.5;

}

.fh-reward-seal{

    width:92px;

    height:92px;

    border:2px solid rgba(240,195,60,.55);

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#f0c33c;

    opacity:.25;

    transition:.30s;

}

.fh-reward-card:hover .fh-reward-seal{

    opacity:.85;

    transform:rotate(-5deg);

}

.fh-reward-seal-logo{

    font-size:20px;

    font-weight:900;

    letter-spacing:1px;

}

.fh-reward-seal-text{

    margin-top:4px;

    font-size:10px;

    font-weight:700;

    line-height:1.2;

    text-transform:uppercase;

}
@media (max-width: 900px){
    .fh-reward-page-header h2{
        font-size:clamp(28px, 6vw, 36px);
    }

    .fh-reward-page-header p{
        font-size:16px;
    }

    .fh-reward-card{
        grid-template-columns:1fr;
        gap:18px;
        padding:20px;
    }

    .fh-reward-title{
        font-size:clamp(24px, 5vw, 32px) !important;
    }

    .fh-reward-description{
        font-size:16px !important;
    }
}

@media (max-width: 480px){
    .fh-reward-card{
        padding:14px;
        border-radius:16px;
    }

    .fh-reward-footer{
        flex-wrap:wrap;
        gap:10px;
    }
}
