.bannerOuter{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
}
.bannerContent{ width: 480px; }
.bannerImg{ width: calc(100% - 480px); position: absolute; text-align: right; right:0px; bottom: 0; }
.bannerHead{
    font-size: 100px;
    line-height: 1.13;
    color:#DA291C;
    margin-bottom: 15px;
}
.bannerDesc{
    font-size: 45px;
    line-height: 1.13;
    color: #373A36;
    max-width: 350px;
}
.bannersection{
    background-position: center center !important;
    background-size: cover !important;
    height: 809px;
    width: 100%;
    padding: 60px 0;
}
.bannersection .container{ height: 100%; }

.browserHeading{
    padding-top: 90px;
    padding-bottom: 85px;
    position: relative;
    z-index: 1;
}
.ft-PRUVibes{
    padding-top: 110px;
    padding-bottom:195px;
    position: relative;
    z-index: 1;
}
.ft-PRUVibes .container{ max-width: 825px; }
.ft-PRUVibes-text{ max-width: 854px; margin: 0 auto 35px; }
.rewardSection{
    background-position: center center !important;
    background-size: cover !important;
    width: 100%;
    padding: 130px 0 112px;
    position: relative;
}
.PRUVibesHeading{ padding: 90px 0 120px; z-index: 1; position: relative; }
.PRUVibesHeading .cmsText24{ margin-bottom: 30px; }
.PRUVibesHeading .container{ max-width: 930px; }

.littleBox{ margin-bottom: 120px; }

.pruppointsOuter{ position: relative; z-index: 1; }
.pruppointsInfo{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    justify-content: center;
    margin-top: 116px;
}
.pruppointsBox{
    border-radius: 55px;
    border: 3px solid #ffffff;
    padding: 116px 33px 33px 33px;
    background: #FFFFFF80;
    backdrop-filter: blur(4px);
    width: calc(50% - 12px);
    position: relative;
    margin-bottom: 100px;
}
.pruppointsBox .pruppointsImg{
    position: absolute;
    height: 174px;
    width: 174px;
    display: flex;
    align-items: center;
    justify-content: center;
    top:-80px;
    left: 50%;
    background: #fff;
    border-radius: 50%;
    padding: 15px;
    transform: translateX(-50%);
}
.pruppointsBox .cmsText20{ margin: 0px; }
.pruppointsBInfo{ max-width: 1080px; margin: 0 auto; }

.imgcup{
    height:883px;
    width:883px;
    position: absolute;
    left: 0px;
    top: -450px;
}
.imgHeadphone{
    height:766px;
    width:441px;
    position: absolute;
    left: 0px;
    bottom:-310px;
}
.imgVocher{
    height:865px;
    width:573px;
    position: absolute;
    right: 0px;
    top: -400px;
    background-size: 100% !important;
    z-index: -1;
}
.imgheartHand{
    height:634px;
    width:384px;
    position: absolute;
    bottom: 0px;
    right:37px;
    z-index: -1;
}
#ui-datepicker-div { font-size: 62.5%; }
#datepicker{
    background-image: url(https://image.campaigns.prudential.com.sg/lib/fe30117170640475771274/m/1/datepicker-icon.png);
    background-repeat: no-repeat;
    background-position: 97% center;
    background-size: 26px;
}
@media screen and (max-width:1200px) {    
    .littleBox{ margin-bottom: 80px; }
    .imgcup {
        height: 585px;
        width: 603px;
        left: 0px;
        top: -230px;
        background-size: 60% !important;
    }
    .imgHeadphone {
        height: 435px;
        width: 450px;
        left: 0px;
        bottom: -300px;
        background-size: 50% !important;
    }
    .imgheartHand {
        height: 400px;
        width: 314px;
        bottom: 0px;
        right: -53px;
        background-size: 80% !important;
    }
    .imgVocher {
        height: 613px;
        width: 393px;
        right: 0px;
        top: -240px;
    }
}
@media screen and (max-width:1080px) {
    .bannersection { height: 680px; }
    .bannerHead { font-size: 80px; }
    .bannerDesc { font-size: 40px; }
}
@media screen and (max-width:991px) {
    .bannersection { height: 595px; }
    .bannerHead { font-size:60px; }
    .bannerDesc { font-size: 32px; }
    .bannerContent { width: 300px; }
    .bannerImg { width: calc(100% - 330px); }
    .PRUVibesHeading { padding:60px 0 100px; }

    .pruppointsBox{ width:100%; }
    .pruppointsBox:last-child{ margin-bottom:40px; }
    .littleBox{ margin-bottom: 60px; }
    .imgVocher {
        height: 503px;
        width: 295px;
        right: 0px;
        top: -150px;
        z-index: -1;
    }
    .imgcup {
        height: 455px;
        width: 513px;
        left: 0px;
        top: -200px;
        background-size: 60% !important;
    }
    .imgHeadphone {
        height: 345px;
        width: 360px;
        left: 0px;
        bottom: -190px;
        background-size: 50% !important;
    }
    .imgheartHand {
        height: 259px;
        width: 314px;
        bottom: 0px;
        right: -95px;
        background-size: 50% !important;
    }
}
@media screen and (max-width:767px) {
    .bannersection { height: 460px; }
    .bannerHead { font-size:40px; }
    .bannerDesc { font-size: 26px; }
    .bannerContent { width: 200px; }
    .bannerImg { width: calc(100% - 300px); }
    .littleBox{ margin-bottom: 40px; }
    .imgcup {
        height: 395px;
        width: 433px;
        left: 0px;
        top: -160px;
        background-size: 60% !important;
    }
    .imgheartHand { right: -135px; }

    .pruppointsBox .pruppointsImg { height: 122px; width: 122px; top:-60px; }
    .pruppointsBox { margin-bottom: 70px; padding: 85px 20px 20px 20px; }
}
@media screen and (max-width:640px) {
    .bannerImg { width: calc(100% - 220px); }
}
@media screen and (max-width:576px) {
    .bannersection { height: fit-content; padding:150px 0 30px; }
    .bannerOuter{ flex-direction: column; row-gap: 20px; }
    .bannerContent { width: 100%; }
    .bannerImg { width: 100%; position: relative; }
    .imgcup {
        height: 345px;
        width: 353px;
        left: 0px;
        top: -122px;
    }
    .imgVocher {
        height: 453px;
        width: 295px;
        right: 0px;
        top: -120px;
    }
    .imgHeadphone {
        height: 285px;
        width: 300px;
        left: 0px;
        bottom: -150px;
    }
    .imgheartHand {
        right: -95px;
        height: 179px;
        width: 224px;
    }
    #ui-datepicker-div { font-size: 40%; }
}