.elementor-1123 .elementor-element.elementor-element-47cf2ea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1123 .elementor-element.elementor-element-a5b3525{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1123 .elementor-element.elementor-element-ff1496e{--display:flex;}.elementor-1123 .elementor-element.elementor-element-6a273b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1123 .elementor-element.elementor-element-6a273b4:not(.elementor-motion-effects-element-type-background), .elementor-1123 .elementor-element.elementor-element-6a273b4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2914cdab );}.elementor-1123 .elementor-element.elementor-element-ef7c251{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-543e29d *//*=========================================
Mortgage Penalty Hero
=========================================*/

.penalty-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:140px 24px 100px;

    background:url("https://rinkuthemortgagebroker.com/wp-content/uploads/2026/07/close-up-accountant-using-calculator-for-calculati-2026-03-17-00-09-26-utc-scaled.jpg") center center/cover no-repeat;

    overflow:hidden;

}

.penalty-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(18,57,90,.90) 0%,
        rgba(18,57,90,.72) 45%,
        rgba(18,57,90,.25) 100%
    );

}

.penalty-hero-container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1280px;

    margin:auto;

}

.penalty-content{

    max-width:760px;

}

.penalty-hero h1{

    margin:28px 0;

    font-size:68px;

    line-height:1.05;

    color:#fff;

    font-weight:800;

    letter-spacing:-.04em;

}

.penalty-hero p{

    max-width:650px;

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

}

/* Buttons */

.penalty-hero .hero-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

    flex-wrap:wrap;

}

.penalty-hero .hero-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

}

.penalty-hero .btn-primary{

    background:#0B8DC5;

    color:#fff;

}

.penalty-hero .btn-secondary{

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

    background:rgba(255,255,255,.08);

}

/* Stats */

.hero-stats{

    display:flex;

    gap:50px;

    margin-top:70px;

    flex-wrap:wrap;

}

.hero-stat h3{

    margin:0;

    color:#fff;

    font-size:36px;

}

.hero-stat span{

    color:rgba(255,255,255,.75);

}

@media(max-width:1024px){

.penalty-hero{

    min-height:auto;

    padding:120px 24px 90px;

}

.penalty-hero h1{

    font-size:52px;

}

}

@media(max-width:767px){

.penalty-hero{

    padding:100px 18px 70px;

}

.penalty-hero h1{

    font-size:38px;

}

.penalty-hero p{

    font-size:17px;

}

.penalty-hero .hero-buttons{

    flex-direction:column;

}

.penalty-hero .hero-buttons a{

    width:100%;

}

.hero-stats{

    gap:30px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c2d163a *//*=========================================
Mortgage Penalty Calculator
=========================================*/

.penalty-calculator{

    padding:110px 24px;

    background:#F8FBFD;

}

.penalty-container{

    max-width:1280px;

    margin:auto;

}

.penalty-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.penalty-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:999px;

    background:#EAF7FC;

    color:#0B8DC5;

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.penalty-heading h2{

    margin:28px 0 20px;

    font-size:52px;

    line-height:1.1;

    font-weight:800;

    color:#12395A;

}

.penalty-heading p{

    font-size:19px;

    line-height:1.9;

    color:#667085;

}

/*=========================================
Grid
=========================================*/

.penalty-grid{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:40px;

    align-items:start;

}

/*=========================================
Form
=========================================*/

.penalty-form{

    background:#FFFFFF;

    padding:45px;

    border-radius:24px;

    box-shadow:0 18px 55px rgba(18,57,90,.08);

}

.penalty-form h3{

    margin:0 0 35px;

    font-size:34px;

    color:#12395A;

    font-weight:800;

}

.form-group{

    margin-bottom:28px;

}

.form-group label{

    display:block !important;

    margin-bottom:10px;

    font-size:15px;

    font-weight:700;

    color:#12395A !important;

    text-transform:uppercase;

    letter-spacing:.04em;

}

.form-group input,

.form-group select{

    width:100%;

    height:60px;

    padding:0 18px;

    border:1px solid #D7E3EC;

    border-radius:14px;

    background:#FFFFFF !important;

    color:#12395A !important;

    font-size:17px;

    font-weight:600;

    outline:none;

    transition:.3s;

    appearance:none;

    -webkit-appearance:none;

    box-shadow:none;

}

.form-group input:focus,

.form-group select:focus{

    border-color:#0B8DC5;

    box-shadow:0 0 0 4px rgba(11,141,197,.12);

}

.form-group select{

    cursor:pointer;

}

/*=========================================
Button
=========================================*/

.calculate-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:999px;

    background:#0B8DC5;

    color:#FFFFFF;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.calculate-btn:hover{

    background:#12395A;

    transform:translateY(-3px);

}

/*=========================================
Results
=========================================*/

.penalty-results{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.result-card{

    background:#FFFFFF;

    padding:30px;

    border-radius:22px;

    box-shadow:0 18px 55px rgba(18,57,90,.08);

}

.result-card span{

    display:block;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#667085;

    margin-bottom:12px;

    font-weight:700;

}

.result-card h3{

    margin:0;

    font-size:38px;

    color:#12395A;

    font-weight:800;

}

.highlight{

    background:linear-gradient(135deg,#0B8DC5,#12395A);

}

.highlight span{

    color:rgba(255,255,255,.85);

}

.highlight h3{

    color:#FFFFFF;

}

/*=========================================
Disclaimer
=========================================*/

.penalty-note{

    padding:28px;

    background:#FFF9EC;

    border-left:5px solid #F4B400;

    border-radius:18px;

}

.penalty-note h4{

    margin:0 0 12px;

    font-size:22px;

    color:#12395A;

}

.penalty-note p{

    margin:0;

    color:#667085;

    line-height:1.8;

}

/*=========================================
Elementor Reset
=========================================*/

.penalty-calculator *{

    box-sizing:border-box;

}

.penalty-calculator input,

.penalty-calculator select,

.penalty-calculator button{

    font-family:inherit;

}

.penalty-calculator input::placeholder{

    color:#98A2B3;

}

.penalty-calculator input,

.penalty-calculator select{

    background:#FFFFFF !important;

    color:#12395A !important;

}

.penalty-calculator label{

    color:#12395A !important;

}

.penalty-calculator button{

    color:#FFFFFF !important;

}

.penalty-calculator button:hover{

    color:#FFFFFF !important;

}

/*=========================================
Tablet
=========================================*/

@media(max-width:1024px){

.penalty-grid{

    grid-template-columns:1fr;

}

.penalty-results{

    margin-top:10px;

}

}

/*=========================================
Mobile
=========================================*/

@media(max-width:767px){

.penalty-calculator{

    padding:80px 18px;

}

.penalty-heading h2{

    font-size:36px;

}

.penalty-heading p{

    font-size:17px;

}

.penalty-form{

    padding:28px;

}

.penalty-form h3{

    font-size:28px;

}

.result-card{

    padding:24px;

}

.result-card h3{

    font-size:30px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-14c943a *//*=========================================
Mortgage Penalty Information
=========================================*/

.penalty-info{

    padding:110px 24px;

    background:#FFFFFF;

}

.penalty-info-container{

    max-width:1280px;

    margin:auto;

}

.penalty-info-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.info-badge{

    display:inline-flex;

    padding:12px 24px;

    border-radius:999px;

    background:#EAF7FC;

    color:#0B8DC5;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.penalty-info-heading h2{

    margin:28px 0 20px;

    font-size:52px;

    line-height:1.1;

    color:#12395A;

    font-weight:800;

}

.penalty-info-heading p{

    font-size:19px;

    line-height:1.9;

    color:#667085;

}

.penalty-info-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

.info-card{

    background:#F8FBFD;

    padding:40px;

    border-radius:24px;

    border:1px solid #E4EDF5;

    transition:.35s;

}

.info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 50px rgba(18,57,90,.10);

}

.info-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    border-radius:18px;

    background:#0B8DC5;

    margin-bottom:24px;

}

.info-card h3{

    margin-bottom:18px;

    color:#12395A;

    font-size:28px;

    font-weight:800;

}

.info-card p{

    margin:0;

    color:#667085;

    line-height:1.9;

    font-size:17px;

}

/*=========================================
Tablet
=========================================*/

@media(max-width:992px){

.penalty-info-grid{

    grid-template-columns:1fr;

}

}

/*=========================================
Mobile
=========================================*/

@media(max-width:767px){

.penalty-info{

    padding:80px 18px;

}

.penalty-info-heading h2{

    font-size:38px;

}

.penalty-info-heading p{

    font-size:17px;

}

.info-card{

    padding:30px;

}

.info-card h3{

    font-size:24px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-19414ec *//*=========================================
Mortgage Penalty CTA
=========================================*/

.penalty-cta{

    position:relative;

    overflow:hidden;

    padding:120px 24px;

    background:linear-gradient(135deg,#12395A 0%,#0B8DC5 100%);

}

.penalty-cta-overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.12),
        transparent 45%);

}

.penalty-cta-container{

    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;

    text-align:center;

}

.cta-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.18);

    color:#FFFFFF;

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.penalty-cta h2{

    margin:28px 0 22px;

    font-size:56px;

    line-height:1.1;

    font-weight:800;

    color:#FFFFFF;

    letter-spacing:-.03em;

}

.penalty-cta p{

    max-width:760px;

    margin:auto;

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

}

.penalty-benefits{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:50px auto;

    max-width:760px;

}

.benefit-item{

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    padding:18px 22px;

    border-radius:14px;

    color:#FFFFFF;

    font-size:16px;

    font-weight:600;

}

.penalty-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.penalty-cta-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:999px;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    transition:.35s ease;

}

/* Primary */

.penalty-cta .cta-primary{

    background:#FFFFFF;

    color:#12395A !important;

    border:2px solid #FFFFFF;

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.penalty-cta .cta-primary:hover{

    background:#F5F8FB;

    color:#0B8DC5 !important;

    transform:translateY(-4px);

}

/* Secondary */

.penalty-cta .cta-secondary{

    background:transparent;

    color:#FFFFFF !important;

    border:2px solid rgba(255,255,255,.40);

}

.penalty-cta .cta-secondary:hover{

    background:#FFFFFF;

    color:#12395A !important;

    border-color:#FFFFFF;

    transform:translateY(-4px);

}

/* Elementor Overrides */

.penalty-cta-buttons a,
.penalty-cta-buttons a:hover,
.penalty-cta-buttons a:visited{

    text-decoration:none !important;

}

/*=========================================
Tablet
=========================================*/

@media(max-width:992px){

.penalty-benefits{

    grid-template-columns:1fr;

}

}

/*=========================================
Mobile
=========================================*/

@media(max-width:767px){

.penalty-cta{

    padding:90px 18px;

}

.penalty-cta h2{

    font-size:38px;

}

.penalty-cta p{

    font-size:17px;

}

.penalty-cta-buttons{

    flex-direction:column;

}

.penalty-cta-buttons a{

    width:100%;

}

}/* End custom CSS */