*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-size:16px;line-height:1.5;color:#111;background:#fff}
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:.5em}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}
p,ul,ol{margin-bottom:1em}
a{text-decoration:none}
img,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:1px solid #ccc;border-radius:4px;padding:.4em .6em}
button{cursor:pointer}
table{width:100%;border-collapse:collapse}
th,td{padding:.5em;text-align:left;border-bottom:1px solid #ddd}

p,h1,h2,h3,h4,h5,h6,a,select,span,input,button{
    color: #062054;
    margin-block-start: 0px;
    margin-block-end: 0px;
    font-family: proxima-nova,sans-serif;
    line-height: 1.5;
}

p, h3, select, button, span{
    font-family: "Open Sans", sans-serif;
}

body{
    background-color: #f4f8f9;
}

.white-background{
    background-color: #fff;
}



/*/////////////////////////Header////////////////////////////////*/

header{
    z-index: 100;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    transition: padding 0.25s;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
}

.header-logo{
    height: 50px;
}

.header-phone{
    display: flex;
    cursor: pointer;
}

.header-box-top{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    grid-column: 3/15;
    margin: 13.5px 0px;
}

.header-phone span{
    font-size: 24px;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    margin: auto;
}

.header-phone a{
    font-family: "Open Sans", sans-serif;
}

.header-phone i{
    font-size: 32px;
    margin: auto 0px ;
    margin-right: 14px;
    margin-top: 11px;
}

.header-box-bottom{
    grid-column: 1/-1;
    background-color: #f5f5f5;
    padding: 16px 0px ;
}


.header-bar{
    background: linear-gradient(135deg, #3399FF, #33CC99);
    width: 100%;
    height: 5px;
    grid-column: 1/-1;
}
@media screen and (max-width: 1500px) {
    .header-box-top{
        grid-column: 2/16;
    }
}
@media screen and (max-width: 1300px) {
    .header-box-top{
        grid-column: 1/-1;
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media screen and (max-width: 650px) {
    .header-phone span{
        display: none;
    }
}




/*//////////////////////////////////Main Top Part//////////////////////////////////////////*/

.main-top{
    grid-column: 3/15;
    text-align: center;
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 80em;
    margin-top: 190px;
}

.main-top h1{
    font-size: 32px;
    font-weight: 800;
}

.main-top p{
    font-size: 18px;
}

.main-top .main-top-intro{
    font-size: 16px;
}

.main-top-intro{
    margin: 0.5em 233px 1em;
}


@media screen and (max-width: 1500px) {
    .main-top{
        grid-column: 2/16;
    }
}
@media screen and (max-width: 1300px) {
    .main-top{
        grid-column: 1/-1;
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media screen and (max-width: 1100px) {
    .main-top-intro {
        margin: 0.5em 150px 1em;
    }    
}

@media screen and (max-width: 390px) {
    .main-top {
        margin-top: 150px;
    }
}

/*///////////////////////////////////Form//////////////////////////////////////////*/

.hidden { display: none; }


.age-form{
    width: 90px;
    text-align: right;
    padding: 13px 20px;
    font-size: 18px;
    border-radius: 8px;
    margin: 0px 10px;
}

.pension-form{
    text-align: left;
    padding: 13px 20px;
    font-size: 18px;
    border-radius: 8px;
    margin: 0px 10px;
}


/*///////Dob//////////////*/
.dob p{
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    font-size: 18px;
}

.dob p select{
    appearance: none;  
    -webkit-appearance: none;   
    -moz-appearance: none;
}

.dob-fields select{
    text-align: center;
    padding: 13px 20px;
    font-size: 18px;
    border-radius: 8px;
    margin: 0px 10px;
}

.dob .pension-form{
    padding: 13px 20px;
    font-size: 18px;
    border-radius: 8px;
    margin: 0px auto;
}


/*////////Form image buttons/////////*/

.form-image-button-box{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    margin: 35px 50px 10px;
}

.bottom{
    display: grid;
}

.main-form button, .extra-info-review a{
    font-family: inherit;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 8px;
    margin: 0;
    cursor: pointer;
    text-align: center;
    align-items: center;
    display: inline-flex;
    gap: 8px;
    vertical-align: top;
    border: 2px solid rgba(51, 204, 153, 0.5);
    background: #33CC99;
    color: white;
    margin: auto 0px;
}
.main-form button svg, .extra-info-review a svg{
    fill: #fff;
}

.form-image .number-circle{
    color: #062057;
    font-size: 20px;
    background-color: #fff;
    margin: auto;
    padding: 10px 0px;
    border: 3px solid #062053;
    border-radius: 100px;
    width: 55px;
    height: 55px;
    margin-left: 8px;
    margin-right: 9px;
    z-index: 2;
}

.form-image .number-circle-full{
    color: #fff;
    background-color: #062057;
}

.form-image{
    position: relative;
    width: fit-content;
    flex-wrap: nowrap;
    display: flex;
}

.form-image-line{
    position: absolute;
    height: 4px;
    background-color: #062054;
    z-index: 1;
    top: 47%;
    left: 10%;
    width: 80%;
}

@media screen and (max-width: 600px) {
    .form-image-button-box{
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 767px) {
    .main-top h1{
        font-size: 22px;
    }
    .main-top-intro {
        margin: 0.5em 0 1em;
    }
    .form-image-button-box{
        margin: 16px 0 0;
    }
    .main-top {
        padding: 1.5em 1em;
    }

}

@media screen and (max-width: 390px) {
    .form-image .number-circle {
        width: 35px;
        height: 35px;
        padding: 0;
        border: 2px solid #062053;
    }
    .form-image-line {
        height: 3px;
    }
}

/*////////////Form Bottom//////////*/

.form-bottom{
    display: flex;
    grid-template-columns: 1fr 1fr;
    width: 60%;
    margin: 30px auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}

.field-group{
    display: grid;
    grid-template-columns: 1fr;
    width: 48%;
    text-align: left;
}

.field-group input{
    padding: 14px ;
    border-radius: 8px;
}

.field-group label{
    margin: 10px 0px ;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
}

.disclaimer{
    margin-top: 16px;
    font-size: 15px;
    display: block;
    color: #062054;
    opacity: 0.8;
}

@media screen and (max-width: 900px) {
    .form-bottom{
        width: 80%;
    }
}



@media screen and (max-width: 600px) {
    .field-group{
        width: 100%;
    }
    .form-bottom{
        width: 100%;
    }
}





/*/////////////////////////////Provider images////////////////////////////////////////*/

.provider-images{
    margin: 0 auto;
    max-width: 80em;
    width: 100%;
}

.provider-images .provider-logos{
    list-style: none;
    padding: 0;
    margin: 32px 0;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.provider-images .provider-logos li{
    width: calc(17% - 16px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.provider-images .provider-logos img{
    width: 60%;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.8;
    height: auto;
}


@media screen and (max-width: 1500px) {
    .provider-images{
        grid-column: 2/16;
    }
}
/*@media screen and (max-width: 1300px) {
    .provider-images{
        grid-column: 1/-1;
        margin-left: 16px;
        margin-right: 16px;
    }
}*/
@media screen and (max-width: 800px) {
    .provider-images .provider-logos li{
        width: calc(40% - 16px);
    }
    .provider-images .provider-logos img{
        margin: 5px 0px;
    }
}


/*////////////////////////Featured providers ////////////////////////////////////*/

.featured{
    margin: 0 auto;
    max-width: 80em;
    width: 100%; 
}

.featured h2{
    padding-bottom: 22px;
    color: #062054;
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    padding-top: 15px;
}

.featured .featured-list{
    list-style: none;
    padding: 0;
    margin: 30px 20px 20px;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.featured .featured-list li{
    width: calc(16% - 16px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.featured .featured-list img{
    width: 80%;
    opacity: 0.8;
    height: auto;
}

@media screen and (max-width: 1500px) {
    .featured{
        grid-column: 2/16;
    }
}

@media screen and (max-width: 800px) {
    .featured .featured-list li{
        width: calc(40% - 16px);
    }
    .featured .featured-list img{
        margin: 15px 0px;
    }
}


/*////////////////////////Advice blue bar///////////////////////////////////*/

.blue-bar{
    background-color: #062054;
    display: grid;
    margin: 50px 0px 0px;
}

.blue-bar-text{
    max-width: 80em;
    padding: 0 1em;
    margin: 55px auto 39px;
}

.blue-bar-text p{
    color: #fff;
    line-height: 1.5;
    font-size: 16px;
    margin-bottom: 16px;
}

@media screen and (max-width: 1500px) {
    .blue-bar-text{
        grid-column: 2/16;
    }
}
/*@media screen and (max-width: 1300px) {
    .blue-bar-text{
        grid-column: 1/-1;
        margin-left: 16px;
        margin-right: 16px;
    }
}*/

/*////////////////////Triple icon header/////////////////////////////////*/

.triple-icon-header{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 80em;
    width: 100%; 
    padding: 0 1em;
    padding-top: 50px;
}

.triple-icon-header-all{
    display: grid;
    grid-template-columns: 1fr;
}

.triple-icon-header-all i{
    font-size: 50px;
    margin: 0px auto 10px;
}

.triple-icon-header-all p{
    font-weight: 600;
    line-height: 1.3;
    font-size: 21px;
}

@media screen and (max-width: 1300px) {
    .triple-icon-header{
        text-align: center;
    }
}
@media screen and (max-width: 800px) {
    .triple-icon-header{
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 30px;
    }
}



/*///////////////////////Extra info box//////////////////////////////*/

.extra-information-box{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 80em;
    width: 100%; 
    padding: 0 1em;
    padding-top: 50px;
    gap: 30px;
    padding-bottom: 4rem;
}

.extra-info-list h2, .extra-info-drawdown h2, .extendedcopy-list h2 ,.extendedcopy-options h2{
    font-weight: 800;
    margin-bottom: 16px;
    font-size: 24px;
}

.extra-information-box i, .extra-info-drawdown i, .extendedcopy-list i{
    font-size: 40px;
    margin: auto 0px; 
}

.advice-list, .drawdown-list, .normal-list{
    list-style: none;
    margin: 13px 0 0 0;
    flex-wrap: wrap;
    gap: 16px;
}

.advice-list li, .drawdown-list li, .normal-list li{
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.drawdown-list .list-connect-all{
    margin: auto 0px;
}

.list-connect-all{
    display: grid;
    grid-template-columns: 1fr;
}

.extra-info-review h3, .extendedcopy-options h3{
    font-size: 19px;
    font-weight: bold;
}

.extra-info-review img{
    margin: 10px 0px;
}

.extra-info-review a{
    margin: 15px 0px ;
}


@media screen and (max-width: 767px) {
    .extra-information-box{
        grid-template-columns: 1fr;
        padding-bottom: 75px;
    }
}


/*/////////////////////Drawdown extra info box/////////////////////////*/

.extra-info-drawdown{
    display: grid;
    grid-column: 3/15;
    width: 100%;
    max-width: 80em;
    padding-bottom: 4rem;
    margin:0 auto;
}

.extra-info-drawdown h3{
    font-size: 19px;
    font-weight: bold;
}

.extra-info-drawdown h2{
    margin-bottom: 0px;
}


/*@media screen and (max-width: 1300px) {
    .extra-info-drawdown{
        grid-column: 1/-1;
        margin-left: 16px;
        margin-right: 16px;
    }
}*/


/*////////////////////Extended copy extra info box///////////////////////////*/

.extra-info-extendedcopy{
    display: grid;
    grid-column: 3/15;
    margin-bottom: 30px;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.extendedcopy-options p{
    margin-bottom: 30px;
}

.extendedcopy-options h3{
    margin-bottom: 5px;
}


@media screen and (max-width: 1500px) {
    .extra-info-extendedcopy{
        grid-column: 2/16;
    }
}
/*@media screen and (max-width: 1300px) {
    .extra-info-extendedcopy{
        grid-column: 1/-1;
        margin-left: 16px;
        margin-right: 16px;
    }
}*/
@media screen and (max-width: 800px) {
    .extra-info-extendedcopy{
        grid-template-columns: 1fr;
        gap: 75px;
    }
}

/*////////////////////////////////////Footer/////////////////////////////////////*/

.footer{
    grid-column: 1/-1;
    margin: 0px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: #062054;
}

.footer h2, .footer p, .footer a, .footer div, .footer span{
    color: #fff;
}

.footer h2{
    font-weight: 800;
}


.footer-socials-text{
    text-align: center;
}

.footer-socials{
    font-size: 40px;
    margin: 20px 0px 50px;
}

.footer-socials a{
    margin: 0px 10px;
}

.footer-socials a:hover{
    color: hsla(0, 0%, 100%, .7);
}

.footer p{
    margin: 15px 0px;
}

.footer-copyright{
    text-align: center;
    padding: 50px 0px ;
}

.footer-icon{
    display: flex;
    justify-content: center;
    margin: 20px 0px;
}


.footer-icon img{
    margin: 0px 20px;
    width: 53px;
    height: 90px;
    margin: auto 0px;
}

.footer-text{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-wrap: nowrap;
    gap: 50px;
    padding: 0px 100px;
    padding-top: 50px;
}

.footer-text a{
    margin-top: 15px;
}

.footer-callback p{
    padding-bottom: 10px;
}

.footer-times{
    margin-left: auto;
}

.footer-times-all{
    display: flex;
    justify-content: space-between;
    max-width: 250px;
    gap: 20px
}

.footer-useful-links{
    display: grid;
    grid-template-columns: 1fr;
}

.white-bar{
    background-color: #fff;
    height: 3px;
    margin: 50px 100px;
}

.footer-callback a{
    background-color: #062053;
    color: #fff;
    font-size: 17px;
    padding: 10px 40px;
    padding-left: 30px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    flex-wrap: nowrap;
    border: 2px solid #fff;
    width: fit-content;
    transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}

.footer-callback a i{
    color: inherit;
    font-size: 23px;
    margin: auto 0px;
    margin-right: 7px;
    
}

.footer-callback a:hover{
    background-color: white;
    color: #062053;
}

.footer .footer-copyright {
    margin: 0;
}

.footer-text-under{
    text-align: center;
}
.footer-text-under{
    padding:0 1em;
}

@media screen and (max-width: 890px) {
    .footer-text{
        grid-template-columns: 1fr 1fr;
    }
    .footer-times{
        margin: 0px;
    }

}
@media screen and (max-width: 580px) {
    .footer-text{
        grid-template-columns: 1fr;
        padding-left:50px;
        padding-right:50px;
    }
    .white-bar{
        margin: 50px 50px;
    }
}
@media screen and (max-width: 470px) {
    .responsive-menu img {
        width: 80%;
    }
    .main-text h1  {
        font-size: 50px;
    }
}

















/*/////////////////////////////////////////////////Thank you Page///////////////////////////////////////////////////*/




.thankyou{
    grid-column: 3/15;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 175px;
    margin-bottom: 60px;
}

.thankyou-all h2{
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 10px;
}

.thankyou-all p{
    font-size: 16px;
}

.thankyou-all ul{
    margin-left: 50px;
}

.one-line{
    display: flex;  
}

.space-right{
    margin-right: 5px;
}

.thankyou-all ul{
    list-style-type: disc;
}

.thankyou a{
    color: #1b5cdd;
}

.out-hours, .in-hours{
    font-size: 15px;
}

@media screen and (max-width: 550px) {
    .thankyou-all ul{
        margin-left: 25px;
    }
}

@media screen and (max-width: 1500px) {
    .thankyou{
        grid-column: 2/16;
    }
}
@media screen and (max-width: 1300px) {
    .thankyou{
        grid-column: 1/-1;
        margin-left: 16px;
        margin-right: 16px;
    }
}


/*////////////////////////////////////Thank you rates//////////////////////////////////////////*/



.rates-box{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.rate-percent{
    font-size: 28px;
    font-weight: 600;
    height: 100px;
    width: 100px;
    border-radius: 1000px;
    background-color: #062053;
    color: #fff;
    text-align: center;
    justify-self: center;
    -webkit-box-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.rates-box-all h2{
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(6, 32, 84, 0.25);
    margin: 16px 0;
    font-size: 16px;
    font-weight: 800;
}

.rates-box-all p{
    font-weight: 600;
    font-size: 24px;
    margin-top: 10px;
}

.rates-box-all .rate-health-paragraph{
    font-size: 15px;
    font-weight: 400;
}

.rates-space{
    margin: 50px 0px;
}


@media screen and (max-width: 900px) {
    .rates-box{
        grid-template-columns: 1fr;
        gap: 70px;
    }
}








/*////////////Important at bottom/////////////*/

.hidden { display: none !important; }

.text-bold{
    font-weight: bold;
}

.thin-text-italic{
    font-style: italic;
}

.text-break{
    overflow-wrap: anywhere;
}

.footer-callback p span a {
    background-color: transparent;
    font-size: 16px;
    padding: 0px;
    padding-left: 0px;
    border-radius: 0px;
    font-weight: 400;
    display: block;
    border: none;
    width: auto;
    transition: none;
}











/*////////////////////////Zoom problem /////////////////////////*/

/*Too 150% ish zoom*/

@media screen and (max-width: 320px) {
    .header-logo {
        height: 38px;
    }
    .header-phone i {
        margin-right: 13px;
        margin-top: 2px;
    }
    .main-top{
        margin: 0px;
        width: 100vw;
        margin: 0px;
        margin-top: 135px;
        padding: 0px;
        border-radius: 0px;
    }
    #form-box{
        width: 92vw;
        margin: 0px 4vw;
    }
    .pension-form{
        width: 88%;
        margin: 0px;
    }
    .provider-images .provider-logos li {
        width: calc(100% - 16px);
    }
    .provider-images .provider-logos {
        gap: 30px;
    }
    .extra-info-review img {
        margin: 10px auto;
    }
    .extra-info-review{
        text-align: center;
    }
    .extra-info-drawdown{
        width: 92vw;
        margin-left: 0px;
        margin: 0px 4vw;
    }
    .featured .featured-list li {
        width: calc(100% - 16px);
    }



    .footer{
        margin: 0px;
        margin-bottom: 0px;
        border-radius: 0px;
        grid-column: none;
    }
    .white-bar{
        margin: 30px 20px;
    }
    .footer-times-left{
        text-align: left;
    }
    .footer-times-right{
        text-align: right;
    }
    .footer .footer-text-under, .footer-copyright{
        width: 92vw;
        margin: 15px 4vw;
    }
    .footer-callback a i{
        font-size: 35px;
    }
    .footer-callback a{
        padding: 10px 10px
    }
}