@font-face{font-family:'Belfius21';src:url(../../../clientlibs/clientlib-pbb/resources/fonts/Belfius21-Regular.ttf)}
html{scroll-behavior:smooth}
body{font-family:'Belfius21';margin:0;padding:0}
.sections{display:flex}
@media(max-width:767px){.sticky-button{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:1000;background:linear-gradient(77deg,#c30045 6%,#c30046 52.32%,#e85aa7 112.91%);color:#FFF;border:0;padding:12px 24px;font-size:16px;font-weight:700;width:100%;overflow-y:auto;height:auto;border-top-left-radius:30px;border-top-right-radius:30px;cursor:pointer;transition:background-color .3s,color .3s;display:none}
}
@media(max-width:1023px){.sections{flex-direction:column-reverse}
.sections.non-stick{position:relative;padding-bottom:120px}
}
.sticky-button{display:none}
.sticky-button.show{display:block}
*{box-sizing:border-box}
.main-section{font-family:'Belfius21';width:100%;background:var(--gradient-2,linear-gradient(54deg,#c30045 49.48%,#dc0078 100%));position:relative}
.main-section img{position:absolute;top:50%;left:70%;transform:translate(-70%,-50%);z-index:1;opacity:1;width:100%;height:100%}
.section-sub{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:60px}
.financial{color:white;position:relative;z-index:2;top:20%;padding:0 40px}
.financial h1{color:white;font-size:29px;margin-top:16px;font-weight:500}
.financial p{font-size:16px;line-height:25px;margin-top:20px;padding-right:100px}
.legal-text{position:relative;z-index:2;padding:10px 40px 0 40px;font-size:14px;color:#FFF;order:2}
.legal-text p{font-weight:600;margin-top:10px}
.legal-desc{font-size:14px;margin-top:5px;padding-right:100px}
.ruler{width:110px;margin:20px 0}
.right-section{position:relative;z-index:2;margin:60px 20px;color:#333;grid-column:2;grid-row:1 / span 2;padding:40px 30px;border-radius:24px;border:2px solid rgba(255,255,255,0.15);background:linear-gradient(106deg,rgba(250,238,244,0.72) .56%,rgba(255,255,255,0.85) 50.28%,rgba(255,194,215,0.90) 100%);box-shadow:0 4px 12px 0 rgba(0,0,0,0.15)}
.right-section h2{font-size:21px;margin-bottom:20px;color:#000}
.pension-calculator{display:grid;gap:20px}
.pension-calculator label{font-weight:600;font-size:14px;color:#000}
.label-tooltip-section{display:flex;align-items:center}
.tooltip-icon{display:inline-block;position:relative;margin-left:5px;font-size:13px;color:#51626f;cursor:pointer}
.tooltip-icon.active span{display:block;opacity:1}
@media(hover:hover){.tooltip-icon:hover span{display:block;opacity:1}
}
.tooltip-icon span{display:none;opacity:0;width:200px;background-color:#fef6f9;color:#c30045;text-align:left;border-radius:5px;padding:10px;font-size:10px;position:absolute;z-index:1;left:50%;transform:translateX(-50%);transition:opacity .3s}
.input-wrapper{background-color:#fff5f7;display:flex;width:100%;border:1px solid #47545c;border-radius:7px;padding:10px;margin-bottom:10px;margin-top:5px}
.input-wrapper input{border:0;background-color:#fff5f7;outline:0;width:100%;font-size:14px;color:#5e5c5c}
.error_msg{margin-bottom:10px}
.input-suffix{margin-left:5px;font-size:14px;color:#888}
.pension-calculator button{width:100%;font-weight:600;padding:10px;border:0;background:linear-gradient(134deg,#c30045 14.59%,#dc0078 85.37%);color:#FFF;font-size:1rem;border-radius:25px;cursor:pointer}
@media(max-width:767px){.label-tooltip-section{display:flex;justify-content:space-between}
.tooltip-icon{left:-3px}
.tooltip-icon:hover span{left:-185px;transform:translateX(0);bottom:125%}
.tooltip-icon.active span{left:-185px;transform:translateX(0);bottom:125%}
.main-section img{top:70%;left:27%;height:500px;width:600px}
.section-sub{padding:0;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:20px}
.financial{top:0;order:0;padding:20px}
.financial h1{color:#FFF;text-align:center;font-size:40px;line-height:125%}
.financial p{color:#FFF;text-align:center;line-height:165%;padding-right:0}
.legal-text{padding:20px}
.legal-text p{font-size:14px;line-height:115%}
.legal-desc{padding-right:0}
.ruler{display:none}
.right-section{order:1;margin:0;padding:0 20px;border:0;background:0;box-shadow:none;grid-column:auto;grid-row:auto}
.right-section h2{color:#FFF;text-align:center;font-size:19px}
.pension-calculator label{color:#FFF;font-size:12px}
.tooltip-icon{color:#FFF}
.pension-calculator button{background:#FFF;color:#dc0078}
}
@media(min-width:768px) and (max-width:1023px){.financial{top:5%;padding:0}
.pension-calculator{gap:0}
.legal-text{padding:10px 0 10px 0}
.financial p{font-size:13px;padding-right:0}
.legal-desc{padding-right:0}
.right-section{padding:10px 36px;margin:20px 0;grid-column:auto;grid-row:auto}
.right-section h2{font-size:19px}
.pension-calculator label{font-size:10px}
.section-sub{padding:10px 38px;grid-template-columns:none}
}