/* =========================================================
   KEYHELD ADVISORY FOCUS
   Using MUZEX Call To Action 3
   Font: Cormorant Garamond
========================================================= */


/* =========================================================
   ELEMENTOR WIDGET
========================================================= */

.elementor-widget-muzex_cta3 {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.elementor-widget-muzex_cta3
> .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
	
}


/* =========================================================
   SECTION
========================================================= */

.cta-three.keyheld-advisory-cta {
    position: relative;

    width: 100%;

    margin: 0 !important;

    padding: 35px 0 !important;

    background: #f8f5ed;

    font-family: "Cormorant Garamond", Georgia, serif !important;
}


.cta-three.keyheld-advisory-cta,
.cta-three.keyheld-advisory-cta h3,
.cta-three.keyheld-advisory-cta p,
.cta-three.keyheld-advisory-cta li,
.cta-three.keyheld-advisory-cta span {
    font-family: "Cormorant Garamond", Georgia, serif !important;
}


/* =========================================================
   OUTER CONTAINER
========================================================= */

.cta-three.keyheld-advisory-cta > .container {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding-left: 30px;
    padding-right: 30px;

    box-sizing: border-box;
}


/* =========================================================
   NAVY BOX
   Override original negative margins
========================================================= */

.cta-three.keyheld-advisory-cta .inner-container {
    position: relative;

    display: grid !important;

    grid-template-columns:
        210px
        minmax(0, 1fr);

    align-items: start;

    column-gap: 70px;

    width: 100%;

    margin: 0 !important;

    padding:
        75px
        70px
        75px !important;

    box-sizing: border-box;

    background-color: #102e57 !important;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    box-shadow: none !important;

    z-index: 1;
}


/* =========================================================
   GOLD HORIZONTAL LINE
========================================================= */

.cta-three.keyheld-advisory-cta
.inner-container::before {
    content: "";

    position: absolute;

    top: 96px;
    left: -30px;

    width: 60px;
    height: 1px;

    background: #c9a668 !important;
}


/* =========================================================
   LEFT TITLE
   Canva: 34.1
========================================================= */

.cta-three.keyheld-advisory-cta
.cta-three__title {
    position: relative;

    top: 0 !important;

    width: 100%;
}


.cta-three.keyheld-advisory-cta
.cta-three__title h3 {
    width: 190px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;

    font-size: 34.1px !important;
    line-height: 1.3 !important;

    font-weight: 600 !important;

    letter-spacing: 0;

    color: #c9a668 !important;
}


/* Also make any span inside title gold */

.cta-three.keyheld-advisory-cta
.cta-three__title h3 span {
    color: #c9a668 !important;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.cta-three.keyheld-advisory-cta
.cta-three__content {
    width: 100%;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   INTRO
   Canva: 17.9
========================================================= */

.cta-three.keyheld-advisory-cta
.cta-three__content > p,
.cta-three.keyheld-advisory-cta
.cta-three__intro {
    width: 100%;
    max-width: 760px;

    margin: 3px 0 32px !important;
    padding: 0 !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;

    font-size: 17.9px !important;
    line-height: 1.5 !important;

    font-weight: 500 !important;

    letter-spacing: 0;

    color: #ffffff !important;
}


/* =========================================================
   TWO FEATURE COLUMNS
========================================================= */

.cta-three.keyheld-advisory-cta
.cta-three__list-wrap {
    display: grid !important;

    /*
     * Two proper columns instead of original 3 × 32%.
     * Gives long items enough room to remain one line.
     */
    grid-template-columns:
        repeat(2, minmax(250px, 1fr));

    align-items: start;

    column-gap: 55px;
    row-gap: 0;

    width: 100%;
    max-width: 760px;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   INDIVIDUAL LIST
========================================================= */

.cta-three.keyheld-advisory-cta
.cta-three__list {
    width: 100% !important;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
}


/* Remove parent-theme left margin */

.cta-three.keyheld-advisory-cta
.cta-three__list:not(:first-child) {
    margin-left: 0 !important;
}


.cta-three.keyheld-advisory-cta
.cta-three__list:nth-child(1) {
    flex: none !important;
}


/* =========================================================
   FEATURE ITEM
   Canva: 17.2
========================================================= */

.cta-three.keyheld-advisory-cta
.cta-three__list li {
    position: relative;

    margin: 0 !important;

    padding: 0 0 0 22px !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;

    font-size: 17.2px !important;
    line-height: 1.4 !important;

    font-weight: 400 !important;

    letter-spacing: 0;

    color: #b9c0ca !important;

    /*
     * Prevent the desktop wrapping shown
     * in your screenshot.
     */
    white-space: nowrap;
}


/* Vertical space between points */

.cta-three.keyheld-advisory-cta
.cta-three__list li + li {
    margin-top: 13px !important;
}


/* =========================================================
   GOLD BULLET
========================================================= */

.cta-three.keyheld-advisory-cta
.cta-three__list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #c9a668 !important;

    transform: translateY(-50%);
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .cta-three.keyheld-advisory-cta
    .inner-container {
        grid-template-columns:
            200px
            minmax(0, 1fr);

        column-gap: 50px;

        padding:
            65px
            55px !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__title h3 {
        width: 180px !important;

        font-size: 32px !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__content > p {
        font-size: 17px !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__list-wrap {
        column-gap: 35px;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__list li {
        font-size: 16.5px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .cta-three.keyheld-advisory-cta {
        padding: 30px 0 !important;
    }


    .cta-three.keyheld-advisory-cta
    > .container {
        padding-left: 25px;
        padding-right: 25px;
    }


    .cta-three.keyheld-advisory-cta
    .inner-container {
        grid-template-columns:
            180px
            minmax(0, 1fr);

        column-gap: 35px;

        padding:
            55px
            40px !important;
    }


    .cta-three.keyheld-advisory-cta
    .inner-container::before {
        left: -25px;

        width: 45px;

        top: 75px;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__title h3 {
        width: 160px !important;

        font-size: 29px !important;
        line-height: 1.3 !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__content > p {
        margin-bottom: 26px !important;

        font-size: 16.5px !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__list-wrap {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 25px;
    }


    /*
     * Tablet may need wrapping because the screen
     * is narrower.
     */

    .cta-three.keyheld-advisory-cta
    .cta-three__list li {
        font-size: 16px !important;

        white-space: normal;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .cta-three.keyheld-advisory-cta {
        padding: 25px 0 !important;
    }


    .cta-three.keyheld-advisory-cta
    > .container {
        padding-left: 20px;
        padding-right: 20px;
    }


    .cta-three.keyheld-advisory-cta
    .inner-container {
        display: block !important;

        padding:
            45px
            28px !important;
    }


    .cta-three.keyheld-advisory-cta
    .inner-container::before {
        top: 62px;
        left: -20px;

        width: 35px;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__title {
        margin-bottom: 28px;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__title h3 {
        width: 100% !important;

        font-size: 27px !important;
        line-height: 1.25 !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__content > p {
        max-width: none;

        margin-bottom: 26px !important;

        font-size: 16.5px !important;
        line-height: 1.55 !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__list-wrap {
        grid-template-columns: 1fr;

        row-gap: 13px;

        max-width: none;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__list li {
        font-size: 16px !important;

        white-space: normal;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .cta-three.keyheld-advisory-cta
    > .container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .cta-three.keyheld-advisory-cta
    .inner-container {
        padding:
            38px
            22px !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__title h3 {
        font-size: 25px !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__content > p {
        font-size: 16px !important;
    }


    .cta-three.keyheld-advisory-cta
    .cta-three__list li {
        font-size: 15.5px !important;
    }

}


/* =========================================================
   CTA 3 - NORMAL SECTION FLOW FIX
   Prevent overlap with previous / next sections
========================================================= */


/* Elementor widget itself */

.elementor-widget-muzex_cta3 {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1 !important;
}


.elementor-widget-muzex_cta3
> .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   CTA SECTION
========================================================= */

.elementor-widget-muzex_cta3
.cta-three {
    position: relative !important;

    width: 100% !important;

    margin: 0 !important;

    padding-top: 55px !important;
    padding-bottom: 55px !important;

    background: #f8f5ed !important;

    z-index: 1 !important;

    overflow: visible !important;
}


/* =========================================================
   CTA CONTAINER
========================================================= */

.elementor-widget-muzex_cta3
.cta-three > .container {
    width: 100% !important;
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 30px !important;
    padding-right: 30px !important;

    box-sizing: border-box;
}


/* =========================================================
   CRITICAL FIX
   Muzex originally uses:
   margin-top: -190px;
   margin-bottom: -190px;
========================================================= */

.elementor-widget-muzex_cta3
.cta-three .inner-container {
    position: relative !important;

    width: 100% !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    z-index: 1 !important;

    box-sizing: border-box;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .elementor-widget-muzex_cta3
    .cta-three {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }


    .elementor-widget-muzex_cta3
    .cta-three > .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .elementor-widget-muzex_cta3
    .cta-three {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }


    .elementor-widget-muzex_cta3
    .cta-three > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .elementor-widget-muzex_cta3
    .cta-three {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }


    .elementor-widget-muzex_cta3
    .cta-three > .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

}