.over-lay-points {
    white-space: nowrap;
}

@media screen and (min-width: 1025px) and (max-width: 1300px) {
    .overlay-card {
        left: 50px;
    }

    .over-lay-heading {
        font-size: 32px;
    }

    .navigatePadding {
        margin-top: 150px;
    }

    .layoutWidth {
        width: 100%;
    }
}

@media screen and (min-width: 1301px) and (max-width: 1450px) {
    .layoutWidth {
        width: 95%;
    }
}

.blue_color {
    color: #037FB0 !important;
}

.font_heading {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
}

.font_list {
    font-size: 20px;
    font-weight: 400;
    text-align: left;
}

@media only screen and (max-width: 580px) {
    .navigatePadding {
        margin-top: 100px;
    }
}

.over-lay-points {
    white-space: nowrap;
}

/* @media screen and (min-device-width: 1025px) and (max-device-width: 1300px){
    .overlay-card{
        left: 50px;
    }
    .over-lay-heading{
        font-size: 32px;
    }
    
}*/

/*PFR Additional CSS*/
/*.navigatePadding{
	padding-top: 105px;
}*/
.breadCrumbNew {
    padding: 0 10px 0 30px;
    display: flex;
    align-items: center;
    height: 60px;
    background-color: white;
    border: 1px lightgray;
    border-style: solid none;
    font-size: 12px;
}

.sectionSubHeadingMedium {
    font-size: 18px;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
    color: #282828;
}

.realEstateSections {
    padding-top: 40px;
}

.buySellRightpadding {
    padding-right: 12px;
}

@media screen and (min-device-width: 601px) and (max-device-width: 900px) {

    .tableContainer,
    .tableSubContainer {
        display: block;
        width: 100%;
    }

    .buySellRightpadding {
        padding-right: 0;
    }
}

.header-icon-margin a img {
    margin-right: 5px !important;
}

.container-justify {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/*Home page and Header Additional CSS - Start*/
.financeImgAlign {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.links-padding a:hover {
    color: #036fa6 !important;
}

.header-icon-margin a img {
    margin-right: 5px !important;
}

/*Home page and Header Additional CSS - End*/

/*New Structure CSS - Start*/

/*Commen CSS - Start*/
.medium-heading-font {
    font-size: 24px;
    font-family: 'FigtreeBold';
}

.medium-heading-fontsize {
    font-size: 24px;
    font-family: 'FigtreeBold';
    color: #282828;
}

.font-description {
    font-size: 16px;
    font-family: 'Figtree';
    color: #000000;
}

.article-decription {
    font-size: 16px;
    color: #037FB0;
}

.headerSectonWidth .mtg-navigation {
    width: 1600px !important;
}

.border-radius-top {
    border-radius: 11px 11px 0 0;
}

.sectionHeaderText {
    font-family: 'FigtreeMedium';
    font-size: 32px;
    color: #282828;
}

.section-background-blue {
    background: #F2F9FF;
    border-radius: 12px;
}

.background-grey {
    background: #F5F5F5;
}

.backgroundLightBlue {
    background: #F1F9FE;
}

.backgroundColorFive {
    background: #FFFAE0;
}

.text-color-blue,
.text-color-blue p,
.text-color-blue a {
    color: #036FA6 !important;
}

.section-height {
    height: 100%;
}

.textColorBlack {
    color: #282828;
}

.linkStyle {
    border: 1px solid #C6CCD4;
    border-radius: 40px;
    color: #036FA6;
    padding: 6px 20px;
    background: #fff;
    margin: 4px;
    white-space: nowrap;
    cursor: pointer;
}

.linkStyle:hover {
    box-shadow: 0px 0px 8px 0px #00000040;
}

.sectionBackgoundOne {
    background: #F8F4E7;
    border-radius: 12px;
}

.beforeafterSection:last-child {
    margin-bottom: 0;
}

.sectionBackgoundTwo {
    background: #F2F9FF;
    border-radius: 12px;
}

.sectionBackgoundThree {
    background-color: #FFF0E5;
    border-radius: 12px
}

.sectionBackgoundfour {
    background: #F2F9FF;
    border-radius: 12px;
}

.slds-text-heading_small {
    font-size: 16px !important;
}

.button-dimention button,
.btnHeight {
    height: 40px;
    border-radius: 8px;
}

@media only screen and (max-width: 600px) {

    .button-dimention,
    .full-width-mobile {
        width: 100% !important;
        display: block;
        margin-bottom: 12px;
    }
}

.button-blue button,
.btnBlue {
    background-color: #047DBA;
    --sds-c-button-brand-color-border: #047DBA;
    font-family: 'FigtreeBold';
    padding-left: 24px;
    padding-right: 24px;
}

.base-button-font button {
    font-size: 24px;
    font-family: 'FigtreeBold';
    color: #036FA6;
}

.button-outline button {
    font-family: 'FigtreeBold';
    border: 2px solid #047DBA !important;
    color: #047DBA !important;
    padding-left: 24px;
    padding-right: 24px;
}

.total-amount-text {
    font-size: 40px;
    font-family: 'FigtreeMedium';
}

.calculatorHeader .slds-tabs_default__nav li a {
    font-size: 16px;
    color: #282828;
    font-weight: normal;
}

.calculatorHeader lightning-tab-bar>ul>li {
    width: 50%;
}

.text-color-grey {
    color: #595959;
}

.inputFieldStyle .slds-input,
.inputFieldStyle .slds-combobox__input {
    height: 40px;
    border: 1px solid #C6CCD4;
    border-radius: 3px;
}

.loanTermAlign button,
.inputFieldStyle .slds-combobox__input {
    display: flex;
    align-items: center;
}

[kx-scope=button][kx-type=underline]:focus:after,
[kx-scope=button][kx-type=underline]:hover:after {
    -webkit-transform: scaleX(0) !important;
    transform: scaleX(1);
}

.optionIcons {
    height: auto;
    width: 48px;
}

.alignSectionContents {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.carouselStyle .slds-carousel__indicator-action.slds-is-active,
.slds-carousel__indicator-action.slds-is-active:hover {
    background: var(--slds-g-color-brand-base-50, #037FB0) !important;
    border-color: var(--slds-g-color-brand-base-50, #037FB0) !important;
}

.articleImg {
    max-height: 190px;
    object-fit: cover;
}

.hoverBorderBottom:hover {
    border-bottom: 2px solid;
}

.resourceContainer {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.resourceSubContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.img-cover-fit {
    object-fit: cover;
}

.afterYouBuyBottomPadding {
    padding-bottom: 68px;
}

/*Temp CSS - Start*/
.tabsetStylingPayment ul li a {
    font-size: 16px !important;
    font-family: 'FigtreeBold';
    color: #282828 !important;
}

/*Temp CSS - End*/

c-mtg-buy-ahome>lightning-layout:nth-child(3)>slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item>slot>lightning-layout:nth-child(1)>slot>lightning-layout-item:nth-child(1)>slot>lightning-layout>slot>lightning-layout-item:nth-child(4)>slot>section>div.textColorBlack.slds-var-m-around_large.buyingProcessBtnPosition.slds-text-align_left>a>button {
    color: #036FA6 !important;
}

c-mtg-buy-ahome>lightning-layout:nth-child(3)>slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item>slot>lightning-layout:nth-child(1)>slot>lightning-layout-item.slds-var-m-top_xx-large.slds-var-p-around_xxx-small.slds-text-align_center.slds-size_12-of-12>slot>lightning-layout>slot>lightning-layout-item:nth-child(1)>slot>lightning-layout-item>slot>section>p>b>a {
    color: #036FA6 !important;
}

#tab-1>slot>lightning-layout>slot>lightning-layout-item.desktopTabSubcontainer.slds-var-p-around_small.slds-size_12-of-12.slds-medium-size_6-of-12.slds-large-size_6-of-12>slot>lightning-layout-item>slot>lightning-layout-item>slot>b:nth-child(1)>p {
    color: #282828;
}

#tab-1>slot>lightning-layout>slot>lightning-layout-item.desktopTabSubcontainer.slds-var-p-around_small.slds-size_12-of-12.slds-medium-size_6-of-12.slds-large-size_6-of-12>slot>lightning-layout-item>slot>lightning-layout-item>slot>b:nth-child(2)>p {
    color: #282828;
}

c-mtg-home-program>lightning-layout.slds-var-p-top_xx-large.slds-var-p-horizontal_x-large.slds-grid.slds-grid_align-center.slds-wrap>slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item.tableSubContainer.cardLayoutFullWidth.slds-var-p-right_small.slds-size_12-of-12.slds-large-size_8-of-12>slot>lightning-layout>slot>lightning-layout-item.sectionAlignment.box-border.slds-var-m-vertical_small.slds-var-p-around_large.slds-grid.slds-size_12-of-12 {
    align-items: center;
}

.image-content-fit {
    object-fit: contain;
}

.seperatorBorder {
    border-left: 1px solid #C7CCD3;
    height: 90px;
}

.sectionBoxEqualHeight {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

/*Commen CSS - End*/

/* Header BG CSS Desktop - Start*/
.hero-image {
    width: 100%;
}

.overlay-card-panel {
    max-width: 600px;
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translatey(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 28px 40px 28px 28px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.overlayCardWithIcon {
    max-width: 655px;
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translatey(-50%);
    background-color: #ffffff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.over-lay-card-heading {
    font-family: 'FigtreeBold';
    font-size: 40px;
    line-height: normal;
    letter-spacing: 0px;
    color: #282828;
}

/*Custom table for Campaign Interest Rate DDMV*/
.layout-backgColor {
    background: #F4FAF0;

}

.fontsizeddmv {
    font-family: 'FigtreeBold';
    font-size: 12px;
}

.custom-table {
    width: 100%;
    /* table shrinks or grows based on content */
    border: none;
    border-collapse: separate;
}

.custom-table th,
.custom-table td {
    padding: 0.5rem !important;
    /* soft spacing so it breathes */
    border: none;
    /* removes all lines */
    border-collapse: separate;
}

.custom-table th {
    background-color: #E9F5E1;
    font-weight: bold;
}

.custom-table tbody tr:nth-child(even) {
    border-bottom: 1px solid #D0E9BE;
    background: #E9F5E1;

}

.custom-table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.50);
    border-bottom: 1px solid #F4FAF0;
}

.readyToGetStartSectionMargin {
    margin-top: 80px;
    margin-bottom: 80px;
}

.learnFinancingsectionHeading {
    min-height: 160px;
}

.underline-container {
    text-decoration: none;
    padding-bottom: 16px;
    display: inline-block;
    position: relative;
}

.underline-container::after {
    content: "";
    display: block;
    width: 50%;
    border-bottom: 8px solid #036FA6;
    position: absolute;
    bottom: 0;
    left: 0;

}

.site-nav-warning-title {
    color: #0A223F;
    font-weight: 700;
    font-size: 24px;
    font-family: 'FigtreeRegular', Arial, Helvetica, sans-serif;
}

.continue {
    border: 1px solid #036fa6;
    border-radius: 8px;
    color: #fff !important;
    background: #036fa6 !important;
    font-family: 'FigtreeRegular', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 35px;
}

.continue:hover {
    background: #0A223F !important;
}

.cancel {
    color: #036fa6 !important;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.cancel:hover {
    color: #0A223F !important;
}

.backdrop-open-cls {
    opacity: 0.4 !important;
}

.slds-text-body_small {
    font-family: 'FigtreeRegular', Arial, Helvetica, sans-serif;
    color: #0A223F;
}

.learnMore {
    font-family: 'FigtreeRegular', Arial, Helvetica, sans-serif !important;
    color: #036FA6 !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 350 !important;
    line-height: 16px !important;

}

.socialMediaIcon {
    margin-right: 16px;
    height: 32px;
    width: 32px;
}

.iconsRight {
    display: flex;
    justify-content: flex-end;
}

.slds-modal__container {
    border-radius: 10px;
    --slds-c-modal-radius-border: 10px;
}

.slds-modal__content {
    border-radius: 10px;
    --slds-c-modal-radius-border: 10px;
}

.modal_container_custom_cls {
    width: 100%;
    text-align: center;
}

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

.site-nav-warning-close {
    color: #047DBA !important;
}

.site-nav-warning-title {
    color: #0A223F;
    font-weight: 700;
    font-size: 24px;
    font-family: FigtreeRegular, Arial, Helvetica, sans-serif;
}

.bold_p_custom_cls {
    padding: 5%;
    padding-top: 0%;
    font-size: 28px;
    margin-top: 16px;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
    color: #282828;
}

.bold_p_custom_cls_2 {
    padding-top: 0%;
    font-size: 18px;
    font-family: 'FigtreeMedium', Arial, Helvetica, sans-serif;
    color: #282828;
    text-align: center;
}

.dialogNoneBorder {
    border: none;
    outline: none;
    background: none;
}

/* Header BG CSS Desktop - End*/

.calcBlockSize {
    width: 100%;
    height: 100%;
}

.calculator-field-label .slds-form-element__label {
    font-family: 'FigtreeBold';
    font-size: 14px;
}

c-mtg-resource-center>lightning-layout>slot>lightning-layout-item>slot>img {
    cursor: pointer;
}

c-mtg-buy-ahome>lightning-layout.slds-p-around_small.slds-var-m-top_xx-large.slds-grid.slds-grid_align-center.slds-wrap>slot>lightning-layout-item>slot>h3 {
    font-size: 16px;
}

.calcImgHeight {
    height: 242px;
}

.aroundBorderRadius {
    border-radius: 12px;
}

/* Buy Home page - Start */
.containerPadding {
    padding-top: 105px;
}

.cardSize {
    height: 280px;
    background: #fff;
    border: 1px solid #C6CCD4;
    border-radius: 12px;
    box-shadow: 0px 0px 8px 0px #00000040;
}

.fixedFullWidth {
    width: 100% !important;
}

.fontSize-medium {
    font-size: 24px;
    color: #282828;
    font-family: 'FigtreeBold' !important;
}

.fontSize-mediumPR {
    font-size: 21px;
    color: #282828;
    font-family: 'FigtreeBold' !important;
}

.buyingProcessBtnPosition {
    position: absolute;
    bottom: 15px;
    left: 0;
}

.buttonPositionBottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.articlesText {
    font-size: 16px;
    color: #036FA6;
}

.superscript {

    color: #036FA6;
}

.carouselStyle img {
    height: auto;
    width: 80px;
}

.infographicImgStyle img {
    height: auto;
    width: 100px;
}

.carouselStyle .slds-carousel__content {
    background: transparent;
    height: auto;
    color: #282828;
}

.carouselStyle .slds-carousel__panel-action {
    border: none;
}

/* Buy Home page - end */
/*Interest Rate Desktop- start*/
.interestRateCard {
    background-color: #ffffff;
    height: 320px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #00000040;
}

.interestRateCardPR {
    background-color: #ffffff;
    height: 190px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #00000040;
}

.pageHeaderText {
    font-size: 40px;
    font-family: 'FigtreeBold';
    color: #282828;
    text-align: center;
}

.cardLayoutsizePR {
    width: 50%;
}

/*Interest Rate Desktop- end*/

/*Tab Device 1024px only - start*/
@media screen and (device-width: 1024px) {
    .layoutWidth {
        width: 94%;
        padding: 0 20px;
    }

    .cardLayoutFullWidth {
        width: 100%;
    }

    .cardLayoutsize,
    .halfWidth {
        width: 50%;
    }

    .cardLayoutsizePR,
    .halfWidth {
        width: 50%;
    }

    .overlay-card-panel,
    .overlayCardWithIcon {
        max-width: 86% !important;
    }
}

/*Tab Device 1024px only - End*/
@media screen and (max-width: 1024px) {

    /* Header BG CSS Tab and Mobile - Start*/
    .overlay-card-panel,
    .overlayCardWithIcon {
        position: relative;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 1;
        max-width: 94%;
        text-align: center;
    }

    .overlayCardWithIcon .over-lay-card-heading {
        padding: 0;
        text-align: left;
    }

    .overlayCardWithIcon .over-lay-subtext {
        text-align: left;
    }

    .over-lay-card-heading {
        width: 100%;
        padding: 0 100px;
    }

    .over-lay-subtext {
        font-size: 20px;
    }

    .banner-bottom-margin {
        margin-bottom: -60px;
    }

    .bulletpointsAlign {
        justify-content: center;
    }

    /* Header BG CSS Tab and Mobile - End*/
    .content-order {
        order: 2;
    }

    .pageHeaderText {
        font-size: 32px;
    }
}

@media only screen and (max-width: 676px) {
    .interestCardContent {
        width: 50% !important;
    }
}

@media screen and (max-width: 600px) {

    /* Header BG CSS mobile Only - Start*/
    .overlay-card-panel {
        position: relative;
        z-index: 1;
        left: 0;
        right: 0;
        max-width: 97%;
    }

    .overlayCardWithIcon {
        position: relative;
        z-index: 1;
        top: 120px;
        left: 0;
        right: 0;
        max-width: 97%;
    }

    .over-lay-card-heading {
        font-size: 24px;
        padding: 0;
    }

    .over-lay-subtext {
        font-size: 16px;
        margin-top: -2px;
    }

    .sectionHeaderText {
        font-size: 24px;
    }

    .bulletpointsAlign {
        justify-content: left;
        text-align: left;
        align-items: start;
    }

    /* Header BG CSS mobile Only - End*/
    /* Buy a Home mobile Only - Start*/
    .cardSize {
        width: 100%;
        text-align: center;
        margin: 8px 0;
    }

    .buyingProcessBtnPosition {
        position: relative;
    }

    .calcBlockSize {
        height: 150px;
    }

    /* Buy a Home mobile Only - End*/
    /*Interest Rate Mobile Only- start*/
    .interestRateCard {
        height: 200px;
    }

    .interestRateCardPR {
        height: 160px;
    }

    .pageHeaderText {
        font-size: 24px;
    }

    .cardLayoutsizePR {
        width: 100%;
    }

    /*Interest Rate  Mobile Only- end*/

}

@media (min-width: 1025px) and (max-width: 1400px) {
    .hero-image {
        height: 25rem;
    }

    .overlay-card-panel {
        left: 80px;
    }

    .articleImg {
        max-height: 160px;
    }
}

@media (min-width: 1025px) and (max-width: 1190px) {
    .cardLayoutsize {
        width: 33.33%;
    }

    .cardLayoutsizePR {
        width: 50%;
    }
}

@media screen and (min-width: 1025px) {

    /*Commen CSS Desktop only - Start*/
    .container-block {
        display: flex;
        align-items: stretch;
    }

    .container-subBlock {
        flex: 1;
    }

    /*Commen CSS Desktop only - End*/
}

@media screen and (min-width: 768px) {
    .desktopTabContainer {
        display: flex;
        align-items: stretch;
    }

    .desktopTabSubcontainer {
        flex: 1;
    }
}

/*New Structure CSS - End*/

/********PFR page css********/
.header-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.header-image {
    width: 100%;
    height: 30rem;
}

.navigatePadding {
    margin-top: 114px;
}

.overlay-card {
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translatey(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 28px 40px 28px 28px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.over-lay-heading {
    font-size: 40px;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
    color: #282828;
    line-height: normal;
}

.over-lay-subtext {
    font-size: 20px;
    font-family: 'Figtree', Arial, Helvetica, sans-serif;
    color: #282828;
}

.scrollable {
    height: 280px;
    overflow-y: scroll;
    padding-right: 20px;
}

.sentance-text {
    font-size: 14px;
    color: #282828;
}

.sellingSectionImg {
    border-radius: 11px 0 0 11px;
}

.icon_black {
    --sds-c-icon-color-foreground-default: black;
}

.button-green {
    --sds-c-button-brand-color-background: #398007;
    --sds-c-button-brand-color-border: #398007;
    --sds-c-button-brand-color-background-hover: #3a5e20;
    --sds-c-button-brand-color-border-hover: #3a5e20;
}

.button-green button {
    Padding-left: 24px;
    padding-right: 24px;
    --sds-c-button-brand-color-background-hover: #3a5e20;
}

c-mtg-heloc>lightning-layout:nth-child(2)>slot>lightning-layout-item>slot>lightning-layout.slds-grid.slds-grid_align-center.slds-wrap>slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item:nth-child(1)>slot>lightning-layout>slot>lightning-layout-item:nth-child(1)>slot>lightning-layout>slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item.slds-var-m-around_large.buyingProcessBtnPosition.slds-text-align_left.slds-size_12-of-12>slot>a>lightning-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.button-green button {
    font-family: 'FigtreeBold';
    padding-left: 24px;
    padding-right: 24px;
}

.icon_blue {
    --sds-c-icon-color-foreground-default: #037FB0;
}

.icon_white {
    --sds-c-icon-color-foreground-default: #ffffff;
}

.noPointerEvent {
    pointer-events: none;
}

.fullWidth {
    width: 100%;
}

.tableContainer {
    display: table;
}

.tableSubContainer {
    display: table-cell;
    vertical-align: top;
}

.box-border {
    border: 1px solid #C6CCD4;
    border-radius: 12px;
}

.sectionHeading {
    font-size: 32px;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
    color: #282828;
}

.sectionSubHeadingText {
    font-size: 20px;
    font-family: 'FigtreeMedium', Arial, Helvetica, sans-serif;
    color: #282828;
}

.buyHomeSectionImage {
    border-radius: 11px 0 0 11px;
}

.medium-font {
    font-size: 24px;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
    text-align: center;
}

.background-grey {
    background-color: #f4f4f4;
}

.textclor_green {
    color: #398007 !important;
}

.supertscript_green a {
    color: #398007;
    font-size: 16px;
    font-weight: 400 !important;
    text-decoration: none;
}

.supercriptcolor a {
    color: #282828 !important;
    text-decoration: none !important;
}

.sectionPadding {
    padding: 16px;
}

.navigationPadding {
    padding-bottom: 100px;
}

.btnSize {
    width: 157px;
}

.border-radius-bottom {
    border-radius: 0 0 11px 11px;
}

.section-border-radius {
    border-radius: 11px 0 0 11px;
}

.heading-medium-text {
    font-size: 24px;
    color: #282828;
}

.imgSize {
    width: 620px;
    padding: 16px;
}

.sectionImageSize {
    width: 100%;
    height: 260px;
}

.lastItemBorder:last-child {
    border: none;
}

.articlesSectionImg {
    width: 100%;
    height: 310px;
    border-radius: 11px 11px 0 0;
}

.all_button_redius {
    border: 1px solid #C6CCD4;
    border-radius: 40px;
    color: #037FB0;
    padding: 0px 20px;
    margin: 4px;
}

.financeSectionMargin {
    margin-top: 48px;
}

.subContainer {
    flex: 1;
}

.impBuyerImg {
    width: 330px;
}

@media screen and (min-width: 601px) and (max-width: 767px) {

    .buyHomeSectionImage,
    .sellingSectionImg {
        width: 100%;
        border-radius: 11px 11px 0 0;
    }

    .supertscript_green a {
        font-size: 13px;
    }

    .sectionRightPadding {
        margin-right: 12px;
        margin-top: 12px;
    }

    .overlay-card {
        position: relative;
        bottom: 45px;
        left: 0;
        background-color: #FFFFFF !important;
        box-shadow: 0px 4px 4px 0px #00000040;
    }

    .over-lay-card-heading {
        padding: 0;
    }

    .mediumDevicePosition {
        margin-bottom: -150px;
    }

    .sectionPadding {
        padding: 16px 0;
    }

    .sectionAlignment {
        padding: 16px;
    }

    .displayContents {
        display: block;
    }
}

@media screen and (max-width: 767px) {

    .panelCard {
        background: #ffffff;
        box-shadow: 0px 4px 4px 0px #00000040;
        border-radius: 10px;
        text-align: center;
    }

    .panelCardPosition {
        position: relative;
        top: -85px;
        padding: 0 8px;
    }

    .contentMobileAlign {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }

    .navigationPadding {
        padding-bottom: 50px;
    }

    .heading-medium-text {
        font-size: 20px;
    }

    .imgSize {
        width: 100%;
        padding: 0;
    }

    .section-border-radius {
        border-radius: 11px 11px 0 0;
    }

    .financeSectionMargin {
        margin-top: -50px;
    }

    .financeSubContentMargin {
        margin: 0 0 12px 0;
    }

    .interestRateCard {
        height: 200px;
    }

    .interestRateCardPR {
        height: 160px;
    }
}

@media (min-width: 768px) {
    .linear-background {
        background: linear-gradient(180deg, #FFFFFF 81.92%, #EDF0F4 100%);
    }

    .horizontal-spacing {
        padding: 0 8px;
    }
}

/*ipad and tablet screen*/
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .navigatePadding {
        margin-top: 70px;
    }

    .overlay-card {
        left: 25px;
        padding: 20px;
    }

    .over-lay-heading {
        font-size: 22px;
    }

    .over-lay-subtext {
        font-size: 20px;
    }

    .sectionRightPadding {
        padding-right: 12px;
    }

    .tableContainer {
        margin-top: 12px;
    }

    .header-image {
        height: 20rem;
    }

    .sectionPadding {
        padding: 16px 0;
    }

    .sectionAlignment {
        padding: 16px;
    }

    .sectionImageSize {
        height: 160px;
    }

    .articlesSectionImg {
        height: 220px;
    }

    .navigationPadding {
        padding-bottom: 60px;
    }

    .heading-medium-text {
        font-size: 18px;
    }

    .sectionHeading {
        font-size: 32px;
    }

    .customerSupportSection {
        display: block;
    }

    .customerSupportImg {
        width: 100%;
        height: 335px;
        border-radius: 11px 11px 0 0;
    }

    .customSectionContent {
        margin: 0 20px;
    }
}

@media screen and (min-device-width: 1025px) and (max-device-width: 1300px) {
    .overlay-card {
        left: 50px;
    }

    .over-lay-heading {
        font-size: 32px;
    }

    .over-lay-subtext {
        font-size: 18px;
    }

    /* .navigatePadding{
        margin-top: 150px;
    } */
    .navigationPadding {
        padding-bottom: 145px;
    }

    .sectionImageSize {
        height: 180px;
    }

    .customerSupportImg {
        height: 40rem;
    }
}

@media only screen and (max-width: 600px) {
    .header-container {
        margin-top: 0;
    }

    .navigatePadding {
        margin-top: 80px;
    }

    .sectionHeading {
        font-size: 24px !important;
        text-align: center !important;
    }

    .buyHomeSectionImage,
    .sellingSectionImg {
        width: 100%;
        border-radius: 11px 11px 0 0;
    }

    .overlay-card {
        left: 0;
        right: 0;
        top: -6rem;
        text-align: center;
        position: relative;
        background-color: #FFFFFF !important;
        box-shadow: 0px 4px 4px 0px #00000040;
        padding: 15px;
    }

    .mediumDevicePosition {
        margin-bottom: -12rem;
    }

    .supertscript_green a {
        font-size: 13px;
    }

    .mobileAlign {
        text-align: left;
        align-items: flex-start;
        margin: 0 0 5px 20px;
    }

    .sectionPadding {
        padding: 16px 0;
    }

    .sectionAlignment {
        padding: 16px;
    }

    .over-lay-heading {
        font-size: 24px;
    }

    .over-lay-subtext {
        font-size: 16px;
    }
}

.background-light-blue {
    background: #F2F9FF;
}

.labelBold .slds-form-element__label {
    font-weight: 700;
}

/******PFR page css - End*******/
/*Mortgage Calculators - Start*/
.mtgCalculatorStyling c-mtg-calculator ul {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mtgCalculatorStyling c-mtg-calculator ul li {
    width: 33.33%;
    text-align: center;
    margin-right: 12px;
}

.mtgCalculatorStyling .sentance-text {
    text-align: center;
}

.mtgCalculatorStyling c-mtg-calculator .slds-tabs_default__overflow-button {
    width: 5%;
}

.calculatorBackgroundImg {
    background-image: url(/mortgagevforcesite/cms/delivery/media/MCE34WJSMPC5H2NASZI36GWINXPM);
    height: 150px;
    object-fit: cover;
}

.textColorWhite {
    color: #ffffff;
}

.justifycontent {
    text-align: center;
    justify-content: center;
    display: flex;
}

c-mtg-apply-now .textColorBlack lightning-formatted-rich-text {
    font-size: 12px;
}

/*Mortgage Calculators - End*/
/* Header Additional css - start*/
@media screen and (max-width: 1280px) {
    .nav-style-li {
        padding: 0 8px;
    }

    .submenu-header {
        width: 17%;
    }

    .image-position {
        padding-left: 20px !important;
    }
}

.button-brand-blue button {
    padding: 0 20px;
    font-family: 'FigtreeBold';
}

.loginButton button {
    font-family: 'FigtreeBold';
    border: 2px solid #047DBA !important;
    color: #047DBA;
    padding-left: 24px;
    padding-right: 24px;
}

.loginButton button:hover {
    background-color: #036fa6;
    color: #fff;
}

.submenu-main-heading-links {
    font-size: 16px;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
    color: #002855;
}

/* Header Additional css - end*/

/*Interest Rate page additional - Start*/
@media screen and (max-width: 767px) {
    c-mtg-interest-rate .backgroundColorFive slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout {
        flex-wrap: nowrap;
        justify-content: center;
    }

    c-mtg-interest-rate .backgroundColorFive slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item:nth-child(6)>slot>lightning-layout>slot>lightning-layout-item {
        padding-bottom: 12px;
    }
}

@media screen and (max-width: 1024px) {
    c-mtg-interest-rate>lightning-layout:nth-child(2)>slot>lightning-layout-item>slot>lightning-layout:nth-child(3)>slot>lightning-layout-item>slot>lightning-layout>slot>lightning-layout-item:nth-child(2)>slot>lightning-layout {
        flex-wrap: wrap;
    }
}

/*Interest Rate page additional - End*/

/*mortgage Pre Approval - Start*/
.btn-green button {
    font-family: 'FigtreeBold';
    background-color: #398007;
    color: #fff;
    width: 100%;
   }

.btn-outline button {
    font-family: 'FigtreeBold';
    border: 2px solid #047DBA !important;
    color: #047DBA !important;
    width: 100%;
}

/*mortgage Pre Approval - End*/

.inputFieldStyle .slds-form-element__label {
    color: #282828;
}


/* First Time Home Buyer CSS  Start*/
.listGap {
    gap: 1.5rem;
}

.container-sticky-block {
    display: flex;
    flex-direction: column;
}

.box {
    height: 200px;
    margin: 10px;
    background-color: lightgray;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-menu {
    height: 50px;
    background-color: #f1f1f1;
}

.header {
    height: 100px;
    background-color: #e1e1e1;
}

.sticky {
    position: fixed;
    top: 160px;
    /* Adjust based on your navigation height */
    width: 100%;
}

.needHelpCard {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .35);
    border-radius: 6px;
}

.mainSection li a {
    color: #282828;
    text-decoration: none;
}

.colorText {
    color: #282828;
}

.mainSection li a:active {
    border-bottom: 2px solid #036fa6;
}

.sticky-expandable {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
    position: sticky;
    top: 64px;
    z-index: 1000;
}

.fontSize {
    font-size: 12px;
}

@media only screen and (max-width: 1024px) {
    .bannerMobImg .hero-image {
        height: 256px;
        object-fit: cover;
    }
}

/* First Time Home Buyer CSS  Ends*/
.textMediumWithBlack {
    color: #282828 !important;
    font-size: 18px !important;
    font-family: 'FigtreeBold' !important;
}

.carouselStyle .slds-carousel__panels {
    display: inline;
}

.textMediumBold {
    color: #282828;
    font-family: 'FigtreeBold';
}

b {
    font-weight: normal !important;
}

.listStyle {
    list-style: initial;
}

.linksTab {
    padding-bottom: 4px;
    color: #282828;
    border-bottom: 2px solid #036fa6;
    text-decoration: none;
}

.scrollMargin {
    scroll-margin-top: 55px;
}

.headingSmall {
    font-family: 'FigtreeBold';
    font-size: 14px;
}

.banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block
}

c-mtg-contact-us .overlay-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.boxArea {
    height: 400px;
    background: #fff;
    border: 1px solid #C6CCD4;
    border-radius: 12px;
    box-shadow: 0px 0px 4px 0px #00000040;
}

.boxHeight {
    height: 190px;
}

.boxContainer {
    height: 200px;
    background: #fff;
    border: 1px solid #C6CCD4;
    border-radius: 12px;
    box-shadow: 0px 0px 4px 0px #00000040;
}

.fontBold {
    font-family: 'FigtreeBold';
}

.bold-text {
    font-family: 'FigtreeBold';
}

@media only screen and (max-width: 600px) {
    .boxArea {
        height: 386px;
    }

    .boxHeight {
        height: 170px;
    }
}

.blackColor p {
    color: #282828 !important;
}


/* Blend Application Css */
.line-through {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.line-through::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #979797;
    z-index: 1;
}

.line-through span {
    font-family: 'FigtreeBold';
    position: relative;
    z-index: 2;
    background-color: white;
    padding: 0 10px;
    color: #979797;
    text-transform: uppercase;
}

.loginTextBackground {
    background-color: #0A223F;
    bottom: 0;
    border-radius: 0 0 11px 11px;
    opacity: 90%;
}

.blendSecurityHeading {
    font-family: 'FigtreeBold';
    font-size: 32px;
}

.agreementContentJustified {
    text-align: justify;
}

.contentJustify {
    text-align: justify;
}

.incomeSliderStyle {
    accent-color: #037FB0;
}

/** Blend Css Start **/
.line-through {
    position: relative;
    text-align: center;
    margin: 20px 0;
}

.line-through::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #979797;
    z-index: 1;
}

.line-through span {
    font-family: 'FigtreeBold';
    position: relative;
    z-index: 2;
    background-color: white;
    padding: 0 10px;
    color: #979797;
    text-transform: uppercase;
}

.loginTextBackground {
    background-color: #0A223F;
    bottom: 0;
    border-radius: 0 0 11px 11px;
    opacity: 90%;
}

.blendSecurityHeading {
    font-family: 'FigtreeBold';
    font-size: 32px;
}

.contentJustify {
    text-align: justify;
}

.agreementContentJustified {
    text-align: justify;
}

/** Blend Css End **/




/* Additional calculators */

.tile-box {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tile-box img {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    margin-bottom: 0.75rem;
}

.custom-btn {
    --slds-c-button-brand-height: 12rem;
    font-size: 1.1rem;

}

.custom-btncalc .slds-button {
    --sds-c-button-brand-color-background-hover: #005D98;
    border-radius: 8px;
    background-color: #036FA6;
}

/* Rate Buy Down Calculator Specific Styles */

.calculator-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1rem;
    background-color: #FFFFFF;
}

/* Layout Columns */
.input-column {
    /* padding-right: 1rem; */
    align-self: stretch;
    border: 1px solid var(--Gray-40, #C7CCD3);
    border-right-width: 0;
    border-radius: 10px 0 0 10px;
}

.results-column {
    padding-left: 1rem;
    border-radius: 0 10px 10px 0;
    border: 1px solid var(--Gray-40, #C7CCD3);
    /* background: var(--White-100, #FFF); */
    align-self: stretch;
}

/* Input Section Styling */
.input-section-container {
    background: #F2F9FF;
    border-radius: 12px 0 0 12px;
    height: 100%;
    min-height: 500px;
}

/* Status Messages */
.status-message-alert {
    background-color: #AAE1FD;
    border-radius: 0px;
    padding: 1rem;
    border: 1px solid transparent;
}

.status-message-success {
    background-color: #90E4C1;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid transparent;
}

.status-message-warning {
    background-color: #FFF7C6;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid transparent;
}

.status-icon-success {
    color: #0B8043;
    margin-right: 0.5rem;
}

.status-icon-warning {
    color: #C25400;
    margin-right: 0.5rem;
}

.status-text-success {
    color: #282828;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
}

.status-text-warning {
    color: #282828;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
}

/* Payment Cards Container */
.payment-cards-container {
    max-width: 400px;
    margin: 0 auto;
}

.payment-section {
    width: 100%;
}

/* Payment Cards */
.payment-label {
    color: #282828;
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

.payment-card-current,
.payment-card-new {
    background: #F1F9FE;
    padding: 12px 24px;
    text-align: center;
    border-radius: 40px;
    transition: box-shadow 0.2s ease;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    width: 368px;
}

.payment-card-current:hover,
.payment-card-new:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

.payment-amount {
    font-size: 40px;
    line-height: 48px;
    font-family: 'FigtreeBold', sans-serif;
    color: #282828;
    margin: 0;
}

.payment-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.trending-icon {
    color: #0B8043;
}

/* Monthly Savings */
.savings-label {
    color: #595959;
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

.background_color_success {
    background-color: #90E4C1;
}

.background_color_alert {
    background-color: #FFF7C6;
}

.background_color_default {
    background-color: #F0F9FF;
}

.background_color_savings {
    background-color: #E9F5E1;
}

.background_color_savings_down {
    background-color: #7AE5BD;
}

.background_savings_alert {
    background-color: #FFFAE0;
}

.savings-highlight-container {
    border-radius: 40px;
    padding: 12px 24px;
    display: inline-block;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    width: 90% !important;
    text-align: center;
}

.savings-amount {
    color: #282828;
    font-family: 'FigtreeBold', sans-serif;
    font-size: 48px;
}

/* Payment Details Container */
.payment-details-container {
    /* border: 1px solid #E0E5E9; */
    border-radius: 8px;
    padding: 1rem;
    /* background: #FAFAFA; */
}

.payment-details-title {
    color: #282828;
    font-size: 18px;
    font-family: 'FigtreeBold', sans-serif;
    text-align: center;
}

/* Ensure grid layout works properly */
.payment-details-container .slds-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.payment-details-container .slds-col {
    flex: 1;
    min-width: 300px;
}

/* Analysis Sections */
.break-even-section {
    padding: 1rem;
    background: #F2F9FF;
    border-radius: 8px;
    height: 100%;
    border: 1px solid #E0E5E9;
}

.savings-section {

    padding: 1rem;
    border-radius: 8px;
    height: 100%;
    border: 1px solid #E0E5E9;
}

.section-header-breakeven,
.section-header-savings {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.section-icon {
    color: #037FB0;
    margin-right: 0.5rem;
}

.section-title {
    color: #282828;
    font-size: 16px;
    font-family: 'FigtreeBold', sans-serif;
}

/* Detail Items */
.detail-item {
    padding: 4px 0;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    margin-bottom: 0.5rem; */
    justify-content: space-between;
    display: flex;
    ;
}

.detail-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.detail-label {
    color: #282828;
    font-size: 12px;
    font-family: 'FigtreeBold', sans-serif;
    /* display: block; */
    margin-bottom: 0.25rem;
}

.detail-value {
    color: #282828;
    font-size: 14px;
    font-weight: 400;
}

.detail-value-highlight {
    color: #282828;
    font-size: 14px;
    font-family: 'FigtreeBold', sans-serif;
}

/* Chart Section */
.chart-title {
    color: #282828;
    font-size: 18px;
    font-family: 'FigtreeBold', sans-serif;
    margin-bottom: 1rem;
}

.chart-placeholder {
    height: 200px;
    background-color: #F5F5F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5E5E5;
}

.chart-placeholder-text {
    color: #595959;
}

/* Apply Button Styling */
.apply-button {
    background-color: #047DBA !important;
    border-color: #047DBA !important;
    font-family: 'FigtreeBold', sans-serif;
    padding: 12px 40px !important;
    border-radius: 8px !important;
    height: 48px !important;
    font-size: 16px !important;
    min-width: 200px;
}

/* Desktop Responsive - Large screens */
@media screen and (min-width: 1025px) {
    .calculator-container {
        padding: 2rem;
    }

    /* .input-column {
        padding-right: 2rem;
    } */

    .results-column {
        padding-left: 2rem;
        align-self: stretch;
    }

    .payment-details-container .slds-grid {
        gap: 1rem;
    }

    /* Ensure side by side layout on desktop */
    .payment-details-container .slds-col {
        flex: 1;
        min-width: 45%;
        padding-right: 0px;
        padding-left: 0px;
    }
}

/* Tablet Responsive */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .calculator-container {
        padding: 1.5rem;
    }

    .input-column {
        padding-right: 1rem;
        margin-bottom: 1rem;
    }

    .results-column {
        padding-left: 1rem;
    }

    .payment-amount {
        font-size: 36px !important;
    }

    .savings-amount {
        font-size: 36px !important;
    }

    /* Keep side by side on tablet too */
    .payment-details-container .slds-grid {
        gap: 1rem;
    }

    .payment-details-container .slds-col {
        flex: 1;
        min-width: 45%;
        padding-right: 0px;
        padding-left: 0px;
    }
}

@media screen and (max-width: 600px) {

    .payment-card-current,
    .savings-highlight-container {
        width: 100%;
    }
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .calculator-container {
        padding: 0.5rem;
    }

    .input-column,
    .results-column {
        padding: 0;
        margin-bottom: 1rem;
    }

    .input-section-container {
        margin-bottom: 1.5rem;
        min-height: auto;
    }

    .payment-amount {
        font-size: 32px !important;
    }

    .savings-amount {
        font-size: 36px !important;
    }

    .payment-card-current,
    .payment-card-new {
        padding: 1rem;
    }

    .savings-highlight-container {
        padding: 12px 24px;
    }

    .break-even-section,
    .savings-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .payment-details-container .slds-grid {
        flex-direction: column;
    }

    .payment-details-container .slds-col {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    .apply-button {
        width: 100% !important;
        min-width: auto !important;
    }
}

/* Ensure grid works properly */
@media screen and (max-width: 1024px) {
    .input-column {
        margin-bottom: 1.5rem;
    }
}

/** Home Banner Changes Start **/
.homeBannerPosition {
    left: 10%;
    top: 15%
}

.homeBannerHeader {
    font-size: 40px;
    font-family: 'Figtree';
    font-weight: 100;
}

.cardStyle {
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgba(40, 40, 40, 0.25);
}

.cardHeight {
    height: 240px;
}

.cardDesktopPosition {
    margin-top: -8%
}

.homeSubSectionHeading {
    font-size: 32px;
    color: #282828;
}

@media screen and (max-width: 1024px) {
    .homeCardOverlay {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.80);
        box-shadow: 0px 4px 4px 0px #00000040;
        text-align: center;
        margin-top: -12%;
        padding: 32px;
    }

    .homeBannerHeader {
        font-size: 22px;
    }

    .homeSubSectionHeading {
        font-size: 28px;
        padding: 48px 0 24px 0;
    }

    .cardHeight {
        height: 250px;
    }
}

@media screen and (max-width: 600px) {
    .homeCardOverlay {
        margin-top: -18%;
        padding: 24px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1025px) {
    .cardDesktopPosition>slot>lightning-layout>slot>lightning-layout-item {
        width: 80%;
    }
}

@media screen and (device-width: 1025px) {
    .homeBannerPosition {
        left: 10%;
        top: 10%;
        padding-right: 25px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1300px) {
    c-mtg-home-page .banner-bottom-margin.slds-is-relative.slds-grid.slds-wrap>slot>lightning-layout-item.slds-var-p-horizontal_small.slds-var-p-vertical_x-large.slds-size_12-of-12>slot>lightning-layout>slot>lightning-layout-item {
        width: 100%;
    }

    .cardDesktopPosition>slot>lightning-layout>slot>lightning-layout-item {
        width: 80%;
    }

}

/** Home Banner Changes End **/

/* OLD Calc css start*/
.calculator-banner {
    background-color: #0076bc;
    background-image: linear-gradient(45deg, #0076bc, #005a8f);
    text-align: center;
}

.calculator-justify {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.calculator-subtitle {
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.section-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background-color: #f7f7f7;
}

.results-title {
    margin-bottom: 0.5rem;
}

/* Payment breakdown */
.payment-breakdown {
    border: 1px solid #C6CCD4;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

/* Amortization table */
.amortization-table-header {
    background-color: #DDE8ED;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
}

.amortization-row-odd {
    background-color: #F5F5F5;
}

.amortization-row-even {
    background-color: #FFFFFF;
}

/* Chart container */
.chart-container {
    height: 200px;
    position: relative;
}

/* Info boxes */
.info-box {
    background: #F1F9FE;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

/* OLD Calc css  end*/

/*Heloc Debt */

.headerMainSection .slds-accordion__summary {
    /* Change the font weight of the label and bgm*/
    background-color: #E1F3FF;
}

.headerMainSection .slds-accordion__summary-content {
    /* Change the font weight of the label and bgm*/
    font-weight: bold;
}

.custom-accordion1 .slds-accordion__summary {
    background-color: #fff;
}

.custom-accordion1 .slds-button:focus {
    box-shadow: none;
}


/* Campaign Page start */
.penfedLogoSize {
    width: 187px;
}

.textbold {
    font-family: 'FigtreeBold';
}

.over-lay-heading-h1 {
    color: #282828;
    font-family: FigTree;
    font-size: 36px;
    font-style: normal;
    line-height: 40px;
}

.headerOverlay {
    max-width: 600px;
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
}

.overlayCardBackground {
    width: 553px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.fontWeight500 {
    font-weight: 500;
}

.fontWeight700 {
    font-weight: 700;
}

/* Benefits Section Styles */
.benefit-card {
    background: #0A223F;
}

.benefitCardContent {
    gap: 32px;
}

.benefit-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

.section-title-h1 {
    color: #FFF;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    font-family: Figtree;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.benefit-description {
    color: #FFF;
    font-family: FigTree;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
}

.icon-blue {
    --sds-c-icon-color-foreground-default: #00A2E1;
}

.video-container {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

/* How It Works Section Styles */
.how-it-works-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}


.step-card {
    background: #ffffff;
    border-radius: 8px;
    border: 2px solid #e5e5e5;
    min-height: 250px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px 0 rgba(40, 40, 40, 0.25);
}

.step-card:hover {
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

.step-title {
    color: #282828;
    text-align: center;
    font-family: FigTree;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 25px;
}

.step-description {
    color: #282828;
    text-align: center;
    font-family: FigTree;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}

.line-seperator {
    border-top: 1px solid #C7CCD3;
}

.padding-top {
    padding-top: 40px;
}

/* Responsive Styles */

@media (max-width: 480px) {
    .over-lay-heading-h1 {
        color: #282828;
        font-family: FigTree;
        font-size: 24px;
        font-style: normal;
        line-height: 32px;
    }

    .section-title-h1 {
        color: #FFF;
        text-align: center;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #000;
        font-family: Figtree;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
    }

}

@media (min-width: 768px) and (max-width: 1100px) {
    .section-title-h1 {
        margin-top: 32px;
    }
}

@media (max-width: 1100px) {
    .sectionOrder {
        order: 2;
    }

    .benefitCardContent {
        justify-content: center;
    }

    .headerOverlay {
        left: 0;
        top: 92%;
        max-width: 100%;
        width: 100%;
        Justify-content: center;
    }

    .overlayCardBackground {
        width: 90%;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .penfedLogoSize {
        width: 147px;
    }

    .benefit-description {
        font-size: 16px;
    }

    .benefitCardContent {
        gap: 16px;
    }

    .smallScrrenSize {
        width: 80%;
    }

    .how-it-works-section {
        padding-bottom: 0;
    }
}




/* Campaign Page end */

/* WhyPenFed Home Page Start */

.wph-video-container {
    position: relative;
    height: 584px;
    /* Adjust as needed */
    overflow: hidden;
    background-color: black;

}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;

}

/* The Overlay Layer */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Sits between video and text */
    background: rgba(0, 0, 0, 0.4);
    /* Start transparent */
    
    /* Smooth darkening */
}

/* The "Shadow" state applied after 10s */
.video-overlay.shadow-active {
    background: rgba(0, 0, 0, 0.4);
    /* Adjust 0.6 for darker/lighter shadow */
}

.foreground-content {
    position: absolute;
    z-index: 3;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.top-right-icon {
    position: absolute;
    color: white;
    font-size: 20px;
    top: -60px;
    right: -140px;
    /* Distance from the right edge */
}

/* This class is applied after 10 seconds */
.blurred {
    filter: blur(8px);
    /* Adjust pixels for more/less blur */
}

.foreground-text {
    margin-top: 150px;
    color: var(--Current-Colors-White-White, #FFF);
    text-align: center;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-7XL, 48px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-6XL, 56px);
    /* 116.667% */
}

.foreground-Subtext {
    width: 819px;
    padding-top: 24px;
    color: var(--Current-Colors-White-White, #FFF);
    text-align: center;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-XL, 20px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--font-line-height-XL, 28px);
    /* 140% */
}

.foreground-button-green {
    display: flex;
    height: 40px;
    padding: 6px 22px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
   font-family: var(--font-family-New-font, Figtree);
    --sds-c-button-brand-color-text: #FFFFFF !important;
    --sds-c-button-brand-color-background: #398007;
    --sds-c-button-brand-color-border: #398007;
    --sds-c-button-brand-color-background-hover: #3a5e20;
    --sds-c-button-brand-color-border-hover: #3a5e20;

}

.foreground-button-blue {
    display: flex;
    height: 40px;
    padding: 6px 22px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
	font-family: var(--font-family-New-font, Figtree);
    --sds-c-button-brand-color-background: #036FA6;
    --sds-c-button-brand-color-border: #036FA6;
    --sds-c-button-brand-color-background-hover: #036FA6;
    --sds-c-button-brand-color-border-hover: #036FA6;
}

.foreground-button-text {
    color: var(--White-100, #FFF);
    text-align: center;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-style: normal;
    font-weight: var(--font-weight-Medium, 500);
    line-height: var(--font-line-height-L, 24px);
    /* 150% */

}

.page-container {
    padding: 24px;
    position: relative;
    z-index: 3;

}

.call-container {
    position: absolute;
    top: 30px;
    right: 228px;
    display: flex;
    align-items: center;
    gap: 8px;


}

.hero-call-number {

    color: var(--Text-Text-dark-bg, #FFF);
    text-align: center;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-XL, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--font-line-height-L, 24px);
}

.bottom-right-actions {
    flex-direction: column;
    display: flex;
    justify-content: center;
    gap: 32px;
    position: absolute;
    right: 204px;
    bottom: 35px;
}

.action-item {
    right: 0;
    bottom: 5px;
    position: absolute;
    width: 400px;
    text-align: right;
}

.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.center-buttons {
    display: flex;
    margin: 16px;
    gap: 24px;
}

.cardLayoutsizeWPH {
    width: auto;
}

.rate-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rates {
    display: flex;
    gap: 10px;
}

.sectionHeadingWPH {
    font-size: 20px;
    color: #282828;
    font-weight: 700;
    font-family: 'Figtree';
}

.item {
    padding: 0 1rem;
}

.divider {
    border-right: 1px solid #d8dde6;
}

.rate-center {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;

}

.WPHLayout {
    background-color: #002855;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    display: flex;
}

.WPHBannerLayout {
    font-size: 28px;
    color: white;
    font-family: FigtreeBold;
    justify-content: center;
    display: flex;
}

.WPHBannerHeadLayout {
    color: #EBCE98;
    font-size: 28px;
    font-family: FigtreeBold;
}

.WPHBannerHeadSubLayout {
    color: white;
    font-family: Figtree;
    font-size: 18px;
}

.dividerBanner {
    border-right: 1px solid #EBCE98;
}

.Bannerproprties {
    background-image: url('/mortgagevforcesite/cms/delivery/media/MCG4KEYRWPUJFJ3EJ3WG3LOKNPMU');
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    border-radius: 20px;
    /* background: #003E85; */
}

.pageContentHead {
    color: var(--Current-Colors-Neutrals-70, #595959);
    text-align: center;
    justify-content: center;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    text-transform: uppercase;
	max-width: 1288px;
	width: auto;
}

.pageContentHeadSub {
	color: var(--Gray-100, #282828);
	text-align: center;
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-5XL, 36px);
	font-style: normal;
	font-weight: var(--font-weight-Bold, 700);
	line-height: var(--font-line-height-4XL, 40px); /* 111.111% */display: flex;
	/* height: 40px; */
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	width: 100%;
	

}

.WPHBannerLayoutHead {
    text-align: center;
    justify-content: center;
	padding-top: 56px;
    padding-bottom: 56px;
}

.BannerItemtext {
    font-size: 28px;
    color: white;
}

.WPHBannerLayoutHeading {
    font-size: 28px;
    color: white;
    font-family: 'FigtreeBold';
    display: flex;
}

.BannerItemtextcurrency {
    font-size: 48px;
    color: white;
    font-family: FigtreeBold;
}

.custom-white-button {
    /* Set text color of label to white */
    --slds-c-button-text-color: #ffffff;

    /* Set border color to white */
    --slds-c-button-color-border: #ffffff;
}

.custom-white-button button {
    background: transparent;
    border: 2px solid white;
}

.custom-white-buttons {
    /* Set text color of label to white */
    --slds-c-button-text-color: #036FA6;

    /* Set border color to white */
    --slds-c-button-color-border: #036FA6;
}

.custom-white-buttons button {
    background: transparent;
}

.wphoverlayCardWithIcon {
    position: relative;
    z-index: 1;
    top: 120px;
    left: 0;
    right: 0;
    max-width: 97%;
}

/*
.hero-image{
    width: 100%;
    height: 360px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}*/

.wphoverlayCardWithIcon .over-lay-card-heading {
    position: relative;
    z-index: 2;
    color: white;
}

.banner-wrapper {
    width: 100%;
    height: 360px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.banner-overlay .over-lay-card-heading {
    color: white;
    text-align: center;
}

.hero {
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding: 4rem 2rem;
    border-radius: 16px;
}

.content-card {
    background: rgba(255, 255, 255, 0.95);
    width: 60%;
    padding: 2rem;
    border-radius: 16px;
}

.title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.advisor-content {
    max-width: 480px;
}

.question-pill {
    background: #ffffff;
    border-radius: 999px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.subtitle {
    font-size: 12px;
    color: #282828;
    margin: 0.25rem 0 1.5rem 1.75rem;
}

.image-wrapper {
    position: relative;
    display: inline-block;
}

/* OFFSET BACKGROUND SHAPE */
.image-wrapper::before {
    content: '';
    position: absolute;
    left: -14px;
    bottom: -14px;
    width: 100%;
    height: 100%;
    background: #002855;
    border-radius: 20px;
    z-index: 0;
}

/* IMAGE ON TOP */
.image-wrapper img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    display: block;
}

.tile-wrapper {
    display: flex;
    justify-content: center;
    /* center horizontally */
    width: 100%;
    padding: 2rem 1rem;
    /* padding around tiles */
    background-color: #FFFFFF;
}

.tile-container {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    /* container max width */
    width: 100%;
}


.rate-tile {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    flex: 1 1 300px;
    min-height: 180px;
}

.tile-icon {
    margin-right: 1.5rem;
}

.tile-heading {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.tile-description {
    margin: 0.5rem 0 0 0;
    font-size: 1rem;
    color: #555;
}

.vaLayout {
    background-color: #F4F4F4;
}

.Vaheading {
    font-size: 24px;
    font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
    color: #002855;
}

/* TABS CONTAINER */
/* Full width container aligned with content */
.tabs-wrapper {
    max-width: 1200px;
    /* match page content width */
    margin: 0 auto;
}

/* Tabs stretch across full width */
.tabs {
    display: flex;
    justify-content: space-between;
    /* FULL WIDTH */
    align-items: flex-end;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
}

/* Individual tab */
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: #4b5563;
}

/* Active tab */
.tab.active {
    color: #005fb2;
    border-bottom: 3px solid #005fb2;
}

.tab-icon {
    --slds-c-icon-color-foreground-default: #9ca3af;
}

.tab.active .tab-icon {
    --slds-c-icon-color-foreground-default: #005fb2;
}

/* LEFT LIST */
/* LEFT LIST (bannerItems) */
.left-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-right: 1px solid #e5e7eb;
    padding-right: 1.5rem;
}

.right-list {
    border-left: 1px solid #e5e7eb;
    padding-left: 1.5rem;
}

/* bannerItems each row */
.list-item {
    display: flex;
    align-items: start;
    column-gap: 0.75rem;
    padding: 0.75rem 0;
}

.list-item img {
    width: 40px;
    height: 20px;
    object-fit: contain;
    border-radius: 8px;
}


.item-title {
    margin: 0;
    font-weight: 600;
    color: #111827;
    line-height: 1.25rem;
}

.item-meta {
    margin: 0.125rem 0 0 0;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.25rem;
}

/* FEATURE CARD */
/* RIGHT FEATURE CARD (displayArticle) */
.feature-card {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    row-gap: 0.5rem;
    padding-left: 2rem;
    border-left: 1px solid #e5e7eb;
}

.card-image {
    height: 220px;
    width: 100%;
    max-width: 570px;
    background: #d1d5db;
    margin-bottom: 1rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.badge {
    display: inline-block;
    background: #005D98;
    color: #FFF;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    margin: 0.25rem 0 0.5rem 0;
}

.meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.description {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.45rem;
}

/* CTA */
.cta {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}




/* Card container: border + white background (similar to screenshot) */
.disclosures-panel {
    border: 1px solid #d8dde6;
    /* SLDS gray tone */
    border-radius: 0.25rem;
    background: #fff;
}

/* Sticky header stays visible while you scroll the content below */
.sticky-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    border-bottom: 1px solid #e5e7ea;
    padding-bottom: 0.25rem;
}

/* Decorative left guide for sub-sections */
.sub-section {
    border-left: 3px solid #e5e7ea;
    padding-left: 0.75rem;
}

/* Scroll region height control:
   Adjust max-height to the height you want before the scrollbar appears. */
.scroll-region {
    max-height: 320px;
    /* <-- change this for your design */
    /* slds-scrollable_y adds overflow-y: auto */
}

/* Maintain the 120px gap below this component (before the next section, e.g., FAQs) */
:host {
    display: block;
    margin-bottom: 120px;
    /* exact spacing requirement */
}

/* Optional: nicer scrollbar on webkit browsers (Chrome, Edge, Safari) */
.scroll-region::-webkit-scrollbar {
    width: 8px;
}

.scroll-region::-webkit-scrollbar-track {
    background: #f3f3f3;
    border-radius: 8px;
}

.scroll-region::-webkit-scrollbar-thumb {
    background: #c9c9c9;
    border-radius: 8px;
}

.scroll-region::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

.home-layout {
    background-color: #FFFFFF;
    margin-top: 60px;
    margin-bottom: 60px;
}

/* Responsive tweak: smaller scroll area on narrow screens */
@media (max-width: 480px) {
    .scroll-region {
        max-height: 220px;
    }
}

.impBuyerSection {
    gap: 64px;
}

.impBuyerContents {
    position: relative;
    flex: 1;
    min-width: 0;
}


.impBuyerContents:nth-child(1)::after,
.impBuyerContents:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -32px;
    /* Half the gap */
    width: 1px;
    height: 95%;
    background: #ccc;
}

.ratesBackground {
    background: var(--Primary-colors-Gray-50, #F2F2F2);
}

.ratesContainer, .ratesContainer.slds-grid {
    display: flex;
    flex-wrap: nowrap;
    padding: 16px 0;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.ratesContainer > * {
    flex: 0 0 auto;
}

.chevronBtn {
    padding: 8px;
    border-radius: 6px;
}

.ratesCard {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 auto; 
}

.ratesSubContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.ratesContent {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.rateBlock {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ratesSeperator {
    width: 1px;
    height: 36px;
    background: var(--Primary-colors-Gray-200, #CFCFCF);
}

.ratesLabel {
    color: var(--Current-Colors-Neutrals-100, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-style: normal;
    font-weight: var(--font-weight-SemiBold, 600);
    line-height: var(--font-line-height-L, 24px);
    /* 150% */
}

.subLabelText {
    color: var(--Text-Text-default, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-size: 12px;
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: var(--font-line-height-M, 20px);
    /* 166.667% */
    text-transform: uppercase;
}
/* Tablet breakpoint */
@media (min-width: 600px) {
    .ratesContainer,
    .ratesContainer.slds-grid {
        padding: 20px 0;
        gap: 24px;
    }

    .ratesSubContainer {
        gap: 12px;
        padding: 16px;
    }

    .ratesContent {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    .ratesSeperator {
        display: inline-block;
    }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
    .ratesContainer,
    .ratesContainer.slds-grid {
        padding: 24px 0;
        gap: 40px;
    }

    .ratesSubContainer {
        padding: 20px;
        gap: 12px;
    }
}

.quiz-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Loading State */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-text {
    margin-top: 1rem;
    font-size: 1rem;
    color: #666;
}

/* Error State */
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-icon {
    color: #dc2626;
    margin-bottom: 1rem;
}

.error-text {
    font-size: 1rem;
    color: #dc2626;
    margin-bottom: 1.5rem;
}

.retry-button {
    min-width: 120px;
}


.quiz-title {
    font-size: 2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 2rem;
    line-height: 1.3;
}

/* Progress Bar Styles */
.progress-container {
    margin-top: 1.5rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e5ee;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #003366 0%, #005599 100%);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-text {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    font-weight: 500;
}

/* Question Styles */
.quiz-content {
    background: #ffffff;
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-container {
    margin-bottom: 2rem;
}

.question-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

/* Radio Group Customization */
.custom-radio-group {


    display: flex;
    width: 866px;
    padding: 16px !important;
    align-items: flex-start;
    gap: 16px !important;

    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: var(--font-line-height-L, 24px);
    /* 150% */
}

/* Button Container */
.button-container {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e5ee;
}

.nav-button {
    min-width: 120px;
    height: 44px;
    font-size: 1rem;
    font-weight: 500;
}

.back-button {
    margin-right: auto;
}

.next-button {
    margin-left: auto;
}

/* Animation */
.fade-in {
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .quiz-container {
        padding: 1rem;
    }

    .quiz-title {
        font-size: 1.5rem;
    }

    .quiz-content {
        padding: 1.5rem;
    }

    .question-title {
        font-size: 1.25rem;
    }

    .button-container {
        flex-direction: column-reverse;
    }

    .back-button,
    .next-button {
        margin: 0;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .quiz-container {
        padding: 0.5rem;
    }

    .quiz-title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .quiz-content {
        padding: 1rem;
    }

    .question-title {
        font-size: 1.125rem;
    }
}


.custom-image-container {
    background-color: var(--lwc-colorBackground);
    /* Use SLDS token for background color */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Hide the actual radio button input visually */
.custom-radio-box input[type="radio"] {
    display: none;
}

/* Style the custom box (the div inside the label) */
.custom-box-style {
    border-radius: 10px;
    /* The requested 10px border radius */
    cursor: pointer;
    border-color: lightgray;
    /* Default border color */
    transition: border-color 0.2s ease-in-out;
	--slds-c-radio-color-border: #005D98;
}

/* Change style when the hidden radio input is checked */
.custom-radio-box input[type="radio"]:checked+.custom-box-style {
    border-color: #0070d2;
    /* SLDS primary blue when selected */
    background-color: #f3f3f3;
    /* Optional subtle background change */
}

/* Optional: Add hover effect for better UX */
.custom-radio-box:hover .custom-box-style {
    border-color: #0070d2;
}

.quiz-img {
    width: 334px;
    height: 384px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 15px;
    object-fit:cover;
}

.quiz-header {
    height: 32px;
    align-self: stretch;
    color: var(--Current-Colors-Neutrals-100, #282828);
    text-align: center;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-2XL, 24px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-2XL, 32px);
    margin-bottom: 0.75rem;
}

.quiz-sub-header {
    align-self: stretch;
    color: #282828;
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 325;
    line-height: 24px;
    /* 150% */
    margin-bottom: 0.75rem;
}

.quiz-content-pannel {

    width: 1288px;
    /* min-height: 432px; */
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
    background: var(--Current-Colors-White-White, #FFF);
    box-shadow: 0 2px 8px 0 rgba(40, 40, 40, 0.25);
}


.quiz-page-header {

    text-align: center;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-4XL, 32px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-4XL, 40px);
    /* 125% */
    padding-bottom: 56px;
}


.article-content-pannel {
    padding-top: 16px;
    padding-left: 16px;
    width: 1120px;
    height: 780px;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-radius: 15px;
    background: var(--Current-Colors-White-White, #FFF);
    box-shadow: 0 2px 8px 0 rgba(40, 40, 40, 0.25);
}

.article-box-border {
    display: flex;
    width: 344px;
    min-height: 630px;
    height: auto;
    flex-direction: column;
    align-items: flex-start;

    border-radius: 16px;
    border: 1px solid #FFF;
    background: var(--color-white-solid, #FFF);
    box-shadow: 0 2px 8px 0 rgba(40, 40, 40, 0.25);
}

.article-page-header {
    color: #000;
    /* Figtree/H2/24 */
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-2XL, 24px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-2XL, 32px);
    /* 133.333% */
    align-self: stretch;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 16px;

}

.article-badge {
    --sds-c-badge-color-background: #005D98;
    border: none !important;
    border-radius: 999px;
    padding: 4px 20px;
    color: var(--Text-Text-dark-bg, #FFF);
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 350;
    line-height: var(--font-line-height-L, 24px);
    /* 150% */
    text-transform: capitalize;

}

.article-img {
    object-fit: cover;
    border-radius: 9px;
    width: 296px;
    min-height: 222px;
    padding: 24px
}

.article-sub-section {
    display: flex;
    width: 344px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;

}


/* Container must be relative to trap the absolute children */
.component-boundary {
    position: relative;
    width: 100%;
}

/* Force backdrop to cover only this component */
.custom-scoped-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9000;
}

/* Position modal in center of this component */
.custom-scoped-modal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 9001;
}

/* Ensure modal container doesn't use fixed margins */
.custom-scoped-modal .slds-modal__container {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    transform: none;
}



.scrollable-description {
    display: block;
    /* Ensures the element respects height */
    height: 60px;
    /* Fixed height as requested */
    overflow-y: auto;
    /* Shows scrollbar only when content overflows */
    overflow-x: hidden;
    /* Prevents horizontal scrolling */


    line-height: 1.5;
}

.article-lead-modal {
    border-radius: 15px !important;
    background: var(--Current-Colors-White-White, #FFF) !important;
    width: 556px !important;
    border: none !important;
    outline: none !important;
    position: absolute !important;
    bottom: 0px !important;

}

.article-lead-modal .slds-modal__container {
    width: 556px;
    margin: 0 auto !important;
    padding: 0 !important;
}

.article-lead-modal .slds-modal__content {
    height: 540px;
    max-height: 75vh;
}

.quiz-article-sectionHeading {
    color: var(--Black, var(--color-black-solid, #000));
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-2XL, 24px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-2XL, 32px);
    /* 133.333% */

}
.quiz-article-heading {
    color: var(--Black, var(--color-black-solid, #000));
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-2XL, 24px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-2XL, 32px);
	

}

.quiz-article-sectionHeading-2 {

    color: var(--Mine-Shaft, var(--color-grey-20, #333));
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-style: normal;
    font-weight: var(--font-weight-Medium, 500);
    line-height: var(--font-line-height-L, 24px);
    /* 150% */
}

.quiz-article-sectionDescription {
    color: var(--Mine-Shaft, var(--color-grey-20, #333));

    /* Figtree/body text/16 */
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: var(--font-line-height-L, 24px);
    /* 150% */
}

.logo-expert {
    width: 10px;
    height: 13px;
}

.tab-icon {
    --slds-c-icon-color-foreground-default: #9ca3af;
    cursor: pointer;
}

.tabs-wrapper {
    max-width: 1200px;
    /* match page content width */
    margin: 0 auto;
}

.tabs {
    display: flex;
    justify-content: space-between;
    /* FULL WIDTH */
    align-items: flex-end;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
}

/* Individual tab */
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: #4b5563;
}

/* Active tab */
.tab.active {
    color: #005fb2;
    border-bottom: 3px solid #005fb2;
}

.tab.active .tab-icon {
    --slds-c-icon-color-foreground-default: #005fb2;
}

.left-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-right: 1px solid #e5e7eb;
    padding-right: 1.5rem;
}

.item-title {
    margin: 0;
    font-weight: 600;
    color: #282828;
    line-height: 1.25rem;
}

.item-meta {
    margin: 0.125rem 0 0 0;
    font-size: 0.85rem;
    color: #000000;
    line-height: 1.25rem;
}

.meta {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.right-list {
    border-left: 1px solid #e5e7eb;
    padding-left: 1rem;
}

.tile-container {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1200px;
    /* container max width */
    width: 100%;
}

.card-image {
    height: 220px;
    width: 100%;
    background: #d1d5db;
    margin-bottom: 1rem;
    border-radius: 12px;
    box-shadow: 0px 2px 8px 0px #28282840;

}

.badge {
    display: inline-block;
    background: #005D98;
    color: #FFF;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.7rem;
    margin: 0.25rem 0 0.5rem 0;
}

.journey-section {
    padding: 3rem 2rem;
    max-width: 1288px;
    height: auto;
    max-height: 693px;
}

.right-layout {
    padding-left: 150px
}

.left-layout {
    padding-right: 150px
}

.description {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #374151;
    line-height: 1.45rem;
}

.card {
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 2px 8px 0px #28282840;
    background: var(--color-white-solid, #FFFFFF);
}



.left-logo {
    width: 40px;
    height: 40px;
    opacity: 1;

}

.cta {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}


/* Mobile icon image background */
.mobile-icon-bg {
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

:host {
    display: block;
}

/* Outer wrapper for same spacing as screenshot */
.outer-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: var(--Current-Colors-White-White, #FFF);
    margin: 0 auto;
    padding-left: clamp(20px, 15%, 186px);
    padding-right: clamp(20px, 15%, 186px);
    box-sizing: border-box;
}

/* Main card - Desktop Layout (horizontal) */
.help-card {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: clamp(20px, 5vw, 40px);
    justify-content: center;
    align-items: center;
    background: var(--Current-Colors-White-White, #FFF);
    border-radius: clamp(12px, 2vw, 18px);
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.10);
    position: relative;
    overflow: visible;
    padding: clamp(20px, 3vw, 30px);
    min-height: clamp(250px, 50vh, 351px);
    box-sizing: border-box;
}

.icon-box lightning-icon {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
}

.callout-image-bg {
    width: clamp(150px, 40vw, 669px);
    height: clamp(150px, 35vw, 335px);
    border-radius: clamp(12px, 2vw, 20px);
    background: lightgray 50% / cover no-repeat;
    display: block;
    aspect-ratio: 2 / 1;
}

/* LEFT PANEL */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    order: 1;
}

.text-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2;
}

.right-image-frame {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
}

.heading {
    font-size: clamp(1.25rem, 4vw, 1.625rem);
    font-weight: 700;
    color: #1d1d1d;
    margin: clamp(4px, 1vw, 8px) 0;
    word-wrap: break-word;
}

.sub-text {
    font-size: clamp(0.875rem, 2vw, 0.9375rem);
    color: #60656c;
    margin-bottom: clamp(12px, 2vw, 20px);
    word-wrap: break-word;
}

.call-row {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
    font-family: var(--font-family-New-font, Figtree);
    font-style: normal;
    line-height: clamp(1.5, 1.5em, 2);
    margin-bottom: clamp(6px, 1vw, 8px);
    display: flex;
    gap: clamp(6px, 1vw, 10px);
    flex-wrap: wrap;
}

.call-label {
    color: var(--Text-Text-default, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: clamp(1.5, 1.5em, 2);
}

.call-number {
    color: var(--Current-Colors-Secondary-Blue-60, #036FA6);
    font-family: var(--font-family-New-font, Figtree);
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: clamp(1.5, 1.5em, 2);
    text-decoration: none;
    cursor: pointer;
}

.call-number:hover,
.call-number:focus {
    text-decoration: underline;
    color: #002d74;
}

.hours {
    color: #0A223F;
    font-family: var(--font-family-New-font, Figtree);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: clamp(1.4, 1.5em, 1.6);
    margin: 0;
}

/* Mobile content row - used for mobile/tablet */
.mobile-content-row {
    display: flex;
    flex-direction: row;
    gap: clamp(12px, 3vw, 20px);
    align-items: flex-start;
    width: 100%;
    order: 2;
    box-sizing: border-box;
}

/* Responsive - Tablet (768px to 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .outer-wrap {
        padding-left: clamp(20px, 10%, 40px);
        padding-right: clamp(20px, 10%, 40px);
    }

    .help-card {
        flex-direction: column;
        height: auto;
        padding: clamp(16px, 4vw, 24px);
        gap: clamp(16px, 3vw, 20px);
    }

    .right-image-frame {
        width: 100%;
        justify-content: center;
        order: 1;
    }

    .right-image-frame .callout-image-bg {
        width: 100%;
        max-width: clamp(250px, 60vw, 500px);
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .mobile-content-row {
        gap: clamp(12px, 3vw, 20px);
    }

    .mobile-content-row .icon-box {
        flex-shrink: 0;
        width: clamp(70px, 12vw, 80px);
    }

    .mobile-content-row .icon-box .mobile-icon-bg {
        width: clamp(70px, 12vw, 80px);
        height: clamp(70px, 12vw, 80px);
    }

    .mobile-content-row .text-section {
        flex: 1;
    }

    .heading {
        font-size: clamp(1.125rem, 3.5vw, 1.25rem);
        margin: 0 0 clamp(6px, 1vw, 8px) 0;
    }

    .sub-text {
        font-size: clamp(0.875rem, 2vw, 0.9375rem);
        margin-bottom: clamp(10px, 2vw, 12px);
    }

    .call-row {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        line-height: clamp(1.4, 1.5em, 1.6);
        margin-bottom: clamp(4px, 1vw, 6px);
    }

    .call-label {
        font-size: 18px;
        line-height: 24px;
    }

    .call-number {
        font-size: 18px;
        line-height: 24px;
    }

    .hours {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Responsive - Mobile (max 768px) */
@media (max-width: 768px) {

    .outer-wrap {
        padding-left: clamp(12px, 8%, 20px);
        padding-right: clamp(12px, 8%, 20px);
    }

    .help-card {
        flex-direction: column;
        height: auto;
        padding: clamp(12px, 3vw, 20px);
        gap: clamp(12px, 3vw, 16px);
    }

    .right-image-frame {
        width: 100%;
        justify-content: center;
        order: 1;
    }

    .right-image-frame .callout-image-bg {
        width: 100%;
        max-width: clamp(200px, 90vw, 400px);
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .mobile-content-row {
        gap: clamp(12px, 3vw, 16px);
    }

    .mobile-content-row .icon-box {
        flex-shrink: 0;
        width: clamp(60px, 15vw, 70px);
    }

    .mobile-content-row .icon-box .mobile-icon-bg {
        width: clamp(60px, 15vw, 70px);
        height: clamp(60px, 15vw, 70px);
    }

    .mobile-content-row .text-section {
        flex: 1;
    }

    .heading {
        font-size: 18px;
        margin: 0 0 6px 0;
    }

    .sub-text {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .call-row {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 4px;
        flex-wrap: wrap;
    }

    .call-label {
        font-size: 16px;
        line-height: 22px;
    }

    .call-number {
        font-size: 16px;
        line-height: 22px;
    }

    .hours {
        font-size: 12px;
        line-height: 18px;
    }
}

/* Additional Disclosure Section Styles */

.additional-section {
    width: 100%;
    padding: clamp(4px, 1vw, 8px) clamp(8px, 2vw, 16px);
    background: var(--White-100, #FFF);
    border-radius: clamp(4px, 1vw, 8px);
}

/* Mobile responsiveness for additional sections */
@media (max-width: 768px) {
    .additional-section {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .additional-section {
        margin-bottom: 0.375rem;
    }
}

.additional-title {
    margin: 0 0 0.25rem 0;
    color: var(--Text-Text-default, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-size: clamp(13px, 1vw, var(--font-size-S, 14px));
    font-style: normal;
    font-weight: var(--font-weight-Book-Gotham, 325);
    line-height: clamp(20px, 1.5em, var(--font-line-height-L, 24px));
    word-wrap: break-word;
}

/* Mobile responsiveness for additional-title */
@media (max-width: 480px) {
    .additional-title {
        margin-bottom: 0.125rem;
    }
}

.additional-text {
    margin: 0;
    color: var(--Text-Text-default, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-size: clamp(13px, 1vw, var(--font-size-S, 14px));
    font-style: normal;
    font-weight: var(--font-weight-Book-Gotham, 325);
    line-height: clamp(20px, 1.5em, var(--font-line-height-L, 24px));
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile responsiveness for additional-text */
@media (max-width: 480px) {
    .additional-text {
        hyphens: auto;
    }
}

/* Root container */
.disclosures-root {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    background: #fff;
    padding: clamp(24px, 8vw, 120px) clamp(16px, 12vw, 186px);
    box-sizing: border-box;
    overflow-x: hidden;

    color: var(--Gray-100, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-size: clamp(14px, 1vw, 16px);
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: var(--font-line-height-L, 24px);
}

/* Responsive adjustments for tablets */
@media (max-width: 1024px) {
    .disclosures-root {
        line-height: 22px;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .disclosures-root {
        line-height: 20px;
    }
}

@media (max-width: 480px) {
    .disclosures-root {
        line-height: 20px;
    }
}

/* Title */

.title {
    margin: 0 0 0.75rem 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #333;
    text-align: left;
    word-wrap: break-word;
}

/* Mobile responsiveness for title */
@media (max-width: 768px) {
    .title {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .title {
        margin-bottom: 0.5rem;
    }
}

.scroll-container {
    max-height: clamp(240px, 40vh, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    width: 100%;
}

/* Mobile responsiveness for scroll container */
@media (max-width: 768px) {
    .scroll-container {
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    .scroll-container {
        border-radius: 4px;
        padding-right: 0.125rem;
    }
}

@supports (scrollbar-gutter: stable) {
    .scroll-container {
        scrollbar-gutter: stable;
    }
}


.line-item {
    width: 100%;
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 400;
    font-family: var(--font-family-New-font, Figtree);
    display: flex;
    align-items: flex-start;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* Mobile responsiveness for line items */
@media (max-width: 768px) {
    .line-item {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .line-item {
        margin-bottom: 0.5rem;
        gap: 0.375rem;
    }
}


.sup-index {
    color: #3b82f6;
    font-family: var(--font-family-New-Font, Figtree);
    font-size: clamp(0.8rem, 1vw, 0.85rem);
    font-style: normal;
    font-weight: var(--font-weight-Medium, 500);
    line-height: 1.25rem;
    transform: translateY(-0.2rem);
    user-select: none;
    min-width: 0.75rem;
    text-align: right;
    flex-shrink: 0;
}

/* Mobile responsiveness for sup-index */
@media (max-width: 480px) {
    .sup-index {
        font-size: 0.75rem;
        line-height: 1.125rem;
        min-width: 0.625rem;
    }
}


.text {
    margin: 0;
    color: #282828;
    font-family: var(--font-family-New-font, Figtree);
    font-size: clamp(0.875rem, 1vw, 0.95rem);
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: clamp(1.4, 1.5em, 1.6);
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex: 1;
}

.line-item__content {
    flex: 1;
    min-width: 0;
}

/* Mobile responsiveness for text */
@media (max-width: 480px) {
    .text {
        hyphens: auto;
        font-size: 0.875rem;
    }
}


lightning-formatted-rich-text a {
    color: #036FA6;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.2s;
}

lightning-formatted-rich-text a:hover {
    color: #024c73;
    text-decoration: underline;
}

/* FQA start  */
/* FQA start  */

.faq-root {
  width: 1288px;
  margin: 60px auto;
  padding: 0;
}

.faq-header {
	color: #0A223F;
	text-align: center;
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-4XL, 32px);
	font-style: normal;
	font-weight: var(--font-weight-Bold, 700);
	line-height: var(--font-line-height-4XL, 40px); /* 125% */
	display: flex;
	height: 48px;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;

}

.faq-container {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-item {
  margin: 0;
  padding: 0;
}

.faq-question-row {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  width: 100%;
  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--Current-Colors-White-White, #FFF);
  border-bottom: 1px solid var(--Primary-colors-Gray-200, #CFCFCF);
  color: var(--Gray-80, #595959);
  font-family: var(--font-family-New-font, Figtree);
  font-size: var(--font-size-M, 16px);
  font-style: normal;
  font-weight: var(--font-weight-Bold, 700);
  line-height: var(--font-line-height-L, 24px); /* 150% */  
}

.faq-question-row:hover {
  background: var(--Current-Colors-Secondary-Blue-10, #F0F9FF);
}

.faq-question-row:focus {
  outline: none;
  background: var(--Current-Colors-Secondary-Blue-10, #F0F9FF);
  box-shadow: inset 0 0 0 2px var(--Current-Colors-Secondary-Blue-60, #036FA6);
}

.faq-question {
  flex: 1;
  text-align: left;
}

.faq-icon {
  --slds-c-icon-color-foreground: var(--Current-Colors-Secondary-Blue-60, #036FA6);
  --slds-c-icon-color-foreground-default: var(--Current-Colors-Secondary-Blue-60, #036FA6);
  transition: transform 0.3s ease;
  margin-left: auto;
  flex-shrink: 0;
}

.faq-icon-active {
  --slds-c-icon-color-foreground: var(--Current-Colors-Secondary-Blue-60, #036FA6);
  --slds-c-icon-color-foreground-default: var(--Current-Colors-Secondary-Blue-60, #036FA6);
  transform: rotate(180deg);
}

.faq-answer {
	padding: 16px 20px;
	background: var(--Current-Colors-White-White, #FFF);
	border-bottom: 1px solid var(--Primary-colors-Gray-200, #CFCFCF);
	color: var(--Gray-80, #595959);
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-M, 16px);
	font-style: normal;
	font-weight: var(--font-weight-Regular, 400);
	line-height: var(--font-line-height-L, 24px); /* 150% */
}

/* TAB ONLY */
@media (min-width: 768px) and (max-width: 1024px) {
  .faq-root {
    display: flex;
    width: min(688px, 100%);
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: 0 auto;
  }

  .faq-question-row,
  .faq-answer {
    display: flex;
    padding: 16px 0;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-bottom: 1px solid var(--Primary-colors-Gray-200, #CFCFCF);
    padding-left: 5;
  }

  .tile-grid-section {
    background-color: #FFFFFF;
    margin-top: 5px; 
    margin-bottom: 60px;
    gap: 42px;
}

.pageContentHeadSub{
    width: 100%;
    padding:10px;
    }
}

/* MOBILE ONLY */
@media (max-width: 767px) {
  .faq-root {
    display: flex;
    width: min(512px, 100%);
    flex-direction: column;
    align-items: center;
    gap: 32px;
    border-bottom: 1px solid var(--Primary-colors-Gray-200, #CFCFCF);
    margin: 0 auto;
    padding-left: 10px;
  }

  .faq-question-row,
  .faq-answer {
    display: flex;
    padding: 16px 0;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-bottom: 1px solid var(--Primary-colors-Gray-200, #CFCFCF);
    padding-left: 10px;
  }

}

/* Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* FQA END  */


.seg-list {
    display: flex;
    gap: .5rem;
    padding: 0;
    border-radius: 999px;
    background: var(--Current-Colors-White-White, #FFF);
    list-style: none;
    margin: 0;
}


.nav-icon-img,
.nav-icon {
  width: 24px;
  height: 24px;
}

.nav-icon-img {
  object-fit: contain;
}

.nav-icon {
  stroke-width: 5px;
  stroke: var(--Current-Colors-Secondary-Blue-60, #036FA6);
}

.prev:disabled,
.next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.prev {
    left: -20px;
}

.next {
    right: -20px;
}

/* Responsive: 1-2 cards on tablet */
@media (max-width: 1024px) {
    .card {
        min-width: calc(50% - 22.5px);
        width: calc(50% - 22.5px);
    }
}

/* Responsive: 1 card on mobile, hide arrows */
@media (max-width: 640px) {
    .card {
        min-width: 100%;
        width: 100%;
    }

    .prev,
    .next {
        display: none;
    }

    .title {
        font-size: var(--font-size-2XL, 24px);
        line-height: var(--font-line-height-2XL, 32px);
    }

    .seg-btn {
        min-width: 100px;
        padding: 0 16px;
        font-size: 14px;
    }

    .rt {
        height: auto;
        margin-top: 32px;
    }

    .quote {
        margin-top: auto;
    }
}

/* Container for horizontal alignment */
.tile-row-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* Forces them to stay in one row */
    overflow-x: auto;
    /* Adds horizontal scroll if they overflow the screen */
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 1rem;
    /* Space between tiles */
}

/* Ensure each item takes up specific width or shrinks to fit */
.tile-item {
    flex: 0 0 auto;
    /* Prevents tiles from shrinking or growing weirdly */
    width: 250px;
    /* Set your desired tile width */
}

/* Complete button reset to hide "button" look */
.tile-button-reset {
    background: transparent;
    border: 1px solid #dddbda;
    /* Optional tile border */
    border-radius: .25rem;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: box-shadow 0.2s ease;
}

.tile-button-reset:hover,
.tile-button-reset:focus {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    outline: none;
    border-color: #0176d3;
    /* Salesforce Blue on focus */
}

.tile-image {
    width: 100%;
    height: auto;
    display: block;
}

.tile-text-area {
    padding: 1rem;
}


/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tab-icon-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    /* Keeps the button size tight around the image */
    align-items: center;
    justify-content: center;
}

/* Optional: Add a focus ring for accessibility */
.tab-icon-button:focus {
    outline: 2px solid #0176d3;
    outline-offset: 2px;
}

.contact-us-content-pannel {
    display: flex;
    width: 1288px;
    min-height: 351px;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background: var(--Current-Colors-White-White, #FFF);
}

.contact-us-img {
    border-radius: 20px;
    background: var(--Current-Colors-Primary-blue-Primary-Blue, #002855);

}

.contact-us-icon {
    width: 48px;
    height: 87px;
}
/* Testimonials start   */
.testimonials-section {
  position: relative;
  padding: 3.25rem 0 4rem;
  margin-bottom: 120px;
  background: var(--Current-Colors-Secondary-Blue-10, #F0F9FF);
  align-self: stretch;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  justify-content: center;
  width: 1660px;
  /* Keep outer section height stable even when carousel content shrinks to 1 card */
  min-height: calc(360px + 3.25rem + 4rem);
}

/* Enforce desktop font-family across the whole component (applies to mobile/tablet too) */
.testimonials-section,
.testimonials-section * {
  font-family: var(--font-family-New-font, Figtree) !important;
}

.testimonials-section::before,
.testimonials-section::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  /* Use full container height so the diagonal background doesn't shrink when content height changes */
  height: 100%;
  min-height: calc(360px + 3.25rem + 4rem);
  background: var(--Current-Colors-Secondary-Blue-10, #F0F9FF);
  transform: skewY(-6deg);
  border-radius: 40px;
  z-index: -1;
}

.testimonials-section::before {
  top: -14%;
}

.testimonials-section::after {
  bottom: -26%;
  transform: skewY(-6deg) rotate(180deg);
}

.testimonials-title {
  text-align: center;
  margin: 0 0 1rem;
  padding: 0 20px;
  color: var(--Text-Text-default, #282828);
  font-family: var(--font-family-New-font, Figtree);
  font-size: var(--font-size-4XL, 32px);
  font-style: normal;
  font-weight: var(--font-weight-Bold, 700);
  line-height: var(--font-line-height-4XL, 40px); /* 125% */
  align-self: stretch;
  overflow-wrap: break-word;
  /* expand native select to cover wrapper padding to avoid seams */
  width: calc(100% + 36px) !important;
  margin-left: -18px !important;
  border: none !important;
  /* keep internal padding so text is centered, but the wrapper provides the blue background */
  padding: 12px 18px !important;
  padding-top: 100px;
}

@media (max-width: 1024px) {
  .testimonials-title {
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-2XL, 24px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-2XL, 32px);
    align-self: stretch;
  }
}

/* Segmented filter */
.testimonials-filters {
  display: none;
  place-items: center;
  margin-bottom: 1.25rem;
}

/* Hide mobile-only filter button by default; shown only in mobile media query */
.filter-open-button {
  display: none;
}

.testimonials-filter-list {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--Current-Colors-White-White, #FFF);
  list-style: none;
}

.testimonials-filter-button {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  height: 40px;
  min-width: 138px;
  padding: 0 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 41px;
  background: var(--Current-Colors-White-White, #FFF);
  /* Category text spec */
  color: var(--Current-Colors-Secondary-Blue-80, #005D98);
  text-align: center;
  font-family: var(--font-family-New-font, Figtree);
  font-size: var(--font-size-M, 16px);
  font-style: normal;
  font-weight: var(--font-weight-Medium, 500);
  line-height: var(--font-line-height-L, 24px); /* 150% */
}

@media (max-width: 767px) {
  .testimonials-filter-button {
    width: 300px;
    height: 300px;
    flex-shrink: 0;
    color: var(--Text-Text-default, #282828);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  /* Ensure selected state uses desktop blue on mobile-sized buttons */
  .testimonials-filter-button[aria-selected="true"] {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6);
    color: var(--Current-Colors-White-White, #FFF);
  }
}

.testimonials-filter-button[aria-selected="true"] {
  background: var(--Current-Colors-Secondary-Blue-60, #036FA6);
  color: var(--Current-Colors-White-White, #FFF);
  border-radius: 41px;
  font-weight: var(--font-weight-Medium, 500);
}

/* Dropdown filter */
.filter-dropdown-wrapper {
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
}

.testimonials-carousel {
  position: relative;
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
  /* Keep carousel height stable even when only 1 card is visible */
  min-height: 360px;
}

/* Forced viewport classes (e.g. when parent sets @api forceVisible = 1.5) */
.testimonials-carousel.force-visible-1-5 {
  /* Force the carousel viewport to equal 1.5 cards */
  width: calc((400px * 1.5) + (var(--gap, 45px) * 0.5));
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Tab-only: style segmented filter buttons when component is forced to 1.5 viewport
   Use a class on the outer section instead of host attribute selectors (LWC doesn't allow
   arbitrary attribute selectors in CSS). */
.testimonials-section.force-visible-1-5 .testimonials-filter-button {
  display: flex;
  height: 40px;
  min-width: 138px;
  padding: 0 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Force full-width lane on desktop so component width doesn't shrink with 1 card */
@media (min-width: 1025px) {
  .testimonials-carousel-track {
    width: 100%;
  }
}

.testimonials-carousel-track {
  --gap: 45px;
  display: flex;
  gap: var(--gap);

@media (max-width: 767px) {
  .testimonials-title {
    font-size: 20px !important;
    line-height: 28px !important;
    padding-top: 28px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }
}
  padding: 4px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  -ms-overflow-style: none;
  /* Maintain lane width when filtered to 1 item */
  min-width: 100%;
  width: 100%;
  align-items: stretch;
}

/* Stronger guarantees to prevent lane/card collapse when only one card is shown */
.testimonials-carousel-track,
.testimonials-carousel {
  min-height: 360px !important;
}

.testimonials-carousel-track[data-single="true"]::before,
.testimonials-carousel-track[data-single="true"]::after {
  height: 100% !important;
  min-height: 360px !important;
}

/* single-card sizing handled in the centered spacer rule further down */

.testimonial-card > article {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonials-carousel-track::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  position: relative;
  display: flex;
  width: 400px;
  height: 300px;
  padding: 24px;
  flex-direction: column;
  scroll-snap-align: start;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 20px;
  border: 1px solid var(--Primary-colors-Gray-50, #F2F2F2);
  background: var(--Current-Colors-White-White, #FFF);
  box-sizing: border-box;
  min-width: 400px;
}

/* Ensure consistent font-family for all content inside testimonial cards */
.testimonial-card,
.testimonial-card * {
  font-family: var(--font-family-New-font, Figtree) !important;
  color: var(--Text-Text-default, #282828);
}

/* When only one card is present, keep the same visual lane width by centering and adding phantom space */
.testimonials-carousel-track[data-single="true"] {
  justify-content: center;
  min-width: 100%;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  /* Ensure consistent height */
  min-height: 360px;
  /* Ensure the container maintains proper sizing */
  align-items: stretch;
}

.testimonials-carousel-track[data-single="true"]::before,
.testimonials-carousel-track[data-single="true"]::after {
  content: "";
  flex: 0 0 24px;
  min-width: 24px;
  height: 100%;
  box-sizing: border-box;
}

/* Optional enhancement for browsers that support :has() */
.testimonials-carousel-track:has(> .testimonial-card:nth-child(1)):not(:has(> .testimonial-card:nth-child(2))) {
  justify-content: center;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.testimonials-carousel-track:has(> .testimonial-card:nth-child(1)):not(:has(> .testimonial-card:nth-child(2)))::before,
.testimonials-carousel-track:has(> .testimonial-card:nth-child(1)):not(:has(> .testimonial-card:nth-child(2)))::after {
  content: "";
  flex: 0 0 calc(33.333% - 30px);
  min-width: calc(33.333% - 30px);
}

.testimonial-card .badge {
  position: absolute;
  right: 14px;
  top: 12px;
  /* "Saved $5300" spec */
  color: var(--Current-Colors-White-White, #FFF);
  font-family: var(--font-family-New-font, Figtree);
  font-size: 16px;
  font-style: normal;
  font-weight: var(--font-weight-Bold, 700);
  line-height: var(--font-line-height-S, 16px); /* 100% */
  background: linear-gradient(180deg, #98793C 0%, #A78D58 50%);
	  
	display: flex;
	height: 40px;
	padding: 12px 8px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 20px;
	
}

.testimonial-text {
  display: block;
  /* allow the text area to take available space but not push the card beyond its fixed height */
  flex: 1 1 auto;
  overflow: hidden;
  height: 91px;
  margin-top: 48px;
  
  color: var(--Text-Text-default, #282828);
  font-family: var(--font-family-New-font, Figtree);
  font-size: var(--font-size-M, 16px);
  font-weight: var(--font-weight-Regular, 400);
  line-height: var(--font-line-height-L, 24px);
  /* Multi-line clamp for webkit browsers to avoid variable card height
     (graceful fallback: content will simply be hidden on other browsers) */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.testimonial-quote {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* push quote block to the bottom of the card so author lines align across cards */
  margin-top: auto;
  padding: 0 0 0 72px; /* reserve room for decorative circle */
  position: relative;
}

/* Keep inner author block bottom-aligned */
.testimonial-quote > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

/* Decorative circular background behind the quote icon */
.testimonial-quote::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--Current-Colors-Secondary-Blue-60, #036FA6);
  z-index: 0;
}

/* Image centered over the decorative circle */
.testimonial-quote .testimonial-quote-icon {
  /* Place the icon at the center point of the decorative circle (circle center = 8px + 56/2 = 36px)
     then use translate(-50%, -50%) so the icon is perfectly centered regardless of its intrinsic size. */
  position: absolute;
  left: 30px; /* circle center */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  object-fit: contain;
  z-index: 1;
  display: block;
  background: transparent;
  /* Reset box-model and image positioning to avoid intrinsic whitespace offsets */
  margin: 0;
  padding: 0;
  border: 0;
  transform-origin: center center;
  object-position: center center;
}

/* Fallback if an inline SVG remains: size and layering */
.testimonial-quote svg {
  width: 24px;
  height: 24px;
  display: block;
  z-index: 1;
}

.testimonial-author-name {
  margin: 0;
  align-self: stretch;
  color: var(--Current-Colors-Neutrals-100, #282828);
  font-family: var(--font-family-New-font, Figtree);
  font-size: var(--font-size-L, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: var(--font-line-height-L, 24px);
}

.testimonial-author-role{
	color: var(--Current-Colors-Neutrals-70, #595959);
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-S, 14px);
	font-style: normal;
	font-weight: var(--font-weight-Regular, 400);
	line-height: var(--font-line-height-L, 24px); /* 171.429% */
	align-self: stretch;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--Current-Colors-White-White, #FFF);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  color: #036FA6;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.prev {
  left: -20px;
}

.next {
  right: -20px;
}



/* Responsive */
@media (min-width: 1025px) {
  .testimonials-filters {
    display: grid !important;
  }
  .filter-dropdown-wrapper {
    display: none !important;
  }
  /* Fix nav button vertical alignment when few items */
  .prev,
  .next {
    top: 50%;
    transform: translateY(-50%);
  }
  /* Ensure desktop segmented buttons keep their original compact appearance
     so tablet/mobile changes do not leak into desktop. */
  .testimonials-filter-button {
    height: 40px;
    min-width: 138px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--Current-Colors-White-White, #FFF);
    color: var(--Current-Colors-Secondary-Blue-80, #005D98);
    border-radius: 41px;
  }
  .filter-dropdown-wrapper[data-selected] .filter-dropdown {
    /* Reset any dropdown styling that may have been applied for mobile/tablet */
    background: transparent;
    color: inherit;
    border: 0;
    padding: 0;
  }
  /* Fix: make desktop carousel match 3-card baseline so component size is stable */
  .testimonials-carousel {
    max-width: calc((400px * 3) + (var(--gap, 45px) * 2));
    margin: 0 auto;
    min-height: 360px;
  }
}

/* Tablet: 1 card display */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Show segmented filters on tablet and arrange them to fill the row */
  .testimonials-filters {
    display: flex !important;
    width: 91%;
    padding-inline : 100px;
    justify-content: center;
    box-sizing: border-box;
  }
  .filter-dropdown-wrapper {
    display: none !important;
  }
  /* tablet uses base desktop sizing; no separate tablet .testimonial-card block */
  /* Distribute the four segment options evenly across the tablet width */
  .testimonials-filter-list {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    justify-content: center;
  }
  /* Ensure the track lays out cards in a natural row and left-aligns them
     so the carousel viewport shows the first card and a partial second (1.5) */
  .testimonials-carousel-track {
    width: max-content !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Center the visible cards vertically so navs (absolute inside the carousel)
     align with the actual card center rather than the lane center */
  .testimonials-carousel {
    display: flex !important;
    align-items: center !important;
    /* make the carousel height equal to the card height so top:50% matches card center */
    height: 300px !important;
    min-height: 300px !important;
  }
  /* ensure the track centers its children vertically inside the 300px carousel */
  .testimonials-carousel-track {
    align-items: center !important;
  }
  /* Distribute four filter options evenly and ensure no cutoff on tablet */
  .testimonials-filter-list > li {
    list-style: none;
    flex: 1 1 0%;
    min-width: 0; /* allow flex to shrink so all four fit */
    box-sizing: border-box;
  }
  .testimonials-filter-list > li .testimonials-filter-button {
    display: flex;
    width: 100%;
    min-width: 138px;
    height: 40px;
    padding: 0 24px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 41px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--Current-Colors-White-White, #FFF);
    /* match desktop segment color and typography */
    color: var(--Current-Colors-Secondary-Blue-80, #005D98);
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-weight: var(--font-weight-Medium, 500);
    line-height: var(--font-line-height-L, 24px);
  }
  /* Ensure tablet segmented buttons use desktop-like compact sizing */
  .testimonials-filter-list > li .testimonials-filter-button {
    display: flex;
    width: 100%;
    min-width: 138px;
    height: 40px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 41px;
    background: var(--Current-Colors-White-White, #FFF);
    color: var(--Text-Text-default, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-weight: var(--font-weight-Regular, 400);
    line-height: var(--font-line-height-L, 24px);
    box-sizing: border-box;
  }
  /* Stronger tablet-only override to make the segmented buttons smaller than desktop */
  .testimonials-filters .testimonials-filter-list > li .testimonials-filter-button {
    height: 36px !important;
    min-width: 120px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    border-radius: 34px !important;
    /* ensure tablet uses same desktop typography and color */
    font-family: var(--font-family-New-font, Figtree) !important;
    color: var(--Current-Colors-Secondary-Blue-80, #005D98) !important;
    font-weight: var(--font-weight-Medium, 500) !important;
  }
  /* Tablet-only: force card internals to match desktop layout (author block pinned to bottom) */
  .testimonial-card > article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
  }
  .testimonial-text {
    flex: 1 1 auto;
    overflow: hidden;
    /* match desktop spacing so the rich text sits under the badge */
    margin-top: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* match desktop lines */
    -webkit-box-orient: vertical;
  }
  .testimonial-quote {
    margin-top: auto;
  }
  .testimonial-quote > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .testimonial-author-name,
  .testimonial-author-role {
    height: auto !important;
    min-height: 0 !important;
  }
  /* Keep lane width on tablet when 1 card */
  .testimonials-carousel-track[data-single="true"]::after,
  .testimonials-carousel-track:has(> .testimonial-card:nth-child(1)):not(:has(> .testimonial-card:nth-child(2)))::after {
    content: "";
    flex: 0 0 400px;
    min-width: 400px;
  }
  /* Show ~2.5 cards on tablet by constraining the carousel viewport, but keep 3-card baseline size */
  .testimonials-carousel {
    /* show 1.5 cards on tablet */
    --visible-cards: 1.5;
    /* compute viewport width for 1.5 cards + half-gap */
    width: calc((400px * 1.5) + (var(--gap, 45px) * 0.5));
    max-width: 100%;
    margin: 0 auto;
    min-height: 360px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* Align nav buttons to actual card center by matching carousel height to card height */
  .testimonials-carousel {
    height: 300px !important;
    min-height: 300px !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Ensure track and carousel maintain stable height when number of cards changes */
  .testimonials-carousel-track,
  .testimonials-carousel {
    min-height: 360px !important;
  }
  /* Tablet-specific: keep the same visual height even when filtered to 1 or 2 cards */
  .testimonials-carousel,
  .testimonials-carousel-track,
  .testimonials-carousel-track[data-single="true"]::before,
  .testimonials-carousel-track[data-single="true"]::after {
    min-height: 360px !important;
    height: 100% !important;
  }
  /* single-card detailed sizing is defined globally to 400x300 for desktop and centered via spacers */
  /* Tablet: create spacers for 2- and 1-card states so the visual width/height matches 3-card baseline */
  .testimonials-carousel-track[data-stable="true"] {
    justify-content: center;
  }
  .testimonials-carousel-track[data-stable="true"][data-count="2"]::before,
  .testimonials-carousel-track[data-stable="true"][data-count="2"]::after {
    content: "";
    flex: 0 0 223px;
    min-width: 223px;
    height: 100%;
    box-sizing: border-box;
  }
  .testimonials-carousel-track[data-stable="true"][data-count="1"]::before,
  .testimonials-carousel-track[data-stable="true"][data-count="1"]::after {
    content: "";
    flex: 0 0 445px;
    min-width: 445px;
    height: 100%;
    box-sizing: border-box;
  }
  /* Ensure selected segmented filter uses desktop blue on tablet */
  .testimonials-filter-button[aria-selected="true"] {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6);
    color: var(--Current-Colors-White-White, #FFF);
  }
  /* Stronger selector to override other button backgrounds if necessary */
  .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
  /* Extra tablet-specific override: ensure selected text is white and hover/focus also use white */
  .testimonials-filters .testimonials-filter-button[aria-selected="true"],
  .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
  .testimonials-filters .testimonials-filter-button[aria-selected="true"]:hover,
  .testimonials-filters .testimonials-filter-button[aria-selected="true"]:focus {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
    outline: none;
  }
  /* Extra force: ensure selected segmented button text (and any inner node) is white on tablet */
  .testimonials-filters .testimonials-filter-button[aria-selected="true"],
  .testimonials-filters .testimonials-filter-button[aria-selected="true"] *,
  .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"],
  .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] * {
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
  /* Tablet: let JS control prev visibility; ensure both navs are vertically centered and sized like desktop */
  .testimonials-carousel .prev,
  .testimonials-carousel .next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 4 !important;
  }
  .testimonials-carousel .prev { left: -20px !important; }
  .testimonials-carousel .next { right: -20px !important; }
  .testimonials-carousel .prev svg,
  .testimonials-carousel .next svg {
    width: auto !important;
    height: auto !important;
  }
}

/* Ensure section doesn't force desktop width on smaller viewports (prevents clipping) */
@media (max-width: 1024px) {
  .testimonials-section {
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}
/* Mobile: 1 card display */
@media (max-width: 767px) {
  .testimonials-carousel {
    width: 300px;
    margin: 0 auto;
    min-height: 360px;
  }
  /* Mobile: override card size to 300x300 */
  .testimonial-card {
    width: 300px;
    height: 300px;
    min-width: 300px;
  }
  /* Mobile: keep badge positioned as on desktop (absolute top-right) */
  .testimonial-card .badge {
    position: absolute;
    right: 14px;
    top: 12px;
    margin: 0;
    align-self: auto;
    z-index: 2;
  }
  /* Maintain spacing on mobile when only one card */
  .testimonials-carousel-track[data-single="true"]::after,
  .testimonials-carousel-track:has(> .testimonial-card:nth-child(1)):not(:has(> .testimonial-card:nth-child(2)))::after {
    content: "";
    flex: 0 0 300px;
    min-width: 300px;
  }
  .prev,
  .next {
    display: none;
  }
  /* Style the native select so the visible selected value uses the same blue
     / white look as the segmented button. The wrapper receives data-selected. */
  .filter-dropdown {
    width: 100%;
    flex-shrink: 0;
    /* Hide native browser arrows and any background images */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    /* make native select transparent; wrapper provides the blue background */
    background: transparent !important;
    background-color: transparent !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
    border-radius: 41px;
    border: none !important;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* Ensure wrapper and pseudo-element sit above the native select on mobile */
  /* Render the blue pill on the wrapper and make the native select transparent
     so the inline SVG chevron can be positioned above it on mobile. */
  .filter-dropdown-wrapper {
    position: relative;
    z-index: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: block;
    width: 256px;
    margin: 0 auto; /* center on mobile */
    box-sizing: border-box;
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6);
    border-radius: 41px;
    padding: 12px 18px;
    overflow: hidden; /* clip native select seams */
  }
  .filter-dropdown {
    position: relative;
    z-index: 1;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--White-100, #FFF) !important;
    /* expand native select to cover wrapper padding to avoid seams */
    width: calc(100% + 36px) !important;
    margin-left: -18px !important;
    border: none !important;
    /* internal padding kept for text centering */
    padding: 12px 18px !important;
    box-sizing: border-box;
    text-align: center;
    text-align-last: center;
    -webkit-appearance: none;
    appearance: none;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Gotham, var(--font-family-New-font, Figtree) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 350 !important;
    line-height: 24px !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .filter-dropdown-wrapper::after {
    /* mobile-only chevron: ensure visible above select */
    right: 12px;
    top: 50%;
    width: 12px;
    height: 6px;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    background-image: linear-gradient(135deg, transparent 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 55%, transparent 55%), linear-gradient(225deg, transparent 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 55%, transparent 55%);
    background-size: 6px 3px, 6px 3px;
    background-position: center center, center center;
    background-repeat: no-repeat;
  }
  /* inline SVG fallback inside wrapper; hidden by default, visible on mobile */
  .filter-dropdown-wrapper .dropdown-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 6px;
    display: none;
    pointer-events: none;
    z-index: 4;
  }
  .filter-dropdown-wrapper .dropdown-icon svg { display: block; width: 12px; height: 6px; }
  /* show inline svg fallback on mobile where pseudo-elements may be hidden */
  .filter-dropdown-wrapper .dropdown-icon {
    display: block;
    z-index: 5;
  }
  .filter-dropdown-wrapper .dropdown-icon svg path {
    stroke: #FFFFFF;
  }
  .filter-dropdown::-ms-expand { display: none; }
  .filter-dropdown-wrapper { position: relative; }
  /* Single CSS-only down-chevron (12x6) placed inside the wrapper; no URLs */
  .filter-dropdown-wrapper::after {
    content: "";
    position: absolute;
    /* place chevron 12px from the right inner edge so it sits inside the rounded box */
    right: 12px;
    top: 50%;
    width: 12px;
    height: 6px;
    transform: translateY(-50%);
    box-sizing: content-box;
    display: block;
  }
  /* Create the chevron with two thin borders inside the pseudo-element */
  .filter-dropdown-wrapper::after {
    background: transparent;
  }
  .filter-dropdown-wrapper::after {
    /* draw a 12x6 chevron composed of two small gradients centered in the box */
    background-image: linear-gradient(135deg, transparent 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 55%, transparent 55%), linear-gradient(225deg, transparent 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 55%, transparent 55%);
    /* each wing is 6x3 inside the 12x6 box */
    background-size: 6px 3px, 6px 3px;
    /* center both wings inside the 12x6 box so the V appears centered horizontally */
    background-position: center center, center center;
    background-repeat: no-repeat;
    background-color: transparent;
    z-index: 3; /* ensure chevron sits above the select */
    pointer-events: none;
  }
  /* Mobile-only: force card internals to match desktop layout (author block pinned to bottom) */
  .testimonial-card > article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
  }
  /* Ensure card text uses the same font family and left alignment as desktop */
  .testimonial-card,
  .testimonial-card * {
    font-family: var(--font-family-New-font, Figtree) !important;
    color: var(--Text-Text-default, #282828) !important;
    /* match desktop text alignment */
    text-align: left;
  }

  .testimonial-text {
    flex: 1 1 auto;
    overflow: hidden;
    /* match desktop spacing so text appears under the absolute badge */
    margin-top: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* mobile: show up to 2 lines */
    -webkit-box-orient: vertical;
    /* Keep desktop sizing but maintain left alignment on mobile */
    font-size: var(--font-size-L, 18px) !important;
    font-weight: var(--font-weight-Regular, 400) !important;
    line-height: var(--font-line-height-L, 24px) !important;
  }
  .testimonial-quote {
    margin-top: auto;
  }
  .testimonial-quote > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .testimonial-author-name,
  .testimonial-author-role {
    height: auto !important;
    min-height: 0 !important;
  }
  /* mobile overrides applied above; duplicate block removed */
  .filter-dropdown-wrapper[data-selected] .filter-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6);
    color: var(--Current-Colors-White-White, #FFF);
    border-radius: 41px;
    padding: 12px 18px;
    border: none;
    font-weight: var(--font-weight-Medium, 500);
    width: 256px;
    flex-shrink: 0;
  }
}

/* Also style the dropdown when used on slightly larger devices (if dropdown remains visible) */
@media (max-width: 1024px) {
  .filter-dropdown-wrapper[data-selected] .filter-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6);
    color: var(--Current-Colors-White-White, #FFF);
    border-radius: 41px;
    padding: 12px 18px;
    border: none;
    font-weight: var(--font-weight-Medium, 500);
  }
}

@media (max-width: 640px) {
  .testimonials-carousel {
    width: 300px;
    margin: 0 auto;
  }
  /* Mobile small breakpoint uses the same mobile-sized card defined at max-width:767px */
  .prev,
  .next {
    display: none;
  }
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.testimonials-filter-button[aria-selected="true"],
.testimonials-filter-button[aria-selected="true"] * {
  background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
  color: var(--Current-Colors-White-White, #FFF) !important;
}

/* Tablet: ensure both navs are visible, vertically centered and match desktop offsets */
@media (min-width: 768px) and (max-width: 1024px) {
  .testimonials-carousel {
    overflow: visible !important;
  }
  .testimonials-carousel .prev,
  .testimonials-carousel .next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1) !important;
    background: var(--Current-Colors-White-White, #FFF) !important;
    z-index: 9999 !important;
  }
  .testimonials-carousel .prev { left: -20px !important; }
  .testimonials-carousel .next { right: -20px !important; }
  .testimonials-carousel .prev svg,
  .testimonials-carousel .prev .nav-icon-img,
  .testimonials-carousel .next svg,
  .testimonials-carousel .next .nav-icon-img {
    stroke: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    fill: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
  }
}


@media (min-width: 768px) and (max-width: 1024px) {
  .testimonials-filters .testimonials-filter-button[aria-selected="true"],
  .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
  .testimonials-filters .testimonials-filter-button[aria-selected="true"] *,
  .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] * {
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
}


@media (min-width: 768px) and (max-width: 1024px) {
  .testimonials-filters .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"],
  .testimonials-filters > .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
  .testimonials-filters .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] *,
  .testimonials-filters > .testimonials-filter-list > li .testimonials-filter-button[aria-selected="true"] * {
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
}


@media (min-width: 768px) and (max-width: 1024px) {
  div.testimonials-filters[role="tablist"] ul.testimonials-filter-list li button.testimonials-filter-button[aria-selected="true"],
  div.testimonials-filters[role="tablist"] ul.testimonials-filter-list li button.testimonials-filter-button[aria-selected="true"] * {
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
  }
}


.testimonial-quote { position: relative; }

.testimonial-quote::before {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--Current-Colors-Secondary-Blue-10, #F0F9FF);
  box-sizing: border-box;

  left: 24px;
  bottom: 53px;
}


.testimonial-quote svg {
  position: absolute;
  width: 24px;
  height: 24px;
  left: calc(24px + (56px - 24px)/2);
  bottom: calc(53px + (56px - 24px)/2);
}


.testimonials-section.force-visible-1-5 .testimonial-quote::before {
  left: 24px;
  bottom: 53px;
}
.testimonials-section.force-visible-1-5 .testimonial-quote svg {
  left: calc(24px + (56px - 24px)/2);
  bottom: calc(53px + (56px - 24px)/2);
}


@media (max-width: 767px) {
  .testimonial-quote::before {
    left: -33px;
    top: -38.074px;
    bottom: auto;
  }
  .testimonial-quote svg {
    left: calc(-33px + (56px - 24px)/2);
    top: calc(-38.074px + (56px - 24px)/2);
    bottom: auto;
  }
}


.testimonial-quote {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: auto !important;
  position: relative !important;
  padding-left: 38px !important;
  /* Reserve horizontal space on the left for the 56px circle */
  padding-top: 48px !important; /* 56px circle + 12px gap */
}
.testimonial-quote > div {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: left !important;
}
.testimonial-quote::before {
  content: "" !important;
  position: absolute !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--Current-Colors-Secondary-Blue-10, #F0F9FF) !important;
  border: 1px solid rgba(3,111,166,0.12) !important;
  box-shadow: 0 6px 18px rgba(3,111,166,0.06) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.testimonial-quote svg {
  position: absolute !important;
  z-index: 2 !important;
  width: 24px !important;
  height: 24px !important;
  left: 16px !important; /* center svg inside 56px circle (28 - 12) */
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
}
.testimonial-author-name {
  margin: 0 !important;
  position: static !important;
  font-size: var(--font-size-L, 18px) !important;
  line-height: var(--font-line-height-L, 24px) !important;
  z-index: 3 !important;
  text-align: left !important;
}

/* Mobile-only override: enforce full blue dropdown pill sizing and remove seams */
@media (max-width: 767px) {
  .filter-dropdown-wrapper {
    width: 300px !important;
    height: 44px !important;
    min-width: 138px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    border-radius: 41px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .filter-dropdown {
    width: 100% !important;
    height: 44px !important;
    padding: 0 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    color: var(--Current-Colors-White-White, #FFF) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin-left: 0 !important; /* undo earlier negative margin workaround */
  }

  .filter-dropdown-wrapper .dropdown-icon {
    right: 12px !important;
  }
}


@media (max-width: 767px) {
  .filter-dropdown option {
    color: var(--Current-Colors-Secondary-Blue-80, #005D98) !important;
    background: var(--Current-Colors-White-White, #FFF) !important;
    -webkit-text-fill-color: var(--Current-Colors-Secondary-Blue-80, #005D98) !important;
  }
  .filter-dropdown option:checked,
  .filter-dropdown option[selected] {
    color: var(--Current-Colors-White-White, #FFF) !important;
    background: var(--Current-Colors-Secondary-Blue-60, #036FA6) !important;
    -webkit-text-fill-color: var(--Current-Colors-White-White, #FFF) !important;
  }
  .filter-dropdown option:hover {
    background: rgba(3,111,166,0.06) !important;
  }
}

/*Testimonais End*/

/*Callout start*/

/* Mortgage Contact Us component styles */
.mortgage-contact-root {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  background: var(--Current-Colors-White-White, #FFF);
}

.mortgage-contact-inner {
  display: flex;
  width: 1288px;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background: var(--Current-Colors-White-White, #FFF);
}

.mc-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-mobile-icon {
  width: 100px;
  height: 100px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 8px;
}

.mc-text {
  display: flex;
  width: 418px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  align-self: stretch;
}

.mc-heading {
	margin: 0;
	color: var(--Text-Text-default, #282828);
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-3XL, 28px);
	font-style: normal;
	font-weight: var(--font-weight-Bold, 700);
	line-height: var(--font-line-height-2XL, 32px); /* 114.286% */
}

.mc-subtext {
	margin: 0;
	color: var(--Text-Text-default, #282828);
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-M, 16px);
	font-style: normal;
	font-weight: var(--font-weight-Regular, 400);
	line-height: var(--font-line-height-L, 24px); /* 150% */
}

.mc-call {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top:24px;
}

.call-label {
  
	color: var(--Text-Text-default, #282828);
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-2XL, 24px);
	font-style: normal;
	font-weight: var(--font-weight-Regular, 400);
	line-height: var(--font-line-height-2XL, 32px); /* 133.333% */
}

.call-number {
	text-decoration: none;
	color: var(--Current-Colors-Secondary-Blue-60, #036FA6);
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-2XL, 24px);
	font-style: normal;
	font-weight: var(--font-weight-Bold, 700);
	line-height: var(--font-line-height-2XL, 32px);
}


.mc-hours {
	  margin: 0;
	  color: #0A223F;
	/* Figtree/body text/16 */
	font-family: var(--font-family-New-font, Figtree);
	font-size: var(--font-size-M, 16px);
	font-style: normal;
	font-weight: var(--font-weight-Regular, 400);
	line-height: var(--font-line-height-L, 24px); /* 150% */
}

.mc-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ensure image area has a background in case the image has transparent parts */
  background: transparent;
  position: relative;
  display: inline-block;
  overflow: visible;
}

.mc-main-image {
  width: 669px;
  height: 335px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  max-width: 100%;
  border-radius: 16px;
}

/* OFFSET BACKGROUND SHAPE: place behind the image and offset so the image appears first */
.mc-image-wrap::after {
  content: '';
  position: absolute;
  top: 17px;
  right: -16px;
  width: 100%;
  height: 100%;
  background: #002855;
  border-radius: 20px;
  z-index: 0;
}


/* X-small: 0px to 543.98px */
@media screen and (max-width: 33.99875rem) {


	/* Styles ONLY for X-small */

  .mc-text {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .mortgage-contact-inner {
    width: 100%;
    padding: 0 16px;
    flex-direction: column;
    gap: 16px;
  }
  	
	.mc-main-image {
		width: 336px;
		height: 200px;
	}
	.mc-image-wrap::after {
		top: 4px;
		right: -6px;
	}
	.mc-heading {

		font-size: var(--font-size-2XL, 24px);
		padding-top: 16px;
	}
	.mc-mobile-icon {
		width: 29px;
		height: 52px;
	}
	.mc-icon-wrap {
		justify-content: end;
	}

	.call-label {
		color: var(--Text-Text-default, #0F2D52);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-L, 18px);
		font-style: normal;
		font-weight: var(--font-weight-SemiBold, 600);
		line-height: var(--font-line-height-L, 24px);
	}
	.call-number {
		text-decoration: none;
		color: var(--Current-Colors-Secondary-Blue-60, #036FA6);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-2XL, 20px);
		font-style: normal;
		font-weight: var(--font-weight-Bold, 700);
		line-height: var(--font-line-height-2XL, 24px);
	}

	.mc-call {
		padding-top: 8px;
		padding-bottom: 16px;
	}
	.mc-hours {
		font-size: var(--font-size-M, 14px);

	}
}

/* Small: 544px to 767.98px */
@media screen and (min-width: 34rem) and (max-width: 47.99875rem) {

	.ratesContainer, .ratesContainer.slds-grid   
	{
		gap:2px !important; 
	}

  .mc-text {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .mortgage-contact-inner {
    width: 100%;
    padding: 0 16px;
    flex-direction: column;
    gap: 16px;
  }
  
	.mc-main-image {
		width: 495px;
		height: 200px;
	}
	.mc-image-wrap::after {
		top: 4px;
		right: -6px;
	}
	.mc-heading {
		font-size: var(--font-size-2XL, 24px);
		padding-top: 16px;
	}
	.mc-mobile-icon {
		width: 29px;
		height: 52px;
	}

	.mc-icon-wrap {
		justify-content: end;
	}

	.call-label {
		color: var(--Text-Text-default, #0F2D52);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-L, 18px);
		font-style: normal;
		font-weight: var(--font-weight-SemiBold, 600);
		line-height: var(--font-line-height-L, 24px);
	}

	.call-number {
		text-decoration: none;
		color: var(--Current-Colors-Secondary-Blue-60, #036FA6);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-2XL, 20px);
		font-style: normal;
		font-weight: var(--font-weight-Bold, 700);
		line-height: var(--font-line-height-2XL, 24px);
	}

	.mc-call {
		padding-top: 8px;
		padding-bottom: 16px;
	}

	.mc-hours {
		font-size: var(--font-size-M, 14px);
	}
}

/* Medium: 768px to 991.98px */
@media screen and (min-width: 48rem) and (max-width: 63.99875rem) {

	.ratesContainer{
		gap: 9px !important; 
	}
    
	.mortgage-contact-inner {
		width: 768px;
	}

	.mc-main-image {
		width: 640px;
		height: 300px;
	}

	.mc-image-wrap {
		padding-left: 70px;
	}

	.mc-image-wrap::after {
		top: 9px;
		right: 120px;
		width: 640px;
		height: 307px;
		left: 75px;
	}

	.mc-subtext {
		padding-top: 8px;
		padding-bottom: 24px;
	}

	.mc-mobile-icon {
		width: 48px;
		height: 87px;
	}

	.mc-icon-wrap {
		justify-content: end;
	}

	.call-label {
		color: var(--Text-Text-default, #282828);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-2XL, 24px);
		font-style: normal;
		font-weight: var(--font-weight-Regular, 400);
		line-height: var(--font-line-height-2XL, 32px);
	}


	.call-number {
		text-decoration: none;
		color: var(--Current-Colors-Secondary-Blue-60, #036FA6);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-2XL, 24px);
		font-weight: var(--font-weight-Bold, 700);
		line-height: var(--font-line-height-2XL, 32px);
	}

	.mc-call {
		padding-top: 8px;
		padding-bottom: 16px;
	}

	.mc-text {
		padding-top: 40px;
	}


}

/* Large: 992px to 1199.98px */
@media screen and (min-width: 64rem) and (max-width: 74.99875rem) {

	.ratesContainer, .ratesContainer.slds-grid{
		gap: 9px !important;
	}
	
	.mortgage-contact-inner {
		width: 768px;
	}

	.mc-main-image {
		width: 640px;
		height: 300px;
	}

	.mc-image-wrap {
		padding-left: 70px;
	}

	.mc-image-wrap::after {
		top: 9px;
		right: 120px;
		width: 640px;
		height: 307px;
		left: 75px;
	}

	.mc-subtext {
		padding-top: 8px;
		padding-bottom: 24px;
	}

	.mc-mobile-icon {
		width: 48px;
		height: 87px;
	}

	.mc-icon-wrap {
		justify-content: end;
	}

	.call-label {
		color: var(--Text-Text-default, #282828);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-2XL, 24px);
		font-style: normal;
		font-weight: var(--font-weight-Regular, 400);
		line-height: var(--font-line-height-2XL, 32px);

	}


	.call-number {
		text-decoration: none;
		color: var(--Current-Colors-Secondary-Blue-60, #036FA6);
		font-family: var(--font-family-New-font, Figtree);
		font-size: var(--font-size-2XL, 24px);
		font-weight: var(--font-weight-Bold, 700);
		line-height: var(--font-line-height-2XL, 32px);
	}

	.mc-call {
		padding-top: 8px;
		padding-bottom: 16px;
	}

	.mc-text {

		padding-top: 40px;
	}

}

/*callOUT end */

.white-link {
    color: #FFFFFF !important;
    text-decoration: none; /* Optional: removes the underline */
}

.white-link:hover {
    color: #F3F3F3; /* Optional: slight grey on hover */
    text-decoration: underline;
}

.relative-container {
    position: relative;
    display: block;
}

/* Pins the button to the top right */
.close-icon {
	display:flex;
    float: right;
    top: 1rem;
    right: 1rem;
	--dxp-g-neutral-3: #036FA6 !important;
}

.ka-submit-btn{

    text-align: center;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-style: normal;
    font-weight: var(--font-weight-Medium, 500);
    line-height: var(--font-line-height-L, 24px); 
    border-radius: 8px;
    background: var(--Primary-colors-Green-900, #3A5E20);
    display: flex;
    height: 40px;
    padding: 6px 22px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    --sds-c-button-brand-color-text: #FFFFFF !important;
    --sds-c-button-brand-color-background: #3A5E20;
    --sds-c-button-brand-color-border: #3A5E20;
    --sds-c-button-brand-color-background-hover: #3A5E20;
    --sds-c-button-brand-color-border-hover: #3A5E20;
}

@media screen and (min-width: 768px) and (max-width: 992px){
        .tile-card {
        width: 280px !Important;
        height: 200px;
        }
    }
/* RESPONSIVE: Tablet (1024px and below) - 2 per row, 3rd centered */
@media (max-width: 1024px) {
    .tile-grid {
        justify-content: center;
    }

    .tile-card {
        width: 300px;
        align-items: flex-start;
    }
    
    /* 3rd card (odd child) centered on new row */
    .tile-card:nth-child(3) {
        flex-basis: 100%;
        margin: 0 auto;
    }
    
    .tile-card:nth-child(even) {
        background: rgba(244, 250, 240, 0.40);
    }
}

@media screen and (min-width: 1024px) and (max-width: 1300px){
        .tile-card {
        width: 300px !Important;
        height: 200px;
        }
    }
/* RESPONSIVE: Tablet smaller (768px and below) - 2 per row, 3rd centered */
@media (max-width: 768px) {
    .tile-grid {
        justify-content: center;
    }

    .tile-card {
        width: 300px;
        align-items: flex-start;
    }
    
    /* 3rd card centered on new row */
    .tile-card:nth-child(3) {
        flex-basis: 100%;
        margin: 0 auto;
    }
    
    .tile-card:nth-child(even) {
        background: rgba(244, 250, 240, 0.40);
    }
}

/* RESPONSIVE: Mobile (480px and below) - 1 per row, stacked vertically */
@media (max-width: 480px) {
    /* Override Lightning Layout grid on mobile */
    .tile-grid-section {
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .tile-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 1rem;
    }

    .tile-card {
        width: 344px;
        max-width: calc(100vw - 2rem);
        align-items: center;
        flex-basis: auto;
        height: auto;
        margin: 0;
    }
    
    /* Ensure all cards have same background on mobile */
    .tile-card,
    .tile-card:nth-child(even),
    .tile-card:nth-child(odd) {
        background: rgba(244, 250, 240, 0.40);
    }
}

  /* ONLY FOR large desktop and widescreen monitors */
  @media screen and (min-width: 1440px) {
        .tile-card {
            display: flex;
            width: 400px;
            height: 200px;
        }
	}

.wph-benefits{
    width: 1288px;
    min-height: 470px;
    padding-top: 40px;
    padding-bottom:60px ;
    align-items: center;
    align-content: center;
}

.benefits-content-card {
    display: flex;
    width: 632px;
    height: 422px;
    padding: 24px;
    flex-direction: column;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.80);
    position: absolute;
    margin-top: -40px;

}
.benefits-hero {
    background-image: var(--benefits-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 2rem;
    border-radius: 16px;
    height: 470px;
}

.benefits-section-title{
    color: var(--Text-Text-default, #282828);
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-style: normal;
    font-weight: var(--font-weight-SemiBold, 600);
    line-height: var(--font-line-height-L, 24px); /* 150% */
    text-transform: uppercase;
    display: flex;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    padding-top: 24px;
    padding-bottom :24px;
}

.benefits-section-panelHeading{
    color: #282828;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-2XL, 24px);
    font-style: normal;
    font-weight: var(--font-weight-Bold, 700);
    line-height: var(--font-line-height-2XL, 32px); /* 133.333% */
    display: flex;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;

}
.benefits-section-description{
    color: #282828;
    font-family: var(--font-family-New-font, Figtree);
    font-size: var(--font-size-M, 16px);
    font-style: normal;
    font-weight: var(--font-weight-Regular, 400);
    line-height: var(--font-line-height-L, 24px); /* 150% */
    align-self: stretch;
    padding-bottom: 32px;

}
.wph-quick-links-layout {
    position: -webkit-sticky; 
    position: sticky;
    top: 70px;
    z-index: 99; 
    background: white; 
    
}
.slds-text-link_reset:hover, 
.slds-text-link_reset:focus {
    text-decoration: none !important;
}

.footerPadding {
        padding-top: 60px;
    }

@media only screen and (min-width: 768px) and (max-width: 834px){
	.wph-benefits{
        width: 100%;
        /* max-width: 928px; */
        /* min-height: 818px; */
    }

	.faq-root {
		width:1120px;
	}
	
	.quiz-content-pannel {
		width: 688px;
		min-height: 692px;
		height: auto;
		justify-content: center;
		align-items: center;
		gap: 40px;
		border-radius: 20px;
		background: var(--Current-Colors-White-White, #FFF);
		box-shadow: none;
		display: flex;
		padding: 24px;
		flex-direction: column;
	}
	.quiz-img {
		width: 640px;
		height: 220px;
		flex-shrink: 0;
		align-self: stretch;
		border-radius: 15px;
        object-fit:cover;
	}
	.quiz-header {
		min-height: 32px;
		height:auto ;
		align-self: stretch;
		color: var(--Current-Colors-Neutrals-100, #282828);
		text-align: center;
		font-family: var(--font-family-New-font, Figtree);
		font-style: normal;
		font-weight: var(--font-weight-Bold, 700);
		font-size: var(--font-size-XL, 20px);
		line-height: var(--font-line-height-L, 24px); 
	}
	.custom-box-style{
		 min-height: 56px;
		height: auto;
	}
	.article-content-pannel {
		 width: 770px;
		 box-shadow: none;
  	}
	.article-box-border {
		width: 240px;
	}
	.article-sub-section { 
		width: 240px;
	}
	
	.benefits-hero {
		background-image: var(--benefits-hero-bg);
		padding: 4rem 2rem;
		border-radius: 16px;
		width:100%; /* 670px*/
		height: 520px;
	}

.benefits-section-panelHeading{
	height: auto;
}


}
@media only screen and (max-width: 767px){
.carousel-container {
        overflow-y: hidden;
        overflow-x: auto; 
        display: flex; 
        flex-direction: row;
        gap: 10px; 
        width: 100%;
    }
    .carousel-item {
        flex-shrink: 0; 
    }
}
/* Mobile*/
@media only screen and (max-width: 768px){

  .quiz-content-pannel {
    width: 344px;
    min-height: 672px;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
    background: var(--Current-Colors-White-White, #FFF);
    box-shadow: none;
    display: flex;
    flex-direction: column;
	}
	.quiz-img {
		width: 312px;
		height: 200px;
		flex-shrink: 0;
		align-self: stretch;
		border-radius: 15px;
        object-fit:cover;
	}
	.custom-box-style{
		min-height: 56px;
		height: auto;
		width: 312px;
	}

	.quiz-header {
		min-height: 32px;
		height:auto ;
		width: 312px;
		align-self: stretch;
		color: var(--Current-Colors-Neutrals-100, #282828);
		text-align: left;
		font-family: var(--font-family-New-font, Figtree);
		font-style: normal;
		font-weight: var(--font-weight-Bold, 700);
		font-size: var(--font-size-XL, 20px);
		line-height: var(--font-line-height-L, 24px); 
	}
	.quiz-sub-header{
		width: 312px;
		margin-top: 0.75rem;
	}
    
    

	.article-content-pannel {
		 width: 100% !important;
		 box-shadow: none;
		 flex-shrink: 0 !important;
	}
	.article-box-border {
		width: 240px;
	}
	.article-sub-section { 
		width: 240px;
	}
	.article-lead-modal{
		width: 325px !important ;
		height: 750px !important ;
	}
	.scrollable-description{
		height: 116px !important;
	}
	
.wph-benefits-img{
    width:499px ;
    height: 250px;
  }  

.benefits-content-card {
    display: flex;
    width: 544px;
    height: auto;
    background: rgba(255, 255, 255, 0.80);
}
.benefits-hero {
    background-image: var(--benefits-hero-bg);
    padding: 4rem 2rem;
    border-radius: 16px;
    width:100% ; 
    height: 250px;
}

.benefits-section-panelHeading{
	height: auto;
}
.quiz-page-header {
	padding-bottom: 10px;
    font-size: var(28px);
    padding-top: 10px;
}
}


/* iPad Pro Specific (11" and 12.9" models) using em */
@media only screen  and (min-width: 834px)  and (max-width: 1366px)  and (-webkit-min-device-pixel-ratio: 2) {
    
    .tile-card {
        display: flex;
         width: 280px !important;
        height: 170px !important;
    }

	.faq-root {
		width:1120px;
	}
	.quiz-content-pannel {
		width: 928px;
		min-height: 432px;
	}
	.quiz-img {
		width: 230px;
		min-height: 384px;
		flex-shrink: 0;
		align-self: stretch;
		border-radius: 15px;
        object-fit:cover;
	}
	.custom-box-style{
		 min-height: 56px;
		height: auto;
	}

	.quiz-header {
		min-height: 32px;
		height:auto ;
		align-self: stretch;
		color: var(--Current-Colors-Neutrals-100, #282828);
		text-align: center;
		font-family: var(--font-family-New-font, Figtree);
		font-style: normal;
		font-weight: var(--font-weight-Bold, 700);
		font-size: var(--font-size-XL, 20px);
		line-height: var(--font-line-height-L, 24px); 
	}
    .article-content-pannel {
		width: 770px;
   	}
	.article-box-border {
		width: 308px;
	}
	.article-sub-section { 
		width: 290px;
	}
	.article-content-pannel {
		 width: 1000px;
		 box-shadow: none;
	}
	
	.benefits-hero {
        background-image: var(--benefits-hero-bg);
        padding: 4rem 2rem;
        border-radius: 16px;
        width:100% ;
        height: 520px;
    }

   .wph-benefits {
        width: 100%;
        min-height: 470px;
        padding-top: 40px;
        padding-bottom: 60px;
        align-items: center;
        align-content: center;
   }


}

/* ========================================
   VIB start
   ======================================== */


/* Mobile*/
@media only screen and (max-width: 768px){

  .wph-benefits-img{
        max-width:100%;
        height: auto;
  }  

.wph-benefits{
    width: 100%;
    /* min-height: 520px; */
    padding-bottom: 5px;
}

.benefits-content-card {
    display: flex;
    width: 100%;
    max-width: 544px;
    background: rgba(255, 255, 255, 0.80);
    margin: 0 auto;
    margin-top: 0; /* remove negative overlap on small screens */
    box-sizing: border-box;
    position: relative;
}
.benefits-hero {
   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 2rem;
    border-radius: 16px;
    height: 470px;
}
.vaLayout {
    padding-top: 430px;
}

.benefits-section-panelHeading{
	height: auto;
}

}

/* Banner / Very Important Buyer Benefits (VIB) styles */
.vib-banner{
    background-image: url('/mortgagevforcesite/cms/delivery/media/MCG4KEYRWPUJFJ3EJ3WG3LOKNPMU');
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    border-radius: inherit !important;
    width: 1280px;
}

/* Shared responsive rules for tablet and mobile to avoid repetition */
@media only screen and (max-width: 1366px) {
    .vib-banner {
        background-image: url('/mortgagevforcesite/cms/delivery/media/MCG4KEYRWPUJFJ3EJ3WG3LOKNPMU');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;
        width: 100%;
        max-width: 1280px;
        height: auto;
    }

    .vib-banner::before {
        z-index: 1;
    }

    

    .vib-banner .slds-grid.slds-grid_vertical-align-center {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .vib-banner .slds-var-p-around_xx-small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem;
        position: relative;
        z-index: 2;
        gap: 0.5rem;
    }

    .vib-banner .slds-var-p-around_xx-small img {
        object-fit: contain;
        display: block;
    }

    .vib-contents {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .vib-contents .vib-heading,
    .vib-contents .WPHBannerHeadLayout {
        order: 1 !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .vib-contents .WPHBannerHeadSubLayout {
        order: 2 !important;
        flex-basis: 100% !important;
    }
}

.vib-heading{
  font-size: 28px;
  color: white;
    font-family: 'FigtreeBold', Figtree, sans-serif;
  display: flex;
}

.vib-text{
    font-size: 32px;
    color: white;
}

.vib-amount{
    font-size: 64px;
    color: #EBCE98;
    font-family: 'FigtreeBold', Figtree, sans-serif;
}

.custom-white-button{
        --slds-c-button-text-color: #ffffff;
        --slds-c-button-color-border: #ffffff;
}
.custom-white-button button{background: transparent;}

.vib-section{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 64px;
}

.vib-contents{
    position: relative;
    flex: 1;
    min-width: 0;
}

.vib-contents:nth-child(1)::after,
.vib-contents:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -32px; /* Half the gap */
    width: 1px;
    height: 95%;
    background: #ccc;
}

@media (max-width: 480px) {
    .vib-amount {
        font-size: 36px;
     }
    .vib-heading {
        font-size: 20px;
    }
    .vib-section{gap:24px}
}

/* VIB card sizing and heading adjustments */
@media only screen and (max-width: 768px) {
    /* Mobile: full card size 544 x 728 */
    .vib-heading{
        color: var(--Text-Text-dark-bg, #FFF);
        text-align: center;
        font-family: var(--font-family-New-font, Figtree);
        font-size: var(--font-size-2XL, 24px);
        font-style: normal;
        font-weight: var(--font-weight-Bold, 700);
        line-height: var(--font-line-height-2XL, 32px);
    }

        /* Stack VIB columns vertically on mobile */
        .vib-section {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: stretch;
        }

        .vib-contents {
            width: 100%;
            box-sizing: border-box;
            padding: 16px 20px;
            min-width: auto;
        }

        /* Hide decorative vertical separators on stacked layout */
        .vib-contents:nth-child(1)::after,
        .vib-contents:nth-child(2)::after {
            display: none;
        }

        /* Center the last (call-to-action) column content */
        .vib-contents.slds-text-align_center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
}


@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Tablet-specific overrides: keep desktop defaults unchanged */
    

    .benefits-content-card{
        display: flex;
        width: 100%;
        max-width: 632px;
        height: auto;
        position: relative;
        margin-top: 0;
        box-sizing: border-box;
    }

    .wph-benefits-img{
        max-width:100%;
        height:auto;
    }

    /* Tablet: full card size 766 x 888 */
    .vib-banner {
        width: 100%;
        /* height: 888px; */
        margin: 0 auto;
        border-radius: inherit !important;
    }
    .vib-heading{
        color: var(--Text-Text-dark-bg, #FFF);
        text-align: center;
        font-family: var(--font-family-New-font, Figtree);
        font-size: var(--font-size-2XL, 24px);
        font-style: normal;
        font-weight: var(--font-weight-Bold, 700);
        line-height: var(--font-line-height-2XL, 32px);
    }

       /* Stack VIB columns vertically on tablet */
    .vib-section {
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: stretch;
    }

        .vib-contents {
            width: 100%;
            box-sizing: border-box;
            padding: 20px 24px;
            min-width: auto;
        }

        .vib-contents:nth-child(1)::after,
        .vib-contents:nth-child(2)::after {
            display: none;
        }

        .vib-contents.slds-text-align_center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        




}


/* Ensure background image and readable text on mobile */
@media only screen and (max-width: 768px) {
    .vib-banner {
        background-image: url('/mortgagevforcesite/cms/delivery/media/MCG4KEYRWPUJFJ3EJ3WG3LOKNPMU');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;
        width: 100%;
        max-width: 1280px;
        height: auto;
        min-height: 420px;
        border-radius: none !important;
    }
    .vib-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12));
        border-radius:inherit;
        pointer-events: none;
    }
    

    /* Keep the VIB heading and info icon inline on mobile (gap & icon size only) */
    .vib-banner .slds-grid.slds-grid_vertical-align-center { gap: 12px; }
    .vib-banner .slds-var-p-around_xx-small img { width: 20px; height: 20px; }

    /* Ensure vib text on mobile matches desktop look */
    .vib-banner .vib-heading,
    .vib-banner .vib-text,
    .vib-banner .vib-amount {
        color: #ffffff;
        position: relative;
        z-index: 2;
        font-family: var(--font-family-New-font, Figtree);
    }
    .vib-banner .vib-heading { font-size: 28px !important; }
    .vib-banner .vib-text { font-size: 28px !important; }
    .vib-banner .vib-amount { font-size: 48px !important;
            COLOR: #EBCE98  }
    
    

    /* Mobile: heading/icon alignment handled in shared rules and gap/icon size above */


    /* Force heading + subheading to a single line inside each VIB column */
    .vib-contents .vib-heading,
    .vib-contents .WPHBannerHeadLayout {
        display: inline-block !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        margin-right: 18px !important;
    }

    /* Use desktop font sizes on mobile so words match desktop */
    .vib-contents .vib-heading {
        font-size: 28px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .vib-contents .WPHBannerHeadLayout {
        font-size: 28px !important;
        line-height: 1.05 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure the descriptive text sits below the heading pair */
    .vib-contents .WPHBannerHeadSubLayout {
        display: block;
        margin-top: 6px;
    }

    /* Mobile: only override gap (shared rules handle layout) */
    .vib-contents { gap: 12px !important; }
}

/* Ensure background image and readable text on tablet */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
    /* .vib-banner {
        background-image: url('/mortgagevforcesite/cms/delivery/media/MCG4KEYRWPUJFJ3EJ3WG3LOKNPMU');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        position: relative;
        width: 100%;
        max-width: 1280px;
        height: auto;
        min-height: 520px;
        border-radius: 18px;
    } */
    .vib-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12));
        border-radius:inherit;
        pointer-events: none;
    }
    .vib-banner .vib-heading,
    .vib-banner .vib-text,
    .vib-banner {
        color: #ffffff;
        position: relative;
        z-index: 2;
        font-family: var(--font-family-New-font, Figtree);
    }
     

    /* Keep the VIB heading and info icon inline on tablet (gap & icon size only) */
    .vib-banner .slds-grid.slds-grid_vertical-align-center { gap: 16px; }
    .vib-banner .slds-var-p-around_xx-small img { width: 22px; height: 22px; }

    /* Tablet: heading/icon alignment handled in shared rules and gap/icon size above */


    /* Force heading + subheading to a single line inside each VIB column on tablet */
    .vib-contents .vib-heading,
    .vib-contents .WPHBannerHeadLayout {
        display: inline-block !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        margin-right: 20px !important;
    }

    /* Use desktop font sizes on tablet so words match desktop */
    .vib-contents .vib-heading {
        font-size: 28px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }
    .vib-contents .WPHBannerHeadLayout {
        font-size: 28px !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }

    .vib-contents .WPHBannerHeadSubLayout {
        display: block;
        margin-top: 9px;
    }

    /* Tablet: only override gap (shared rules handle layout) */
    .vib-contents { gap: 16px !important; }
	.vib-amount { font-size: 52px; }
    
}

   /* ========================================
   VIB End
   ======================================== */



/* ========================================
   TILE GRID COMPONENT - Rates start
   ======================================== */

/* BLOCK: Main section wrapper */
.tile-grid-section {
    background-color: #FFFFFF;
    margin-top: 60px;
    margin-bottom: 60px;
    gap: 42px;
}

/* BLOCK: Grid container */
.tile-grid {
    /* display: flex; */
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* BLOCK: Card item */
.tile-card {
    display: flex;
    width: 400px;
    height: 200px;
    padding: 24px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    background: #F4FAF066; /* fallback for cards */
	border-radius: 20px;
	box-shadow: 0 2px 8px 0 rgba(40, 40, 40, 0.25);
    border: 1px solid transparent;
    transition: background-color 0.3s ease;
}


/* Per-card specific backgrounds (class-based to avoid nth-child mismatch) */
.tile-card.tile-card--1 { background: #F4FAF066; }
.tile-card.tile-card--2 { background: #F0F9FF80; }
.tile-card.tile-card--3 { background: #98793C08; }

/* Subtle light borders tuned per-card color (white-ish with varying opacity) */
.tile-card.tile-card--1 {
    border: 0.4px solid rgba(255,255,255,0.65);
}
.tile-card.tile-card--2 {
    border: 0.4px solid rgba(255,255,255,0.55);
}
.tile-card.tile-card--3 {
    border: 0.4px solid rgba(255,255,255,0.45);
}

/* ELEMENT: Icon/Image */
.tile-card__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ELEMENT: Content container */
.tile-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

/* ELEMENT: Title */
.tile-card__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #282828;
}

/* ELEMENT: Description text */
.tile-card__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}


/* RESPONSIVE: Tablet (1024px and below) - 2 per row, 3rd centered */
@media (max-width: 1024px) {
    .tile-grid {
        justify-content: center;
    }

        
    /* 3rd card centered on new row */
    .tile-card.tile-card--3 {
        flex-basis: 100%;
        margin: 0 auto;
    }

    /* backgrounds and borders are defined at the base level; no duplicates here */

    /* Keep tile content left-aligned on tablet */
    .tile-card__body {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}

/* RESPONSIVE: Tablet smaller (768px and below) - 2 per row, 3rd centered */
@media (max-width: 768px) {
    .tile-grid {
        justify-content: center;
    }

    /* 3rd card centered on new row */
    .tile-card.tile-card--3 {
        flex-basis: 100%;
        margin: 0 auto;
    }
    /* keep per-card backgrounds on smaller tablets */
    /* backgrounds already set at base; avoid duplicate selectors */
    /* Keep tile content left-aligned on smaller tablets */
    .tile-card__body {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}

/* RESPONSIVE: Mobile (480px and below) - 1 per row, stacked vertically */
@media (max-width: 480px) {
    /* Override Lightning Layout grid on mobile */
    .tile-grid-section {
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .tile-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 1rem;
    }

    .tile-card {
        width: 344px;
        max-width: calc(100vw - 2rem);
        align-items: center;
        flex-basis: auto;
        height: auto;
        margin: 0;
    }
    
    /* Maintain per-card backgrounds on mobile as well (defined at base) */

    /* Keep tile content left-aligned on mobile */
    .tile-card__body {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
}
/* Ratesend */

/* Tabs: apply the same thin white border to tab items (desktop, tablet, mobile) */
:host .slds-tabs_card .slds-tabs_card__nav li,
:host .slds-tabs_scoped__item,
:host .slds-tabs_default__item,
:host [role="tab"] {
    border: 0.4px solid rgba(255,255,255,0.55) !important;
    box-shadow: none !important;
    background-clip: padding-box;
}

/* Ensure tab anchor/button children don't show outlines or shadows that look like borders */
:host .slds-tabs_card .slds-tabs_card__nav li a,
:host .slds-tabs_card .slds-tabs_card__nav li button,
:host .slds-tabs_scoped__item a,
:host .slds-tabs_scoped__item button,
:host [role="tab"] {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Mobile/tablet specific enforcement (if SLDS changes rules per breakpoint) */
@media (max-width: 1024px) {
    :host .slds-tabs_card .slds-tabs_card__nav li,
    :host .slds-tabs_scoped__item,
    :host .slds-tabs_default__item,
    :host [role="tab"] {
        border: 0.4px solid rgba(255,255,255,0.55) !important;
    }
}
/* Ratesend */

/* WhyPenFed Home Page end */
/*HeroSection modification STARTS*/
.hs-bottom-right-actions {
    right: 12.5% !important;
    bottom: 4% !important;
}

.hs-page-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    position: static !important;
    margin-top: 40px !important;
}
.hs-center-content{
    margin-top: 108px!important;
    min-height: 0px!important;
}
.hs-foreground-text {
    margin-top: 0px !important;
}

.hs-center-buttons{
    min-height: 0px !important;
    gap: 32px !important;
    margin: 0px !important;
}

.hs-call-container {
    top: 40px !important;
}

.hs-foreground-button-green {
    padding: 0px !important;
}

.hs-foreground-button-blue {
    padding: 0px !important;
}

.hs-foreground-button-green button{
    font-family: var(--font-family-New-font, Figtree);
}
.hs-foreground-button-blue button{
    font-family: var(--font-family-New-font, Figtree);
}

/*Tablet Devices*/
@media screen and (min-width: 768px) and (max-width: 991.98px) {

    .vib-contents { gap: 16px !important; flex-direction:  column !important; }
    
    .hs-foreground-text {
        font-size: var(--font-size-7XL, 40px) !important;
        line-height: var(--font-line-height-6XL, 48px) !important;
        width: 90% !important;
    }

    .hs-foreground-Subtext {
        font-size: var(--font-size-XL, 18px) !important;
        line-height: var(--font-line-height-XL, 24px) !important;
        width: 80% !important;
    }

    .hs-call-container {
        right: 72px !important;
    }

    .hs-center-buttons {
        min-height: 0px !important;
        gap: 24px !important;
    }

    .hs-img {
        max-width: 75% !important;
    }

    .hs-bottom-right-actions {
        right: -5.5% !important;
    }
}

/*S-Mobile Devices*/
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    .hs-foreground-text {
        font-size: var(--font-size-7XL, 32px) !important;
        line-height: var(--font-line-height-6XL, 40px) !important;
        width: 70% !important;
    }

    .hs-foreground-Subtext {
        font-size: var(--font-size-XL, 18px) !important;
        line-height: var(--font-line-height-XL, 24px) !important;
        width: 85% !important;
    }

    .hs-center-buttons {
        min-height: 0px !important;
        gap: 24px !important;
        flex-direction: column !important;
    }

    .hs-img {
        max-width: 75% !important;
    }

    .hs-bottom-right-actions {
        right: 15% !important;
    }
    .hs-foreground-button-green button{
        width: 100% !important;
    }
    .hs-foreground-button-blue button{
        width: 100% !important;
    }
}

/*XS Device*/
@media screen and (max-width: 575.98px) {
     .quiz-page-header {
         padding: 10px;
    } 
	.pageContentHeadSub{
    width: 100%;
    padding:10px;
    }

    .hs-foreground-text {
        font-size: var(--font-size-7XL, 32px) !important;
        line-height: var(--font-line-height-6XL, 40px) !important;
        width: 101% !important;
    }

    .hs-foreground-Subtext {
        font-size: var(--font-size-XL, 16px) !important;
        line-height: var(--font-line-height-XL, 24px) !important;
        width: 100% !important;
    }

    .hs-center-buttons {
        min-height: 0px !important;
        gap: 24px !important;
        flex-direction: column !important;
        align-items: stretch !important; 
        margin:0px !important;
        width: 100% !important;
        display: block !important;
    }

    .hs-img {
        max-width: 80% !important;
    }

    .hs-bottom-right-actions {
        right: 10% !important;
        left: 10% !important;
    }
    .hs-call-container{
        top: 16px !important;
        right: 76px !important;
    }
    .hs-foreground-button-green{
        padding: 0px !important;
    }
    .hs-foreground-button-blue{
        padding: 0px !important;
    }
    .hs-foreground-button-green button{
        width: 100% !important;
    }
    .hs-foreground-button-blue button{
        width: 100% !important;
    }
}
/*HeroSection modification ENDS*/



/*LearningCenter STARTS*/
.lc-learningCenterSection{
    max-width: 1288px;
    width: 100%;
    margin: 0 auto;
    padding: 0px 8px;
}
/*Above is for Parent and below are for Child*/
.lc-learningCenter{
    display: flex;
    flex-direction: column;
    gap: 24px;

}
.lc-firstSection{
    flex-direction: column;
}
.lc-icon{
    height: 64px;
    width: 64px;
    filter: invert(31%) sepia(87%) saturate(1215%) hue-rotate(174deg) brightness(91%) contrast(102%);
}
.lc-iconSelectColorChange{
    filter: brightness(0) saturate(100%) invert(11%) sepia(59%) saturate(4164%) hue-rotate(196deg) brightness(95%) contrast(105%);
}
.lc-iconContainer{
    padding: 8px;
}
.lc-iconIteration{
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 8px;
    align-items: center;
    padding-bottom: 16px;
    flex:1;
}
.lc-upperLine{
border: 1px solid #C7CCD3;
}
.lc-iconSection{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 8px;
    cursor: pointer;
    gap:16px;
}
.lc-iconSelect{
    color: #002855;
    border-bottom: 1px solid #002855;
}
.lc-bannerHeaderText{
    color: #282828;

/* Figtree/H3/20 */
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-XL, 20px);
font-style: normal;
font-weight: var(--font-weight-SemiBold, 600);
line-height: var(--font-line-height-L, 24px); /* 120% */

}
.lc-bannerContainer{
    position: relative;
    align-items: baseline;
    flex-direction: column;
    gap: 24px;
    padding-left: 8px;
}
.lc-leftSection{
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: baseline;
}
.lc-leftArticle{
    display: flex;
    gap: 16px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.lc-leftArticleIcon{
    justify-content: flex-start;
    background: #F0F9FF;
    padding: 8px;
    border-radius: 50%;
    margin-bottom: 16px;
}
.lc-leftIcon{
    filter: invert(31%) sepia(87%) saturate(1215%) hue-rotate(174deg) brightness(91%) contrast(102%);
}
.lc-leftIcon:hover{
    filter: brightness(0) saturate(100%) invert(11%) sepia(59%) saturate(4164%) hue-rotate(196deg) brightness(95%) contrast(105%);
}
.lc-leftIconSelect{
    filter: brightness(0) saturate(100%) invert(11%) sepia(59%) saturate(4164%) hue-rotate(196deg) brightness(95%) contrast(105%);
}
.lc-leftArticleIconSelect{
    border: 1px solid var(--Current-Colors-Primary-blue-Primary-Blue, #002855);
}

.lc-textContainer{
    display: flex;
    flex-direction: column;
    gap:8px;
}
.lc-rightSection{
    padding: 16px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 2px 8px 0px #28282840;
   cursor: pointer;
}
.lc-rightSection:hover{
    border: 1.5px solid var(--Current-Colors-Secondary-Blue-80, #005D98);
    box-shadow: 0px 2px 8px 0px #28282840;
}
.lc-articleImageContainer{
    width:556px !important;
    height:130px !important;
    border-radius: 8px;
    object-fit: cover;
}
.lc-articleSection{
    display: flex;
    flex-direction: column;
    padding: 16px 0px 16px;
    gap:16px;
}
.lc-articleContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.lc-badgeText{
    background: #005D98;
    padding: 4px 20px;
    border-radius: 100px;
    color: #FFFFFF;
font-family: var(--font-family-New-Font, Figtree);
font-size: var(--font-size-S, 14px);
font-style: normal;
font-weight: 500px;
line-height: var(--font-line-height-L, 24px); /* 171.429% */
}
.lc-expAdviceSection{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 4px;
}
.lc-logo{
    width: 16px;
    height: 16px;
}
.lc-readAndPublishContainer{
        gap: 8px;
    display:flex;
    flex-direction: column;
}
.lc-expAdvice{
    color: #666666;
font-family: var(--font-family-New-Font, Figtree);
font-size: var(--font-size-S, 14px);
font-style: normal;
font-weight: 400px;
line-height: var(--font-line-height-L, 24px); /* 171.429% */
}
.lc-articleHeading{
    color: var(--Black, var(--color-black-solid, #000));

/* Figtree/H3/20 bold */
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-XL, 20px);
font-style: normal;
font-weight: var(--font-weight-Bold, 700);
line-height: var(--font-line-height-L, 24px); /* 120% */
}
.lc-readAndPublishedText{
    color: #000;
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-M, 16px);
font-style: normal;
font-weight: var(--font-weight-Medium, 500);
line-height: var(--font-line-height-L, 24px); /* 150% */
}
.lc-readAndPublishedInfo{
    color: #000;

/* Figtree/body text/16 */
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-M, 16px);
font-style: normal;
font-weight: var(--font-weight-Regular, 400);
line-height: var(--font-line-height-L, 24px);
}
.lc-readSection{
    display: flex;
    flex-direction: row;
        gap: 4px;
}
.lc-publishedSection{
    display: flex;
    flex-direction: row;
        gap: 4px;
}
.lc-description{
    
color: var(--Text-Text-default, #282828);

/* Figtree/body text/16 */
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-M, 16px);
font-style: normal;
font-weight: var(--font-weight-Regular, 400);
line-height: var(--font-line-height-L, 24px); /* 150% */
}
.lc-footerButtonSection{
    display:flex;
    flex-direction: row;
    gap:24px;
    padding-left: 16px;
}
.lc-verticalLine{
    margin-top: 134px;
    margin-left: -104px;
    width: 247.008px;
    height: 0px;
    border-top: 1px solid var(--Current-Colors-Neutrals-20, #EDEDED);
    transform: rotate(90deg);
    z-index: 1;
    position: absolute;
}
.lc-button-green{
    --sds-c-button-brand-color-background: #3A5E20; 
    --sds-c-button-brand-color-border: #3A5E20;
    --sds-c-button-brand-color-background-hover: #3a5e20;
    --sds-c-button-brand-color-border-hover: #3a5e20;
}
.lc-mlcButton{

    --sds-c-button-brand-color-background: #036FA6;
    --sds-c-button-brand-color-border: #036FA6;
    --sds-c-button-brand-color-background-hover: #036FA6;
    --sds-c-button-brand-color-border-hover: #036FA6;
}
.lc-button-green button{ 
    font-family: var(--font-family-New-font, Figtree);
}
.lc-mlcButton button{
    font-family: var(--font-family-New-font, Figtree);
}
.lc-tabHeading{    
    font-family: var(--font-family-New-font, Figtree);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    color: #037FB0;
}
.lc-tabHeadingSelect{
    color: #002855;
}

.lc-leftHeadingTextOnDefault{
font-family: var(--font-family-New-font, Figtree);
font-weight: 400;
font-style: SemiBold;
font-size: 20px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;

color: #282828
}

.lc-leftDescTextOnDefault{
color: #000;

font-family: var(--font-family-New-font, Figtree);
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
}
.lc-leftArticle:hover .lc-leftIcon{
    filter: brightness(0) saturate(100%) invert(11%) sepia(59%) saturate(4164%) hue-rotate(196deg) brightness(95%) contrast(105%);
}
.lc-leftArticle:hover .lc-leftHeadingTextOnDefault,
.lc-leftArticle:hover .lc-leftDescTextOnDefault {
    font-weight: 500;
}

.lc-leftHeadingTextSelect{
color: #282828;

/* Figtree/H3/20 */
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-XL, 20px);
font-style: normal;
font-weight: var(--font-weight-SemiBold, 600);
line-height: var(--font-line-height-L, 24px); /* 120% */
}
.lc-leftDescTextOnSelect{
color: #000;

/* Figtree/body text/16 */
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-M, 16px);
font-style: normal;
font-weight: var(--font-weight-Regular, 400);
line-height: var(--font-line-height-L, 24px); /* 150% */
}

.lc-leftHeadingTextOnHover{
color: #282828;

/* Figtree/H3/20 */
font-family: var(--font-family-New-font, Figtree);
font-size: var(--font-size-XL, 20px);
font-style: normal;
font-weight: var(--font-weight-SemiBold, 600);
line-height: var(--font-line-height-L, 24px); /* 120% */
}
.lc-leftHeadingSection{
    gap: 8px;
}
.lc-leftDescTextOnHover{
color: #000;

font-family: var(--font-family-New-font, Figtree);
font-weight: 400px;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
vertical-align: middle;
}
/*Small Desktop and Ipad*/
@media screen and (min-width: 1024px) and (max-width: 1300px){
    .lc-leftSection{
        flex-grow: 1;
        width:100%!important;
    }
    .lc-rightSection {
        flex-grow: 1;
        width: 100%!important;
    }
    .lc-articleImageContainer{
        flex-grow: 1;
        width:100%!important;
    }
    .lc-bannerContainer{
        flex-grow: 1;
        width: 100%!important;
    }
}
/*Tab*/
@media screen and (min-width: 768px) and (max-width: 991.98px){

    .lc-iconIteration{
        gap: 16px;
        padding-inline: 0px 0px; 
    }
    .lc-footerButtonSection{
        justify-content: center;
        padding-left: 0px;
    }
    .lc-articleImageContainer {
        flex-grow: 1;
        width: 100% !important;
    }
    .lc-leftSection{
        flex-grow: 1;
        width: 100% !important;
    }
    .lc-rightSection{
        flex-grow: 1;
        width: 100%;
    }
    .lc-bannerContainer{
        flex-grow: 1;
        width: 100%;
    }
}
/*Mobile*/
@media screen and (max-width: 767.98px){
    .lc-rightSection{
        display: none;
    }
    .lc-iconIteration{
        padding-inline: 0px 0px;
    }
    .lc-footerButtonSection{
        justify-content: center;
        flex-direction: column;
        padding-left: 0px;
    }
    .lc-button-green button{ 
        width:100%;
    }
    .lc-mlcButton button{
        width:100%;
    }
    .lc-iconContainer {
        padding: 8px;
    }
    .lc-iconSelect {
        color: #002855;
        border-bottom: 1px solid #002855;
    }
    .lc-bannerHeaderText {
        font-size: var(--font-size-XL, 18px);
    }
    .lc-bannerContainer {
        gap: 24px;
        padding-left: 8px;
    }
    .lc-downloadIcon{
        width: 16px!important;
        height: 16px!important;
    }
    .lc-leftArticle {
        gap: 8px;
    }
    .lc-leftArticleIcon {
        margin-bottom: 24px;
    }
    .lc-textContainer {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .lc-tabHeading {
        font-size: 14px;
    }

    .lc-leftHeadingTextOnDefault {
        font-size: 16px;
        line-height: var(--font-line-height-L, 18px);
    }

    .lc-leftDescTextOnDefault {
        font-size: var(--font-size-M, 14px);
    }

    .lc-leftHeadingTextSelect {
        font-size: var(--font-size-XL, 16px);
    }

    .lc-leftDescTextOnSelect {
        font-size: var(--font-size-M, 14px);
    }
}
/*LearningCenter ENDS*/
.WPHLayout.slds-var-p-around_x-small:hover a,
.WPHLayout.slds-var-p-around_x-small:hover span {
    color: #00A2E1 !important; 
}

.WPHLayout.slds-var-p-around_x-small:hover img {
    filter: invert(48%) sepia(85%) saturate(2135%) hue-rotate(167deg) brightness(98%) contrast(101%) !important;
}


.custom-box-style:has(input:checked) {
    background-color: #F0F9FF !important;
    border: 2px solid #036FA6 !important;
    cursor: pointer;
    outline: none;
}
.custom-box-style:focus-within {
    background-color: #F0F9FF !important;
    border: 2px solid #036FA6 !important;
    cursor: pointer;
    outline: none;
}
.custom-box-style:hover {
    background-color: #F0F9FF !important;
    border: 2px solid #036FA6 !important;
    cursor: pointer;
    outline: none;
}
.mobile-hover-effect {
    background-color: #F0F9FF !important;
    border: 2px solid #036FA6 !important;
}

/*ContactUS Component CSS STARTS*/
.con-componentContainer {
    max-width: 1288px;
    width: 100%;
    display: flex;
    gap: 40px;
}

.con-contactSection {
    align-items: center;
    gap: 40px;
}

.con-ContactDetailSection {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}

.con-firstSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.con-secondSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.con-callLabel {
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}

.con-callNumber {
    color: #036FA6!important;
    font-family: var(--font-family-New-font, Figtree)!important;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

.con-invocaSection {
    gap: 8px;
}
.con-slotSection{
    flex-direction: row;
    gap: 4px;
}
.con-slotText {
    color: #0A223F;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.con-officerText {
    color: #282828;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.con-HelpText {
    color: #282828;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
}

.con-imageSection {
    position: relative;
    display: flex;
    flex-direction: row;
}

.con-imageShadow {
    max-width: 672px;
    max-height: 336px;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -8px;
    right: -12px;
    background-color: #002855;
    border-radius: 20px;
    z-index: 1;
}

.con-conImage {
    object-fit: cover;
    border-radius: 20px;
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
    .con-contactSection {
        gap: 24px;
    }

    .con-imageShadow {
        right: -20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .con-componentContainer {
        flex-direction: column-reverse;
    }

    .con-contactSection {
        justify-content: center;
    }

    .con-imageSection {
        justify-content: center;
    }

    .con-imageShadow {
        width: 100%;
        position: absolute;
        bottom: -12px;
        right: -24px;
    }

}
@media screen and (min-width: 992px) and (max-width: 1199.98px){
    .con-slotText{
        font-size: 12px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
    .con-componentContainer {
        flex-direction: column-reverse;
    }
    .con-slotSection{
        flex-direction: row;
        gap: 4px;
    }
    .con-contactSection{
        justify-content: center;
    }
}

@media screen and (max-width: 575.98px) {
    .con-contactSection{
        gap: 0px;
        justify-content: center;
    }
    .con-componentContainer {
        flex-direction: column-reverse;
    }
    .con-slotSection{
        display: flex;
        flex-direction: column;
    }
    .con-mobileIcon{
        padding-top: 80px;
    }
    .con-callLabel {
        font-weight: 600;
        font-size: 18px;
        line-height: 24px;
    }
    .con-callNumber {
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
    }

    .con-slotText {
        font-size: 14px;
    }
    .con-HelpText {
        font-size: 24px;
    }
}
/*ContactUS Component CSS ENDS*/

@media screen and (max-width: 1024px){
        .vib-contents:nth-child(1)::after,
        .vib-contents:nth-child(2)::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: #ccc;
        }
        .tile-grid {display: flex !important; align-items: center;}
        .quiz-header, .quiz-sub-header {width: 100% !important; text-align: center !important;}
        .quizContent{display: flex; flex-direction: column; align-items: center; padding-left: 16px; padding-right: 16px;}
        .custom-box-style{width: 100%;}
        .quiz-img{width: 100% !important; height: 300px !important;}
        .con-imageShadow{
            width: 100%;
            bottom: -12px;
            right: -16px;
        }
        /* .benefits-hero{height: 320px !important;} */
        /* .benefits-content-card {
            display: flex !important;
            width: 100% !important;
            max-width: 544px !important;
            background: rgba(255, 255, 255, 0.80) !important;
            margin: 0 auto !important;
            margin-top: 0 !important; 
            box-sizing: border-box !important;
            position: relative !important;
        } */
        .action-item {
            /* right: 0;
            left: 0; */
            bottom: 5px;
            /* position: absolute;
            width: 100%; */
            text-align: center;
        }
    }
    @media screen and (max-width: 1400px){
        .quiz-content-pannel, .home-layout{width: 100% !important;}
        .wph-benefits, .faq-root, .con-componentContainer{max-width: 100% !important; width: 100% !important; padding-left: 20px; padding-right: 20px;}
    }
    @media screen and (min-width: 768px) and (max-width: 1024px){
        .quiz-img {
            width: 640px;
            height: 220px;
            flex-shrink: 0;
            align-self: stretch;
            border-radius: 15px;
            object-fit: cover;
        }  
    }
/*MSCDP-15924 BigWelcomePage STARTS*/
.cl-mainSection {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 120px;
    background: #FFFFFF;
}
.cl-HeroAndLogoSection {
    flex-direction: column;
}
.cl-penfedLogoSection {
    padding: 20px 0 20px 24px;
}
.cl-heroSection {
    position: relative;
}

.cl-overlayInfoSection {
    position: absolute;
    z-index: 2;
    left: 10%;
    right: 56%;
    align-self: center;
}
.cl-HeroHomeBuyingSection{
    gap:80px;
    flex-direction: column;
}
.cl-heroInfoSection {
    padding: 40px;
    gap: 20px;
    background: white;
    box-shadow: 0px 4px 4px 0px #00000040;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}
.cl-heroImage{
    flex-grow: 1;
}
.cl-headerFirstSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cl-headerHeading {
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #595959;
}
.cl-sectionHeading {
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 700;
    font-size: 36px;
    line-height: 40px;
    color: #282828;
}
.cl-buttonSection {
    display: flex;
    flex-direction: row;
    gap: 16px;
}
.cl-button-green {

     --sds-c-button-brand-color-background: #4D7E2B !important;
    --sds-c-button-brand-color-border: #4D7E2B !important;
    --sds-c-button-brand-color-background-hover: #4D7E2B !important;
    --sds-c-button-brand-color-border-hover: #4D7E2B !important;
}

.cl-button-blue {

    --sds-c-button-brand-color-background: #036FA6 !important;
    --sds-c-button-brand-color-border: #036FA6 !important;
    --sds-c-button-brand-color-background-hover: #036FA6 !important;
    --sds-c-button-brand-color-border-hover: #036FA6 !important;
}

.cl-button-green button, .cl-button-blue button {
    font-family: var(--font-family-New-font, Figtree) !important;
    border-radius: 8px;
 }
.cl-homeBuyingSection {
    flex-direction: column;
    align-items: center;
    gap: 56px;
}
.cl-sectionHeadingSection {
    gap: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cl-sectionHeadingOne {
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: #000000;
}
.cl-subHeading {
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #282828;
}
.cl-subHeadingBlack{
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
}

.cl-campaignSection {
    gap: 16px;
    display:flex;
    flex-direction: row;
}
.cl-campaignCard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    align-items: center;
    max-width: 400px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px 0 rgba(40, 40, 40, 0.25);
    border: 2px solid #e5e5e5;
    background: #ffffff;
    text-align: center;
}
.cl-campaignCard:hover{
    border-color: #0066cc;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}
.cl-stepTitle {
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #002855;
}
.cl-callSection {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 8px;
    gap: 8px;
}
.cl-callText {
    color: #282828;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
}
.cl-callNumber {
    color: #036FA6;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 700 !important;
    font-size: 24px;
    line-height: 32px;
}
.button-dimention button{
    font-family: var(--font-family-New-font, Figtree) !important;
    padding: 6px 22px!important;
}
.cl-stepInfo {
    text-align: center;
}
.cl-benefitSection {
    gap: 56px;
    flex-direction: row;
    align-items: center;
    padding: 64px;
    background: #E5F2FF;
}
.cl-videoContainer {
    padding-left: 120px;
}
.cl-videoClass {
    border-radius: 16px;
}
.cl-benefitCardSection {
    display: flex;
    gap: 24px;
    flex-direction: row;
}
.cl-benefitContainer {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.cl-benefitTitle {
    color: #282828;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 700;
    font-size: 28px;
    line-height: 32px;
}
.cl-benefitData {
    flex-direction: column;
    gap: 16px;
}
.cl-tickIcon {
    width: 20px !important;
    height: 20px !important;
    max-width: none;
    margin-bottom:8px;
}
.cl-benDesc {
    color: #282828 !important;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
}
.cl-disclosureSection {
    justify-content: space-around;
}

.cl-discSec{
    padding-inline: 8px;
}
.cl-discText{
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #282828;
}
.cl-discTextSection {
    gap: 16px;
    display: flex;
    flex-direction: column;
    padding: 12px;
}
.cl-discParaSection {
    gap: 8px;
    padding: 4px;
    color: #575757;
    font-family: var(--font-family-New-font, Figtree);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}
.cl-DiscTextColorBlack{
    font-size: 16px;
}
.cl-textPadding {
    padding-top: 8px;
}

@media screen and (min-width: 768px) and (max-width: 1199.98px) {
	.cl-mainSection{
	        gap:80px;
	    }
    .cl-overlayInfoSection {
        background: white;
        box-shadow: 0px 4px 4px 0px #00000040;
        border-radius: 10px;
        right: 4%;
        left:4%;
        top: 60%;
        justify-content: center;
    }
    .cl-heroInfoSection{
        padding:32px;
        gap:16px;
        background: none;
        box-shadow: none;
        border-radius: 0px;
        align-items: center;
    }
	.cl-HeroHomeBuyingSection{
	        gap:80px;
	    }
    .cl-sectionHeadingSection{
        padding-top: 60px;
        padding-inline: 96px;
        text-align: center;
    }
    .cl-homeBuyingSection{
        gap: 40px;
    }
    .cl-sectionHeading {
        font-size: 32px;
    }
    .cl-sectionHeadingOne {
        font-size: 28px;
        line-height: 32px;
    }
    .cl-benefitSection{
        flex-direction: column-reverse;
    }
    .cl-headerFirstSection{
        align-items: center;
    }

    .cl-benefitCardSection {
        justify-content: center;
    }
    .cl-videoContainer{
        padding-left: 0px;
    }

    .cl-campaignSection {
        padding-inline: 0px;
        flex-direction: column;
    }
}

@media screen and (max-width: 767.98px){
	.cl-mainSection{
	        gap:60px;
	    }
    .cl-penfedLogoSection{
        padding: 24px 0 24px 16px;
    }
    .cl-overlayInfoSection {
        background: white;
        box-shadow: 0px 4px 4px 0px #00000040;
        border-radius: 10px;
        right: 2%;
        left:2%;
        top: 70%;
        justify-content: center;
    }
    .cl-heroInfoSection{
        padding:24px;
        gap:16px;
        background: none;
        box-shadow: none;
        border-radius: 0px;
        align-items: center;
        text-align: center;
    }
    .cl-heroMobile{
        width:100%;
    }
    .cl-HeroAndLogoSection{
        width: 100%;
        flex-grow: 1;
    }
	.cl-HeroHomeBuyingSection{
        gap:80px;
    }
    .step-card{
        text-align: center;
    }
    .headerOverlay{
        padding: 8px!important;
        top: 125%!important;
    }
    .overlayCardBackground {
        padding: 24px!important;
        gap: 16px!important;
    }

    .cl-headerHeading {
        display: none;
    }

    .cl-sectionHeading {
        font-size: 24px;
        line-height: 32px;
    }

    .cl-buttonSection {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width:100%;
    }
    .cl-button-green button, .cl-button-blue button{
        width: 100%!important;
        display: block;
    }

    .cl-campaignSection {
        padding-inline: 0px;
        flex-direction: column;
    }

    .cl-benefitSection {
        flex-direction: column-reverse;
        padding: 8px;
        padding-top: 16px;
    }

    .cl-videoContainer {
       padding: 4px 0px 4px 0px;
    }

    .cl-sectionHeadingSection {
        text-align: center;
        padding-bottom: 0px;
        padding-inline: 8px;
        padding-top: 0px;
    }
    .cl-sectionHeadingOne{
        font-size: 24px;
        line-height: 32px;
    }
    .cl-homeBuyingSection{
        gap:40px;
        padding: 160px 8px 0;
    }
    .cl-benefitTitle{
        text-align: center;
    }
    .cl-disclosureSection{
        padding: 8px;
    }
}
/*MSCDP-15924 BigWelcomePage ENDS*/

/* Mobile / Tablet: show a single #ccc divider between the first two vib cards */
@media (max-width: 1024px) {
    .vib-section {
        display: block;
    }
    .vib-contents {
        padding: 0.75rem 0;
    }
    /* Add divider under the first and second cards so they appear
       between card 1-2 and 2-3 on mobile/tablet */
    .vib-section .vib-contents:nth-child(1),
    .vib-section .vib-contents:nth-child(2) {
        border-bottom: 1px solid #ccc;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}
/*-------------------------------------------------------
    scheduleAppointmentPopup.css
    Schedule a Call Button Popup - Start
------------------------------------------------------- */

.sap-scheduleSection {
	margin-top: 12px;
}

/* Link variant - native button reset so host-page styles apply naturally */
.sap-link-trigger {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	-webkit-appearance: none;
	appearance: none;
}

/* Flow modal sizing - fixed dimensions prevent resize/shake on screen transitions */
.sap-flowModal {
	position: fixed !important;
	z-index: 9000 !important;
}

.sap-flowModal .slds-modal__container {
	max-width: 62rem !important;
	width: 92% !important;
	/* Prevent the container itself from animating size */
	will-change: transform;
	transform: translateZ(0);
	/* Round popup border */
	border-radius: 16px !important;
	overflow: visible !important;
	display: flex !important;
	flex-direction: column !important;
	/* Fixed height keeps both Screen 1 and Screen 2 the same popup size;
	   700px is tall enough for Screen 1 to show all content without scrolling;
	   Screen 2 (longer form) scrolls within this same fixed height */
	height: 700px !important;
	max-height: 90vh !important;
}

.sap-flowModal .slds-modal__content {
	/* Outer scroll: inner panels do NOT scroll individually */
	overflow-y: auto !important;
	flex: 1 !important;
	border-radius: 16px !important;
}

/* Close button row - aligned to the right inside modal content */
.sap-closeSection {
	padding-bottom: 4px;
}

.sap-closeBtn {
	color: var(--lwc-colorTextDefault, #3e3e3c);
}

/* Backdrop sits behind the modal */
.slds-backdrop {
	z-index: 8000 !important;
}

/* Reset native <dialog> browser defaults and force full-viewport centering.
   <dialog open> uses UA position:absolute by default — override to fixed so
   SLDS slds-modal flex-centering works correctly. */
dialog.sap-flowModal {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	color: inherit;
}

/* -------------------------------------------------------
  Schedule a Call Button Popup - End
------------------------------------------------------- */
/* -------------------------------------------------------
  scheduleAppointment.css
  Schedule a Call component Popup - Start
   ------------------------------------------------------- */

/* --- Outer wrapper --- */
.screen-wrapper {
	width: 100%;
	box-sizing: border-box;
	align-content: flex-start;
}

/* --- Calendar day slot wrapper --- */
.day-cell-slot { display: contents; }

/* --- Empty cells --- */
.day-cell.empty {
	visibility: hidden;
	pointer-events: none;
}

/* --- Popup container --- */
.screen1-container {
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	/* Override slds-box padding from SLDS base styles */
	--slds-c-card-spacing-block-start: 0 !important;
	--slds-c-card-spacing-inline-start: 0 !important;
}

/* Panels - shared */
.screen1-panel {
	box-sizing: border-box !important;
}

/* --- Separators: desktop side-by-side --- */
@media (min-width: 48em) {
	.info-panel-col {
		border-right: 1px solid #d1d9e6 !important;
	}
}

/* --- Separators: mobile stacked --- */
@media (max-width: 47.9375em) {
	.info-panel-col {
		border-bottom: 1px solid #d1d9e6 !important;
	}
}

/* --- Calendar inner panel --- */
.calendar-inner {
	box-sizing: border-box;
	width: 100%;
}

.calendar-inner.form-scrollable {
	width: 100%;
	box-sizing: border-box;
}

/* --- Purpose native select --- */
.purpose-select {
	width: 100%;
	height: 2.25rem;
	padding: 0 1rem;
	font-size: 0.875rem;
	color: #0b1c38;
	background-color: #fff;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7a8d'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.15s;
}

.purpose-select:focus {
	outline: none;
	border-color: #0176d3;
	box-shadow: 0 0 0 1px #0176d3;
}

.purpose-select.has-error {
	border-color: rgb(194, 57, 52);
	box-shadow: 0 0 0 1px rgb(194, 57, 52);
}

.purpose-error-msg {
	font-size: 0.75rem;
	color: rgb(194, 57, 52);
	margin-top: 4px;
	display: block;
}

/* --- Info panel bold text helper --- */
.info-text-bold {
	font-weight: 700 !important;
	font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
}

/* --- Left Info Panel --- */
.info-panel {
	width: 100%;
	box-sizing: border-box;
	padding: clamp(12px, 3vw, 32px) clamp(12px, 2vw, 24px);
}

.info-panel p,
.info-panel .slds-text-body_regular {
	font-size: 0.8rem !important;
}

.scb-logo {
	max-width: min(160px, 100%);
	height: auto;
	display: block;
}

.info-panel h1 {
	white-space: nowrap;
	font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
}

.calendar-inner h2,
.timeslots-panel h3 {
	font-family: 'FigtreeBold', Arial, Helvetica, sans-serif;
}

/* --- Calendar Grid --- */
.calendar-grid { margin-bottom: 20px; }

.day-header {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	margin-bottom: 4px;
	width: 100%;
}

.day-header-cell {
	font-size: clamp(9px, 1.5vw, 11px) !important;
	font-weight: 600;
	color: #6b7a8d !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: clamp(4px, 1vw, 8px) 0;
	text-align: center;
	display: block;
}

.day-cells {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	width: 100%;
}

.day-cell {
	width: 100%;
	aspect-ratio: 1 / 1;
	max-width: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(13px, 2vw, 16px);
	font-weight: 500;
	border-radius: 50%;
	cursor: default;
	transition: all 0.15s;
	margin: 0 auto;
	user-select: none;
	box-sizing: border-box;
	background: none !important;
	border: none !important;
	padding: 0;
	font-family: inherit;
	line-height: 1;
	color: #0b1c38 !important;
}

.day-cell.available {
	color: #0176d3 !important;
	font-weight: 700;
	cursor: pointer;
	background: rgba(1, 118, 211, 0.1) !important;
}
.day-cell.today {
	background: rgba(1, 118, 211, 0.1) !important;
	border-radius: 50%;
}
.day-cell.today.available {
	background: rgba(1, 118, 211, 0.1) !important;
}
.day-cell.available:hover {
	background: rgba(1, 118, 211, 0.2) !important;
	color: #0176d3 !important;
}
.day-cell.selected {
	background: #0176d3 !important;
	color: #FFFFFF !important;
	font-weight: 700;
}
.day-cell.unavailable {
	color: #6b7a8d !important;
}

/* --- Time Slots Panel --- */
.timeslots-panel {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.75rem clamp(8px, 1.5vw, 16px);
}

/* Invisible spacer that reserves the h2 heading height so the "< Month >" nav
   in the calendar col aligns with the selected-date label in the timeslots col.
   Empty block elements collapse to 0px — min-height forces the correct offset.
   Value = slds-text-heading_small override (1.25rem) × SLDS heading line-height (1.25) */
.timeslots-spacer {
	visibility: hidden;
	min-height: 1.5625rem;
}

/* --- Override SLDS neutral button inside slots list --- */
.slots-list .slds-button_neutral {
	border-color: #0176d3 !important;
	color: #0176d3 !important;
	font-weight: 700 !important;
	font-family: 'FigtreeBold', Arial, Helvetica, sans-serif !important;
}

.slots-list .slds-button_neutral:hover:not(:disabled) {
	background: rgba(1, 118, 211, 0.1) !important;
	border-color: #0176d3 !important;
	color: #0176d3 !important;
}

.slots-list .slds-button_neutral:disabled {
	border-color: #d1d9e6 !important;
	color: #6b7a8d !important;
	font-weight: 400 !important;
	opacity: 0.5;
}

/* Selected time slot */
.slot-selected-btn {
	background: rgba(0, 0, 0, 0.6) !important;
	border-color: transparent !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	font-family: 'FigtreeBold', Arial, Helvetica, sans-serif !important;
	cursor: default !important;
	pointer-events: none;
}

.slots-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slot-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

/* --- PenFed branded buttons --- */
.penfed-button {
	font-family: 'FigtreeRegular', Arial, Helvetica, sans-serif;
	font-weight: 700;
	border-radius: 8px;
	padding: 4px 20px;
	display: inline-block;
	white-space: nowrap;
}

.penfed-button:hover { text-decoration: none !important; }

/* Override global .slds-text-heading_small font-size for this component */
.slds-text-heading_small {
	font-size: 1.25rem !important;
}

/* -------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------- */

@media (max-width: 374px) {
	.info-panel h1 { white-space: normal; font-size: 14px; }
	.info-panel { padding: 10px; }
	.day-cell { max-width: 36px; font-size: 11px; }
	.day-header-cell { font-size: 8px !important; letter-spacing: 0; padding: 2px 0; }
	.penfed-button { padding: 0 10px; font-size: 12px; }
	.slds-text-heading_small { font-size: 13px !important; }
}

@media (min-width: 375px) and (max-width: 424px) {
	.info-panel h1 { white-space: normal; font-size: 15px; }
	.info-panel { padding: 12px; }
	.day-cell { max-width: 40px; font-size: 12px; }
	.day-header-cell { font-size: 9px !important; }
	.penfed-button { padding: 0 12px; }
}

@media (min-width: 425px) and (max-width: 767px) {
	.info-panel h1 { white-space: normal; font-size: 15px; }
	.info-panel { padding: 12px 14px; }
	.day-cell { max-width: 44px; font-size: 13px; }
	.penfed-button { padding: 0 14px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.info-panel h1 { white-space: normal; }
	.day-cell { max-width: 48px; font-size: 14px; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
	.day-cell { max-width: 52px; font-size: 15px; }
}

@media (min-width: 1440px) and (max-width: 2559px) {
	.day-cell { max-width: 56px; font-size: 16px; }
}

@media (min-width: 2560px) {
	.day-cell { max-width: 64px; font-size: 18px; }
	.day-header-cell { font-size: 13px !important; }
	.info-panel { padding: 32px 28px; }
	.info-panel h1 { font-size: 22px; }
	.penfed-button { padding: 6px 28px; font-size: 16px; }
}
/* -------------------------------------------------------
  Schedule a Call component Popup - End
------------------------------------------------------- */