.bonus-top{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 2.5rem;
    background: var(--gradient-blue);
}

.bonus-top img{
    width: 100%;
}

#referral-wrapper{
    border-radius: 0.8rem;
    width:94%;
    margin: auto;
    margin-top:-6rem;
    min-height:10rem;
    z-index: 3;
    position: relative;
    box-sizing: border-box;
    background-image: url('../img/referral_bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}

#referral-wrapper .content{
    padding:1.5rem;
}

#referral-wrapper .row-top{
    display: flex;
    justify-content: space-between;
    align-items:center;
}

#referral-wrapper .col{
    display: flex;
}

#referral-wrapper .col-1{
    gap:0.5rem;
    align-items: center;
    flex: 0 0 60%;
}

#referral-wrapper .svg-wrapper{
    border-radius: 100%;
    box-sizing: border-box;
}

#referral-wrapper .referral div{
    font-size:2.4rem;
    font-weight: 800;
    color: var(--theme-blue);
}

#referral-wrapper .referral span{
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--theme-blue);
}

#referral-wrapper .col-2{
    flex-direction: column;
    gap:0.5rem;
    justify-content: flex-end;
    flex: 0 0 40%;
    
}

#referral-wrapper .col-2 .referral-bonus{
    font-size:1.4rem;
    font-weight:700;
    color: black;
    text-align: right;
}

#referral-wrapper .col-2 span{
    font-size:1rem;
    font-weight:500;
    color: black;
}

#claim-referral{
    background: var(--gradient-blue);
    padding: 0.8rem 1rem;
    font-size:1.2rem;
}

#referral-wrapper .spacer{
    margin:1rem auto;
    box-sizing: border-box;
    height: 1.5px;
    background: #3abeff;
    width:96%;
}

#referral-wrapper .row-bottom {
    display: flex;
    flex-direction: column;
}

#referral-wrapper .code-wrapper{
    display: flex;
    align-items:center;
    gap:0.5rem;
    flex-direction: column;
}

#referral-wrapper label{
    font-size:1.2rem;
    font-weight: var(--fw-medium);
    color: var(--theme-blue);
}

#referral-wrapper .referral-code{
    display: flex;
    justify-content: center;
    border-radius: 0.8rem;
    width: 80%;
    position: relative;
    color: black;
    background: rgba(9, 0, 129, 0.1);
    padding: 0.8rem;
}

#referral-wrapper .referral-code .content{
   font-size: 1.6rem;
   font-weight: var(--fw-bold);
   padding: 0;
   text-align: center;
   letter-spacing: 1.5px;
   color: black;
}

#referral-wrapper .btn-copy{
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display:flex;
}

#referral-wrapper .btn-copy svg > *{
    color: var(--theme-blue);
}

.bonus-wrapper{
    display: flex;
    flex-wrap: wrap;
}

.bonus-wrapper .bonus{
    flex: 0 0 calc(33.33% - 1rem);
    margin: 0.5rem;
    box-sizing: border-box;
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    gap:0.5rem;
}

.bonus-wrapper .bonus img{
   width: 100%;
   height: 100%;
}

.bonus-wrapper .bonus label{
   font-size:1.2rem;
   font-weight: var(--fw-semibold);
   text-align: center;
}

@keyframes fadeFromBottom{
    0%{
        opacity: 0;
        transform: translate(-50%,-35%);
    }
    100%{
        opacity: 1;
        transform: translate(-50%,-50%);
    }
}

#popup-bonus{
    top: calc(60%);
    box-sizing: border-box;
    max-width: 400px;
    margin:0;
    animation: fadeFromBottom 0.3s forwards;
}

#popup-bonus .top{
    position: absolute;
    box-sizing: border-box;
    bottom: 100%;
    transform: translateY(8rem);
}

#popup-bonus .wrapper{
    background-image: url('../img/background-without-pattern.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 0.5rem;
    width: 100%;
    padding: 7.5rem 1.5rem 2.5rem 1.5rem;
    text-align: center;
    box-sizing: border-box;
}


#popup-bonus .title{
    font-size: 1.8rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
}

#popup-bonus .description{
    font-size: 1.4rem;
    font-weight: var(--fw-regular);
}

#popup-bonus .content{
    margin-bottom: 2.5rem;
}

#popup-bonus .btn{
    background: var(--gradient-blue);
    color: white;
    padding: 1.5rem;
    font-size: 1.4rem;
    font-weight: var(--fw-semibold);
}