*,
:after,
:before { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body {
    background-color: #f7f7f7;
    font-family: "FS Albert Pro", Segoe UI, Roboto, Helvetica Neue, Arial;
    font-size: 34px;
    line-height: 1.35;
    font-weight: 400;
    margin: 0;
    padding: 0 10px;
    color: #000000;
}
img { border-style: none; vertical-align: middle; }
svg { overflow: hidden; vertical-align: middle; }
.img-fluid { height: auto; max-width: 100%; }
h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; }
p{ margin: 0 0 10px;  }
.fw-300{ font-weight: 300; }
.fw-400{ font-weight: 400 !important; }
.fw-700{ font-weight: 700 !important; }
.fw-900{ font-weight: 900 !important; }
.text-center{ text-align: center; }
.text-red{ color: #DA291C; }
a{ transition: all 0.3s; }
a:hover{ transition: all 0.3s; }
@font-face {
    font-family: 'FS Albert Pro';
    src: url('../fonts/FSAlbertPro-Light.woff') format('woff2'),
        url('../fonts/FSAlbertPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FS Albert Pro';
    src: url('../fonts/FSAlbertPro.woff') format('woff2'),
        url('../fonts/FSAlbertPro.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FS Albert Pro';
    src: url('../fonts/FSAlbertPro-Bold.woff') format('woff2'),
        url('../fonts/FSAlbertPro-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FS Albert Pro';
    src: url('../fonts/FSAlbertPro-ExtraBold.woff') format('woff2'),
        url('../fonts/FSAlbertPro-ExtraBold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.headtype1{
    font-size: 50px;
    line-height: 1.25;
    font-weight: 400;
    color: #000000;
    margin-bottom: 12px;
}
.headtype2{
    font-size: 34px;
    line-height: 1.35;
    font-weight: 400;
    color: #000000;
    margin-bottom: 5px;
}
.cmsText{
    font-size: 34px;
    line-height: 1.35;
    color: #000000;
}
.cmsText20{
    font-size: 20px;
    line-height: 1.35;
    color: #000000;
}
.cmsText24{
    font-size: 24px;
    line-height: 1.35;
    color: #000000;
}
.btnOuter{ text-align: center; position: relative; z-index: 4; }
.btnOuter.rewardBtn{ margin-top: 30px; }
.btn-type1{
    vertical-align: middle;
    position: relative;
    display: inline-block;
    background: #DA291C;
    padding:18px 35px;
    border-radius: 45px;
    color: #fff;
    text-decoration: none;
    outline: none;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.23;
    text-align: center;
    cursor: pointer;
    border: 0px;
    transform: scale(1);
    transition: all 0.3s;
}
.btn-type1:hover{
    transform: scale(1.02);
    -webkit-box-shadow: 0 20px 30px rgb(0 0 0 / .15);
    box-shadow: 0 20px 30px rgb(0 0 0 / .15);
    transition: all 0.3s;
}
.btnBig{ min-width: 415px; font-size: 30px; font-weight: 400; }
.btnBig2{ min-width: 314px; }
.maxwidth790{ max-width: 790px !important; margin: 0 auto; }
.maxwidth950{ max-width: 950px !important; margin: 0 auto; }
.maxwidth970{ max-width: 970px !important; margin: 0 auto; }
.btn-type2,.btn-type2:focus{
    display: inline-block;
    background: linear-gradient(90deg, #FFC56E 0%, #FF5C39 100%);
    border: 1px solid #FF5C39;
    border-radius: 28px;
    text-decoration: none;
    outline: none;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    color: #FFFFFF;
    padding:13px 49px 15px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    box-shadow: 0px 4px 4px 0px #FFC56E80;
    cursor: pointer;
}
.btn-type2:hover{
   background: linear-gradient(90deg, #FF5C39 0%, #FFC56E 100%);
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
}
.main{
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
}
.container {
    width: 100%;
    max-width: 1244px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}
.headerlogo{
    position: absolute;
    right: 0px;
    top:0px;
    z-index: 2;
}
.headerlogo a{ display: inline-block; }

.footer{ 
    padding: 84px 0; 
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #000000;
}
.footer.gryBg{ background-color: #D9E1E2; }
.footer strong{ font-weight: 700; }
.footer a{ color: #000000; }
.footer a:hover{ color: #ed1b2e; }

.littleBox{
    border-radius: 55px;
    border: 3px solid #ffffff;
    background: #FFFFFF80;
    padding:80px 80px 108px;
    backdrop-filter: blur(4px);
    text-align: center;
    transition: opacity 0.5s ease;
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.littleBox.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    position: absolute;
}
.littleBoxHead{ margin-bottom: 10px; }
.littleBoxDesc{ margin-bottom: 30px; }
.littleBox .cmsText20{ max-width: 515px; margin: 0 auto 30px; }

.giftboxOuter{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    justify-content: center;
}
.giftbox{ width: calc(25% - 15px); cursor: pointer; position: relative; }
.giftbox .giftBoxImag{ transform: scale(1); transition: all 0.3s; }
.giftbox:hover .giftBoxImag{ transform: scale(1.02); transition: all 0.3s;  }
.giftbox .giftAnimatedImg{position: relative;}
.giftbox .giftBoxText{
    font-size: 26px;
    height: 55%;
    /*width: 100%;
    padding: 20px;
    border-radius: 30px;
    height: 100%;
    background: linear-gradient(360deg, #f7d2cb 0%, #f9cabd 100%);*/
    position: absolute;
    left: 0;
    top: 0%;
    width: 100%;
}
/* .giftbox.rewardText::before{
    content: '';
    background: url(https://image.campaigns.prudential.com.sg/lib/fe30117170640475771274/m/1/imagebox_base.png) no-repeat;
    height: 100%;
    width: 100%;
    background-size: 100%;
    position: absolute;
    left: 0px;
    transition: all 0.3s;
} */
.rewardSection .giftbox.animate .giftBoxText{ height: calc(100% - 85px); }
.rewardSection .giftbox.animate .giftAnimatedImg{ height: calc(100% - 85px); }
.rewardInfo{ margin-top:30px; }
.rewardInfo .btnOuter{ margin-top:20px; }
.giftbox .giftBoxText .giftTextInner{
    animation: zoom-in-zoom-out 1s ease;
    display: inline-flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}
@keyframes zoom-in-zoom-out {
  0% { scale: 0%; }
  100% { scale: 100%; }
}

.giftbox img{ width:263px; }
/* Custom Radio Button */
.custom-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap:10px 12px;
    justify-content: center;
    margin-bottom: 43px;
}
.custom-radio-group .custom-radio {
    display: flex;
    align-items: center;
    background-color: #888; /* default gray */
    padding:15px 26px;
    border-radius: 25px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
    color: #fff;
    border: 1px solid #ffffff;
    width: calc(50% - 12px);
    min-height: 77px;
}
.custom-radio-group .custom-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    min-width: 25px;
    min-height: 25px;
    background: #ffffff;
    border-radius: 50%;
    margin: 0 12px 0 0;
    position: relative;
    cursor: pointer;
    outline: none;
    background-color: rgba(255,255,255,0.5);
}
.custom-radio-group .custom-radio input[type="radio"]:checked { border-color: #7b0000; }
.custom-radio-group .custom-radio input[type="radio"]::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 17px;
  height: 17px;
  background-color: #ffffff;
  border-radius: 50%;
}
.custom-radio-group .custom-radio input[type="radio"]:checked::before { background-color: #7b0000; }
.custom-radio-group .custom-radio input ~ .radio-text{ 
    text-align: left; 
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
}
.custom-radio-group .custom-radio input[type="radio"]:checked ~ .radio-text { color: #fff; }
.custom-radio-group .custom-radio:has(input[type="radio"]:checked) { background-color: #f86e63; }



.formtype1 .formfields{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin: 35px 0;
}
.formtype1 .formgroup{ width: calc(50% - 10px); position: relative; }
.formtype1 .formgroup .formlabel{
    text-align: left;
    margin-bottom: 8px;
    display: block;
    font-size: 24px;
    line-height: 1.25;
}
.formtype1 .formgroup.fullwidth{ width:100%; }
.formtype1 .formtextbox{
    background: #ffffff;
    border-radius: 9px;
    border: 1px solid #DCDCDC;
    padding: 20px;
    font-size: 24px;
    line-height: 1.25;
    color: #000000;
    width: 100%;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}
.formtype1 .formtextbox:focus{ 
    outline: none;
    box-shadow: none;
    border: 1px solid #999999;
}
.formtype1 .formgroup .errormessage,
.formtype1 .formgroup label.error{
    color: #ff0000;
    font-size: 16px;
    line-height: 1.23;
    margin-top: 10px;
    display: block;
    text-align: left;
    /*
    padding: 5px 8px;
    background: #ff0000;
    position: absolute;
    right: 1px;
    bottom: 1px; 
    border-radius: 0 0 9px 0;*/
}
.formtype1 .formtextbox::placeholder { color:#818181; opacity: 1; }
.formtype1 .formtextbox::-webkit-input-placeholder { color: #818181; }
.formtype1 .formtextbox::-ms-input-placeholder { color: #818181; }
.formtype1 .innerQuestion{ text-align: left; display: inline-block; }
.formtype1 .innerQuestion .error{
    color: #f00;
    font-size: 18px;
    line-height: 1.23;
    padding: 5px 8px;
    margin: 0;
}
.formtype1 .innerHead{ font-weight: 400; }
.formtype1 .innerQuestion{ margin: 25px 0 40px; }
.formtype1 .innerQuestion .custom-checkbox{ margin-bottom:10px; }
.formstep{
    transition: opacity 0.5s ease;
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.formstep.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    position: absolute;
}
.radioOuter,.checkboxOuter{ text-align: left; }
.radioOuter .label{
    font-size: 24px;
    line-height: 1.25;
    display: inline-block;
    margin-right: 10px;
    /* padding-top: 5px; */
    vertical-align: middle;
}
.radioOuter .label strong{ font-weight: 700; }

/* Custom Radio Button */
.custom-radio-group2 {     
    display: inline-flex;
    align-items: center;
    gap: 10px; 
}
.custom-radio-group2 .custom-radio {
    display: inline;
    cursor: pointer;
    position: relative;
    color: #000;
    vertical-align: middle;
    line-height: 1;
    padding-left: 40px;
}
.custom-radio-group2 .custom-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    min-width: 31px;
    min-height: 31px;
    background: #ffffff;
    border-radius: 50%;
    margin: 0 12px 0 0;
    position: relative;
    cursor: pointer;
    outline: none;
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #DCDCDC;
    display: inline-block;
    position: absolute;
    width: 31px;
    left: 0px;
    top: -2px;
}
.custom-radio-group2 .custom-radio input[type="radio"]::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 29px;
    height: 29px;
    background-color: #ffffff;
    border-radius: 50%;
}
.custom-radio-group2 .custom-radio input[type="radio"]:checked::before { 
    background-color: #7b0000;
    width: 15px;
    height: 15px;
    top: 7px;
    left: 7px;
}
.custom-radio-group2 .custom-radio input ~ .radio-text{ 
    text-align: left; 
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
}
.custom-radio-group2 .custom-radio input[type="radio"]:checked ~ .radio-text { color: #000; }

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 45px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 24px;
    line-height:1.4;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #000;
}
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.custom-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    border: 1px solid #DCDCDC;
    border-radius: 6px;
}
.custom-checkbox input:checked ~ .checkmark { background-color: #7b0000; }
.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after {
    left:10px;
    top: 5px;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.custom-checkbox .checkboxlink{ color: #000; }
.custom-checkbox .checkboxlink:hover{ color: #7b0000; }

.processSteps{
    display: flex;
    justify-content: center;
    margin: 45px 0;
}
.processSteps .steps{
    width: 67px;
    height: 67px;
    border: 1px solid #888888;
    background: #ffffff;
    color: #888888;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right:56px;
    position: relative;
}
.processSteps.bggreen .steps{ border: 1px solid #000000; color: #000000; }
.processSteps .steps::before{
    content: '';
    display: inline-block;
    width: 56px;
    height: 23px;
    background-size: 100% !important;
    background: url(https://image.campaigns.prudential.com.sg/lib/fe30117170640475771274/m/1/arrow_gray.png) no-repeat;
    position: absolute;
    right: -57px;
    top: 50%;
    transform: translateY(-50%);
}
.processSteps.bggreen .steps::before{ background: url(https://image.campaigns.prudential.com.sg/lib/fe30117170640475771274/m/1/arrowww.png) no-repeat; }
.processSteps .steps.done{
    text-indent: -9999px;
    background: url(https://image.campaigns.prudential.com.sg/lib/fe30117170640475771274/m/1/tickk.png) no-repeat #FF8274;
    background-position: center center;
}
.processSteps.bggreen .steps.active{ background:#9BE198; }
.processSteps.bggreen .steps.done{
    text-indent: -9999px;
    background: url(https://image.campaigns.prudential.com.sg/lib/fe30117170640475771274/m/1/tickk.png) no-repeat #9BE198;
    background-position: center center;
}
.processSteps .steps:last-child::before{ display: none !important; }
.processSteps .steps:last-child{ margin-right:0px; }
.thankyouImg{
    margin-left: -80px;
    margin-right: -80px;
    margin-bottom: 50px;
}
@media screen and (max-width:1200px) {
    .sectionPadding{ margin-left:70px; margin-right:70px; }   
    .headtype1{ font-size: 38px; }
    .headtype2{ font-size: 30px; }
    .cmsText{ font-size: 28px; }
    .btn-type1{ padding: 15px 20px; border-radius: 30px; font-size: 28px; }
    .btn-type2, .btn-type2:focus{ padding: 13px 25px 15px; }
    .littleBox { border-radius: 40px; padding: 80px 50px; }
    .thankyouImg{ margin-left: -50px; margin-right: -50px; margin-bottom: 30px; }
    .footer{  padding: 80px 0; }
    .giftbox .giftBoxText{ font-size: 18px; }
}
@media screen and (max-width:991px) {
    .headerlogo a{ max-width: 230px; }
    .sectionPadding{ margin-left:50px; margin-right:50px; }   
    .headtype1{ font-size: 32px; }
    .headtype2{ font-size: 28px; }
    .cmsText,.cmsText24{ font-size: 22px; }
    .cmsText20{ font-size: 18px; }
    .btn-type1{ padding: 15px 20px; border-radius: 30px; font-size: 26px; min-width:180px; }
    .btn-type2, .btn-type2:focus{ padding: 9px 20px; font-size: 18px; border-radius: 20px; }
    .custom-radio { width: 100%; min-height: auto; }
    .littleBox { padding: 60px 50px; }
    .footer{  padding: 60px 0; }
     .btnBig, .btnBig2 { min-width: 140px; }
}
@media screen and (min-width:768px) and (max-width:1025px) {
    .giftbox .giftBoxText{ font-size: 16px; }
    .rewardSection .giftbox.animate .giftBoxText{ height: calc(100% - 79px); }
    .rewardSection .giftbox.animate .giftAnimatedImg{ height: calc(100% - 79px); }
}
@media screen and (max-width:767px) {
     body{ padding: 0px; }
    .headerlogo a { width: 180px; }
    .sectionPadding{ margin-left:30px; margin-right:30px; } 
    .headtype1{ font-size: 30px; }
    .headtype2{ font-size: 26px; }
    .cmsText,.cmsText24{ font-size: 20px; }  
    .btn-type1, .btn-type1:focus{ padding: 10px 20px; border-radius: 30px; font-size: 24px; }
    .littleBox { padding:40px; }
    .thankyouImg{ margin-left: -40px; margin-right: -40px; margin-bottom: 20px; }
    .giftbox { width: calc(50% - 10px); }
    .giftbox img{ max-width: 100%; width:auto; }
    .footer{  padding: 40px 0; }
    .custom-radio-group .custom-radio { width:100%; }
    .custom-radio-group .custom-radio { padding: 15px 16px; }
    .custom-radio-group .custom-radio input ~ .radio-text { font-weight: 400; font-size: 18px; }
    .btnOuter.rewardBtn{ margin-top: 20px; }
    .rewardSection .giftbox.animate .giftBoxText{ height: calc(100% - 70px); }
    .rewardSection .giftbox.animate .giftAnimatedImg{ height: calc(100% - 70px); }
    .formtype1 .formgroup{ width:100%; }
    .formtype1 .formtextbox{ font-size: 18px; }
    .radioOuter .label{ display: block; }
    .custom-radio { margin-right: 20px; margin-top: 20px; }
    .formtype1 .formgroup .errormessage, 
    .formtype1 .formgroup label.error{ font-size: 13px; }
}
@media screen and (max-width:600px) {
    .littleBox { padding:30px 20px; }
}
@media screen and (max-width:576px) {
    .headerlogo a { width: 130px; }
    .sectionPadding{ margin-left:20px; margin-right:20px; }
    .btn-type2, .btn-type2:focus{ padding:10px 28px; font-size: 18px; }
    .processSteps { margin: 25px 0; }
    .processSteps .steps { width: 45px; height: 45px; margin-right: 26px; font-size: 24px; }
    .processSteps .steps::before { width: 26px; height: 11px; right: -27px; }
    .formtype1 .formtextbox{ padding: 15px 10px; font-size: 16px; }
    .giftbox .giftBoxText { border-radius: 20px; padding: 10px; font-size: 12px; line-height: 1.1; }
    .processSteps .steps.done { background-size: 50% !important; }
    .formtype1 .formgroup .formlabel{ font-size: 16px; }
}
@media screen and (max-width:480px) {
    .btn-type2, .btn-type2:focus { padding: 10px 20px; font-size: 16px; }
}
@media screen and (max-width:426px) {
    .custom-radio-group2 .custom-radio input ~ .radio-text{ font-size: 16px; }
    .radioOuter .label { font-size: 16px; }
    .custom-checkbox { font-size: 16px; padding-left: 35px; }
    .custom-checkbox .checkmark { height: 24px; width: 24px; }
    .custom-checkbox .checkmark:after{ left: 7px; top: 2px; width: 8px; height: 13px; }
    .btn-type1 { padding: 8px 16px; border-radius: 30px; font-size: 20px; min-width: 115px; }
    .custom-radio-group2 .custom-radio input[type="radio"] { min-width: 25px; min-height: 25px; width: 25px; top:-3px; }
    .custom-radio-group2 .custom-radio input[type="radio"]::before { width: 23px; height: 23px; }
    .custom-radio-group2 .custom-radio input[type="radio"]:checked::before { width: 11px; height: 11px; top: 6px; left: 6px; }
}