/* Web Stories Styles */

.page-title {
    color: var(--Text, #171717);
    text-align: center;
    font-family: spirits-soft;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.72px;
    padding-top: 40px;
}
#floating-whatsapp{
    z-index: 9999;
}
.page-subtitle {
    color: var(--Secondary-text-Dark, #212120);
    text-align: center;
    font-family: "Fira Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}
.story-category {
   padding: 40px 0;
    margin-inline: auto;
    width: var(--WIDTH);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    align-self: stretch;
    flex-wrap: wrap;
}
.story-category>button{
    display: flex;
    height: 35px;
    padding: 5px 10px;
    align-items: center;
    gap: 8px;
    border: .5px solid var(--1_Primary, #000);
    background: var(--White_OLD, #fff);
    color: var(--1_Primary, #000);
    text-align: center;
    font-family: Fira Sans;
    min-width: 55px;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 25px;
    justify-content: center;
    cursor: pointer;
}
.story-category>button.active {
    box-shadow: 3px 3px 0 0 #1a1a1d;
}
.web-stories-container {
    max-width: 1440px;
    margin: auto;
    width: 80%;
}

.web-stories-container .row{
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(4, 1fr);
}
.WebStories_CardImg__ZbvEh {
    width: 100%;
    height: 470px;
    border-radius: 4px;
    object-fit: cover;
}
.WebStories_Content__0mRxx {
    position: absolute;
    bottom: 14px;
    width: 90%;
    margin-inline: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.WebStories_ContentDate__oEqdQ, .WebStories_ContentTitle__4l3FY {
    color: var(--neutral-gray-grey-white, #fff);
    font-style: normal;
    font-weight: 400;
}
.WebStories_Card__f14j3{
    position: relative;
}
.WebStories_ContentDate__oEqdQ {
    font-family: Fira Sans;
    font-size: 14px;
    line-height: 22px;
}
.WebStories_ContentTitle__4l3FY {
    font-family: spirits-soft;
    font-size: 20px;
    line-height: 160%;
    letter-spacing: .4px;
    margin-bottom: 22px;
}
.WebStories_ContentCategory__ZMg51 {
    display: flex;
    justify-content: space-between;
    --CATEGORY_COLOR: #d1993e;
    color: var(--old-colours-White, #fff);
    font-family: var(--Font-Family-Body, "DM Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.WebStories_Category__H9KKs {
    display: inline-flex;
    padding: 4px 12px;
    justify-content: center;
    gap: 10px;
    border-radius: 1px;
    background: var(--CATEGORY_COLOR);
    align-items: center;
    font-family: League Spartan, serif;
}
.WebStories_ContentCategory__ZMg51>img {
    width: 24px;
    height: 30px;
}
.WebStories_CTAContainer__jP5B_ {
    padding: 100px 0;
    width: 80%;
    margin: auto;
    max-width: 1440px;
}
.CTA_Container__oGdE2 {
    margin-inline: auto;
    display: flex;
    padding: var(--spacing-40, 40px);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-24, 24px);
    border-radius: var(--spacing-8, 8px);
    background: var(--old-colours-Green-4_Green, #22443d);
    position: relative;
    z-index: 1;
}
.CTA_ctaContent__hw5Zc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8, 8px);
    flex: 1 0 0;
}
.CTA_ctaContent__hw5Zc>h2 {
    color: var(--neutral-gray-grey-white, #fff);
    font-family: var(--font-family-Title, "spirits-soft");
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px;
}
.CTA_whiteCta__6gs6b, .CTA_whiteCta__6gs6b:after {
    border-radius: 4px;
    border: 1px solid var(--neutral-gray-grey-white, #fff);
}
.CTA_whiteCta__6gs6b {
    display: flex;
    padding: var(--components-button-default-btn-vertical-padding, 12px) var(--components-button-default-btn-horizontal-padding, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--components-button-default-btn-items-spacing, 12px);
    align-self: stretch;
    background: var(--neutral-gray-grey-white, #fff);
    position: relative;
    color: var(--neutral-gray-grey-950, #0a0a0a);
    text-align: center;
    font-family: Fira Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    cursor: pointer;
}
.CTA_Container__oGdE2:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: var(--old-colours-Green-5_Green, #162f2d);
    clip-path: polygon(0 0, 100% 0, 100% 500%);
    border-top-right-radius: var(--spacing-12, 8px);
    border-bottom-right-radius: var(--spacing-12, 8px);
    z-index: -1;
}
CTA_ContainerMob__ofu3O {
    display: none;
}
.CTA_ctaContent__hw5Zc {
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8, 8px);
    flex: 1 0 0;
}
.CTA_ctaContent__hw5Zc>h2 {
    color: var(--neutral-gray-grey-white, #fff);
    font-family: var(--font-family-Title, "spirits-soft");
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px;
}
.deskto-invisible {
    display: none;
}

.WebStories_Card__f14j3:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, #000);
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 4px;
}

#pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.pagination-btn.disabled {
    filter: invert(0.6);
}
.pagination-btn {
    cursor: pointer;
    color: rgb(41, 41, 40);
    text-align: center;
    font-family: "Fira Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding: 2px 10px 0px;
    margin: 0px 2px;
    border-radius: 1px;
}

.pagination-btn.current-page {
    background-color: rgb(41, 41, 40);
    color: rgb(255, 255, 255);
}


@media screen and (max-width: 540px) {
    .web-stories-container{
        width: 85%;
    }
    .WebStories_FilterContainer__cUuoD {
        width: 100%;
        padding: 20px calc((100% - var(--WIDTH)) / 2);
        flex-wrap: nowrap;
        overflow-x: scroll;
        justify-content: unset;
    }
    .WebStories_FilterContainer__cUuoD>button {
        flex-shrink: 0;
        justify-content: center;
    }
    .category-overflow {
        overflow-x: scroll;
    }
    .story-category {
        min-width: max-content;
        justify-content: flex-start;
        margin: 0 30px;
        padding: 20px 0;
    }
    .page-title {
        font-size: 24px;
        padding: 0 30px;
        padding-top: 40px;
        line-height: 125%;
        font-style: normal;
        font-weight: 400;
        letter-spacing: .72px;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }
    .page-subtitle {
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 28px;
        text-align: left !important;
        padding: 0 30px;
    }
    .CTA_ContainerMob__ofu3O {
        display: flex;
        flex-direction: column;
        width: 85%;
        margin-inline: auto;
    }
    .CTA_ctaContent__hw5Zc {
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        gap: 5px;
        padding: 16px;
        background: var(--old-colours-Green-4_Green, #22443d);
    }
    .CTA_Container__oGdE2{
        display: none;
    }
    .CTA_btnCtaMob__bbilu {
        background: var(--old-colours-Green-5_Green, #162f2d);
        padding: var(--spacing-24, 24px) var(--spacing-16, 16px);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .CTA_ctaContent__hw5Zc>h2 {
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
    }
    .CTA_whiteCta__6gs6b {
        margin-inline: auto;
    }
    a.WebStories_Card__f14j3 {
        max-width: 320px;
        position: static;
    }
    .WebStories_CTAContainer__jP5B_ {
        padding: 60px 0;
        width: 100%;
    }

    /* Swiper js for stories */
    .swiper-slide {
    width: 75vw;
    flex-shrink: 0;
    }

    .WebStories_CardImg__ZbvEh {
        width: 100%;
        height: inherit;
        border-radius: 4px;
        height: 470px;
    }
    nav.page-content.pagination{
        display: none;
    }
    .pagination-wrap {
    margin-top: 20px;
    text-align: center;
    }

    .pagination-btn {
    margin: 0 5px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    }

    .pagination-btn.active {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    }
}

/* Contact financial advisor */

.popup-overlay {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}

.CTAForm_modal_btn__lw58_:disabled {
  background: #a3a3a3;
  cursor: not-allowed;
  border-color: #a3a3a3;
}

.popup-content {
  background: #fff;
  padding: 32px 24px;
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.popup-close {
  /* position: absolute; */
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

.CTAForm_modal_content__gDfYY {
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    padding: 40px 16px;
    max-width: 425px;
    width: 100%;
}
.CTAForm_modal__mueoZ, .CTAForm_modal_content__gDfYY {
    display: flex;
    justify-content: center;
    align-items: center;
}
.CTAForm_modal_content_title_container__UESN_ {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
}
.CTAForm_modal_input_container__BpfhS {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
    margin-bottom: 24px;
}
.CTAForm_modal_input_container__BpfhS {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
    margin-bottom: 24px;
}
.CTAForm_modal_terms__3I3vJ {
    color: var(--neutral-gray-grey-800, #262626);
    text-align: center;
    font-family: var(--font-family-Body, "Fira Sans");
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 18px;
    margin-top: 16px;
    margin-bottom: 12px;
}
.CTAForm_modal_btn_container__bKUva {
    position: relative;
}
.CTAForm_modal_content_title__WaAHw {
    width: 100%;
    text-align: center;
    color: var(--neutral-gray-grey-950, #0a0a0a);
    font-family: var(--font-family-Title, "spirits-soft");
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}
.CTAForm_modal_input_container_title__RRYRa {
    color: var(--text-primary, #0a0a0a);
    font-family: var(--font-family-Body, "Fira Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.CTAForm_modal_input_container_asterisk__k859W {
    color: var(--Color-Primary-500, #ff385c);
    font-family: Fira Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}

.CTAForm_modal_input_name__qAcKV {
    border-radius: var(--spacing-4, 4px);
    border: 1px solid var(--components-InputFields-idle-border, #a3a3a3);
    padding: 16px;
}
.CTAForm_modal_input_container_title__RRYRa {
    color: var(--text-primary, #0a0a0a);
    font-family: var(--font-family-Body, "Fira Sans");
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
.CTAForm_modal_input_container_asterisk__k859W {
    color: var(--Color-Primary-500, #ff385c);
    font-family: Fira Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}

.CTAForm_modal_input_number__oZBXG {
    width: 80%;
}
.CTAForm_modal_input_name__qAcKV, .CTAForm_modal_input_number__oZBXG {
    background: var(--components-InputFields-background, #fff);
    color: var(--components-InputFields-contained-elements, #0a0a0a);
    font-family: var(--font-family-Body, "Fira Sans");
    font-size: var(--font-size-button-input-button-xs, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
.CTAForm_modal_btn__lw58_, .CTAForm_modal_btn_border__vfXpj {
    height: 40px;
    width: 230px;
    border-radius: 4px;
    border: 1px solid var(--components-button-all-disabled, #a3a3a3);
}
.CTAForm_modal_btn__lw58_ {
    position: relative;
    z-index: 1;
    background: var(--components-button-all-disabled, #a3a3a3);
    color: var(--text-invert-primary, #fff);
    text-align: center;
    font-family: var(--font-family-Body, "Fira Sans");
    font-size: var(--font-size-button-input-button-sm, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}
.CTAForm_modal_btn_border__vfXpj {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 0;
}
.CTAForm_modal_btn__lw58_, .CTAForm_modal_btn_border__vfXpj {
    height: 40px;
    width: 230px;
    border-radius: 4px;
    border: 1px solid var(--components-button-all-disabled, #a3a3a3);
}
.CTAForm_modal_content__gDfYY {
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    padding: 40px 16px;
    max-width: 425px;
    width: 100%;
}
.CTAForm_modal__mueoZ, .CTAForm_modal_content__gDfYY {
    display: flex;
    justify-content: center;
    align-items: center;
}
.CTAForm_submit_modal__7QxOm {
    display: flex
;
    flex-direction: column;
    align-items: center;
}
.CTAForm_submit_title__7LTBh {
    color: var(--neutral-gray-grey-950, #0a0a0a);
    text-align: center;
    font-family: var(--font-family-Title, "spirits-soft");
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    padding-top: 16px;
}
.CTAForm_submit_back_btn__5iJ_f, .CTAForm_submit_text__6KHAW {
    text-align: center;
    font-family: var(--font-family-Body, "Fira Sans");
    font-style: normal;
}
.CTAForm_submit_text__6KHAW {
    color: var(--neutral-gray-grey-800, #262626);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    padding-top: 8px;
}
.CTAForm_submit_back_btn__5iJ_f {
    color: var(--components-button-primary, #262626);
    font-size: var(--font-size-button-input-button-xs, 16px);
    font-weight: 500;
    line-height: 100%;
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.CTAForm_submit_back_btn__5iJ_f, .CTAForm_submit_text__6KHAW {
    text-align: center;
    font-family: var(--font-family-Body, "Fira Sans");
    font-style: normal;
}
.CTAForm_modal__mueoZ, .CTAForm_modal_content__gDfYY {
    display: flex;
    justify-content: center;
    align-items: center;
}
.CTAForm_modal__mueoZ {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    z-index: 100;
}
.CTA_whiteCta__6gs6b:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 2px;
    top: 2px;
}
.no-scroll {
    overflow: hidden;
}

@media screen and (max-width: 540px) {
    .CTAForm_modal_content__gDfYY{
        margin: 0 25px;;
    }
    .CTAForm_modal_content_title__WaAHw {
        font-size: 18px;
    }
    .CTAForm_modal_btn_border__vfXpj {
        top: 2px;
        left: 2px;
    }
    #pagination{
        margin: 0;
        display: none;
    }
}