.titlewrapper #front-page-content p{
    font-size: 1.4rem;
    line-height: 3rem;
    color:#000;
}
.titlewrapper #front-page-content{
    width:60%;
}


#referral-split{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;

}
#referral-split .split-outer{
    width:50%;
    min-width:30%;
}
#referral-split .split-inner{
    padding:50px 80px;
    min-height:730px;
}
#referral-split .split-left{
    background-color: #fc4f31;
    color:#fff;
}
#referral-split .split-left p {
    color:#fff;
}
#referral-split .split-right{
    background-color: #e3e3e3;
    flex:1;
}
#referral-split .split-right .see-more-text{
    color:#00000070;
}
#referral-split .split-left .see-more-text{
    color:#ffffff7c;
}
#referral-split .split-left hr{
    border: 1px solid #fff;
}
#referral-split .split-right hr{
    border: 1px solid #818181;
}
#referral-split hr{
    width: 75%;
    margin-top:20px;
    margin-bottom: 50px;
}
#referral-split .split-left .split-inner{
    background-color: #dcdcdc70;
    margin:80px;
    margin-right:0px;
    border-radius: 20px 0 0 20px;
}
#referral-split .split-right .split-inner{
    background-color: #fff;
    margin:80px;
    margin-left:0px;
    border-radius: 0 20px 20px 0;
}

#referral-split .split-inner h2{    
    font-size: 2.4rem;
    padding-top:30px;
    padding-bottom:20px;
    text-align: center;
    font-size:max(min(6cqw, 2.5rem), 2rem);
}
#referral-split .split-inner p{
    min-width: 0; 
    overflow: hidden;
    text-overflow: ellipsis;
    font-size:max(min(2.8cqw, 1.5rem), 1.3rem);
    text-align: center;
}

#referral-split .split-inner button{
    width: max(min(60cqw, 15rem), 6rem);
    height: max(min(20cqw, 4rem), 2rem);
    font-size: max(min(2.8cqw, 1.5rem), 1.3rem);
    margin-top:15px;
    margin-bottom:30px;
    /* background-color: #ff677e;
    border-color: #ff677e; */
}
/* #referral-split .split-left .split-inner button:hover{
    background-color: #fff0;
    color:#fff;
    border-color: #fff;
}
#referral-split .split-inner button:hover{
    background-color: #fff0;
    color:#ff677e;
} */
#referral-split .split-inner .inner-container{    
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
    overflow: hidden;
}
.split-dragger{
    border-radius: 50%;
    width: 25px;
    height: 50px;
    position: absolute;
    top:25%;
    background-color: #dcdcdc70;
    cursor: pointer;
}

#split-dragger-position{
    position: relative;
    width:0px;
    height:100px;
}

.split-dragger.dragger-left{
    right:0;
    border-radius: 10rem 0 0 10rem;  
    
}
.split-dragger i{
    top: 35%;
    right: 36%;
    position: absolute;
}
.split-dragger.dragger-right{
    border-radius: 0 10rem 10rem 0;
}

.appearing-text{
    opacity: 0;
    height: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, height 0.5s ease, transform 0.5s ease;
    margin-bottom:50px;
}
.appearing-text.slide-down {
    opacity: 1;
    height: auto;
    transform: translateY(0);
}

.titlewrapper  


.referral-title{
    font-size: 3.7rem;
}

@media(max-width:950px){
    .titlewrapper #front-page-content p{
        font-size: 1.2rem;
        line-height: 2.3rem;
    }
    .titlewrapper #front-page-content{
        width:100%;
    }
    #referral-split{
        flex-direction: column;
    }
    #referral-split .split-outer{
        width:100%;
    }
    #split-dragger-position{
        display: none;
    }
    #referral-split .split-outer .split-inner{
        margin:0px;
        border-radius:0;
    }
    #referral-split .split-inner{
        padding:20px;
    }
    .appearing-text{
        width:100%;
        height:100%;
        opacity: 100;
    }
    .see-more-text{
        height: 0;
    }
    #referral-split .split-inner h2{       
        font-size: 2.5rem;

    }
}